/* ============================================================
   LUXOR MARBELLA — hoja de estilos comun a todas las paginas
   Luz de dia sobre cal y travertino: fondos calidos claros, tinta marron casi negra
   y el terracota de la marca solo en detalles. Titulares en Inter Display, gruesos y apretados.
   Esquinas vivas en fotos y botones. Al bajar, cada seccion se desliza sobre la anterior.
   La genera build.mjs como /assets/site.<hash>.css
   ============================================================ */
/* Inter con eje de tamano optico (opsz): a partir de ~32px el navegador usa el corte "Display".
   Servida desde el propio dominio: sin peticiones a terceros. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-cyrillic-opsz-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --cal:#FFFFFF;          /* fondo: blanco (2026-10-14: antes crema #FBF8F2, el usuario lo queria mas blanco) */
  --arena:#F5F4F1;        /* franjas alternas: casi blanco, apenas calido (antes #F2EADD) */
  --travertino:#EBE8E2;   /* franja mas honda y fondo de fotos (antes #E6D9C5) */
  --tinta:#1C1813;        /* texto: marron casi negro          */
  --tinta-2:#5F5447;      /* texto secundario                  */
  --tinta-3:#8C7E6D;      /* solo texto grande o decorativo    */
  --linea:rgba(28,24,19,.15);
  --noche:#111111;        /* bloque de cierre: negro (2026-10-12, antes marron #2A2119) */
  --sobre-noche:#F7F6F3;
  --sobre-noche-2:#B5B0A8;
  --tierra:#933803;       /* terracota de marca: solo detalles */
  --sol:#F3D9AE;          /* luz calida de la linea del hero   */

  --f:"Inter","Helvetica Neue",Arial,sans-serif;
  --wrap:1440px;
  --gutter:clamp(1.1rem,3.6vw,3rem);
  --mh:68px;              /* alto de la cabecera */
  --globo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8c2.6 2.6 3.9 5.6 3.9 9.2s-1.3 6.6-3.9 9.2M12 2.8C9.4 5.4 8.1 8.4 8.1 12s1.3 6.6 3.9 9.2'/%3E%3C/svg%3E");
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
@media (max-width:1079px){:root{--mh:64px}}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: que la cabecera fija no tape ni las anclas ni el elemento que recibe el foco */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--mh) + 24px);background:var(--cal)}
body{
  margin:0;background:var(--cal);color:var(--tinta);
  font-family:var(--f);font-size:1.0625rem;font-weight:400;line-height:1.55;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--tierra);outline-offset:3px}
.closer :focus-visible{outline-color:var(--sol)}
.saltar{position:fixed;left:var(--gutter);top:.6rem;z-index:100;padding:.8rem 1rem;background:var(--tinta);color:var(--cal);font:500 .95rem/1 var(--f);text-decoration:none;transform:translateY(-200%)}
.saltar:focus{transform:none}
main:focus{outline:none}
p{text-wrap:pretty}
::selection{background:var(--sol);color:var(--tinta)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
html.menu-abierto{overflow:hidden}

/* ---------- tipografia: Inter Display 600, interlineado y tracking muy cerrados ---------- */
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto;font-weight:600;margin:0}
.d1,.d2,.d3{font-weight:600;margin:0;text-wrap:balance}
.d1{font-size:clamp(2.6rem,6.4vw,6.6rem);line-height:.94;letter-spacing:-.048em}
.d2{font-size:clamp(2.1rem,4.6vw,4.6rem);line-height:.98;letter-spacing:-.042em}
.d3{font-size:clamp(1.35rem,2vw,2rem);line-height:1.08;letter-spacing:-.03em}
.kicker,.eyebrow{margin:0 0 1.1rem;font-size:.8rem;font-weight:500;letter-spacing:.01em;color:var(--tinta-2)}
.kicker::before,.eyebrow::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.6em;background:var(--tierra);vertical-align:.06em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- botones: rectangulos de esquina viva con flecha, y enlaces subrayados ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  padding:1.05rem 1.3rem 1.05rem 1.45rem;border:1px solid var(--tinta);border-radius:0;
  background:var(--tinta);color:var(--cal);font:500 .95rem/1 var(--f);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn::after{content:"";flex:none;width:.95em;height:.95em;background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;transition:transform .25s ease}
