/* =============================================
   Madearte — estilos principales
   Paleta y tipografía según el brandbook:
   negro manda (45 %), hueso firma (30 %), nogal de apoyo (10 %), bosque solo en detalles (5 %).
   ============================================= */

/* ---------- Fuentes (servidas desde nuestro dominio: sin llamadas a Google, mejor para RGPD) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/urbanist-variable.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
    --negro: #141413;
    --hueso: #F2EDE6;
    --nogal: #2A211B;
    --bosque: #2E4436;
    --crema: #E9DDC7;
    --arena: #E2D9CC;
    --blanco-roto: #F9F6F1;

    --texto: var(--negro);
    --texto-suave: #5F5A54;
    --texto-claro: rgba(242, 237, 230, 0.72);
    --linea: rgba(20, 20, 19, 0.14);
    --linea-clara: rgba(242, 237, 230, 0.18);

    --f-titular: "Poppins", system-ui, sans-serif;
    --f-texto: "Poppins", system-ui, sans-serif;
    --f-lema: "Urbanist", system-ui, sans-serif;

    --ancho: 1320px;
    --margen: clamp(1rem, 4vw, 3rem);
    --seccion: clamp(4.5rem, 10vw, 8.5rem);
    --radio: 20px;
    --radio-peq: 12px;
    --cabecera-alto: 88px;   /* barra flotante (64px) + margen superior + aire */
    --cabecera-barra: 64px;
    --radio-capa: clamp(28px, 4vw, 48px);
    --panel: clamp(440px, 46vw, 720px);   /* ancho del panel de cristal de la portada */
    --suave: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-alto) + 1rem); }
body {
    margin: 0;
    font-family: var(--f-texto);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texto);
    background: var(--hueso);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bosque); outline-offset: 3px; }
.seccion--negro :focus-visible, .portada :focus-visible, .cabecera :focus-visible, .pie :focus-visible, .cta :focus-visible { outline-color: var(--crema); }

.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; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--crema); color: var(--negro); border-radius: var(--radio-peq); }
.saltar:focus { top: 1rem; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.centrado { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.texto-corto { max-width: 46rem; }
.texto-corto > * + * { margin-top: 1rem; }

/* ---------- Tipografía ---------- */
.titulo-1, .portada__titulo {
    font-family: var(--f-titular);
    font-weight: 700;
    font-size: clamp(2.6rem, 7.5vw, 6.2rem);
    line-height: 1;
    letter-spacing: -.035em;
}
.titulo-2 {
    font-family: var(--f-titular);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.titulo-3 {
    font-family: var(--f-titular);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -.015em;
}
/* Parte fina de un título: "<span class="ligero">Fabricamos</span> para tu casa…" */
.ligero { font-family: var(--f-lema); font-weight: 200; letter-spacing: -.01em; }

.subtitulo {
    font-family: var(--f-lema);
    font-weight: 300;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Negritas para destacar palabras clave dentro de un párrafo: algo más de peso y el color del
   texto principal, aunque el párrafo vaya en gris suave. */
p strong { font-weight: 600; color: var(--texto); -webkit-hyphens: manual; hyphens: manual; }
.subtitulo strong { font-weight: 500; color: inherit; }
.seccion--negro p strong { color: inherit; }
.seccion--negro .camino__tarjeta p strong { color: var(--texto); }

/* Texto corrido justificado, con guiones automáticos (la página va en lang="es") para que no
   queden huecos grandes entre palabras. Los titulares, tarjetas y textos centrados no se justifican. */
.intro__texto p, .somos__texto p, .camino__tarjeta p, .fabrica__texto p, .visita__texto p,
.acordeon__item p, .texto-legal p, .contacto-rapido__texto p, .ventana__texto > p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Solo se parten palabras largas (8 letras o más, dejando al menos 4 a cada lado). */
    hyphenate-limit-chars: 8 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
}

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.1rem;
    padding: .8rem 1.6rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--f-titular);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--suave), color .25s var(--suave), border-color .25s var(--suave), transform .25s var(--suave);
}
.boton:hover { transform: translateY(-1px); }
.boton--crema { background: var(--crema); color: var(--negro); }
.boton--crema:hover { background: var(--hueso); }
.boton--negro { background: var(--negro); color: var(--hueso); }
.boton--negro:hover { background: var(--nogal); }
.boton--linea { border-color: rgba(242, 237, 230, .55); color: var(--hueso); }
.boton--linea:hover { border-color: var(--hueso); background: rgba(242, 237, 230, .08); }
.boton--linea-oscura { border-color: rgba(20, 20, 19, .35); color: var(--negro); }
.boton--linea-oscura:hover { border-color: var(--negro); }
.boton--peq { min-height: 2.6rem; padding: .55rem 1.2rem; font-size: .875rem; }
.boton--ancho { width: 100%; }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.75rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: .2rem;
}
.enlace-flecha::after { content: "→"; transition: transform .25s var(--suave); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------- Cabecera ---------- */
.cabecera {
    position: fixed;
    top: .75rem;
    left: .75rem;
    right: .75rem;
    z-index: 50;
    border-radius: 18px;
    color: var(--hueso);
}
.cabecera::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(20, 20, 19, .28);
    border: 1px solid rgba(242, 237, 230, .14);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    pointer-events: none;
    transition: background-color .35s var(--suave);
}
.cabecera.is-solida::before { background: rgba(20, 20, 19, .55); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cabecera::before { background: rgba(20, 20, 19, .85); }
    .cabecera.is-solida::before { background: rgba(20, 20, 19, .92); }
}
.cabecera__interior {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: var(--cabecera-barra);
    padding-inline: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 720px) {
    .cabecera { top: .5rem; left: .5rem; right: .5rem; border-radius: 14px; }
    .cabecera__interior { height: 56px; }
}
.cabecera__logo { position: relative; z-index: 2; text-decoration: none; margin-right: auto; }
/* Logo oficial (SVG crema). Altura recomendada en cabecera: 32–48 px; ancho mínimo 120 px. */
.cabecera__logo { display: block; line-height: 0; }
.logo { display: block; width: auto; height: 34px; }
@media (max-width: 720px) { .logo { height: 28px; } }
.cabecera__acciones { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 2; }
.cabecera__tel { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.icono { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }

.menu__lista { display: flex; gap: clamp(1rem, 1.8vw, 1.9rem); }
.menu__enlace {
    position: relative;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    padding-block: .4rem;
}
.menu__enlace::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--crema);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--suave);
}
.menu__enlace:hover::after, .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
.menu__solo-movil, .menu__pie { display: none; }

