/* ============================================================
   POLISH · capa de sistema site-wide (26-sep-2026)

   Se enlaza JUSTO ANTES de </body> en cada pagina servida, para
   quedar de ultima en la cascada: varias paginas tienen bloques
   <style> dentro del body que ganarian a un <link> en el <head>.

   No cambia la marca (void #15171B, Signal Teal #C9C2B6, Space
   Grotesk + IBM Plex Mono). Corrige lo que la auditoria midio:
   1. Titulares partidos en 4-5 lineas por columnas angostas.
   2. H1 de 4-5 lineas en movil.
   3. Ritmo vertical disparejo (44 a 172 px) y paginas muy largas.
   4. Foco de teclado inconsistente.
   Sin animaciones nuevas: el movimiento sigue siendo el de reveal.js.

   Al editar, subir el ?v en todas las paginas que lo enlazan.
   ============================================================ */

/* ---------- 1 · Titulares: anchos, 2-3 lineas, balanceados ---------- */
h1, h2, h3{text-wrap:balance}
p, li{text-wrap:pretty}

html body .sec-head,
html body .section-head{max-width:min(100%, 1040px) !important}
html body .sec-head .lead,
html body .section-head .lead{max-width:62ch}

html body .section-title,
html body .h-section{max-width:21em !important}
html body .center-head .h-section,
html body .sec-head[style*="center"] .h-section{margin-left:auto;margin-right:auto}

/* Los <br> escritos para escritorio fuerzan lineas cortas en pantallas
   estrechas; alli manda text-wrap:balance. */
@media (max-width:900px){
  h1 br, h2 br{display:none}
}

/* Columnas angostas conocidas: el bloque del fundador (mitad de grilla)
   y el titular del cierre final. Se ajusta el tamano o el ancho para
   que no pasen de 3 lineas. */
html body .founder-copy .h-section{font-size:clamp(1.7rem, 2.6vw, 2.4rem)}
html body .hero .h-display{max-width:min(100%, 17em) !important}
html body .final h2{max-width:min(100%, 21em) !important;margin-left:auto;margin-right:auto}

/* ---------- 2 · H1 en movil: 3 lineas en la mayoria ---------- */
@media (max-width:480px){
  html body h1{font-size:clamp(1.65rem, 7.4vw, 2.1rem) !important;line-height:1.12 !important;letter-spacing:-.02em}
  html body h2{font-size:clamp(1.5rem, 6.6vw, 1.85rem) !important;line-height:1.15 !important}
}

/* ---------- 3 · Ritmo vertical mas compacto y parejo ----------
   Solo reemplaza la regla generica "section{padding}" de cada hoja;
   las secciones con padding propio (heros, paneles, bandas) no se
   tocan porque su selector de clase es mas especifico. */
section,
html body section.sec,
html body section.solution{padding-top:clamp(64px, 8vw, 112px);padding-bottom:clamp(64px, 8vw, 112px)}
html body .sec-head,
html body .section-head{margin-bottom:clamp(32px, 4.5vw, 56px)}

/* ---------- 4 · Foco visible y seleccion ---------- */
:focus-visible{outline:2px solid #C9C2B6;outline-offset:3px;border-radius:4px}
::selection{background:rgba(201,194,182,.32);color:#F3F5F6}

/* Tarjetas que SI son enlaces: responden al puntero. Las que no son
   enlaces no se levantan (seria prometer un clic que no existe). */
@media (hover:hover){
  html body a.card, html body a.post-card, html body a[class*="-card"]{
    transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s
  }
  html body a.card:hover, html body a.post-card:hover, html body a[class*="-card"]:hover{
    transform:translateY(-3px);border-color:rgba(201,194,182,.5);box-shadow:0 18px 40px rgba(0,0,0,.35)
  }
}

/* ---------- 5 · Botones: flecha en su propia isla + presion fisica ----------
   La flecha deja de ir suelta junto al texto: vive en un circulo que se
   desplaza al pasar el puntero. Al presionar, el boton cede 1px. */
html body :is(.btn, .btn-solid, .btn-primary, .btn-light) :is(.arr, .arrow){
  display:inline-grid;place-items:center;width:1.9em;height:1.9em;margin-left:.55em;margin-right:-.35em;
  border-radius:999px;background:rgba(21,23,27,.14);line-height:1;font-size:.95em;
  transition:transform .45s cubic-bezier(.32,.72,0,1), background-color .3s
}
html body :is(.btn-light, .on-dark .btn-outline) :is(.arr, .arrow){background:rgba(21,23,27,.1)}
@media (hover:hover){
  html body :is(.btn, .btn-solid, .btn-primary, .btn-light):hover :is(.arr, .arrow){transform:translateX(3px);background:rgba(21,23,27,.22)}
}
html body :is(.btn, .btn-solid, .btn-primary, .btn-light, .btn-outline, .nav-btn):active{transform:translateY(1px) scale(.985);transition-duration:.08s}

/* ---------- 6 · Superficies con profundidad ----------
   Borde de luz arriba y sombra tenida con el azul-negro de la marca, solo
   en las tarjetas que cargan una decision (precio, fases, a la medida). */
html body :is(.price-cell, .fase, .medida){
  box-shadow:inset 0 1px 0 rgba(237,239,241,.07), 0 28px 60px -28px rgba(12,14,16,.85)
}
html body .price-cell.destacado{
  box-shadow:inset 0 1px 0 rgba(201,194,182,.35), 0 0 0 1px rgba(201,194,182,.45), 0 30px 70px -24px rgba(201,194,182,.22)
}

/* Grano de pelicula fijo y casi invisible: quita lo plano del negro
   digital. Es un solo pseudo-elemento fijo, sin costo al hacer scroll. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* ---------- 7 · Navegacion dentro de la pagina ---------- */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ---------- 8 · Preguntas frecuentes centradas (pedido de Angel, 26-sep-2026) ----------
   Encabezado (eyebrow + H2) y la columna de preguntas centrados en todas
   las paginas. El texto de cada pregunta sigue alineado a la izquierda
   dentro de la columna, para que se lea de corrido. */
html body section#faq :is(.faq-head, .sec-head, .section-head){
  text-align:center !important;margin-left:auto !important;margin-right:auto !important;max-width:min(100%, 760px) !important
}
html body section#faq :is(.eyebrow, .section-tag){justify-content:center !important;margin-left:auto;margin-right:auto}
html body section#faq :is(.faq-head, .sec-head, .section-head) :is(h2, .h2, .h-section, .section-title){
  margin-left:auto !important;margin-right:auto !important;text-align:center !important
}
html body section#faq :is(.faq-list, .faq-wrap){max-width:820px !important;margin-left:auto !important;margin-right:auto !important}

/* ---------- 9 · Herramientas del homepage: copy centrado sobre la imagen ----------
   Pedido de Angel (26-sep-2026): nombre y bajada de cada herramienta
   alineados al centro de su imagen. Se centra el bloque completo para que
   titulo, descripcion y enlace sigan un solo eje. */
html body .tools .tool-copy{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center}
html body .tools .tool-desc{margin-left:auto;margin-right:auto}
html body .tools .tool-copy .cta-link{justify-content:center}
html body .tools .tool-state{margin-left:auto;margin-right:auto;border-left:0;
  border-top:2px solid var(--aqua, #B4754E);padding:14px 0 0}
html body .tools .tool-state + .cta-link, html body .tools .tool-state ~ .cta-link{margin-top:22px}