/* ============================================================================
   ventaneros.cl — sistema visual (v2, tema claro).
   CSS plano, sin preprocesador y sin build.
   ----------------------------------------------------------------------------
   IDENTIDAD
   Fondo blanco, tinta verde muy oscura (#10231C) y un solo acento verde
   (#0E7C4A) para lo que se toca: WhatsApp, "Usar mi ubicación", pines. Los
   estados activos (chip marcado, tarjeta y pin seleccionados) van en tinta,
   no en verde: así "seleccionado" y "acción" nunca se confunden.

   COMPATIBILIDAD CON mapa.js Y Default.aspx
   Se mantienen TODAS las clases que usa el JavaScript: .pin, .pin--activo,
   .pin-yo, .grupo, .ficha.activa, .ficha__dist, .ficha__ver,
   .ubicacion[data-estado], .chip[aria-pressed], #vacio, etc. El pin conserva
   su forma y tamaño (28 px girado), porque mapa.js fija su punto de anclaje.

   ORGANIZACIÓN
   1. Tokens   2. Base   3. Header   4. Intro   5. Mapa y pines
   6. Controles (buscador y filtros)   7. Tarjetas   8. Cómo funciona
   9. Sumarse   10. Footer   11. Breakpoints
   ========================================================================= */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;
    --fondo: #ffffff;
    --suave-fondo: #f4f7f5;
    --mapa-fondo: #eef3ef;
    --tinta: #10231c;
    --texto: #10231c;
    --suave: #55655e;
    --tenue: #7a8a83;
    --borde: #e1e7e4;
    --borde-vivo: #b8c4be;
    --borde-btn: #c9d3ce;
    --acento: #0e7c4a;
    --acento-fuerte: #0b5c37;
    --acento-10: #e6f1ea;
    --acento-20: rgba(14, 124, 74, 0.22);
    --alu-fondo: #e9edf0;
    --alu-texto: #33424b;
    --alerta: #c0392b;
    --foco: #2f7bff;
    --ui: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ancho: 84rem;
    --r: 0.875rem;
    --r-chico: 0.625rem;
    --header: 4rem;
    --suavizado: cubic-bezier(0.22, 1, 0.36, 1);
    --sombra: 0 2px 10px rgba(16, 35, 28, 0.12);
    --sombra-alta: 0 8px 28px rgba(16, 35, 28, 0.18);
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--fondo);
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--ui);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--acento);
}

    a:hover {
        color: var(--acento-fuerte);
    }

button,
input,
textarea {
    font-family: inherit;
}

[id] {
    scroll-margin-top: calc(var(--header) + 1rem);
}

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

::selection {
    background: var(--acento-20);
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.saltar {
    position: absolute;
    left: -9999px;
}

    .saltar:focus {
        left: 1rem;
        top: 1rem;
        z-index: 90;
        background: var(--tinta);
        color: #fff;
        padding: 0.75rem 1.25rem;
        border-radius: var(--r-chico);
        font-size: 0.875rem;
        font-weight: 700;
    }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Distancias: misma fuente, con números tabulares para que se alineen. */
.num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Botones ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-chico);
    background: none;
    color: var(--texto);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s var(--suavizado), border-color 0.18s var(--suavizado), color 0.18s var(--suavizado), transform 0.18s var(--suavizado);
}

    .btn:active {
        transform: scale(0.97);
    }

.btn--acento {
    background: var(--acento);
    color: #fff;
}

    .btn--acento:hover {
        background: var(--acento-fuerte);
        color: #fff;
    }

.btn--linea {
    border-color: var(--borde-btn);
    background: #fff;
    color: var(--texto);
}

    .btn--linea:hover {
        border-color: var(--tinta);
        color: var(--texto);
    }

.btn--fantasma {
    color: var(--texto);
}

    .btn--fantasma:hover {
        background: var(--suave-fondo);
        color: var(--texto);
    }

.btn--bloque {
    width: 100%;
}

.btn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* ── 3. Header ──────────────────────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde);
}

    /* El header va a todo el ancho, alineado con la columna de la lista y el
   mapa a sangre (como en mapa.html), no centrado en el contenedor. */
    .header .contenedor {
        max-width: none;
    }

.header__barra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--header);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--texto);
    margin-right: auto;
}

    .marca:hover {
        color: var(--texto);
    }

