/* =========================================================================
   Reformas Rodrigo — hoja de estilos
   Paleta del §3.2 con los valores REALES del logo de Rigora: azul #0c2649
   (el "antracita" del brief resultó ser un marino) + arena #a08b6f +
   blanco roto + gris claro. CUATRO colores y ninguno más (§2: "exceso de
   colores" está en la lista de lo que hay que evitar). Mobile first (§27).
   ========================================================================= */

:root {
    /* --- Paleta, MUESTREADA DEL LOGO REAL de RIGORA (21/09/2026) ---
       Valores sacados del archivo `data/originales/logo menu principal.png`,
       no interpretados.

         Azul   #0c2649  -> el marino del símbolo y del logotipo.
         Arena  #a08b6f  -> la viga dorada y el filete del eslogan.

       Historial de los dos errores previos, para no repetirlos:
       1) Se interpretó "antracita/carbón" del brief como gris neutro.
       2) Se corrigió hacia un antracita CÁLIDO (#2c2723), que era el matiz
          justo contrario al de la marca.
       3) Del primer PNG (el de la presentación con resplandor) se sacó
          #212527: el azul bueno, pero apagado por el halo. El logo limpio
          da el valor real, mucho más saturado. */

    --azul:        #0c2649;   /* color de marca */
    --azul-medio:  #16355f;   /* superficies oscuras secundarias */
    --azul-80:     #4a5a6e;   /* texto secundario sobre claro */
    --azul-60:     #6b7a8c;   /* texto de apoyo */
    --azul-sobre:  #c2ccd9;   /* texto sobre fondo azul */

    /* Arena: segundo color de la marca. El contraste frío/cálido entre el
       marino y el dorado es lo que define el logo. */
    --arena:        #a08b6f;
    --arena-claro:  #c3b198;
    --arena-suave:  #f0eae1;   /* fondo cálido puntual */

    /* Neutros con una pizca de azul, para que acompañen al marino. */
    --blanco-roto:  #f7f8f9;   /* fondos principales */
    --gris-claro:   #e2e6ea;   /* separadores y tarjetas */
    --blanco:       #ffffff;

    /* WhatsApp es el único color de fuera de la paleta. Se permite porque es
       una marca reconocible y el botón tiene que leerse como tal: si lo
       pintamos de arena, deja de parecer WhatsApp y pierde el clic. */
    --whatsapp:     #25d366;
    --whatsapp-osc: #1da851;

    --nav-h: 68px;
    --barra-h: 64px;           /* barra fija de acción en móvil */

    --wrap: 1180px;
    --radio: 4px;              /* esquinas casi rectas: minimalista, no blandito */

    --sombra-sutil: 0 1px 2px rgba(12, 38, 73, .06), 0 4px 16px rgba(12, 38, 73, .09);
    --sombra-media: 0 2px 6px rgba(12, 38, 73, .10), 0 12px 32px rgba(12, 38, 73, .15);

    --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;

    --paso: clamp(64px, 8vw, 112px);   /* aire vertical entre secciones */
}

/* ------------------------------------------------------------- Reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.65;
    color: var(--azul-80);
    background: var(--blanco-roto);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    color: var(--azul);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 600;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(34px, 6vw, 58px); }
h2 { font-size: clamp(27px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration-color: var(--arena-claro); text-underline-offset: 3px; }

/* Foco visible en todo lo interactivo (§32 accesibilidad). No se quita
   nunca: sin esto la web no se puede navegar con teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--arena);
    outline-offset: 3px;
    border-radius: 2px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}

.section { padding-block: var(--paso); }
/* Las secciones alternan BLANCO y ARENA. Antes la alterna era
   `--gris-claro` (#e2e6ea), un gris frío que envejecía la página entera:
   sin temperatura, no acompaña al marino y lee como plantilla de hace años.
   El arena es el segundo color de la marca y aporta el contraste cálido que
   define el logo. Fuera del texto y los filetes, el gris ya no pinta fondos. */
.section.tint { background: var(--arena-suave); }

/* Texto solo para lectores de pantalla (§32). */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--arena);
    font-weight: 600;
    margin-bottom: 14px;
}

.lead { font-size: clamp(17px, 2vw, 20px); color: var(--azul-80); max-width: 62ch; }

/* ------------------------------------------------------------ Botones --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;              /* objetivo táctil holgado (§27) */
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn:active { transform: translateY(1px); }

.btn-principal {
    background: var(--azul);
    color: var(--blanco-roto);
}
.btn-principal:hover { background: #07182f; }

.btn-fantasma {
    background: transparent;
    color: var(--azul);
    border-color: var(--azul);
}
.btn-fantasma:hover { background: var(--azul); color: var(--blanco-roto); }

.btn-wa {
    background: var(--whatsapp);
    color: #fff;
}
.btn-wa:hover { background: var(--whatsapp-osc); }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

.btn-bloque { width: 100%; }

/* --------------------------------------------------------- Cabecera --- */

.nav {
    position: sticky;            /* §6: header sticky */
    top: 0;
    z-index: 60;
    height: var(--nav-h);
    background: rgba(247, 248, 249, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--gris-claro);
}

.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* El logotipo de Rigora ya incluye el nombre y el eslogan, así que aquí no
   va texto: solo la imagen. Antes había símbolo + nombre escrito, y ese
   nombre se partía en dos líneas en móvil. */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
    flex: none;
}
.nav-logo img { height: 32px; width: auto; display: block; }

/* Etiqueta larga/corta del CTA de cabecera. En móvil no cabe
   "Solicitar presupuesto" junto al logo y la hamburguesa. */
.txt-corto { display: inline; }
.txt-largo { display: none; }

.nav-links { display: none; gap: 28px; align-items: center; }

.nav-links a {
    text-decoration: none;
    color: var(--azul-80);
    font-size: 15.5px;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--arena); }

.nav-acciones { display: flex; align-items: center; gap: 10px; }
.nav-acciones .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }

.hamburguesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    cursor: pointer;
}
.hamburguesa svg { width: 22px; height: 22px; stroke: var(--azul); }

/* Menú desplegable en móvil */
.menu-movil {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--blanco-roto);
    border-bottom: 1px solid var(--gris-claro);
    padding: 12px 20px 22px;
    display: none;
    z-index: 59;
    box-shadow: var(--sombra-media);
}
.menu-movil.abierto { display: block; }
.menu-movil a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--gris-claro);
    text-decoration: none;
    color: var(--azul);
    font-weight: 500;
}
.menu-movil a:last-of-type { border-bottom: 0; }
.menu-movil .btn { margin-top: 14px; }

