/* ============ TOKENS ============ */
:root{
  --sun:#f1df5c; --paper:#ece7da; --galaxy:#4b23b8; --emerald:#0b6b4c; --carmine:#c8102e; --ink:#111111; --cream:#f3eee4;
  --girasol:#ffbd21;   /* el fondo del primer capítulo de la portada */
  --bg:var(--girasol); --fg:var(--ink); --navfg:var(--ink);   /* app.js los mueve con el scroll */
  --pad:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-anchor:none}
body{background:var(--ink);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
a{color:inherit}

/* grano de impresión por encima de todo */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);color:var(--navfg);transition:color .3s;
}
.logo{font-weight:900;font-stretch:125%;font-size:20px;letter-spacing:-.01em;text-decoration:none}
.nav ul{display:flex;gap:28px;list-style:none;padding:0}
.nav ul a,.bag{font:500 12px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;position:relative}
.nav ul a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:currentColor;transition:right .25s}
.nav ul a:hover::after{right:0}
.bag{padding:9px 16px;border:1.5px solid currentColor;border-radius:99px}
.nav-der{display:flex;align-items:center;gap:10px}
.menu-btn,.menu-movil{display:none}

/* ============ WALLPAPER ============ */
.stage{height:840vh;position:relative;background:var(--bg)}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;color:var(--fg);background:var(--bg)}
#ribbon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* fondo de la portada: color + textura de imprenta ya dibujada; el barrido recorta la capa de arriba */
.pane{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--bg);will-change:clip-path;overflow:hidden}
/* el detalle de cada color, con movimiento sutil (solo transform/opacity: lo mueve la tarjeta gráfica) */
.pane .fx{position:absolute;inset:0;display:none}
.pane[data-tex="luz"] .fx-luz,.pane[data-tex="stars"] .fx-stars,.pane[data-tex="topo"] .fx-topo,.pane[data-tex="dots"] .fx-dots,.pane[data-tex="waves"] .fx-waves{display:block}
.fx canvas{position:absolute;inset:0;width:100%;height:100%}
/* girasol: reflejos de luz (la red la dibuja app.js) con vida propia: la red, quieta y tenue; cada pocos segundos un brillo
   la recorre y la enciende tramo a tramo (la misma red encima, visible solo donde pasa el brillo). Los bordes, en un amarillo más hondo */
.fx-luz .foco{position:absolute;inset:0;background:radial-gradient(ellipse 80% 90% at 50% 42%,transparent 38%,rgba(232,108,0,.45) 100%)}
.fx-luz .reflejos{position:absolute;inset:0}
.fx-luz .reflejos i{position:absolute;inset:0;background-size:440px;background-position:center;opacity:.2}
.fx-luz .reflejos i + i{opacity:1;
  -webkit-mask:linear-gradient(112deg,transparent 34%,rgba(0,0,0,.55) 44%,#000 50%,rgba(0,0,0,.55) 56%,transparent 66%) 0 0/320% 100% no-repeat;
  mask:linear-gradient(112deg,transparent 34%,rgba(0,0,0,.55) 44%,#000 50%,rgba(0,0,0,.55) 56%,transparent 66%) 0 0/320% 100% no-repeat;
  animation:brillo 5s cubic-bezier(.4,0,.4,1) infinite}
@keyframes brillo{0%{-webkit-mask-position:100% 0;mask-position:100% 0}62%,100%{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes spin{to{transform:rotate(1turn)}}
/* galaxia: el cielo deriva, una segunda capa de estrellas parpadea y cruza alguna estrella fugaz */
.fx-stars canvas{inset:-3%;width:106%;height:106%;animation:drift 50s ease-in-out infinite alternate}
.fx-stars .twinkle{animation:drift 50s ease-in-out infinite alternate,twinkle 2.6s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-2.4%,-1.6%)}}
@keyframes twinkle{from{opacity:.15}to{opacity:1}}
.shoot{
  position:absolute;height:2px;border-radius:2px;opacity:0;transform-origin:100% 50%;transform:rotate(var(--a));
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));box-shadow:0 0 8px rgba(255,255,255,.55);
  animation:shoot 1.15s cubic-bezier(.25,.6,.35,1) forwards;
}
@keyframes shoot{12%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(420px)}}
/* petróleo: las curvas de nivel fluyen y respiran muy despacio */
.fx-topo canvas{inset:-10%;width:120%;height:120%;animation:flow 26s ease-in-out infinite alternate}
/* y encima, un radar suave: aros tenues, un barrido que gira desde el centro (la cápsula) y los pocos negocios que va encendiendo */
.radar{position:absolute;inset:0;overflow:hidden}
.radar .aros,.radar .barrido{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%}
.radar .aros{background:repeating-radial-gradient(circle,transparent 0 calc(13vmin - 1.5px),rgba(243,238,228,.1) calc(13vmin - 1.5px) 13vmin),
  linear-gradient(90deg,transparent calc(50% - .75px),rgba(243,238,228,.05) 0 calc(50% + .75px),transparent 0),linear-gradient(0deg,transparent calc(50% - .75px),rgba(243,238,228,.05) 0 calc(50% + .75px),transparent 0)}