/* Isotipo: cuadrado verde lleno con la ventana en blanco. */
.marca__ico {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5625rem;
    background: var(--acento);
    color: #fff;
    flex: none;
}

    .marca__ico svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.marca__texto {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

    .marca__texto span {
        color: inherit;
    }

.header__acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* "Suma tu empresa" del header: botón lleno en tinta, como llamada principal
   para el ventanero. */
    .header__acciones .btn {
        padding: 0 0.875rem;
        font-size: 0.875rem;
        border-color: var(--tinta);
        background: var(--tinta);
        color: #fff;
    }

        .header__acciones .btn:hover {
            background: #1d3a2f;
            border-color: #1d3a2f;
            color: #fff;
        }

/* Estado de la ubicación: el sitio dice siempre desde dónde está midiendo.
   En celular solo se ve el punto; el texto sigue disponible para lectores. */
.ubicacion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--suave-fondo);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--suave);
}

.ubicacion__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ubicacion__punto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--tenue);
    flex: none;
}

.ubicacion[data-estado='ok'] .ubicacion__punto {
    background: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-20);
}

.ubicacion[data-estado='buscando'] .ubicacion__punto {
    background: var(--acento);
    animation: latido 1.2s ease-in-out infinite;
}

.ubicacion[data-estado='error'] .ubicacion__punto {
    background: var(--alerta);
}

@keyframes latido {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* ── 4. Intro del directorio ───────────────────────────────────────────── */
/* Título, bajada, buscador y filtros, como en la maqueta mapa.html: sin foto
   de portada. En escritorio va arriba de la lista, en la columna izquierda. */
.intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem 1rem;
}

    .intro h1,
    #directorio-vacio h1 {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.18;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-wrap: balance;
    }

#directorio-vacio h1 {
    margin-bottom: 1.25rem;
}

.intro__bajada {
    margin: -0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--suave);
    text-wrap: pretty;
}

/* "Usar mi ubicación" y los chips de material en una misma fila. */
.controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.btn--pildora {
    border-radius: 999px;
    font-size: 0.875rem;
    padding: 0 0.875rem;
}

/* ── 5. Mapa y pines ────────────────────────────────────────────────────── */
.mapa-caja {
    position: relative;
}

.mapa {
    height: 40svh;
    min-height: 16rem;
    /* Superficie de respaldo si las tiles no cargan: los pines se siguen
     leyendo sobre una cuadrícula suave, no sobre un gris roto. */
    background-color: var(--mapa-fondo);
    background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px);
    background-size: 3rem 3rem, 3rem 3rem;
    border-bottom: 1px solid var(--borde);
    z-index: 0;
}

.leaflet-container {
    font-family: var(--ui) !important;
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--suave) !important;
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 6px 0 0 0;
}

    .leaflet-control-attribution a {
        color: var(--acento) !important;
    }

/* Zoom como en la maqueta: bloque blanco con sombra y esquinas de 12 px. */
.leaflet-bar {
    border: 0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    box-shadow: var(--sombra) !important;
}

    .leaflet-bar a {
        background: #fff !important;
        color: var(--texto) !important;
        border-bottom-color: var(--borde) !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
        font-size: 1.25rem !important;
    }

        .leaflet-bar a:hover {
            background: var(--suave-fondo) !important;
        }

.leaflet-tooltip {
    border: 0;
    border-radius: 0.5rem;
    background: var(--tinta);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    box-shadow: var(--sombra);
}

.leaflet-tooltip-top::before {
    border-top-color: var(--tinta);
}

/* Pin: gota verde con borde y centro blancos. Forma y tamaño (28 px, girado
   -45°) se mantienen porque mapa.js calcula el anclaje sobre esa medida. */
.pin {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px 999px 999px 2px;
    transform: rotate(-45deg);
    background: var(--acento);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 35, 28, 0.35);
    transition: transform 0.2s var(--suavizado), background-color 0.2s;
}

    .pin::after {
        content: '';
        position: absolute;
        inset: 0.375rem;
        border-radius: 999px;
        background: #fff;
    }

/* Seleccionado: en tinta y más grande, igual que la tarjeta activa. */
.pin--activo {
    background: var(--tinta);
    transform: rotate(-45deg) scale(1.3);
    z-index: 500;
}

/* El visitante: punto azul con halo, distinto de los pines de empresas. */
.pin-yo {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    background: var(--foco);
    border: 3px solid #fff;
    box-shadow: 0 0 0 6px rgba(47, 123, 255, 0.25), 0 2px 6px rgba(16, 35, 28, 0.3);
}