/* ------------------------------------------------------------- Hero --- */
/* Encargo "HERO / PORTADA PRINCIPAL" (21/09/2026): fotografía a sangre de
   fondo, ocupando todo el ancho, con el texto encima a la izquierda.
   La foto la elige el servidor al azar en cada carga (hero_foto()).

   El alto pedido es 75–90% de la primera pantalla. Se resuelve con min-height
   sobre svh —la unidad que NO salta cuando la barra del navegador móvil se
   esconde— y con un tope en px para que en un monitor muy alto el hero no se
   convierta en un cartel de dos metros. */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    background: var(--azul);
    color: var(--azul-sobre);
    padding-block: clamp(48px, 7vw, 92px);
    overflow: hidden;
}

.hero-con-foto {
    min-height: min(78svh, 680px);
}

/* Sin foto todavía: ni se estira ni finge. Se queda compacto. */
.hero-sin-foto {
    min-height: auto;
}

/* La foto va como <img> y no como background-image: así el navegador la
   descarga con prioridad alta y cuenta como LCP, que es la métrica que
   decide la sensación de velocidad de la portada. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El encargo pide la parte espectacular de la vivienda a la derecha.
       Al recortar, se sacrifica antes el borde izquierdo —que es donde va
       el texto y donde la foto importa menos— que el derecho.
       Cada foto puede afinar su encuadre con --foco-x / --foco-y (ver
       $HERO_FOCO en content.php); si no lo hace, valen estos valores. */
    object-position: var(--foco-x, 70%) var(--foco-y, 50%);
}

/* Velo de legibilidad. Dos capas: un degradado lateral que oscurece sobre
   todo la columna del texto, y un velo general muy suave. El encargo insiste
   en "sin oscurecer excesivamente la imagen", así que la derecha queda casi
   limpia. */
.hero-velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            rgba(12, 38, 73, .95) 0%,
            rgba(12, 38, 73, .90) 40%,
            rgba(12, 38, 73, .70) 60%,
            rgba(12, 38, 73, .26) 84%,
            rgba(12, 38, 73, .08) 100%);
}

/* Sin foto, el velo hace de fondo liso para que el hero no quede desnudo. */
.hero-sin-foto .hero-velo {
    background: linear-gradient(120deg, var(--azul) 0%, var(--azul-medio) 100%);
}

/* Una sola columna: el texto ya no compite con una tarjeta a la derecha.
   Se limita el ancho de línea para que el H1 caiga en 2–3 líneas y la zona
   derecha de la foto quede despejada. */
/* Va DENTRO de .wrap, no sobre él: si se le pone un max-width al propio
   .wrap, su `margin-inline: auto` centra la columna y el texto deja de estar
   a la izquierda de la foto. */
