/* =====================================================================
   Casa Menar · estilos
   ---------------------------------------------------------------------
   Tipografía: Marcellus (títulos; su evasé rima con el logotipo) +
   Atkinson Hyperlegible Next (texto; diseñada para leerse sin esfuerzo).
   Firma visual: el techo del logotipo (pendiente ≈ 32°) sobre las fotos.
   Naranja de marca solo como relleno/gráfico o sobre fondo oscuro:
   sobre fondo claro no llega a 3:1 de contraste como texto.
   Movimiento: todo se desactiva con prefers-reduced-motion.
   ===================================================================== */

@font-face{font-family:"Marcellus";src:url("/fonts/marcellus-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/fonts/atkinson-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --tinta:#1D252D;          /* carbón del logotipo */
  --tinta-2:#3B4650;
  --tinta-suave:#56616C;    /* 6:1 sobre cal */
  --cal:#FAF9F6;            /* muro encalado */
  --cielo:#E6EDF1;
  --cielo-2:#D3DFE6;
  --linea:rgba(29,37,45,.18);
  --naranja:#FF914D;        /* naranja del logotipo */
  --naranja-claro:#FFA469;
  --naranja-texto:#B04A0B;  /* 5.2:1 sobre cal: único naranja apto para texto claro */
  --wa:#0E7A40;
  --wa-oscuro:#0A6234;
  --error:#A6321F;

  --f-titulo:"Marcellus",Optima,Candara,"Palatino Linotype",Georgia,serif;
  --f-texto:"Atkinson Hyperlegible Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ancho:1240px;
  --pad:clamp(20px,5vw,56px);
  --seccion:clamp(72px,9vw,136px);
  --r:4px;
  --cabecera:84px;

  --e-salida:cubic-bezier(.16,1,.3,1);   /* frena al final: entradas suaves */
  --e-suave:cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecera) + 16px);overflow-x:clip}
body{margin:0;background:var(--cal);color:var(--tinta);font:400 1.1875rem/1.65 var(--f-texto);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.1em;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--f-titulo);font-weight:400;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:2px}
.oscuro :focus-visible,.seccion--tinta :focus-visible,.pie :focus-visible,.aviso :focus-visible,.hero :focus-visible,.cabecera--sobre:not(.solida) :focus-visible{outline-color:var(--naranja)}
::selection{background:var(--naranja);color:var(--tinta)}

.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-80px;z-index:100;padding:.8rem 1.1rem;background:var(--tinta);color:var(--cal);border-radius:var(--r);font-weight:700;text-decoration:none}
.saltar:focus{top:12px}