.cabecera__menu { display: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.cabecera__hamburguesa, .cabecera__hamburguesa::before, .cabecera__hamburguesa::after {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--hueso);
    border-radius: 2px;
    transition: transform .3s var(--suave), opacity .2s;
}
.cabecera__hamburguesa { position: relative; }
.cabecera__hamburguesa::before, .cabecera__hamburguesa::after { content: ""; position: absolute; left: 0; }
.cabecera__hamburguesa::before { top: -7px; }
.cabecera__hamburguesa::after { top: 7px; }
.cabecera__menu[aria-expanded="true"] .cabecera__hamburguesa { background: transparent; }
.cabecera__menu[aria-expanded="true"] .cabecera__hamburguesa::before { transform: translateY(7px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] .cabecera__hamburguesa::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
    .cabecera__tel span { display: none; }
}
@media (max-width: 1040px) {
    .cabecera__menu { display: block; }
    .cabecera__tel { display: none; }
    .menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: calc(var(--cabecera-alto) + 2rem) var(--margen) 2.5rem;
        background: var(--negro);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s var(--suave), visibility 0s linear .3s;
    }
    .menu.is-abierto { visibility: visible; opacity: 1; transition: opacity .3s var(--suave); }
    .menu__lista { flex-direction: column; gap: .35rem; }
    .menu__solo-movil { display: list-item; }
    .menu__enlace { font-family: var(--f-titular); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 600; letter-spacing: -.02em; }
    .menu__enlace::after { display: none; }
    .menu__enlace[aria-current="page"] { color: var(--crema); }
    .menu__pie { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; }
    .menu__dato { color: var(--texto-claro); text-decoration: none; }
    body.menu-abierto { overflow: hidden; }
}
@media (max-width: 520px) {
    .cabecera__cta { display: none; }
}

/* ---------- Portada ----------
   Home (.portada--cine): carrusel a pantalla completa que se desplaza en horizontal, con el titular
   centrado encima. main.js mueve la pista escribiendo --i (foto actual) y --arrastre (px).
   Cocinas, armarios y puertas: una sola foto y, a la izquierda, un panel de cristal
   esmerilado con el título. La foto va dos veces: .portada__fondo cubre todo (se ve desenfocada tras
   el panel) y .portada__nitida ocupa solo la parte derecha. */
.portada {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    color: var(--hueso);
    background: var(--negro);
    /* clip (no hidden): así el navegador no puede desplazar la portada de lado al enfocar algo dentro. */
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
    touch-action: pan-y;
    cursor: grab;
}
.portada.is-arrastrando { cursor: grabbing; user-select: none; }
.portada__panel { cursor: auto; }
.portada__pista {
    position: absolute;
    inset: 0;
    display: flex;
    transform: translateX(calc(var(--i, 0) * -100% + var(--arrastre, 0px)));
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
    user-select: none;
}
.portada__pista.sin-transicion { transition: none; }
/* Cada diapositiva recorta su contenido: con el zoom de entrada, la foto de la siguiente
   sobresaldría por el borde y taparía un trozo de la actual. */
.portada__foto { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; overflow: clip; }
.portada__foto::after {
    /* Solo un velo arriba para que se lea el menú. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 20, 19, .45), transparent 22%);
}
.portada__fondo, .portada__nitida { position: absolute; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.portada__fondo { inset: 0; width: 100%; }
.portada__nitida { top: 0; right: 0; width: calc(100% - var(--panel)); }
/* Encuadre por foto (home.php): qué parte de una foto horizontal se ve cuando no cabe entera. */
.portada__encuadre--izquierda { object-position: 35% 50%; }
.portada__encuadre--derecha { object-position: 65% 50%; }
/* Zoom lento al entrar cada foto: arranca algo ampliada y se abre poco a poco. main.js marca
   la diapositiva visible con .is-activa; sin JS o con "reducir movimiento" las fotos quedan quietas. */
@media (prefers-reduced-motion: no-preference) {
    .js .portada__foto .portada__fondo, .js .portada__foto .portada__nitida { transform: scale(1.06); transition: transform 9s cubic-bezier(.2, .6, .25, 1); }
    .js .portada__foto.is-activa .portada__fondo, .js .portada__foto.is-activa .portada__nitida { transform: scale(1); }
}

.portada__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--panel);
    display: flex;
    align-items: center;
    /* El texto arranca alineado con el logo de la cabecera. */
    padding: calc(var(--cabecera-alto) + 2rem) clamp(2rem, 4vw, 4.5rem) 3rem max(var(--margen), calc((100vw - 1480px) / 2 + var(--margen)));
    background: rgba(20, 20, 19, .34);
    border-right: 1px solid rgba(242, 237, 230, .16);
    -webkit-backdrop-filter: blur(28px) saturate(1.15);
    backdrop-filter: blur(28px) saturate(1.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .portada__panel { background: rgba(20, 20, 19, .8); }
}
.portada__contenido { max-width: 34rem; }
/* El tamaño del título sigue al ancho del panel (unidades cqi): así cabe igual en cualquier pantalla. */
.portada__panel .portada__contenido { width: 100%; container-type: inline-size; }
.portada__titulo {
    font-family: var(--f-titular);
    font-weight: 600;
    font-size: clamp(2.1rem, 3.3vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--hueso);
    text-wrap: balance;
}
.portada__panel .portada__titulo { font-size: clamp(1.75rem, 7.6cqi, 3rem); }
.portada__lema {
    max-width: 28rem;
    margin-top: 1.5rem;
    font-family: var(--f-lema);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.55;
    color: rgba(242, 237, 230, .85);
}

@media (max-width: 720px) {
    /* En móvil: foto a pantalla completa y el cristal abajo, a todo el ancho. */
    .portada__nitida { display: none; }
    .portada__panel {
        inset: auto 0 0 0;
        width: auto;
        /* Abajo deja sitio al botón flotante de WhatsApp para que no tape el titular. */
        padding: 2.25rem var(--margen) 5.75rem;
        border-right: 0;
        border-top: 1px solid rgba(242, 237, 230, .16);
    }
    .portada__titulo { font-size: 1.9rem; }
    .portada__lema { margin-top: 1rem; font-size: 1rem; }
}