.hero-contenido {
    position: relative;
    max-width: 680px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.hero h1       { color: #fff; margin-bottom: 18px; }
.hero .lead    { color: rgba(255, 255, 255, .92); margin-bottom: 30px; max-width: 34em; }
.hero .eyebrow { color: var(--arena-claro); }

/* Sobre el azul de marca, el botón principal no puede ser azul: desaparecería.
   Va en arena, que además mete el segundo color de la marca justo en la
   acción más importante de la página. */
.hero .btn-principal { background: var(--arena); color: var(--azul); }
.hero .btn-principal:hover { background: var(--arena-claro); }

/* Sobre fotografía hace falta más contraste del que da un botón plano: una
   sombra los despega del fondo pase lo que pase en la imagen de detrás. */
.hero-con-foto .btn { box-shadow: 0 6px 20px rgba(6, 20, 40, .35); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* El CTA principal del hero es el más grande de la web. Es el único sitio
   donde eso está justificado. */
.btn-grande { min-height: 54px; padding-inline: 26px; font-size: 16px; }

/* Aviso de material pendiente. Solo se ve mientras la carpeta esté vacía. */
.hero-aviso {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px dashed var(--arena);
    border-radius: var(--radio);
    background: rgba(160, 139, 111, .14);
    color: var(--azul-sobre);
    font-size: 14px;
    text-shadow: none;
}
.hero-aviso strong { color: var(--arena-claro); display: block; margin-bottom: 2px; }
.hero-aviso code {
    background: rgba(0, 0, 0, .28);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* El microcopy general es gris azulado; sobre fotografía necesita blanco. */
.hero .microcopy { color: rgba(255, 255, 255, .88); opacity: 1; }

/* --- Móvil: que la foto no quede triturada ---------------------------- */
/* En vertical, `cover` recorta por los lados. Se centra algo a la derecha
   para conservar la cocina/salón, que es lo que vende, y se limita el alto
   para que el CTA entre en pantalla sin hacer scroll. */
@media (max-width: 759px) {
    /* En vertical el recorte es lateral y se lleva media foto por delante,
       así que aquí manda --foco-x-movil, que puede no coincidir con el
       encuadre de escritorio. */
    .hero-bg { object-position: var(--foco-x-movil, var(--foco-x, 62%)) 50%; }
    .hero-con-foto {
        min-height: min(84svh, 640px);
        align-items: flex-end;
        padding-top: clamp(170px, 42vw, 250px);
    }
    .hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
    .hero-ctas .btn { width: 100%; }
}

/* --- De tableta hacia arriba ------------------------------------------ */
/* Aquí sí hay dos zonas reales: texto a la izquierda, fotografía respirando
   a la derecha. El velo pasa a ser lateral y deja la parte buena casi limpia,
   que es justo lo que pide el encargo. */
@media (min-width: 760px) {
    .hero-velo {
        background:
            linear-gradient(100deg,
                rgba(12, 38, 73, .88) 0%,
                rgba(12, 38, 73, .76) 34%,
                rgba(12, 38, 73, .38) 62%,
                rgba(12, 38, 73, .12) 100%),
            linear-gradient(to top,
                rgba(12, 38, 73, .45) 0%,
                rgba(12, 38, 73, 0) 42%);
    }
    .hero-contenido { max-width: 620px; }
}

@media (min-width: 1200px) {
    .hero-con-foto { min-height: min(84svh, 720px); }
    .hero-bg { object-position: 74% 50%; }
    .hero-contenido { max-width: 660px; }
}

/* -------------------------------------------------------- Confianza --- */

.confianza { background: var(--blanco-roto); border-bottom: 1px solid var(--gris-claro); }
.confianza-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px;
    padding-block: 40px;
}
.confianza-item h3 { font-size: 16px; margin-bottom: 4px; }
.confianza-item p { font-size: 14.5px; color: var(--azul-60); }
.confianza-item::before {
    content: "";
    display: block;
    width: 26px; height: 2px;
    background: var(--arena);
    margin-bottom: 12px;
}

/* -------------------------------------------------------- Servicios --- */

/* ------------------------------ Motor de carrusel horizontal ---------- */
/* Portado de Halosal (.marquee / .marquee-track). La animación la mueve el
   CSS; el ancho de un "set" de tarjetas lo mide el JS y lo inyecta en
   --set-w, porque depende del ancho real de tarjeta y de pantalla. */
.marquee {
    position: relative;
    /* Por defecto, fila con scroll nativo: si el JS no llega a ejecutarse,
       las tarjetas de más allá del borde quedarían inalcanzables. El JS
       cambia a `overflow:hidden` al arrancar. */
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    padding: 6px 0 10px;
    margin-top: 40px;
}
.marquee.js-listo {
    overflow: hidden;
    scrollbar-width: none;
}
.marquee.js-listo::-webkit-scrollbar { display: none; }
.marquee.arrastrando { cursor: grabbing; }

.marquee-track {
    display: flex;
    gap: 18px;
    width: max-content;
    align-items: stretch;
    /* Hueco a los lados para que las flechas, que van superpuestas, no
       queden encima del contenido de la primera y la última tarjeta. */
    padding-inline: 20px;
    will-change: transform;
    backface-visibility: hidden;
}
.marquee-track.is-animating { animation: marquee-scroll 80s linear infinite; }

@keyframes marquee-scroll {
    from { transform: translateX(0) translateZ(0); }
    to   { transform: translateX(calc(-1 * var(--set-w, 50%))) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
    .marquee-track { animation: none; }
    .marquee .tarjeta-servicio { scroll-snap-align: center; }
}

/* El contenedor es el que da la referencia para colocar las flechas. */
.marquee-marco { position: relative; }

/* Flechas. Nacen ocultas (`hidden` en el HTML) y las enciende el JS.
   Van ENCIMA del carrusel, una en cada extremo, centradas en vertical.
   `pointer-events: none` en la caja y `auto` en los botones: si no, la
   banda invisible que va de una flecha a otra se tragaría el arrastre. */
.marquee-flechas {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.marquee-flechas button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(8, 24, 45, .22);
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blanco);
    border: 1px solid var(--arena-claro);
    border-radius: 50%;
    color: var(--azul);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.marquee-prev { left: 16px; }
.marquee-next { right: 16px; }

.marquee-flechas button:hover {
    border-color: var(--arena);
    background: var(--arena-claro);
}
/* El hover NO puede tocar `transform`: ahí vive el centrado vertical y la
   flecha se descolocaría media altura al pasar el ratón. */
.marquee-flechas button:hover { transform: translateY(calc(-50% - 1px)); }
.marquee-flechas button:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.marquee-flechas svg { width: 20px; height: 20px; stroke: currentColor; }

/* -------------------------------------------- Galería de servicios --- */
/* Encargo del 21/09/2026. La fotografía es el elemento principal: la tarjeta
   es una foto a sangre con el nombre encima, no una ficha con texto.
   Composición asimétrica en tres pesos (§15) para que la rejilla no quede
   monótona y la sección respire. */

/* TODAS LAS TARJETAS IGUALES. En carrusel no cabe la jerarquía de tamaños
   del encargo anterior: lo que se conserva es el orden. */
.tarjeta-servicio {
    position: relative;
    flex-shrink: 0;
    width: clamp(262px, 76vw, 320px);
    height: 400px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--radio);
    border: 1px solid rgba(12, 38, 73, .07);
    text-decoration: none;
    color: #fff;
    user-select: none;
    isolation: isolate;
}

.tarjeta-foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.tarjeta-servicio:hover .tarjeta-foto { transform: scale(1.05); }

/* Hueco declarado mientras no hay foto. NO es un icono ni una ilustración
   —el §7 los prohíbe—: es el sitio de la foto, dicho en voz alta, en los
   colores de la marca. */
.tarjeta-hueco {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: flex;
    /* Arriba, no centrada: el texto de la tarjeta vive abajo y, en las
       tarjetas cortas, una leyenda centrada se le montaba encima. */
    align-items: flex-start;
    justify-content: center;
    padding: 16px 18px;
    background:
        repeating-linear-gradient(135deg,
            var(--azul-medio) 0 16px, #1b3d69 16px 32px);
}
.tarjeta-hueco span {
    font-size: 13px;
    color: var(--arena-claro);
    text-align: center;
    letter-spacing: .02em;
}

/* Velo de legibilidad. Más denso abajo, donde cae el texto, y casi limpio
   arriba para no apagar la fotografía (§11). */
.tarjeta-velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(9, 27, 52, .86) 0%,
        rgba(9, 27, 52, .62) 32%,
        rgba(9, 27, 52, .18) 62%,
        rgba(9, 27, 52, .06) 100%);
    transition: background .4s ease;
}
.tarjeta-servicio:hover .tarjeta-velo {
    background: linear-gradient(to top,
        rgba(9, 27, 52, .92) 0%,
        rgba(9, 27, 52, .78) 40%,
        rgba(9, 27, 52, .46) 75%,
        rgba(9, 27, 52, .34) 100%);
}

/* LOS TÍTULOS A LA MISMA ALTURA.
   El texto va anclado abajo, así que si una descripción ocupa dos líneas y
   otra tres, el título de la primera sube y el de la segunda baja. Se
   resuelve dando al bloque una altura FIJA —no mínima— y repartiendo desde
   arriba: el título arranca siempre en el mismo punto de la tarjeta.
   La descripción se limita a tres líneas para que la cuenta cuadre. */
.tarjeta-texto {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    /* La cuenta: nombre 2.4em (≈50) + 10 de hueco + beneficio 4.35em (≈91)
       + enlace (≈20) + 20 de padding ≈ 191. Se deja algo de holgura para no
       depender del redondeo de la tipografía, pero sin pasarse: cada píxel
       de más es un píxel menos de fotografía a la vista. */
    height: 196px;
    padding: 0 22px 20px;
}
/* Dos líneas de alto fijo: "Montaje de muebles de cocina" ocupa dos y
   "Baños" una, y sin esto el resto del bloque bailaría. */
.tarjeta-nombre {
    display: flex;
    align-items: flex-end;
    height: 2.4em;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Tres líneas exactas, recortando si hace falta. */
.tarjeta-beneficio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.35em;
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .9);
}
.tarjeta-ver {
    display: block;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--arena-claro);
}

/* Aviso de material pendiente. Desaparece solo con la primera foto. */
/* Cierre comercial de la sección (§14, §22). */
.servicios-cierre {
    max-width: 620px;
    margin-top: 44px;
}
.servicios-cierre h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 12px; }
.servicios-cierre p { color: var(--azul-80); }
.servicios-cierre-frase {
    margin-top: 14px;
    font-weight: 600;
    color: var(--azul) !important;
}

/* ---------------------------------------------------------- Proceso --- */

.proceso-lista {
    display: grid;
    gap: 0;
    margin-top: 40px;
    counter-reset: paso;
}