/* ---------- Estructura ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--pad)}
.seccion{padding-block:var(--seccion)}
.seccion--cielo{background:var(--cielo)}
.seccion--tinta{background:var(--tinta);color:var(--cal)}
.seccion--ajustada{padding-block:clamp(48px,6vw,88px)}
.oscuro{background:var(--tinta);color:var(--cal)}

/* ---------- Tipografía ---------- */
.sobretitulo{display:block;margin-bottom:1.1rem;font-family:var(--f-titulo);font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)}
.oscuro .sobretitulo,.seccion--tinta .sobretitulo{color:var(--naranja)}
.titulo-xl{font-size:clamp(2.6rem,1.15rem + 5.1vw,5.5rem);line-height:1.03;letter-spacing:-.015em}
.titulo{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem)}
.titulo-m{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);line-height:1.15}
.entradilla{font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);line-height:1.55;color:var(--tinta-2);max-width:36em}
.oscuro .entradilla,.seccion--tinta .entradilla{color:#C9D2D9}
.titulo+.entradilla,.titulo-xl+.entradilla,.direccion+.entradilla{margin-top:1.3rem}
.tenue{color:var(--tinta-suave)}
.prosa a,.enlace{text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:var(--naranja-texto)}
.prosa a:hover,.enlace:hover{text-decoration-thickness:3px}
.oscuro .enlace,.seccion--tinta .enlace{text-decoration-color:var(--naranja)}

/* ---------- Íconos ---------- */
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico--lleno{fill:currentColor;stroke:none}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:3.25rem;padding:.8em 1.5em;border:2px solid transparent;border-radius:var(--r);font:700 1.0625rem/1.2 var(--f-texto);text-decoration:none;text-align:center;cursor:pointer;transition:background-color .25s var(--e-suave),color .25s var(--e-suave),border-color .25s var(--e-suave),transform .25s var(--e-salida),box-shadow .25s}
.btn .ico{transition:transform .3s var(--e-salida)}
.btn:hover .ico--flecha{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--naranja);color:var(--tinta)}
.btn--primario:hover{background:var(--naranja-claro);transform:translateY(-2px);box-shadow:0 14px 24px -16px rgba(255,145,77,.9)}
.btn--oscuro{background:var(--tinta);color:var(--cal)}
.btn--oscuro:hover{background:var(--tinta-2)}
.btn--contorno{border-color:currentColor;color:var(--tinta)}
.btn--contorno:hover{background:var(--tinta);border-color:var(--tinta);color:var(--cal)}
.oscuro .btn--contorno,.seccion--tinta .btn--contorno{color:var(--cal)}
.oscuro .btn--contorno:hover,.seccion--tinta .btn--contorno:hover{background:var(--cal);border-color:var(--cal);color:var(--tinta)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-oscuro);transform:translateY(-2px)}
.btn--chico{min-height:2.75rem;padding:.55em 1.15em;font-size:1rem}
.acciones{display:flex;flex-wrap:wrap;gap:.85rem 1rem}
@media (max-width:520px){.acciones{flex-direction:column;align-items:stretch}.aviso .acciones{flex-direction:row}}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;background:var(--cal);border-bottom:1px solid transparent;transition:background-color .45s var(--e-suave),border-color .35s}
.cabecera.con-borde{border-bottom-color:var(--linea)}
.cabecera__fila{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:var(--cabecera)}
.marca{position:relative;flex:none;display:block;line-height:0}
.marca img{width:clamp(118px,12vw,150px);height:auto;transition:opacity .45s var(--e-suave)}
.marca__claro{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.menu{margin-left:auto}
.menu ul{display:flex;gap:clamp(18px,2.6vw,38px)}
.menu a{position:relative;display:block;padding:.6rem 0;font-weight:500;font-size:1.0625rem;text-decoration:none;transition:color .35s var(--e-suave)}
.menu a::before{content:"";position:absolute;left:50%;top:-.1rem;width:22px;height:8px;margin-left:-11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M1.5 9 14 1.6 26.5 9' fill='none' stroke='%23FF914D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .35s var(--e-salida)}
.menu a:hover::before,.menu a[aria-current="page"]::before{opacity:1;transform:none}
.cabecera__acciones{display:flex;align-items:center;gap:.75rem}
.hamburguesa{display:none;width:3rem;height:3rem;padding:0;border:0;border-radius:var(--r);background:transparent;cursor:pointer;position:relative}
.hamburguesa span,.hamburguesa span::before,.hamburguesa span::after{position:absolute;left:11px;right:11px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .3s var(--e-salida),background-color .3s}
.hamburguesa span{top:50%;margin-top:-1px}
.hamburguesa span::before,.hamburguesa span::after{content:"";left:0;right:0}
.hamburguesa span::before{top:-7px}
.hamburguesa span::after{top:7px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* Portada con video: la cabecera flota transparente y se vuelve sólida al desplazarse */
.cabecera--sobre{position:fixed;left:0;right:0;background:transparent}
.cabecera--sobre.solida{background:var(--cal);border-bottom-color:var(--linea)}
.cabecera--sobre:not(.solida) .marca__oscuro{opacity:0}
.cabecera--sobre:not(.solida) .marca__claro{opacity:1;filter:drop-shadow(0 1px 5px rgba(8,12,16,.5))}
.cabecera--sobre:not(.solida) .hamburguesa{filter:drop-shadow(0 1px 4px rgba(8,12,16,.55))}
.cabecera--sobre:not(.solida) .menu a{color:var(--cal)}
.cabecera--sobre:not(.solida) .hamburguesa span,
.cabecera--sobre:not(.solida) .hamburguesa span::before,
.cabecera--sobre:not(.solida) .hamburguesa span::after{background:var(--cal)}

@media (max-width:960px){
  :root{--cabecera:72px}
  .hamburguesa{display:block}
  .menu{position:fixed;inset:var(--cabecera) 0 0 0;margin:0;padding:clamp(24px,6vw,48px) var(--pad) 40px;background:var(--cal);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--e-suave),transform .4s var(--e-salida),visibility 0s .3s}
  .menu.abierto{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--e-suave),transform .4s var(--e-salida)}
  .menu ul{flex-direction:column;gap:0}
  .menu li{border-bottom:1px solid var(--linea)}
  .menu a{padding:1.05rem 0;font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.6rem,6vw,2.1rem)}
  .menu a::before{display:none}
  .menu a[aria-current="page"]{color:var(--naranja-texto)}
  .cabecera__acciones .btn{display:none}
  .cabecera__acciones{margin-left:auto}
  html.menu-abierto{overflow:hidden}
  /* Sin JavaScript no hay botón de menú: la lista queda siempre visible bajo el logotipo */
  .sin-js .hamburguesa{display:none}
  .sin-js .cabecera__fila{flex-wrap:wrap}
  .sin-js .menu{position:static;inset:auto;flex-basis:100%;margin:0;padding:0 0 .6rem;visibility:visible;opacity:1;transform:none;overflow:visible;background:transparent}
  .sin-js .menu ul{flex-direction:row;flex-wrap:wrap;gap:0 1.4rem}
  .sin-js .menu li{border:0}
  .sin-js .menu a{padding:.5rem 0;font-family:var(--f-texto);font-weight:500;font-size:1.0625rem}
}