/* Portada centrada (home, profesionales, proyectos, la fábrica): foto o vídeo a sangre con un velo
   oscuro y el titular centrado en mayúsculas espaciadas y finas, como la portada de una revista de
   interiorismo. El velo es más denso en el centro, donde va el texto, para que se lea también
   sobre las fotos claras. */
.portada--cine .portada__foto::after {
    background:
        radial-gradient(ellipse 70% 55% at 50% 52%, rgba(20, 20, 19, .55), rgba(20, 20, 19, .2)),
        linear-gradient(to bottom, rgba(20, 20, 19, .45), transparent 24%, transparent 76%, rgba(20, 20, 19, .35));
}
/* Tríptico (la fábrica): tres fotos verticales en fila; en el móvil, solo la primera, que ya es
   vertical. Sin zoom de entrada: cada foto crecería por encima de la de al lado. */
.portada__foto--triptico { display: flex; }
.portada__foto--triptico .portada__fondo { position: relative; inset: auto; flex: 1 1 0; min-width: 0; width: auto; }
.js .portada__foto--triptico .portada__fondo { transform: none; }
@media (max-width: 720px) {
    .portada__foto--triptico .portada__fondo:not(:first-child) { display: none; }
}
/* En las interiores son fotos y vídeos de la nave, claros y con mucho detalle: velo más denso. */
.portada--interior.portada--cine .portada__foto::after {
    background:
        radial-gradient(ellipse 70% 55% at 50% 52%, rgba(20, 20, 19, .68), rgba(20, 20, 19, .4)),
        linear-gradient(to bottom, rgba(20, 20, 19, .4), transparent 24%);
}
.portada__centro {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--cabecera-alto) + 1rem) var(--margen) 4rem;
    text-align: center;
}
.portada__centro .portada__contenido { max-width: none; }
.portada__titulo--cine {
    font-family: var(--f-lema);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(20, 20, 19, .35), 0 2px 30px rgba(20, 20, 19, .45);
}
/* El espaciado entre letras también se añade tras la última: el padding-left lo compensa para
   que cada línea quede centrada de verdad. */
.portada__marca {
    display: block;
    padding-left: .12em;
    font-size: clamp(1.75rem, 7.2vw, 5.75rem);
    font-weight: 200;
    letter-spacing: .12em;
}
.portada__descriptor {
    display: block;
    margin-top: clamp(.9rem, 1.6vw, 1.4rem);
    padding-left: .34em;
    font-size: clamp(.8rem, 1.45vw, 1.3rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .34em;
    text-wrap: balance;
}

/* Portada fija: "Quiénes somos" (.capa) sube por encima como una capa al hacer scroll.
   .capas limita el tramo fijo a esas dos secciones. main.js escribe --cubierto (0–1) en la portada
   para oscurecerla y alejar su texto a medida que la tapa la capa. */
.capas { position: relative; }
.capas > .portada { position: sticky; top: 0; z-index: 0; }
.portada::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--negro);
    opacity: calc(var(--cubierto, 0) * .65);
    pointer-events: none;
}
.portada__contenido { transform: translateY(calc(var(--cubierto, 0) * -60px)); }
.capa {
    box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .35);
}
/* Borde escalonado reutilizable (.forma): a un lado del corte la sección sube un poco más (pestaña)
   y se une al resto con una curva en S: una curva cóncava abajo (::after) y la esquina redondeada de
   la pestaña arriba (::before), cada una de la mitad de la altura, para que no se pisen.
   El corte va al centro, en el eje del titular; si la portada tiene panel de cristal, coincide con
   su borde (--panel), así la línea del cristal continúa en la curva. Solo se redondea la esquina
   que queda a la vista. --forma-fondo es el color de la sección. */
.forma {
    --forma-fondo: var(--hueso);
    --forma-corte: 50%;
    --forma-alto: var(--radio-capa);
    --forma-curva: calc(var(--forma-alto) / 2);
    position: relative;
    z-index: 1;
    border-radius: var(--radio-capa) 0 0 0;
}
.forma::before, .forma::after { content: ""; position: absolute; bottom: 100%; pointer-events: none; }
.forma::before {
    left: var(--forma-corte);
    right: 0;
    height: var(--forma-alto);
    background: var(--forma-fondo);
    border-radius: var(--forma-curva) var(--radio-capa) 0 0;
}
.forma::after {
    left: calc(var(--forma-corte) - var(--forma-curva));
    width: var(--forma-curva);
    height: var(--forma-curva);
    background: radial-gradient(circle at 0 0, transparent calc(var(--forma-curva) - .5px), var(--forma-fondo) var(--forma-curva));
}
/* Variante con la pestaña a la izquierda del corte (para alternar). */
.forma--izquierda { border-radius: 0 var(--radio-capa) 0 0; }
.forma--izquierda::before {
    left: 0;
    right: auto;
    width: var(--forma-corte);
    border-radius: var(--radio-capa) var(--forma-curva) 0 0;
}
.forma--izquierda::after {
    left: var(--forma-corte);
    background: radial-gradient(circle at 100% 0, transparent calc(var(--forma-curva) - .5px), var(--forma-fondo) var(--forma-curva));
}
.seccion--negro.forma { --forma-fondo: var(--negro); }
/* Tras otra sección del mismo color no hay borde que dibujar, y la esquina redondeada dejaría ver
   la portada fija de detrás como una mancha oscura (pasaba en Puertas, antes de las preguntas). */
.seccion--hueso + .seccion--hueso.forma { border-radius: 0; }
.seccion--hueso + .seccion--hueso.forma::before, .seccion--hueso + .seccion--hueso.forma::after { content: none; }
.cta.forma { --forma-fondo: var(--nogal); }
body:has(.portada__panel) .forma { --forma-corte: var(--panel); }
@media (max-width: 720px) {
    /* En móvil el panel de la portada va abajo: no hay línea vertical con la que alinear. */
    body:has(.portada__panel) .forma { --forma-corte: 54%; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--seccion); overflow-x: clip; } /* clip: lo que entra desde un lado no crea scroll horizontal (y no rompe sticky) */