.proceso-paso {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 26px 0;
    border-top: 1px solid var(--gris-claro);
}
.proceso-paso:last-child { border-bottom: 1px solid var(--gris-claro); }

.proceso-n {
    font-size: 15px;
    font-weight: 700;
    color: var(--arena);
    letter-spacing: .06em;
    padding-top: 3px;
}
.proceso-paso h3 { font-size: 19px; margin-bottom: 4px; }
.proceso-paso p { font-size: 15.5px; color: var(--azul-60); }

/* ------------------------------------------- Sección vacía honesta --- */
/* Para proyectos y testimonios mientras el cliente no dé material real
   (§13 y §14). Es preferible decir la verdad a inventar ejemplos. */

/* -------------------------------------------- Proyectos (§15 + §16) ---
   Las dos secciones de obra —"Antes y después" y "Proyectos"— se fundieron
   en una el 21/09/2026. Mientras no haya obra publicada, la sección explica
   CÓMO se va a contar cada una, en tres pasos, con el hueco de la foto
   declarado igual que en las tarjetas de servicio: rayado en los colores de
   la marca, nunca una foto de banco haciéndose pasar por trabajo propio. */
.obra-lead { max-width: 58ch; }

.obra-tira {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    gap: 26px;
    /* Contador tipográfico: el número lo pone el CSS, no el HTML, para que
       el orden lo marque el marcado y no haya que renumerar a mano. */
    counter-reset: obra;
}
.obra-paso { counter-increment: obra; }

.obra-marco {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    margin-bottom: 18px;
    border-radius: var(--radio);
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg,
            var(--azul-medio) 0 16px, #1b3d69 16px 32px);
}
/* El rótulo (Antes / Durante / Después) va abajo, sobre un velo, para que se
   lea sobre el rayado sin apagarlo entero. */
.obra-marco > span {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--arena-claro);
    background: linear-gradient(to top,
        rgba(9, 27, 52, .86) 0%, rgba(9, 27, 52, 0) 100%);
}
.obra-marco::before {
    content: counter(obra, decimal-leading-zero);
    position: absolute;
    top: 14px; left: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--arena);
}

.obra-paso h3 { font-size: 19px; margin-bottom: 8px; }
.obra-paso p  { color: var(--azul-60); font-size: 15.5px; }

@media (min-width: 760px) {
    .obra-tira { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}

/* ------------------------------------------------------- Proveedores --- */
/* Franja discreta: informa, no vende. Va antes del CTA final y no debe
   competir con él, así que ni fondo propio ni botones. */
.proveedores .lead { max-width: 52ch; }

.proveedores-lista {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}
.proveedor {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 14px 26px;
    background: var(--blanco);
    border: 1px solid var(--arena-claro);
    border-radius: var(--radio);
}
/* El logotipo se limita en ALTURA, no en anchura: los logos de estas marcas
   tienen proporciones muy distintas y encajarlos en una caja cuadrada los
   deformaría o los dejaría diminutos. */
.proveedor img {
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}
/* Sin logotipo, el nombre en texto. No imita una marca: es tipografía del
   sitio, que es justo lo que lo hace seguro. */
.proveedor-texto span {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--azul);
}

/* --------------------------------- Ventana de detalle de servicio --- */
/* Se abre al pulsar una tarjeta del carrusel. Foto arriba, trabajos debajo. */

.modal-servicio {
    position: fixed;
    inset: 0;
    z-index: 200;   /* por encima del chat (80/81) y de la barra móvil */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .22s ease;
}
.modal-servicio.abierto { opacity: 1; }

/* IMPRESCINDIBLE. `display:flex` de arriba gana al `[hidden]{display:none}`
   de la hoja del navegador (cualquier regla de autor le gana), así que sin
   esta línea la ventana sigue MAQUETADA aunque esté oculta: fixed, inset 0
   y z-index 200. Invisible (opacity 0) pero delante de todo, se tragaba
   TODOS los clics de la página: flechas del carrusel, tarjetas, CTAs y
   menú. Mismo caso que `.chat-panel[hidden]`. */
.modal-servicio[hidden] { display: none; }

.modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(6, 18, 35, .72);
    cursor: pointer;
}

.modal-caja {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 860px);
    overflow-y: auto;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: 0 24px 60px rgba(6, 18, 35, .4);
    transform: translateY(14px) scale(.98);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.modal-servicio.abierto .modal-caja { transform: translateY(0) scale(1); }

.modal-cerrar {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    color: var(--azul);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(6, 18, 35, .22);
    transition: background-color .15s ease;
}
.modal-cerrar:hover { background: #fff; }
.modal-cerrar svg { width: 18px; height: 18px; stroke: currentColor; }

.modal-media {
    /* `width: 100%` es obligatorio: con `aspect-ratio` y `max-height` juntos
       y sin anchura definida, el navegador encoge la CAJA ENTERA para
       respetar la proporción y la foto deja de llegar a los bordes. */
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Tope de altura: con la lista de trabajos debajo, una foto a 16/9 en
       pantalla ancha se comía media ventana y empujaba el contenido fuera. */
    max-height: 300px;
    overflow: hidden;
    border-radius: var(--radio) var(--radio) 0 0;
}
.modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto, el mismo hueco declarado que en la tarjeta: no se inventa una. */
.modal-media.sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg,
        var(--azul-medio) 0 16px, #1b3d69 16px 32px);
    color: var(--arena-claro);
    font-size: 13px;
}

.modal-cuerpo { padding: 30px 32px 34px; }
.modal-cuerpo h2 { margin-bottom: 12px; }
.modal-intro { margin-bottom: 26px; }
.modal-subtitulo {
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--arena);
    margin-bottom: 14px;
}

.modal-trabajos { list-style: none; margin: 0; padding: 0; }
.modal-trabajos li {
    position: relative;
    padding: 11px 0 11px 26px;
    border-bottom: 1px solid var(--arena-suave);
    font-size: 15.5px;
    color: var(--azul-80);
}
.modal-trabajos li:last-child { border-bottom: 0; }
.modal-trabajos li::before {
    content: "";
    position: absolute;
    left: 0; top: 20px;
    width: 12px; height: 2px;
    background: var(--arena);
}

.modal-nota {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--azul-60);
}

/* El CTA se queda pegado al fondo de la ventana mientras se recorre la
   lista. Con nueve o diez trabajos, el botón caía fuera de la vista y había
   que bajar hasta el final para encontrarlo. */
.modal-accion {
    position: sticky;
    bottom: 0;
    margin-top: 28px;
    padding: 18px 0 4px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        var(--blanco) 22%,
        var(--blanco) 100%);
}
.modal-accion .garantia { color: #7d6a50; }

/* Bloquea el scroll de la página mientras la ventana está abierta. */
body.modal-abierto { overflow: hidden; }

@media (max-width: 599px) {
    .modal-servicio { padding: 0; align-items: flex-end; }
    .modal-caja {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radio) var(--radio) 0 0;
    }
    .modal-cuerpo { padding: 24px 20px 28px; }
    .modal-media { aspect-ratio: 3 / 2; }
}