/* ---------- Portada con video ---------- */
.hero{--izq:max(var(--pad),calc((100% - var(--ancho)) / 2 + var(--pad)));position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(100svh,1000px);background:var(--tinta);color:var(--cal);overflow:clip}
.hero__medios{position:absolute;inset:0;z-index:-2;background:var(--tinta)}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__video{opacity:0;transition:opacity 1.6s var(--e-suave)}
.hero.video-activo .hero__video{opacity:1}
/* velo: oscurece a la izquierda (donde va el texto), abajo y arriba (cabecera) para asegurar el contraste.
   Medido sobre fotogramas reales del video: título ≥ 3:1 y bajada ≥ 4,5:1 en todo el ciclo (el toldo blanco de la fachada queda justo detrás de "mereces."). */
.hero__medios::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(18,25,31,.9) 0%,rgba(18,25,31,.8) 38%,rgba(18,25,31,.56) 64%,rgba(18,25,31,.24) 84%,rgba(18,25,31,0) 100%),
  linear-gradient(0deg,rgba(18,25,31,.72) 0%,rgba(18,25,31,0) 42%),
  linear-gradient(180deg,rgba(18,25,31,.62) 0%,rgba(18,25,31,0) 26%)}
.hero__contenido{position:relative;padding-block:calc(var(--cabecera) + clamp(32px,6vh,72px)) clamp(92px,13vh,150px)}
.hero__techo{display:block;width:clamp(96px,9vw,132px);aspect-ratio:160/50;margin-bottom:1.2rem;color:var(--naranja);overflow:visible}
.hero__techo path{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linejoin:round;stroke-dasharray:100}
.hero .sobretitulo{margin-bottom:.9rem;color:#DCE3E8;text-wrap:balance;text-shadow:0 1px 2px rgba(8,12,16,.45),0 0 16px rgba(8,12,16,.4)}
/* La sombra va como filtro en el h1 (no como text-shadow) para que las líneas con overflow:hidden no la recorten */
.hero__titulo{max-width:15em;font-size:clamp(2.55rem,.8rem + 5.4vw,5.4rem);line-height:1.03;letter-spacing:-.015em;filter:drop-shadow(0 2px 3px rgba(8,12,16,.28)) drop-shadow(0 4px 26px rgba(8,12,16,.42))}
.hero__marca{display:block;margin-bottom:.38em;font-size:.5em;line-height:1.1;letter-spacing:.01em;color:var(--naranja)}
.hero__titulo .linea{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__titulo .linea>span{display:block}
.hero__sub{max-width:34em;margin:1.5rem 0 2.1rem;font-size:clamp(1.1rem,1rem + .45vw,1.3rem);line-height:1.55;color:#EEF2F5;text-shadow:0 1px 2px rgba(8,12,16,.45),0 0 22px rgba(8,12,16,.4)}
.hero__nota{margin:1.2rem 0 0;font-size:1rem;color:#D3DBE1;text-shadow:0 1px 2px rgba(8,12,16,.45),0 0 16px rgba(8,12,16,.4)}
.hero .btn--contorno{color:var(--cal)}
.hero .btn--contorno:hover{background:var(--cal);border-color:var(--cal);color:var(--tinta)}
.hero__pausa{position:absolute;z-index:1;left:var(--izq);bottom:clamp(22px,4vh,38px);display:grid;place-content:center;width:2.9rem;height:2.9rem;padding:0;border:1.5px solid rgba(250,249,246,.55);border-radius:50%;background:rgba(18,25,31,.4);color:var(--cal);cursor:pointer;transition:background-color .25s,border-color .25s}
.hero__pausa:hover{background:rgba(250,249,246,.2);border-color:var(--cal)}
.hero__pausa::before{content:"";width:.7rem;height:.9rem;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero__pausa.en-pausa::before{width:0;height:0;margin-left:.22rem;border:0;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-left:.8rem solid currentColor}
.sin-js .hero__pausa{display:none}

/* En pantallas angostas (celular y tableta vertical) el video va en una franja 4:3 bajo la cabecera:
   el original es de 480p y, recortado a pantalla completa en vertical, se vería muy borroso. */
@media (max-width:860px){
  .hero{display:block;min-height:0}
  .hero__medios{position:relative;inset:auto;z-index:0;width:100%;aspect-ratio:4/3;max-height:64svh}
  .hero__poster,.hero__video{object-position:55% 50%}
  .hero__medios::after{background:
    linear-gradient(180deg,rgba(18,25,31,.84) 0%,rgba(18,25,31,.52) 22%,rgba(18,25,31,0) 46%),
    linear-gradient(0deg,var(--tinta) 0%,rgba(29,37,45,.65) 18%,rgba(29,37,45,0) 52%)}
  .hero__contenido{margin-top:-3.4rem;padding-block:0 clamp(56px,9vh,88px)}
  .hero__pausa{left:auto;right:var(--pad);bottom:1.1rem}
}

/* ---------- Casita: foto con el techo del logotipo ---------- */
.casita{--hueco:1.1rem;--subida:25%;position:relative;padding-top:var(--hueco)}
.casita--1x1{--subida:31.25%}
.casita__techo{position:absolute;left:0;top:0;width:100%;aspect-ratio:160/50;overflow:visible;color:var(--tinta);pointer-events:none}
.casita__techo path{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.casita__foto{position:relative;aspect-ratio:4/5;clip-path:polygon(0 var(--subida),50% 0,100% var(--subida),100% 100%,0 100%);background:var(--cielo-2)}
.casita--1x1 .casita__foto{aspect-ratio:1/1}
.casita__foto img{width:100%;height:100%;object-fit:cover}
.oscuro .casita__techo,.seccion--tinta .casita__techo{color:var(--naranja)}
.casita figcaption{margin-top:.9rem;font-size:.9375rem;color:var(--tinta-suave)}
.oscuro .casita figcaption,.seccion--tinta .casita figcaption{color:#B7C2CB}

/* ---------- Ficha de la casa ---------- */
.ficha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--tinta)}
@media (max-width:760px){.ficha{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.ficha{grid-template-columns:1fr}}
.ficha>div{padding:1.2rem 1.5rem 1.3rem 0;border-bottom:1px solid var(--linea)}
.ficha dt{font-family:var(--f-titulo);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.ficha dd{margin:.3rem 0 0;font-size:1.2rem;font-weight:500;line-height:1.35}

/* ---------- Encabezado de sección ---------- */
.cab-seccion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.cab-seccion .entradilla{margin:1rem 0 0}
.dos-col{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.dos-col__fijo{position:sticky;top:calc(var(--cabecera) + 32px)}
.dos-col__fijo .btn,.dos-col__fijo .enlace{margin-top:1.6rem}
.dos-col--fotos{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (max-width:900px){
  .cab-seccion{grid-template-columns:1fr}
  .dos-col{grid-template-columns:1fr}
  .dos-col__fijo{position:static}
}

/* ---------- Registro (servicios, equipo, datos) ---------- */
.registro{border-top:2px solid var(--tinta)}
.registro li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.5rem 2rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--linea)}
.registro h3{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem)}
.registro p{margin:0;color:var(--tinta-2)}
.registro--una li{grid-template-columns:1fr}
.adicionales{margin-top:2rem;padding:1.4rem 1.6rem;background:var(--cielo);border-radius:var(--r)}
.adicionales h3{font-size:1.15rem;margin-bottom:.6rem}
.adicionales ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.adicionales li{display:flex;align-items:center;gap:.55rem;font-weight:500}
.adicionales li::before{content:"";width:.5rem;height:.5rem;background:var(--naranja);transform:rotate(45deg)}
.adicionales p{margin:.8rem 0 0;font-size:1rem;color:var(--tinta-suave)}
@media (max-width:640px){.registro li{grid-template-columns:1fr}}

/* ---------- Recorrido (mosaico de fotos) ---------- */
.recorrido{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.recorrido figure{display:flex;flex-direction:column;min-width:0}
.recorrido .foto{flex:1;min-height:0;overflow:hidden;background:var(--cielo-2)}
.recorrido img{width:100%;height:100%;object-fit:cover}
.recorrido figcaption,.galeria figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.4;color:var(--tinta-suave)}
.recorrido figcaption b,.galeria figcaption b{display:block;margin-bottom:.1rem;font-family:var(--f-titulo);font-weight:400;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta)}
.r-a{grid-column:1/8;grid-row:1}
.r-a .foto{aspect-ratio:16/10;flex:none}
.r-b{grid-column:8/13;grid-row:1/3}
.r-c{grid-column:1/4;grid-row:2}
.r-c .foto{flex:1;min-height:14rem}
.r-d{grid-column:4/8;grid-row:2}
.r-d .foto{aspect-ratio:9/10;flex:none}
@media (max-width:860px){
  .recorrido{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-a{grid-column:1/-1;grid-row:auto}
  .r-b{grid-column:1;grid-row:auto}
  .r-b .foto,.r-c .foto{aspect-ratio:3/4;flex:none}
  .r-c{grid-column:2;grid-row:auto}
  .r-d{grid-column:1/-1;grid-row:auto}
  .r-d .foto{aspect-ratio:16/10;flex:none}
  .r-d img{object-position:50% 80%}
}
@media (max-width:520px){
  .r-b{grid-column:1/-1}
  .r-b .foto{aspect-ratio:4/5}
  .r-c,.r-d{grid-column:auto}
  .r-d .foto{aspect-ratio:3/4}
  .r-d img{object-position:50% 50%}
}

/* ---------- Galería (página La casa) ---------- */
.galeria{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(14px,2.2vw,32px);align-items:start}
.galeria figure{min-width:0}
.galeria .foto{overflow:hidden;background:var(--cielo-2)}
.galeria img{width:100%;height:100%;object-fit:cover}
.g-ancha{grid-column:1/-1}
.g-ancha .foto{aspect-ratio:16/9}
.g-m{grid-column:span 6}
.g-m .foto{aspect-ratio:4/3}
.g-v{grid-column:span 3}
.g-v .foto{aspect-ratio:3/4}
@media (max-width:860px){
  .g-m,.g-v{grid-column:span 6}
  .g-ancha .foto{aspect-ratio:4/3}
  .g-ancha img{object-position:56% 50%}
}
@media (max-width:520px){.g-m,.g-v{grid-column:1/-1}}

/* ---------- El equipo (foto) ---------- */
.equipo-foto{margin:0 0 clamp(40px,6vw,80px)}
.equipo-foto .foto{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--cielo-2)}
/* Rótulo siempre visible sobre la imagen generada con IA */
.etiqueta-ia{position:absolute;left:.9rem;bottom:.9rem;padding:.4rem .75rem;border-radius:2px;background:rgba(18,25,31,.82);color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:.04em;line-height:1.2}
.equipo-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:640px){.equipo-foto .foto{aspect-ratio:3/2}}

/* ---------- Convicción ---------- */
.conviccion{padding-block:clamp(72px,10vw,150px)}
.conviccion blockquote{font-family:var(--f-titulo);font-size:clamp(2rem,1.1rem + 3.5vw,4.1rem);line-height:1.12;letter-spacing:-.01em;max-width:19em;text-wrap:balance}
.conviccion blockquote em{font-style:normal;color:var(--naranja)}
.conviccion cite{display:block;margin-top:1.6rem;font-style:normal;font-family:var(--f-titulo);font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;color:#B7C2CB}
.conviccion__pie{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center}
.techo-mini{width:56px;height:18px;margin-bottom:1.6rem;color:var(--naranja);overflow:visible}
.techo-mini path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linejoin:round}

/* ---------- Opiniones de Google (carrusel) ---------- */
.resenas{overflow:clip}
.resumen{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin:1.3rem 0 0;font-size:1.0625rem;color:var(--tinta-2)}
.resumen strong{font-family:var(--f-titulo);font-weight:400;font-size:1.9rem;line-height:1;color:var(--tinta)}
.estrellas{display:inline-flex;gap:.1rem;color:var(--naranja)}
.estrellas .ico{width:1.15rem;height:1.15rem}
.carrusel__ctl{display:flex;gap:.6rem}
.carrusel__btn{display:grid;place-content:center;width:3.1rem;height:3.1rem;padding:0;border:2px solid var(--tinta);border-radius:50%;background:transparent;color:var(--tinta);cursor:pointer;transition:background-color .25s var(--e-suave),color .25s var(--e-suave),opacity .25s}
.carrusel__btn--atras .ico{transform:scaleX(-1)}
.carrusel__btn:hover:not(:disabled){background:var(--tinta);color:var(--cal)}
.carrusel__btn:disabled{opacity:.3;cursor:default}
.carrusel{margin-top:.5rem}
.carrusel__pista{display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:.6rem max(var(--pad),calc((100% - var(--ancho)) / 2 + var(--pad))) 1.6rem;scroll-padding-inline:max(var(--pad),calc((100% - var(--ancho)) / 2 + var(--pad)));scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista.arrastrando{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.tarjeta{flex:0 0 min(86vw,26rem);display:flex;flex-direction:column;gap:1rem;padding:clamp(20px,2.4vw,30px);background:#fff;border:1px solid var(--linea);border-radius:var(--r);scroll-snap-align:start;transition:transform .5s var(--e-salida),border-color .3s,box-shadow .5s var(--e-salida)}
.tarjeta:hover{transform:translateY(-5px);border-color:rgba(29,37,45,.38);box-shadow:0 26px 44px -30px rgba(29,37,45,.55)}
.tarjeta__cab{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tarjeta__nota{font-family:var(--f-titulo);font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.tarjeta__texto{margin:0;font-size:1.0625rem;line-height:1.62;color:var(--tinta-2)}
.tarjeta__texto p{margin:0 0 .8em}
.tarjeta__texto p:last-child{margin-bottom:0}
.js .tarjeta__texto{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;line-clamp:9;overflow:hidden}
.js .tarjeta.abierta .tarjeta__texto{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.tarjeta__mas{align-self:flex-start;display:inline-flex;align-items:center;min-height:2.75rem;margin-block:-.45rem;padding:.2rem 0;border:0;background:none;font-weight:700;font-size:1rem;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--naranja-texto);text-decoration-thickness:2px;text-underline-offset:.22em;cursor:pointer}
.tarjeta__mas[hidden]{display:none}
.tarjeta__pie{display:flex;flex-direction:column;margin-top:auto;padding-top:1rem;border-top:1px solid var(--linea)}
.tarjeta__pie strong{font-size:1.0625rem}
.tarjeta__pie span{font-size:.9375rem;color:var(--tinta-suave)}
.carrusel__pie{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.carrusel__progreso{position:relative;flex:1;min-width:8rem;height:3px;overflow:hidden;border-radius:3px;background:var(--cielo-2)}
.carrusel__progreso span{position:absolute;inset:0;transform:scaleX(var(--p,.15));transform-origin:left;background:var(--tinta);transition:transform .2s var(--e-suave)}
@media (max-width:640px){.carrusel__ctl{display:none}}

/* ---------- Ubicación y mapa ---------- */
.ubicacion{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.direccion{font-family:var(--f-titulo);font-size:clamp(2.1rem,1.2rem + 3vw,3.6rem);line-height:1.05;margin:.2rem 0 1rem}
.mapa{position:relative;aspect-ratio:4/3;background:var(--cielo-2);overflow:hidden;border-radius:var(--r)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-bloque{margin:0;min-width:0}
/* La dirección va escrita bajo el mapa: en pantallas angostas la ficha de Google se reduce a un botón y ya no la muestra */
.mapa__pie{display:flex;align-items:flex-start;gap:.6rem;margin-top:.8rem;font-size:1.0625rem;line-height:1.4;color:var(--tinta-2)}
.mapa__pie .ico{flex:none;width:1.3rem;height:1.3rem;margin-top:.12rem;color:var(--naranja-texto)}
.mapa__pie b{font-weight:700;color:var(--tinta)}
@media (max-width:860px){.ubicacion{grid-template-columns:1fr}}

/* ---------- Preguntas frecuentes ---------- */
.faq{border-top:2px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;cursor:pointer;font-family:var(--f-titulo);font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.25;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.9rem;height:1.9rem;border:2px solid var(--tinta);border-radius:50%;background:
  linear-gradient(var(--tinta),var(--tinta)) center/.8rem 2px no-repeat,
  linear-gradient(var(--tinta),var(--tinta)) center/2px .8rem no-repeat;transition:background-color .25s,transform .4s var(--e-salida)}
.faq summary:hover::after{background-color:var(--naranja)}
.faq details[open] summary::after{background:linear-gradient(var(--tinta),var(--tinta)) center/.8rem 2px no-repeat,var(--naranja);transform:rotate(180deg)}
.faq .respuesta{padding:0 3.6rem 1.6rem 0;color:var(--tinta-2);max-width:42em}
.faq .respuesta p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .respuesta{animation:desplegar .55s var(--e-salida) both}
  @keyframes desplegar{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}

/* ---------- Contacto y formulario ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:start}
.datos{margin-top:2rem;border-top:2px solid var(--tinta)}
.datos li{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--linea)}
.datos .ico{margin-top:.2rem;color:var(--tinta-2)}
.datos b{display:block;font-weight:700}
.datos a{text-decoration:none}
.datos a:hover{text-decoration:underline;text-decoration-color:var(--naranja-texto);text-decoration-thickness:2px;text-underline-offset:.2em}
.datos small{display:block;font-size:.9375rem;color:var(--tinta-suave)}
.formulario{padding:clamp(24px,3.4vw,44px);background:#fff;border:1px solid var(--linea);border-radius:var(--r);box-shadow:0 24px 48px -32px rgba(29,37,45,.35)}
.formulario h2,.formulario h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);margin-bottom:.4rem}
.formulario .intro{color:var(--tinta-suave);margin-bottom:1.6rem}
.formulario [hidden]{display:none}
.campo{display:grid;gap:.45rem;margin-bottom:1.25rem}
.campo label{font-weight:700;font-size:1.0625rem}
.campo input,.campo select,.campo textarea{width:100%;min-height:3.5rem;padding:.8rem 1rem;border:2px solid var(--tinta-suave);border-radius:var(--r);background:#fff;color:var(--tinta);transition:border-color .25s,box-shadow .25s}
.campo textarea{min-height:8.5rem;resize:vertical}
.campo select{appearance:none;padding-right:3rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D252D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center/1.2rem no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--naranja);outline-offset:0;border-color:var(--tinta)}
.campo [aria-invalid="true"]{border-color:var(--error)}
.campo .error{display:none;color:var(--error);font-size:.9375rem;font-weight:700}
.campo [aria-invalid="true"]~.error{display:block}
.campo .ayuda{font-size:.9375rem;color:var(--tinta-suave)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario .btn{width:100%}
.form-nota{margin:1rem 0 0;font-size:.9375rem;color:var(--tinta-suave)}
.form-msg{display:none;margin:1.2rem 0 0;padding:1rem 1.2rem;border-radius:var(--r);font-weight:500}
.form-msg.visible{display:block}
.form-msg.ok{background:#E4F2E8;color:#0B4A27}
.form-msg.error{background:#FBE9E5;color:#7D2112}
.form-msg a{font-weight:700}
.form-ok{display:none;text-align:left}
.form-ok.visible{display:block}
.form-ok h3{font-size:1.9rem;margin-bottom:.6rem}
@media (max-width:900px){.contacto{grid-template-columns:1fr}}

/* ---------- Llamado a la visita (fin de página) ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem clamp(32px,6vw,88px);align-items:start;padding-top:clamp(28px,4vw,48px);border-top:2px solid var(--tinta)}
.cta .entradilla{margin:0 0 1.6rem}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* ---------- Cierre (bloque con foto) ---------- */
.cierre__rejilla{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,88px);align-items:center}
.cierre h2{font-size:clamp(2.2rem,1.2rem + 3.6vw,4.2rem);line-height:1.05}
.cierre .entradilla{margin:1.4rem 0 2rem}
@media (max-width:860px){
  .cierre__rejilla{grid-template-columns:1fr}
  .cierre__rejilla .casita{max-width:26rem;width:100%}
}

/* ---------- Encabezado de página interior ---------- */
.cab-pagina{padding-block:clamp(36px,5vw,80px) clamp(40px,5vw,72px)}
.cab-pagina__rejilla{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,88px);align-items:end}
.cab-pagina--sola .cab-pagina__rejilla{grid-template-columns:minmax(0,52rem)}
.cab-pagina .entradilla{margin-top:1.5rem}
@media (max-width:860px){
  .cab-pagina__rejilla{grid-template-columns:1fr}
  .cab-pagina .casita{max-width:24rem;width:100%}
}

/* ---------- Texto legal / largo ---------- */
.legible{max-width:44rem}
.legible h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:2.4rem 0 .8rem}
.legible ul{margin:0 0 1.2rem;padding-left:1.2rem;list-style:disc}
.legible li{margin-bottom:.4rem}

/* ---------- Talleres ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.duo .foto{overflow:hidden;background:var(--cielo-2)}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figure .foto{aspect-ratio:3/4}
.duo figcaption{margin-top:.7rem;font-size:.9375rem;color:var(--tinta-suave)}
@media (max-width:520px){.duo{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.pie{padding-top:clamp(56px,7vw,96px);background:var(--tinta);color:#C9D2D9;font-size:1.0625rem}
.pie a{text-decoration:none}
.pie a:hover{color:var(--cal);text-decoration:underline;text-decoration-color:var(--naranja);text-decoration-thickness:2px;text-underline-offset:.22em}
.pie__rejilla{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
.pie h2{margin-bottom:1rem;font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;color:var(--naranja)}
.pie li{margin-bottom:.55rem}
.pie__marca img{width:200px;margin-bottom:1.2rem}
.pie__marca p{margin:0 0 1.4rem;max-width:22rem}
.redes{display:flex;gap:.7rem}
.redes a{display:grid;place-content:center;width:2.8rem;height:2.8rem;border:1.5px solid #4A5560;border-radius:50%;color:var(--cal);transition:background-color .25s,border-color .25s,color .25s,transform .3s var(--e-salida)}
.redes a:hover{background:var(--naranja);border-color:var(--naranja);color:var(--tinta);text-decoration:none;transform:translateY(-3px)}
.sello{display:flex;gap:.85rem;align-items:center;margin-top:clamp(36px,5vw,64px);padding:1.15rem 0;border-top:1px solid #34404A;color:var(--cal)}
.sello .ico{color:var(--naranja);width:1.6rem;height:1.6rem}
.sello span{display:block;font-size:.9375rem;color:#B7C2CB}
.pie__bajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding:1.1rem 0 2rem;border-top:1px solid #34404A;font-size:.9375rem;color:#B7C2CB}
.pie__bajo button{padding:0;border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.pie__bajo button:hover{color:var(--cal)}
@media (max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr}.pie__marca{grid-column:1/-1}}
@media (max-width:520px){.pie__rejilla{grid-template-columns:1fr}}

/* ---------- WhatsApp flotante y aviso de medición ---------- */
.wa-flota{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:45;display:inline-flex;align-items:center;gap:.6rem;min-height:3.4rem;padding:.7rem 1.3rem .7rem 1.1rem;border-radius:999px;background:var(--wa);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 10px 28px -8px rgba(10,98,52,.7);transition:background-color .25s,transform .35s var(--e-salida),bottom .35s var(--e-salida)}
.wa-flota:hover{background:var(--wa-oscuro);transform:translateY(-3px)}
.wa-flota .ico{width:1.5rem;height:1.5rem}
@media (max-width:480px){.wa-flota span{display:none}.wa-flota{padding:.8rem}}
.aviso{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:1rem var(--pad);background:var(--tinta);color:var(--cal);font-size:1rem;line-height:1.5;box-shadow:0 -14px 32px -18px rgba(0,0,0,.5)}
.aviso.visible{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 2rem}
.aviso p{margin:0;max-width:44rem}
.aviso a{color:var(--cal);text-decoration-color:var(--naranja);text-underline-offset:.2em}
.aviso .acciones{flex:none;gap:.6rem}
.aviso .btn{min-height:2.75rem;padding:.5em 1.5em;font-size:1rem}
body.con-aviso .wa-flota{bottom:calc(var(--alto-aviso,0px) + clamp(14px,2vw,28px))}

/* =====================================================================
   Movimiento y transiciones (solo con JavaScript activo y sin
   prefers-reduced-motion; sin eso todo aparece directamente)
   ===================================================================== */
@keyframes trazo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes sube-suave{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes linea-sube{from{transform:translateY(108%)}to{transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Portada: la secuencia entra en orden: techo, marca, titular por líneas, bajada y botones */
  .hero__techo path{animation:trazo 1.3s var(--e-salida) .25s both}
  .hero .sobretitulo{animation:sube-suave 1s var(--e-salida) .3s both}
  .hero__marca{animation:sube-suave 1s var(--e-salida) .5s both}
  .hero__titulo .linea>span{animation:linea-sube 1.2s var(--e-salida) var(--d,.75s) both}
  .hero__sub{animation:sube-suave 1.1s var(--e-salida) 1.15s both}
  .hero .acciones{animation:sube-suave 1.1s var(--e-salida) 1.3s both}
  .hero__nota{animation:sube-suave 1.1s var(--e-salida) 1.45s both}
  .hero__pausa{animation:sube-suave 1s var(--e-salida) 1.8s both}

  /* Aparición al desplazarse */
  .js .revelar{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-salida) calc(var(--i,0) * 70ms),transform 1s var(--e-salida) calc(var(--i,0) * 70ms)}
  .js .revelar.visto{opacity:1;transform:none}

  /* Fotos: se descubren con una cortina; el pie aparece después */
  .js .revelar.con-foto{opacity:1;transform:none;transition:none}
  .js .con-foto .foto{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e-salida)}
  .js .con-foto.visto .foto{clip-path:inset(0 0 0 0)}
  .js .con-foto figcaption{opacity:0;transform:translateY(10px);transition:opacity .8s ease .55s,transform .9s var(--e-salida) .55s}
  .js .con-foto.visto figcaption{opacity:1;transform:none}

  /* Casitas: el techo se dibuja y la foto sube cuando entran en pantalla */
  .js .casita .casita__techo path{transition:stroke-dashoffset 1.4s var(--e-salida) .1s}
  .js .casita .casita__foto{transition:opacity 1.2s ease .45s,transform 1.3s var(--e-salida) .45s}
  .js .casita:not(.visto) .casita__techo path{stroke-dashoffset:100}
  .js .casita:not(.visto) .casita__foto{opacity:0;transform:translateY(18px)}

  /* Títulos: cada palabra sube desde una máscara (las separa el JavaScript) */
  .js .rev-pal .pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .js .rev-pal .pal>span{display:inline-block;transform:translateY(108%);transition:transform 1.05s var(--e-salida) calc(var(--w,0) * 60ms)}
  .js .rev-pal.visto .pal>span{transform:none}

  /* Parallax suave dentro de las fotos (solo navegadores con animaciones ligadas al scroll) */
  @supports (animation-timeline:view()){
    .recorrido img,.galeria img,.equipo-foto img,.casita__foto img{scale:1.1;animation:paralaje linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes paralaje{from{translate:0 -4.5%}to{translate:0 4.5%}}

/* Transición entre páginas (Chrome/Edge y Safari recientes; el resto navega normal) */
@view-transition{navigation:auto}
.cabecera{view-transition-name:cabecera}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-sale .38s var(--e-suave) both}
  ::view-transition-new(root){animation:vt-entra .75s var(--e-salida) both}
  ::view-transition-group(cabecera){animation-duration:.55s;animation-timing-function:var(--e-suave)}
}
@keyframes vt-sale{to{opacity:0;transform:translateY(-12px) scale(.994)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  @view-transition{navigation:none}
}

@media print{
  .cabecera,.wa-flota,.aviso,.hamburguesa,.pie .redes,.hero__pausa,.hero__video,.carrusel__ctl{display:none!important}
  body{font-size:12pt}
}