/* =========================================================
   898 LAB — Hoja de estilos del inicio
   Maqueta tomada de la plantilla: paneles de 32px de radio con
   color propio, tarjetas de foto con número, cintas y pastillas.
   ========================================================= */

:root{
  --naranja:      #FF5F07;
  --naranja-osc:  #D64E04;
  --tinta:        #4A4F55;   /* plomo: fondos oscuros */
  --grafito:      #363B41;   /* gris para títulos sobre fondo claro */
  --piedra:       #63686F;
  --carbon:       #545960;
  --papel:        #F8F9FA;
  --nube:         #EEF1F6;
  --texto:        #41464C;
  --gris:         #9DA0A6;
  --verde:        #25D366;
  --verde-osc:    #1DA851;

  --titulos: 'Bai Jamjuree', system-ui, sans-serif;
  --cuerpo:  'DM Sans', system-ui, sans-serif;

  --caja:    1282px;
  --margen:  20px;
  --header:  104px;
  --suave:   320ms cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--titulos); font-weight:600; margin:0; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

.caja{
  width:100%;
  max-width:var(--caja);
  margin-inline:auto;
  padding-inline:var(--margen);
}

/* =========================================================
   TIPOGRAFÍA COMÚN
   ========================================================= */
.eyebrow{
  font-family:var(--titulos);
  font-size:clamp(15px,3.6vw,20px);
  font-weight:500;
  line-height:1.2;
  color:var(--naranja);
  margin-bottom:14px;
}
.eyebrow--oscuro{ color:var(--naranja); }

.titulo2{
  font-size:clamp(30px,6.4vw,48px);
  line-height:1.04;
  color:var(--grafito);
  letter-spacing:-0.01em;
}
.titulo2 span{ color:var(--naranja); }
.titulo2--claro{ color:#FFFFFF; }
.titulo2--claro span{ color:rgba(255,255,255,.55); }

.entrada{
  margin-top:16px;
  max-width:62ch;
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.6;
  color:#5C5C57;
}
.entrada--clara{ color:rgba(255,255,255,.82); }

.parrafo{
  margin-top:16px;
  max-width:54ch;
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.62;
  color:#5C5C57;
}

.bloque{ padding-block:clamp(48px,8vw,96px); }
.bloque--sin-tope{ padding-top:0; }

.encabezado{ margin-bottom:clamp(28px,5vw,48px); }
.encabezado .entrada{ margin-inline:0; }

/* =========================================================
   PASTILLAS (botones)
   ========================================================= */
.pastilla{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 24px;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--cuerpo);
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  cursor:pointer;
  transition:background var(--suave), color var(--suave),
             border-color var(--suave), transform var(--suave);
}
.pastilla:hover{ transform:translateY(-2px); }

