/* =============================================================
   MULTIGRAFIC — hoja de estilos única de todo el sitio
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --rojo:#D93B3F;
  --rojo-osc:#B8262A;
  --azul:#3A4B96;
  --azul-osc:#2E3872;
  --noche:#12141C;
  --noche-2:#1B1F2C;
  --noche-3:#252A3A;
  --encendido:#FFF4DC;
  --papel:#F6F5F3;
  --papel-2:#EDEBE7;
  --tinta:#16181F;
  --gris:#4E5361;
  --gris-claro:#6B6F7B;
  --wa:#25D366;

  --display:'Archivo Black', system-ui, sans-serif;
  --texto:'Archivo', system-ui, sans-serif;

  --max:1180px;
  --pad:clamp(20px,5vw,48px);
  --radio:14px;
  --luzAlto:clamp(250px,30vw,340px);
  --navAlto:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--texto);color:var(--tinta);background:var(--papel);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.envoltura{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

.salta{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--encendido);color:var(--tinta);padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;
}
.salta:focus{left:0}

/* ---------- 2. TIPOGRAFÍA ---------- */
.etiqueta{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rojo-osc);margin:0 0 14px;
}
.seccion-oscura .etiqueta,.cotiza .etiqueta{color:#FF8A8D}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.015em;line-height:1.08}

h2.titulo{font-size:clamp(30px,4.6vw,50px);line-height:1.04;margin:0 0 18px}
h3.subtitulo{font-size:clamp(21px,2.6vw,28px);margin:0 0 12px}

.entradilla{font-size:clamp(16px,2vw,19px);color:var(--gris);max-width:56ch;margin:0 0 44px}
.seccion-oscura .entradilla{color:#A8ADBC}

.destacado{
  font-size:clamp(18px,2.3vw,23px);line-height:1.5;font-weight:600;
  max-width:44ch;margin:0 0 28px;
}

/* ---------- 3. BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--texto);font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--encendido);outline-offset:3px}
.btn svg{width:20px;height:20px;flex-shrink:0}

.btn-wa{background:var(--wa);color:#08331A;box-shadow:0 8px 24px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1FBE5B;box-shadow:0 12px 30px rgba(37,211,102,.42)}
.btn-rojo{background:var(--rojo);color:#fff;box-shadow:0 8px 24px rgba(217,59,63,.28)}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-linea{background:transparent;color:var(--encendido);border:1.5px solid rgba(255,244,220,.35)}
.btn-linea:hover{border-color:var(--encendido);background:rgba(255,244,220,.07)}
.btn-linea-osc{background:transparent;color:var(--tinta);border:1.5px solid rgba(22,24,31,.25)}
.btn-linea-osc:hover{border-color:var(--tinta);background:rgba(22,24,31,.05)}

/* ---------- 4. NAVEGACIÓN ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .3s ease,box-shadow .3s ease}
.nav-caja{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.nav-logo img{height:46px;width:auto;filter:brightness(0) invert(1);transition:filter .3s ease}
.nav-logo span{font-family:var(--display);font-size:15px;color:var(--encendido);transition:color .3s ease}

.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  color:rgba(255,244,220,.82);text-decoration:none;font-size:15px;font-weight:500;
  transition:color .2s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.activo{color:var(--encendido)}
.nav-links a.activo{font-weight:700}

.nav .btn{padding:11px 20px;font-size:14.5px}

.nav.solida{background:rgba(246,245,243,.95);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.09)}
.nav.solida .nav-logo img{filter:none}
.nav.solida .nav-logo span{color:var(--azul)}
.nav.solida .nav-links a{color:#3A3E4A}
.nav.solida .nav-links a:hover,.nav.solida .nav-links a.activo{color:var(--rojo-osc)}

.nav-boton{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;margin-left:auto;
}
.nav-boton span{display:block;width:24px;height:2px;background:var(--encendido);transition:transform .25s ease,opacity .25s ease}
.nav.solida .nav-boton span{background:var(--tinta)}
.nav-boton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-boton[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-boton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .nav-boton{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--noche);padding:0 var(--pad);
    max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;
  }
  .nav.solida .nav-links{background:var(--papel);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .nav-links.abierto{max-height:70vh;padding:8px var(--pad) 20px}
  .nav-links a{padding:14px 0;border-bottom:1px solid rgba(255,244,220,.12);font-size:17px}
  .nav.solida .nav-links a{border-color:rgba(22,24,31,.1)}
  .nav-wa-texto{display:none}
  .nav .btn{padding:11px 14px}
  .nav-logo img{height:38px}
  .nav-logo span{display:none}
}

/* ---------- 5. PORTADAS DE PÁGINA ---------- */
.portada{
  position:relative;background:var(--noche);overflow:hidden;
  padding:calc(var(--navAlto) + clamp(50px,8vh,90px)) 0 clamp(50px,8vh,90px);
}
.portada-alta{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(40px,7vh,72px)}
.portada-foto{position:absolute;inset:0}
.portada-foto img,.portada-foto video{width:100%;height:100%;object-fit:cover;opacity:.5}
.portada-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(18,20,28,.86) 0%, rgba(18,20,28,.42) 32%, rgba(18,20,28,.93) 82%, var(--noche) 100%),
    radial-gradient(120% 80% at 12% 78%, rgba(58,75,150,.3), transparent 62%);
}
.portada-contenido{position:relative;z-index:2;width:100%;color:var(--encendido)}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encendido);background:rgba(255,244,220,.09);
  border:1px solid rgba(255,244,220,.2);padding:8px 15px;border-radius:999px;
}
.punto{width:7px;height:7px;border-radius:50%;background:var(--rojo);box-shadow:0 0 10px var(--rojo)}

