/*
 * comun.css — LO QUE ESTABA COPIADO PÁGINA A PÁGINA.
 *
 * No es una hoja nueva de estilo: es el mismo CSS que vivía repetido dentro del
 * <style> de cada página, escrito UNA vez. Nada de aquí se escribió para este
 * fichero; todo estaba ya en el landing, palabra por palabra, en 2 o más
 * páginas con el cuerpo idéntico.
 *
 * ── DÓNDE SE CARGA, Y POR QUÉ AHÍ Y NO EN site.css ──────────────────────────
 * Justo DESPUÉS de tailwind.css y ANTES del <style> de la página. Ése es el
 * único sitio equivalente al que ocupaban: en site.css irían antes de Tailwind
 * y perderían contra las utilidades de su misma especificidad. Está medido:
 * .brand-mark (letter-spacing -0.05em) compite con .tracking-tight (-0.025em)
 * en el mismo elemento, y .phone-screen (box-shadow inset) con .ring-1.
 * Moverlas a site.css cambia las dos.
 *
 * ── POR QUÉ ESTAS Y NO TODAS LAS IDÉNTICAS ─────────────────────────────────
 * Sólo sube lo que es PREFIJO del <style> en TODAS las páginas donde aparece.
 * Adelantar una regla por delante de otra que se queda invierte el ganador
 * cuando compiten; si nada de lo que se queda iba antes, no hay par que
 * invertir. El resto de las idénticas sigue en su página, y la puerta
 * scripts/landing-gates/clases-duplicadas-gate.mjs lleva la cuenta.
 *
 * ── NO SE EDITA A MANO ─────────────────────────────────────────────────────
 * Lo genera scripts/landing-gates/alzar-clases.mjs y lo verifica
 * scripts/landing-gates/cascada-foto.mjs comparando el estilo calculado de
 * todos los elementos de las 24 páginas, antes y después.
 */