/* -------------------------------------------------------------- CTA --- */

.cta {
    background: var(--azul);
    color: var(--azul-sobre);
    text-align: center;
    /* Menos aire abajo que arriba: el pie que va debajo es del mismo azul, así
       que las dos separaciones se suman y quedaba un hueco enorme y vacío. */
    padding-bottom: calc(var(--paso) * .55);
}
.cta h2 { color: var(--blanco-roto); }
.cta p { max-width: 54ch; margin-inline: auto; }
.cta-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.cta .btn-fantasma { color: var(--blanco-roto); border-color: #3c5375; }
.cta .btn-fantasma:hover { background: var(--blanco-roto); color: var(--azul); border-color: var(--blanco-roto); }

/* --- Bloques de conversión repetidos (§5) ------------------------------ */
/* Aparecen cuatro o cinco veces en la home. Son claros y centrados para que
   corten el ritmo de las secciones de contenido y se lean como una pausa:
   "hasta aquí la información, ahora el siguiente paso". */
.cta-bloque {
    background: var(--arena-suave);
    text-align: center;
}
.cta-bloque-texto { max-width: 720px; margin-inline: auto; }
.cta-bloque h2 { margin-bottom: 14px; }
.cta-bloque .lead { margin-inline: auto; max-width: 56ch; }
.cta-bloque .cta-botones { margin-top: 26px; }

/* La garantía comercial: "gratis y sin compromiso". Va pegada al botón, no
   dentro (§4), y en arena oscura para que se lea como una promesa y no como
   una nota al pie. */
.garantia {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--arena);
    letter-spacing: .01em;
}
.cta-bloque .garantia { color: #7d6a50; }
.cta .garantia { color: var(--arena-claro); }
.hero .garantia { color: var(--arena-claro); }

/* En el hero los dos textos van seguidos: garantía (fuerte) y microcopy
   (explicativo). Sin este ajuste quedaban demasiado separados. */
.hero .garantia + .microcopy { margin-top: 6px; }

.cta .microcopy, .cta-bloque .microcopy { margin-top: 10px; }
.cta-bloque .microcopy { color: var(--azul-80); }

/* Garantía bajo el botón del menú desplegable de móvil. */
.menu-garantia {
    margin: 10px 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--arena);
    text-align: center;
}

/* ------------------------------------------------------------- Pie --- */

.footer {
    background: var(--azul);
    color: #9aa8b8;
    padding-block: 56px 0;
    font-size: 15px;
}
.footer h4 { color: var(--blanco-roto); font-size: 15px; margin-bottom: 14px; letter-spacing: 0; }
.footer a { color: #9aa8b8; text-decoration: none; }
.footer a:hover { color: var(--blanco-roto); }

.footer-grid { display: grid; gap: 34px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }

.footer-marca { margin-bottom: 20px; }
.footer-marca img { height: 84px; width: auto; display: block; }

/* El eslogan va en TEXTO, no dentro de la imagen del logo: ahí medía ~6px de
   alto al tamaño al que se usa el logo y se veía emborronado. Aquí se
   reproduce el bloque del logotipo —filete dorado y versalitas muy espaciadas—
   pero nítido a cualquier resolución. */
.footer-eslogan {
    margin: 14px 0 0;
    font-size: 11.5px;
    letter-spacing: .30em;
    text-transform: uppercase;
    color: var(--arena-claro);
}
.footer-eslogan::before {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    background: var(--arena);
    margin-bottom: 11px;
}

.footer-col-faq li { margin-bottom: 11px; line-height: 1.35; }
.footer-col-faq a { display: inline-block; }

.footer-legal {
    margin-top: 44px;
    border-top: 1px solid #22406b;
    padding-block: 20px 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 13.5px;
    color: #7b8a9c;
}
.footer-legal .separador { margin-left: auto; }

/* ------------------------------------------- Barra fija de móvil --- */
/* §17: botón de WhatsApp siempre accesible en móvil, sin ser invasivo. */

.barra-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(247, 248, 249, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--gris-claro);
}
.barra-movil .btn { flex: 1; min-height: 46px; font-size: 15px; }

body.con-barra { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); }

/* ============================ Escritorio ============================== */

/* Pantallas estrechas de verdad: el logo baja de cuerpo para que quepa
   todo en una sola línea de 68px. */
@media (max-width: 420px) {
    /* El logotipo oficial del menú es muy apaisado (743x117, o sea 6,35:1),
       así que en pantallas estrechas la altura manda sobre el ancho: a 27px
       medía 171px de ancho y quedaba pegado al botón de presupuesto. */
    .nav-logo img { height: 22px; }
    .nav-acciones { gap: 7px; }
    .nav-acciones .btn { min-height: 40px; padding: 0 13px; font-size: 14px; }
}