.btn:hover{background:var(--tierra);border-color:var(--tierra);color:#fff}
.btn:hover::after{transform:translateX(4px)}
.btn-claro{background:var(--cal);border-color:var(--cal);color:var(--tinta)}
.btn-borde{background:transparent;color:var(--tinta)}
.btn-borde:hover{background:var(--tinta);border-color:var(--tinta);color:var(--cal)}
.btn-atras::after{display:none}
.btn-atras::before{content:"";flex:none;width:.95em;height:.95em;background:currentColor;transform:scaleX(-1);
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat}
.btn:disabled{opacity:.6;cursor:progress}
.lnk{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 0;color:inherit;text-decoration:none;
  font:500 .95rem/1.2 var(--f);letter-spacing:-.01em;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .35s ease;
}
.lnk:hover{background-size:0 1px;background-position:100% 100%}
@media (prefers-reduced-motion: reduce){.btn,.btn::after,.lnk{transition:none}}

/* ---------- logo monocromo (logo D del 2026-10-14: tejado fino, LUXOR y MARBELLA; tenido por CSS) ---------- */
.logo-mono{display:block;background:var(--tinta);
  -webkit-mask:url("/assets/logo-master-mask.webp") no-repeat center/contain;
          mask:url("/assets/logo-master-mask.webp") no-repeat center/contain}
.foot .logo-mono{width:134px;height:84px;background-position:left center;-webkit-mask-position:left center;mask-position:left center}

/* ---------- patron de glifos (ADN egipcio de la marca) ---------- */
.glyphs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- huecos de foto: esquinas vivas ---------- */
.shot{position:relative;overflow:hidden;background:var(--travertino)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* revelado al hacer scroll: solo con JS activo (html.js); una sola vez; escalonado por --d */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
@media print{html.js .rv{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion: reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ============================================================
   SECCIONES QUE SE APILAN
   site.js anade html.stack y calcula, para cada seccion de <main>, a que altura se queda fija
   (--stick: arriba si cabe en pantalla; si es mas alta, cuando asoma su final) y cuanto la tapa
   ya la siguiente (--cover, de 0 a 1): la de arriba se oscurece y se aleja mientras la de abajo sube.
   ============================================================ */
main > section{position:relative;background:var(--cal)}
html.stack main > section{position:sticky;top:var(--stick,0px);transform-origin:50% var(--oy,50%)}
html.stack main > section.tapando{transform:scale(calc(1 - var(--cover,0) * .06))}
html.stack main > section::after{
  content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
  background:var(--tinta);opacity:calc(var(--cover,0) * .5);
}
html.stack main > section.suelta{position:relative;top:auto;transform:none}
html.stack main > section + section{box-shadow:0 -1px 0 var(--linea)}
@media print{html.stack main > section{position:relative;transform:none}html.stack main > section::after{display:none}}

/* ============================================================
   CABECERA — barra translucida y minima (2026-10-14): "Menu" e idioma a la izquierda, logo en el
   centro, presupuesto a la derecha. En la portada flota sobre el video del hero.
   ============================================================ */
.masthead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);border-bottom:1px solid rgba(17,17,17,.07);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);transition:background-color .25s ease}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.masthead{background:rgba(255,255,255,.95)}}
html.menu-abierto .masthead{background:var(--cal)}
.masthead .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;height:var(--mh)}
.mh-izq{display:flex;align-items:center;gap:1.25rem;justify-self:start;min-width:0}
.mh-logo{justify-self:center}
.mh-der{justify-self:end;display:flex;align-items:center}
.mh-cta{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 0;font-size:.9rem;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor;transition:color .2s ease}
.mh-cta::after{content:"";flex:none;width:.9em;height:.9em;background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;transition:transform .25s ease}
.mh-cta:hover{color:var(--tierra)}
.mh-cta:hover::after{transform:translateX(3px)}
.mh-cta[aria-current]{border-bottom-color:transparent;color:var(--tinta-2)}

/* boton del menu: dos trazos que se cruzan al abrir, y la palabra "Menu" */
.burger{display:inline-flex;align-items:center;gap:.65rem;height:40px;padding:0;background:transparent;border:0;cursor:pointer;
  color:var(--tinta);font:500 .9rem/1 var(--f);letter-spacing:-.01em}