.seccion--sin-arriba { padding-top: 0; }
/* Cuando lo siguiente ya trae su propio aire (p. ej. el bloque 3D, que empieza recortado). */
.seccion--poco-abajo { padding-bottom: clamp(2rem, 4vw, 3rem); }
.seccion--hueso { background: var(--hueso); color: var(--negro); }
.seccion--negro { background: var(--negro); color: var(--hueso); }
.seccion--negro .subtitulo, .seccion--negro p { color: var(--texto-claro); }
.seccion--negro .titulo-2, .seccion--negro .titulo-3 { color: var(--hueso); }

.cabecera-seccion { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecera-seccion--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.cabecera-seccion--fila > div { max-width: 46rem; }
.cabecera-seccion--fila .enlace-flecha { margin-top: 0; flex: none; }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
@media (max-width: 720px) {
    .cabecera-seccion--fila { flex-direction: column; align-items: flex-start; }
}

/* Quiénes somos + valores */
.somos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.somos__texto .subtitulo { margin-block: 1.5rem 1rem; color: var(--texto); }
.somos__texto p:not(.subtitulo) { color: var(--texto-suave); }
.valores { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .9rem; }
.valor {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(11rem, 18vw, 15.5rem);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radio);
    font-size: .95rem;
    line-height: 1.5;
}
.valor__titulo { font-family: var(--f-titular); font-weight: 700; font-size: 1.35rem; margin-bottom: .4rem; }
.valor--negro { background: var(--negro); color: var(--hueso); }
.valor--nogal { background: var(--nogal); color: var(--hueso); }
.valor--bosque { background: var(--bosque); color: var(--hueso); }
.valor--arena { background: var(--arena); color: var(--negro); }
.valor--crema { background: var(--crema); color: var(--negro); }
/* Baldosas claras dentro de una sección oscura: su texto no debe heredar el color claro de la sección. */
.valores .valor--arena p, .valores .valor--crema p { color: rgba(20, 20, 19, .75); }
.valor--negro .valor__titulo, .valor--nogal .valor__titulo, .valor--bosque .valor__titulo { color: var(--crema); }
.valor--negro p, .valor--nogal p, .valor--bosque p { color: rgba(242, 237, 230, .82); }
@media (max-width: 960px) {
    .somos { grid-template-columns: 1fr; }
}
/* En móvil, de dos en dos el texto de cada baldosa ocupaba 3 o 4 líneas: una sola columna, más baja. */
@media (max-width: 560px) {
    .valores { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .valor { min-height: 7.5rem; }
}

/* Para quién: foto contenida + tarjeta superpuesta que entra desde un lado (inspirado en la carpintería sueca) */
.caminos { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.camino { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.camino__foto {
    grid-column: 2 / 7;
    grid-row: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--nogal);
}
.camino__foto img { width: 100%; height: 100%; object-fit: cover; }
.camino__tarjeta {
    grid-column: 6 / 11;
    grid-row: 1;
    position: relative;
    padding: clamp(1.5rem, 2.8vw, 2.5rem);
    border-radius: var(--radio);
    background: var(--hueso);
    color: var(--negro);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.camino__tarjeta .titulo-3 { color: var(--negro); margin-bottom: .75rem; }
.camino__tarjeta p { color: var(--texto-suave); margin-bottom: 1.5rem; font-size: .95rem; }
.camino--invertido .camino__foto { grid-column: 7 / 12; }
.camino--invertido .camino__tarjeta { grid-column: 3 / 8; }
@media (max-width: 860px) {
    .camino { grid-template-columns: 1fr; }
    .camino__foto, .camino--invertido .camino__foto { grid-column: 1; grid-row: 1; }
    .camino__tarjeta, .camino--invertido .camino__tarjeta { grid-column: 1; grid-row: 2; margin: -3rem 1rem 0; }
}

/* Qué fabricamos: "vitrina" de tres tarjetas casi sin texto dentro de un marco nogal redondeado.
   Cocinas lleva un panel de cristal; armarios, la foto enmarcada bajo el título; puertas, el título sobre la foto. */
.vitrina {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: .75rem;
    padding: .75rem;
    border-radius: 28px;
    background: var(--nogal);
}
.vitrina__item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: clamp(22rem, 32vw, 28rem);
    border-radius: var(--radio);
    overflow: hidden;
    color: var(--hueso);
    text-decoration: none;
    isolation: isolate;
}
.vitrina__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .9s var(--suave); }
.vitrina__item:hover .vitrina__foto { transform: scale(1.04); }
.vitrina__titulo { font-family: var(--f-titular); font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: -.015em; }
.vitrina__flecha {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(242, 237, 230, .92);
    color: var(--negro);
    font-size: .95rem;
    transition: transform .3s var(--suave), background-color .3s;
}
.vitrina__item:hover .vitrina__flecha { transform: rotate(45deg); background: var(--hueso); }

/* Cocinas: panel de cristal a la derecha, como el de la portada */
.vitrina__item--cocinas .vitrina__foto { object-position: 30% 45%; }
.vitrina__cristal {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(46%, 17rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: rgba(42, 33, 27, .28);
    border-left: 1px solid rgba(242, 237, 230, .16);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vitrina__cristal { background: rgba(42, 33, 27, .82); }
}
.vitrina__ver { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .85rem; font-weight: 600; }
.vitrina__ver::after { content: "→"; transition: transform .25s var(--suave); }
.vitrina__item:hover .vitrina__ver::after { transform: translateX(4px); }

/* Armarios: tarjeta lisa con el título arriba y la foto enmarcada abajo */
.vitrina__item--marco { padding: 1.25rem 1.25rem .75rem; background: rgba(242, 237, 230, .06); border: 1px solid rgba(242, 237, 230, .08); }
.vitrina__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vitrina__nota { margin-top: .35rem; font-family: var(--f-lema); font-weight: 300; font-size: .95rem; color: rgba(242, 237, 230, .7); }
.vitrina__marco { position: relative; flex: 1; margin-top: 1.25rem; border-radius: var(--radio-peq); overflow: hidden; isolation: isolate; }
.vitrina__marco .vitrina__foto { object-position: center 35%; }

/* Puertas: título sobre la foto, con un velo arriba para que se lea */
.vitrina__item--puertas::before { content: ""; position: absolute; inset: 0 0 auto; height: 50%; background: linear-gradient(to bottom, rgba(20, 20, 19, .7), transparent); z-index: -1; }
.vitrina__cabeza--sobre { padding: 1.25rem; }

@media (max-width: 960px) {
    .vitrina { grid-template-columns: 1fr 1fr; }
    .vitrina__item--cocinas { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .vitrina { grid-template-columns: 1fr; }
    .vitrina__item { height: 24rem; }
    .vitrina__cristal { width: auto; left: 0; top: auto; padding: 1.25rem; border-left: 0; border-top: 1px solid rgba(242, 237, 230, .16); }
}

/* Diseño 3D: la foto crece de una forma redondeada a pantalla completa al hacer scroll.
   main.js escribe --p (de 0 a 1) en la sección; sin JS o con movimiento reducido se ve ya completa. */
.expande { --p: 1; position: relative; height: 210vh; background: var(--hueso); }
.expande__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; display: grid; place-items: center; }
.expande__foto {
    position: absolute;
    inset: 0;
    background: var(--nogal);
    /* Arranca como un arco alto y estrecho (poco recorte arriba: así no deja un hueco vacío encima). */
    clip-path: inset(calc((1 - var(--p)) * 9%) calc((1 - var(--p)) * 31%) round calc((1 - var(--p)) * 240px));
    will-change: clip-path;
}
@media (max-width: 720px) {
    /* En móvil el arco necesita más anchura o se queda en una franja. */
    .expande__foto { clip-path: inset(calc((1 - var(--p)) * 9%) calc((1 - var(--p)) * 15%) round calc((1 - var(--p)) * 150px)); }
}
.expande__foto::after { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 19, calc(var(--p) * .55)); }
.expande__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.15 - var(--p) * .15)); }
.expande__texto {
    position: relative;
    max-width: 46rem;
    text-align: center;
    color: var(--hueso);
    opacity: clamp(0, calc((var(--p) - .65) * 4), 1);
    transform: translateY(calc((1 - var(--p)) * 40px));
}
.expande__texto .titulo-2 { color: var(--hueso); }
.expande__texto .subtitulo { margin-block: 1.25rem 2rem; color: rgba(242, 237, 230, .88); }
.no-js .expande, .movimiento-reducido .expande { height: auto; }
.no-js .expande__fijo, .movimiento-reducido .expande__fijo { position: relative; min-height: 80vh; padding-block: var(--seccion); }