.radar .barrido{background:conic-gradient(from 0deg,rgba(243,238,228,0) 0 300deg,rgba(243,238,228,.042) 330deg,rgba(243,238,228,.14) 358.6deg,rgba(243,238,228,.525) 359.3deg,rgba(243,238,228,0) 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.45) 40%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.45) 40%,transparent 62%);animation:spin 6s linear infinite}
.radar .blip{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#f3eee4;box-shadow:0 0 10px 2px rgba(243,238,228,.45);opacity:0;animation:blip 6s ease-out infinite backwards}
.radar .blip::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #f3eee4;animation:inherit;animation-name:bliparo}
@keyframes blip{0%{opacity:1;transform:scale(1.3)}12%{opacity:.9;transform:scale(1)}55%,100%{opacity:0;transform:scale(.7)}}
@keyframes bliparo{0%{opacity:.9;transform:scale(.6)}30%,100%{opacity:0;transform:scale(3.2)}}
@keyframes flow{to{transform:translate(2.6%,-2.2%) rotate(1.8deg) scale(1.045)}}
/* negro: una franja de luz tenue barre la trama de arriba abajo, como un escáner */
.fx-dots .scan{position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(transparent,rgba(243,238,228,.07) 50%,transparent);animation:scan 7.5s linear infinite}
@keyframes scan{to{transform:translateY(350%)}}
/* carmín (redes sociales): corazones que suben y se apagan, como en un directo; dos capas a distinto ritmo y
   balanceándose. Los mismos en su tarjeta, en su pregunta de la auditoría (.ct-waves) */
.fx-waves,.ct-waves .ct{-webkit-mask:linear-gradient(0deg,transparent,#000 22%,#000 62%,transparent);mask:linear-gradient(0deg,transparent,#000 22%,#000 62%,transparent)}
.fx-waves::before,.fx-waves::after,.ct-waves .ct::before,.ct-waves .ct::after{content:'';position:absolute;left:-10%;right:-10%;top:0;height:calc(100% + var(--ty));background:var(--img) 0 0/var(--tx) var(--ty);animation:sube var(--v) linear infinite,balanceo 3.4s ease-in-out infinite alternate}
.fx-waves::before,.ct-waves .ct::before{--img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='280'%3E%3Cpath fill='%23f3eee4' fill-opacity='0.5' transform='translate%2830 40%29 rotate%28-12%29 scale%280.917%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%23f3eee4' fill-opacity='0.34' transform='translate%28140 22%29 rotate%2810%29 scale%280.583%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%23f3eee4' fill-opacity='0.42' transform='translate%2896 122%29 rotate%286%29 scale%281.250%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%23f3eee4' fill-opacity='0.55' transform='translate%28172 166%29 rotate%28-8%29 scale%280.750%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%23f3eee4' fill-opacity='0.36' transform='translate%2838 212%29 rotate%2814%29 scale%280.667%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='%23f3eee4' fill-opacity='0.46' transform='translate%28122 246%29 rotate%28-4%29 scale%281.000%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");--tx:200px;--ty:280px;--v:9s}
.fx-waves::after,.ct-waves .ct::after{--img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='340'%3E%3Cpath fill='none' stroke='%23f3eee4' stroke-opacity='0.5' stroke-width='1.48' transform='translate%2870 60%29 rotate%288%29 scale%281.083%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='none' stroke='%23f3eee4' stroke-opacity='0.45' stroke-width='1.92' transform='translate%28200 110%29 rotate%28-10%29 scale%280.833%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='none' stroke='%23f3eee4' stroke-opacity='0.4' stroke-width='2.13' transform='translate%2840 190%29 rotate%28-6%29 scale%280.750%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='none' stroke='%23f3eee4' stroke-opacity='0.42' stroke-width='1.20' transform='translate%28150 250%29 rotate%2812%29 scale%281.333%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath fill='none' stroke='%23f3eee4' stroke-opacity='0.5' stroke-width='2.74' transform='translate%28230 300%29 rotate%280%29 scale%280.583%29 translate%28-12 -12%29' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");--tx:260px;--ty:340px;--v:14s;animation-delay:0s,-1.7s}
.fx-waves::before{--tx:360px;--ty:504px;--v:12s}
.fx-waves::after{--tx:468px;--ty:612px;--v:19s}
@keyframes sube{to{transform:translateY(calc(-1 * var(--ty)))}}
@keyframes balanceo{to{translate:14px 0}}
#paneB{clip-path:inset(0 100% 0 0)}
/* marcas de corte de imprenta en las esquinas */
.marks{position:absolute;inset:0;pointer-events:none}
.marks i{position:absolute;width:26px;height:26px;z-index:3;border:0 solid currentColor;opacity:.7}
.marks i:nth-child(1){top:74px;left:var(--pad);border-width:1.5px 0 0 1.5px}
.marks i:nth-child(2){top:74px;right:var(--pad);border-width:1.5px 1.5px 0 0}
.marks i:nth-child(3){bottom:110px;left:var(--pad);border-width:0 0 1.5px 1.5px}
.marks i:nth-child(4){bottom:110px;right:var(--pad);border-width:0 1.5px 1.5px 0}
.wordmark{
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-stretch:125%;font-size:min(17.5vw,36vh);line-height:.8;letter-spacing:-.025em;
  user-select:none;position:relative;z-index:1;
  grid-area:1/1;   /* el titular y su copia comparten celda: el navegador los centra igual siempre */
  animation:in 1.1s cubic-bezier(.2,.8,.2,1) both,hue 9s linear infinite;
}
/* cada letra lleva su franja espectral (a la altura de los «ojos», como un visor):
   así se pueden mover por separado en la salida del final */
.wordmark > span{
  display:inline-block;flex-shrink:0;   /* el hueco de la cápsula nunca se encoge */
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,var(--wfg,var(--fg)) 0 45%,#35f2ff 45%,#8f7bff 48.5%,#ff4fd8 51.5%,#ffd23f 55%,var(--wfg,var(--fg)) 55% 100%);
}
.wordmark > span.slot{background:none}
/* copia del titular con el color siguiente: mismo tamaño y sitio que el original */
.wordmark-over{margin:0;visibility:hidden}   /* misma celda que el original (grid-area), sin medidas fijas */
/* hue-rotate no toca el negro ni el crema: solo hace girar la franja */
@keyframes hue{to{filter:hue-rotate(360deg)}}
.slot{display:inline-block;width:.6em;height:.7em}
.slot.end{width:.8em;margin-left:.06em}   /* al final de la palabra la cápsula no tiene letra al otro lado: más aire */
.slot.mid{width:1.02em;margin-inline:.1em}   /* SEO/GEO: la cápsula sustituye a la barra, separada de las dos letras */
@keyframes in{from{opacity:0;transform:scale(.94)}}
#pill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* destellos horizontales de luz */
.streaks{position:absolute;inset:0;pointer-events:none;z-index:3}
.streaks i{
  position:absolute;top:var(--y);left:var(--l);width:var(--w);height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,#35f2ff 18%,#fff 42%,#ff4fd8 68%,#ffd23f 82%,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.55);mix-blend-mode:screen;
  animation:streak 6.5s var(--t) cubic-bezier(.3,.6,.3,1) infinite;
}
@keyframes streak{0%{opacity:0;transform:translateX(-12%) scaleX(.4)}12%{opacity:calc(.55 + .4*var(--dark,0))}35%{opacity:.25}55%,100%{opacity:0;transform:translateX(14%) scaleX(1)}}
.side{position:absolute;z-index:3;top:50%;writing-mode:vertical-rl;opacity:.8}
.side-l{left:var(--pad);transform:translateY(-50%) rotate(180deg)}
.side-r{right:var(--pad);transform:translateY(-50%)}

.chapter{position:absolute;left:var(--pad);bottom:clamp(20px,4vh,40px);display:flex;align-items:flex-end;gap:14px;z-index:3}
.ch-n{font-weight:900;font-stretch:125%;font-size:clamp(44px,6vw,84px);line-height:.8}
.chapter div{display:flex;flex-direction:column;gap:4px;padding-bottom:4px}
.chapter span:not(.ch-n){font-size:clamp(15px,1.4vw,19px);font-weight:600}
.chapter.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(14px)}}
.dots{position:absolute;left:50%;bottom:clamp(26px,4.5vh,46px);transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots i{width:9px;height:9px;border-radius:99px;border:1.5px solid currentColor;transition:width .3s,background .3s}
.dots i.on{width:28px;background:currentColor}
.scroll{position:absolute;right:var(--pad);bottom:clamp(26px,4.5vh,46px);z-index:3;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ============ TIRA ============ */
.tape{background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;padding-block:16px;border-block:1.5px solid #2a2a2a}
.tape-track{display:inline-flex;animation:tape 26s linear infinite;font-weight:900;font-stretch:125%;font-size:clamp(22px,3vw,40px);text-transform:uppercase}
.tape-track span{padding-inline:24px}
.tape-track b{color:var(--sun)}
@keyframes tape{to{transform:translateX(-50%)}}

/* ============ SERVICIOS: TARJETAS QUE GIRAN ============ */
.servicios{background:var(--ink);color:var(--cream);padding:clamp(70px,10vw,140px) var(--pad)}
/* la tarjeta tiene que caber entera en la pantalla: el ancho de la fila sale también del alto de la ventana
   (cada tarjeta mide 1,533 veces su ancho de alto; como mucho, el alto visible menos el menú y un margen) y nunca
   baja de 280 px por tarjeta. El título de la sección va alineado con la fila */
.servicios{--cols:4;--hueco:clamp(12px,1.6vw,24px);--fila:max(calc(var(--cols) * 280px + (var(--cols) - 1) * var(--hueco)),calc(var(--cols) * (100svh - 130px) / 1.5333 + (var(--cols) - 1) * var(--hueco)))}
.sec-head,.flips{max-width:var(--fila);margin-inline:auto}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,60px)}
.sec-head h2{font-weight:900;font-stretch:125%;font-size:clamp(46px,8vw,132px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;text-align:right}
.hint-touch{display:none}
@media (hover:none){.hint-hover{display:none}.hint-touch{display:inline}}

/* Tarjetas en vertical. Todo lo de dentro se mide en cqw (ancho de la tarjeta): crece y encoge con ella */
.flips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hueco)}
.flip{perspective:1600px;cursor:pointer;outline:none;border-radius:26px}
.flip:focus-visible{box-shadow:0 0 0 3px var(--cream)}
.flip-in{position:relative;aspect-ratio:3/4.6;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.flip:hover .flip-in{transform:rotateY(180deg)}}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:26px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;isolation:isolate}

/* ---- cara delantera: el color de su capítulo, su detalle en movimiento y su cápsula ---- */
.front{background:var(--c);color:var(--on);display:flex;flex-direction:column;padding:7%}
.f-top{display:flex;justify-content:space-between;font-size:max(10px,3cqw);opacity:.75}
.f-cap{position:absolute;left:21%;top:13%;width:58%;height:auto;rotate:-3deg;filter:drop-shadow(0 4cqw 5cqw rgba(0,0,0,.28));animation:bobcap 6.5s ease-in-out infinite;pointer-events:none;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bobcap{50%{transform:translateY(-5%) rotate(7deg)}}
.f-txt{margin-top:auto;display:grid;gap:3.4cqw;position:relative}
.f-txt h3{display:grid;justify-items:start;font-weight:900;font-stretch:125%;font-size:12.4cqw;line-height:.86;letter-spacing:-.02em;animation:hue 9s linear infinite}
/* la franja espectral de la portada, en cada línea del título */
.f-txt h3 span{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,var(--on) 0 45%,#35f2ff 45%,#8f7bff 48.5%,#ff4fd8 51.5%,#ffd23f 55%,var(--on) 55% 100%)}
.f-txt p{font-size:max(14px,4.7cqw);font-weight:600;line-height:1.25;max-width:15em}
.turn{justify-self:start;padding:.6em 1.05em;border:1.5px solid currentColor;border-radius:99px;font-size:max(10px,3cqw)}

/* el detalle de fondo, el mismo que en la portada (solo transform/opacity) */
.ct{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ct-stars .ct{background:radial-gradient(circle at 22% 18%,rgba(255,79,216,.3),transparent 52%),radial-gradient(circle at 88% 88%,rgba(53,242,255,.22),transparent 55%)}
.ct-stars .ct::before,.ct-stars .ct::after{
  content:'';position:absolute;inset:-8%;
  background-image:radial-gradient(1.4px 1.4px at 14% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 62% 12%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 84% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 36% 76%,rgba(255,255,255,.8) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 48% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 8% 90%,#fff 50%,transparent 51%);
  background-size:170px 210px;animation:drift 40s ease-in-out infinite alternate;
}
.ct-stars .ct::after{background-size:120px 140px;background-position:40px 70px;opacity:.75;animation:drift 34s ease-in-out infinite alternate-reverse,twinkle 2.4s ease-in-out infinite alternate}
.ct .fall{position:absolute;top:16%;left:52%;width:36%;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 8px rgba(255,255,255,.6);transform-origin:100% 50%;rotate:26deg;opacity:0;animation:fall 7s 1.2s cubic-bezier(.25,.6,.35,1) infinite}
@keyframes fall{0%{opacity:0;transform:translateX(-70%)}2%{opacity:1}13%,100%{opacity:0;transform:translateX(120%)}}
.ct-topo .ct::before{content:'';position:absolute;inset:-20%;background-image:repeating-radial-gradient(ellipse 120% 90% at 15% 85%,transparent 0 13px,rgba(243,238,228,.15) 13px 14px),repeating-radial-gradient(ellipse 110% 90% at 95% 5%,transparent 0 17px,rgba(243,238,228,.1) 17px 18px);animation:flow 22s ease-in-out infinite alternate}
.ct-dots .ct{background-image:radial-gradient(circle,rgba(243,238,228,.22) 32%,transparent 36%);background-size:9px 9px;-webkit-mask:radial-gradient(ellipse at 50% 36%,transparent 8%,#000 70%);mask:radial-gradient(ellipse at 50% 36%,transparent 8%,#000 70%)}
.ct-dots .ct::after{content:'';position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(transparent,rgba(243,238,228,.12) 50%,transparent);animation:scan 6s linear infinite}

/* ---- cara de atrás: arriba el ejemplo animado sobre el color; abajo, la explicación ---- */
.back{transform:rotateY(180deg);background:var(--cream);color:var(--ink);display:grid;grid-template-rows:50% 1fr}
.b-top{position:relative;isolation:isolate;background:var(--c);color:var(--on);padding:6cqw 6cqw 0;display:flex;flex-direction:column;z-index:1}
.b-label{display:flex;justify-content:space-between;align-items:center;font-size:max(10px,3cqw)}
.b-label .ej{padding:.35em .8em;border:1px solid currentColor;border-radius:99px;opacity:.8}
.b-txt{padding:11cqw 6.5cqw 6cqw;display:flex;flex-direction:column;gap:2.8cqw;min-height:0;overflow:hidden}
.que{font-size:max(12px,4.25cqw);line-height:1.3}
.incl{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1.6cqw}
.incl li{font-size:max(9.5px,2.75cqw);padding:.45em .85em;border-radius:99px;border:1.5px solid var(--c);color:var(--c)}
.ideal{font-size:max(11px,3.6cqw);line-height:1.35;opacity:.85}
.lo-quiero{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:.85em 1.2em;border-radius:99px;background:var(--c);color:var(--on);text-decoration:none;font:500 max(10px,3.1cqw) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s}
.lo-quiero span{transition:transform .25s}
.lo-quiero:hover{background:var(--k);color:#fff}
.lo-quiero:hover span{transform:translateX(5px)}
[style*="--k:#f1df5c"] .lo-quiero:hover{color:var(--ink)}

/* el ejemplo: una escena pequeña que se repite, centrada en la zona de color. Arranca al girar la tarjeta (.go, app.js);
   sin animación (movimiento reducido) se ve el último fotograma, que es el estado normal de cada pieza */
.demo{position:relative;width:100%;margin:auto 0;font-size:3.3cqw;line-height:1.25;color:var(--ink)}
.demo-web,.demo-seo{background:#fff;border-radius:1.1em;box-shadow:0 1.6em 2.8em -1.3em rgba(0,0,0,.6)}

/* WEBS: la página se monta, el cursor reserva y llega el aviso */
.demo-web .bar{display:flex;align-items:center;gap:.4em;padding:.7em .85em;border-bottom:1px solid #eee}
.demo-web .bar i{width:.65em;height:.65em;border-radius:50%;background:#e8468f;flex:none}
.demo-web .bar i:nth-child(2){background:#f1df5c}.demo-web .bar i:nth-child(3){background:#0b6b4c}
.demo-web .url{margin-left:.4em;flex:1;display:flex;align-items:center;gap:.35em;font:500 .82em 'DM Mono',monospace;color:#555;background:#f3f3f3;padding:.35em .7em;border-radius:99px;white-space:nowrap;overflow:hidden}
.demo-web .url svg{width:1em;height:1em;fill:none;stroke:#0b6b4c;stroke-width:1.3;flex:none}
.demo-web .load{position:absolute;left:0;right:0;top:2.6em;height:2px;background:linear-gradient(90deg,#4b23b8,#e8468f);transform-origin:left;opacity:0}
.demo-web .pg{padding:.75em;display:grid;gap:.6em}
.demo-web .pg-hero{border-radius:.8em;padding:.95em 1em 1em;background:radial-gradient(circle at 88% 15%,rgba(232,70,143,.6),transparent 55%),linear-gradient(135deg,#4b23b8,#26117a);color:#fff;display:grid;gap:.25em;justify-items:start}
.demo-web .pg-hero b{font-weight:900;font-stretch:115%;font-size:1.45em;line-height:1}
.demo-web .pg-hero > span{font-size:.88em;opacity:.85}
.demo-web .cta{position:relative;margin-top:.5em;font-style:normal;font-weight:800;font-size:.95em;padding:.5em 1em;border-radius:99px;background:#f1df5c;color:#111}
.demo-web .cursor{position:absolute;left:68%;top:52%;width:1.75em;height:1.75em;fill:#111;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.demo-web .pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.demo-web .pg-tiles i{height:2.5em;border-radius:.6em;background:#ece7fa}
.demo-web .pg-tiles i:nth-child(2){background:#fde2ee}.demo-web .pg-tiles i:nth-child(3){background:#f7f0c6}
.demo-web .toast{position:absolute;right:-.7em;top:3.3em;background:#0b6b4c;color:#fff;font-weight:800;font-size:.95em;padding:.55em .9em;border-radius:.75em;box-shadow:0 .8em 1.4em -.6em rgba(0,0,0,.55)}
.demo-web .speed{position:absolute;left:-.8em;top:-1.15em;background:#f1df5c;color:#111;font-weight:800;font-size:.9em;padding:.45em .85em;border-radius:99px;rotate:-6deg;box-shadow:0 .6em 1.1em -.5em rgba(0,0,0,.5)}
.flip.go .demo-web .load{animation:w-load 7s infinite both}
.flip.go .demo-web .pg-hero{animation:w-in 7s infinite both}
.flip.go .demo-web .pg-tiles i{animation:w-tile 7s infinite both}
.flip.go .demo-web .pg-tiles i:nth-child(2){animation-delay:.12s}.flip.go .demo-web .pg-tiles i:nth-child(3){animation-delay:.24s}
.flip.go .demo-web .cursor{animation:w-cur 7s infinite both}
.flip.go .demo-web .cta{animation:w-click 7s infinite both}
.flip.go .demo-web .toast{animation:w-toast 7s infinite both}
.flip.go .demo-web .speed{animation:w-speed 7s infinite both}
@keyframes w-load{0%{opacity:1;transform:scaleX(0)}10%{opacity:1;transform:scaleX(1)}14%,100%{opacity:0;transform:scaleX(1)}}
@keyframes w-in{0%,6%{opacity:0;transform:translateY(.8em)}15%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes w-tile{0%,13%{opacity:0;transform:scale(.7)}20%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes w-cur{0%,24%{opacity:0;transform:translate(5em,4em)}28%{opacity:1}42%{transform:none}44.5%{transform:scale(.78)}47%,84%{opacity:1;transform:none}90%,100%{opacity:0}}
@keyframes w-click{0%,43%{transform:none;box-shadow:0 0 0 0 rgba(241,223,92,.8)}45%{transform:scale(.9)}50%{transform:none;box-shadow:0 0 0 .9em rgba(241,223,92,0)}100%{transform:none}}
@keyframes w-toast{0%,48%{opacity:0;transform:translateY(-.6em) scale(.9)}53%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes w-speed{0%,11%{opacity:0;transform:scale(.4)}16%,93%{opacity:1;transform:none}100%{opacity:0}}

/* SEO/GEO: escribe la búsqueda, el negocio sube al 1.º y la IA lo recomienda */
.demo-seo{padding:.85em;display:grid;gap:.6em;font-size:3.1cqw}
.demo-seo .q{display:flex;align-items:center;gap:.55em;padding:.55em .9em;border-radius:99px;border:1px solid #e2e2e2;box-shadow:0 .2em .7em rgba(0,0,0,.08);font-size:.95em}
.demo-seo .q svg{width:1em;height:1em;fill:none;stroke:#0b6b4c;stroke-width:2.2;flex:none}
.demo-seo .typed{white-space:nowrap;border-right:1.5px solid #0b6b4c;padding-right:.1em}
.demo-seo .serp{list-style:none;padding:0;position:relative;height:8.1em}
.demo-seo .r{position:absolute;left:0;right:0;height:2.5em;display:flex;align-items:center;gap:.5em;padding:0 .75em;border-radius:.7em;background:#f5f5f3;color:#888;font-size:.95em}
.demo-seo .r b{font-weight:700;color:#555}
.demo-seo .r span{margin-left:auto;font-size:.85em}
.demo-seo .r.me{top:0;background:#e1f3ea;color:#0b6b4c;box-shadow:inset 0 0 0 1.5px #0b6b4c}
.demo-seo .r.me b{color:#0b6b4c;font-weight:800}
.demo-seo .r.me span{color:#e2a100}
.demo-seo .r.ra{top:2.8em}.demo-seo .r.rb{top:5.6em}
.demo-seo .r em{position:absolute;right:-.6em;top:-.7em;font-style:normal;font-weight:900;font-size:.85em;background:#e2562a;color:#fff;padding:.25em .55em;border-radius:99px;rotate:6deg}
.demo-seo .ai{display:flex;gap:.55em;align-items:flex-start;padding:.65em .8em;border-radius:1em 1em 1em .25em;background:#0b6b4c;color:#fff;line-height:1.3;font-size:.95em}
.demo-seo .ai .mono{font-size:.7em;background:#f3eee4;color:#0b6b4c;padding:.2em .45em;border-radius:.4em;flex:none;margin-top:.15em}
.flip.go .demo-seo .typed{animation:s-type 8s infinite both}
.flip.go .demo-seo .r.ra{animation:s-down 8s infinite both}
.flip.go .demo-seo .r.rb{animation:s-down 8s .1s infinite both}
.flip.go .demo-seo .r.me{animation:s-up 8s .2s infinite both}
.flip.go .demo-seo .r em{animation:s-badge 8s infinite both}
.flip.go .demo-seo .ai{animation:s-ai 8s infinite both}
.flip.go .demo-seo .ai p{animation:s-aitype 8s infinite both}
@keyframes s-type{0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(20,end)}17%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes s-down{0%,18%{opacity:0;transform:translateY(-2.2em)}23%,33%{opacity:1;transform:translateY(-2.8em)}46%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s-up{0%,18%{opacity:0;transform:translateY(6.2em);background:#f5f5f3;box-shadow:inset 0 0 0 0 #0b6b4c}23%,33%{opacity:1;transform:translateY(5.6em);background:#f5f5f3;box-shadow:inset 0 0 0 0 #0b6b4c}46%,94%{opacity:1;transform:none;background:#e1f3ea;box-shadow:inset 0 0 0 1.5px #0b6b4c}100%{opacity:0}}
@keyframes s-badge{0%,47%{opacity:0;transform:scale(.3)}52%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s-ai{0%,56%{opacity:0;transform:translateY(.7em)}61%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s-aitype{0%,60%{clip-path:inset(0 100% 0 0)}61%{animation-timing-function:steps(24,end);clip-path:inset(0 100% 0 0)}78%,100%{clip-path:inset(0 0 0 0)}}

/* REDES: antes → después, llueven corazones, sube el contador y entran mensajes */
@property --likes{syntax:'<integer>';inherits:false;initial-value:1248}
.demo-redes{width:50%;margin-inline:auto;font-size:2.8cqw}
.demo-redes .phone{position:relative;background:#fff;border-radius:1.5em;border:.45em solid #141414;overflow:hidden;box-shadow:0 1.6em 2.8em -1.3em rgba(0,0,0,.65)}
.demo-redes .st{display:flex;gap:.25em;padding:.55em .6em 0}
.demo-redes .st i{flex:1;height:.22em;border-radius:9px;background:#e6e6e6;overflow:hidden}
.demo-redes .st i::after{content:'';display:block;height:100%;background:#c8102e;transform-origin:left}
.demo-redes .st i:nth-child(3)::after{transform:scaleX(0)}
.demo-redes .who{display:flex;align-items:center;gap:.45em;padding:.5em .6em;font-size:.82em}
.demo-redes .who i{width:1.6em;height:1.6em;border-radius:50%;background:conic-gradient(#c8102e,#f1df5c,#e8468f,#c8102e);border:2px solid #fff;outline:1.5px solid #c8102e;flex:none}
.demo-redes .who span{margin-left:auto;font-weight:800;color:#c8102e}
.demo-redes .pic{position:relative;aspect-ratio:1/.92;overflow:hidden;font:900 1.05em 'Archivo',sans-serif;font-stretch:125%;letter-spacing:.06em;color:#fff}
.demo-redes .pic span{position:absolute;inset:0;display:grid;place-items:center}
.demo-redes .antes{background:repeating-linear-gradient(135deg,#9a9a9a 0 .6em,#8d8d8d .6em 1.2em)}
.demo-redes .despues{background:radial-gradient(circle at 70% 25%,#f1df5c,transparent 45%),linear-gradient(135deg,#c8102e,#e8468f 60%,#ff9a3c)}
.demo-redes .wipe{position:absolute;top:0;bottom:0;left:100%;width:2px;background:#fff;box-shadow:0 0 .6em #fff;opacity:0}
.demo-redes .acts{display:flex;align-items:center;gap:.45em;padding:.5em .65em .6em;font-weight:800;font-size:.88em}
.demo-redes .heart{color:#c8102e;font-size:1.25em;line-height:1;display:inline-block}
.demo-redes .cnt{counter-reset:likes var(--likes)}
.demo-redes .cnt::after{content:counter(likes) ' me gusta'}
.demo-redes .hrt{position:absolute;left:16%;bottom:16%;font-size:1.3em;color:#ff4f7a;opacity:0;pointer-events:none}
.demo-redes .hrt::before{content:'♥'}
.demo-redes .hrt:nth-child(3){color:#f1df5c}.demo-redes .hrt:nth-child(4){color:#fff}.demo-redes .hrt:nth-child(5){color:#e8468f}.demo-redes .hrt:nth-child(6){color:#ff4f7a}
.demo-redes .noti{position:absolute;white-space:nowrap;font-weight:700;font-size:.82em;padding:.55em .85em;border-radius:.85em;box-shadow:0 .8em 1.4em -.6em rgba(0,0,0,.55)}
.demo-redes .n1{right:-34%;top:26%;background:#fff;color:#111;border-bottom-left-radius:.2em}
.demo-redes .n2{left:-30%;top:52%;background:#141414;color:#fff;border-bottom-right-radius:.2em}
.flip.go .demo-redes .st i:nth-child(2)::after{animation:r-story 7s linear infinite both}
.flip.go .demo-redes .despues{animation:r-wipe 7s infinite both}
.flip.go .demo-redes .wipe{animation:r-line 7s infinite both}
.flip.go .demo-redes .heart{animation:r-heart 7s infinite both}
.flip.go .demo-redes .cnt{animation:r-likes 7s infinite both}
.flip.go .demo-redes .hrt{animation:r-float 7s infinite both}
.flip.go .demo-redes .hrt:nth-child(2){--dx:-1.6em}.flip.go .demo-redes .hrt:nth-child(3){--dx:.8em;animation-delay:.18s}.flip.go .demo-redes .hrt:nth-child(4){--dx:2.2em;animation-delay:.34s}.flip.go .demo-redes .hrt:nth-child(5){--dx:-.4em;animation-delay:.5s}.flip.go .demo-redes .hrt:nth-child(6){--dx:3.2em;animation-delay:.66s}
.flip.go .demo-redes .n1{animation:r-noti 7s infinite both}
.flip.go .demo-redes .n2{animation:r-noti2 7s infinite both}
@keyframes r-story{0%{transform:scaleX(0)}94%,100%{transform:scaleX(1)}}
@keyframes r-wipe{0%,8%{clip-path:inset(0 100% 0 0)}26%,100%{clip-path:inset(0 0 0 0)}}
@keyframes r-line{0%,8%{opacity:1;left:0}26%{opacity:1;left:100%}30%,100%{opacity:0;left:100%}}
@keyframes r-heart{0%,30%{transform:none}33%{transform:scale(1.6)}37%,100%{transform:none}}
@keyframes r-likes{0%,31%{--likes:0}62%,100%{--likes:1248}}
@keyframes r-float{0%,31%{opacity:0;transform:translate(0,0) scale(.5)}35%{opacity:1}70%,100%{opacity:0;transform:translate(var(--dx,0),-8em) scale(1.25)}}
@keyframes r-noti{0%,42%{opacity:0;transform:translateX(1em) scale(.9)}47%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes r-noti2{0%,54%{opacity:0;transform:translateX(-1em) scale(.9)}59%,92%{opacity:1;transform:none}97%,100%{opacity:0}}

/* AGENTES DE IA: conversación a las 3 de la madrugada, con «escribiendo…» antes de cada respuesta */
.demo-ia{background:#17171c;color:#f3eee4;border-radius:1.1em;border:1px solid rgba(243,238,228,.14);box-shadow:0 1.6em 2.8em -1.3em rgba(0,0,0,.8)}
.demo-ia .top{display:flex;align-items:center;gap:.5em;padding:.6em .8em;background:#212128;border-radius:1.1em 1.1em 0 0;font-size:.82em}
.demo-ia .av{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:#f1df5c;color:#111;font-weight:900;flex:none}
.demo-ia .top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-ia .on{margin-left:auto;color:#6be39a;font-size:.85em;white-space:nowrap}
.demo-ia .on::before{content:'';display:inline-block;width:.5em;height:.5em;border-radius:50%;background:currentColor;margin-right:.35em}
.demo-ia .msgs{display:grid;gap:.42em;padding:.6em .75em .85em}
.demo-ia .hora{justify-self:center;display:flex;align-items:center;gap:.4em;font-size:.7em;opacity:.6}
.demo-ia .hora svg{width:1.1em;height:1.1em;fill:currentColor}
.demo-ia .msg{position:relative;max-width:86%;padding:.48em .8em;border-radius:1em;font-size:.93em;line-height:1.28}
.demo-ia .msg.u{justify-self:end;background:#f1df5c;color:#111;border-bottom-right-radius:.25em}
.demo-ia .msg.b{--bub:#2b2b34;justify-self:start;background:var(--bub);border-bottom-left-radius:.25em}
.demo-ia .msg.ok{--bub:#0b6b4c;color:#fff;font-weight:800}
.demo-ia .msg .dots{position:absolute;left:0;top:50%;translate:0 -50%;display:flex;gap:.28em;padding:.62em .75em;border-radius:1em 1em 1em .25em;background:#2b2b34;opacity:0}
.demo-ia .msg .dots i{width:.42em;height:.42em;border-radius:50%;background:#f3eee4}
.demo-ia .zz{position:absolute;right:-.6em;top:-1.1em;background:#f1df5c;color:#111;font-weight:800;font-size:.85em;padding:.4em .8em;border-radius:99px;rotate:5deg;box-shadow:0 .6em 1.1em -.5em rgba(0,0,0,.6)}
.flip.go .demo-ia .m1{animation:i-m1 9s infinite both}
.flip.go .demo-ia .m2{animation:i-m2 9s infinite both,i-bg2 9s infinite both}
.flip.go .demo-ia .m2 .tx{animation:i-m2t 9s infinite both}
.flip.go .demo-ia .m2 .dots{animation:i-m2d 9s infinite both}
.flip.go .demo-ia .m3{animation:i-m3 9s infinite both}
.flip.go .demo-ia .m4{animation:i-m4 9s infinite both,i-bg4 9s infinite both}
.flip.go .demo-ia .m4 .tx{animation:i-m4t 9s infinite both}
.flip.go .demo-ia .m4 .dots{animation:i-m4d 9s infinite both}
.flip.go .demo-ia .dots i{animation:i-dot .9s ease-in-out infinite}
.flip.go .demo-ia .dots i:nth-child(2){animation-delay:.15s}.flip.go .demo-ia .dots i:nth-child(3){animation-delay:.3s}
.flip.go .demo-ia .zz{animation:i-zz 9s infinite both}
@keyframes i-m1{0%,5%{opacity:0;transform:translateY(.6em) scale(.94)}9%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes i-m2{0%,14%{opacity:0;transform:translateY(.6em) scale(.94)}18%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes i-m2t{0%,29%{opacity:0}33%,100%{opacity:1}}
@keyframes i-m2d{0%,16%{opacity:0}18%,28%{opacity:1}31%,100%{opacity:0}}
@keyframes i-m3{0%,40%{opacity:0;transform:translateY(.6em) scale(.94)}44%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes i-m4{0%,50%{opacity:0;transform:translateY(.6em) scale(.94)}54%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes i-m4t{0%,65%{opacity:0}69%,100%{opacity:1}}
@keyframes i-m4d{0%,52%{opacity:0}54%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes i-bg2{0%,30%{background-color:transparent}33%,100%{background-color:var(--bub)}}
@keyframes i-bg4{0%,66%{background-color:transparent}69%,100%{background-color:var(--bub)}}
@keyframes i-dot{50%{transform:translateY(-.3em);opacity:.5}}
@keyframes i-zz{0%,72%{opacity:0;transform:scale(.5) rotate(-10deg)}77%,94%{opacity:1;transform:none}100%{opacity:0}}

/* 4 en fila mientras cada tarjeta mida unos 275 px; si no, 2 (sin hacerse enormes) y en el móvil, 1 */
@media (max-width:1439px){.servicios{--cols:2}.flips{grid-template-columns:repeat(2,minmax(0,1fr))}.sec-head,.flips{max-width:min(1000px,var(--fila))}}   /* cuatro en fila solo si la letra cabe */
@media (max-width:680px){.servicios{--cols:1}.flips{grid-template-columns:minmax(0,1fr)}.sec-head,.flips{max-width:min(440px,var(--fila))}.sec-head h2{text-align:left}}
@media (max-width:359px){.back{grid-template-rows:46% 1fr}.demo{font-size:3cqw}.demo-seo{font-size:2.85cqw}.demo-redes{font-size:2.55cqw;width:46%}}   /* la letra no baja de su mínimo */
/* tarjeta estrecha: fuera las etiquetas, que el botón siempre quepa */
@container (max-width:290px){.incl{display:none}}

/* ============ AUDITORÍA GRATIS ============ */
/* Un escenario en el que solo existe el paso actual y, mientras cambia, el que entra recortado en un círculo que nace del clic.
   Todo se mide en --u, que sale del ancho Y del alto de la ventana: cada pantalla cabe entera también en una pantalla ancha y baja */
.aud{--u:min(1vw,1.72vh);--u:min(1vw,1.72svh);--alto:max(100vh,560px);--alto:max(100svh,560px);--barra:calc(var(--u)*6);position:relative;background:var(--ink)}
.aud-esc{display:grid;min-width:0;overflow-anchor:none}
.st{--tc:var(--cream);grid-area:1/1;align-self:start;position:relative;isolation:isolate;overflow:hidden;display:none;min-width:0;min-height:var(--alto);background:var(--c,var(--ink));color:var(--cream)}
.st.on,.st.in{display:grid}
.st.on{z-index:1}
.st.in{z-index:2;animation:au-in .85s cubic-bezier(.65,0,.35,1) both}
@keyframes au-in{from{clip-path:circle(0 at var(--x,50%) var(--y,50%))}to{clip-path:circle(var(--rf,160%) at var(--x,50%) var(--y,50%))}}
/* titulares con la franja de la portada (la tilde y la «¿» quedan dentro de la caja pintada) */
.aud .tx{white-space:nowrap;padding:.2em 0 .14em;margin:-.2em 0 -.14em;color:transparent;-webkit-background-clip:text;background-clip:text;background-color:var(--tc);
  background-image:linear-gradient(180deg,var(--tc) 0 45%,#35f2ff 45%,#8f7bff 48.5%,#ff4fd8 51.5%,#ffd23f 55%,var(--tc) 55% 100%);
  background-size:100% calc(100% - .34em);background-position:0 .2em;background-repeat:no-repeat;animation:hue 9s linear infinite}
.au-tit,.au-h{display:grid;row-gap:.15em;justify-items:start;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.03em;line-height:.86}
.au-tit{font-size:min(calc(var(--u)*7.4),4.9vw)}
.au-h{font-size:calc(min(calc(var(--u)*5.4),4.2vw)*var(--k,1))}
.au-izq{display:grid;align-content:center;justify-items:start;gap:calc(var(--u)*1.7);min-width:0}
.au-k{display:inline-block;padding:.55em 1em;border:1.5px solid currentColor;border-radius:99px;font:500 max(11px,calc(var(--u)*1.02)) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.au-ay{font-size:max(15px,calc(var(--u)*1.6));line-height:1.35;opacity:.85;max-width:27em}
.au-ob{width:calc(var(--u)*10.4);height:auto;margin-top:calc(var(--u)*.4);rotate:-10deg;filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.4) rgba(0,0,0,.4));pointer-events:none}
.au-go{display:inline-flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);padding:max(15px,calc(var(--u)*1.75)) max(22px,calc(var(--u)*2.6));border:0;border-radius:99px;background:var(--ink);color:var(--sun);font:500 max(13px,calc(var(--u)*1.2)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 18px 30px -18px rgba(0,0,0,.7);transition:background .2s,color .2s,transform .15s,opacity .2s}
.au-go span{font-size:1.3em;transition:transform .25s}
.au-go:hover:not(:disabled){background:var(--galaxy);color:#fff}
.au-go:hover:not(:disabled) span{transform:translateX(6px)}
.au-go:active:not(:disabled){transform:scale(.97)}
.au-go:disabled{opacity:.4;cursor:default}
.au-go:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.au-go[hidden]{display:none}

/* entrada */
.st-ent{--tc:var(--ink);background:var(--cream);color:var(--ink);grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:calc(var(--u)*5);padding:calc(76px + var(--u)) var(--pad) calc(var(--u)*3)}
.au-kick{display:flex;flex-wrap:wrap;gap:8px;font-size:max(11px,calc(var(--u)*1.02))}
.au-kick span{padding:.6em 1.05em;border:1.5px solid currentColor;border-radius:99px}
.au-kick span:first-child{background:var(--ink);color:var(--sun);border-color:var(--ink)}
.au-kick #audQuiero{background:var(--c);color:var(--cream);border-color:var(--c)}
.au-lead{font-size:max(16px,calc(var(--u)*1.75));line-height:1.4;max-width:31em}
.au-start{display:flex;flex-wrap:wrap;align-items:flex-end;gap:calc(var(--u)*1.2) calc(var(--u)*2);width:100%;margin-top:calc(var(--u)*.6)}
.au-web{display:grid;gap:6px;flex:1 1 240px;max-width:calc(var(--u)*36)}
.au-web .mono{font-size:max(10.5px,calc(var(--u)*.95));opacity:.7}
.au-web i{font-style:normal;opacity:.7}
.au-web input{width:100%;padding:.4em 0 .5em;border:0;border-bottom:2.5px solid var(--ink);background:transparent;color:var(--ink);font:700 max(18px,calc(var(--u)*1.85)) 'Archivo',sans-serif;border-radius:0}
.au-web input::placeholder{color:rgba(17,17,17,.3)}
.au-web input:focus{outline:none;border-bottom-color:var(--galaxy)}
.au-sigue{justify-self:start;border:0;background:none;color:var(--galaxy);font-size:max(11px,calc(var(--u)*1));cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.au-sigue[hidden]{display:none}
.st-ent.vacia .au-franjas{visibility:hidden}

/* preguntas: cada área en el color y con la textura de su servicio */
.st-q{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:calc(var(--u)*5);padding:calc(76px + var(--u)) var(--pad) calc(var(--barra) + var(--u)*1.5)}
.st.ct-luz{--c:var(--girasol);--tc:var(--ink);color:var(--ink)}
.ct-luz .ct{background:var(--reflejos,none) center/440px;opacity:.2}
.au-der{display:grid;align-content:center;gap:calc(var(--u)*1.3);min-width:0}
.au-ops{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.2)}
.au-ops.tres{grid-template-columns:repeat(3,1fr)}
.au-op{display:grid;grid-template-rows:auto 1fr auto;gap:calc(var(--u)*.4);min-height:calc(var(--u)*15.5);padding:calc(var(--u)*1.7) calc(var(--u)*1.9);border:0;border-radius:calc(var(--u)*2.2);background:var(--cream);color:var(--ink);text-align:left;font:inherit;cursor:pointer;box-shadow:0 22px 40px -26px rgba(0,0,0,.75);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .3s}
.au-ops.tres .au-op{min-height:calc(var(--u)*11)}
.au-op i{width:max(26px,calc(var(--u)*3));height:max(26px,calc(var(--u)*3));border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font:500 max(11px,calc(var(--u)*1.05)) 'DM Mono',monospace;font-style:normal;transition:background .2s,color .2s}
.au-op b{grid-row:3;align-self:end;font-weight:900;font-stretch:112%;font-size:max(17px,calc(var(--u)*2));line-height:1.02;letter-spacing:-.01em}
.au-op small{grid-row:4;font-size:max(13px,calc(var(--u)*1.3));line-height:1.25;opacity:.65}
.au-op:hover{transform:translateY(-5px) rotate(-.8deg);box-shadow:0 30px 46px -24px rgba(0,0,0,.85)}
.au-op:hover i{background:var(--ink);color:var(--cream)}
.au-op.sel{background:var(--sun);transform:scale(.97)}
.au-op.sel i{background:var(--ink);color:var(--sun)}
.au-op:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
/* etiquetas */
.au-et{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1)}
.au-chip{padding:max(11px,calc(var(--u)*1.25)) max(16px,calc(var(--u)*2.1));border:2px solid currentColor;border-radius:99px;background:transparent;color:inherit;font:800 max(15px,calc(var(--u)*1.85)) 'Archivo',sans-serif;font-stretch:108%;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.au-chip:hover{transform:translateY(-3px)}
.au-chip.sel{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.st.ct-luz .au-chip.sel{background:var(--ink);border-color:var(--ink);color:var(--sun)}
.au-chip:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.st.ct-luz .au-chip:focus-visible{outline-color:var(--ink)}
.au-sig{justify-self:end}
.ct-dots > .au-der .au-sig{background:var(--sun);color:var(--ink)}
.ct-dots > .au-der .au-sig:hover:not(:disabled){background:var(--cream);color:var(--ink)}
/* Redes: botones blancos con la letra del color del fondo; lo marcado y Seguir, en girasol. Sin activar, Seguir es solo su contorno: medio transparente, el amarillo sobre rojo daba naranja */
.st.ct-waves .au-chip{background:#fff;border-color:#fff;color:var(--c)}
.st.ct-waves .au-chip.sel{background:var(--girasol);border-color:var(--girasol);color:var(--ink)}
.ct-waves > .au-der .au-sig{background:var(--girasol);color:var(--ink)}
.ct-waves > .au-der .au-sig:hover:not(:disabled){background:#fff;color:var(--c)}
.ct-waves > .au-der .au-sig:disabled{opacity:1;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);color:#fff}
/* lo que se abre en el sitio al decir «Sí» */
.au-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.au-sub.ab{grid-template-rows:1fr}
.au-sub > div{min-height:0;overflow:hidden}
.au-sub-in{display:grid;gap:calc(var(--u)*1.2);padding:calc(var(--u)*1.7) calc(var(--u)*2);border-radius:calc(var(--u)*2.2);background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.18)}
.au-sub-in h4{font-weight:800;font-stretch:112%;font-size:max(16px,calc(var(--u)*1.8));line-height:1.1}
.au-est{display:flex;gap:calc(var(--u)*.3)}
.au-est button{padding:0;border:0;background:none;color:rgba(243,238,228,.25);font-size:max(30px,calc(var(--u)*3.4));line-height:1;cursor:pointer;transition:color .15s,transform .15s}
.au-est button.on{color:var(--sun)}
.au-est button:hover{transform:scale(1.14)}
.au-est button:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:6px}
.au-rs{display:grid;grid-template-columns:repeat(4,1fr);border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.5);overflow:hidden}
.au-rs button{padding:max(10px,calc(var(--u)*1)) 4px;border:0;border-left:1.5px solid rgba(243,238,228,.3);background:none;color:inherit;font:500 max(11px,calc(var(--u)*1.05)) 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.au-rs button:first-child{border-left:0}
.au-rs button.on{background:var(--sun);color:var(--ink)}
.au-rs button:focus-visible{outline:2px solid var(--sun);outline-offset:-3px}
/* deslizador: el valor, enorme, cambia mientras arrastras */
.au-sl{display:grid;gap:calc(var(--u)*1.2)}
.au-sl output{font-weight:900;font-stretch:125%;font-size:max(30px,calc(var(--u)*5));line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.au-sl input{-webkit-appearance:none;appearance:none;width:100%;height:calc(var(--u)*3.8);margin:0;background:none;cursor:pointer}
.au-sl input::-webkit-slider-runnable-track{height:calc(var(--u)*1.3);border-radius:99px;background:linear-gradient(90deg,var(--sun) var(--p,0%),rgba(243,238,228,.22) var(--p,0%))}
.au-sl input::-moz-range-track{height:calc(var(--u)*1.3);border-radius:99px;background:linear-gradient(90deg,var(--sun) var(--p,0%),rgba(243,238,228,.22) var(--p,0%))}
.au-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--u)*3.8);height:calc(var(--u)*3.8);margin-top:calc(var(--u)*-1.25);border:calc(var(--u)*.35) solid var(--ink);border-radius:50%;background:var(--sun);box-shadow:0 8px 16px rgba(0,0,0,.45)}
.au-sl input::-moz-range-thumb{width:calc(var(--u)*3.1);height:calc(var(--u)*3.1);border:calc(var(--u)*.35) solid var(--ink);border-radius:50%;background:var(--sun);box-shadow:0 8px 16px rgba(0,0,0,.45)}
.au-sl input:focus-visible{outline:2px solid var(--sun);outline-offset:4px;border-radius:99px}
.au-sl-l{display:flex;justify-content:space-between;gap:8px;font:500 max(10.5px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
/* tu negocio */
.au-gr{display:grid;gap:calc(var(--u)*.8);min-width:0}
.au-gr > span{font:500 max(10.5px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.au-gr .au-chip{padding:max(9px,calc(var(--u)*.95)) max(14px,calc(var(--u)*1.7));font-size:max(14px,calc(var(--u)*1.55))}
.au-gr input{width:100%;padding:.35em 0 .45em;border:0;border-bottom:2.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 max(17px,calc(var(--u)*1.85)) 'Archivo',sans-serif}
.au-gr input::placeholder{color:rgba(17,17,17,.38)}
.au-gr input:focus{outline:none;border-bottom-color:var(--galaxy)}
/* progreso: las franjas, tumbadas */
.au-bar{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:0;height:var(--barra);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*2);transition:color .4s}
.au-bar[hidden]{display:none}
.au-bar{animation:au-entra .4s .45s both}
@keyframes au-entra{from{opacity:0}}
.au-atras{padding:.6em 1em;border:1.5px solid currentColor;border-radius:99px;background:none;color:inherit;font-size:max(11px,calc(var(--u)*1));cursor:pointer;transition:background .2s,color .2s}
.au-atras:hover{background:var(--cream);color:var(--ink)}
.au-rail{display:block;height:max(10px,calc(var(--u)*1))}
.au-queda{min-width:8.5em;text-align:right;font-size:max(11px,calc(var(--u)*1));white-space:nowrap}
.au-scan{position:absolute;z-index:6;top:calc(76px + var(--u)*.4);right:var(--pad);display:flex;align-items:center;gap:.8em;padding:.6em 1em;border-radius:99px;background:rgba(0,0,0,.42);color:var(--cream);font-size:max(10.5px,calc(var(--u)*.95));letter-spacing:.04em;text-transform:none}
.au-scan[hidden]{display:none}
.au-scan::before{content:'';width:.7em;height:.7em;border-radius:50%;background:var(--sun);box-shadow:0 0 .7em var(--sun);animation:au-pulso 1.1s ease-in-out infinite}
.au-scan.ok::before{background:#3ddc84;box-shadow:none;animation:none}
@keyframes au-pulso{50%{opacity:.25}}

/* las cuatro franjas: mapa → progreso → columnas de la nota. Un solo elemento que cambia de sitio y de forma */
.au-fr{position:absolute;z-index:6;left:var(--fl,0);top:var(--ft,0);width:var(--fw,0);height:var(--fh,0);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:calc(var(--u)*.7)}
.au-fr[hidden]{display:none}
.au-fr.vuelo{transition:left .95s cubic-bezier(.65,0,.2,1),top .95s cubic-bezier(.65,0,.2,1),width .95s cubic-bezier(.65,0,.2,1),height .95s cubic-bezier(.65,0,.2,1),gap .95s,grid-template-columns .95s}
.fr{position:relative;isolation:isolate;height:100%;min-width:0;padding:0;border:0;border-radius:99px;background:var(--trk,rgba(243,238,228,.2));color:var(--cream);font:inherit;pointer-events:none;transition:background .5s,border-radius .7s}
.au-fr.vuelo .fr{transition:height 1s cubic-bezier(.2,.8,.2,1),background .5s,border-radius .7s}
.au-fr.vuelo .fr:nth-child(2){transition-delay:.08s}.au-fr.vuelo .fr:nth-child(3){transition-delay:.16s}.au-fr.vuelo .fr:nth-child(4){transition-delay:.24s}
.fr .ct{border-radius:inherit;opacity:0;transition:opacity .5s}
.fr-ll{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);min-width:0;border-radius:inherit;background:var(--c);box-shadow:0 0 0 1.5px rgba(243,238,228,.3);transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.fr.ahora .fr-ll{background:var(--sun);box-shadow:none}
.fr.ahora{box-shadow:0 0 0 1.5px currentColor}
.fr-ll[style*="0%"]{box-shadow:none}
.fr-n,.fr-t,.fr-ob{position:absolute;opacity:0;pointer-events:none}
.au-fr:not([data-modo="cols"]) :is(.fr-n,.fr-t,.fr-ob){display:none}
/* como mapa */
.au-fr[data-modo="mapa"]{gap:0}
.au-fr[data-modo="mapa"] .fr{background:var(--c);border-radius:0}
.au-fr[data-modo="mapa"] .fr:first-child{border-radius:calc(var(--u)*2.6) 0 0 calc(var(--u)*2.6)}
.au-fr[data-modo="mapa"] .fr:last-child{border-radius:0 calc(var(--u)*2.6) calc(var(--u)*2.6) 0}
.au-fr[data-modo="mapa"] .fr .ct{opacity:1}
.au-fr[data-modo="mapa"] .fr-ll{opacity:0}
/* como marcador: suben a la tarjeta del informe, una bajo otra, y se llenan hasta la nota de cada área */
.au-fr[data-modo="cols"]{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);align-items:stretch;gap:calc(var(--u)*.75)}
.au-fr[data-modo="cols"] .fr{height:auto;min-height:0;overflow:hidden;border-radius:calc(var(--u)*1.4);background:rgba(243,238,228,.08);pointer-events:auto;cursor:pointer}
.au-fr[data-modo="cols"] .fr.ct-dots{--ll:#3a3a40}
.au-fr[data-modo="cols"] .fr-ll{right:auto;z-index:-2;width:calc(var(--v)*1%);opacity:1;border-radius:inherit;background:var(--ll,var(--c));box-shadow:none;transition:none;animation:au-llena 1.25s cubic-bezier(.2,.8,.2,1) .75s both}
.au-fr[data-modo="cols"] .fr .ct{right:auto;width:calc(var(--v)*1%);opacity:1;animation:au-llena 1.25s cubic-bezier(.2,.8,.2,1) .75s both}
.au-fr[data-modo="cols"] .fr.sel{box-shadow:0 0 0 2.5px var(--sun)}
.au-fr[data-modo="cols"] .fr:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.au-fr[data-modo="cols"] .fr-ob{left:calc(var(--u)*.9);top:50%;width:calc(var(--u)*3.9);margin-top:calc(var(--u)*-1.95);opacity:1;filter:drop-shadow(0 calc(var(--u)*.3) calc(var(--u)*.4) rgba(0,0,0,.5));animation:au-ob .6s cubic-bezier(.2,1.5,.4,1) 1s both}
.au-fr[data-modo="cols"] .fr-t{left:calc(var(--u)*5.6);top:50%;translate:0 -50%;opacity:1;font-size:max(11px,calc(var(--u)*1.1));font-style:normal;white-space:nowrap;transition:opacity .4s .9s}
.au-fr[data-modo="cols"] .fr.sel .fr-t{color:#fff}
.au-fr[data-modo="cols"] .fr-n{right:calc(var(--u)*1.5);top:50%;translate:0 -50%;opacity:1;font-weight:900;font-stretch:120%;font-size:calc(var(--u)*2.8);line-height:1;transition:opacity .4s .8s}
@keyframes au-llena{from{width:0}}
@keyframes au-ob{from{opacity:0;transform:scale(.3) translateY(30%)}to{opacity:1;transform:none}}

/* informe */
.st-inf{--c:var(--ink);overflow:clip}
.st-inf.on,.st-inf.in{display:block}
.inf-b1{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:calc(var(--u)*3);min-height:var(--alto);padding:calc(76px + var(--u)*.2) var(--pad) calc(var(--u)*3.4);background:var(--c)}
/* la pantalla se pinta del color de lo que más urge */
.inf-b1 > .ct{opacity:1}
.inf-nota{display:grid;justify-items:start;gap:calc(var(--u)*1);min-width:0}
.inf-primero{padding:.55em 1.1em;border-radius:99px;background:#fff;color:#111;font-size:max(11px,calc(var(--u)*1.05));letter-spacing:.08em;text-transform:uppercase}
.inf-num{position:relative;display:flex;align-items:flex-end;gap:.08em;margin:0 0 calc(var(--u)*.4) calc(var(--u)*-.8);font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*30),15vw);line-height:.86;letter-spacing:-.04em}
.inf-num.cien{font-size:min(calc(var(--u)*22),11vw)}
.inf-num small{padding-bottom:1.2em;font:500 max(14px,calc(var(--u)*1.7)) 'DM Mono',monospace;letter-spacing:.06em;white-space:nowrap;opacity:.85}
.inf-ob{position:absolute;left:100%;top:-6%;width:calc(var(--u)*14);margin-left:calc(var(--u)*-3.5);filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.5) rgba(0,0,0,.45));rotate:8deg;animation:au-flota 4.5s ease-in-out infinite}
@keyframes au-flota{50%{translate:0 calc(var(--u)*-.5)}}
.inf-fr{font-weight:800;font-stretch:110%;font-size:max(18px,calc(var(--u)*2.3));line-height:1.13;max-width:19em}
.inf-meta{font-size:max(10.5px,calc(var(--u)*1));line-height:1.65;opacity:.8}
.inf-marc{position:relative;display:grid;gap:calc(var(--u)*1.3);min-width:0;padding:calc(var(--u)*2);border-radius:calc(var(--u)*2.6);background:#0f0f10;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 calc(var(--u)*3) calc(var(--u)*5) calc(var(--u)*-2.6) rgba(0,0,0,.75)}
.inf-slot{display:grid;height:calc(var(--u)*23.4);min-width:0}
.inf-cols{min-height:0}
.inf-pq{display:grid;align-content:start;gap:calc(var(--u)*.55);min-width:0;min-height:calc(var(--u)*9.6)}
.inf-pq h3{font-weight:900;font-stretch:115%;font-size:max(17px,calc(var(--u)*1.8));line-height:1.04}
.inf-pq ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.4) calc(var(--u)*1.4)}
.inf-pq li{display:grid;grid-template-columns:1.1em minmax(0,1fr);gap:.2em;font-size:max(13px,calc(var(--u)*1.22));line-height:1.28}
.inf-pq li b{font-weight:900}
.inf-pq li.mas b{color:#3ddc84}.inf-pq li.menos b{color:#ff6b5e}
.inf-pq li em{margin-left:.5em;font:500 .68em 'DM Mono',monospace;font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.inf-pq small{margin-top:calc(var(--u)*.3);font-size:max(10px,calc(var(--u)*.88));opacity:.5}
.inf-sig{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*-1.6);display:inline-flex;align-items:center;gap:.8em;padding:.95em 1.5em;border-radius:99px;background:var(--sun);color:var(--ink);font-size:max(11.5px,calc(var(--u)*1.05));text-decoration:none;box-shadow:0 10px 20px -10px rgba(0,0,0,.7);transition:background .2s,transform .15s}
.inf-sig:hover{background:var(--cream);color:var(--ink);transform:translateY(-2px)}
.inf-sig:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.inf-b2{display:grid;gap:calc(var(--u)*2.4);padding:calc(76px + var(--u)) var(--pad) calc(var(--u)*5)}
.inf-h{grid-auto-flow:column;column-gap:.35em;justify-content:start}
.inf-plan{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.4)}
.pl{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:1fr auto auto auto;gap:calc(var(--u)*.7);min-height:calc(var(--u)*24);padding:calc(var(--u)*2.2) calc(var(--u)*2.4) calc(var(--u)*2.4);border-radius:calc(var(--u)*2.4);background:var(--c);color:var(--cream)}
.pl.ct-dots{box-shadow:inset 0 0 0 1.5px rgba(243,238,228,.2)}
.pl-n{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*5.6);line-height:.9}
.pl-a{font-size:max(10.5px,calc(var(--u)*.98));opacity:.8}
.pl b{max-width:88%;font-weight:900;font-stretch:112%;font-size:max(19px,calc(var(--u)*2.3));line-height:1.05}
.pl p{max-width:30em;font-size:max(14px,calc(var(--u)*1.4));line-height:1.3;opacity:.85}
.pl-ob{position:absolute;z-index:-1;right:calc(var(--u)*-.6);top:calc(var(--u)*-.6);width:calc(var(--u)*10);rotate:8deg;filter:drop-shadow(0 calc(var(--u)*.8) calc(var(--u)*1) rgba(0,0,0,.35))}
.inf-med{display:grid;gap:calc(var(--u)*.9)}
.inf-med[hidden]{display:none}
.inf-med > .mono{font-size:max(10.5px,calc(var(--u)*.98));color:var(--sun)}
.inf-med > .mono i{margin-left:.8em;font-style:normal;color:var(--cream);opacity:.6;text-transform:none;letter-spacing:.02em}
.inf-med > div{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.7)}
.inf-med div span{display:inline-flex;align-items:center;gap:.55em;padding:.5em .95em;border-radius:99px;background:rgba(243,238,228,.08);font-size:max(13px,calc(var(--u)*1.25))}
.inf-med div span::before{content:'';width:.6em;height:.6em;border-radius:50%;background:var(--d,#3ddc84)}
.inf-med div .m{--d:#ffb547}.inf-med div .r{--d:#ff6b5e}
/* el cierre: el mismo amarillo con el que ha empezado. Título, conversación en un móvil y la ficha que se va rellenando con lo que contestas */
.inf-b3{--tc:var(--ink);--tel:calc(var(--u)*31);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) var(--tel) minmax(0,.82fr);align-items:center;gap:calc(var(--u)*5);height:var(--alto);padding:calc(70px + var(--u)*.2) var(--pad) calc(var(--u)*1.6);background:var(--girasol);color:var(--ink)}
.inf-b3 > .ct{background:var(--reflejos,none) center/440px;opacity:.2}
.cb-izq{display:grid;justify-items:start;gap:calc(var(--u)*1.6);min-width:0}
.cb-k{padding:.55em 1em;border-radius:99px;background:var(--ink);color:var(--sun);font-size:max(10.5px,calc(var(--u)*.98))}
.inf-b3 .au-h{font-size:calc(var(--u)*7.2*var(--k,1))}
.cb-l{max-width:25em;font-size:max(15px,calc(var(--u)*1.7));line-height:1.35}
.cb-bts{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.7);margin-top:calc(var(--u)*.6)}
.cb-bt{padding:.75em 1.3em;border:0;border-radius:99px;background:var(--ink);color:var(--sun);font:500 max(10.5px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.cb-bt + .cb-bt{background:none;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.cb-bt:hover{background:#fff;color:var(--ink);box-shadow:none}
.cb-bt:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cb-telw{position:relative;height:100%;perspective:calc(var(--u)*120);min-height:0}
.cb-ob{position:absolute;z-index:0;right:calc(var(--u)*-9);top:calc(var(--u)*2);width:calc(var(--u)*14);rotate:12deg;filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.4) rgba(70,35,0,.55));animation:au-flota 4.5s ease-in-out infinite;pointer-events:none}
.cb-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tel{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:calc(var(--u)*3.6);background:#0c0c0e;color:var(--cream);box-shadow:inset 0 0 0 calc(var(--u)*.55) #26262b,inset 0 0 0 calc(var(--u)*.68) #000,calc(var(--u)*-1.6) calc(var(--u)*2.6) calc(var(--u)*3.6) calc(var(--u)*-1.6) rgba(70,35,0,.8);transform:rotateY(var(--ry,-3deg)) rotateX(var(--rx,1deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tel-luz{position:absolute;z-index:3;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,transparent calc(var(--lz,50%) - 22%),rgba(255,255,255,.07) var(--lz,50%),transparent calc(var(--lz,50%) + 22%))}
.tel-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*1.5) calc(var(--u)*1.7) calc(var(--u)*.9);background:#17171b;box-shadow:0 1px 0 rgba(243,238,228,.1)}
.tel-av{display:grid;place-items:center;width:calc(var(--u)*3.1);height:calc(var(--u)*3.1);border-radius:50%;background:var(--girasol);color:var(--ink);font-weight:900;font-stretch:125%;font-size:calc(var(--u)*1.5)}
.tel-qn{display:grid;line-height:1.1}
.tel-qn b{font-weight:900;font-stretch:118%;font-size:max(14px,calc(var(--u)*1.4))}
.tel-qn small{font-size:max(11px,calc(var(--u)*.98));color:#6be39a}
.tel-h{font-size:max(9.5px,calc(var(--u)*.82));opacity:.5}
.tel-msgs{display:grid;align-content:start;gap:calc(var(--u)*.6);min-height:0;padding:calc(var(--u)*1) calc(var(--u)*1.3);overflow-y:auto;scrollbar-width:none}
.tel-msgs::-webkit-scrollbar{display:none}
.tm{max-width:86%;padding:.5em .85em;border-radius:1.05em;font-size:max(14px,calc(var(--u)*1.32));line-height:1.28;animation:tm-entra .34s cubic-bezier(.2,1.3,.4,1) both;transform-origin:0 100%}
@keyframes tm-entra{from{opacity:0;transform:translateY(.7em) scale(.92)}}
.tm.b{justify-self:start;background:#2b2b31;border-bottom-left-radius:.28em}
.tm.u{justify-self:end;background:var(--girasol);color:var(--ink);font-weight:700;border-bottom-right-radius:.28em;transform-origin:100% 100%}
.tm.u.mal{background:#ffb4ac;text-decoration:line-through}
.tm.tm-ok{background:var(--emerald);color:#fff;font-weight:700}
.tm-esc{display:flex;gap:.3em;padding:.72em .85em}
.tm-esc i{width:.45em;height:.45em;border-radius:50%;background:var(--cream);animation:i-dot .9s ease-in-out infinite}
.tm-esc i:nth-child(2){animation-delay:.15s}.tm-esc i:nth-child(3){animation-delay:.3s}
.tm-inf{padding:calc(var(--u)*.35);width:100%;max-width:92%}
.tm-c{--tc:var(--cream);position:relative;isolation:isolate;overflow:hidden;display:grid;gap:calc(var(--u)*.45);padding:calc(var(--u)*1) calc(var(--u)*1.1);border-radius:.85em;background:var(--c);color:var(--cream)}
.tm-c .ct{opacity:1}
.tm-c .mono{font-size:max(9.5px,calc(var(--u)*.84))}
.tm-c b{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*5);line-height:.9;letter-spacing:-.04em}
.tm-c small{margin-left:.35em;font:500 max(11px,calc(var(--u)*1)) 'DM Mono',monospace;letter-spacing:.04em}
.tm-bs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*.3)}
.tm-bs i{height:max(6px,calc(var(--u)*.55));border-radius:9px;background:linear-gradient(90deg,var(--sun) calc(var(--v)*1%),rgba(243,238,228,.22) calc(var(--v)*1%))}
.tel-pie{min-height:calc(var(--u)*6);padding:calc(var(--u)*.7) calc(var(--u)*1.3) calc(var(--u)*1.5)}
.tel-ops{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:calc(var(--u)*.45);animation:tm-entra .34s both}
.tel-op{padding:.52em .95em;border:0;border-radius:99px;background:#fff;color:var(--ink);font:700 max(13.5px,calc(var(--u)*1.25)) 'Archivo',sans-serif;cursor:pointer;transition:background .2s,transform .15s}
.tel-op.pri{background:var(--girasol)}
.tel-op:hover{transform:translateY(-2px)}
.tel-op:focus-visible,.tel-in button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.tel-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.3) calc(var(--u)*.3) calc(var(--u)*.3) calc(var(--u)*1.2);border-radius:99px;background:#232328;animation:tm-entra .34s both}
.tel-in input{min-width:0;padding:.3em 0;border:0;background:none;color:var(--cream);font:600 16px 'Archivo',sans-serif}
.tel-in input:focus{outline:none}
.tel-in button{display:grid;place-items:center;width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);min-width:36px;min-height:36px;border:0;border-radius:50%;background:var(--girasol);color:var(--ink);font-size:18px;cursor:pointer}
.cb-vuelo{position:fixed;z-index:88;margin:0;pointer-events:none}
.cb-fi{display:grid;justify-items:center;min-width:0}
.fi{position:relative;width:min(100%,calc(var(--u)*36));border-radius:calc(var(--u)*1.7);background:var(--cream);color:var(--ink);box-shadow:0 calc(var(--u)*2.4) calc(var(--u)*3.4) calc(var(--u)*-2) rgba(70,35,0,.75);rotate:2.5deg;transition:rotate .6s cubic-bezier(.2,1.5,.4,1)}
.fi-top{--tc:var(--cream);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*1);padding:calc(var(--u)*1.5) calc(var(--u)*1.7);border-radius:calc(var(--u)*1.7) calc(var(--u)*1.7) 0 0;background:var(--c);color:var(--cream)}
.fi-top .ct{opacity:1}
.fi-top .mono{max-width:9em;font-size:max(10px,calc(var(--u)*.92));line-height:1.3}
.fi-top b{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*4.6);line-height:.86;letter-spacing:-.04em}
.fi-top small{margin-left:.3em;font:500 max(10.5px,calc(var(--u)*.92)) 'DM Mono',monospace;letter-spacing:.04em}
.fi-ls{display:grid;gap:calc(var(--u)*.2);padding:calc(var(--u)*1.1) calc(var(--u)*1.7) calc(var(--u)*.6)}
.fi-l{display:grid;grid-template-columns:calc(var(--u)*7) minmax(0,1fr);align-items:center;gap:calc(var(--u)*.6);min-height:calc(var(--u)*3.2);border-bottom:1.5px dashed rgba(17,17,17,.22)}
.fi-l .mono{font-size:max(9.5px,calc(var(--u)*.86));color:var(--c);opacity:.95}
.fi-l b{overflow:hidden;font-weight:800;font-stretch:108%;font-size:max(14px,calc(var(--u)*1.45));text-overflow:ellipsis;white-space:nowrap}
.fi-l.llega b{animation:fi-llega .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes fi-llega{from{transform:scale(1.25);color:var(--galaxy)}}
.fi-pie{display:flex;justify-content:space-between;gap:1em;padding:calc(var(--u)*.2) calc(var(--u)*1.7) calc(var(--u)*1.2);font-size:max(9px,calc(var(--u)*.78));opacity:.55}
.fi-sello{position:absolute;right:calc(var(--u)*-1.6);bottom:calc(var(--u)*-5);width:min(calc(var(--u)*12.5),34%);opacity:0;scale:2.2;rotate:-24deg}
.inf-b3.hecho .fi-sello{animation:au-sello .5s cubic-bezier(.3,1.4,.5,1) .3s forwards}
.inf-b3.hecho .fi{rotate:-1.5deg}
@keyframes au-sello{to{opacity:1;scale:1;rotate:12deg}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:980px){
  .aud{--u:clamp(9px,2.4vw,13px);--barra:64px}
  .st-ent,.st-q{grid-template-columns:minmax(0,1fr);align-content:start;gap:calc(var(--u)*3);padding-top:92px}
  .st-q{padding-bottom:calc(var(--barra) + 18px)}
  .au-tit{font-size:clamp(34px,10.4vw,72px)}
  .au-h{font-size:calc(clamp(30px,9.4vw,64px)*var(--k,1))}
  .au-ob{display:none}
  .au-franjas{min-height:300px}
  .au-scan{top:68px}
  .inf-b1{grid-template-columns:minmax(0,1fr);gap:26px;padding:92px var(--pad) 40px}
  .inf-num{justify-self:stretch;margin-left:0;font-size:clamp(110px,32vw,190px)}
  .inf-num.cien{font-size:clamp(84px,25vw,150px)}
  .inf-num small{padding-bottom:.9em}
  .inf-ob{left:auto;right:-4px;top:-20%;width:clamp(64px,20vw,110px);margin:0}
  .inf-marc{padding:14px}
  .inf-slot{height:clamp(236px,62vw,320px)}
  .inf-pq ul{grid-template-columns:minmax(0,1fr)}
  .inf-sig{position:static;justify-content:space-between;padding:1.15em 1.6em;font-size:13px}
  .inf-plan{grid-template-columns:minmax(0,1fr)}
  .pl{min-height:0}
  .inf-h{grid-auto-flow:row}
  .inf-b3{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:auto;min-height:var(--alto);gap:18px;padding:84px var(--pad) 78px}
  .inf-b3 .au-h{font-size:calc(clamp(30px,9vw,54px)*var(--k,1))}
  .cb-k{display:none}
  .cb-l{font-size:15px}
  .cb-bts{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;justify-content:center;margin:0}
  .cb-bt{font-size:11px}
  .cb-telw{height:70svh;perspective:none}
  .cb-ob,.cb-fi{display:none}
  .tel{border-radius:26px;transform:none}
  .tel-top{padding:12px 16px 10px}
  .tel-av{width:34px;height:34px;font-size:15px}
  .tel-msgs{padding:10px 12px;gap:7px}
  .tm-c b{font-size:44px}
  .tel-pie{padding:8px 12px 14px;min-height:56px}
  .tel-in{padding:3px 3px 3px 14px}
}
@media (max-width:560px){
  .au-ops{grid-template-columns:minmax(0,1fr)}
  .au-ops.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .au-op,.au-ops.tres .au-op{min-height:0}
  .au-ops:not(.tres) .au-op{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;padding:13px 16px}
  .au-ops:not(.tres) .au-op i{grid-row:span 2}
  .au-ops:not(.tres) .au-op b{grid-row:auto}
  .au-ops:not(.tres) .au-op small{grid-row:auto;grid-column:2}
  .au-ops.tres .au-op{padding:12px;gap:14px}
  .au-ops.tres .au-op b{font-size:16px}
  .au-queda{display:none}
  .au-sl-l span:not(:first-child):not(:last-child){display:none}
  .fj-q{right:10px;width:auto;font-size:16px}
  .au-bar{grid-template-columns:auto minmax(0,1fr)}
}

/* ============ SELLO ============ */
/* sello redondo: el anillo de texto gira despacio; en el centro, la marca */
.sello .s-bg{fill:var(--ink)}
.sello .s-in{fill:none;stroke:var(--sun);stroke-width:1.5;stroke-dasharray:2 5}
.sello .s-txt{fill:var(--sun);font:500 15.5px 'DM Mono',monospace;letter-spacing:1px}
.sello .s-mid{fill:var(--cream);font:900 30px 'Archivo',sans-serif;font-stretch:125%;letter-spacing:-.5px}
.sello .s-rot{transform-origin:100px 100px;animation:spin 24s linear infinite}

/* ============ PIE ============ */
/* un índice a toda pantalla: la fila que tocas se llena de su color desde donde entra el ratón y sale su objeto */
.pe{--u:min(1vw,1.72vh);--u:min(1vw,1.72svh);--alto:max(100vh,560px);--alto:max(100svh,560px);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr)) auto;height:var(--alto);padding-top:calc(68px + var(--u)*.2);background:var(--ink);color:var(--cream)}
.ix{position:relative;isolation:isolate;display:grid;grid-template-columns:calc(var(--u)*4.4) auto minmax(0,1fr) calc(var(--u)*14) auto;align-items:center;gap:calc(var(--u)*1.6);min-height:0;padding:0 var(--pad);color:inherit;text-decoration:none;box-shadow:0 -1px 0 rgba(243,238,228,.16)}
.ix:focus-visible{outline-offset:-6px}
.ix-f{position:absolute;inset:0;z-index:-1;isolation:isolate;overflow:hidden;background:var(--c);clip-path:circle(0 at var(--x,0) var(--y,50%));transition:clip-path .75s cubic-bezier(.65,0,.2,1)}
.ix-f .ct{opacity:1}
.ix.on{z-index:2}
.ix.on .ix-f{clip-path:circle(160vw at var(--x,0) var(--y,50%))}
.ix-n{font-size:max(11px,calc(var(--u)*1.05));opacity:.7}
.ix-t{font-weight:900;font-stretch:125%;font-size:var(--t);letter-spacing:-.035em;line-height:1;text-transform:uppercase;white-space:nowrap;transition:translate .6s cubic-bezier(.2,.9,.3,1),opacity .35s}
.pe.act .ix:not(.on):not(.fin) .ix-t{opacity:.34}
.ix.on .ix-t{translate:calc(var(--u)*1.2) 0}
.ix-p{justify-self:end;max-width:24em;font-weight:600;font-size:max(14px,calc(var(--u)*1.65));line-height:1.2;text-align:right;text-wrap:balance;opacity:0;translate:calc(var(--u)*2) 0;transition:opacity .35s,translate .6s cubic-bezier(.2,.9,.3,1)}
.ix.on .ix-p,.ix.fin .ix-p{opacity:1;translate:0 0}
.ix-ob{justify-self:center;width:calc(var(--u)*13.5);max-width:none;margin-block:calc(var(--u)*-6);opacity:0;scale:.4;rotate:-22deg;filter:drop-shadow(0 calc(var(--u)*1) calc(var(--u)*1.2) rgba(0,0,0,.5));transition:opacity .2s,scale .6s cubic-bezier(.2,1.6,.4,1),rotate .6s cubic-bezier(.2,1.6,.4,1)}
.ix.on .ix-ob{opacity:1;scale:1;rotate:8deg}
.ix-fl{font-size:calc(var(--u)*2.6);transition:translate .35s}
.ix.on .ix-fl,.ix.fin:hover .ix-fl{translate:calc(var(--u)*.5) 0}
.ix.fin{--c:var(--girasol);grid-template-columns:calc(var(--u)*4.4) auto minmax(0,1fr) auto;color:var(--ink);box-shadow:none}
.ix.fin .ix-f{clip-path:none}
.ix.fin.ct-luz .ct{opacity:.3}
.pe-fila{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*.85) var(--pad);font-size:max(10.5px,calc(var(--u)*.95));opacity:.72}
.pe-fila a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s}
.pe-fila a:hover{background-size:100% 1.5px}
@media (max-width:980px){
  .pe{--u:clamp(9px,2.4vw,13px);grid-template-rows:repeat(5,minmax(96px,1fr)) auto;height:auto;min-height:var(--alto);padding-top:72px}
  .ix,.ix.fin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;gap:3px 10px;padding-block:10px}
  .ix-n{grid-area:1/1}
  .ix-t{grid-area:2/1}
  .ix-p{grid-area:3/1;justify-self:start;text-align:left;opacity:.9;translate:none;font-size:13.5px}
  .ix-ob{position:absolute;right:var(--pad);top:50%;width:76px;margin:-44px 0 0}
  .ix-fl{display:none}
  .pe-fila{flex-wrap:wrap;gap:6px 18px;padding-block:12px}
}

 /* texto con brillo espectral */
.iri{
  background:linear-gradient(100deg,#35f2ff,#8f7bff 30%,#ff4fd8 60%,#ffd23f);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-stroke:0;animation:hue 9s linear infinite;
}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .nav ul{display:none}
  .side{display:none}
  /* en vertical junto al borde: abajo chocaban con el texto del capítulo */
  .dots{left:auto;right:calc(var(--pad) + 8px);bottom:150px;transform:none;flex-direction:column}
  .dots i{transition:height .3s,background .3s}
  .dots i.on{width:9px;height:28px}
  .scroll{display:none}
}
@media (max-width:560px){
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}html{scroll-behavior:auto}
  .inf-b3.hecho .fi-sello{opacity:1;scale:1;rotate:12deg}
}

/* ============ MENÚ DEL MÓVIL ============ */
@media (max-width:860px){.bag-x{display:none}}
@media (max-width:860px){
  .menu-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 16px;border:1.5px solid currentColor;border-radius:99px;background:none;color:inherit;font:500 12px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .menu-btn i{position:relative;width:16px;height:10px}
  .menu-btn i::before,.menu-btn i::after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:top .3s cubic-bezier(.2,.8,.2,1),rotate .3s cubic-bezier(.2,.8,.2,1)}
  .menu-btn i::before{top:1px}.menu-btn i::after{top:7.5px}
  .nav.abierto .menu-btn i::before,.nav.abierto .menu-btn i::after{top:4.25px;rotate:45deg}
  .nav.abierto .menu-btn i::after{rotate:-45deg}
  .menu-movil a{text-decoration:none}
  .menu-movil ol{list-style:none;padding:0}
}
/* cortina amarilla a pantalla completa, que se abre en círculo desde el botón */
@media (max-width:860px){
  .menu-movil{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;gap:18px;padding:110px var(--pad) calc(26px + env(safe-area-inset-bottom));background:var(--sun);color:var(--ink);visibility:hidden;clip-path:circle(0 at calc(100% - var(--pad) - 44px) 38px);transition:clip-path .6s cubic-bezier(.65,0,.35,1),visibility 0s .6s}
  .nav.abierto .menu-movil{visibility:visible;clip-path:circle(150% at calc(100% - var(--pad) - 44px) 38px);transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
  .nav.abierto{color:var(--ink)}
  html.menu-abierto{overflow:hidden}
  .menu-movil ol{display:grid;gap:clamp(18px,3.4vh,30px);margin-block:auto}
  .menu-movil li a{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:14px}
  .menu-movil li b{font:500 12px 'DM Mono',monospace;letter-spacing:.1em;padding-top:.5em}
  .mm-l{display:grid;justify-items:start;row-gap:.12em;font-weight:900;font-stretch:125%;font-size:clamp(32px,10.4vw,72px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
  .mm-l .tx{white-space:nowrap;color:transparent;-webkit-background-clip:text;background-clip:text;animation:hue 9s linear infinite;background-image:linear-gradient(180deg,var(--ink) 0 45%,#35f2ff 45%,#8f7bff 48.5%,#ff4fd8 51.5%,#ffd23f 55%,var(--ink) 55% 100%)}
  .menu-go{display:flex;justify-content:space-between;align-items:center;padding:21px 26px;border-radius:99px;background:var(--ink);color:var(--sun);font:500 14px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
  .menu-pie{font-size:11px;opacity:.6;text-align:center}
}

/* ============ ICONOS DE LAS TARJETAS ============ */
/* cada objeto con su ancho, su altura y un ajuste a los lados (en el HTML): todos pesan lo mismo a la vista y quedan
   centrados por su peso, no por su caja (el cursor de Webs o la punta de la chincheta alargan la caja sin pesar) */
.f-cap{width:var(--w,58%);left:calc(50% - var(--w,58%) / 2 + var(--x,0%));top:var(--t,13%)}

/* ============ LETRA DEL DORSO ============ */
/* titular: lo que es, en grande y con lo importante en su color; lo que incluye, en piezas; para quién, con su etiqueta.
   Las dos primeras etiquetas (Qué es, Incluye) no se ven, pero siguen ahí para los lectores de pantalla */
.bt-b{gap:0;padding-top:6.5cqw}
.ficha{display:flex;flex-direction:column;gap:3.4cqw;margin:0 0 3.6cqw}
.ficha div{display:block}
.ficha dd{margin:0}
.ficha div:nth-child(-n+2) dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ficha div:first-child dd{font:900 5.05cqw/1.02 'Archivo',sans-serif;font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
.ficha div:first-child dd b{color:var(--c)}
.ficha div:nth-child(2) dd{display:flex;flex-wrap:wrap;gap:1.4cqw}
.ficha .pz{font:600 max(9.5px,2.85cqw) 'Archivo',sans-serif;padding:.42em .85em;border-radius:99px;border:1.5px solid var(--c);color:var(--c)}
.ficha div:nth-child(3){display:flex;align-items:baseline;gap:2.2cqw;padding-top:2.6cqw;border-top:1.5px dashed rgba(17,17,17,.2)}
.ficha div:nth-child(3) dt{flex:none;padding:.35em .75em;border-radius:99px;background:var(--c);color:var(--on);font-size:max(9px,2.4cqw)}
.ficha div:nth-child(3) dd{font:500 max(11px,3.45cqw)/1.3 'Archivo',sans-serif;opacity:.85}

/* ============ ENTRADA DE LA AUDITORÍA ============ */
/* cuatro franjas: las preguntas que vienen, cada una en su color; al pasar por encima se abre y enseña la pregunta */
.au-franjas{display:flex;align-self:stretch;min-height:0;border-radius:calc(var(--u)*2.6);overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.fj{position:relative;isolation:isolate;overflow:hidden;flex:1 1 0;min-width:0;display:grid;grid-template-rows:auto 1fr;padding:22px 16px 24px;background:var(--c);color:var(--cream);cursor:pointer;transition:flex-grow .7s cubic-bezier(.2,.8,.2,1)}
.fj:hover,.au-franjas:not(:hover) .fj:first-child{flex-grow:3.2}
.fj-n{font-weight:900;font-stretch:125%;font-size:clamp(26px,2.3vw,40px);line-height:1}
.fj-t{grid-row:2;align-self:end;justify-self:start;writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;font-weight:900;font-stretch:125%;font-size:clamp(20px,1.9vw,32px);text-transform:uppercase;letter-spacing:-.01em;transition:opacity .3s}
.fj-q{position:absolute;left:16px;bottom:24px;width:10em;opacity:0;translate:0 12px;font-weight:900;font-stretch:115%;font-size:clamp(22px,2.1vw,36px);line-height:1;text-transform:uppercase;letter-spacing:-.02em;transition:opacity .35s .15s,translate .35s .15s}
.fj:hover .fj-t,.au-franjas:not(:hover) .fj:first-child .fj-t{opacity:0}
.fj:hover .fj-q,.au-franjas:not(:hover) .fj:first-child .fj-q{opacity:1;translate:0 0}
@media (max-width:980px){.au-franjas{min-height:300px;margin:0}.fj-q{font-size:20px}}

/* ============ EL INFORME EN PDF ============ */
/* Una sola hoja A4. La monta app.js al pulsar «Descargar en PDF» y solo existe al imprimir (.imprime): imprimir la web sin más sigue igual */
@page{size:A4;margin:0}
@media print{
  html.imprime,html.imprime body{background:#fff}
  html.imprime body > *:not(#audHoja){display:none!important}
  html.imprime #audHoja{display:grid}
}
.hoja{--tc:var(--cream);display:none;grid-template-rows:auto minmax(0,1fr) auto;width:210mm;height:297mm;overflow:hidden;background:var(--cream);color:var(--ink);font-family:'Archivo',sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hoja .mono{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.09em}

/* arriba: el color de lo que más urge, como en la pantalla */
.h-top{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:2.6mm;justify-items:start;padding:11mm 13mm 9mm;background:var(--c);color:var(--cream)}
.h-top > .ct{opacity:1}
.h-fila{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:3mm}
.h-logo{font-weight:900;font-stretch:125%;font-size:16pt;letter-spacing:-.01em}
.h-fila .mono{font-size:6.6pt;opacity:.85}
.h-primero{padding:1.1mm 2.6mm;border-radius:20mm;background:#fff;color:#111;font-size:6.6pt}
.h-nota{position:relative;display:flex;align-items:flex-end;gap:2mm;font-weight:900;font-stretch:125%;line-height:.84;letter-spacing:-.04em}
.h-nota b{font-size:108pt;font-weight:900}
.h-nota small{padding-bottom:4mm;font:500 11pt 'DM Mono',monospace;letter-spacing:.06em;opacity:.85}
.h-nota img{position:absolute;left:100%;top:-5mm;width:38mm;height:36mm;object-fit:contain;margin-left:2mm;rotate:8deg;filter:drop-shadow(0 2mm 3mm rgba(0,0,0,.4))}
.h-fr{margin:1.5mm 0 0;max-width:150mm;font-weight:800;font-stretch:110%;font-size:15pt;line-height:1.14}
.h-meta{margin:0;font-size:6.6pt;opacity:.85}

/* en medio: cada área con su nota y su porqué, y el plan */
.h-medio{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6.5mm;padding:7mm 13mm 7mm;min-height:0}
.h-areas{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:4mm;min-height:0}
.h-a{position:relative;display:grid;gap:2.2mm;align-content:start;min-height:0;padding:4.4mm 4.6mm;border-radius:4mm;background:#fff;box-shadow:inset 0 0 0 .3mm rgba(17,17,17,.1)}
.h-a-ob{position:absolute;right:3.4mm;bottom:3mm;width:19mm;filter:drop-shadow(0 1mm 1.4mm rgba(0,0,0,.25))}
.h-a-c{display:flex;justify-content:space-between;align-items:flex-end}
.h-a-c .mono{font-size:6.6pt;padding-bottom:.8mm}
.h-a-c b{font-weight:900;font-stretch:120%;font-size:24pt;line-height:1;color:var(--c)}
.h-bar{display:block;height:2.2mm;border-radius:9mm;background:rgba(17,17,17,.09);overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:9mm;background:var(--c)}
.h-a ul{list-style:none;margin:.8mm 0 0;padding:0 21mm 0 0;display:grid;gap:1.1mm;font-size:9pt;line-height:1.22}
.h-a li{display:grid;grid-template-columns:3mm minmax(0,1fr);gap:.8mm}
.h-a li b{font-weight:900}
.h-a li.mas b{color:#0b6b4c}.h-a li.menos b{color:#c8102e}
.h-plan h2{margin:0 0 3mm;font-weight:900;font-stretch:125%;font-size:15pt;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.h-plan ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.h-p{display:grid;gap:1.2mm;align-content:start;padding:3.8mm 4.2mm 4.4mm;border-radius:4mm;background:var(--c);color:var(--cream)}
.h-p-n{font-weight:900;font-stretch:125%;font-size:20pt;line-height:1}
.h-p .mono{font-size:6pt;opacity:.8}
.h-p b{font-weight:800;font-stretch:108%;font-size:10.5pt;line-height:1.12}
.h-p p{margin:0;font-size:8pt;line-height:1.26;opacity:.9}

/* abajo: la invitación, con el sello */
.h-pie{display:flex;justify-content:space-between;align-items:center;padding:6mm 13mm;background:var(--girasol);color:var(--ink)}
.h-pie h2{margin:0;font-weight:900;font-stretch:125%;font-size:18pt;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.h-pie p{margin:1.4mm 0 0;font-size:10pt}
.h-sello{width:24mm;height:24mm;flex:none;margin-block:-3mm;rotate:10deg}
.h-sello .s-rot{animation:none}