.burger-ico{position:relative;width:22px;height:9px}
.burger-ico span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s ease,top .3s ease}
.burger-ico span:nth-child(1){top:0}
.burger-ico span:nth-child(2){top:7.5px}
.burger[aria-expanded="true"] .burger-ico span:nth-child(1){top:3.75px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-ico span:nth-child(2){top:3.75px;transform:rotate(-45deg)}
/* sin JS no hay menu desplegable: el boton no hace nada y los enlaces estan en el pie */
html:not(.js) .burger{visibility:hidden}

.masthead .logo-mono{width:67px;height:42px}
@media (max-width:640px){
  .masthead .wrap{gap:.5rem}
  .masthead .lang{display:none}          /* en movil el idioma se cambia dentro del menu */
  .burger-txt{display:none}
  .masthead .logo-mono{width:57px;height:36px}
  .mh-cta{font-size:.82rem;gap:.4rem}
}
/* en movil, barra minima: menu y logo (el presupuesto esta en el hero, en el menu y en WhatsApp) */
@media (max-width:480px){.mh-cta{display:none}}
@media (max-width:359px){.masthead .logo-mono{width:51px;height:32px}}
@media (prefers-reduced-motion: reduce){.burger-ico span,.mh-cta,.mh-cta::after{transition:none}}

/* portada: la cabecera flota sobre el video, que ocupa toda la pantalla */
main:has(> .hero:first-child){margin-top:calc(var(--mh) * -1)}
main:has(> .hero:first-child) > .hero{min-height:100vh;min-height:100svh}
main:has(> .hero:first-child) .hero-pausa{top:calc(var(--mh) + 1rem)}

/* selector de idioma: boton con globo y desplegable en la cabecera (todas las anchuras);
   en el menu movil y en el pie, fila de botones con el nombre de cada idioma en su lengua */
.globo{display:inline-block;flex:none;width:1.1em;height:1.1em;background:currentColor;
  -webkit-mask:var(--globo) center/contain no-repeat;mask:var(--globo) center/contain no-repeat}
.lang{position:relative}
.lang summary{display:flex;align-items:center;gap:.4rem;height:40px;padding:0 .2rem;list-style:none;cursor:pointer;
  font-size:.82rem;font-weight:500;letter-spacing:.04em;border:0;transition:color .2s ease}
.lang summary:hover,.lang[open] summary{color:var(--tierra)}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:5px;height:5px;margin-left:.1rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.lang[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lang ul{position:absolute;left:0;top:calc(100% + 6px);z-index:70;margin:0;padding:.35rem;list-style:none;min-width:220px;
  background:var(--cal);border:1px solid var(--tinta);box-shadow:0 22px 44px -24px rgba(28,24,19,.5)}
.lang a{display:flex;align-items:center;gap:.65rem;padding:.7rem .75rem;text-decoration:none;font-size:.95rem}
.lang a::before{content:"";flex:none;width:.45rem;height:.45rem;background:transparent}
.lang a:hover{background:var(--arena)}
.lang a[aria-current]{font-weight:600}
.lang a[aria-current]::before{background:var(--tierra)}
.lang-cod{margin-left:auto;font-size:.75rem;font-weight:500;letter-spacing:.06em;color:var(--tinta-2)}

@media (prefers-reduced-motion: reduce){.lang summary,.lang summary::after{transition:none}}

.langs-caja{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.langs-rotulo{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:500;color:var(--tinta-2)}
.langs{display:flex;flex-flow:row wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.langs a{display:block;padding:.5rem .8rem;border:1px solid var(--linea);text-decoration:none;font-size:.9rem;line-height:1.2;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.langs a:hover{border-color:var(--tinta)}
.langs a[aria-current]{background:var(--tinta);border-color:var(--tinta);color:var(--cal)}
@media (prefers-reduced-motion: reduce){.langs a{transition:none}}

/* menu a pantalla completa (a todas las anchuras desde el 2026-10-14) */
.menu{position:fixed;inset:var(--mh) 0 0 0;z-index:55;overflow-y:auto;background:var(--cal);color:var(--tinta)}
.menu .wrap{display:flex;flex-direction:column;gap:2rem;min-height:100%;padding-block:1.25rem 2rem}
.menu .langs-caja{padding-bottom:1.25rem;border-bottom:1px solid var(--linea)}
.menu .langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.menu .langs a{padding:.75rem .5rem;text-align:center;font-size:.95rem}
@media (min-width:640px){.menu .langs{display:flex;width:auto}.menu .langs a{padding:.6rem 1rem}}
.menu-main{margin:0;padding:0;list-style:none}
.menu-main li{border-bottom:1px solid var(--linea)}
.menu-main a{display:block;padding:.85rem 0 .7rem;text-decoration:none;font-size:clamp(1.9rem,7.4vw,3rem);font-weight:600;line-height:1;letter-spacing:-.045em}
.menu-main a:hover{color:var(--tierra)}
.menu-main a[aria-current]{display:flex;align-items:baseline;gap:.32em}
.menu-main a[aria-current]::before{content:"";flex:none;width:.24em;height:.24em;background:var(--tierra);transform:translateY(-.08em)}
.menu-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem 2rem;margin-top:auto;font-size:.95rem}
.menu .tit,.foot .tit{margin:0 0 .75rem;font-size:.8rem;font-weight:500;letter-spacing:.01em;color:var(--tinta-2)}
.menu-side ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.menu-side a{text-decoration:none}
.menu-side p{margin:0;color:var(--tinta-2);line-height:1.5}
html.js .menu{opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s ease}
html.js .menu.abierto{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .menu{transition:none}}

/* ============================================================
   HERO — foto (o video) a sangre con luz de dia y titular enorme abajo
   ============================================================ */
.hero{display:flex;align-items:stretch;min-height:calc(100vh - var(--mh));min-height:calc(100svh - var(--mh));overflow:hidden;background:var(--travertino);color:var(--tinta)}
html.stack main > .hero{background:var(--travertino)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-bg img{animation:hero-drift 22s ease-out forwards}
/* con video, la foto es su primer fotograma: quieta, para que el fundido no se note */
.hero-bg[data-video] img{animation:none}
/* video de fondo (lo anade site.js cuando conviene): entra con un fundido sobre la foto */
.hero-bg video{z-index:1;opacity:0;transition:opacity 1.4s ease}
.hero-bg video.is-on{opacity:1}
/* linea de luz que barre la foto al entrar: quitada el 2026-10-14 (ruido visual) */
.hero-bg::before{display:none;
  content:"";position:absolute;top:0;bottom:0;left:0;z-index:2;width:2px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(243,217,174,0),rgba(255,240,214,.95) 25%,rgba(255,240,214,.95) 75%,rgba(243,217,174,0));
  box-shadow:0 0 22px 5px rgba(243,217,174,.55),0 0 80px 22px rgba(243,217,174,.22);
  animation:hero-luz 2.8s cubic-bezier(.65,0,.35,1) .6s forwards;
}
@keyframes hero-luz{0%{opacity:0;transform:translateX(-4vw)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(104vw)}}
@keyframes hero-drift{from{transform:scale(1.06)}to{transform:scale(1)}}
/* el texto va en un recuadro crema abajo a la izquierda: se lee sobre cualquier estancia del
   recorrido y el video se ve limpio, sin velos que lo apaguen */
.hero .wrap{position:relative;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(2rem,7vh,4.5rem);padding-bottom:clamp(1.25rem,4vh,2.5rem)}
.hero-caja{width:min(480px,100%);padding:clamp(1.1rem,1.8vw,1.6rem);background:var(--cal)}
.hero h1{font-size:clamp(2rem,3.4vw,3.5rem);line-height:.94;letter-spacing:-.05em;text-wrap:balance;color:var(--tinta)}
.hero h1 .kick{display:block;margin:0 0 .8rem;font-size:.8rem;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--tinta-2)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.25rem 2rem;margin-top:clamp(1rem,2.5vh,1.75rem);padding-top:1.25rem;border-top:1px solid var(--linea)}
.hero-row p{margin:0;max-width:46ch;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.5;color:var(--tinta-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.6rem;margin-top:clamp(1rem,2.4vh,1.4rem)}
.hero-actions .btn{padding:.85rem 1.05rem .85rem 1.2rem;font-size:.9rem}
.hero-pausa{position:absolute;z-index:5;top:1rem;right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display:grid;place-items:center;width:40px;height:40px;padding:0;cursor:pointer;color:var(--tinta);
  background:rgba(255,255,255,.55);border:0;transition:background-color .2s ease}
.hero-pausa:hover{background:var(--cal)}
.hero-pausa::before{content:"";width:10px;height:12px;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
.hero-pausa[aria-pressed="true"]::before{width:11px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (prefers-reduced-motion: reduce){.hero-bg img{animation:none}.hero-bg::before,.hero-bg video{display:none}}
@media (max-width:760px){
  .hero-row{grid-template-columns:minmax(0,1fr)}
  .hero h1 .kick{margin-bottom:.9rem}
  .hero .wrap{padding-inline:.75rem;padding-bottom:.75rem}
  .hero-caja{padding:1.25rem 1.1rem 1.4rem}
}

/* ============================================================
   GARANTIAS — cuatro compromisos en fila
   ============================================================ */
.pledges .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem clamp(1.25rem,3vw,3rem);padding-block:clamp(2.25rem,5vw,4rem)}
.pledges .wrap > div{display:flex;flex-direction:column;gap:.4rem;padding-top:1rem;border-top:1px solid var(--tinta)}
.pledges b{font-weight:600;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:-.03em;overflow-wrap:break-word}
.pledges span{font-size:.95rem;color:var(--tinta-2);line-height:1.45}
@media (max-width:900px){.pledges .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   CABECERA DE BLOQUE (titulo + entradilla)
   ============================================================ */
.grid-sec .wrap,.block .wrap{padding-block:clamp(3.5rem,8vw,7.5rem)}
.grid-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:1.25rem clamp(2rem,5vw,5rem);margin-bottom:clamp(2rem,4vw,3.75rem)}
.grid-head > :only-child{grid-column:1/-1}
.grid-head p{margin:0;max-width:44ch;color:var(--tinta-2);line-height:1.55}
@media (min-width:861px){.block .grid-head{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-head{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   EXPLORADOR DE SERVICIOS — las tres lineas como palabras grandes a la izquierda;
   foto con puntos a la derecha. Lista y puntos van enlazados: tocar uno activa el otro.
   Sin JS no hay escenario: se ven las tres fichas apiladas con todo el texto.
   ============================================================ */
.svcx{display:grid;gap:3rem}
.svc{position:relative;display:flex;flex-direction:column;min-width:0}
.svc-photo{aspect-ratio:1/1.02}
@media (min-width:900px){
  html:not(.js) .svc-photo{max-height:72vh}
  @supports not (grid-template-rows:subgrid){html.js .svc-photo{max-height:72vh}}
}
.svc-photo img.flip{transform:scaleX(-1)}
.svc-panel{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:1.6rem}
.svc-kicker{margin:0;font-size:.8rem;font-weight:500;color:var(--tinta-2)}
.svc-title{margin:0;font-weight:600;font-size:clamp(1.45rem,2vw,2rem);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.svc-desc{margin:0;line-height:1.5;color:var(--tinta-2);max-width:48ch}
.svc-items{list-style:none;margin:.3rem 0 0;padding:0;width:100%;border-top:1px solid var(--linea)}
.svc-items li{border-bottom:1px solid var(--linea)}
.it{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;align-items:center;
  width:100%;padding:.75rem 0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.it::before{content:"";width:8px;height:8px;border:1.5px solid var(--tinta-3);transition:background-color .2s ease,border-color .2s ease}
.it b{font-weight:500;font-size:1rem;line-height:1.3;letter-spacing:-.01em}
.it span{grid-column:2;font-size:.92rem;line-height:1.45;color:var(--tinta-2);padding-top:.2rem}
.svc-note{margin:0;min-height:2.9em;max-width:52ch;font-size:.95rem;line-height:1.45;color:var(--tinta-2)}
.svc-title a{text-decoration:none}
.svc-title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.svc-note:empty{display:none}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:.4rem}
.dot,.svc-nav{display:none}

/* --- con JS: las tres fichas ocupan la misma celda y solo se ve la activa --- */
html.js .svcx{gap:0}
html.js .svc{grid-area:2/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
html.js .svc.is-on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
html.js .it span{display:none}
html.js .it[aria-pressed="true"]::before{background:var(--tierra);border-color:var(--tierra)}

/* puntos sobre la foto */
html.js .dot{
  display:grid;place-items:center;position:absolute;left:var(--mx);top:var(--my);z-index:1;
  width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--cal);box-shadow:0 0 0 6px rgba(255,255,255,.28);
  transition:background-color .2s ease,box-shadow .3s ease;
}
html.js .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta)}
html.js .dot.is-on{background:var(--tierra);box-shadow:0 0 0 9px rgba(147,56,3,.25)}
html.js .dot.is-on::before{background:#fff}
.dot span{display:none}

/* selector de linea: palabras grandes */
html.js .svc-nav{display:flex;grid-area:1/1;position:relative;z-index:2;gap:1.4rem;margin-bottom:1.5rem;
  overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linea)}
html.js .svc-nav::-webkit-scrollbar{display:none}
.svc-tab{
  flex:none;position:relative;padding:.2rem 0 .8rem;border:0;background:transparent;cursor:pointer;
  font:600 clamp(1.5rem,5.6vw,2rem)/1 var(--f);letter-spacing:-.04em;color:var(--tinta-3);white-space:nowrap;
  transition:color .2s ease;
}
.svc-tab img{display:none}
.svc-tab:hover{color:var(--tinta-2)}
.svc-tab[aria-selected="true"]{color:var(--tinta)}
.svc-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--tinta)}
@media (max-width:899px){
  html.js .svc-nav{--fi:#000;--fd:#000;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);gap:1.1rem;
    -webkit-mask-image:linear-gradient(90deg,var(--fi),#000 2rem,#000 calc(100% - 3rem),var(--fd));
            mask-image:linear-gradient(90deg,var(--fi),#000 2rem,#000 calc(100% - 3rem),var(--fd))}
  html.js .svc-nav.fi{--fi:transparent}
  html.js .svc-nav.fd{--fd:transparent}
  html.js .svc-nav{gap:.45rem;padding-inline:calc(var(--gutter) - .35rem)}
  .svc-tab{padding-inline:.35rem;font-size:clamp(1.05rem,5.3vw,2rem)}
  html[lang="de"] .svc-tab{font-size:clamp(.9rem,4.5vw,2rem)}
  .svc-tab:focus-visible{outline-offset:-2px}
  .svc-tab[aria-selected="true"]::after{left:.35rem;right:.35rem}
}

/* escritorio: palabras y ficha a la izquierda, foto a la derecha */
@media (min-width:900px){
  @supports (grid-template-rows:subgrid){
    html.js .svcx{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,5vw,5.5rem)}
    html.js .svc{grid-area:1/1/3/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
    html.js .svc-photo{grid-column:2;grid-row:1/3}
    html.js .svc-panel{grid-column:1;grid-row:2;padding-top:2.2rem}
    html.js .svc-nav{grid-area:1/1;flex-direction:column;align-items:flex-start;gap:.15rem;margin:0;overflow:visible;border:0}
    .svc-tab{padding:.1rem 0;font-size:clamp(2.2rem,4vw,3.9rem);line-height:1.02;letter-spacing:-.05em}
    .svc-tab[aria-selected="true"]::after{display:none}
    .svc-tab[aria-selected="true"]::before{content:"";position:absolute;left:-1.1rem;top:50%;width:.45rem;height:.45rem;margin-top:-.2rem;background:var(--tierra)}
    /* etiqueta del punto activo */
    html.js .dot span{
      display:block;position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
      padding:.5rem .75rem;white-space:nowrap;pointer-events:none;
      background:var(--cal);color:var(--tinta);font:500 .8rem/1 var(--f);
      opacity:0;transition:opacity .2s ease;
    }
    html.js .dot.to-left span{left:auto;right:calc(100% + 12px)}
    html.js .dot.is-on span{opacity:1}
  }
}
/* escritorio estrecho (900-1279): pestañas en fila encima, para que la foto no deje un hueco debajo */
@media (min-width:900px) and (max-width:1279px){
  @supports (grid-template-rows:subgrid){
    html.js .svc-nav{grid-column:1/-1;flex-direction:row;align-items:flex-end;gap:2rem;margin-bottom:2.2rem;border-bottom:1px solid var(--linea)}
    .svc-tab{font-size:clamp(2rem,3.4vw,2.6rem);padding:.2rem 0 .8rem}
    .svc-tab[aria-selected="true"]::before{display:none}
    .svc-tab[aria-selected="true"]::after{display:block}
    html.js .svc-photo{grid-row:2}
    html.js .svc-panel{padding-top:0}
  }
}
@media (prefers-reduced-motion: reduce){
  html.js .svc,html.js .svc.is-on,html.js .dot,.svc-tab,.it::before{transition:none}
}

/* ============================================================
   DUO — frase grande y dos fotos que se van pasando
   ============================================================ */
.duo{background:var(--arena)}
html.stack main > .duo{background:var(--arena)}
.duo .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);align-items:end;padding-block:clamp(3.5rem,8vw,7.5rem)}
.duo-title{grid-column:1/6;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;padding-right:1rem}
.duo-title p{margin:0;max-width:40ch;color:var(--tinta-2);line-height:1.55}
.duo .shot{aspect-ratio:3/4}
.duo-title + .shot{grid-column:6/10}
.duo .shot + .shot{grid-column:10/13;aspect-ratio:3/4.2;align-self:start;margin-top:clamp(2rem,5vw,4.5rem)}
/* pase lento de fotos: fundido de 1.6 s y deriva de zoom de 9 s; al salir, la deriva
   queda en pausa (no salta) y se reinicia por JS mientras el fotograma es invisible. */
.slides img{opacity:0;transition:opacity 1.6s ease;animation:slide-drift 9s ease-in-out forwards;animation-play-state:paused;will-change:opacity,transform}
.slides img.is-on{opacity:1;animation-play-state:running}
@keyframes slide-drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.slides img{transition:none;animation:none}}
@media (max-width:860px){
  .duo-title{grid-column:1/-1;padding:0 0 1rem}
  .duo-title + .shot{grid-column:1/8}
  .duo .shot + .shot{grid-column:8/13;align-self:end;margin-top:0;margin-bottom:2.5rem}
}

/* ============================================================
   COMO TRABAJAMOS — titular a la izquierda, ventajas en filas
   ============================================================ */
.reviews .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,5vw,5.5rem);padding-block:clamp(3.5rem,8vw,7.5rem)}
.rev-col{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.rev-col h2{font-size:clamp(2.1rem,4.6vw,4.6rem);line-height:.98;letter-spacing:-.042em;text-wrap:balance}
.rev-col > p:not(.eyebrow){margin:0;max-width:40ch;color:var(--tinta-2);line-height:1.55}
.rev-col > .eyebrow{margin:0}
.ben-col{display:flex;flex-direction:column}
.ben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.6rem 2rem;padding:1.6rem 0;border-top:1px solid var(--linea)}
.ben:last-child{border-bottom:1px solid var(--linea)}
.ben p{margin:0;max-width:52ch;color:var(--tinta-2);line-height:1.5}
@media (max-width:900px){.reviews .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ben{grid-template-columns:minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1180px){.ben{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   CINTA DE SERVICIOS
   ============================================================ */
.quote-block{background:var(--travertino);overflow:hidden}
html.stack main > .quote-block{background:var(--travertino)}
.quote-block .wrap{max-width:none;padding-inline:0;padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.ticker{margin:0;position:relative}
.ticker-track{display:flex;width:max-content;animation:slide 48s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:1.8rem;padding-right:1.8rem;
  font-size:clamp(1.6rem,3.4vw,3.2rem);font-weight:600;letter-spacing:-.045em;line-height:1.1;white-space:nowrap}
.ticker-track span::after{content:"";width:.28em;height:.28em;background:var(--tierra);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html.sin-mov .ticker-track,html.sin-mov .slides img{animation-play-state:paused}
.quote-block{position:relative}
.quote-block .mov-pausa{top:50%;right:var(--gutter);transform:translateY(-50%);background:var(--travertino);border-color:rgba(28,24,19,.35)}
.quote-block .mov-pausa:hover{background:var(--cal)}
.quote-block.con-pausa .ticker{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter) - 6rem),transparent calc(100% - var(--gutter) - 3rem));mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter) - 6rem),transparent calc(100% - var(--gutter) - 3rem))}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:.5rem 1.8rem;padding-inline:var(--gutter)}
  .ticker-track .dup{display:none}
  .ticker-track span{white-space:normal;padding-right:0;text-align:center}
}