/* Diseño 3D frente a realidad */
.cabecera-seccion__nota { max-width: 24rem; color: var(--texto-suave); font-size: .95rem; }
.cabecera-seccion__nota--ancha { max-width: 32rem; }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.comparar + .comparar { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.comparar__item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden; background: var(--arena); }
.comparar__item img { width: 100%; height: 100%; object-fit: cover; }
.comparar__item figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--negro);
    color: var(--crema);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
@media (max-width: 720px) { .comparar { grid-template-columns: 1fr; } }

/* La fábrica */
.fabrica { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.fabrica__texto > p:not(.subtitulo) { color: var(--texto-suave); max-width: 34rem; }
.fabrica__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--nogal); }
.fabrica__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Fábrica y exposición: la foto de la exposición se superpone en la esquina de la de la nave. */
.fabrica__fotos { position: relative; padding: 0 14% 16% 0; }
.fabrica__foto--sobre { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; border: 6px solid var(--hueso); box-shadow: 0 24px 48px -24px rgba(20, 20, 19, .55); }.fabrica__texto .subtitulo { margin-block: 1.5rem 2rem; color: var(--texto); }
.acordeon { border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
.acordeon__item summary::after { content: "+"; font-family: var(--f-lema); font-weight: 300; font-size: 1.7rem; line-height: 1; transition: transform .3s var(--suave); }
.acordeon__item[open] summary::after { transform: rotate(45deg); }
.acordeon__item p { padding-bottom: 1.25rem; color: var(--texto-suave); max-width: 38rem; }
@media (max-width: 860px) {
    .fabrica { grid-template-columns: 1fr; }
    .fabrica__foto { aspect-ratio: 4 / 3; }
    .fabrica__fotos { padding: 0 8% 14% 0; }
    .fabrica__foto--sobre { width: 38%; aspect-ratio: 4 / 5; border-width: 4px; }
}

/* Proyectos: tira de fotos curvada, como vista desde dentro de un cilindro.
   main.js coloca cada foto (--x, --z, --r) según su distancia al centro y la hace avanzar sola;
   las de los bordes se acercan y giran hacia el centro. Sin JS se ve como una fila normal. */
.proyectos { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.proyectos__boton { margin-top: 1.75rem; }
.curva {
    --ancho: clamp(10.5rem, 16vw, 15rem);
    position: relative;
    height: calc(var(--ancho) * 1.333 * 1.35);
    perspective: 1000px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.curva.is-arrastrando { cursor: grabbing; }
.curva__pista { position: absolute; inset: 0; transform-style: preserve-3d; }
.curva__item {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--ancho);
    aspect-ratio: 3 / 4;
    border-radius: var(--radio-peq);
    overflow: hidden;
    background: var(--nogal);
    transform: translate3d(var(--x, 0px), -50%, var(--z, 0px)) rotateY(var(--r, 0deg));
    visibility: var(--v, visible);
    backface-visibility: hidden;
}
.curva__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* Sin JS: fila con scroll horizontal normal. */
.no-js .curva { height: auto; perspective: none; overflow-x: auto; }
.no-js .curva__pista { position: static; display: flex; gap: 1rem; padding-inline: var(--margen); }
.no-js .curva__item { position: static; flex: none; transform: none; }

/* Preguntas frecuentes (final de la home) */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq__cabecera { position: sticky; top: calc(var(--cabecera-alto) + 2rem); }
.faq__cabecera .enlace-flecha { margin-top: 1.5rem; }
@media (max-width: 860px) {
    .faq { grid-template-columns: 1fr; }
    .faq__cabecera { position: static; }
}

/* ---------- Páginas interiores ---------- */

/* Portada interior: sin carrusel y algo más baja que la de la home. Se queda fija dentro de
   <main> y todas las secciones siguientes (opacas) pasan por encima. */
.portada--interior { position: sticky; top: 0; z-index: 0; height: 88vh; height: 88svh; min-height: 520px; cursor: auto; touch-action: auto; }
main > .portada--interior ~ section { position: relative; z-index: 1; }
.portada__fondo--arriba { object-position: center 30%; }
.portada__fondo--abajo { object-position: center 70%; }
/* Foto vertical (armarios, puertas): el panel se ensancha hasta que el hueco de la foto queda
   vertical (unos 3:4) y la foto se ve casi entera, sin ampliarla. La curva de la sección siguiente
   lo sigue porque usa la misma variable. */
body:has(.portada--vertical) { --panel: clamp(46vw, calc(100vw - 88vh * .74), 66vw); }
@supports (height: 1svh) {
    body:has(.portada--vertical) { --panel: clamp(46vw, calc(100vw - 88svh * .74), 66vw); }
}

/* Introducción: título grande a la izquierda y texto a la derecha */
.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.intro__texto > * + * { margin-top: 1rem; }
.intro__texto .subtitulo { color: var(--texto); }
.intro__texto p:not(.subtitulo) { color: var(--texto-suave); }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

/* Tarjetas: foto entera y franja de cristal abajo con título y hasta dos líneas de texto */
.tarjetas { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }
/* Profesionales: subtítulo de cada grupo de tarjetas (carpinteros / interioristas…). */
.servicios__perfil { margin-bottom: 1rem; }
.tarjetas + .servicios__perfil { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Cinco tarjetas (cocinas): algo más altas y, en pantallas anchas, se salen un poco del contenedor
   (hasta 1480 px) para que no queden pequeñas. */
.tarjetas--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: calc((100% - min(100vw - 2 * var(--margen), 1480px)) / 2);
}
.tarjetas--5 .tarjeta { aspect-ratio: 2 / 3; }
.tarjetas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjeta {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radio);
    overflow: hidden;
    isolation: isolate;
    color: var(--hueso);
    text-decoration: none;
    background: var(--nogal);
}
.tarjeta__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--suave); }
.tarjeta:hover .tarjeta__foto { transform: scale(1.05); }
.tarjeta__cristal {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    padding: 1rem 1.1rem;
    border-radius: calc(var(--radio) - .4rem);
    background: rgba(20, 20, 19, .32);
    border: 1px solid rgba(242, 237, 230, .14);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tarjeta__cristal { background: rgba(20, 20, 19, .78); }
}
.tarjeta__titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--f-titular); font-weight: 500; font-size: 1.1rem; line-height: 1.2; }
.tarjeta__flecha { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(242, 237, 230, .92); color: var(--negro); font-size: .8rem; transition: transform .3s var(--suave); }
.tarjeta:hover .tarjeta__flecha { transform: rotate(45deg); }
/* Siempre dos líneas de alto (aunque el texto ocupe una): así todos los cristales de una fila
   quedan a la misma altura. Los textos se escriben para no pasar de dos líneas. */