@media (min-width: 720px) {
    .confianza-grid { grid-template-columns: repeat(4, 1fr); }
    .txt-corto { display: none; }
    .txt-largo { display: inline; }
    .proceso-paso { grid-template-columns: 80px 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 900px) {
    .cierre-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* --- El texto de la tarjeta va SIEMPRE visible (decisión del 21/09/2026) --
   Aquí vivía el hover del §10: en escritorio el beneficio y el enlace salían
   con opacity 0 y solo aparecían al pasar el ratón. El cliente lo quiere
   como se ve la tarjeta enfocada: nombre, subtítulo y enlace, los tres a la
   vista en todas las tarjetas.

   Tiene sentido además del gusto: el carrusel se mueve solo, así que la
   tarjeta que te interesa se te escapa antes de que el ratón llegue, y en
   la primera pasada la sección parecía una fila de fotos con un rótulo.

   Se conservan los hover que NO ocultan nada: el zoom de la foto y el velo,
   que siguen marcando cuál está señalada.

   Si alguna vez se vuelve a esconder: el bloque llevaba
   `@media (hover: hover)` y **chrome-headless-shell declara `hover: none`**,
   así que ninguna captura automática lo enseñaba escondido. Esto no se
   revisa con capturas; se revisa con el ratón encima. */

.tarjeta-servicio:focus-visible {
    outline: 3px solid var(--arena);
    outline-offset: 3px;
}

@media (min-width: 1000px) {
    .nav-links { display: flex; }
    .hamburguesa { display: none; }
    .barra-movil { display: none; }
    body.con-barra { padding-bottom: 0; }
    .footer-grid { grid-template-columns: 1.35fr .8fr .8fr 1.15fr .8fr; }
}


/* Franja estrecha: a partir de 1000 px aparecen los enlaces del menú, y con
   el botón largo al lado el conjunto llega pegado al borde. Hasta 1100 px el
   botón de la cabecera usa el texto corto; el resto de la web no cambia. */
@media (min-width: 1000px) and (max-width: 1099px) {
    .nav-inner .txt-largo { display: none; }
    .nav-inner .txt-corto { display: inline; }
}

/* ---------------------------------------------------- Microcopy hero --- */
/* §4: la línea que explica qué pasa después de pulsar. Va bajo los botones,
   pequeña, para no competir con el CTA. */
.microcopy {
    margin-top: 16px;
    font-size: 14px;
    color: var(--azul-sobre);
    opacity: .85;
}

/* ----------------------------------------- Cierre: las dos vías --- */
/* Fusión del CTA de la galería y del bloque "No sé qué necesito". Fondo arena
   para que corte el ritmo: es el punto de la home donde se pide la acción.
   A la izquierda el mensaje y el único botón de presupuesto; a la derecha las
   dos formas de empezar. */
/* El cierre va en AZUL, no en arena. Dos motivos: es el momento de
   conversión de la home y necesita el peso del color de marca, y con la
   galería de servicios ya en arena habría tres bandas cálidas seguidas. */
.cierre { background: var(--azul); color: var(--azul-sobre); }
.cierre h2 { color: #fff; }
.cierre .lead { color: rgba(255, 255, 255, .88); }
.cierre .eyebrow { color: var(--arena-claro); }
/* Sobre el marino, el botón azul desaparecería: va en arena. */
.cierre .btn-principal { background: var(--arena); color: var(--azul); }
.cierre .btn-principal:hover { background: var(--arena-claro); }
.cierre .garantia { color: var(--arena-claro) !important; }
/* Las tarjetas de las dos vías se quedan blancas: destacan sobre el azul y
   mantienen la legibilidad del texto largo. */
.cierre .cierre-via { border-color: rgba(255, 255, 255, .18); }

.cierre-grid { display: grid; gap: 40px; align-items: start; }

.cierre-intro h2 { margin-bottom: 14px; }
.cierre-intro .lead { max-width: 46ch; }
.cierre-accion { margin-top: 28px; }
.cierre-accion .garantia { color: var(--arena-claro); }

.cierre-vias {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.cierre-via {
    padding: 22px 24px;
    background: var(--blanco);
    border: 1px solid rgba(160, 139, 111, .3);
    border-radius: var(--radio);
}
.cierre-via p { font-size: 15.5px; color: var(--azul-80); margin: 0; }
.cierre-etiqueta {
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--arena) !important;
    margin-bottom: 8px !important;
}
.cierre-via .btn { margin-top: 16px; }

.cta-botones-izq { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------- Reforma integral --- */
.integral-grid { display: grid; gap: 36px; align-items: center; }
.integral-foto {
    aspect-ratio: 4 / 3;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--arena-suave);
}

/* Hueco declarado de material pendiente. El proyecto no rellena con fotos de
   banco lo que el cliente todavía no ha entregado: se dice en pantalla. */
.hueco-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 20px;
    background: repeating-linear-gradient(
        45deg,
        var(--azul-medio), var(--azul-medio) 14px,
        #1b3d69 14px, #1b3d69 28px
    );
    color: var(--azul-sobre);
    font-size: 14px;
    text-align: center;
}
.hueco-foto strong { color: var(--arena-claro); font-size: 15px; }
.integral-lista {
    list-style: none;
    margin: 26px 0 30px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.integral-lista li {
    font-size: 14px;
    padding: 6px 13px;
    border: 1px solid var(--gris-claro);
    border-radius: 100px;
    color: var(--azul-80);
    background: var(--blanco);
}

/* --------------------------------------------------------- Por qué --- */
.porque-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 32px;
    margin-top: 40px;
}
.porque-item h3 { font-size: 18px; margin-bottom: 6px; }
.porque-item p { font-size: 15.5px; color: var(--azul-60); }
.porque-item::before {
    content: "";
    display: block;
    width: 28px; height: 2px;
    background: var(--arena);
    margin-bottom: 13px;
}

/* ------------------------------------------------------------- FAQ --- */
.faq-lista { margin-top: 36px; border-top: 1px solid var(--gris-claro); }

.faq-item { border-bottom: 1px solid var(--gris-claro); }
.faq-item summary {
    cursor: pointer;
    padding: 20px 40px 20px 0;
    font-weight: 600;
    color: var(--azul);
    font-size: 17px;
    list-style: none;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* El signo se dibuja con CSS en vez de con el triángulo del navegador, que
   cambia de forma en cada uno. Gira al abrirse. */
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    width: 10px; height: 10px;
    border-right: 2px solid var(--arena);
    border-bottom: 2px solid var(--arena);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq-item p { padding: 0 40px 22px 0; color: var(--azul-80); font-size: 16px; margin: 0; }

.faq-pie { margin-top: 26px; font-size: 15.5px; }
.faq-pie a { color: var(--azul); font-weight: 600; }

@media (min-width: 720px) {
    .porque-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .porque-grid { grid-template-columns: repeat(3, 1fr); }
    .integral-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}




/* ------------------------------------------------- Bloques de precio --- */
/* §7 y §8. Sin cajas ni bordes: es un mensaje de confianza, y encerrarlo en
   tarjetas lo hace parecer una tabla de tarifas, que es justo lo contrario
   de lo que dice el texto. */
.precio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 42px;
}
.precio-item h3 { font-size: 18px; margin-bottom: 6px; }
.precio-item p { font-size: 15.5px; color: var(--azul-60); }
.precio-item::before {
    content: "";
    display: block;
    width: 34px; height: 3px;
    background: var(--arena);
    margin-bottom: 14px;
}

/* Titular en caja baja y con punto, a diferencia del resto de h2. Se usa en
   las frases largas, donde las mayúsculas se leerían como un grito. */
.titular-frase { text-transform: none; }


/* --------------------------------------------- Presupuesto en 3 pasos --- */
.pasos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 40px;
}
.paso-item {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    padding: 26px 24px;
}
.paso-n {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--arena);
    margin-bottom: 12px;
}
.paso-item h3 { font-size: 19px; margin-bottom: 6px; }
.paso-item p { font-size: 15.5px; color: var(--azul-60); }

/* Botón en arena sobre fondo azul: el CTA final va sobre el color de marca,
   donde un botón azul sería invisible. */
.btn-arena { background: var(--arena); color: var(--azul); }
.btn-arena:hover { background: var(--arena-claro); }