/* ============================================================
   SOBRE NOSOTROS
   ============================================================ */
.about .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5.5rem);align-items:center;padding-block:clamp(3.5rem,8vw,7.5rem)}
.about .shot{aspect-ratio:16/12}
.about-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem}
.about-copy p{margin:0;line-height:1.6;color:var(--tinta-2)}
@media (max-width:900px){.about .wrap{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   CIERRE + PIE
   ============================================================ */
.closer{background:var(--noche);color:var(--sobre-noche);overflow:hidden}
html.stack main > .closer{background:var(--noche)}
.closer .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem;padding-block:clamp(4rem,10vw,9rem)}
.closer .d2{font-size:clamp(2.6rem,7vw,7.2rem);line-height:.92;letter-spacing:-.052em;max-width:13ch;color:var(--sobre-noche)}
.closer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.closer .btn{background:var(--sobre-noche);border-color:var(--sobre-noche);color:var(--tinta)}
.closer .btn:hover{background:var(--tierra);border-color:var(--tierra);color:#fff}
.closer .lnk{color:var(--sobre-noche)}

.foot{position:relative;z-index:1;background:var(--cal);border-top:1px solid var(--linea)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-block:clamp(3rem,6vw,5rem)}
.foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.foot ul.langs{flex-direction:row;gap:.35rem}
.foot .langs a{padding:.4rem .65rem;font-size:.82rem}
.foot .langs a:hover{text-decoration:none}
.foot a{text-decoration:none;font-size:.95rem}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot li{font-size:.95rem;color:var(--tinta-2)}
.foot p{margin:1.25rem 0 0;font-size:.95rem;line-height:1.6;color:var(--tinta-2);max-width:34ch}
.foot-base{border-top:1px solid var(--linea)}
.foot-base .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:flex-start;align-items:center;padding-block:1.4rem;font-size:.82rem;color:var(--tinta-2)}
.foot-base a{font-size:.82rem}
.foot-base .langs-caja{order:-1;flex-basis:100%}
@media (min-width:901px){.foot-base .foot-credits{margin-left:auto}}
@media (max-width:899px){.foot-top a,.menu-side a{display:inline-block;padding-block:.25rem;margin-block:-.25rem}.foot-base span > a{display:inline-block;padding-block:.3rem;margin-block:-.3rem}}
/* que el botón flotante de WhatsApp no tape lo que recibe el foco cerca del final */
.closer a,.faq summary,.foot a{scroll-margin-bottom:calc(56px + 2rem)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   PAGINAS INTERIORES — cabecera de pagina, migas, bloques de texto
   ============================================================ */
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem .6rem;margin:0 0 2rem;padding:0;list-style:none;font-size:.85rem;color:var(--tinta-2)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--tinta-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}

.phead .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:end;padding-block:clamp(2.5rem,6vw,5.5rem)}
.phead-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;align-self:stretch}
.phead .migas{margin-bottom:auto;padding-bottom:2rem}
.phead .migas .crumbs{margin:0}
.phead h1{font-size:clamp(2.5rem,6vw,6.2rem);line-height:.93;letter-spacing:-.05em;text-wrap:balance}
.phead .lead{margin:1.6rem 0 0;max-width:46ch;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.5;color:var(--tinta-2)}
.phead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.2rem}
.phead .shot{aspect-ratio:4/4.6}
.phead .shot img.flip{transform:scaleX(-1)}
.phead.solo .wrap{grid-template-columns:minmax(0,1fr)}
.phead.solo .phead-copy{max-width:1100px}
.phead.solo + .block .wrap{padding-top:clamp(2rem,4vw,4rem)}
@media (max-width:860px){
  .phead .wrap{grid-template-columns:minmax(0,1fr)}
  .phead .shot{aspect-ratio:4/3.4}
}