/* Clusters: círculo verde lleno con el número en blanco. */
.grupo {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--acento);
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px rgba(14, 124, 74, 0.2), 0 2px 8px rgba(16, 35, 28, 0.3);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/* ── 6. Controles ───────────────────────────────────────────────────────── */
/* En celular el panel se monta sobre el borde del mapa: el borde redondeado
   avisa que abajo hay más contenido. */
.panel {
    position: relative;
    z-index: 10;
    margin-top: -1.25rem;
    border-radius: 1.125rem 1.125rem 0 0;
    background: var(--fondo);
    box-shadow: 0 -4px 16px rgba(16, 35, 28, 0.08);
    padding: 0.625rem 1rem 0;
}

.panel__asa {
    width: 2.5rem;
    height: 0.25rem;
    margin: 0 auto 0.875rem;
    border-radius: 999px;
    background: var(--borde-vivo);
}

.buscador {
    position: relative;
}

    .buscador svg {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        color: var(--texto);
        pointer-events: none;
    }

    .buscador input {
        width: 100%;
        height: 3.25rem;
        padding: 0 2.75rem 0 2.875rem;
        border: 1.5px solid var(--tinta);
        border-radius: 0.75rem;
        background: #fff;
        color: var(--texto);
        font-size: 1rem;
        transition: box-shadow 0.18s;
    }

        .buscador input::placeholder {
            color: var(--tenue);
        }

        .buscador input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.35);
        }

.buscador__limpiar {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--suave);
    cursor: pointer;
}

    .buscador__limpiar svg {
        position: static;
        transform: none;
        width: 1.125rem;
        height: 1.125rem;
        color: inherit;
    }

    .buscador__limpiar:hover {
        background: var(--suave-fondo);
        color: var(--texto);
    }

    .buscador__limpiar[hidden] {
        display: none;
    }

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex: none;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1.5px solid var(--borde-vivo);
    border-radius: 999px;
    background: #fff;
    color: var(--texto);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

    .chip:hover {
        border-color: var(--tinta);
    }

    .chip[aria-pressed='true'] {
        background: var(--tinta);
        border-color: var(--tinta);
        color: #fff;
    }

    /* El tilde aparece solo en el chip activo. */
    .chip svg {
        width: 1rem;
        height: 1rem;
        display: none;
    }

    .chip[aria-pressed='true'] svg {
        display: block;
    }

.resumen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0.75rem;
}

.resumen__cuenta,
.orden {
    margin: 0;
    font-size: 0.875rem;
    color: var(--suave);
}

    .resumen__cuenta strong {
        color: var(--texto);
    }

/* ── 7. Tarjetas ────────────────────────────────────────────────────────── */
.lista {
    list-style: none;
    margin: 0;
    padding: 0 0 1.5rem;
    display: grid;
    gap: 0.625rem;
}

/* Cabecera arriba (logo, nombre, distancia); abajo, etiquetas a la izquierda
   y botones a la derecha, como en la maqueta. */
.ficha {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    border: 1.5px solid var(--borde);
    border-radius: var(--r);
    background: #fff;
    padding: 0.875rem;
    transition: border-color 0.18s var(--suavizado), background-color 0.18s var(--suavizado);
}

    .ficha:hover {
        border-color: var(--borde-vivo);
    }

    /* Seleccionada desde el pin o tocándola: borde en tinta y fondo suave. */
    .ficha.activa {
        border-color: var(--tinta);
        background: var(--suave-fondo);
    }

    .ficha[hidden] {
        display: none;
    }

.ficha__cabeza {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Logo apaisado (los logos reales son más anchos que altos). Sin logo, la
   inicial en blanco sobre tinta, como el cuadrado de la maqueta. */
.ficha__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 4.5rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: var(--tinta);
    overflow: hidden;
}

    .ficha__logo img {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.25rem;
    }

.ficha__inicial {
    grid-area: 1 / 1;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
}

.ficha__logo--imagen {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--borde);
}

    .ficha__logo--imagen .ficha__inicial {
        display: none;
    }

.ficha__id {
    min-width: 0;
    flex: 1 1 auto;
}

.ficha__nombre {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: break-word;
}

.ficha__lugar {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--suave);
}