@media (min-width: 720px) {
    .precio-grid { grid-template-columns: repeat(3, 1fr); }
    .pasos-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------- Páginas legales y FAQ --- */
/* Medida corta: son textos para leer, no para escanear. Por encima de unos
   72 caracteres por línea el ojo pierde el renglón al saltar. */
/* Columna de lectura centrada. Sin `margin-inline: auto` quedaba pegada a la
   izquierda con medio ancho de pantalla vacío al lado. Va DENTRO de .wrap,
   nunca sobre él: el .wrap ya se centra solo y ponerle un max-width encima
   descoloca la página entera. */
.legal-texto { max-width: 74ch; margin-inline: auto; }
.legal-texto h1 { margin-bottom: 26px; }
.legal-texto h2 {
    font-size: clamp(20px, 2.2vw, 25px);
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--gris-claro);
}
.legal-texto h3 { font-size: 18px; margin-top: 28px; }
.legal-texto p, .legal-texto li { font-size: 16.5px; }
.legal-texto ul { padding-left: 20px; margin-bottom: 1.1em; }
.legal-texto li { margin-bottom: 8px; }
/* `:not(.btn)` NO es cosmética: sin él esta regla ganaba a .btn-principal
   —misma especificidad más el descendiente— y pintaba el texto del botón de
   azul marino sobre fondo azul marino. El botón se veía vacío. */
.legal-texto a:not(.btn) { color: var(--azul); }

.legal-datos { list-style: none; padding-left: 0; }
.legal-datos li {
    padding: 9px 0;
    border-bottom: 1px solid var(--gris-claro);
}

.legal-fecha {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-claro);
    font-size: 14.5px;
    color: var(--azul-60);
}

/* Marcador de dato legal que falta. Deliberadamente feo y muy visible: su
   función es que sea IMPOSIBLE publicar un aviso legal a medias sin verlo. */
.pendiente {
    background: #ffe9c7;
    color: #7a4a00;
    font-weight: 700;
    font-size: .88em;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: .02em;
}

.aviso-borrador {
    border-left: 4px solid var(--arena);
    background: var(--arena-suave);
    padding: 20px 22px;
    border-radius: var(--radio);
    margin-bottom: 36px;
}
.aviso-borrador strong { display: block; color: var(--azul); margin-bottom: 6px; }
.aviso-borrador p { font-size: 15.5px; margin: 0; color: var(--azul-80); }

/* La lista de FAQ se reutiliza en su página propia. */
.faq-lista { margin-top: 32px; border-top: 1px solid var(--gris-claro); }
.faq-item { border-bottom: 1px solid var(--gris-claro); }
.faq-item summary {
    cursor: pointer;
    padding: 20px 40px 20px 0;
    font-weight: 600;
    color: var(--azul);
    font-size: 17px;
    list-style: none;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    width: 10px; height: 10px;
    border-right: 2px solid var(--arena);
    border-bottom: 2px solid var(--arena);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { padding: 0 40px 22px 0; color: var(--azul-80); font-size: 16px; margin: 0; }

/* Al llegar desde un enlace del pie, que el título no quede pegado al menú. */
.faq-item[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ======================================================== Chatbot (§26) --- */
/* Abajo a la derecha. En móvil se apoya sobre la barra fija de acción usando
   --barra-h, que existe justamente para no repetir ese alto en tres sitios. */

.chat-lanzador {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 80;
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    /* Degradado en lugar de azul plano: le da volumen y hace que el dorado
       del símbolo destaque más que sobre un color liso. */
    background: radial-gradient(circle at 32% 28%, #1d4275 0%, var(--azul) 58%, #081b35 100%);
    color: var(--blanco-roto);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
    /* Dos sombras: la de profundidad y un halo dorado que lo separa del fondo
       sea cual sea la sección sobre la que caiga. */
    box-shadow:
        0 8px 22px rgba(8, 24, 45, .38),
        0 0 0 1px rgba(195, 177, 152, .35);
    animation: latido-chat 3.4s ease-in-out infinite;
}
.chat-lanzador:hover {
    transform: translateY(-3px) scale(1.04);
    animation-play-state: paused;
    box-shadow:
        0 12px 28px rgba(8, 24, 45, .45),
        0 0 0 2px rgba(195, 177, 152, .7),
        0 0 26px 6px rgba(201, 165, 106, .55);
}
.chat-lanzador:focus-visible {
    outline: 3px solid var(--arena-claro);
    outline-offset: 3px;
}

/* El símbolo de la marca, en los dos colores del logo. */
.chat-casita { width: 32px; height: auto; position: relative; z-index: 1; }
.casita-muro   { fill: #fff; }
.casita-tejado { fill: var(--arena-claro); }

/* Halo que respira. No parpadea ni salta: llama la atención por el borde,
   que es lo que se percibe de reojo, sin molestar mientras se lee. */
@keyframes latido-chat {
    0%, 100% {
        box-shadow:
            0 8px 22px rgba(8, 24, 45, .38),
            0 0 0 1px rgba(195, 177, 152, .35),
            0 0 0 0 rgba(201, 165, 106, .75);
    }
    55% {
        box-shadow:
            0 8px 22px rgba(8, 24, 45, .38),
            0 0 0 1px rgba(195, 177, 152, .5),
            0 0 0 13px rgba(201, 165, 106, 0);
    }
}

/* Destello que cruza el botón cada pocos segundos, como el reflejo de una
   superficie pulida. Va dentro del botón, que tiene overflow oculto, así que
   el propio círculo lo recorta. */
.chat-brillo {
    position: absolute;
    top: -60%; left: -140%;
    /* Estrecho y poco opaco a propósito: un reflejo, no una capa blanca.
       Con el 60% de ancho y .42 de alfa que tenía antes, al cruzar dejaba el
       botón lavado y el azul de marca desaparecía medio segundo. */
    width: 30%; height: 220%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .34) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: rotate(18deg);
    pointer-events: none;
    animation: destello-chat 3.4s ease-in-out infinite;
}
/* El cruce ocupa solo el último 18% del ciclo: un golpe de luz rápido y
   después quietud, que llama más que un brillo continuo. */
@keyframes destello-chat {
    0%, 82%   { left: -140%; }
    100%      { left: 220%; }
}

/* ---------------------------------------- Bocadillo de invitación ----- */
/* Asoma a la izquierda del botón cuando el chat está cerrado. Sin él, el
   lanzador es un círculo azul con una casita: bonito, pero no dice para qué
   sirve ni que haya alguien al otro lado.

   Va ENCIMA del botón y alineado con él por la derecha. Al lado quedaba
   estrecho en móvil —el botón se come 92 px de un ancho de 390— y obligaba a
   partir la frase en dos líneas. Arriba dispone de todo el ancho.

   Anclado por `right`, no por el izquierdo: así crece hacia la izquierda
   según lo largo que sea el texto y su pico nunca se despega del botón. */
.chat-invitacion {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom) + 62px + 14px);  /* + alto del botón */
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(260px, calc(100vw - 36px));
    padding: 11px 12px 11px 16px;
    background: var(--blanco);
    color: var(--azul);
    border: 1px solid var(--gris-claro);
    border-radius: 22px 22px 6px 22px;
    box-shadow: 0 8px 22px rgba(8, 24, 45, .16);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;

    /* Nace oculto y lo enciende el JS pasados unos segundos. `visibility`
       además de la opacidad: sin ella seguiría capturando los clics de lo que
       tiene debajo mientras es invisible. */
    opacity: 0;
    visibility: hidden;
    /* Nace un poco más abajo y sube al aparecer: el movimiento apunta al
       sitio del que sale, que es el botón. */
    transform: translateY(8px) scale(.96);
    transform-origin: right bottom;
    /* `visibility` es una propiedad discreta: si se transiciona con duración,
       el cambio salta a mitad de camino y la aparición se come la primera
       mitad del fundido. El patrón correcto es duración 0 y jugar con el
       retardo: al mostrar, inmediata; al ocultar, esperando al fundido. */
    transition: opacity .28s ease,
                transform .28s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear .28s;
}
.chat-invitacion.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .28s ease,
                transform .28s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear 0s;
}
.chat-invitacion:hover { border-color: var(--arena-claro); }