.block.tint{background:var(--arena)}
html.stack main > .block.tint{background:var(--arena)}

/* que incluye: lista a dos columnas */
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,5rem);margin:0;padding:0;list-style:none}
.incl li{display:flex;flex-direction:column;gap:.55rem;padding:1.6rem 0 1.9rem;border-top:1px solid var(--tinta)}
.incl h3{font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:-.03em}
.incl p{margin:0;max-width:48ch;color:var(--tinta-2);line-height:1.55}
@media (max-width:760px){.incl{grid-template-columns:minmax(0,1fr)}}

/* filas titulo + texto */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem clamp(2rem,5vw,5rem);padding:clamp(1.9rem,3.5vw,3rem) 0;border-top:1px solid var(--linea)}
.row:last-child{border-bottom:1px solid var(--linea)}
.row p{margin:0 0 1rem;max-width:58ch;color:var(--tinta-2);line-height:1.6}
.row p:last-child{margin-bottom:0}
.row a{color:var(--tinta);text-underline-offset:4px}
.row a:hover{color:var(--tierra)}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr)}}

/* preguntas frecuentes */
.faq{max-width:1000px}
@media (min-width:901px){
  .block:has(> .wrap > .faq) .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,5vw,5.5rem);align-items:start}
  .block:has(> .wrap > .faq) .grid-head{display:block;margin:0}
  .block:has(> .wrap > .faq) .faq{max-width:none}
}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.4rem 0;list-style:none;cursor:pointer;
  font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.7em;height:.7em;margin-right:.1em;transform:translateY(.05em);
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(.05em) rotate(45deg)}
.faq summary:hover{color:var(--tierra)}
.faq p{margin:0 0 1.5rem;max-width:62ch;color:var(--tinta-2);line-height:1.6}
@media (prefers-reduced-motion: no-preference){.faq details[open] > p{animation:abre .35s ease-out}.lang[open] ul{animation:abre .18s ease-out}}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}