.ficha__dist {
    flex: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--borde);
    background: #fff;
    font-size: 0.8125rem;
    color: var(--texto);
    white-space: nowrap;
}

    .ficha__dist:empty {
        display: none;
    }

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
    align-self: center;
}

.etiqueta {
    padding: 0.25rem 0.5625rem;
    border-radius: 0.375rem;
    background: var(--alu-fondo);
    color: var(--alu-texto);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.etiqueta--pvc {
    background: var(--acento-10);
    color: var(--acento-fuerte);
}

.etiqueta--alu {
    background: var(--alu-fondo);
    color: var(--alu-texto);
}

.ficha__acciones {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

    .ficha__acciones .btn {
        min-height: 2.75rem;
        padding: 0 0.875rem;
        font-size: 0.875rem;
    }

    /* WhatsApp va primero en el HTML pero a la derecha en pantalla: queda en el
   extremo, donde cae el pulgar. */
    .ficha__acciones .btn--acento {
        order: 2;
    }

    /* Sitio web: botón cuadrado solo con el ícono. El texto "Sitio web" sigue en
   el HTML (lo leen el lector de pantalla y Google) pero no ocupa ancho. */
    .ficha__acciones .btn--web {
        order: 1;
        width: 2.75rem;
        padding: 0;
        font-size: 0;
        gap: 0;
    }

        .ficha__acciones .btn--web svg {
            width: 1.125rem;
            height: 1.125rem;
        }

.ficha__ver {
    position: absolute;
    inset: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--r);
    /* Cubre la tarjeta para que tocar cualquier parte la centre en el mapa, pero
     queda DEBAJO de los botones, que tienen su propia acción. */
    z-index: 0;
}

.ficha__cabeza,
.etiquetas,
.ficha__acciones {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

    .ficha__acciones .btn {
        pointer-events: auto;
    }

.vacio {
    padding: 1.75rem 1rem;
    text-align: center;
    border: 1.5px dashed var(--borde-vivo);
    border-radius: var(--r);
    color: var(--suave);
    font-size: 0.9375rem;
    line-height: 1.45;
}

    .vacio[hidden] {
        display: none;
    }

    .vacio strong {
        display: block;
        color: var(--texto);
        margin-bottom: 0.375rem;
    }

#directorio-vacio {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ── 8. Cómo funciona ───────────────────────────────────────────────────── */
.como-funciona {
    padding: 3rem 0;
    background: var(--suave-fondo);
    border-top: 1px solid var(--borde);
}

.pasos {
    list-style: none;
    counter-reset: paso;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

    /* Tarjeta blanca con el número en un círculo de tinta. */
    .pasos li {
        counter-increment: paso;
        position: relative;
        padding: 1.375rem 1.375rem 1.375rem 4.25rem;
        border: 1px solid var(--borde);
        border-radius: 1rem;
        background: #fff;
    }

        .pasos li::before {
            content: counter(paso);
            position: absolute;
            left: 1.375rem;
            top: 1.375rem;
            display: grid;
            place-items: center;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 999px;
            background: var(--tinta);
            color: #fff;
            font-weight: 800;
            font-size: 0.9375rem;
        }

/* El número ya dice el paso: el ícono queda oculto para no repetir. */
.pasos__ico {
    display: none;
}

.pasos h3 {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.pasos p {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--suave);
}

/* ── 9. Sumarse ─────────────────────────────────────────────────────────── */
.sumarse {
    background: var(--fondo);
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.sumarse__grilla {
    display: grid;
    gap: 2rem;
}

.sumarse h2 {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.sumarse p {
    margin: 0.75rem 0 0;
    color: var(--suave);
    line-height: 1.5;
    text-wrap: pretty;
}

.puntos {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--alu-texto);
}

    .puntos li {
        display: flex;
        gap: 0.625rem;
    }

    .puntos svg {
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.1875rem;
        color: var(--acento);
    }

.formulario {
    border: 1.5px solid var(--tinta);
    border-radius: 1.25rem;
    background: #fff;
    padding: 1.25rem;
}

.campos {
    display: grid;
    gap: 1rem;
}

.campo label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 0.375rem;
}

.campo .req {
    color: var(--acento);
}

.campo input,
.campo textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.6875rem 0.75rem;
    border: 1.5px solid var(--borde-vivo);
    border-radius: var(--r-chico);
    background: #fff;
    color: var(--texto);
    font-size: 1rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.campo textarea {
    min-height: 5.5rem;
    resize: vertical;
}

    .campo input::placeholder,
    .campo textarea::placeholder {
        color: var(--tenue);
    }

    .campo input:focus,
    .campo textarea:focus {
        outline: none;
        border-color: var(--tinta);
        box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.25);
    }

.campo--mal input,
.campo--mal textarea {
    border-color: var(--alerta);
}

.campo__error {
    display: block;
    margin-top: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--alerta);
}

.aviso {
    margin: 0;
    padding: 0.6875rem 0.875rem;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-radius: var(--r-chico);
    background: rgba(192, 57, 43, 0.06);
    font-size: 0.875rem;
    color: var(--alerta);
}

/* Botón de envío en tinta, como en la maqueta: dentro del formulario el
   verde queda reservado para WhatsApp. */
.formulario .btn--acento {
    min-height: 3.25rem;
    border-radius: 0.75rem;
    background: var(--tinta);
    color: #fff;
    font-size: 1rem;
}

    .formulario .btn--acento:hover {
        background: #1d3a2f;
    }

.legal {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--suave);
}