/* Pico del bocadillo, apuntando hacia abajo, al centro del botón.
   El botón mide 62 px y está a 18 px del borde, así que su centro cae a 49 px
   del borde derecho de la pantalla; el bocadillo empieza en esos mismos 18 px,
   luego el pico va a 49 - 18 - 6 = 25 px de su propio borde derecho. */
.chat-invitacion::after {
    content: "";
    position: absolute;
    right: 25px;
    bottom: -7px;
    width: 12px; height: 12px;
    background: var(--blanco);
    border-right: 1px solid var(--gris-claro);
    border-bottom: 1px solid var(--gris-claro);
    transform: rotate(45deg);
    border-bottom-right-radius: 3px;
}

.chat-invitacion-cerrar {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--arena-suave);
    color: var(--arena);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.chat-invitacion-cerrar:hover { background: var(--azul); color: #fff; }
.chat-invitacion-cerrar svg { width: 11px; height: 11px; stroke: currentColor; }

/* Con el chat abierto no pinta nada, igual que el lanzador. */
#chatbot.abierto .chat-invitacion { display: none; }

/* Al abrirse, el lanzador se esconde: el panel ya trae su propia aspa, y en
   móvil los dos juntos tapaban media pantalla. */
#chatbot.abierto .chat-lanzador { display: none; }

/* El atributo `hidden` oculta con display:none desde la hoja del navegador,
   y el display:flex de abajo le gana por especificidad: sin esta regla el
   panel del chat aparece SIEMPRE abierto, en todas las páginas. */
.chat-panel[hidden] { display: none; }

.chat-panel {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 81;
    width: min(380px, calc(100vw - 36px));
    height: min(560px, calc(100vh - 110px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--blanco-roto);
    border: 1px solid var(--gris-claro);
    border-radius: 10px;
    box-shadow: var(--sombra-media);
}

.chat-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 18px;
    background: var(--azul);
    color: var(--blanco-roto);
}
.chat-cabecera strong { display: block; font-size: 15.5px; }
.chat-cabecera span { display: block; font-size: 13px; color: var(--azul-sobre); }
.chat-cerrar {
    margin-left: auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: var(--azul-sobre);
    border-radius: var(--radio);
}
.chat-cerrar:hover { color: var(--blanco-roto); background: rgba(255,255,255,.1); }
.chat-cerrar svg { width: 19px; height: 19px; stroke: currentColor; }

.chat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-burbuja {
    max-width: 85%;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;      /* respeta los saltos de línea del modelo */
    overflow-wrap: anywhere;    /* una URL larga no debe ensanchar el panel */
}
.chat-bot  { align-self: flex-start; background: var(--arena-suave); color: var(--azul); border-bottom-left-radius: 3px; }
.chat-user { align-self: flex-end;   background: var(--azul); color: var(--blanco-roto); border-bottom-right-radius: 3px; }

/* Puntos de "está escribiendo" */
.chat-escribiendo { display: flex; gap: 4px; padding: 14px; }
.chat-escribiendo span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--azul-60);
    animation: chatpunto 1.2s infinite ease-in-out;
}
.chat-escribiendo span:nth-child(2) { animation-delay: .18s; }
.chat-escribiendo span:nth-child(3) { animation-delay: .36s; }
@keyframes chatpunto {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Botonera de arranque (§20) */
.chat-opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-opcion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border: 1px solid var(--gris-claro);
    border-radius: 100px;
    background: var(--blanco);
    color: var(--azul);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.chat-opcion:hover { border-color: var(--arena); background: var(--arena-suave); }

.chat-derivar {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radio);
    background: var(--arena);
    color: var(--azul);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.chat-derivar:hover { background: var(--arena-claro); }

.chat-forma {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--gris-claro);
    background: var(--blanco);
}
.chat-forma input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    font: inherit;
    font-size: 15px;
    color: var(--azul);
    background: var(--blanco-roto);
}
.chat-forma input:focus { border-color: var(--arena); }
.chat-forma button {
    flex: none;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: var(--radio);
    background: var(--azul);
    color: var(--blanco-roto);
    cursor: pointer;
}
.chat-forma button:hover { background: var(--azul-medio); }
.chat-forma button svg { width: 20px; height: 20px; stroke: currentColor; }

@media (max-width: 1000px) {
    .chat-panel {
        right: 10px; left: 10px;
        width: auto;
        height: min(540px, calc(100vh - 90px));
    }
    /* La barra fija de acción SOLO existe cuando hay WhatsApp configurado
       (body.con-barra). Descontar su alto siempre dejaba el chat flotando
       sobre un hueco vacío mientras no hay número. */
    body.con-barra .chat-lanzador { bottom: calc(14px + var(--barra-h) + env(safe-area-inset-bottom)); }
    body.con-barra .chat-invitacion { bottom: calc(14px + 62px + 14px + var(--barra-h) + env(safe-area-inset-bottom)); }
    body.con-barra .chat-panel {
        bottom: calc(10px + var(--barra-h) + env(safe-area-inset-bottom));
        height: min(540px, calc(100vh - var(--barra-h) - 90px));
    }
}

/* ------------------------------------------- Movimiento reducido --- */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }

    /* La regla de arriba no basta para el lanzador del chat: dejaría el
       destello congelado en mitad del recorrido y el halo en su fotograma
       final. Se apagan del todo y el botón se queda quieto, con su sombra
       normal: sigue viéndose, deja de moverse. */
    .chat-lanzador { animation: none !important; }
    .chat-brillo   { display: none; }
}