/* otros servicios: foto y, debajo, titulo */
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(1rem,2.5vw,2.25rem)}
.more a{display:flex;flex-direction:column;gap:1rem;text-decoration:none;color:inherit}
.more .ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--travertino)}
.more img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.more img.flip{transform:scaleX(-1)}
.more a:hover img{transform:scale(1.035)}
.more a:hover img.flip{transform:scaleX(-1) scale(1.035)}
.more span:not(.ph){display:flex;flex-direction:column;gap:.35rem}
.more b{font-weight:600;font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.more:not(.three){column-gap:clamp(2rem,5vw,5rem)}
.more small{font-size:.9rem;color:var(--tinta-2)}
.more a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.more.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.more.three{grid-template-columns:minmax(0,1fr)}}
@media (min-width:701px) and (max-width:900px){.more.three{gap:1.5rem}.more.three a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:1.5rem}}
@media (max-width:700px){.more{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.more img,.faq summary::after{transition:none}}

/* zonas: lista en rejilla con filete superior */
.zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1rem,2.5vw,2.25rem);margin:0;padding:0;list-style:none}
.zones li{padding:1rem 0 1.3rem;border-top:1px solid var(--tinta);font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
@media (max-width:900px){.zones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* texto legal */
.prose{max-width:38rem}
.prose > h2:first-child{margin-top:0}
.prose h2{margin:2.75rem 0 .9rem;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.03em}
.prose p,.prose li{color:var(--tinta-2);line-height:1.65}
.prose ul{padding-left:1.2rem}
.prose a{color:var(--tinta);text-underline-offset:4px}
.prose a:hover{color:var(--tierra)}
.prose a[href^="tel:"]{white-space:nowrap}

/* ============================================================
   PRESUPUESTO — cuestionario por pasos
   Sin JS se ven todos los pasos seguidos, como un formulario normal.
   ============================================================ */
.quiz-sec{background:var(--arena)}
html.stack main > .quiz-sec{background:var(--arena)}
.quiz-sec .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2.5rem clamp(2rem,5vw,5.5rem);align-items:start;padding-block:clamp(2.5rem,6vw,5.5rem)}
.quiz-head{display:flex;flex-direction:column;gap:1.25rem}
.quiz-head h1{font-size:clamp(2.5rem,5.4vw,5.2rem);line-height:.93;letter-spacing:-.05em;text-wrap:balance}
.quiz-head p{margin:0;max-width:38ch;color:var(--tinta-2);line-height:1.55}
.quiz,.quiz-done{grid-column:2;min-width:0;padding:clamp(1.4rem,3vw,2.75rem);background:var(--cal);border:1px solid var(--linea)}
.quiz-done{text-align:left}
.quiz-wa{grid-column:2}
.quiz-bar{display:none;align-items:center;gap:1rem;margin-bottom:2rem}
.quiz-bar span{font-size:.85rem;font-weight:500;color:var(--tinta-2);white-space:nowrap}
.quiz-track{flex:1;height:2px;background:var(--linea);overflow:hidden}
.quiz-track i{display:block;height:100%;width:0;background:var(--tinta);transition:width .35s ease}
.quiz fieldset{min-width:0;margin:0 0 2.25rem;padding:0;border:0}
.quiz legend{margin:0 0 .5rem;padding:0;font-size:clamp(1.6rem,2.8vw,2.5rem);font-weight:600;line-height:1.02;letter-spacing:-.045em}
.quiz legend:focus{outline:none}
.quiz .hint{margin:0 0 1.5rem;color:var(--tinta-2)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.opts.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:flex;flex-direction:column;gap:.3rem;height:100%;padding:1rem 1.1rem 1.05rem 2.6rem;border:1px solid var(--linea);background:#fff;transition:border-color .15s ease,background-color .15s ease}
.opt span::before{content:"";position:absolute;left:1.05rem;top:1.22rem;width:.8rem;height:.8rem;border:1.5px solid var(--tinta-3);background:#fff;transition:background-color .15s ease,border-color .15s ease}
.opt input[type="radio"] + span::before{border-radius:50%}
.opt b{font-weight:500;font-size:1rem;line-height:1.25;letter-spacing:-.01em}
.opt small{font-size:.88rem;line-height:1.4;color:var(--tinta-2)}
.opt:hover span{border-color:var(--tinta-3)}
.opt input:checked + span{border-color:var(--tinta);background:#FFFDF8}
.opt input:checked + span::before{background:var(--tierra);border-color:var(--tierra);box-shadow:inset 0 0 0 2px #fff}
.opt input:focus-visible + span{outline:2px solid var(--tierra);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.fields label{display:flex;flex-direction:column;gap:.4rem}
.fields .full{grid-column:1/-1}
.fields .lbl{font-size:.85rem;font-weight:500;color:var(--tinta-2)}
.fields input,.fields textarea{width:100%;padding:.9rem .95rem;border:1px solid var(--linea);border-radius:0;background:#fff;color:var(--tinta);font:400 1rem/1.3 var(--f)}
.fields input:focus,.fields textarea:focus{border-color:var(--tinta);outline:none}
.fields input:focus-visible,.fields textarea:focus-visible{outline:2px solid var(--tierra);outline-offset:1px}
.fields textarea{min-height:110px;resize:vertical}
.fields [aria-invalid="true"]{border-color:#7A1F0A}
.fields input::placeholder,.fields textarea::placeholder{color:#766A5C}
.opts + .fields{margin-top:1.2rem}
.consents{display:flex;flex-direction:column;gap:.65rem;margin-top:1.4rem}
.consents label{display:flex;align-items:flex-start;gap:.7rem;font-size:.86rem;line-height:1.5;color:var(--tinta-2)}
.consents input{flex:none;width:1rem;height:1rem;margin:.18rem 0 0;accent-color:var(--tierra)}
.consents a{color:var(--tinta)}
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quiz-error{margin:0 0 1rem;font-size:.92rem;font-weight:500;color:#7A1F0A}
.quiz-error a{color:inherit}
.quiz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.quiz-done p{margin:1rem 0 0;max-width:48ch;color:var(--tinta-2);line-height:1.55}
.quiz-wa{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin:0;font-size:.95rem;color:var(--tinta-2)}
/* con JS: un paso cada vez, barra de progreso y botones Atras / Siguiente */
html.js .quiz-bar{display:flex}
html.js .quiz fieldset{display:none;margin-bottom:2rem}
html.js .quiz-sinjs{display:none}
html.js .quiz fieldset.is-on{display:block}
html:not(.js) #quiz-back,html:not(.js) #quiz-next,html:not(.js) #quiz-send{display:none}
@media (max-width:960px){
  .quiz-sec .wrap{grid-template-columns:minmax(0,1fr)}
  .quiz,.quiz-done,.quiz-wa{grid-column:1}
}
@media (max-width:640px){.opts,.opts.cols3,.fields{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.quiz-track i,.opt span,.opt span::before{transition:none}}

/* pagina no encontrada */
.nf .wrap{padding-block:clamp(4rem,14vh,9rem);display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.nf p{margin:0;max-width:48ch;color:var(--tinta-2)}

/* ============================================================
   BOTON FLOTANTE DE WHATSAPP
   El icono que todo el mundo reconoce: circulo verde WhatsApp con el logotipo en blanco, siempre a la vista
   (2026-10-12; antes era un rectangulo de tinta que en la portada no salia hasta dejar atras el hero).
   ============================================================ */
.wa-flota{
  position:fixed;z-index:50;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  display:grid;place-items:center;width:58px;height:58px;padding:0;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s ease,box-shadow .25s ease;
}
.wa-glifo{width:32px;height:32px;color:#fff}
.wa-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa-flota:hover{background:#1EBE5A;transform:scale(1.06);box-shadow:0 14px 30px -8px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.12)}
.wa-flota:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
html.menu-abierto .wa-flota{visibility:hidden}
@media (min-width:900px){
  .wa-flota{right:max(1.75rem,env(safe-area-inset-right));bottom:max(1.75rem,env(safe-area-inset-bottom));width:62px;height:62px}
  .wa-glifo{width:34px;height:34px}
}
/* en movil, que el boton no tape la ultima linea del pie */
body:has(.wa-flota) .foot-base .wrap{padding-bottom:5.5rem}
@media (min-width:900px){body:has(.wa-flota) .foot-base .wrap{padding-bottom:6.5rem}}
@media print{.wa-flota{display:none}}
@media (prefers-reduced-motion: reduce){.wa-flota{transition:none}.wa-flota:hover{transform:none}}

/* ------------------------------------------------------------------ ritmo vertical en movil
   Con los rellenos de escritorio, en movil sobraba aire: dos secciones seguidas con el mismo fondo
   sumaban unos 110 px de hueco. Aqui el relleno base baja y, cuando no hay cambio de color que las
   separe, el hueco de arriba de la segunda se recorta. */
@media (max-width:760px){
  .grid-sec .wrap,.block .wrap,.duo .wrap,.reviews .wrap,.about .wrap{padding-block:2.75rem}
  .phead .wrap{padding-block:1.75rem 2.25rem}
  .closer .wrap{padding-block:3.5rem;gap:2rem}
  .pledges .wrap{padding-block:1.75rem 2rem}
  .pledges + .grid-sec .wrap,.reviews + .block .wrap,.phead + .block .wrap,
  .block:not(.tint) + .block:not(.tint) .wrap,.block.tint + .block.tint .wrap{padding-top:1.75rem}
  .phead.solo + .about .wrap,.phead.solo + .block .wrap{padding-top:.75rem}
}