.marca-portada{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.marca-portada .chip{margin-bottom:5px}

/* Logo y titular con tratamiento de letrero encendido */
.logo-anuncio{height:clamp(76px,11.5vw,134px);width:auto;display:block;margin:0;overflow:visible}
.logo-anuncio path{fill:#383C4A;transition:fill 1.05s cubic-bezier(.4,0,.2,1)}
.logo-anuncio.p-mono .l-mono.l-rojo{fill:#FF5A5D}
.logo-anuncio.p-mono .l-mono.l-azul{fill:#7C8AE0}
.logo-anuncio.p-firma .l-firma.l-azul{fill:#8E9BEA}
.logo-anuncio.p-firma .l-firma.l-negro{fill:var(--encendido)}
.logo-anuncio.p-mono{
  filter:drop-shadow(0 0 14px rgba(255,90,93,.42)) drop-shadow(0 0 34px rgba(124,138,224,.22));
  animation:parpadeo .85s steps(1,end) 1;
}
.logo-anuncio.p-mono.p-firma{
  filter:drop-shadow(0 0 16px rgba(255,244,220,.34)) drop-shadow(0 0 44px rgba(124,138,224,.25));
}
@keyframes parpadeo{
  0%{opacity:.25} 9%{opacity:1} 14%{opacity:.3}
  22%{opacity:1} 27%{opacity:.45} 34%{opacity:1} 100%{opacity:1}
}

.portada h1{
  font-family:var(--display);font-size:clamp(40px,8.4vw,96px);
  line-height:.97;letter-spacing:-.028em;margin:0 0 22px;max-width:15ch;
}
.portada-alta h1{max-width:14ch}
.portada h1 .palabra{
  display:inline-block;color:#3B3F4D;
  text-shadow:0 1px 0 #23262F,0 2px 0 #1F222B,0 3px 0 #1B1E26,0 4px 0 #171A21,0 6px 14px rgba(0,0,0,.6);
  transition:color 1.1s cubic-bezier(.4,0,.2,1), text-shadow 1.1s cubic-bezier(.4,0,.2,1);
}
.portada h1 .palabra.prendida{
  color:var(--encendido);
  text-shadow:0 1px 0 #8A8266,0 2px 0 #6E6752,0 3px 0 #514C3C,0 4px 0 #363327,
              0 6px 16px rgba(0,0,0,.7),0 0 26px rgba(255,244,220,.55),0 0 62px rgba(255,244,220,.28);
}
.portada h1 .palabra.roja.prendida{
  color:#FF6B6E;
  text-shadow:0 1px 0 #7A2528,0 2px 0 #641F22,0 3px 0 #4E181B,0 4px 0 #381114,
              0 6px 16px rgba(0,0,0,.7),0 0 26px rgba(255,107,110,.6),0 0 64px rgba(217,59,63,.35);
}
.portada h1 .remate{display:block;font-size:1.12em;letter-spacing:-.01em;margin-top:.06em}

.portada-sub{font-size:clamp(16.5px,2.1vw,20px);color:#C9CDDA;max-width:52ch;margin:0 0 34px}
.portada-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}

.confianza{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-top:1px solid rgba(255,244,220,.16);padding-top:26px}
.confianza div{padding-right:18px}
.confianza strong{display:block;font-family:var(--display);font-size:clamp(20px,3vw,30px);color:var(--encendido);line-height:1;margin-bottom:7px}
.confianza span{font-size:13.5px;color:#9AA0B0;line-height:1.35;display:block}
@media(max-width:640px){
  .confianza{grid-template-columns:1fr 1fr;gap:22px 12px}
  .confianza div:last-child{grid-column:1/-1}
}

/* ---------- 6. SECCIONES ---------- */
.seccion{padding:clamp(64px,9vw,110px) 0}
.seccion-ap{padding-top:clamp(40px,6vw,70px)}
.seccion-oscura{background:var(--noche);color:var(--encendido)}
.seccion-oscura h2.titulo,.seccion-oscura h3.subtitulo{color:var(--encendido)}
.seccion-papel{background:var(--papel-2)}

/* Transición noche -> día con lámpara */
.seccion.transicion{
  position:relative;
  background:linear-gradient(180deg,
    var(--noche) 0, var(--noche) calc(var(--luzAlto)*.12),
    #434553 calc(var(--luzAlto)*.42), #ABA69F calc(var(--luzAlto)*.64),
    var(--papel) calc(var(--luzAlto)*.90), var(--papel) 100%);
  padding-top:calc(var(--luzAlto)*.96);
  overflow:hidden;
}
.seccion.transicion > .envoltura{position:relative;z-index:3}
.zona-lampara{position:absolute;top:0;left:0;right:0;height:var(--luzAlto);pointer-events:none}
.halo-lampara{
  position:absolute;top:clamp(30px,5vw,60px);left:50%;
  width:clamp(320px,55vw,620px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(255,226,168,.5) 0%, rgba(255,226,168,.16) 42%, transparent 66%);
  opacity:0;transition:opacity 1.5s ease .2s;
}
.cono-luz{
  position:absolute;top:clamp(96px,13vw,150px);left:50%;
  width:clamp(300px,62vw,700px);height:clamp(190px,26vw,300px);transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,238,203,.72) 0%, rgba(255,238,203,.28) 48%, rgba(255,238,203,0) 88%);
  clip-path:polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  filter:blur(9px);opacity:0;transition:opacity 1.6s ease .35s;
}
.lampara{position:absolute;top:0;left:50%;transform:translateX(-50%);height:clamp(132px,17vw,198px);width:auto;overflow:visible}
.lampara .pantalla{fill:#1C1F2B;transition:fill 1.1s ease}
.lampara .interior{fill:#2A2D3A;transition:fill 1.1s ease}
.lampara .foco{fill:#3A3D4C;transition:fill .9s ease}
.lampara .resplandor,.lampara .rim{opacity:0;transition:opacity 1.1s ease}
.zona-lampara.encendida .halo-lampara,
.zona-lampara.encendida .cono-luz,
.zona-lampara.encendida .lampara .resplandor,
.zona-lampara.encendida .lampara .rim{opacity:1}
.zona-lampara.encendida .lampara .pantalla{fill:#3A3F52}
.zona-lampara.encendida .lampara .interior{fill:#FFE7B8}
.zona-lampara.encendida .lampara .foco{fill:#FFF3D4;animation:parpadeo .9s steps(1,end) 1}

.puente-noche{height:clamp(64px,8vw,112px);background:linear-gradient(180deg,var(--papel) 0%,#8F8B86 44%,#2C2F3D 74%,var(--noche) 100%)}
.puente-dia{height:clamp(64px,8vw,112px);background:linear-gradient(180deg,var(--noche) 0%,#2C2F3D 26%,#8F8B86 56%,var(--papel) 100%)}

/* ---------- 7. EL PAR DÍA / NOCHE ---------- */
.par-comparativo{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;
}
@media(max-width:760px){.par-comparativo{grid-template-columns:1fr}}
.par-lado{position:relative;border-radius:var(--radio);overflow:hidden;background:var(--noche-2)}
.par-lado img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.par-etiqueta{
  position:absolute;top:14px;left:14px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;backdrop-filter:blur(8px);
}
.par-dia .par-etiqueta{background:rgba(255,255,255,.85);color:var(--tinta)}
.par-noche .par-etiqueta{background:rgba(18,20,28,.72);color:var(--encendido)}

/* ---------- 8. TARJETAS Y BLOQUES ---------- */
.rejilla-serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.tarjeta{
  background:#fff;border-radius:var(--radio);padding:30px 26px 32px;
  border:1px solid rgba(0,0,0,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(22,24,31,.11);border-color:transparent}
.tarjeta-ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--azul);color:#fff;margin-bottom:18px}
.tarjeta:nth-child(2n) .tarjeta-ico{background:var(--rojo)}
.tarjeta-ico svg{width:24px;height:24px}
.tarjeta h3{font-family:var(--display);font-size:19px;margin:0 0 9px;line-height:1.2}
.tarjeta p{margin:0;font-size:15.5px;color:var(--gris);line-height:1.55}

/* Bloque de tipo de iluminación: foto + texto alternados */
.tipo-luz{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;margin-bottom:clamp(48px,7vw,86px);
}
.tipo-luz:nth-child(even) .tipo-luz-foto{order:2}
.tipo-luz:last-child{margin-bottom:0}
@media(max-width:840px){
  .tipo-luz{grid-template-columns:1fr;gap:22px}
  .tipo-luz:nth-child(even) .tipo-luz-foto{order:0}
}
.tipo-luz-foto{border-radius:var(--radio);overflow:hidden;background:var(--noche-2)}
.tipo-luz-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tipo-luz-num{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  color:var(--rojo-osc);margin:0 0 10px;
}
.seccion-oscura .tipo-luz-num{color:#FF8A8D}
.tipo-luz p{color:var(--gris);margin:0 0 16px}
.seccion-oscura .tipo-luz p{color:#A8ADBC}
.cuando{
  border-left:3px solid var(--rojo);padding:2px 0 2px 16px;
  font-size:15.5px;color:var(--tinta);
}
.seccion-oscura .cuando{border-color:#FF8A8D;color:var(--encendido)}
.cuando b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:4px}
.seccion-oscura .cuando b{color:#9AA0B0}

/* ---------- 9. GALERÍA ---------- */
.rejilla-galeria{column-count:3;column-gap:14px}
@media(max-width:1000px){.rejilla-galeria{column-count:2}}
@media(max-width:640px){.rejilla-galeria{column-count:1;column-gap:0}}

.foto{
  position:relative;overflow:hidden;border-radius:var(--radio);background:var(--noche-2);
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 14px;padding:0;cursor:zoom-in;display:block;
}
.foto img{width:100%;height:auto;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.foto:hover img{transform:scale(1.04)}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:52px 18px 16px;
  background:linear-gradient(transparent, rgba(8,9,14,.55) 42%, rgba(8,9,14,.93));
  color:var(--encendido);font-size:14.5px;font-weight:600;pointer-events:none;line-height:1.35;
}
.lupa{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(10,11,16,.62);backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;transform:scale(.85);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.lupa svg{width:17px;height:17px;stroke:var(--encendido);fill:none;stroke-width:2.2}
.foto:hover .lupa,.foto:focus-visible .lupa{opacity:1;transform:scale(1)}

.mas-fotos{display:none;margin-top:6px}
.seccion-oscura .mas-fotos{color:var(--encendido);border-color:rgba(255,244,220,.35)}
.seccion-oscura .mas-fotos:hover{border-color:var(--encendido);background:rgba(255,244,220,.07)}
@media(max-width:640px){
  .mas-fotos{display:inline-flex}
  .rejilla-galeria.con-mas:not(.abierta) .foto:nth-child(n+5){display:none}
}

/* ---------- 10. VISOR ---------- */
.visor{
  position:fixed;inset:0;z-index:200;background:rgba(6,7,11,.96);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,44px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.visor.abierto{opacity:1;visibility:visible}
.visor figure{margin:0;display:flex;flex-direction:column;gap:14px;max-width:min(1080px,100%)}
.visor img{max-width:100%;max-height:calc(100svh - 190px);object-fit:contain;border-radius:12px;display:block;margin:0 auto}
.visor figcaption{color:var(--encendido);text-align:center;font-size:16px;font-weight:600}
.visor-btn{
  position:absolute;border:0;cursor:pointer;border-radius:50%;width:48px;height:48px;
  display:grid;place-items:center;background:rgba(255,244,220,.11);color:var(--encendido);
  transition:background-color .2s ease,transform .2s ease;
}
.visor-btn:hover{background:rgba(255,244,220,.22);transform:scale(1.06)}
.visor-btn:focus-visible{outline:3px solid var(--encendido);outline-offset:3px}
.visor-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v-cerrar{top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px)}
.v-ant{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.v-sig{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.v-ant:hover,.v-sig:hover{transform:translateY(-50%) scale(1.06)}
.visor-conteo{position:absolute;bottom:clamp(14px,2.4vw,26px);left:50%;transform:translateX(-50%);color:#9AA0B0;font-size:13.5px;letter-spacing:.06em}
@media(max-width:640px){
  .visor-btn{width:42px;height:42px}
  .v-ant{left:8px}.v-sig{right:8px}
}

/* ---------- 11. PROCESO ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.paso{position:relative}
.paso-foto{border-radius:var(--radio);overflow:hidden;background:var(--noche-2);margin-bottom:16px}
.paso-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.paso-num{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  color:var(--rojo-osc);margin:0 0 7px;
}
.seccion-oscura .paso-num{color:#FF8A8D}
.paso h3{font-family:var(--display);font-size:18px;margin:0 0 8px}
.paso p{margin:0;font-size:15.5px;color:var(--gris)}
.seccion-oscura .paso p{color:#A8ADBC}

/* Comparativa antes / después */
.comparativas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.comparativa h4{font-family:var(--display);font-size:16px;margin:14px 0 0}
.comparativa-par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comparativa-par figure{margin:0;position:relative;border-radius:11px;overflow:hidden;background:var(--noche-2)}
.comparativa-par img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.comparativa-par figcaption{
  position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(18,20,28,.75);color:var(--encendido);backdrop-filter:blur(6px);
}

/* ---------- 12. CLIENTES ---------- */
.clientes{display:flex;flex-wrap:wrap;gap:10px 12px}
.cliente{
  font-size:14.5px;font-weight:600;padding:10px 18px;border-radius:999px;
  background:rgba(255,244,220,.08);border:1px solid rgba(255,244,220,.18);color:var(--encendido);
}
.seccion:not(.seccion-oscura) .cliente{background:#fff;border-color:rgba(0,0,0,.09);color:var(--tinta)}

/* ---------- 13. PREGUNTAS FRECUENTES ---------- */
.faq{border-top:1px solid rgba(22,24,31,.12)}
.faq details{border-bottom:1px solid rgba(22,24,31,.12)}
.faq summary{
  cursor:pointer;padding:22px 40px 22px 0;position:relative;list-style:none;
  font-family:var(--display);font-size:clamp(16px,1.9vw,19px);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--rojo);border-bottom:2.5px solid var(--rojo);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .respuesta{padding:0 0 24px;color:var(--gris);max-width:68ch}
.faq .respuesta p{margin:0 0 12px}
.faq .respuesta p:last-child{margin:0}

/* ---------- 14. COTIZADOR ---------- */
.cotiza{background:var(--azul);color:#fff;position:relative;overflow:hidden}
.cotiza::after{
  content:"";position:absolute;right:-14%;top:-38%;width:600px;height:600px;
  background:radial-gradient(circle, rgba(217,59,63,.34), transparent 66%);pointer-events:none;
}
.cotiza-caja{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center}
@media(max-width:860px){.cotiza-caja{grid-template-columns:1fr}}
.cotiza h2.titulo{color:#fff;margin-bottom:14px}
.cotiza-texto p{color:#D3D7F0;font-size:17px;margin:0 0 24px;max-width:44ch}
.cotiza-lista{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cotiza-lista li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:#E4E7F8}
.palomita{width:21px;height:21px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex-shrink:0;margin-top:2px;font-size:12px;font-weight:700}

.formulario{background:#fff;border-radius:20px;padding:clamp(24px,3.4vw,34px);box-shadow:0 26px 64px rgba(10,12,30,.32)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:7px}
.campo .opcional{text-transform:none;letter-spacing:0;font-weight:400}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--texto);font-size:16px;color:var(--tinta);
  padding:13px 15px;border:1.5px solid #DAD8D4;border-radius:11px;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.campo textarea{resize:vertical;min-height:88px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(58,75,150,.15)}
.campo input.error,.campo select.error{border-color:var(--rojo)}
.formulario .btn{width:100%;padding:17px;font-size:17px}
.nota{font-size:13px;color:var(--gris-claro);text-align:center;margin:13px 0 0;line-height:1.45}
.aviso-error{color:var(--rojo);font-size:13.5px;font-weight:600;margin:0 0 14px;display:none}
.aviso-error.visible{display:block}
.trampa{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---------- 15. VIDEO ---------- */
.marco-video{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radio);overflow:hidden;background:var(--noche-2)}
.marco-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 16. PIE ---------- */
.pie{background:var(--noche);color:#9AA0B0;padding:60px 0 30px;font-size:15px}
.pie-caja{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){.pie-caja{grid-template-columns:1fr;gap:28px}}
.pie img{height:74px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.pie-intro{margin:0;max-width:36ch}
.pie h4{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--encendido);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie a{text-decoration:none;transition:color .2s ease}
.pie a:hover{color:var(--encendido)}
.pie-redes{display:flex;gap:10px;margin-top:18px}
.pie-redes a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,244,220,.09);color:#B4BAC9;transition:background-color .2s ease,color .2s ease;
}
.pie-redes a:hover{background:rgba(255,244,220,.2);color:var(--encendido)}
.pie-redes svg{width:19px;height:19px}
.pie-abajo{padding-top:24px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- 17. FLOTANTE ---------- */
.flotante{
  position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;text-decoration:none;
  box-shadow:0 8px 26px rgba(37,211,102,.44);transition:transform .2s ease;
  opacity:0;visibility:hidden;
}
.flotante.visible{opacity:1;visibility:visible}
.flotante:hover{transform:scale(1.08)}
.flotante svg{width:29px;height:29px;fill:#fff}

/* ---------- 18. REVELADO ---------- */
.revelar{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.revelar.visto{opacity:1;transform:none}

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