.pastilla--naranja{ background:var(--naranja); color:#FFFFFF; }
.pastilla--naranja:hover{ background:var(--naranja-osc); }

.pastilla--oscura{ background:var(--tinta); color:#FFFFFF; }
.pastilla--oscura:hover{ background:var(--naranja); }

.pastilla--clara{ background:#FFFFFF; color:var(--grafito); }
.pastilla--clara:hover{ background:var(--naranja); color:#FFFFFF; }

.pastilla--borde{ border-color:rgba(255,255,255,.45); color:#FFFFFF; }
.pastilla--borde:hover{ background:#FFFFFF; color:var(--grafito); border-color:#FFFFFF; }

.pastilla--borde-oscuro{ border-color:#CFCFC9; color:var(--grafito); }
.pastilla--borde-oscuro:hover{ background:var(--tinta); color:#FFFFFF; border-color:var(--tinta); }

.pastilla--grande{ padding:14px 28px; font-size:17px; }

/* Todo lo que lleva a WhatsApp va en su verde oficial */
.pastilla--whatsapp{ background:var(--verde); color:#FFFFFF; border-color:var(--verde); }
.pastilla--whatsapp:hover{ background:var(--verde-osc); border-color:var(--verde-osc); }
.ico-wa{ flex:none; }
.enlace-wa{ color:var(--verde-osc) !important; }

/* Círculo con flecha, como en la plantilla */
.redonda{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:28px; height:28px;
  border-radius:50%;
  background:currentColor;
  transition:transform var(--suave);
}
.redonda svg{ width:16px; height:16px; }
.pastilla--naranja .redonda,
.pastilla--oscura  .redonda{ background:rgba(255,255,255,.22); color:#FFFFFF; }
.pastilla--clara   .redonda{ background:var(--naranja); color:#FFFFFF; }
.pastilla--borde   .redonda,
.pastilla--borde-oscuro .redonda{ background:var(--naranja); color:#FFFFFF; }
.pastilla:hover .redonda{ transform:translateX(3px); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  transition:background var(--suave), box-shadow var(--suave);
}
.header__caja{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  max-width:var(--caja);
  margin-inline:auto;
  padding:14px var(--margen);
}
.header__logo img{ height:74px; width:auto; }

.header--fijo{
  background:rgba(52,57,63,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.header__nav{
  display:none;
  align-items:center;
  gap:4px;
  margin-left:auto;
  padding:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:100px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.header__nav > a,
.desplegable__boton{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border:0;
  border-radius:100px;
  background:none;
  color:#FFFFFF;
  font-family:var(--cuerpo);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--suave), color var(--suave);
}
.header__nav > a:hover,
.desplegable__boton:hover{ background:rgba(255,255,255,.14); }
.header__nav > a[aria-current="page"]{ background:var(--naranja); }

.desplegable{ position:relative; }
.desplegable__panel{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  translate:-50% 0;
  width:min(92vw,420px);
  padding:10px;
  border-radius:20px;
  background:#FFFFFF;
  box-shadow:0 24px 60px rgba(52,57,63,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--suave), transform var(--suave), visibility var(--suave);
}
.desplegable__panel.abierto{ opacity:1; visibility:visible; transform:none; }
.desplegable__panel a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  transition:background var(--suave);
}
.desplegable__panel a:hover{ background:var(--nube); }
.desplegable__panel strong{
  display:block;
  font-family:var(--titulos);
  font-size:16px;
  font-weight:600;
  color:var(--grafito);
}
.desplegable__panel span{ display:block; font-size:14px; color:var(--gris); }
.desplegable__panel a.activo strong{ color:var(--naranja); }

.header__acciones{ display:none; align-items:center; gap:12px; }
.header__fono{ font-size:15px; font-weight:500; color:#FFFFFF; }

.header__nav.abierto{
  display:grid;
  position:absolute;
  top:calc(100% - 4px);
  left:var(--margen);
  right:var(--margen);
  gap:4px;
  padding:12px;
  border-radius:24px;
  background:rgba(52,57,63,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  /* Si con Servicios abierto el menú no cabe, que se pueda deslizar
     en vez de que los últimos enlaces queden fuera de la pantalla. */
  max-height:calc(100vh - var(--header) - 24px);
  max-height:calc(100dvh - var(--header) - 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.header__nav.abierto > a,
.header__nav.abierto .desplegable__boton{
  width:100%;
  justify-content:space-between;
  padding:13px 16px;
  font-size:16px;
}
/* En el menú de celular el panel va dentro del flujo, así que cuando está
   cerrado tiene que desaparecer: si solo se oculta, deja un hueco enorme
   que empuja Nosotros, Preguntas y Contacto fuera de la pantalla. */
.header__nav.abierto .desplegable__panel{
  position:static;
  translate:none;
  width:100%;
  margin-top:6px;
  box-shadow:none;
  display:none;
}
.header__nav.abierto .desplegable__panel.abierto{ display:block; }

.header__menu{
  display:grid;
  gap:5px;
  margin-left:auto;
  padding:11px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:100px;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}
.header__menu span{ display:block; width:20px; height:2px; background:#FFFFFF; border-radius:2px; }

/* =========================================================
   PORTADA
   ========================================================= */
.portada{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:min(100svh,860px);
  padding:calc(var(--header) + 48px) 0 44px;
  overflow:hidden;
  background:var(--tinta);
}
.portada__foto{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* =========================================================
   HERO SIN TEXTO — solo el video
   ========================================================= */
.portada--limpia{
  min-height:min(72svh,620px);
  padding:0;
  justify-content:center;
}
/* Sin titular encima, el velo puede ser mucho más suave:
   solo lo justo para que el header se funda arriba. */
.portada--limpia .portada__velo{
  background:linear-gradient(180deg,
    rgba(52,57,63,.62) 0%,
    rgba(52,57,63,.14) 26%,
    rgba(52,57,63,.06) 70%,
    rgba(52,57,63,.34) 100%);
}

/* =========================================================
   PRESENTACION — lo que antes iba sobre el hero
   ========================================================= */
.presenta{ padding:62px 0 66px; background:var(--papel); }
.presenta__caja{ display:grid; gap:44px; align-items:start; }
.presenta .eyebrow{ color:var(--naranja); }
.presenta__titulo{
  margin:12px 0 18px;
  font-family:var(--titulos);
  font-size:clamp(38px,7.4vw,60px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--grafito);
}
.presenta__bajada{
  max-width:52ch;
  margin:0 0 30px;
  font-size:clamp(16px,2vw,18px);
  color:var(--texto);
}
.presenta__botones{ display:flex; flex-wrap:wrap; gap:14px; }

.presenta__cifras{ display:grid; gap:18px; }
.dato{
  padding:26px 28px;
  border:1px solid #E2E6EC;
  border-radius:20px;
  background:#FFFFFF;
}
.dato__eti{
  margin:0 0 10px;
  font-family:var(--titulos);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--naranja);
}
.dato__cifra{
  margin:0 0 8px;
  font-family:var(--titulos);
  font-size:clamp(40px,6vw,52px);
  font-weight:700;
  line-height:1;
  color:var(--grafito);
}
.dato__cifra span{ font-size:.5em; margin-left:2px; }
.dato__pie{ margin:0; font-size:15px; color:var(--piedra); }

@media (min-width:960px){
  .presenta{ padding:82px 0 86px; }
  .presenta__caja{ grid-template-columns:1.25fr .75fr; gap:64px; align-items:center; }
}

/* Video de fondo del hero: se repite infinito y sin sonido.
   Si la persona pidió menos movimiento, main.js lo deja pausado
   en el primer cuadro, que es el mismo del póster. */
.portada__video{
  display:block;
  border:0;
  background:var(--tinta);
}

.portada__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(52,57,63,.80) 0%,
    rgba(52,57,63,.52) 42%,
    rgba(52,57,63,.90) 100%);
}
.portada__caja{
  position:relative;
  width:100%;
  max-width:var(--caja);
  margin-inline:auto;
  padding-inline:var(--margen);
}
.portada__titulo{
  font-size:clamp(40px,10.6vw,58px);
  font-weight:600;
  line-height:1.1;
  color:#FFFFFF;
  margin-bottom:18px;
}
.portada__bajada{
  max-width:52ch;
  margin-bottom:28px;
  font-size:clamp(15px,4vw,17px);
  line-height:1.6;
  color:rgba(255,255,255,.86);
}
.portada__botones{ display:flex; flex-wrap:wrap; gap:12px; }

.portada__chips{
  position:relative;
  display:grid;
  gap:12px;
  width:100%;
  max-width:var(--caja);
  margin:30px auto 0;
  padding-inline:var(--margen);
}
.chip{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.chip__eti{
  font-family:var(--titulos);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--naranja);
  margin-bottom:4px;
}
.chip__cifra{
  font-family:var(--titulos);
  font-size:42px;
  font-weight:600;
  line-height:1;
  color:#FFFFFF;
}
.chip__cifra span{ font-size:.52em; }
.chip__pie{ margin-top:6px; font-size:14px; color:rgba(255,255,255,.76); }

/* =========================================================
   CINTA
   ========================================================= */
.cinta{
  overflow:hidden;
  padding-block:15px;
  background:var(--naranja);
  color:#FFFFFF;
}
.cinta__pista{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  font-family:var(--titulos);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  animation:corre 42s linear infinite;
}
.cinta__pista i{ font-style:normal; opacity:.6; }
.cinta:hover .cinta__pista{ animation-play-state:paused; }
@keyframes corre{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* =========================================================
   PANELES DE SERVICIO
   ========================================================= */
.paneles{ display:grid; gap:20px; }

.panel{
  display:grid;
  gap:28px;
  padding:28px;
  border-radius:32px;
  overflow:hidden;
}
.panel--tinta  { background:var(--tinta); }
.panel--naranja{ background:var(--naranja); }
.panel--piedra { background:var(--piedra); }
.panel--brasa  { background:var(--naranja-osc); }
.panel--carbon { background:var(--carbon); }

.panel__medio img{
  width:100%;
  height:clamp(240px,58vw,420px);
  object-fit:cover;
  border-radius:20px;
}
.panel__texto{ align-self:center; color:#FFFFFF; }

.panel__eti{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 14px;
  border-radius:100px;
  background:rgba(255,255,255,.16);
  font-family:var(--titulos);
  font-size:13px;
  font-weight:500;
  color:#FFFFFF;
}
.panel__titulo{
  font-size:clamp(28px,7vw,44px);
  line-height:1.05;
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.panel__bajada{
  max-width:46ch;
  margin-bottom:22px;
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.6;
  color:rgba(255,255,255,.84);
}
.panel__lista{ display:grid; gap:10px; margin-bottom:28px; max-width:44ch; }
.panel__lista li{
  position:relative;
  padding-left:26px;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
}
.panel__lista li::before{
  content:"";
  position:absolute;
  left:0; top:.46em;
  width:13px; height:7px;
  border-left:2px solid var(--naranja);
  border-bottom:2px solid var(--naranja);
  transform:rotate(-45deg);
}
.panel--naranja .panel__lista li::before,
.panel--brasa   .panel__lista li::before{ border-color:#FFFFFF; }

.banda{
  width:100%;
  height:clamp(140px,22vw,276px);
  margin-top:20px;
  object-fit:cover;
  border-radius:20px;
}

/* =========================================================
   DOS COLUMNAS + TARJETAS 01-04
   ========================================================= */
.dos{ display:grid; gap:40px; }
.dos__izq .titulo2{ max-width:16ch; }
.dos__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.firma{
  margin:28px 0 0;
  padding:24px;
  border-radius:24px;
  background:#FFFFFF;
  box-shadow:0 2px 0 rgba(52,57,63,.04), 0 18px 40px rgba(52,57,63,.06);
}
.firma blockquote{
  margin:0 0 18px;
  font-family:var(--titulos);
  font-size:clamp(17px,4.2vw,20px);
  font-weight:500;
  line-height:1.45;
  color:var(--grafito);
}
.firma figcaption{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--gris); }
.firma figcaption img{ height:44px; width:auto; flex:none; }
.firma figcaption strong{
  display:block;
  font-family:var(--titulos);
  font-weight:600;
  color:var(--grafito);
}

.dos__der{ display:grid; gap:16px; }

.tarjeta{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:380px;
  padding:30px;
  border-radius:25px;
  overflow:hidden;
  isolation:isolate;
  color:#FFFFFF;
  background:var(--carbon);
}
.tarjeta__foto{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
}
.tarjeta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(52,57,63,.76) 0%, rgba(52,57,63,.30) 52%, rgba(52,57,63,.72) 100%);
  transition:background var(--suave);
}
.tarjeta:hover::before{
  background:linear-gradient(180deg, rgba(214,78,4,.80) 0%, rgba(52,57,63,.42) 52%, rgba(52,57,63,.78) 100%);
}
.tarjeta__titulo{
  font-size:clamp(24px,5.6vw,30px);
  line-height:1.06;
  margin-bottom:10px;
}
.tarjeta__num{
  font-size:.62em;
  font-weight:500;
  color:rgba(255,255,255,.5);
  margin-left:6px;
}
.tarjeta__texto{
  max-width:34ch;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
}
.tarjeta__pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
  font-size:16px;
  font-weight:500;
}
.tarjeta__pie .redonda{
  width:44px; height:44px;
  background:var(--naranja);
  color:#FFFFFF;
}
.tarjeta__pie .redonda svg{ width:20px; height:20px; }
.tarjeta__pie:hover .redonda{ transform:translateX(4px); }

/* =========================================================
   CIFRAS
   ========================================================= */
.cifras-panel{
  padding:clamp(30px,6vw,64px);
  border-radius:32px;
  background:
    radial-gradient(120% 110% at 100% 0%, var(--naranja-osc), transparent 60%),
    var(--naranja);
  color:#FFFFFF;
}
.cifras-panel .titulo2{ max-width:20ch; }
.cifras-panel .entrada{ margin-bottom:38px; }

.cifras{ display:grid; gap:28px; margin-bottom:34px; }
.cifra-bloque{ padding-top:18px; border-top:1px solid rgba(255,255,255,.32); }
.cifra-bloque dt,
.cifra-bloque dd{ margin:0; }
.cifra__numero{
  font-family:var(--titulos);
  font-size:clamp(40px,10vw,60px);
  font-weight:600;
  line-height:1;
  letter-spacing:-0.03em;
  color:#FFFFFF;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cifra-bloque dd{
  margin-top:10px;
  max-width:24ch;
  font-size:15px;
  line-height:1.48;
  color:rgba(255,255,255,.9);
}
.cifra-bloque dd span{
  display:block;
  margin-top:7px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.7;
}

/* =========================================================
   MEDICIÓN (panel oscuro con foto)
   ========================================================= */
.medicion{
  position:relative;
  padding-block:clamp(56px,10vw,110px);
  overflow:hidden;
  background:var(--tinta);
}
.medicion__foto{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.medicion__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(52,57,63,.94) 0%, rgba(52,57,63,.80) 52%, rgba(52,57,63,.55) 100%);
}
.medicion__caja{ position:relative; }
.medicion__caja .titulo2{ max-width:24ch; }
.entrada--izq{ margin-bottom:28px; }

/* =========================================================
   COMPROMISOS
   ========================================================= */
.encabezado--fila{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.destacado{
  padding:clamp(26px,5vw,48px);
  border-radius:32px;
  background:var(--tinta);
  color:#FFFFFF;
  margin-bottom:16px;
}
.destacado__logo{ height:48px; width:auto; margin-bottom:22px; }
.destacado__cita{
  margin:0 0 22px;
  max-width:28ch;
  font-family:var(--titulos);
  font-size:clamp(22px,5.4vw,36px);
  font-weight:600;
  line-height:1.2;
}
.destacado__quien{ font-size:15px; color:rgba(255,255,255,.66); }
.destacado__quien strong{
  display:block;
  font-family:var(--titulos);
  font-weight:600;
  color:#FFFFFF;
}

.compromisos{ display:grid; gap:16px; }
.compromiso{
  padding:26px 24px;
  border:1px solid #E3E5EA;
  border-radius:25px;
  background:#FFFFFF;
  transition:border-color var(--suave), transform var(--suave);
}
.compromiso:hover{ border-color:var(--naranja); transform:translateY(-3px); }
.compromiso h3{ font-size:19px; margin-bottom:8px; color:var(--grafito); }
.compromiso p{ font-size:15px; line-height:1.5; color:#5C5C57; }

/* =========================================================
   PREGUNTAS
   ========================================================= */
.preguntas{ border-top:1px solid #DFE2E7; }
.pregunta{ border-bottom:1px solid #DFE2E7; }
.pregunta summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary h3{
  font-size:clamp(17px,4.2vw,20px);
  font-weight:500;
  color:var(--grafito);
}
.pregunta summary::after{
  content:"";
  flex:none;
  width:22px; height:22px;
  background:
    linear-gradient(var(--naranja),var(--naranja)) center/100% 2px no-repeat,
    linear-gradient(var(--naranja),var(--naranja)) center/2px 100% no-repeat;
  transition:transform var(--suave);
}
.pregunta[open] summary::after{ transform:rotate(135deg); }
.pregunta__cuerpo{ padding:0 0 24px; max-width:72ch; }
.pregunta__cuerpo p{ font-size:16px; line-height:1.62; color:#5C5C57; }

.cierre{ margin-top:30px; font-size:15px; color:var(--gris); }
.cierre a{ color:var(--naranja); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   REMATE
   ========================================================= */
.remate{
  /* Un solo degradado largo que sube por encima de la sección anterior.
     El margen negativo hace que el difuminado no agregue alto. */
  --subida:clamp(520px,68vw,960px);
  position:relative;
  z-index:1;
  margin-top:calc(var(--subida) * -1);
  padding-top:calc(var(--subida) + clamp(34px,5vw,58px));
  padding-bottom:clamp(34px,5vw,58px);
  background:linear-gradient(to bottom,
    rgba(74,79,85,0)    0,
    rgba(74,79,85,.008) calc(var(--subida) * .20),
    rgba(74,79,85,.025) calc(var(--subida) * .38),
    rgba(74,79,85,.055) calc(var(--subida) * .52),
    rgba(74,79,85,.10)  calc(var(--subida) * .63),
    rgba(74,79,85,.17)  calc(var(--subida) * .72),
    rgba(74,79,85,.28)  calc(var(--subida) * .80),
    rgba(74,79,85,.43)  calc(var(--subida) * .87),
    rgba(74,79,85,.62)  calc(var(--subida) * .93),
    rgba(74,79,85,.83)  calc(var(--subida) * .975),
    var(--tinta)        var(--subida),
    var(--tinta)        100%);
  color:#FFFFFF;
}
.bloque:has(+ .remate){ padding-bottom:clamp(90px,12vw,170px); }

/* La caja del cierre se monta sobre la sección de arriba por el margen
   negativo del difuminado: si recibe los clics, mata los botones de abajo. */
.remate{ pointer-events:none; }
.remate__caja{ pointer-events:auto; text-align:center; }
.remate__titulo{
  font-size:clamp(34px,8.6vw,62px);
  line-height:1.04;
  letter-spacing:-0.015em;
}
.remate__bajada{
  max-width:52ch;
  margin:18px auto 0;
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.6;
  color:rgba(255,255,255,.78);
}
.remate__botones{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:32px;
}
.remate__logo{ height:84px; width:auto; margin:44px auto 0; opacity:.9; }

/* =========================================================
   PIE
   ========================================================= */
.pie{
  /* El pie continúa el mismo degradado hacia abajo, por detrás de su contenido */
  --bajada:clamp(520px,68vw,960px);
  position:relative;
  padding-top:clamp(96px,11.5vw,168px);
  padding-bottom:clamp(44px,5vw,64px);
  background:var(--nube);
  overflow:clip;   /* el degradado no debe sobrar por debajo */
  font-size:15px;
}
.pie::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:var(--bajada);
  background:linear-gradient(to bottom,
    var(--tinta)         0%,
    rgba(74,79,85,.78)  1.5%,
    rgba(74,79,85,.55)   4%,
    rgba(74,79,85,.37)   7%,
    rgba(74,79,85,.23)  10.5%,
    rgba(74,79,85,.13)  11.5%,
    rgba(74,79,85,.08)  15%,
    rgba(74,79,85,.04)  20%,
    rgba(74,79,85,.018) 28%,
    rgba(74,79,85,.006) 50%,
    rgba(74,79,85,0)   100%);
  pointer-events:none;
}
.pie > *{ position:relative; z-index:1; }
.pie__grilla{ display:grid; gap:34px; }
.pie__marca img{
  display:block;
  height:clamp(118px,13vw,168px);
  width:auto;
  margin:0 auto 26px;
}
.pie__descripcion{ max-width:46ch; color:#5C5C57; line-height:1.6; }
.pie__contacto{ margin-top:16px; }
.pie__contacto a{ color:var(--grafito); text-decoration:underline; text-underline-offset:3px; }
.pie__contacto li + li{ margin-top:8px; }

/* bloque de redes sociales del pie */
.pie__redes{ margin-top:22px; }
.pie__redes-titulo{
  margin:0 0 10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--piedra);
}
.pie__red{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  border:1px solid #DCDFE5;
  border-radius:100px;
  background:#FFFFFF;
  color:var(--grafito);
  font-weight:500;
  text-decoration:none;
  transition:border-color var(--suave), color var(--suave), transform var(--suave);
}
.pie__red + .pie__red{ margin-left:10px; }
.pie__red:hover{ border-color:var(--naranja); color:var(--naranja); transform:translateY(-1px); }

.pie__whatsapp{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:10px 20px;
  border-radius:100px;
  background:var(--verde);
  color:#FFFFFF;
  font-weight:500;
}
.pie__whatsapp:hover{ background:var(--verde-osc); }
.pie__lugar{ margin-top:16px; color:var(--gris); }

.pie__bloque h2{
  margin-bottom:14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--naranja);
}
.pie__bloque li + li{ margin-top:9px; }
.pie__bloque a{ color:#4A4A45; }
.pie__bloque a:hover{ color:var(--naranja); }
.pie__sello{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:100px;
  background:var(--naranja);
  color:#FFFFFF;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pie__zonas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; }
.pie__nota{ margin-top:14px; color:var(--gris); font-size:14px; }

.pie__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid #DCDFE5;
  font-size:14px;
  color:var(--gris);
}
.pie__credito{ color:var(--naranja); }
.pie__legal a{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whatsapp{
  position:fixed;
  right:18px; bottom:18px;
  z-index:90;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--verde);
  color:#FFFFFF;
  box-shadow:0 12px 30px rgba(37,211,102,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity var(--suave), transform var(--suave), visibility var(--suave), background var(--suave);
}
.whatsapp--visible{ opacity:1; visibility:visible; transform:none; }
.whatsapp:hover{ background:var(--verde-osc); }

/* En tablet y celular el botón de WhatsApp está flotando siempre,
   no espera a que se pase el hero. */
@media (max-width:1039px){
  .whatsapp{ opacity:1; visibility:visible; transform:none; }
}

/* Lista de enlaces de la página 404 */
.lista404{ margin-top:26px; gap:14px 28px; }
.lista404 a{
  display:block;
  padding:14px 0;
  font-weight:500;
  color:var(--grafito);
  border-bottom:1px solid #DCDFE5;
}
.lista404 a:hover{ color:var(--naranja); }
@media (min-width:760px){
  .lista404{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* =========================================================
   GLOSARIO — aviso del inicio
   ========================================================= */
.cachai{ padding:64px 0; background:var(--tinta); color:#FFFFFF; }
.cachai__caja{ display:grid; gap:34px; justify-items:center; text-align:center; }
.cachai .eyebrow{ color:var(--naranja); }
.cachai__titulo{
  margin:10px 0 14px;
  font-family:var(--titulos);
  font-size:clamp(34px,6vw,54px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
}
.cachai__bajada{ margin:0 auto 26px; max-width:52ch; color:#D7DBE1; font-size:clamp(16px,1.9vw,18px); }
@media (min-width:900px){
  .cachai{ padding:84px 0; }
}

/* =========================================================
   GLOSARIO — la pagina
   ========================================================= */
.glo-intro{
  max-width:62ch;
  margin:0 0 48px;
  font-size:clamp(17px,2vw,19px);
  color:var(--texto);
}
.grupo-glo{ margin-bottom:56px; }
.grupo-glo > h2{
  margin:0 0 24px;
  padding-bottom:14px;
  border-bottom:2px solid var(--naranja);
  font-family:var(--titulos);
  font-size:clamp(22px,3vw,28px);
  font-weight:700;
  color:var(--grafito);
}
.terminos{ display:grid; gap:18px; }
@media (min-width:860px){ .terminos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
.termino{
  padding:24px 26px;
  border:1px solid #E2E6EC;
  border-radius:18px;
  background:#FFFFFF;
}
.termino h3{
  margin:0 0 10px;
  font-family:var(--titulos);
  font-size:19px;
  font-weight:700;
  color:var(--naranja);
}
.termino__sigla{
  display:block;
  margin-top:3px;
  font-family:var(--cuerpo);
  font-size:13px;
  font-weight:500;
  color:var(--piedra);
}
.termino p{ margin:0; font-size:15.5px; line-height:1.62; color:var(--texto); }

.glo-foto{ margin:0 0 56px; }
.glo-foto img{
  display:block; width:100%; height:auto;
  border-radius:22px;
}
.glo-foto figcaption{
  margin-top:14px;
  font-size:15px;
  color:var(--piedra);
  text-align:center;
}

.oculto{ display:none !important; }

/* =========================================================
   TABLET — 760px
   ========================================================= */
@media (min-width:760px){
  :root{ --margen:32px; }

  .portada__chips{
    position:absolute;
    right:0; bottom:140px;
    left:auto;
    width:auto;
    max-width:none;
    margin:0;
    padding-right:max(var(--margen), calc((100vw - var(--caja)) / 2 + var(--margen)));
  }
  .chip{ width:260px; }

  .panel{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:44px;
    padding:48px;
  }
  .panel--invertido .panel__medio{ order:2; }
  .panel__medio img{ height:100%; min-height:420px; }

  .compromisos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 26px; }

  .pie__grilla{ grid-template-columns:1.35fr 1fr 1fr; gap:40px; }
  .pie__marca{ grid-column:1 / -1; }
}

/* =========================================================
   ESCRITORIO — 1040px
   ========================================================= */
@media (min-width:1040px){
  .header__nav{ display:flex; }
  .header__acciones{ display:flex; }
  .header__menu{ display:none; }

  .portada{ padding-top:calc(var(--header) + 96px); padding-bottom:68px; }
  .portada__titulo{ max-width:14ch; }

  .panel{ padding:64px; gap:56px; min-height:600px; }
  .panel__medio img{ min-height:480px; }

  .dos{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:start; }
  .dos__izq{ position:sticky; top:calc(var(--header) + 28px); }

  .cifras{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
  .compromisos{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .destacado{ display:grid; grid-template-columns:auto 1fr; gap:0 40px; align-items:center; }
  .destacado__logo{ grid-row:1 / 3; margin:0; height:72px; }
  .destacado__cita{ margin-bottom:14px; max-width:24ch; }

  .pie__grilla{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; }
  .pie__marca{ grid-column:auto; }
}

/* =========================================================
   MENOS MOVIMIENTO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */

/* Header sólido cuando no hay hero a sangre detrás */
.header--solido{ background:rgba(52,57,63,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ---------- Hero de página interna ---------- */
.phero{
  position:relative;
  padding:calc(var(--header) + 56px) 0 clamp(44px,7vw,80px);
  overflow:hidden;
  background:var(--tinta);
}
.phero__foto{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.phero__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,
    rgba(52,57,63,.95) 0%,
    rgba(52,57,63,.78) 55%,
    rgba(52,57,63,.52) 100%);
}
.phero__caja{ position:relative; }

.miga{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
  font-size:13px;
  color:rgba(255,255,255,.52);
}
.miga span{ opacity:.6; }

.phero__titulo{
  max-width:19ch;
  font-size:clamp(32px,7.4vw,58px);
  font-weight:600;
  line-height:1.08;
  color:#FFFFFF;
  margin-bottom:18px;
}
.phero__bajada{
  max-width:56ch;
  margin-bottom:28px;
  font-size:clamp(15px,4vw,18px);
  line-height:1.6;
  color:rgba(255,255,255,.85);
}
.phero__botones{ display:flex; flex-wrap:wrap; gap:12px; }
.phero__nota{ margin-top:20px; font-size:14px; color:rgba(255,255,255,.6); }

/* ---------- Mosaico de tarjetas de color ---------- */
.mosaico{ display:grid; gap:16px; }
.mos{
  padding:28px 26px;
  border-radius:25px;
  color:#FFFFFF;
  transition:transform var(--suave);
}
.mos:hover{ transform:translateY(-4px); }
.mos--tinta  { background:var(--tinta); }
.mos--naranja{ background:var(--naranja); }
.mos--piedra { background:var(--piedra); }
.mos--brasa  { background:var(--naranja-osc); }
.mos--carbon { background:var(--carbon); }
.mos h3{ font-size:21px; margin-bottom:10px; }
.mos p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.84); }

/* ---------- Panel con lista de cambios ---------- */
.panel-lista{
  padding:clamp(30px,6vw,64px);
  border-radius:32px;
  background:var(--tinta);
  color:#FFFFFF;
}
.panel-lista .titulo2{ max-width:20ch; margin-bottom:30px; }
.lista-check{ display:grid; gap:18px; }
.lista-check li{
  position:relative;
  padding-left:34px;
  max-width:70ch;
  font-size:clamp(15px,3.8vw,16px);
  line-height:1.6;
  color:rgba(255,255,255,.8);
}
.lista-check li::before{
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:18px; height:10px;
  border-left:2.5px solid var(--naranja);
  border-bottom:2.5px solid var(--naranja);
  transform:rotate(-45deg);
}
.lista-check strong{
  display:block;
  font-family:var(--titulos);
  font-size:18px;
  font-weight:600;
  color:#FFFFFF;
  margin-bottom:3px;
}

/* ---------- Tarjetas del laboratorio ---------- */
.labtarjetas{ display:grid; gap:16px; }
.labtar{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:380px;
  padding:30px;
  border-radius:25px;
  overflow:hidden;
  isolation:isolate;
  color:#FFFFFF;
  background:var(--carbon);
}
.labtar__foto{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
}
.labtar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(52,57,63,.82) 0%, rgba(52,57,63,.62) 45%, rgba(52,57,63,.90) 100%);
  transition:background var(--suave);
}
.labtar:hover::before{
  background:linear-gradient(180deg, rgba(214,78,4,.82) 0%, rgba(52,57,63,.66) 45%, rgba(52,57,63,.92) 100%);
}
.labtar h3{ font-size:clamp(22px,5vw,28px); line-height:1.08; margin-bottom:10px; }
.labtar__num{ font-size:.6em; font-weight:500; color:rgba(255,255,255,.5); margin-left:6px; }
.labtar p{ max-width:40ch; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86); }
.labtar__inc{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:13px !important;
  letter-spacing:.02em;
  color:rgba(255,255,255,.66) !important;
}

/* ---------- Escalera de pasos ---------- */
.escalera{ display:grid; gap:14px; }
.paso{
  display:flex;
  gap:20px;
  padding:28px 26px;
  border-radius:25px;
  color:#FFFFFF;
}
.paso--tinta  { background:var(--tinta); }
.paso--naranja{ background:var(--naranja); }
.paso--piedra { background:var(--piedra); }
.paso--brasa  { background:var(--naranja-osc); }
.paso--carbon { background:var(--carbon); }
.paso__num{
  flex:none;
  font-family:var(--titulos);
  font-size:clamp(26px,6vw,38px);
  font-weight:600;
  line-height:1;
  color:rgba(255,255,255,.4);
}
.paso h3{ font-size:clamp(19px,4.6vw,24px); margin-bottom:8px; }
.paso p{ max-width:62ch; font-size:15px; line-height:1.58; color:rgba(255,255,255,.82); }

/* ---------- Momentos ---------- */
.momentos{
  display:grid;
  gap:32px;
  padding:clamp(30px,6vw,64px);
  border-radius:32px;
  background:var(--carbon);
  color:#FFFFFF;
}
.momentos .titulo2{ max-width:16ch; margin-bottom:26px; }
.momentos__lista{ display:grid; gap:0; align-content:start; }
.momentos__lista li{
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.5;
  color:rgba(255,255,255,.84);
}
.momentos__lista li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }

/* ---------- Qué incluye ---------- */
.incluye{
  padding:clamp(30px,6vw,64px);
  border-radius:32px;
  background:
    radial-gradient(120% 110% at 100% 0%, var(--naranja-osc), transparent 62%),
    var(--naranja);
  color:#FFFFFF;
}
.eyebrow--blanco{ color:rgba(255,255,255,.72); }
.incluye .titulo2{ max-width:18ch; }
.incluye .entrada{ margin-bottom:30px; }
.incluye__lista{ display:grid; gap:12px; margin-bottom:28px; }
.incluye__lista li{
  position:relative;
  padding-left:30px;
  font-size:15px;
  line-height:1.5;
  color:#FFFFFF;
}
.incluye__lista li::before{
  content:"";
  position:absolute;
  left:0; top:.36em;
  width:16px; height:9px;
  border-left:2.5px solid #FFFFFF;
  border-bottom:2.5px solid #FFFFFF;
  transform:rotate(-45deg);
}
.incluye__cierre{
  max-width:62ch;
  margin-bottom:28px;
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.84);
}

/* ---------- Bloques de texto legal / contenido simple ---------- */
.texto{ max-width:72ch; }
.texto h2{
  margin:40px 0 14px;
  font-size:clamp(21px,5vw,28px);
  color:var(--grafito);
}
.texto h2:first-child{ margin-top:0; }
.texto p,
.texto li{ font-size:16px; line-height:1.68; color:#4A4A45; }
.texto p{ margin-bottom:14px; }
.texto ul{ display:grid; gap:9px; margin:0 0 18px; }
.texto li{ position:relative; padding-left:22px; }
.texto li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--naranja);
}
.texto a{ color:var(--naranja); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Equipo ---------- */
.equipo{ display:grid; gap:16px; }
.persona{
  padding:30px 28px;
  border:1px solid #E3E5EA;
  border-radius:25px;
  background:#FFFFFF;
}
.persona h3{ font-size:22px; color:var(--grafito); margin-bottom:4px; }
.persona__rol{
  margin-bottom:14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--naranja);
}
.persona p{ font-size:15px; line-height:1.6; color:#5C5C57; }

/* ---------- Vías de contacto ---------- */
.vias{ display:grid; gap:16px; margin-top:34px; }
.via{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px 26px;
  border-radius:25px;
  background:var(--tinta);
  color:#FFFFFF;
  transition:background var(--suave), transform var(--suave);
}
.via:hover{ transform:translateY(-3px); }
.via--verde{ background:var(--verde); }
.via--verde:hover{ background:var(--verde-osc); }
.via--naranja{ background:var(--naranja); }
.via--naranja:hover{ background:var(--naranja-osc); }
.via__eti{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:5px;
}
.via__dato{
  font-family:var(--titulos);
  font-size:clamp(17px,4.4vw,23px);
  font-weight:600;
  line-height:1.15;
}
.via .redonda{ width:44px; height:44px; background:rgba(255,255,255,.2); color:#FFFFFF; }
.via .redonda svg{ width:20px; height:20px; }

/* ---------- Grupos de preguntas ---------- */
.grupo-preg{ margin-bottom:44px; }
.grupo-preg > h2{
  margin-bottom:18px;
  font-size:clamp(21px,5vw,28px);
  color:var(--grafito);
}

@media (min-width:760px){
  .mosaico{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .labtarjetas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .momentos{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:44px; }
  .equipo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vias{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .incluye__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px; }
  .paso{ padding:34px 38px; }
}

@media (min-width:1040px){
  .mosaico{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .phero{ padding-top:calc(var(--header) + 86px); }

  /* la escalera pierde ancho en cada peldaño, como en la plantilla */
  .escalera{ gap:16px; }
  .paso{ width:calc(100% - var(--nivel) * 58px); }
  .vias{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* =========================================================
   PIE — más aire a los lados y columnas más separadas
   ========================================================= */
/* El pie usa .contenedor, que necesita su propio ancho */
.pie .contenedor,
.pie .caja{
  width:100%;
  max-width:1260px;
  margin-inline:auto;
  padding-inline:var(--margen);
}
.pie__grilla{ gap:40px; }

@media (min-width:760px){
  .pie .contenedor,
  .pie .caja{ padding-inline:44px; }
  .pie__grilla{ gap:48px 46px; }
}
@media (min-width:1040px){
  .pie .contenedor,
  .pie .caja{ padding-inline:60px; }
  .pie__grilla{
    grid-template-columns:1.45fr 1fr 1.05fr 1.2fr;
    gap:52px;
  }
  .pie__legal{ margin-top:48px; }
}

/* =========================================================
   FORMULARIO DE CONTACTO
   ========================================================= */
.form-caja{
  padding:clamp(28px,5vw,56px);
  border:1px solid #E3E5EA;
  border-radius:32px;
  background:#FFFFFF;
}
.form-caja .titulo2{ max-width:18ch; }
.form-caja .entrada{ margin-bottom:34px; }

.formulario{ display:grid; gap:22px; max-width:620px; }
.campo{ display:grid; gap:8px; }

.campo label,
.campo legend{
  font-family:var(--titulos);
  font-size:15px;
  font-weight:600;
  color:var(--grafito);
  padding:0;
}
.campo--grupo{ border:0; margin:0; padding:0; }
.campo--grupo legend{ margin-bottom:12px; }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea{
  width:100%;
  min-height:50px;
  padding:13px 16px;
  border:1px solid #D7DAE0;
  border-radius:14px;
  background:#FFFFFF;
  font-family:var(--cuerpo);
  font-size:16px;
  color:var(--grafito);
  transition:border-color var(--suave), box-shadow var(--suave);
}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(255,95,7,.16);
}
.campo input.invalido{ border-color:#D12B2B; background:#FFF6F6; }

/* Botones WhatsApp / Correo */
.vias-boton{ display:flex; gap:10px; flex-wrap:wrap; }
.via__boton{
  padding:11px 24px;
  border:1px solid #D7DAE0;
  border-radius:100px;
  background:#FFFFFF;
  font-family:var(--cuerpo);
  font-size:15px;
  font-weight:500;
  color:var(--grafito);
  cursor:pointer;
  transition:background var(--suave), color var(--suave), border-color var(--suave);
}
.via__boton:hover{ border-color:var(--naranja); }
.via__boton.activo{
  background:var(--naranja);
  border-color:var(--naranja);
  color:#FFFFFF;
}

/* Teléfono con prefijo */
.telefono{
  display:flex;
  align-items:center;
  border:1px solid #D7DAE0;
  border-radius:14px;
  overflow:hidden;
  background:#FFFFFF;
  transition:border-color var(--suave), box-shadow var(--suave);
}
.telefono:focus-within{ border-color:var(--naranja); box-shadow:0 0 0 3px rgba(255,95,7,.16); }
.telefono__pais{
  flex:none;
  padding:13px 14px;
  border-right:1px solid #E3E5EA;
  background:var(--nube);
  font-size:15px;
  font-weight:500;
  color:#5C5C57;
}
.telefono input{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  letter-spacing:.06em;
}

/* Correo partido en usuario + dominio */
.correo{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid #D7DAE0;
  border-radius:14px;
  overflow:hidden;
  background:#FFFFFF;
  transition:border-color var(--suave), box-shadow var(--suave);
}
.correo:focus-within{ border-color:var(--naranja); box-shadow:0 0 0 3px rgba(255,95,7,.16); }
.correo input,
.correo select{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-width:0;
}
.correo input{ flex:1 1 auto; }
.correo select{ flex:0 0 auto; width:auto; background:var(--nube); cursor:pointer; }
.correo__arroba{ flex:none; padding:0 4px; color:var(--gris); }
#dominioOtro{ margin-top:10px; }

/* Casillas */
.opciones{ display:grid; gap:10px; }
.opciones label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid #E3E5EA;
  border-radius:14px;
  font-family:var(--cuerpo);
  font-size:15px;
  font-weight:400;
  color:#4A4A45;
  cursor:pointer;
  transition:border-color var(--suave), background var(--suave);
}
.opciones label:hover{ border-color:var(--naranja); }
.opciones input[type="checkbox"]{
  flex:none;
  width:19px; height:19px;
  accent-color:var(--naranja);
  cursor:pointer;
}
.opciones label:has(input:checked){
  border-color:var(--naranja);
  background:#FFF4EE;
  color:var(--grafito);
}

.pastilla--ancha{ width:100%; justify-content:center; }

.formulario__nota{ font-size:13px; line-height:1.5; color:var(--gris); }
.formulario__estado{ font-size:15px; font-weight:500; }
.formulario__estado.error{ color:#C32020; }
.formulario__estado.ok{ color:#1A8A4A; }

@media (min-width:600px){
  .opciones{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* WhatsApp flotante: crece un poco al pasar el cursor */
.whatsapp--visible:hover,
.whatsapp--visible:focus-visible{
  transform:scale(1.14);
  box-shadow:0 16px 38px rgba(37,211,102,.45);
}
@media (prefers-reduced-motion:reduce){
  .whatsapp--visible:hover,
  .whatsapp--visible:focus-visible{ transform:none; }
}


/* =========================================================
   PANELES QUE SE APILAN AL BAJAR
   Cada uno se queda pegado un poco más abajo que el anterior,
   así el siguiente lo tapa y arriba va quedando la pila.
   Solo en pantallas altas: en celular se verían amontonados.
   ========================================================= */
@media (min-width:1040px) and (min-height:800px){
  .paneles{
    gap:28px;
    padding-bottom:40px;
  }
  .panel{
    position:sticky;
    top:calc(var(--header) + 28px);
    transition:transform 420ms cubic-bezier(.22,.61,.36,1),
               box-shadow 420ms cubic-bezier(.22,.61,.36,1);
  }
  /* cada tarjeta se detiene 22px más abajo: así asoma el borde de la anterior */
  .panel:nth-child(2){ top:calc(var(--header) + 50px); }
  .panel:nth-child(3){ top:calc(var(--header) + 72px); }
  .panel:nth-child(4){ top:calc(var(--header) + 94px); }
  .panel:nth-child(5){ top:calc(var(--header) + 116px); }

  /* la que queda encima proyecta sombra sobre la pila */
  .panel{ box-shadow:0 -1px 0 rgba(255,255,255,.06), 0 -18px 40px rgba(40,44,50,.16); }
  .panel:first-child{ box-shadow:none; }
}

@media (prefers-reduced-motion:reduce){
  .panel{ position:static !important; box-shadow:none !important; }
}

/* =========================================================
   «¿Es tu momento?» y «Qué incluye» se apilan igual que
   las tarjetas de servicio del inicio.
   ========================================================= */
.apilables{ display:grid; gap:20px; }

@media (min-width:1040px) and (min-height:720px){
  .apilables{ gap:0; }
  /* la primera se queda pegada y la segunda sube y la cubre */
  .apilables > *:first-child{
    position:sticky;
    top:calc(var(--header) + 28px);
  }
  .apilables > * + *{
    position:relative;
    z-index:2;
    margin-top:34px;
    box-shadow:0 -1px 0 rgba(255,255,255,.07), 0 -22px 46px rgba(40,44,50,.20);
  }
}

@media (prefers-reduced-motion:reduce){
  .apilables{ gap:20px; }
  .apilables > *{ position:static !important; margin-top:0 !important; box-shadow:none !important; }
}

/* =========================================================
   Alto de las tarjetas de servicio en escritorio.
   Las fotos son verticales (1160x1400): sin tope se estiran
   solas y empujan el botón fuera de pantalla.
   ========================================================= */
@media (min-width:1040px){
  .panel{
    padding:48px;
    gap:48px;
    min-height:0;
  }
  .panel__medio img{
    height:clamp(360px,29vw,440px);
    min-height:0;
  }
}


/* =========================================================
   Bloque de dos columnas del inicio, más compacto
   ========================================================= */
.tarjeta{ min-height:300px; padding:26px; }
.tarjeta__titulo{ font-size:clamp(21px,4.8vw,26px); }
.tarjeta__pie{ margin-top:20px; font-size:15px; }
.tarjeta__pie .redonda{ width:38px; height:38px; }
.tarjeta__pie .redonda svg{ width:17px; height:17px; }

.dos__izq .titulo2{ max-width:15ch; }
.dos__izq .parrafo{ font-size:16px; line-height:1.55; margin-top:13px; }
.firma{ margin-top:22px; padding:20px; }
.firma blockquote{ margin-bottom:14px; font-size:clamp(16px,3.8vw,18px); }
.firma figcaption img{ height:38px; }
.dos__botones{ margin-top:22px; }

@media (min-width:1040px){
  .dos{ gap:48px; }
  .dos__der{ gap:14px; }
}

/* =========================================================
   PIE reordenado: franja centrada arriba, tres columnas iguales
   ========================================================= */
.pie__tope{
  display:grid;
  justify-items:center;
  text-align:center;
  padding-bottom:40px;
  border-bottom:1px solid #DCDFE5;
}
.pie__tope .pie__descripcion{ max-width:62ch; margin-inline:auto; }
.pie__tope .pie__contacto{ margin-top:14px; }
.pie__tope .pie__whatsapp{ margin-top:16px; }
.pie__tope .pie__redes{ margin-top:22px; }
.pie__tope .pie__lugar{ margin-top:14px; }

.pie__grilla{ margin-top:40px; }

@media (min-width:760px){
  .pie__grilla{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
}
@media (min-width:1040px){
  .pie__grilla{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
  .pie__legal{ margin-top:40px; }
}

/* el botón flotante de WhatsApp tapaba el final de "Términos y condiciones" */
@media (max-width:1039px){
  .pie__legal{ padding-bottom:86px; }
}

/* las comunas en tres columnas: ya no parte "San José de Maipo" */
@media (min-width:760px){
  .pie__zonas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 24px; }
}


/* glosario: enlaces hacia las paginas de servicio */
.termino__mas{ margin:14px 0 0; font-size:15px; }
.grupo-glo__mas{ margin:22px 0 0; }
.termino__mas a,
.grupo-glo__mas a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--naranja);
  text-decoration:none;
}
.termino__mas a:hover,
.grupo-glo__mas a:hover{ text-decoration:underline; text-underline-offset:4px; }
.mas__flecha{ transition:transform .18s ease; }
.termino__mas a:hover .mas__flecha,
.grupo-glo__mas a:hover .mas__flecha{ transform:translateX(3px); }


/* =========================================================
   PAGINAS POR COMUNA
   ========================================================= */
.texto-largo{ display:grid; gap:18px; max-width:68ch; }
.texto-largo p{ color:var(--texto); line-height:1.75; font-size:17px; }

/* las busquedas reales que hace el cliente de esa comuna */
.busquedas{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.busquedas li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:1px solid #E2E6EC;
  border-radius:100px;
  background:#FFFFFF;
  color:var(--grafito);
  font-size:16px;
}
.busquedas li::before{
  content:"";
  flex:0 0 auto;
  width:17px;
  height:17px;
  border:2px solid var(--naranja);
  border-radius:50%;
  box-shadow:4px 4px 0 -2px var(--naranja);
}
@media (min-width:720px){
  .busquedas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.servicios-local{ display:grid; gap:16px; }
.servicio-local{
  display:block;
  padding:26px 28px;
  border:1px solid #E2E6EC;
  border-radius:20px;
  background:#FFFFFF;
  color:inherit;
  text-decoration:none;
  transition:border-color var(--suave), transform var(--suave);
}
.servicio-local:hover{ border-color:var(--naranja); transform:translateY(-2px); }
.servicio-local h3{
  margin:0 0 10px;
  font-family:var(--titulos);
  font-size:19px;
  font-weight:700;
  color:var(--grafito);
}
.servicio-local p{ margin:0 0 14px; color:var(--texto); line-height:1.6; }
.servicio-local__mas{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--naranja);
}
.servicio-local:hover .mas__flecha{ transform:translateX(3px); }
@media (min-width:860px){
  .servicios-local{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}

/* lista de comunas del pie: las que tienen pagina son enlaces */
/* los enlaces del pie se tienen que ver como enlaces */
.pie__bloque a{
  color:#4A4A45;
  text-decoration:underline;
  text-decoration-color:#C9CFD8;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--suave), text-decoration-color var(--suave);
}
.pie__bloque a:hover{ color:var(--naranja); text-decoration-color:var(--naranja); }
.pie__bloque a .pie__sello{ text-decoration:none; }

/* las comunas llevan además la flecha, porque un nombre de lugar
   no se lee solo como navegación */
.pie__zonas a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:500;
  text-decoration-color:var(--naranja);
  text-decoration-thickness:2px;
}
.pie__zonas a::after{
  content:"\2192";
  color:var(--naranja);
  font-weight:700;
  text-decoration:none;
}