.listo {
    text-align: center;
    padding: 1.5rem 0;
}

.listo__ico {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
}

    .listo__ico svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.listo h3 {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.listo p {
    margin: 0.5rem auto 0;
    max-width: 22rem;
}

/* ── 10. Footer ─────────────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid var(--borde);
    padding-top: 1.75rem;
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    color: var(--suave);
    font-size: 0.875rem;
}

.footer__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

    .footer__fila p {
        margin: 0;
        margin-right: auto;
    }

.footer a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--acento);
}

    .footer a:hover {
        color: var(--acento-fuerte);
    }

.footer__nota {
    margin: 0.75rem 0 0;
    max-width: 40rem;
    line-height: 1.55;
}

/* ── Accesibilidad de movimiento ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 11. Breakpoints ────────────────────────────────────────────────────── */
@media (min-width: 40rem) {
    .contenedor {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .header__barra {
        gap: 0.75rem;
    }

    .header__acciones .btn {
        padding: 0 1.125rem;
        font-size: 0.9375rem;
    }

    .ubicacion {
        padding: 0.4375rem 0.75rem 0.4375rem 0.625rem;
    }

    .ubicacion__texto {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
        border: 0;
    }

    .intro {
        padding: 1.5rem 1.5rem 1rem;
    }

        .intro h1 {
            font-size: 1.6875rem;
        }

    .mapa {
        height: 46svh;
    }

    .panel {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pasos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sumarse h2 {
        font-size: 2.125rem;
    }

    .sumarse__grilla {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 2.5rem;
        align-items: start;
    }

    .formulario {
        padding: 1.75rem;
    }

    .campos--doble {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Desde 64rem, como la maqueta mapa.html: columna izquierda de 27,5rem con
 * la intro (título, buscador, filtros) y la lista debajo; el mapa ocupa todo
 * el resto del ancho, a sangre y FIJO (sticky) a toda la altura de la
 * pantalla mientras se recorre la lista. En el HTML el mapa viene entre la
 * intro y la lista (orden de celular); acá se asignan las celdas de la grilla
 * sin tocar el DOM.
 */
@media (min-width: 64rem) {
    .doble {
        display: grid;
        grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
        border-bottom: 1px solid var(--borde);
    }

        .doble > .intro {
            grid-column: 1;
            grid-row: 1;
            padding: 1.5rem 1.5rem 1rem;
        }

        .doble > .col-lista {
            grid-column: 1;
            grid-row: 2;
            align-self: stretch;
            padding: 0 1.5rem;
        }

        /* La línea que separa la columna de la lista del mapa, a todo el alto. */
        .doble > .intro,
        .doble > .col-lista {
            border-right: 1px solid var(--borde);
        }

        .doble > .mapa-caja {
            grid-column: 2;
            grid-row: 1 / span 2;
            position: sticky;
            top: var(--header);
        }

    .intro h1 {
        font-size: 1.6875rem;
    }

    .mapa {
        height: calc(100svh - var(--header));
        min-height: 28rem;
        border: 0;
    }

    .panel {
        margin-top: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 0;
    }

    .panel__asa {
        display: none;
    }

    .resumen {
        margin-top: 0;
    }

    .lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer__nota {
        margin-top: 0.5rem;
    }
}

@media (min-width: 80rem) {
    .doble {
        grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    }
}