.tarjeta__texto { min-height: calc(2em * 1.45); margin-top: .3rem; font-size: .85rem; line-height: 1.45; color: rgba(242, 237, 230, .85); }
/* Número de paso (Cocinas: el proceso en orden). */
.tarjeta__numero {
    position: absolute;
    top: .8rem;
    left: .8rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(242, 237, 230, .92);
    color: var(--negro);
    font-family: var(--f-titular);
    font-weight: 600;
    font-size: .85rem;
}
.js .tarjeta.aparece:nth-child(2) { transition-delay: .1s; }
.js .tarjeta.aparece:nth-child(3) { transition-delay: .2s; }
.js .tarjeta.aparece:nth-child(4) { transition-delay: .3s; }
.js .tarjeta.aparece:nth-child(5) { transition-delay: .4s; }
@media (max-width: 1180px) {
    .tarjetas--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .tarjetas--5, .tarjetas--4, .tarjetas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    /* En móvil las tarjetas se deslizan de lado en vez de apilarse. */
    .tarjetas, .tarjetas--5, .tarjetas--4, .tarjetas--3, .tarjetas--2 {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--margen) * -1);
        padding-inline: var(--margen);
        scroll-padding-inline: var(--margen);
        scrollbar-width: none;
    }
    .tarjetas::-webkit-scrollbar { display: none; }
    .tarjeta { scroll-snap-align: start; }
}

/* Aviso "¿Eres profesional?" (puertas) */
.aviso-profesional { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.aviso-profesional p { max-width: 30rem; }

/* Proyectos: filtros, rejilla tipo mosaico y visor a pantalla completa */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filtros__boton {
    padding: .6rem 1.2rem;
    border: 1px solid rgba(20, 20, 19, .25);
    border-radius: 999px;
    background: none;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s;
}
.filtros__boton:hover { border-color: var(--negro); }
.filtros__boton[aria-pressed="true"] { background: var(--negro); border-color: var(--negro); color: var(--hueso); }
.galeria { columns: 3 17rem; column-gap: 1rem; }
.galeria__item { break-inside: avoid; margin-bottom: 1rem; }
.galeria__item[hidden] { display: none; }
.galeria__item.is-entrando { animation: entrar .6s var(--suave) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.galeria__boton { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radio-peq); overflow: hidden; background: var(--arena); cursor: zoom-in; }
.galeria__boton img { width: 100%; height: auto; transition: transform .8s var(--suave); }
.galeria__boton:hover img { transform: scale(1.03); }
/* Rejilla sin visor (Puertas): mismas fotos redondeadas, sin cursor de ampliar. */
.galeria__foto { border-radius: var(--radio-peq); overflow: hidden; background: var(--arena); }
.galeria__foto img { width: 100%; height: auto; }

.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 20, 19, .94); color: var(--hueso); }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(20, 20, 19, .6); }