.form-dark { color-scheme: dark; }
.form-dark select option, .form-dark select optgroup { background-color: #0a120e; color: #e7e5e4; }
.reveal { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity var(--dur-entra) var(--curva), transform var(--dur-entra) var(--curva); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal.delay-1 { transition-delay: calc(var(--paso-escalon) * 1); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .arrow-icon { transform: translateX(2px); }
}
main .text-center p, main .text-center li,
    main [class*="text-center"] p { margin-inline: auto }
.dot-grid {
      background-image: radial-gradient(rgba(12,10,9,.06) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: -1px -1px;
    }
.hero-mesh {
      /* Eran tres radiales -- menta al 55%, ambar al 8% y menta al 18% -- detras
         del hero. Es el MISMO tell que se quito de .tgx-noir: cero de las ocho
         portadas del censo marcan una banda con luz. Lo que separa una banda de
         la siguiente es el aire. */
      background: none;
    }
.reveal.delay-2 { transition-delay: calc(var(--paso-escalon) * 2); }
.hero-fade-up { opacity: 0; transform: translateY(10px); animation: hero-up 700ms var(--curva) forwards; }
.hero-fade-up.d1 { animation-delay: 80ms; }
.hero-fade-up.d2 { animation-delay: 160ms; }
.hero-pill { opacity: 0; transform: scale(0.96); animation: hero-pill 500ms var(--curva) forwards; animation-delay: 0ms; }
.hero-chat { opacity: 0; transform: translateX(28px) scale(0.97); animation: hero-chat 800ms var(--ease-spring) forwards; animation-delay: var(--dur); }
@keyframes hero-up   { to { opacity: 1; transform: translateY(0); } }
@keyframes hero-pill { to { opacity: 1; transform: scale(1); } }
@keyframes hero-chat { to { opacity: 1; transform: translateX(0) scale(1); } }
.chat-msg { opacity: 0; transform: translateY(8px) scale(0.985); animation-fill-mode: forwards; }
.chat-msg.from-right { transform: translateX(8px) translateY(4px) scale(0.985); }
.chat-step-1 { animation: chat-in 400ms var(--curva) 700ms forwards; }
.chat-step-2 { animation: chat-in 400ms var(--curva) 1500ms forwards; }
.chat-step-3 { animation: chat-in 400ms var(--curva) 2200ms forwards; }
.chat-step-4 { animation: chat-in 350ms var(--curva) 2900ms forwards; }
.chat-step-5 { animation: chat-card-in var(--dur-entra) var(--ease-spring) 3700ms forwards; }
@keyframes chat-in       { to { opacity: 1; transform: translateY(0) translateX(0) scale(1); } }
@keyframes chat-out      { to { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes chat-card-in  { 0% { opacity: 0; transform: translateY(10px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.typing-dot {
      width: 6px; height: 6px; border-radius: 9999px; background: #78716c;
      display: inline-block; margin: 0 1px;
      animation: tdot 1.2s ease-in-out infinite;
    }
@keyframes tdot { 0%,60%,100% { transform: translateY(0); opacity:.4 } 30% { transform: translateY(-3px); opacity: 1 } }
.vertical-card,
    #producto [class*="col-span"].rounded-2xl,
    #ecosistema article.rounded-2xl {
      transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva), border-color var(--dur) var(--curva);
    }
@media (hover: hover) and (pointer: fine) {
  #producto [class*="col-span"].rounded-2xl:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12,10,9,.05), 0 18px 36px -16px rgba(0,0,0,.135); }
  #ecosistema article.rounded-2xl:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12,10,9,.05), 0 18px 36px -16px rgba(0,0,0,.118); }
}
.bars-on .bar-fill:nth-child(1)  { transition-delay: 0ms; }
.bars-on .bar-fill:nth-child(2)  { transition-delay: calc(var(--paso-escalon) * 1 / 2); }
.bars-on .bar-fill:nth-child(3)  { transition-delay: calc(var(--paso-escalon) * 2 / 2); }
@keyframes cal-pulse {
      0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.55); }
      70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
      100% { box-shadow: 0 0 0 0   rgba(16,185,129,0); }
    }
.steps-on .step-line-path { stroke-dashoffset: 0; }
.hero-vignette {
      /* Una vineta oscurece los bordes para empujar la mirada al centro: eso es
         separar con luz, que es justo lo que la direccion no hace. */
      background: none;
    }
.hero-particles { z-index: 0; }
@keyframes drift {
      0%,100% { transform: translate3d(0, 0, 0); }
      25%     { transform: translate3d(8px, -12px, 0); }
      50%     { transform: translate3d(-4px, -22px, 0); }
      75%     { transform: translate3d(-8px, -10px, 0); }
    }
.wa-dot.is-active::before {
      background: #28AE7C;
      width: 20px;
    }
.wa-dot.is-active:hover::before { background: #047857; }
@media (hover: hover) and (pointer: fine) {
  .cta-shine:hover::before { transform: translateX(130%) skewX(-12deg); }
}
@keyframes kw-underline-grow { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .tilt-card:hover .tilt-glow { opacity: 1; }
}
.steps-on .step-dot::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 9999px;
      box-shadow: 0 0 0 0 rgba(16,185,129,0.45);
      animation: dot-pulse 1.6s var(--curva) infinite;
    }
.steps-on .step-dot:nth-of-type(1)::before { animation-delay: 0s; }
.steps-on .step-dot:nth-of-type(2)::before { animation-delay: .3s; }
.steps-on .step-dot:nth-of-type(3)::before { animation-delay: .6s; }
.steps-on .step-dot:nth-of-type(4)::before { animation-delay: .9s; }
@keyframes dot-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
      40%      { box-shadow: 0 0 0 6px rgba(16,185,129,.18); }
    }
@keyframes mesh-orbit-1 {
      0%,100% { transform: translate3d(0, 0, 0); }
      25%     { transform: translate3d(8%, -4%, 0); }
      50%     { transform: translate3d(-4%, 6%, 0); }
      75%     { transform: translate3d(-6%, -3%, 0); }
    }
@keyframes mesh-orbit-2 {
      0%,100% { transform: translate3d(0, 0, 0); }
      25%     { transform: translate3d(-6%, 4%, 0); }
      50%     { transform: translate3d(5%, -5%, 0); }
      75%     { transform: translate3d(7%, 2%, 0); }
    }
@media (prefers-reduced-motion: reduce) {
  .cta-shine::before { display: none; }
}
.tinta-cta{background:var(--tinta);color:#08211B}
.tinta-cta:hover{background:#31C08B}
.tinta-link:hover{color:var(--tinta)}
.doc{max-width:56rem;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px) {
  .doc{padding:0 2rem}
}
.hero-teo-col .hero-teo-stage{position:relative;z-index:1;width:100%;min-height:11rem;
      display:flex;align-items:flex-end;justify-content:center}
body[data-teo-mode="stage"] .hero-teo-stage .teo{width:180px;height:180px}
@media(min-width:640px) {
  .hero-teo-col .hero-teo-stage{min-height:14rem}
  body[data-teo-mode="stage"] .hero-teo-stage .teo{width:240px;height:240px}
}
@media(min-width:1024px) {
  .hero-teo-col .hero-teo-stage{min-height:17rem}
  body[data-teo-mode="stage"] .hero-teo-stage .teo{width:240px;height:240px}
}
.paso .n{color:var(--texto);font-weight:600}
@media(min-width:640px) {
  .membrete-giro{font-size:1rem}
  .campo--clave dd{font-size:1.45rem}
}
.log:last-child{border-bottom:0}
@keyframes doc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {
  .doc-in{animation:none}
}
body[data-page="home"] .hilo{--foco:var(--tinta)}
.cartel{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
      font-size:clamp(2.5rem,6vw,5rem);line-height:.96;letter-spacing:-.038em;
      margin:0;max-width:15ch;color:var(--t1)}
.cartel em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;
      font-weight:400;letter-spacing:-.01em}
.cartel-chico{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
      font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;letter-spacing:-.02em;
      margin:0 0 calc(var(--paso) * 6);max-width:24ch;color:var(--t1)}
.pie{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:400;
      font-size:1.0625rem;line-height:1.55;letter-spacing:0;
      color:var(--t2);margin:0;text-wrap:pretty}
figcaption.pie,.pie.estado,.pie.giro{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-size:.8125rem;line-height:1.5}
.ojo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
      /* R3: el acento como LETRA sobre papel va en el derivado. La tinta pura
         mide 2,50:1 aqui, y ese es el rol prohibido. */
      color:var(--tinta-letra);margin:0 0 calc(var(--paso) * 4)}
body[data-page="home"] .teo-sprite{filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.tramo{position:relative}
.cuerda{display:none}
@media(min-width:1344px) {
  .cuerda{display:block;position:absolute;top:0;bottom:0;
          left:calc(50% - 28rem - 5.5rem);width:2px;
          background:repeating-linear-gradient(to bottom,
            rgba(17,44,48,.20) 0 6px, transparent 6px 12px);
          pointer-events:none;z-index:2}
  .trepa{position:sticky;top:34vh;margin-left:-119px;width:240px;height:240px;
          image-rendering:pixelated;pointer-events:none;
          animation:trepar 1.6s steps(1,end) infinite}
}
@keyframes trepar{0%{background-image:url(/assets/teo/teo-climb-a.webp)}
      50%{background-image:url(/assets/teo/teo-climb-b.webp)}}
.trepa{background-image:url(/assets/teo/teo-climb-a.webp);background-size:contain;
      background-repeat:no-repeat}
@media(prefers-reduced-motion:reduce) {
  .cuerda{display:none}
}
.bloque{padding:var(--ritmo) 0}
.bloque-hilo{padding:calc(var(--paso) * 6) 0 0}
.hero-hilo>.ojo{grid-area:ojo;margin-bottom:0}
.hero-hilo>.cartel{grid-area:cartel}
.hero-hilo>.hilo-col{grid-area:hilo}
.hero-hilo>.pie{grid-area:pie;margin-top:0}
.hero-hilo>.acciones{grid-area:acciones;margin-top:0}
.hero-hilo>.estado{grid-area:estado;margin-top:0}
@media(min-width:1000px) {
  .hero-hilo>.hilo-col{align-self:center}
  .hero-hilo>.pie{margin-top:calc(var(--paso) * 2)}
  .hero-hilo>.acciones{margin-top:calc(var(--paso) * 4)}
  .hero-hilo>.estado{margin-top:calc(var(--paso) * 4)}
}
.hero-hilo .cartel{max-width:17ch}
.cartel span{display:block}
.cartel .l1{margin-left:0}
.cartel .l2{margin-left:8%}
.cartel .l3{margin-left:18%}
@media(min-width:1000px) {
  .cartel .l2{margin-left:12%}
  .cartel .l3{margin-left:26%}
}
.piso .piso-fila{max-width:74rem}
.hero-hilo .pie{margin-top:calc(var(--paso) * 6);max-width:var(--medida)}
.btn-crema:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
@media(hover:hover) and (pointer:fine) {
  .btn-crema:hover:active{transform:scale(.97)}
  .enlace-pie:hover{color:var(--t1);border-bottom-color:var(--t1)}
}
.hilo-col .hero-teo-stage{position:relative;z-index:1;width:100%;min-height:8rem;
      display:flex;align-items:flex-end;justify-content:center;margin-bottom:-.4rem}
.hero-teo-stage::after{content:"";position:absolute;left:auto;right:28px;
      bottom:calc(var(--pies)/2);
      width:64px;height:12px;transform:none;z-index:0;
      background:radial-gradient(ellipse closest-side,rgba(0,0,0,.5),transparent)}
@media(min-width:640px) {
  .hero-teo-stage::after{bottom:var(--pies);width:120px;height:20px;right:60px}
}
body[data-teo-mode="stage"] .hilo-col .hero-teo-stage .teo{width:120px;height:120px}
@media(min-width:640px) {
  .hilo-col .hero-teo-stage{min-height:15rem}
  body[data-teo-mode="stage"] .hilo-col .hero-teo-stage .teo{width:240px;height:240px}
}
.giro b{color:var(--tinta-letra);font-weight:400}
.hilo .dia{align-self:center;font-size:.6875rem;color:var(--debil-inv);letter-spacing:.06em}
.hilo.animado .b, .hilo.animado .sis{opacity:0;transform:translateY(6px)}
.hilo.animado .b.puesta, .hilo.animado .sis.puesta{opacity:1;transform:none;
      transition:opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1)}
.hilo[data-pos="1"]>*,.hilo[data-pos="2"]>*,.hilo[data-pos="3"]>*{visibility:hidden}
.puntitos i{width:6px;height:6px;border-radius:50%;background:var(--tenue-inv);display:block;
      animation:latir 1.1s infinite ease-in-out}
.puntitos i:nth-child(2){animation-delay:.16s}
.puntitos i:nth-child(3){animation-delay:.32s}
@keyframes latir{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce) {
  .puntitos i{animation:none}
}
.papel .c.acota{margin-top:var(--paso);font-size:.6875rem;letter-spacing:.1em;
      text-transform:uppercase;color:var(--t3)}
.uniformes figcaption .acota{margin-top:var(--paso);font-size:.8125rem}
.menudo .pasos li{padding-top:calc(var(--paso) * 2);padding-bottom:calc(var(--paso) * 2);font-size:.9375rem}
#uniformes .doc>.pie{max-width:var(--medida)}
.uniformes figure{margin:0;background:var(--p0);padding:.9rem 1rem;
      box-shadow:var(--filo-papel), var(--contacto-papel);
      display:flex;align-items:center;gap:calc(var(--paso) * 4)}
.uniformes img{width:120px;height:120px;image-rendering:pixelated;display:block;flex:none}
.uniformes figcaption{margin:0}
@media(min-width:864px) {
  .uniformes figure{flex-direction:column;text-align:center;gap:calc(var(--paso) * 2);padding:1rem .5rem .9rem}
  .uniformes img{width:240px;height:240px}
  .uniformes figure:nth-child(2){transform:translateY(-1.5rem);background:var(--p0);
          box-shadow:var(--filo-papel), var(--contacto-papel-alto)}
}
.pasos li{counter-increment:p;position:relative;padding:calc(var(--paso) * 3) 0 calc(var(--paso) * 3) 2.6rem;
      border-bottom:1px solid var(--filete);
      font-family:"Space Grotesk",system-ui,sans-serif;font-weight:400;font-size:1.0625rem;
      line-height:1.55;letter-spacing:0;text-wrap:pretty;
      color:var(--t2)}
.pasos li:last-child{border-bottom:0}
.pasos li::before{content:"0" counter(p);position:absolute;left:0;top:.78rem;
      color:var(--tinta);font-size:.75rem}
.pasos b{color:var(--t1);font-weight:600}
.log time{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6875rem;
      letter-spacing:.1em;color:var(--t3)}
.log a{color:var(--tinta-letra);text-decoration:underline;
      text-underline-offset:3px;text-decoration-thickness:1px;
      transition:opacity var(--dur) var(--curva)}
.log a:hover{opacity:.72}
.log a:active{opacity:.55}
.log>span:not(.cab){font-family:"Space Grotesk",system-ui,sans-serif;font-weight:400;font-size:1.0625rem;
      line-height:1.55;letter-spacing:0;text-wrap:pretty;
      color:var(--t2)}
.bitacora .pie b{color:var(--t1)}
@media (hover: hover) and (pointer: fine) {
  .tier-card:not(.is-featured):hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(12,10,9,.05), 0 24px 56px -16px rgba(0,0,0,.185); }
  .tier-card.is-featured:hover { transform: scale(1.05) translateY(-4px); }
}
.pill-toggle button { position: relative; z-index: 1; padding: 6px 16px; font-size: 13px; font-weight: 500; color: #78716c; transition: color var(--dur) var(--curva); border-radius: 9999px; }
.pill-toggle button.active { color: #1c1917; }
.price-num.flip, .billing-note.flip, .price-suffix-label.flip { opacity: 0; }
.compare-row > div { padding: 14px 16px; }
.compare-feature-group summary { cursor: pointer; list-style: none; }
.compare-feature-group summary::-webkit-details-marker { display: none; }
.compare-feature-group[open] .chevron { transform: rotate(180deg); }
.ficha-hd span{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A8A29E}
.ficha-hd svg{width:.9rem;height:.9rem;color:#A8A29E;flex:none}
.tier-card.is-featured .ficha-hd span,.tier-card.is-featured .ficha-hd svg{color:var(--tinta-letra)}
.jornada-chip svg{width:.85rem;height:.85rem;color:var(--tinta-letra);flex:none}
@keyframes teoPerchBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1023.98px) {
  .tier-card.is-featured{margin-top:9.5rem}
}
.recibo-s2 .hd img{width:34px;height:34px;image-rendering:pixelated}
.recibo-s2 .hd .t{font-weight:600;font-size:.95rem;margin:0}
.recibo-s2 .hd .s{font-size:.7rem;color:#A8A29E;margin:.05rem 0 0}
.recibo-s2 .row:last-child{border-bottom:0}
.recibo-s2 .row .k{color:#78716C}
.recibo-s2 .row .v{font-weight:600;text-align:right;color:#1C1917}
.recibo-s2 .row .v.mint{color:var(--tinta-letra)}
@media(max-width:640px) {
  .recibo-s2 .row .v{text-align:left}
}
.chosen-badge svg{width:.72rem;height:.72rem;flex:none}
.tier-card.is-chosen .chosen-badge{display:inline-flex}
.tier-card.is-featured.is-chosen{box-shadow: 0 0 0 2px var(--tinta),0 26px 56px -18px rgba(0,0,0,.336)!important}
.recibo-s2 .hd img.recibo-teo{width:46px;height:46px}
@media(prefers-reduced-motion:no-preference) {
  .recibo-teo.is-yes{animation:reciboTeoPop .6s var(--ease-spring)}
}
@keyframes reciboTeoPop{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.22) rotate(-5deg)}55%{transform:scale(1.06) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.recibo-s2.is-chosen .recibo-deal{display:flex}
.recibo-s2 .recibo-deal .k{color:#047857}
.recibo-s2.is-chosen .recibo-hint{display:none}
.recibo-hire svg{width:1rem;height:1rem;flex:none}
.recibo-s2.is-chosen .recibo-hire{display:inline-flex}
@media(prefers-reduced-motion:no-preference) {
  .recibo-s2.is-chosen .recibo-hire{animation:reciboHireIn .45s var(--ease-spring)}
}
@keyframes reciboHireIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.recibo-s2:not(.is-chosen) .recibo-reassure{display:none}
.btn-press[data-loading] { opacity: .7; pointer-events: none; }