/* Ventana "Ven a conocernos" (partials/ventana-visita.php): mapa a la izquierda, datos y botones a la derecha. */
.ventana {
    width: min(58rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    overflow: auto;
    background: var(--hueso);
    color: var(--negro);
    box-shadow: 0 40px 80px -30px rgba(20, 20, 19, .6);
}
.ventana::backdrop { background: rgba(20, 20, 19, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ventana__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ventana__mapa { padding: clamp(.75rem, 1.5vw, 1rem); }
.ventana__texto { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); }
.ventana__texto > p { color: var(--texto-suave); }
.ventana__datos { display: grid; gap: .35rem; }
.ventana__datos dt { margin-top: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.ventana__datos dd { margin: 0; }
.ventana__botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.ventana__cerrar {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--negro);
    color: var(--hueso);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 720px) {
    .ventana__caja { grid-template-columns: 1fr; }
    .ventana__mapa .mapa__enlace { aspect-ratio: 4 / 3; }
    .ventana__texto { padding-top: .5rem; }
}
.visor__figura { display: grid; justify-items: center; gap: .9rem; max-width: min(90vw, 1100px); }
.visor__foto { width: auto; height: auto; max-width: 100%; max-height: 80vh; border-radius: var(--radio-peq); object-fit: contain; }
.visor__pie { font-size: .9rem; color: var(--texto-claro); text-align: center; }
.visor__boton {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(242, 237, 230, .3);
    border-radius: 50%;
    background: rgba(242, 237, 230, .08);
    color: var(--hueso);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color .25s;
}
.visor__boton:hover { background: rgba(242, 237, 230, .2); }
.visor__boton--cerrar { top: 1.25rem; right: 1.25rem; }
.visor__boton--anterior { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.visor__boton--siguiente { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
    .visor__boton--anterior, .visor__boton--siguiente { top: auto; bottom: 1.25rem; transform: none; }
}

/* La fábrica: recorrido horizontal. En escritorio la sección se queda fija y las paradas avanzan
   de lado con el scroll (main.js escribe --avance en px y --largo, la altura extra necesaria).
   En móvil o sin JS es una fila que se desliza con el dedo. */
.recorrido { position: relative; background: var(--hueso); padding-block: var(--seccion); }
/* minmax(0, 1fr): en escritorio la fila es más ancha que la pantalla y, con una columna auto,
   ensanchaba la rejilla y empujaba el titular hacia la derecha. */
.recorrido__fijo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }
.recorrido__titulo { text-align: center; }
.recorrido__pista {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-inline: var(--margen);
    scroll-padding-inline: var(--margen);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.recorrido__pista::-webkit-scrollbar { display: none; }
.recorrido.is-fijo { height: calc(100vh + var(--largo, 0px)); padding-block: 0; }
.recorrido.is-fijo .recorrido__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; align-content: center; overflow: hidden; }
/* La fila arranca en el margen de la página, no en el de la columna de texto: con el titular
   centrado, empezar en la columna dejaba un hueco grande a la izquierda en pantallas anchas.
   Si las paradas caben enteras, se centran (safe: si no caben, vuelven a empezar a la izquierda). */
.recorrido.is-fijo .recorrido__pista { overflow: visible; transform: translateX(calc(var(--avance, 0px) * -1)); will-change: transform; justify-content: safe center; }
.parada { flex: 0 0 clamp(15rem, 24vw, 21rem); scroll-snap-align: start; }
.parada__foto { aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--nogal); }
.parada__foto img { width: 100%; height: 100%; object-fit: cover; }
.parada__numero { display: block; margin-top: 1.1rem; font-family: var(--f-lema); font-weight: 200; font-size: 2rem; line-height: 1; color: var(--texto-suave); }
.parada__titulo { margin-top: .5rem; font-family: var(--f-titular); font-weight: 600; font-size: 1.2rem; }
.parada__texto { margin-top: .3rem; max-width: 19rem; font-size: .95rem; line-height: 1.5; color: var(--texto-suave); }
@media (max-height: 780px) { .recorrido.is-fijo .parada__foto { aspect-ratio: 1 / 1; } }
@media (max-width: 720px) { .parada { flex-basis: 78%; } }

/* La fábrica: visita */
.visita { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
/* Mapa fijo (partials/mapa.php): imagen con enlace a Google Maps y la cita a OpenStreetMap. */
.mapa { margin: 0; }
.mapa__enlace { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radio); overflow: hidden; background: var(--arena); }
.mapa__enlace img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--suave); }
.mapa__enlace:hover img { transform: scale(1.03); }
.mapa__boton {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(20, 20, 19, .82);
    color: var(--hueso);
    font-family: var(--f-titular);
    font-size: .85rem;
    font-weight: 500;
}
.mapa__fuente { margin-top: .5rem; font-size: .75rem; color: var(--texto-suave); }
.contacto-rapido__texto .mapa { margin-top: 1.75rem; max-width: 26rem; }
.contacto-rapido__texto .mapa__enlace { aspect-ratio: 4 / 3; }
.visita__texto .subtitulo { margin-block: 1.25rem 2rem; color: var(--texto-suave); }
.visita__texto .datos-contacto { margin-bottom: 2rem; }
@media (max-width: 860px) { .visita { grid-template-columns: 1fr; } .visita__mapa .mapa__enlace { aspect-ratio: 4 / 3; } }

/* Textos legales */
.texto-legal { max-width: 52rem; }
.texto-legal h2 { margin: 2.5rem 0 .75rem; font-family: var(--f-titular); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p, .texto-legal li { color: var(--texto-suave); }
.texto-legal p + p { margin-top: .75rem; }
.texto-legal ul { display: grid; gap: .4rem; padding-left: 1.25rem; list-style: disc; }
.texto-legal strong { color: var(--texto); font-weight: 600; }
.texto-legal a { color: var(--negro); }
.tabla-legal { overflow-x: auto; }
.tabla-legal table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-legal th, .tabla-legal td { padding: .75rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla-legal th { font-weight: 600; }
.tabla-legal td { color: var(--texto-suave); }

.cabecera-pagina {
    padding: calc(var(--cabecera-alto) + clamp(3.5rem, 9vw, 7rem)) 0 clamp(3rem, 7vw, 5.5rem);
    background: var(--negro);
    color: var(--hueso);
}
.cabecera-pagina .titulo-1 { max-width: 16ch; }
.cabecera-pagina .subtitulo { max-width: 40rem; margin-top: 1.5rem; color: rgba(242, 237, 230, .82); }

/* ---------- Página de contacto ---------- */
.contacto-rapido { padding-block: var(--seccion); background: var(--hueso); color: var(--negro); }
.contacto-rapido__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contacto-rapido .titulo-3 { margin-bottom: 1rem; }
.contacto-rapido__texto > p { color: var(--texto-suave); margin-bottom: 2rem; }
@media (max-width: 900px) { .contacto-rapido__rejilla { grid-template-columns: minmax(0, 1fr); } }

.datos-contacto { display: grid; gap: 1.1rem; }
.datos-contacto li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea); }
.datos-contacto__tipo { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); padding-top: .2rem; }
.datos-contacto a { text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.datos-contacto a:hover { text-decoration: underline; }

/* ---------- Franja "Pedir presupuesto" (cierra todas las páginas menos contacto) ---------- */
.cta { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--nogal); color: var(--hueso); }
.cta__interior { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.cta .titulo-2 { color: var(--hueso); }
.cta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cta__tel { color: var(--texto-claro); text-decoration: none; font-size: .95rem; }
.cta__tel:hover { color: var(--hueso); }

/* ---------- Formulario ---------- */
.contacto-rapido__form { padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radio); background: var(--blanco-roto); color: var(--negro); box-shadow: 0 0 0 1px var(--linea); }
.formulario { display: grid; gap: 1.15rem; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .formulario__fila { grid-template-columns: 1fr; } }
.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo__etiqueta { font-size: .85rem; font-weight: 600; padding: 0; }
.campo__opcional { font-weight: 400; color: var(--texto-suave); }
.campo__control {
    width: 100%;
    min-height: 3rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(20, 20, 19, .2);
    border-radius: var(--radio-peq);
    background: #fff;
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.campo__control:focus { outline: none; border-color: var(--negro); box-shadow: 0 0 0 3px rgba(46, 68, 54, .25); }
.campo__control[aria-invalid="true"] { border-color: #A3412C; }
textarea.campo__control { resize: vertical; min-height: 7rem; }
select.campo__control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--negro) 50%), linear-gradient(135deg, var(--negro) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.campo__error { font-size: .85rem; color: #A3412C; }

.selector { display: flex; flex-wrap: wrap; gap: .5rem; }
.selector__opcion { position: relative; cursor: pointer; }
.selector__opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.selector__opcion span {
    display: inline-block;
    padding: .6rem 1.2rem;
    border: 1px solid rgba(20, 20, 19, .25);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .2s, color .2s, border-color .2s;
}
.selector__opcion input:checked + span { background: var(--negro); border-color: var(--negro); color: var(--hueso); }
.selector__opcion input:focus-visible + span { outline: 2px solid var(--bosque); outline-offset: 2px; }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; line-height: 1.5; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--negro); flex: none; }
.campo__legal { margin-top: .6rem; font-size: .78rem; line-height: 1.5; color: var(--texto-suave); }

.formulario__aviso { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radio-peq); font-size: .95rem; }
.formulario__aviso--ok { background: var(--bosque); color: var(--hueso); }
.formulario__aviso--error { background: #F6E3DD; color: #6E2A1C; }
.formulario__aviso-titulo { font-weight: 600; margin-bottom: .25rem; }

/* ---------- Pie ---------- */
.pie { padding-block: clamp(4rem, 8vw, 6rem) 2rem; background: var(--negro); color: var(--texto-claro); font-size: .92rem; }
.pie__marca { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--linea-clara); }
.pie__logo { text-decoration: none; }
.pie__logo { display: inline-block; line-height: 0; }
.pie__logo .logo { height: clamp(44px, 6vw, 84px); }
.pie__columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pie__titulo { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--crema); margin-bottom: 1rem; }
.pie ul li + li { margin-top: .45rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--hueso); }
.pie address { font-style: normal; line-height: 1.8; }
.pie__horario { margin-top: .75rem; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-clara); font-size: .82rem; }
.pie__legal ul { display: flex; gap: 1.5rem; }
.pie__legal ul li + li { margin-top: 0; }
/* Parece un enlace, pero es un botón: abre el aviso de cookies y no lleva a ninguna página. */
.enlace-boton { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.enlace-boton:hover { text-decoration: underline; }
/* Sin JS no se puede cambiar la elección, ni hace falta: tampoco se carga Analytics. */
html:not(.js) [data-cookies-abrir] { display: none; }
@media (max-width: 720px) { .pie__columnas { grid-template-columns: 1fr 1fr; } .pie__columnas > :last-child { grid-column: 1 / -1; } }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 40;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--bosque);
    color: var(--hueso);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
    transition: transform .25s var(--suave);
}
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante svg { width: 1.65rem; height: 1.65rem; fill: currentColor; }

/* ---------- Aviso de cookies (main.js lo muestra y lo cierra) ---------- */
/* Mismo cristal que la cabecera, pero más opaco: pasa por encima de secciones claras y el texto
   tiene que seguir leyéndose. A la derecha deja sitio al botón de WhatsApp. */
.aviso-cookies {
    position: fixed;
    left: clamp(1rem, 2.5vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    max-width: 26rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(242, 237, 230, .14);
    background: rgba(20, 20, 19, .78);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
    color: var(--hueso);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s var(--suave), transform .45s var(--suave);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies.is-visible { opacity: 1; transform: none; }
.aviso-cookies p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--texto-claro); }
.aviso-cookies a { color: var(--hueso); white-space: nowrap; }
.aviso-cookies__botones { display: flex; gap: .5rem; }
.aviso-cookies :focus-visible { outline-color: var(--crema); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aviso-cookies { background: rgba(20, 20, 19, .94); }
}
@media (max-width: 720px) {
    .aviso-cookies {
        right: calc(1rem + 3.5rem + .75rem);
        padding: .9rem 1rem;
    }
}

/* ---------- Animación de entrada (main.js añade .is-visible) ---------- */
/* Entrada desde un lado (más específico que .js .aparece y menos que .is-visible, que va después). */
.js .aparece.aparece--derecha { transform: translateX(80px); }
.js .aparece.aparece--izquierda { transform: translateX(-80px); }
.js .aparece.aparece--derecha, .js .aparece.aparece--izquierda { transition-duration: 1.1s; transition-delay: .2s; }
/* Escalonado: los elementos de un mismo grupo aparecen uno detrás de otro. */
.js .valor.aparece:nth-child(2) { transition-delay: .1s; }
.js .valor.aparece:nth-child(3) { transition-delay: .2s; }
.js .valor.aparece:nth-child(4) { transition-delay: .3s; }

/* Paralaje suave en algunas fotos (solo navegadores con animaciones ligadas al scroll; el resto las ve quietas). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .camino__foto img, .fabrica__foto img, .comparar__item img {
            scale: 1.14;
            animation: paralaje linear both;
            animation-timeline: view();
            animation-range: cover;
        }
    }
}
@keyframes paralaje {
    from { translate: 0 -6%; }
    to { translate: 0 6%; }
}

.js .aparece { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--suave), transform .9s var(--suave); }
.js .aparece.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .js .aparece { opacity: 1; transform: none; }
    .portada__pista { transition: none; }
}