/* ==========================================
   YIALINK — Shared Stylesheet
   All pages link to this file.
   Page-specific styles live in each HTML's own <style> block.
   ========================================== */

/* === RESET === */

:root {
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --card: #141416;
  --card-2: #18181b;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --fg: #f5f5f7;
  --muted: #a1a1a8;
  --muted-2: #6f6f76;
  --white: #ffffff;
  --radius: 16px;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --good: oklch(0.72 0.12 155);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Inter Display = Inter variable con el eje óptico al máximo (opsz 32).
     Se hereda a todo el texto; Jakarta (títulos) no tiene eje opsz y lo
     ignora. font-optical-sizing:none evita que el navegador lo recalcule
     por tamaño de letra. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  /* Inter Display trae el espaciado apretado de display: este tracking lo
     abre para lectura. Se hereda a todo el texto; los títulos (Jakarta) lo
     resetean en su regla y los elementos con tracking propio conservan el suyo. */
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* === LAYOUT === */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* === TYPOGRAPHY === */

/* Títulos en Plus Jakarta Sans (se carga junto con Inter en header.php);
   el cuerpo sigue en Inter. Fallback a Inter mientras descarga.
   letter-spacing normal: que no hereden el tracking del texto (los títulos
   con tracking propio más específico lo conservan). */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: normal;
}

section { position: relative; }

.nav-links li { list-style: none; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.section-head { max-width: 680px; }
.section-head.center { margin: 0 auto; text-align: center; }

.section-head h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-top: 16px;
  text-wrap: balance;
}

.section-head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* === BUTTONS === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.01em;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  white-space: nowrap;
}
.btn-solid { background: #c96342; color: #fff; }
.btn-solid:hover { background: #b5573a; }

/* ── Micro-interacción estilo Lusion en botones principales ──
   Estructura inyectada por JS: [flecha oculta izq] [texto] [punto].
   Hover: la flecha entra, el texto se desliza a la derecha y el punto
   se encoge. Easing y tiempos tomados de lusion.co. */
.btn-solid.lus { position: relative; overflow: hidden; }
.btn-solid.lus .lus-arrow {
  position: absolute; left: 1.1em; top: 50%; width: 1em; height: 1em;
  transform: translate3d(-2.6em, -50%, 0);
  transition: transform .3s cubic-bezier(.4, 0, .1, 1);
  pointer-events: none;
}
.btn-solid.lus .lus-arrow svg { width: 100%; height: 100%; display: block; }
.btn-solid.lus .lus-text {
  display: inline-block;
  transition: transform .3s cubic-bezier(.4, 0, .1, 1);
}
.btn-solid.lus .lus-dot {
  display: inline-block; width: .34em; height: .34em; border-radius: 50%;
  background: currentColor; transform: scale(.9);
  transition: transform .12s cubic-bezier(.4, 0, .1, 1);
}
.btn-solid.lus:hover .lus-arrow { transform: translate3d(0, -50%, 0); }
.btn-solid.lus:hover .lus-text  { transform: translate3d(1.05em, 0, 0); }
.btn-solid.lus:hover .lus-dot   { transform: scale(0); }
@media (prefers-reduced-motion: reduce) {
  .btn-solid.lus .lus-arrow, .btn-solid.lus .lus-text, .btn-solid.lus .lus-dot { transition: none; }
}
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-dark { background: #0a0a0b; color: #fff; }
.btn-dark:hover { transform: translateY(-1px); background: #1a1a1d; }

/* === NAV === */

header.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--white);
}
.brand-logo { display: block; color: var(--white); }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--fg); }
.nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.nav-links ul li { margin: 0; padding: 0; list-style: none; }
.nav-links li a { font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color 0.2s var(--ease); }
.nav-links li a:hover, .nav-links li a:hover { color: var(--fg); }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-toggle:hover { border-color: var(--fg); }
.nav-toggle .nt-close { display: none; }
body.menu-open .nav-toggle .nt-open { display: none; }
body.menu-open .nav-toggle .nt-close { display: inline; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 8, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Items arriba (bajo el header de 72px) y padding lateral de 20px:
     el mismo del .wrap en móvil, para alinear con el logotipo. */
  justify-content: flex-start;
  gap: 6px;
  padding: 92px 20px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mm-links { display: flex; flex-direction: column; gap: 4px; width: 100%; list-style: none; }
.mm-links a {
  /* Tipografía media y fila flexible: el texto a la izquierda y la flecha
     de drill-down (si la hay) pegada al margen derecho, estilo Webflow. */
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 14px 0;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.2s var(--ease);
}
.mm-links a:hover { color: var(--muted); }
body.menu-open .mm-links a { animation: mmIn 0.5s var(--ease) forwards; }
body.menu-open .mm-links a:nth-child(1) { animation-delay: 0.08s; }
body.menu-open .mm-links a:nth-child(2) { animation-delay: 0.13s; }
body.menu-open .mm-links a:nth-child(3) { animation-delay: 0.18s; }
body.menu-open .mm-links a:nth-child(4) { animation-delay: 0.23s; }
body.menu-open .mm-links a:nth-child(5) { animation-delay: 0.28s; }
.mm-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mm-links ul li { margin: 0; padding: 0; list-style: none; }
.mm-links li { width: 100%; }
.mm-links li a { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); padding: 14px 0; opacity: 0; transform: translateY(14px); transition: color 0.2s var(--ease); }
.mm-links li a:hover { color: var(--muted); }
body.menu-open .mm-links li a { animation: mmIn 0.5s var(--ease) forwards; }
body.menu-open .mm-links li:nth-child(1) a { animation-delay: 0.08s; }
body.menu-open .mm-links li:nth-child(2) a { animation-delay: 0.13s; }
body.menu-open .mm-links li:nth-child(3) a { animation-delay: 0.18s; }
body.menu-open .mm-links li:nth-child(4) a { animation-delay: 0.23s; }
body.menu-open .mm-links li:nth-child(5) a { animation-delay: 0.28s; }
body.menu-open .mm-links li:nth-child(6) a { animation-delay: 0.33s; }
@keyframes mmIn { to { opacity: 1; transform: none; } }
/* CTA anclado al fondo del menú, estilo Webflow */
.mm-cta { margin-top: auto; width: 100%; opacity: 0; text-align: center; }
body.menu-open .mm-cta { animation: mmIn 0.5s var(--ease) 0.34s forwards; }

/* === HERO === */

.hero {
  position: relative;
  padding: 120px 0 70px;
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.5px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: rgba(13,13,15,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.3);
  margin-bottom: 30px;
}
.pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
h1.hero-title {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 14ch;
  margin: 0 auto;
  text-wrap: balance;
}
.hero-sub {
  margin: 26px auto 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
  flex-wrap: wrap;
}

/* === SVC HERO (interior pages) === */

.svc-hero {
  padding: 150px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.svc-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.5px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.svc-hero > * { position: relative; z-index: 1; }
.svc-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 16ch;
  margin: 18px auto 0;
  text-wrap: balance;
}
.svc-hero p {
  margin: 24px auto 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* === CTA === */

.final-cta { padding: 40px 0 100px; }

.cta-box {
  background: #0d0d0f;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 84px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-box::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,10,0.68) 0%, rgba(8,8,10,0.48) 40%, rgba(8,8,10,0.74) 100%),
    radial-gradient(120% 80% at 50% 50%, rgba(8,8,10,0.22) 0%, rgba(8,8,10,0.68) 100%);
}
.cta-box > * { position: relative; z-index: 2; }
.cta-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.cta-box h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 18ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cta-box p {
  margin: 20px auto 0;
  max-width: 50ch;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
}
.cta-box .btn-row {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === CUSTOM BANNER (Cotizador CTA) === */

.custom-cat { padding: 30px 0 50px; }
.custom-banner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 52px;
  position: relative;
  overflow: hidden;
}
.custom-banner::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.3px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(80% 120% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.custom-banner > * { position: relative; z-index: 1; }
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.custom-left .cat-tag { margin-bottom: 18px; }
.custom-left h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}
.custom-left p { margin-top: 16px; font-size: 16.5px; color: var(--muted); line-height: 1.6; max-width: 46ch; }
.custom-examples { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.custom-examples span {
  font-size: 13.5px;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 15px;
}
.custom-right {
  background: #0c0c0e;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px;
}
.custom-price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.custom-price b {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--white);
  line-height: 1;
}
.custom-price span { font-size: 15px; color: var(--muted-2); }
.custom-right > p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.custom-steps { list-style: none; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; }
.custom-steps li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--fg); }
.custom-steps .tick {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
}
.custom-right .btn { margin-top: 26px; width: 100%; }

/* === FOOTER === */

footer {
  background: #060607;
  border-top: 1px solid var(--line);
  padding: 70px 0 40px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line);
}
.foot-brand p { margin-top: 18px; font-size: 14px; color: var(--muted-2); max-width: 30ch; line-height: 1.6; }
.foot-phone-block { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; }
.foot-phone-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.foot-phone { font-size: 15px; font-weight: 600; color: var(--fg); transition: color 0.2s var(--ease); }
.foot-phone:hover { color: var(--muted); }
.foot-phone-hours { font-size: 13px; color: var(--muted-2); }
.foot-address { font-size: 13px; line-height: 1.55; color: var(--muted); transition: color 0.2s var(--ease); }
.foot-address:hover { color: var(--fg); }
.foot-badges { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-badges a { display: inline-flex; }
.foot-badges img { height: 53px; width: auto; max-width: 150px; border-radius: 10px; }
.foot-col h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 14.5px; color: var(--muted); transition: color 0.2s var(--ease); }
.foot-col a:hover { color: var(--fg); }
.foot-bottom {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted-2);
  flex-wrap: wrap;
  gap: 14px;
}
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.foot-social a:hover { color: var(--fg); border-color: var(--line-strong); }

/* === ANIMATIONS === */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* En móvil el reveal parte de 50% de opacidad (no totalmente oculto) para que
   el usuario perciba que hay más contenido debajo; al hacer scroll se completa
   a opacidad 1 (.reveal.in). Solo cuando hay animación (no reduced-motion). */
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .reveal { opacity: 0.5; }
}

/* === RESPONSIVE === */

@media (max-width: 900px) {
  /* Con nav-links oculto, el grid dejaba nav-actions en la columna central.
     En flex, logo a la izquierda y el botón pegado a la derecha. */
  .nav-inner { display: flex; justify-content: space-between; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .custom-banner { grid-template-columns: 1fr; gap: 32px; padding: 36px 30px; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 80px 0 60px; }
  .svc-hero { padding: 120px 0 50px; }
  .cta-box { padding: 56px 24px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Hero CTA — botones en columna */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
  /* Section head typography */
  .section-head h2 { font-size: clamp(24px, 7vw, 32px); }
  /* Footer */
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ================================================
   PAGE: archive.php
================================================ */

/* ---------- Blog ---------- */
  .blog-hero { padding: 140px 0 40px; position: relative; }
  .blog-hero::before {
    content: ""; position: absolute; top: -160px; left: 50%;
    transform: translateX(-50%); width: 720px; height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
    pointer-events: none;
  }
  .blog-hero h1 {
    margin-top: 16px; font-size: clamp(34px, 5vw, 58px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1.02;
  }
  .blog-hero .lead {
    margin-top: 18px; font-size: 17px; color: var(--muted); max-width: 56ch; line-height: 1.6;
  }

  /* Category filter chips */
  .blog-filters {
    margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px;
  }
  .blog-chip {
    font-size: 13.5px; font-weight: 500; color: var(--muted);
    background: var(--card); border: 1px solid var(--line); border-radius: 100px;
    padding: 9px 18px; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
    font-family: inherit;
  }
  .blog-chip:hover { color: var(--fg); border-color: var(--line-strong); }
  .blog-chip.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }

  /* Featured post */
  .blog-feature { padding: 30px 0 10px; }
  .feat-card {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .feat-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .feat-media { position: relative; min-height: 340px; overflow: hidden; }
  .feat-media .ph {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,0.10), transparent 55%),
      linear-gradient(135deg, #1a1c22 0%, #0d0e12 100%);
  }
  .feat-media .ph::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
    mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
  }
  .feat-media .glyph {
    position: absolute; left: 36px; bottom: 30px; font-family: ui-monospace,'SF Mono',Menlo,monospace;
    font-size: 13px; letter-spacing: 0.06em; color: var(--muted); z-index: 1;
  }
  .feat-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
  .post-tag {
    font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted-2);
  }
  .feat-body h2 {
    margin-top: 16px; font-size: clamp(26px, 3vw, 36px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.14; text-wrap: balance;
  }
  .feat-body p { margin-top: 16px; font-size: 16px; color: var(--muted); line-height: 1.65; }
  .post-meta {
    margin-top: 26px; display: flex; align-items: center; gap: 14px;
    font-size: 13.5px; color: var(--muted-2);
  }
  .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
  .feat-body .read-more {
    margin-top: 28px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: #c96342; width: max-content;
  }
  .feat-body .read-more svg { transition: transform .25s var(--ease); }
  .feat-card:hover .read-more svg { transform: translateX(3px); }

  /* Post grid */
  .blog-list { padding: 40px 0 100px; }
  .blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .post-card {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .post-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .post-thumb { position: relative; height: 180px; overflow: hidden; }
  .post-thumb .ph { position: absolute; inset: 0; }
  .post-thumb .ph::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 90% at 65% 25%, #000, transparent 78%);
    mask-image: radial-gradient(80% 90% at 65% 25%, #000, transparent 78%);
  }
  .ph-a { background: linear-gradient(135deg, #1c1922 0%, #0d0e12 100%); }
  .ph-b { background: linear-gradient(135deg, #15201e 0%, #0d0e12 100%); }
  .ph-c { background: linear-gradient(135deg, #1a1b24 0%, #0d0e12 100%); }
  .ph-d { background: linear-gradient(135deg, #221b18 0%, #0d0e12 100%); }
  .ph-e { background: linear-gradient(135deg, #181f24 0%, #0d0e12 100%); }
  .ph-f { background: linear-gradient(135deg, #1e1a20 0%, #0d0e12 100%); }
  .post-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
  .post-body h3 {
    margin-top: 14px; font-size: 18.5px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.28; text-wrap: pretty;
  }
  .post-body p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; }
  .post-card .post-meta { margin-top: 22px; font-size: 12.5px; }

  /* Newsletter strip */
  .blog-news { padding: 0 0 110px; }
  .news-card {
    background: linear-gradient(135deg, #15161b 0%, #0c0d11 100%);
    border: 1px solid var(--line); border-radius: 20px;
    padding: 52px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
  }
  .news-card h2 { font-size: clamp(24px,3vw,32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
  .news-card p { margin-top: 14px; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
  .news-form { display: flex; gap: 10px; }
  .news-form input {
    flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px; color: var(--fg); font-size: 14.5px; font-family: inherit;
  }
  .news-form input:focus { outline: none; border-color: var(--line-strong); }

  @media (max-width: 900px) {
    .blog-hero { padding: 110px 0 30px; }
    .feat-card { grid-template-columns: 1fr; }
    .feat-media { min-height: 220px; }
    .feat-body { padding: 32px; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .news-card { grid-template-columns: 1fr; padding: 36px; gap: 26px; }
  }
  @media (max-width: 620px) {
    .blog-grid { grid-template-columns: 1fr; }
    .news-form { flex-direction: column; }
  }

/* ================================================
   PAGE: front-page.php
================================================ */

  /* ---------- Hero (Home) ---------- */
  .home .hero::before {
    content: "";
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 1100px; height: 700px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
  }
  .hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 92%);
    pointer-events: none;
  }
  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(80% 60% at 50% 32%, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.35) 55%, transparent 100%),
      linear-gradient(180deg, rgba(8,8,10,0.55) 0%, transparent 30%);
    pointer-events: none;
  }

  /* ---------- Selector cards ---------- */
  .selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; text-align: left; }
  .sel-card {
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); cursor: pointer;
  }
  .sel-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .sel-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  }
  .sel-icon img { width: 100%; height: 100%; display: block; }
  .sel-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .sel-card p { margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.55; }
  .sel-card .arrow { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: #c96342; display: flex; align-items: center; gap: 6px; transition: color 0.25s var(--ease), gap 0.25s var(--ease); }
  .sel-card:hover .arrow { color: #e8956f; gap: 10px; }

  /* ---------- Video showcase ---------- */
  .video-section { padding: 0px 0 50px; }
  .video-showcase {
    position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 7;
    min-height: 360px; border: 1px solid var(--line); background: #0d0d0f;
  }
  .vs-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .vs-placeholder {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.008) 14px 28px),
      radial-gradient(120% 100% at 50% 0%, #1b1b20 0%, #0c0c0e 70%);
  }
  .vs-play {
    width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: rgba(255,255,255,0.06); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; color: var(--white);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .video-showcase:hover .vs-play { transform: scale(1.06); background: rgba(255,255,255,0.1); }
  .vs-play svg { margin-left: 4px; }
  .vs-ph-label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted-2); text-transform: uppercase; }
  .vs-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.5) 42%, rgba(8,8,10,0.12) 75%, transparent 100%);
    pointer-events: none;
  }
  .vs-content { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 48px 52px; max-width: 620px; }
  .vs-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
    padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 100px; background: rgba(255,255,255,0.04);
  }
  .vs-content h2 { margin-top: 18px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
  .vs-content p { margin-top: 14px; font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
  .vs-content .btn { margin-top: 24px; }

  /* ---------- Agent showcase (home) ---------- */
  .agent-section { padding: 0px 0 70px; }
  .agent-showcase {
    position: relative; border-radius: 28px; overflow: hidden;
    aspect-ratio: 16 / 8; min-height: 420px;
    border: 1px solid var(--line); background: #0d0d0f; isolation: isolate;
  }
  .as-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .as-overlay {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(270deg, rgba(8,8,10,0.9) 0%, rgba(8,8,10,0.55) 40%, rgba(8,8,10,0.15) 68%, rgba(8,8,10,0.35) 100%),
      linear-gradient(180deg, rgba(8,8,10,0.1) 40%, rgba(8,8,10,0.75) 100%);
  }
  .as-content { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 48px 52px; max-width: 500px; text-align: right; }
  .as-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
    padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 100px; background: rgba(255,255,255,0.04);
  }
  .as-eyebrow svg { color: #a3ff6f; }
  .as-content h2 { margin-top: 18px; font-size: clamp(24px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
  .as-content p { margin-top: 14px; font-size: clamp(14.5px, 1.3vw, 16px); color: var(--muted); line-height: 1.55; max-width: 40ch; margin-left: auto; text-wrap: pretty; }
  .as-content .btn { margin-top: 24px; }

  /* Columna de chat flotante a la derecha */
  .as-chat {
    position: absolute; z-index: 3; top: 0; left: 0; bottom: 0;
    width: 46%; max-width: 440px;
    display: flex; flex-direction: column;
    padding: 32px 34px;
  }
  .as-chat-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 9px;
    overflow: hidden;
    padding-bottom: 10px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
  }
  .as-chat-body > :first-child { margin-top: auto; }
  /* Burbujas más pequeñas y todas alineadas a la derecha (estilo elevenlabs) */
  .as-chat-body .chatsim-msg {
    max-width: 82%; font-size: 13px; line-height: 1.45; padding: 9px 13px;
    opacity: 0; transform: translateY(6px);
    animation: as-msg-in .42s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes as-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .as-chat-body .chatsim-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #d97757, #c96342); color: #fff;
    border-radius: 15px; border-bottom-right-radius: 5px;
  }
  .as-chat-body .chatsim-msg.bot {
    align-self: flex-start;
    background: rgba(20,20,22,0.9); color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(6px);
    border-radius: 15px; border-bottom-left-radius: 5px;
    text-align: left;
  }
  .as-chat-body .chatsim-card {
    align-self: flex-start; max-width: 82%;
    font-size: 12.5px; padding: 11px 14px; text-align: left;
    opacity: 0; transform: translateY(6px);
    animation: as-msg-in .42s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .as-chat-body .chatsim-typing {
    align-self: flex-start;
  }
  .as-chat-body .chatsim-msg.leaving,
  .as-chat-body .chatsim-card.leaving {
    animation: as-msg-out .45s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes as-msg-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
  }

  /* ---------- Social proof ---------- */
  .social { padding: 70px 0 50px; border-top: 1px solid var(--line); }
  .social p.lead { text-align: center; font-size: 14.5px; color: var(--muted-2); letter-spacing: 0.01em; }
  /* Marquee infinito a sangre completa (desktop y móvil): .logos vive fuera
     de .wrap, con máscara de desvanecido en ambos extremos. El track (4 sets
     idénticos) se desplaza -50% en loop; ver keyframes logos-marquee. */
  .logos {
    margin-top: 40px; display: flex; align-items: center; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .logos-track {
    display: flex; flex-wrap: nowrap; width: max-content; align-items: center;
    animation: logos-marquee 80s linear infinite;
  }
  .logo-ph { height: 46px; flex: 0 0 auto; margin-right: 56px; display: flex; align-items: center; justify-content: center; }
  .logo-ph img { width: auto; max-width: 150px; object-fit: contain; opacity: 0.6; transition: opacity 0.3s var(--ease); }
  .logo-ph:hover img { opacity: 1; }
  .logo-inimed   { height: 26px; }
  .logo-sura     { height: 42px; }
  .logo-kfc      { height: 30px; }
  .logo-stanhome { height: 21px; }
  .logo-scotia   { height: 25px; }
  .logo-turner   { height: 24px; }
  .logo-guiaux   { height: 24px; }
  .logo-gnp      { height: 30px; }
  .logo-cerner   { height: 27px; }

  /* ---------- Stats ---------- */
  .stats { padding: 90px 0; }
  .stats-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stat-card { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; display: flex; flex-direction: column; min-height: 240px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
  .stat-card:hover { background: var(--card-2); border-color: var(--line-strong); }
  .stat-num { font-size: clamp(52px, 6vw, 68px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--white); }
  .stat-desc { margin-top: 14px; font-size: 16px; color: var(--muted); line-height: 1.5; max-width: 22ch; }
  .stat-client { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-2); font-weight: 500; }
  .client-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; border: 1px solid var(--line); flex: none; }

  /* ---------- Services ---------- */
  .services { padding: 30px 0 70px; }
  .serv-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .serv-card {
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
    display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .serv-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .serv-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .serv-icon img { width: 100%; height: 100%; display: block; }
  .serv-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .serv-card p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; flex: 1; }
  .serv-link { margin-top: 22px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: #c96342; transition: color 0.25s var(--ease), gap 0.25s var(--ease); }
  .serv-card:hover .serv-link { color: #e8956f; gap: 10px; }

  /* ---------- CTA (Home variant) ---------- */
  .home .cta-box::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(120% 120% at 50% 0%, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.72) 55%, rgba(8,8,10,0.9) 100%);
    pointer-events: none;
  }
  .home .cta-video { z-index: 1; }
  .home .cta-box > h2, .home .cta-box > p, .home .cta-box > .btn-row { z-index: 3; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .selector, .stats-grid, .serv-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {

    /* Carruseles horizontales en móvil (selector del hero, casos y servicios).
       Track a sangre completa (full-width): las tarjetas se desplazan de
       borde a borde de la pantalla. La PRIMERA tarjeta lleva un margen
       inicial (margin-left en la tarjeta, robusto en Safari) para que no
       arranque pegada; la última lleva un respiro al final.
       El swipe vertical sigue moviendo la página (touch-action por defecto). */
    .selector, .stats-grid, .serv-grid {
      display: flex; flex-flow: row nowrap; gap: 12px;
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 20px;
      overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
      /* Sin touch-action: el navegador decide por dirección del gesto
         (swipe horizontal → carrusel; swipe vertical → scroll de página).
         overflow-y: hidden ya evita el desplazamiento vertical interno. */
      scrollbar-width: none;
      /* sangra hasta los bordes de la pantalla, cancela el padding del .wrap */
      margin-left: -20px; margin-right: -20px;
      padding-block: 4px 10px;
    }
    .selector::-webkit-scrollbar,
    .stats-grid::-webkit-scrollbar,
    .serv-grid::-webkit-scrollbar { display: none; }

    .selector .sel-card,
    .stats-grid .stat-card,
    .serv-grid .serv-card { scroll-snap-align: start; }

    /* Las tarjetas del carrusel se muestran siempre. La animación reveal
       depende de entrar al viewport, y las tarjetas fuera de pantalla (a la
       derecha) nunca se activaban, quedando invisibles al desplazar. */
    .selector .sel-card.reveal,
    .stats-grid .stat-card.reveal,
    .serv-grid .serv-card.reveal { opacity: 1; transform: none; }

    .selector { margin-top: 40px; }
    .selector .sel-card,
    .serv-grid .serv-card { flex: 0 0 82%; }
    .stats-grid .stat-card { flex: 0 0 68%; min-height: 0; }

    .selector .sel-card:first-child,
    .stats-grid .stat-card:first-child,
    .serv-grid .serv-card:first-child { margin-left: 20px; }
    .selector .sel-card:last-child,
    .stats-grid .stat-card:last-child,
    .serv-grid .serv-card:last-child { margin-right: 20px; }
    .video-showcase { aspect-ratio: auto; }
    .vs-overlay { background: linear-gradient(180deg, rgba(8,8,10,0.45) 0%, rgba(8,8,10,0.4) 35%, rgba(8,8,10,0.9) 100%); }
    .vs-content { padding: 32px 24px; position: relative; }
    .vs-placeholder { position: relative; min-height: 300px; }
    .agent-section { padding: 0px 0 0; }
    .agent-showcase { aspect-ratio: auto; min-height: 0; }
    .as-overlay { background: linear-gradient(180deg, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.55) 45%, rgba(8,8,10,0.95) 100%); }
    .as-content { position: relative; padding: 28px 22px 24px; max-width: none; }
    .as-content h2 { font-size: 24px; }
    .as-chat {
      position: relative; width: 100%; max-width: none;
      padding: 0 18px 26px; height: 300px;
    }
    .as-chat-body { height: 300px; }
    .as-chat-body .chatsim-msg { max-width: 88%; font-size: 13px; }
  }

/* ================================================
   PAGE: page-agentes-de-ia.php
================================================ */

  /* ---------- Stat strip ---------- */
  .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .strip-item { padding: 38px 24px; text-align: center; border-right: 1px solid var(--line); min-width: 0; }
  .strip-item:last-child { border-right: none; }
  .strip-item b { display: block; font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -0.04em; color: var(--white); line-height: 1; overflow-wrap: break-word; }
  .strip-item span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted-2); line-height: 1.45; }

  /* ---------- Intro split ---------- */
  .intro { padding: 90px 0; }
  .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .intro-media { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: #0d0d0f; position: relative; }
  .intro-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .intro-text h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
  .intro-text p { margin-top: 18px; font-size: 16.5px; color: var(--muted); line-height: 1.65; }
  .intro-text p + p { margin-top: 14px; }

  /* ---------- Use cases ---------- */
  .uses { padding: 30px 0 100px; }
  .uses-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  /* Layout de la tarjeta; el acabado visual (gradiente bento, filo, sombra)
     vive en el bloque "Tarjetas bento" al final del archivo. */
  .use-card {
    padding: 30px 28px; display: flex; flex-direction: column;
  }
  .use-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--white); margin-bottom: 22px; }
  .use-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .use-card p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
  /* Link de tarjeta (ej. "Ver solución →"), consistente con los links de contenido */
  .card-link { margin-top: 14px; display: inline-block; font-size: 14px; font-weight: 600; color: #c96342; transition: color 0.25s var(--ease); }
  .use-card:hover .card-link { color: #e8956f; }

  /* ---------- Formats ---------- */
  .formats { padding: 90px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fmt-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fmt-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; }
  .fmt-num { flex: none; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--muted-2); padding-top: 3px; }
  .fmt-card h4 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
  .fmt-card p { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.55; }

  /* ---------- Process ---------- */
  .process { padding: 100px 0; }
  .proc-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .proc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
  .proc-step { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--muted-2); }
  .proc-card h4 { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .proc-card p { margin-top: 9px; font-size: 14px; color: var(--muted); line-height: 1.55; }
  .proc-bar { margin-top: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--white), transparent); opacity: 0.5; }

  /* ---------- Comparison ---------- */
  .compare { padding: 0 0 100px; }
  .cmp-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .cmp-card { border-radius: 20px; padding: 38px 36px; border: 1px solid var(--line); }
  .cmp-card.trad { background: var(--card); }
  .cmp-card.ours { background: #0d0d0f; border-color: var(--line-strong); }
  .cmp-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
  .cmp-card h3 .tag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
  .cmp-card.trad h3 .tag { color: var(--muted-2); border: 1px solid var(--line); }
  .cmp-card.ours h3 .tag { color: #0a0a0b; background: var(--white); }
  .cmp-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 15px; }
  .cmp-list li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; }
  .cmp-list .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .cmp-card.trad .cmp-list li { color: var(--muted); }
  .cmp-card.trad .ic { background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--muted-2); }
  .cmp-card.ours .cmp-list li { color: var(--fg); }
  .cmp-card.ours .ic { background: rgba(255,255,255,0.12); color: var(--white); }

  /* ---------- FAQ ---------- */
  .faq { padding: 0 0 100px; }
  .faq-list { margin-top: 44px; max-width: 820px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-q { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--fg); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .faq-q .pm { flex: none; width: 22px; height: 22px; position: relative; }
  .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--muted); border-radius: 2px; transition: transform 0.3s var(--ease), background 0.2s; }
  .faq-q .pm::before { top: 10px; left: 2px; width: 18px; height: 2px; }
  .faq-q .pm::after { top: 2px; left: 10px; width: 2px; height: 18px; }
  .faq-item.open .faq-q .pm::after { transform: scaleY(0); }
  .faq-item.open .faq-q { color: var(--white); }
  .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease); }
  .faq-a p { padding: 0 4px 24px; font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 70ch; }

  /* ---------- CTA overrides (service page variant) ---------- */
  .page-agentes-de-ia .final-cta { padding: 60px 0 100px; }
  .page-agentes-de-ia .cta-video {
    z-index: 0; opacity: 0.38;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .intro-grid { grid-template-columns: 1fr; gap: 36px; }
    .intro-media { order: -1; }
    .strip-grid { grid-template-columns: 1fr 1fr; }
    .strip-item { border-right: none; border-bottom: 1px solid var(--line); }
    .strip-item:nth-child(odd) { border-right: 1px solid var(--line); }
    .strip-item:last-child { border-bottom: none; }
    .uses-grid { grid-template-columns: 1fr 1fr; }
    .fmt-grid { grid-template-columns: 1fr; }
    .proc-grid { grid-template-columns: 1fr 1fr; }
    .cmp-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .intro-media:not(:has(.chatsim)) { aspect-ratio: 16 / 9; }
    .strip-grid { grid-template-columns: 1fr; }
    .strip-item { border-right: none; border-bottom: 1px solid var(--line); }
    .strip-item:nth-child(odd) { border-right: none; }
    .strip-item:last-child { border-bottom: none; }
    .uses-grid { grid-template-columns: 1fr; }
    .fmt-grid { grid-template-columns: 1fr; }
    .proc-grid { grid-template-columns: 1fr; }
    .cmp-grid { grid-template-columns: 1fr; }
    .intro { padding: 50px 0; }
    .uses { padding: 20px 0 60px; }
    .process { padding: 60px 0; }
    .compare { padding: 0 0 60px; }
    .faq { padding: 0 0 60px; }
    .formats { padding: 50px 0; }
    .chatsim-head{ padding:13px 14px; gap:10px; }
    .chatsim-avatar{ width:34px; height:34px; flex:0 0 34px; }
    .chatsim-id b{ font-size:13.5px; }
    .chatsim-body{ padding:16px 14px; height:450px; gap:10px; }
    .chatsim-msg{ max-width:88%; font-size:13.5px; padding:10px 13px; }
    .chatsim-card{ font-size:13px; }
  }

/* ================================================
   PAGE: page-casos-de-exito.php
================================================ */

/* ===== Casos de Éxito page ===== */
  /* Featured case */
  .case-featured { padding: 30px 0 40px; }
  .cf-card {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  }
  .cf-card.flip { grid-template-columns: 1fr 1.05fr; }
  .cf-card + .cf-card { margin-top: 22px; }
  .cf-card.flip .cf-media { order: 2; border-right: none; border-left: 1px solid var(--line); }
  .cf-card.flip .cf-body { order: 1; }
  .cf-media {
    position: relative; min-height: 380px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 16px, rgba(255,255,255,0.008) 16px 32px),
      radial-gradient(120% 100% at 30% 0%, #1c1c22 0%, #0c0c0e 70%);
    border-right: 1px solid var(--line);
  }
  .cf-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .cf-logo {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--white);
    border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 30px; background: rgba(12,12,14,0.6);
  }
  .cf-body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
  .cf-tag {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted-2);
  }
  .cf-body h2 { margin-top: 16px; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
  .cf-body p { margin-top: 16px; font-size: 16px; color: var(--muted); line-height: 1.65; max-width: 48ch; }
  .cf-metrics { margin-top: 30px; display: flex; gap: 40px; flex-wrap: wrap; }
  .cf-metric b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.04em; color: var(--white); line-height: 1; }
  .cf-metric span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); max-width: 18ch; }
  .cf-cta { margin-top: 34px; }
  .cf-cta .btn svg { transition: transform 0.25s var(--ease); }
  .cf-cta .btn:hover svg { transform: translate(2px, -2px); }

  /* Case grid */
  .cases { padding: 30px 0 50px; }
  .cases-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .case-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 34px;
    display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .case-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .case-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .case-logo {
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--white);
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; background: rgba(255,255,255,0.02);
  }
  .case-ind { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); text-align: right; }
  .case-card h3 { margin-top: 24px; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
  .case-card > p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; }
  .case-metrics { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 32px; }
  .case-metrics .cm b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
  .case-metrics .cm span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted-2); max-width: 16ch; }

  /* Logos de clientes (marquee compartido con el home — yialink_logos_marquee) */
  .clients { padding: 50px 0 30px; border-top: 1px solid var(--line); }
  .clients p.lead { text-align: center; font-size: 14.5px; color: var(--muted-2); }

  /* Testimonial */
  .testi { padding: 60px 0; }
  .testi-card {
    background: var(--card); border: 1px solid var(--line-strong); border-radius: 24px; padding: 64px;
    text-align: center; position: relative; overflow: hidden;
    min-height: 420px; display: flex; flex-direction: column; justify-content: center;
  }
  /* Background video */
  .testi-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
  }
  /* Readability scrim: keeps light text legible over the footage */
  .testi-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.55) 45%, rgba(10,10,11,0.78) 100%),
      radial-gradient(120% 80% at 50% 50%, rgba(10,10,11,0.25) 0%, rgba(10,10,11,0.7) 100%);
  }
  .testi-card > .wrap-content { position: relative; z-index: 2; }
  .testi-card .quote-mark { font-size: 80px; line-height: 0.6; color: rgba(255,255,255,0.55); font-family: Georgia, serif; }
  .testi-card blockquote {
    margin: 18px auto 0; max-width: 30ch; font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance;
    color: #ffffff; text-shadow: 0 1px 24px rgba(0,0,0,0.45);
  }
  .testi-author { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
  .testi-author b { font-size: 15px; font-weight: 600; color: #ffffff; }
  .testi-author span { font-size: 13.5px; color: rgba(255,255,255,0.7); }

  @media (max-width: 900px) {
    .cf-card { grid-template-columns: 1fr; }
    .cf-card.flip { grid-template-columns: 1fr; }
    .cf-card.flip .cf-media { order: 1; border-left: none; border-bottom: 1px solid var(--line); }
    .cf-card.flip .cf-body { order: 2; }
    .cf-media { min-height: 220px; border-right: none; border-bottom: 1px solid var(--line); }
    .cf-body { padding: 36px 30px; }
    .cases-grid { grid-template-columns: 1fr; }
    .testi-card { padding: 44px 28px; }
  }
  @media (max-width: 600px) {
    .cf-body { padding: 28px 22px; }
    .cf-metrics { gap: 24px; }
    .testi-card { padding: 36px 22px; }
    .testi-card blockquote { font-size: clamp(20px, 5.5vw, 28px); }
    .cases-grid { grid-template-columns: 1fr; }
  }

/* ================================================
   PAGE: page-contacto.php
================================================ */

/* ===== Contacto page ===== */
  .contact { padding: 130px 0 90px; position: relative; overflow: hidden; }
  .contact::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.13) 1.4px, transparent 1.5px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(70% 50% at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(70% 50% at 50% 0%, #000 0%, transparent 70%);
    pointer-events: none;
  }
  .contact > * { position: relative; z-index: 1; }
  /* Background promo video for the contact header — fades out downward */
  .contact-video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 78%);
    pointer-events: none;
  }
  .contact-scrim {
    position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(75% 60% at 30% 22%, rgba(8,8,10,0.72) 0%, rgba(8,8,10,0.32) 55%, transparent 100%),
      linear-gradient(180deg, rgba(8,8,10,0.45) 0%, transparent 40%);
    pointer-events: none;
  }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }

  /* Left rail */
  .c-left { padding-top: 8px; }
  .c-left h1 {
    font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;
    max-width: 14ch; text-wrap: balance; margin-top: 18px;
  }
  .c-left .lead { margin-top: 22px; font-size: 18px; color: var(--muted); line-height: 1.6; max-width: 44ch; text-wrap: pretty; }

  .c-channels { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
  .c-channel {
    display: flex; align-items: center; gap: 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
  }
  .c-channel:hover { transform: translateX(3px); border-color: var(--line-strong); background: var(--card-2); }
  .c-channel .c-ic {
    width: 44px; height: 44px; flex: none; border-radius: 11px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .c-channel.wa .c-ic { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
  .c-channel .c-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .c-channel .c-meta b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
  .c-channel .c-meta span { font-size: 13.5px; color: var(--muted); }
  .c-channel .c-go { margin-left: auto; color: var(--muted-2); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
  .c-channel:hover .c-go { color: var(--fg); transform: translateX(3px); }

  .c-trust { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .c-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
  .c-trust .tick {
    width: 18px; height: 18px; flex: none; border-radius: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }

  /* Form card */
  .c-form-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 22px;
    padding: 40px; position: relative;
  }
  .c-form-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
  .c-form-card .sub { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
  .c-form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field label { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
  .field label .req { color: var(--muted-2); font-weight: 400; }
  .field input, .field select, .field textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--fg);
    background: #0c0c0e; border: 1px solid var(--line-strong); border-radius: 11px;
    padding: 13px 15px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    -webkit-appearance: none; appearance: none;
  }
  .field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  }
  .field select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6l5-4.5' stroke='%236f6f76' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; }
  .budget-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer;
    background: #0c0c0e; border: 1px solid var(--line-strong); border-radius: 100px; padding: 9px 16px;
    transition: all 0.2s var(--ease);
  }
  .chip:hover { color: var(--fg); border-color: rgba(255,255,255,0.4); }
  .chip.active { background: #fff; color: #0a0a0b; border-color: #fff; }
  .c-submit { margin-top: 6px; width: 100%; font-size: 16px; padding: 15px; }
  .c-form-note { margin-top: 14px; font-size: 12.5px; color: var(--muted-2); text-align: center; line-height: 1.5; }

  /* Success state */
  .c-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 30px 10px; }
  .c-success.show { display: flex; }
  .c-form-card.done .c-form, .c-form-card.done > h2, .c-form-card.done > .sub { display: none; }
  .c-success .s-ic {
    width: 64px; height: 64px; border-radius: 50%; background: #1f8a4c; color: #fff;
    display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  }
  .c-success h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
  .c-success p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 34ch; }
  .c-success .btn { margin-top: 26px; }

  /* What happens next */
  .next { padding: 20px 0 90px; }
  .next-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .next-card { padding: 30px 28px; position: relative; }
  .next-step {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--white);
    margin-bottom: 20px;
  }
  .next-card h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .next-card p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
  .next-card .when { margin-top: 16px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--muted-2); letter-spacing: 0.04em; }

  @media (max-width: 900px) {
    .contact { padding: 110px 0 60px; }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .next-grid { grid-template-columns: 1fr; max-width: 460px; }
  }
  @media (max-width: 600px) {
    .c-form-card { padding: 28px 22px; }
    .field.row2 { grid-template-columns: 1fr; }
  }

/* ================================================
   PAGE: page-cotizador.php
================================================ */

  /* Cotizador button state */
  .btn-solid:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

  /* 6th mobile nav item (Cotizador has 6 links) */
  body.menu-open .mm-links a:nth-child(6) { animation-delay: 0.33s; }

  /* ---------- Hero ---------- */
  .q-hero { padding: 120px 0 28px; text-align: center; position: relative; overflow: hidden; }
  .q-hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.5px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 18%, #000 0%, transparent 75%);
    mask-image: radial-gradient(60% 70% at 50% 18%, #000 0%, transparent 75%);
    pointer-events: none;
  }
  .q-hero > * { position: relative; z-index: 1; }
  .q-hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; max-width: 18ch; margin: 16px auto 0; text-wrap: balance; }
  .q-hero p { margin: 22px auto 0; max-width: 58ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); line-height: 1.6; text-wrap: pretty; }

  /* ---------- Layout ---------- */
  .quote-section { padding: 30px 0 56px; }
  .quote-layout { display: grid; grid-template-columns: 1fr 392px; gap: 26px; align-items: start; }
  .config-col { display: flex; flex-direction: column; gap: 18px; }

  /* Preset quick-start */
  .presets-head { margin-bottom: 2px; }
  .presets-head b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .presets-head span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
  .presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .preset {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 18px; cursor: pointer; text-align: left;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    font-family: inherit; color: var(--fg);
  }
  .preset:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--card-2); }
  .preset.sel { border-color: rgba(255,255,255,0.4); background: var(--card-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
  .preset.sel .p-ic { background: var(--white); border-color: var(--white); color: #0a0a0b; }
  .preset .p-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--white); margin-bottom: 14px; }
  .preset b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .preset span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }

  /* Section cards */
  .q-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
  .q-card-head { display: flex; align-items: baseline; gap: 12px; }
  .q-num { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); }
  .q-card-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
  .q-card-head p.hint { width: 100%; margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

  /* Pages stepper */
  .pages-row { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
  .pages-row .pr-label b { font-size: 15.5px; font-weight: 600; }
  .pages-row .pr-label span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted-2); }
  .stepper { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 4px; background: rgba(255,255,255,0.02); }
  .stepper button {
    width: 40px; height: 40px; border-radius: 9px; border: none; cursor: pointer;
    background: rgba(255,255,255,0.06); color: var(--fg); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center; font-family: inherit;
    transition: background 0.2s var(--ease);
  }
  .stepper button:hover { background: rgba(255,255,255,0.14); }
  .stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
  .stepper .count { min-width: 46px; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

  .tier-table { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 11px; }
  .tier-table .tt-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
  .tier-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); }
  .tier-row.on { color: var(--fg); }
  .tier-row .tr-tag { display: inline-flex; align-items: center; gap: 9px; }
  .tier-row .tr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
  .tier-row.on .tr-dot { background: var(--good); }
  .tier-row b { font-weight: 600; color: inherit; }

  /* Option cards (toggles) */
  .opt-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .opt-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 13px;
    padding: 16px 16px; cursor: pointer; position: relative;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .opt-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.03); }
  .opt-card.sel { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); }
  .opt-input { position: absolute; opacity: 0; pointer-events: none; }
  .opt-box {
    flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
    border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
    display: flex; align-items: center; justify-content: center; color: #0a0a0b;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .opt-box svg { opacity: 0; transition: opacity 0.15s var(--ease); }
  .opt-card.sel .opt-box { background: var(--white); border-color: var(--white); }
  .opt-card.sel .opt-box svg { opacity: 1; }
  .opt-main { flex: 1; min-width: 0; }
  .opt-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .opt-title b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
  .opt-price { font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
  .opt-desc { margin-top: 4px; font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }

  /* Radio cards (delivery / maintenance) */
  .radio-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .radio-grid.two { grid-template-columns: repeat(3, 1fr); }
  .radio-card {
    background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 13px;
    padding: 18px 16px; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 5px;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .radio-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.03); }
  .radio-card.sel { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); }
  .radio-card input { position: absolute; opacity: 0; pointer-events: none; }
  .radio-card .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .radio-card b { font-size: 14.5px; font-weight: 600; }
  .radio-card .rc-time { font-size: 12.5px; color: var(--muted-2); }
  .radio-card .rc-cost { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 2px; }
  .rc-mark { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; display: flex; align-items: center; justify-content: center; }
  .rc-mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--white); transform: scale(0); transition: transform 0.18s var(--ease); }
  .radio-card.sel .rc-mark { border-color: var(--white); }
  .radio-card.sel .rc-mark::after { transform: scale(1); }

  /* Contact form */
  .field-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .page-cotizador .field { display: flex; flex-direction: column; gap: 7px; }
  .page-cotizador .field.full { grid-column: 1 / -1; }
  .page-cotizador .field label { font-size: 13px; font-weight: 500; color: var(--muted); }
  .page-cotizador .field label .req { color: var(--fg); }
  .page-cotizador .field input, .page-cotizador .field textarea, .page-cotizador .field select {
    background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong); border-radius: 11px;
    padding: 13px 14px; color: var(--fg); font-size: 14.5px; font-family: inherit; width: 100%;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .page-cotizador .field input::placeholder, .page-cotizador .field textarea::placeholder { color: var(--muted-2); }
  .page-cotizador .field input:focus, .page-cotizador .field textarea:focus, .page-cotizador .field select:focus { outline: none; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); }
  .page-cotizador .field textarea { resize: vertical; min-height: 88px; }
  .page-cotizador .field.err input, .page-cotizador .field.err textarea { border-color: oklch(0.62 0.2 25); }
  .page-cotizador .field .err-msg { font-size: 12px; color: oklch(0.72 0.18 25); display: none; }
  .page-cotizador .field.err .err-msg { display: block; }

  /* ---------- Summary ---------- */
  .summary-col { position: sticky; top: 92px; }
  .summary {
    background: #0c0c0e; border: 1px solid var(--line-strong); border-radius: 20px;
    padding: 26px 24px; overflow: hidden;
  }
  .summary h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
  .sum-group { margin-top: 18px; }
  .sum-group + .sum-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .sum-group-title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 11px; }
  .sum-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
  .sum-line .sl-name { color: var(--muted); }
  .sum-line .sl-name small { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
  .sum-line .sl-val { color: var(--fg); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sum-empty { font-size: 13.5px; color: var(--muted-2); line-height: 1.5; padding: 6px 0; }

  .sum-saving {
    margin-top: 16px; display: flex; align-items: center; gap: 10px;
    background: color-mix(in oklch, var(--good) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--good) 32%, transparent);
    border-radius: 11px; padding: 11px 13px; font-size: 13px; color: var(--fg); line-height: 1.4;
  }
  .sum-saving .s-ic { flex: none; color: var(--good); display: flex; }
  .sum-saving b { color: var(--good); }

  .sum-total { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
  .sum-total .st-row { display: flex; align-items: baseline; justify-content: space-between; }
  .sum-total .st-label { font-size: 14px; color: var(--muted); }
  .sum-total .st-big { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
  .sum-total .st-cur { font-size: 13px; color: var(--muted-2); margin-left: 2px; }
  .sum-monthly { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
  .sum-monthly b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

  .monthly-block { margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--line-strong); }
  .monthly-block .mb-head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
  .monthly-block .mb-head small { font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; color: var(--muted-2); font-weight: 500; }
  .monthly-block .sum-line .sl-val { color: var(--muted); font-weight: 500; }
  .monthly-block .mb-total { margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; }
  .monthly-block .mb-total span { font-size: 13.5px; color: var(--fg); font-weight: 600; }
  .monthly-block .mb-total b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; }
  .monthly-block .mb-total b small { font-size: 12px; color: var(--muted-2); font-weight: 500; }

  .summary .btn { margin-top: 20px; width: 100%; }
  .sum-note { margin-top: 13px; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; text-align: center; }

  /* Mobile sticky bar */
  .mobile-bar { display: none; }

  /* ---------- Confirmation modal ---------- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6,6,8,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
  }
  .modal-overlay.open { opacity: 1; visibility: visible; }
  .modal {
    width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--line-strong);
    border-radius: 22px; padding: 40px 38px; text-align: center; position: relative;
    transform: translateY(14px) scale(0.98); transition: transform 0.35s var(--ease);
    max-height: 90vh; overflow-y: auto;
  }
  .modal-overlay.open .modal { transform: none; }
  .modal-check {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
    background: color-mix(in oklch, var(--good) 18%, transparent);
    border: 1px solid color-mix(in oklch, var(--good) 40%, transparent);
    display: flex; align-items: center; justify-content: center; color: var(--good);
  }
  .modal h2 { margin-top: 22px; font-size: 27px; font-weight: 700; letter-spacing: -0.03em; }
  .modal > p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
  .modal-folio { margin-top: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .modal-folio .mf-l { font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; }
  .modal-folio .mf-v { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; font-weight: 600; color: var(--fg); }
  .modal-total { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .modal-total span { font-size: 14px; color: var(--muted); }
  .modal-total b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
  .modal-steps { margin-top: 22px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
  .modal-step { display: flex; gap: 13px; align-items: flex-start; }
  .modal-step .ms-n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
  .modal-step .ms-t b { font-size: 14.5px; font-weight: 600; }
  .modal-step .ms-t p { margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }
  .modal .btn-row { margin-top: 28px; display: flex; gap: 12px; }
  .modal .btn-row .btn { flex: 1; }

  /* Asterisco de alcance */
  .ast { color: var(--muted-2); font-size: 0.78em; font-weight: 700; vertical-align: super; }

  /* ---------- Terms ---------- */
  .terms { padding: 0 0 20px; }
  .terms-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; }
  .terms-box h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
  .terms-box h3 .th-ast { color: var(--muted-2); font-weight: 700; }
  .terms-box > p { margin-top: 8px; font-size: 13px; color: var(--muted-2); line-height: 1.55; max-width: 70ch; }
  .terms-list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 44px; }
  .terms-list li { font-size: 13px; color: var(--muted); line-height: 1.55; display: flex; gap: 9px; }
  .terms-list li b { color: var(--fg); font-weight: 600; }
  .terms-list .tx-ast { color: var(--fg); font-weight: 700; flex: none; }

  /* ---------- Mobile & Responsive ---------- */
  @media (max-width: 980px) {
    .quote-layout { grid-template-columns: 1fr; }
    .summary-col { position: static; }
    .summary { display: none; }
    .mobile-bar {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
      background: rgba(10,10,11,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--line-strong); padding: 14px 20px;
    }
    .mobile-bar .mb-total span { font-size: 11.5px; color: var(--muted-2); display: block; }
    .mobile-bar .mb-total b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
    .mobile-bar .btn { flex: none; }
    .quote-section { padding-bottom: 110px; }
    .mobile-detail { display: block; }
  }
  @media (max-width: 620px) {
    .q-hero { padding: 90px 0 18px; }
    /* El hint baja debajo del título (nº + título en línea 1, hint en línea 2) */
    .q-card-head { flex-wrap: wrap; }
    .presets { grid-template-columns: 1fr; }
    .opt-grid { grid-template-columns: 1fr; }
    .radio-grid, .radio-grid.two { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr; }
    .q-card { padding: 22px 20px; }
    .modal { padding: 32px 24px; }
    .terms-list { grid-template-columns: 1fr; }
    .terms-box { padding: 24px 20px; }
  }
  .mobile-detail { display: none; margin-top: 18px; }
  @media (max-width: 980px) {
    .mobile-detail .summary { display: block; position: static; }
  }

/* ================================================
   PAGE: page-desarrollo-de-apps.php
================================================ */

  /* ---------- CTA overrides (service page variant) ---------- */
  .page-desarrollo-de-apps .final-cta { padding: 60px 0 100px; }
  .page-desarrollo-de-apps .cta-video {
    z-index: 0; opacity: 0.38;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
  }

/* ================================================
   PAGE: page-laboratorio.php
================================================ */

  .feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .feat-body > p { margin-top: 16px; font-size: 16px; color: var(--muted); line-height: 1.65; }
  .post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ph-1 { background: linear-gradient(135deg, #1c1922 0%, #0d0e12 100%); }
  .ph-2 { background: linear-gradient(135deg, #15201e 0%, #0d0e12 100%); }
  .ph-3 { background: linear-gradient(135deg, #1a1b24 0%, #0d0e12 100%); }
  .ph-4 { background: linear-gradient(135deg, #221b18 0%, #0d0e12 100%); }
  .ph-5 { background: linear-gradient(135deg, #181f24 0%, #0d0e12 100%); }
  .ph-6 { background: linear-gradient(135deg, #1e1a20 0%, #0d0e12 100%); }
  .post-body > p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; }
  .news-card > div > p { margin-top: 14px; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
  .no-posts { padding: 80px 0; text-align: center; color: var(--muted); font-size: 16px; }

/* ================================================
   PAGE: page-marketing-digital.php
================================================ */

  /* ---------- CTA overrides (service page variant) ---------- */
  .page-marketing-digital .final-cta { padding: 60px 0 100px; }
  .page-marketing-digital .cta-video {
    z-index: 0; opacity: 0.38;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
  }

/* ================================================
   PAGE: page-nosotros.php
================================================ */

  /* Video background for svc-hero */
  .page-nosotros .svc-hero::after { z-index: 1; }
  .svc-hero-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 94%);
    pointer-events: none;
  }
  .svc-hero-scrim {
    position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(80% 65% at 50% 34%, rgba(8,8,10,0.74) 0%, rgba(8,8,10,0.34) 55%, transparent 100%),
      linear-gradient(180deg, rgba(8,8,10,0.5) 0%, transparent 32%);
    pointer-events: none;
  }
  .page-nosotros .svc-hero > .wrap { position: relative; z-index: 2; }

/* ===== Nosotros page ===== */
  .manifesto { padding: 30px 0 70px; }
  .manifesto-inner {
    display: grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: start;
  }
  .manifesto-lead {
    font-size: clamp(26px, 3vw, 38px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 600;
    text-wrap: balance;
  }
  .manifesto-lead .accent { color: #c96342; }
  .manifesto-body p { font-size: 16.5px; color: var(--muted); line-height: 1.7; }
  .manifesto-body p + p { margin-top: 18px; }

  .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
  .about-stat { border-top: 1px solid var(--line); padding-top: 22px; }
  .about-stat b { display: block; font-size: clamp(36px, 4vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--white); }
  .about-stat span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.45; }

  .values { padding: 70px 0; }
  .values-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .value-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
  .value-card:hover { border-color: var(--line-strong); background: var(--card-2); }
  .value-card .v-icon {
    width: 44px; height: 44px; border-radius: 11px; margin-bottom: 20px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .value-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .value-card p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

  .page-nosotros .process { padding: 30px 0 80px; }
  .process-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .page-nosotros .proc-card {
    position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 28px 32px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .page-nosotros .proc-card:hover { border-color: var(--line-strong); background: var(--card-2); }
  .page-nosotros .proc-step {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0.06em;
    color: var(--muted-2);
  }
  .proc-num {
    font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
    color: var(--white); margin-top: 8px;
  }
  .proc-card h3 { margin-top: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .page-nosotros .proc-card p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
  .proc-meta {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted-2); display: flex; align-items: center; gap: 8px;
  }
  .proc-meta svg { flex: none; color: var(--white); opacity: 0.7; }

  .certs { padding: 30px 0 80px; }
  .certs-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .cert-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 28px; display: flex; flex-direction: column;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .cert-card:hover { border-color: var(--line-strong); background: var(--card-2); }
  .cert-logo {
    height: 30px; width: auto; max-width: 130px;
    align-self: flex-start;
    display: block; margin-bottom: 24px; opacity: 0.92;
  }
  .cert-logo.is-svg { filter: brightness(0) invert(1); }
  .cert-org { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
  .cert-card p { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
  .cert-tag {
    margin-top: auto; padding-top: 18px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px;
    letter-spacing: 0.05em; color: var(--muted-2); text-transform: uppercase;
  }

  .team { padding: 30px 0 80px; }
  .team-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .team-card { display: flex; flex-direction: column; }
  .team-photo {
    aspect-ratio: 1 / 1; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.008) 14px 28px),
      radial-gradient(120% 100% at 50% 0%, #1b1b20 0%, #0c0c0e 70%);
  }
  .team-photo .ph-label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--muted-2); text-transform: uppercase; }
  .team-card h4 { margin-top: 16px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
  .team-card span { margin-top: 4px; font-size: 13.5px; color: var(--muted-2); }

  @media (max-width: 900px) {
    .manifesto-inner { grid-template-columns: 1fr; gap: 32px; }
    .about-stats { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .values-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
    .certs-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .about-stats { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .certs-grid { grid-template-columns: 1fr; }
  }

/* ================================================
   PAGE: page-precios.php
================================================ */

/* ===== Precios page ===== */
  .price-cat { padding: 30px 0 50px; }
  .price-cat .section-head { max-width: 720px; }
  .page-precios .cat-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px; letter-spacing: 0.06em; color: var(--muted-2);
    border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px;
  }

  /* Tier cards (3-up) */
  .tier-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  .tier {
    position: relative;
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 38px 32px; display: flex; flex-direction: column;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .tier:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .tier.featured { background: #fff; color: #0a0a0b; border-color: #fff; }
  .tier.featured .tier-name,
  .tier.featured .tier-price b,
  .tier.featured .tier-feats li { color: #0a0a0b; }
  .tier.featured .tier-desc,
  .tier.featured .tier-price .per,
  .tier.featured .tier-note { color: #55555c; }
  .tier.featured .tick { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #0a0a0b; }
  .tier.featured .tier-feats li .tick svg { stroke: #0a0a0b; }
  .tier-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    background: #0a0a0b; color: #fff; padding: 6px 14px; border-radius: 100px; white-space: nowrap;
  }
  .tier-name { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg); }
  .tier-desc { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 42px; }
  .tier-price { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .tier-price .pre { font-size: 13px; color: var(--muted-2); width: 100%; }
  .tier-price b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--white); }
  .tier-price .per { font-size: 14px; color: var(--muted-2); }
  .tier .btn { margin-top: 26px; width: 100%; }
  .tier-feats { list-style: none; margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; }
  .tier-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--fg); line-height: 1.4; }
  .tier-feats .tick {
    flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .tier-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-2); }
  .tier.featured .tier-note { border-color: rgba(0,0,0,0.1); }

  /* One-time web packages (row) */
  .pkg-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pkg {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px 30px;
    display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .pkg:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .pkg-ic {
    width: 48px; height: 48px; margin-bottom: 22px;
    display: flex; align-items: center; justify-content: center;
  }
  .pkg-ic img { width: 100%; height: 100%; display: block; }
  .pkg h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
  .pkg > p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; flex: 1; }
  .pkg-price { margin-top: 22px; display: flex; align-items: baseline; gap: 7px; }
  .pkg-price .pre { font-size: 13px; color: var(--muted-2); }
  .pkg-price .per { font-size: 13px; color: var(--muted-2); }
  .pkg-price b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
  .pkg-feats { list-style: none; margin: 20px 0 0; display: flex; flex-direction: column; gap: 9px; }
  .pkg-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; color: var(--muted); }
  .pkg-feats .dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); margin-top: 8px; }
  .pkg .btn { margin-top: 26px; width: 100%; }

  /* AI agent cards */
  .agent-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .agent {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px 30px;
    display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .agent:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .agent-ic {
    width: 48px; height: 48px; border-radius: 13px; margin-bottom: 22px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .agent h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
  .agent > p { margin-top: 9px; font-size: 14.5px; color: var(--muted); line-height: 1.55; flex: 1; }
  .agent-price { margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 24px; }
  .agent-price .ap { display: flex; flex-direction: column; gap: 3px; }
  .agent-price .ap b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
  .agent-price .ap span { font-size: 12px; color: var(--muted-2); }
  .agent-feats { list-style: none; margin: 20px 0 0; display: flex; flex-direction: column; gap: 9px; }
  .agent-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; color: var(--muted); }
  .agent-feats .dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); margin-top: 8px; }
  .agent .btn { margin-top: 26px; width: 100%; }
  .agent-wa { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--muted-2); transition: color 0.2s var(--ease); }
  .agent-wa:hover { color: var(--fg); }

  /* FAQ */
  .page-precios .faq { padding: 60px 0 80px; }
  .faq-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
  .page-precios .faq-item { border-top: 1px solid var(--line); padding-top: 22px; }
  .faq-item h4 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
  .faq-item p { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

  .price-disclaimer { margin-top: 22px; font-size: 13px; color: var(--muted-2); }

  @media (max-width: 900px) {
    .tier-grid, .pkg-grid, .agent-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .tier.featured { order: -1; }
    .faq-grid { grid-template-columns: 1fr; }
  }

  /* Custom / quote banner (background video variant) */
  .page-precios .custom-banner::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1.3px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(80% 120% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(80% 120% at 100% 0%, #000, transparent 70%);
    pointer-events: none;
  }
  .custom-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0.6; pointer-events: none;
  }
  .custom-bg-scrim {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.8) 42%, rgba(8,8,10,0.55) 100%),
      linear-gradient(180deg, rgba(8,8,10,0.45) 0%, transparent 40%, rgba(8,8,10,0.5) 100%);
  }

  @media (max-width: 600px) {
    .tier-grid, .pkg-grid, .agent-grid { max-width: 100%; }
    .tier { padding: 30px 24px; }
    .faq-grid { grid-template-columns: 1fr; }
    .page-precios .custom-banner { padding: 28px 22px; }
  }

/* ================================================
   PAGE: page-privacidad.php
================================================ */

/* ---------- Privacy / Legal ---------- */
  .legal-hero { padding: 140px 0 50px; position: relative; }
  .legal-hero::before {
    content: ""; position: absolute; top: -160px; left: 50%;
    transform: translateX(-50%);
    width: 720px; height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
    pointer-events: none;
  }
  .legal-hero h1 {
    margin-top: 16px; font-size: clamp(34px, 5vw, 56px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1.02;
  }
  .legal-hero .lead {
    margin-top: 18px; font-size: 17px; color: var(--muted); max-width: 60ch; line-height: 1.6;
  }
  .legal-meta {
    margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px;
  }
  .legal-meta span {
    font-size: 12.5px; color: var(--muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0.02em; background: var(--card); border: 1px solid var(--line);
    border-radius: 100px; padding: 7px 14px;
  }

  .legal { padding: 30px 0 100px; }
  .legal-grid {
    display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start;
  }

  /* Sticky table of contents */
  .legal-toc { position: sticky; top: 96px; }
  .legal-toc h4 {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-2); margin-bottom: 16px;
  }
  .legal-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
  .legal-toc a {
    display: flex; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--muted);
    line-height: 1.4; transition: color 0.2s var(--ease); counter-increment: toc;
  }
  .legal-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px;
    color: var(--muted-2); flex: none; padding-top: 1px;
  }
  .legal-toc a:hover, .legal-toc a.active { color: var(--fg); }

  .legal-article { max-width: 720px; }
  .legal-block { padding-bottom: 40px; }
  .legal-block + .legal-block { border-top: 1px solid var(--line); padding-top: 40px; }
  .legal-block h2 {
    font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2;
    display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 96px;
  }
  .legal-block h2 .num {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px;
    font-weight: 500; color: var(--muted-2); flex: none;
  }
  .legal-block h3 {
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
    margin-top: 26px;
  }
  .legal-block p {
    margin-top: 14px; font-size: 15.5px; color: var(--muted); line-height: 1.7;
    text-wrap: pretty;
  }
  .legal-block p strong, .legal-block li strong { color: var(--fg); font-weight: 600; }
  .legal-block ul { margin-top: 14px; padding-left: 4px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
  .legal-block ul li {
    position: relative; padding-left: 22px; font-size: 15.5px; color: var(--muted); line-height: 1.65;
  }
  .legal-block ul li::before {
    content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--muted-2);
  }
  .legal-block a.inline-link { color: #c96342; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,99,66,0.4); }
  .legal-block a.inline-link:hover { text-decoration-color: var(--fg); }

  .legal-callout {
    margin-top: 22px; background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; padding: 22px 24px;
  }
  .legal-callout p { margin-top: 0; }
  .legal-callout p + p { margin-top: 10px; }
  .arco-grid {
    margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  }
  .arco-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  }
  .arco-card b { font-size: 15px; color: var(--fg); letter-spacing: -0.01em; }
  .arco-card span { display: block; margin-top: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

  @media (max-width: 900px) {
    .legal-hero { padding: 110px 0 40px; }
    .legal-grid { grid-template-columns: 1fr; gap: 36px; }
    .legal-toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
    .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
    .arco-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .legal-hero { padding: 90px 0 30px; }
    .legal-hero h1 { font-size: clamp(28px, 8vw, 40px); }
    .legal-block h2 { font-size: 20px; }
    .legal-toc ol { grid-template-columns: 1fr; }
    .arco-grid { grid-template-columns: 1fr; }
  }

/* ================================================
   PAGE: page-servicios.php
================================================ */

  /* ---------- Servicios ---------- */
  .svc-list .wrap { display: flex; flex-direction: column; gap: 28px; }
  .svc-row .btn { margin-top: 28px; }
  .svc-list { padding: 40px 0 60px; display: flex; flex-direction: column; gap: 28px; }
  .svc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 48px;
    transition: border-color 0.3s var(--ease);
  }
  .svc-row:hover { border-color: var(--line-strong); }
  .svc-row.flip .svc-text { order: 2; }
  .svc-row.flip .svc-media { order: 1; }
  .svc-index {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px; letter-spacing: 0.1em; color: var(--muted-2);
    display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  }
  .svc-index::after { content: ""; height: 1px; flex: 1; background: var(--line); }
  .svc-text h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700; }
  .svc-text > p { margin-top: 16px; font-size: 16.5px; color: var(--muted); line-height: 1.6; max-width: 46ch; }
  .svc-feats { list-style: none; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .svc-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--fg); }
  .svc-feats .tick {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .svc-media {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4 / 3; border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.008) 14px 28px),
      radial-gradient(120% 100% at 50% 0%, #1b1b20 0%, #0c0c0e 70%);
  }
  .svc-media .svc-icon-lg {
    width: 64px; height: 64px; border-radius: 16px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .svc-media .svc-ph-label {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px; letter-spacing: 0.04em; color: var(--muted-2); text-transform: uppercase;
  }
  .svc-media .svc-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }

  /* Process strip (servicios variant — differs from the agentes-de-ia/desarrollo/marketing/video-generativo "process" recipe) */
  .page-servicios .process { padding: 60px 0 30px; }
  .page-servicios .proc-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .page-servicios .proc-card { padding: 4px; }
  .page-servicios .proc-card h4 { margin-top: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .page-servicios .proc-card p { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
  .page-servicios .proc-card .proc-bar { height: 2px; background: var(--line); margin-top: 18px; position: relative; }
  .page-servicios .proc-card .proc-bar::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 32px; background: var(--white); }

  @media (max-width: 900px) {
    .svc-row { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
    .svc-row.flip .svc-text { order: 1; }
    .svc-row.flip .svc-media { order: 2; }
  }
  @media (max-width: 600px) {
    .svc-row { padding: 26px 22px; }
  }

/* ================================================
   PAGE: page-soluciones.php
================================================ */

  /* Video background for svc-hero */
  .page-soluciones .svc-hero::after { z-index: 1; }
  .page-soluciones .svc-hero > .wrap { position: relative; z-index: 2; }

/* ===== Soluciones page ===== */
  .sol-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .sol-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .sol-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .sol-top { display: flex; align-items: center; gap: 14px; }
  .sol-icon {
    width: 50px; height: 50px; flex: none;
    border-radius: 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .sol-need {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
  }
  .sol-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; margin-top: 2px; }
  .sol-card > p { margin-top: 18px; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
  .sol-feats { list-style: none; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
  .sol-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--fg); }
  .sol-feats .tick {
    flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white);
  }
  .sol-foot {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .sol-metric { display: flex; flex-direction: column; }
  .sol-metric b { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
  .sol-metric span { font-size: 12.5px; color: var(--muted-2); margin-top: 5px; }
  .sol-link {
    font-size: 14px; font-weight: 600; color: #c96342;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.25s var(--ease), gap 0.25s var(--ease);
  }
  .sol-card:hover .sol-link { color: #e8956f; gap: 10px; }

  @media (max-width: 900px) {
    .sol-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .sol-card { padding: 28px 24px; }
  }

/* ================================================
   PAGE: page-video-generativo.php
================================================ */

  .page-video-generativo h1.hero-title { font-size: clamp(40px, 6.4vw, 74px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 16ch; margin: 0 auto; text-wrap: balance; }

  /* ---------- CTA overrides (service page variant) ---------- */
  .page-video-generativo .final-cta { padding: 60px 0 100px; }
  .page-video-generativo .cta-video {
    z-index: 0; opacity: 0.38;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 90% at 50% 40%, #000 0%, transparent 80%);
  }

/* ================================================
   PAGE: single.php
================================================ */

/* ---------- Article ---------- */
  /* Reading progress */
  .read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--fg); z-index: 200; transition: width .1s linear;
  }

  .art-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

  .art-head { padding: 130px 0 0; }
  .breadcrumb {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted-2);
    font-family: ui-monospace,'SF Mono',Menlo,monospace;
  }
  .breadcrumb a { color: var(--muted-2); transition: color .2s var(--ease); }
  .breadcrumb a:hover { color: var(--fg); }
  .breadcrumb .sep { opacity: .5; }

  .art-tag {
    margin-top: 26px; display: inline-block; font-family: ui-monospace,'SF Mono',Menlo,monospace;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
  }
  .art-title {
    margin-top: 16px; max-width: 18ch; font-size: clamp(34px, 5.2vw, 60px); font-weight: 800;
    letter-spacing: -0.045em; line-height: 1.03; text-wrap: balance;
  }
  .art-dek {
    margin-top: 22px; max-width: 62ch; font-size: 19px; color: var(--muted); line-height: 1.55;
    text-wrap: pretty;
  }
  .art-byline {
    margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 34px; border-bottom: 1px solid var(--line);
  }
  .avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg,#2a2c34,#15161b);
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em;
  }
  .byline-info { display: flex; flex-direction: column; gap: 3px; }
  .byline-info b { font-size: 14.5px; font-weight: 600; }
  .byline-info span { font-size: 13px; color: var(--muted-2); }
  .byline-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted-2); }
  .byline-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

  /* Hero image */
  .art-hero-media {
    margin-top: 36px; height: clamp(280px, 42vw, 480px); border-radius: 20px; overflow: hidden;
    position: relative; border: 1px solid var(--line);
  }
  .art-hero-media .ph {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 120% at 78% 12%, rgba(255,255,255,0.12), transparent 55%),
      linear-gradient(135deg, #1c1e26 0%, #0c0d11 100%);
  }
  .art-hero-media .ph::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(70% 90% at 72% 25%, #000, transparent 72%);
    mask-image: radial-gradient(70% 90% at 72% 25%, #000, transparent 72%);
  }
  .art-hero-media .caption {
    position: absolute; left: 24px; bottom: 20px; font-family: ui-monospace,'SF Mono',Menlo,monospace;
    font-size: 12.5px; color: var(--muted); z-index: 1;
  }

  /* Body layout: content + sticky rail */
  .art-layout {
    padding: 56px 0 80px;
    display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; align-items: start;
  }
  .art-body { grid-column: 1; grid-row: 1; max-width: 720px; min-width: 0; }
  .art-rail { grid-column: 2; grid-row: 1; }

  .art-rail { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 30px; }
  .rail-toc h4, .rail-share h4 {
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-2); margin-bottom: 14px;
  }
  .rail-toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
  .rail-toc a {
    display: block; padding: 7px 0 7px 14px; font-size: 13.5px; color: var(--muted); line-height: 1.4;
    border-left: 2px solid var(--line); transition: color .2s var(--ease), border-color .2s var(--ease);
  }
  .rail-toc a:hover, .rail-toc a.active { color: var(--fg); border-left-color: var(--fg); }
  .rail-share .share-row { display: flex; gap: 8px; }
  .share-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card); color: var(--muted); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  }
  .share-btn:hover { color: var(--fg); border-color: var(--line-strong); transform: translateY(-2px); }

  /* Prose */
  .prose > * + * { margin-top: 22px; }
  .prose p { font-size: 17.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }
  .prose p .lead-in { color: var(--fg); }
  .prose h2 {
    margin-top: 52px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
    color: var(--fg); scroll-margin-top: 90px;
  }
  .prose h3 { margin-top: 34px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
  .prose strong { color: var(--fg); font-weight: 600; }
  .prose a.inline-link { color: #c96342; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,99,66,0.4); }
  .prose a.inline-link:hover { color: #e8956f; text-decoration-color: #e8956f; }
  .prose ul, .prose ol.num { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; padding-left: 4px; list-style: none; }
  .prose ul li, .prose ol.num li { position: relative; padding-left: 26px; font-size: 17px; color: var(--muted); line-height: 1.65; }
  .prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
  .prose ol.num { counter-reset: n; }
  .prose ol.num li { counter-increment: n; }
  .prose ol.num li::before {
    content: counter(n); position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
    border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-family: ui-monospace,'SF Mono',Menlo,monospace;
  }

  /* Pull quote */
  .pullquote {
    margin: 48px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--fg);
    font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--fg);
    text-wrap: balance;
  }

  /* Stat row */
  .stat-row {
    margin: 44px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  }
  .stat-cell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
  .stat-cell b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
  .stat-cell span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

  /* Inline service CTA */
  .svc-cta {
    margin: 48px 0; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--line-strong);
    background: linear-gradient(135deg, #16171d 0%, #0c0d11 100%);
    position: relative;
  }
  .svc-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(80% 120% at 85% 0%, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
  }
  .svc-cta-inner { position: relative; padding: 34px 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .svc-cta .kicker {
    font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted-2);
  }
  .svc-cta h4 { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
  .svc-cta p { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 46ch; }
  .svc-cta .svc-cta-text { flex: 1; min-width: 240px; }
  .svc-cta .btn svg { transition: transform .25s var(--ease); }
  .svc-cta .btn:hover svg { transform: translateX(3px); }

  /* Key takeaways */
  .takeaways {
    margin: 48px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px;
  }
  .takeaways h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
  .takeaways ul { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; list-style: none; }
  .takeaways li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--muted); line-height: 1.55; }
  .takeaways li .tk {
    position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center;
  }

  /* Author bio */
  .author-bio {
    margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line);
    display: flex; gap: 18px; align-items: flex-start;
  }
  .author-bio .avatar { width: 56px; height: 56px; font-size: 18px; }
  .author-bio .bio-text b { font-size: 16px; font-weight: 600; }
  .author-bio .bio-text .role { font-size: 13px; color: var(--muted-2); margin-top: 2px; }
  .author-bio .bio-text p { margin-top: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 60ch; }

  /* Related */
  .related { padding: 70px 0 100px; border-top: 1px solid var(--line); }
  .related .section-head { margin-bottom: 30px; }
  .related h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
  .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .rel-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease); }
  .rel-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .rel-thumb { height: 150px; position: relative; }
  .rel-thumb .ph { position: absolute; inset: 0; }
  .rel-body { padding: 22px; }
  .rel-body .post-tag { font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
  .rel-body h3 { margin-top: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; }
  .ph-thumb-after::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 90% at 65% 25%, #000, transparent 78%);
    mask-image: radial-gradient(80% 90% at 65% 25%, #000, transparent 78%);
  }

  @media (max-width: 960px) {
    .art-wrap { max-width: 768px; }
    .art-layout { grid-template-columns: 1fr; gap: 0; padding-top: 44px; }
    .art-rail { display: none; }
    .art-body { max-width: none; }
    .rel-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 620px) {
    .art-head { padding-top: 100px; }
    .stat-row { grid-template-columns: 1fr; }
    .prose p, .prose ul li { font-size: 16.5px; }
    .pullquote { font-size: 21px; }
    .svc-cta-inner { padding: 28px; }
    .rel-grid { grid-template-columns: 1fr; }
  }

/* ================================================
   PAGE: 404.php
================================================ */

  .nf-hero { padding: 160px 0 70px; text-align: center; position: relative; overflow: hidden; }
  .nf-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.5px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(60% 70% at 50% 20%, #000 0%, transparent 75%);
    pointer-events: none;
  }
  .nf-hero > * { position: relative; z-index: 1; }
  .nf-code {
    display: inline-block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: clamp(72px, 12vw, 140px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--fg);
    background: linear-gradient(180deg, var(--fg) 0%, var(--muted-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .nf-title {
    margin-top: 18px;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }
  .nf-sub {
    margin: 18px auto 0;
    max-width: 56ch;
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--muted);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nf-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  .nf-links { padding: 30px 0 100px; }
  .nf-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .nf-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 26px; display: flex; flex-direction: column; text-align: left;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .nf-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
  .nf-ic {
    width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; color: var(--white); margin-bottom: 20px;
  }
  .nf-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .nf-card p { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.55; flex: 1; }
  .nf-card .arrow {
    margin-top: 18px; font-size: 13.5px; font-weight: 600; color: #c96342;
    display: flex; align-items: center; gap: 6px; transition: color 0.25s var(--ease), gap 0.25s var(--ease);
  }
  .nf-card:hover .arrow { color: #e8956f; gap: 10px; }

  @media (max-width: 900px) {
    .nf-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .nf-hero { padding: 130px 0 50px; }
    .nf-grid { grid-template-columns: 1fr; }
    .nf-cta { flex-direction: column; align-items: stretch; }
  }

/* ================================================
   GLOBAL: Floating WhatsApp button
================================================ */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  height: 46px;
  padding: 0 20px 0 13px;
  border-radius: 100px;
  background: #178742;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); background: #12703a; box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08); }
.wa-float-icon { display: block; width: 24px; height: 24px; flex: none; }
.wa-float-text { display: block; }
body.menu-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 980px) {
  .yia-cotizador .wa-float { bottom: 92px; }
}
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; height: 44px; padding: 0 17px 0 11px; font-size: 14px; }
  .wa-float-icon { width: 22px; height: 22px; }
  .yia-cotizador .wa-float { bottom: 86px; }
}

/* ===== Chat sim (intro-media agentes) ===== */
.intro-media .chatsim,
.svc-media .chatsim{
  position:relative;
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(163,255,111,.04);
  isolation:isolate;
}
.intro-media:has(.chatsim),
.svc-media:has(.chatsim){
  aspect-ratio:auto;
  overflow:visible;
  height:auto;
  border:none;
  background:transparent;
}
.chatsim-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
/* Velo para legibilidad del chat sobre el video */
.intro-media .chatsim::after,
.svc-media .chatsim::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,13,13,.72),rgba(13,13,13,.88));
  pointer-events:none;
}
.chatsim-inner{
  position:relative;
  z-index:2;
}
.chatsim-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.chatsim-avatar{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(163,255,111,.18),rgba(155,89,245,.18));
  color:#a3ff6f;
}
.chatsim-id{display:flex;flex-direction:column;line-height:1.3;}
.chatsim-id b{font-size:14px;color:#fff;font-weight:600;}
.chatsim-id span{font-size:12px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:6px;}
.chatsim-live{
  width:7px;height:7px;border-radius:50%;background:#a3ff6f;
  box-shadow:0 0 0 0 rgba(163,255,111,.6);
  animation:chatsim-pulse 2s infinite;
}
@keyframes chatsim-pulse{
  0%{box-shadow:0 0 0 0 rgba(163,255,111,.5);}
  70%{box-shadow:0 0 0 6px rgba(163,255,111,0);}
  100%{box-shadow:0 0 0 0 rgba(163,255,111,0);}
}
.chatsim-body{
  padding:20px 18px;
  height:400px;
  display:flex;flex-direction:column;gap:12px;
  justify-content:flex-end;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 100%);
}
.chatsim-msg{
  max-width:80%;
  padding:11px 15px;
  border-radius:16px;
  font-size:14px;line-height:1.5;
  opacity:0;transform:translateY(10px);
  animation:chatsim-in .38s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes chatsim-in{to{opacity:1;transform:translateY(0);}}
.chatsim-msg.leaving,
.chatsim-card.leaving{
  animation:chatsim-out .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes chatsim-out{
  to{ opacity:0; transform:translateY(-8px); margin-top:-8px; }
}
.chatsim-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#d97757,#c96342);
  color:#fff;
  border-bottom-right-radius:5px;
}
.chatsim-msg.bot{
  align-self:flex-start;
  background:rgba(20,20,20,.85);
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.09);
  border-bottom-left-radius:5px;
  backdrop-filter:blur(4px);
}
.chatsim-typing{
  align-self:flex-start;
  display:inline-flex;gap:4px;
  padding:13px 16px;
  border-radius:16px;border-bottom-left-radius:5px;
  background:rgba(20,20,20,.85);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(4px);
}
.chatsim-typing i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.55);
  animation:chatsim-dot 1.2s infinite;
}
.chatsim-typing i:nth-child(2){animation-delay:.18s;}
.chatsim-typing i:nth-child(3){animation-delay:.36s;}
@keyframes chatsim-dot{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.chatsim-card{
  align-self:flex-start;max-width:80%;
  padding:13px 15px;border-radius:16px;border-bottom-left-radius:5px;
  background:rgba(163,255,111,.1);
  border:1px solid rgba(163,255,111,.3);
  color:#fff;font-size:13.5px;
  backdrop-filter:blur(4px);
  opacity:0;transform:translateY(10px);
  animation:chatsim-in .38s cubic-bezier(.2,.7,.3,1) forwards;
}
.chatsim-card b{color:#a3ff6f;display:block;margin-bottom:3px;font-size:12px;letter-spacing:.02em;text-transform:uppercase;}
.chatsim-card .slot{display:flex;align-items:center;gap:8px;font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .chatsim-msg,.chatsim-card{animation:none;opacity:1;transform:none;}
  .chatsim-typing i,.chatsim-live{animation:none;}
  .chatsim-bg{display:none;}
}

/* ── Paginación de archivos (categorías, etiquetas, etc.) ── */
.blog-list .pagination { margin-top: 48px; }
.blog-list .pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
}
.blog-list .pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.blog-list .pagination a.page-numbers:hover { color: var(--fg); border-color: var(--line-strong); }
.blog-list .pagination .page-numbers.current { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.blog-list .pagination .page-numbers.dots { background: none; border-color: transparent; }

/* ── Formulario de búsqueda ── */
.search-hero-form { margin-top: 24px; }
.yia-search-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  max-width: 520px;
}
.yia-search-input {
  flex: 1 1 240px; min-width: 0;
  font-family: inherit; font-size: 15px; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  padding: 12px 20px; transition: border-color .2s var(--ease);
}
.yia-search-input:focus { outline: none; border-color: var(--line-strong); }
.yia-search-input::placeholder { color: var(--muted); }
.yia-search-submit { white-space: nowrap; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Carrusel horizontal en móvil para la sección "Cómo trabajamos" (proceso)
   SOLO en la página de servicios (yia-servicios). Mismo patrón que los
   carruseles del home: track a sangre completa, solo scroll horizontal
   (touch-action pan-x), tarjetas siempre visibles y con margen inicial en la
   primera. Al final del archivo para asegurar precedencia sobre .proc-grid. */
@media (max-width: 600px) {
  .yia-servicios .proc-grid {
    display: flex; flex-flow: row nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding-block: 4px 10px;
  }
  .yia-servicios .proc-grid::-webkit-scrollbar { display: none; }
  .yia-servicios .proc-grid .proc-card { flex: 0 0 78%; scroll-snap-align: start; }
  .yia-servicios .proc-grid .proc-card.reveal { opacity: 1; transform: none; }
  .yia-servicios .proc-grid .proc-card:first-child { margin-left: 20px; }
  .yia-servicios .proc-grid .proc-card:last-child { margin-right: 20px; }
}

/* ── Carruseles horizontales en móvil para la página "Nosotros" ──
   Valores, "Cómo trabajamos" (proceso) y Formación/certificaciones.
   Mismo patrón: track a sangre completa, solo scroll horizontal, tarjetas
   siempre visibles y con margen inicial. Acotado a .yia-nosotros. */
@media (max-width: 600px) {
  .yia-nosotros .values-grid,
  .yia-nosotros .process-grid,
  .yia-nosotros .certs-grid {
    display: flex; flex-flow: row nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding-block: 4px 10px;
  }
  .yia-nosotros .values-grid::-webkit-scrollbar,
  .yia-nosotros .process-grid::-webkit-scrollbar,
  .yia-nosotros .certs-grid::-webkit-scrollbar { display: none; }

  .yia-nosotros .value-card,
  .yia-nosotros .process-grid .proc-card,
  .yia-nosotros .cert-card { scroll-snap-align: start; }

  /* Tarjetas siempre visibles (la animación reveal ocultaba las de fuera de pantalla) */
  .yia-nosotros .value-card.reveal,
  .yia-nosotros .process-grid .proc-card.reveal,
  .yia-nosotros .cert-card.reveal { opacity: 1; transform: none; }

  .yia-nosotros .value-card { flex: 0 0 82%; }
  .yia-nosotros .process-grid .proc-card { flex: 0 0 82%; }
  .yia-nosotros .cert-card { flex: 0 0 70%; }

  .yia-nosotros .values-grid .value-card:first-child,
  .yia-nosotros .process-grid .proc-card:first-child,
  .yia-nosotros .certs-grid .cert-card:first-child { margin-left: 20px; }
  .yia-nosotros .values-grid .value-card:last-child,
  .yia-nosotros .process-grid .proc-card:last-child,
  .yia-nosotros .certs-grid .cert-card:last-child { margin-right: 20px; }
}

/* ── Carruseles horizontales en móvil para la página "Precios" ──
   Sitios web y tiendas en línea (.pkg-grid) y Agentes de IA (.agent-grid).
   max-width:none cancela el centrado a 460px que aplica en móvil.
   Acotado a .yia-precios. */
@media (max-width: 600px) {
  .yia-precios .pkg-grid,
  .yia-precios .agent-grid {
    display: flex; flex-flow: row nowrap; gap: 12px;
    max-width: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding-block: 4px 10px;
  }
  .yia-precios .pkg-grid::-webkit-scrollbar,
  .yia-precios .agent-grid::-webkit-scrollbar { display: none; }

  .yia-precios .pkg-grid .pkg,
  .yia-precios .agent-grid .agent { scroll-snap-align: start; flex: 0 0 82%; }

  /* Tarjetas siempre visibles (reveal ocultaba las de fuera de pantalla) */
  .yia-precios .pkg-grid .pkg.reveal,
  .yia-precios .agent-grid .agent.reveal { opacity: 1; transform: none; }

  .yia-precios .pkg-grid .pkg:first-child,
  .yia-precios .agent-grid .agent:first-child { margin-left: 20px; }
  .yia-precios .pkg-grid .pkg:last-child,
  .yia-precios .agent-grid .agent:last-child { margin-right: 20px; }
}

/* ── Carrusel horizontal en móvil para la página "Contacto" ──
   Sección "Qué pasa después" (.next-grid). max-width:none cancela el
   centrado a 460px en móvil. Acotado a .yia-contacto. */
@media (max-width: 600px) {
  .yia-contacto .next-grid {
    display: flex; flex-flow: row nowrap; gap: 12px;
    max-width: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding-block: 4px 10px;
  }
  .yia-contacto .next-grid::-webkit-scrollbar { display: none; }
  .yia-contacto .next-grid .next-card { scroll-snap-align: start; flex: 0 0 82%; }
  .yia-contacto .next-grid .next-card.reveal { opacity: 1; transform: none; }
  .yia-contacto .next-grid .next-card:first-child { margin-left: 20px; }
  .yia-contacto .next-grid .next-card:last-child { margin-right: 20px; }
}

/* ── Marquee (carrusel infinito) de logos del home ──
   Los estilos base viven en "Social proof". Con reduced-motion se desactiva
   la animación y cae a un layout estático envuelto, sin duplicados. */
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos {
    overflow: visible; flex-wrap: wrap; justify-content: space-evenly; gap: 28px 40px;
    padding: 0 20px;
    -webkit-mask-image: none; mask-image: none;
  }
  .logos .logos-track { display: contents; animation: none; }
  .logos .logo-dup { display: none; }
  .logos .logo-ph { margin-right: 0; }
}
@media (max-width: 600px) {
  .logos .logo-ph { margin-right: 40px; }
}

/* ── Plasma animado (CSS puro, sin JS) — hero de Precios ──
   Manchas de color frías/calmadas con blur que se desplazan y escalan
   lentamente. Solo animan transform (GPU). Se funde con el fondo por máscara. */
.svc-hero .plasma {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 25%, transparent 92%);
}
.svc-hero .pl-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  will-change: transform;
}
.svc-hero .pl-1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: 6%; top: -16%;
  background: radial-gradient(circle at 50% 50%, #c96342 0%, rgba(201,99,66,0) 68%);
  animation: pl-move-1 14s ease-in-out infinite;
}
.svc-hero .pl-2 {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; right: 4%; top: -20%;
  background: radial-gradient(circle at 50% 50%, #e8956f 0%, rgba(232,149,111,0) 68%);
  animation: pl-move-2 16s ease-in-out infinite;
}
.svc-hero .pl-3 {
  width: 36vw; height: 36vw; max-width: 480px; max-height: 480px; left: 34%; top: 0%;
  background: radial-gradient(circle at 50% 50%, #c96342 0%, rgba(201,99,66,0) 68%);
  animation: pl-move-3 18s ease-in-out infinite;
}
.svc-hero .pl-4 {
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; right: 22%; top: -10%;
  background: radial-gradient(circle at 50% 50%, #e8956f 0%, rgba(232,149,111,0) 68%);
  animation: pl-move-4 15s ease-in-out infinite;
}
@keyframes pl-move-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(28%,20%) scale(1.35); }
  66%     { transform: translate(-14%,30%) scale(1.1); }
}
@keyframes pl-move-2 {
  0%,100% { transform: translate(0,0) scale(1.05); }
  33%     { transform: translate(-30%,22%) scale(0.8); }
  66%     { transform: translate(-12%,-18%) scale(1.15); }
}
@keyframes pl-move-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(24%,-26%) scale(1.4); }
  66%     { transform: translate(-22%,-12%) scale(1.05); }
}
@keyframes pl-move-4 {
  0%,100% { transform: translate(0,0) scale(1.1); }
  33%     { transform: translate(-26%,-22%) scale(0.9); }
  66%     { transform: translate(18%,-24%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero .pl-blob { animation: none; }
}

/* ── Tarjetas de contenido: fondo transparente que se colorea al hover ──
   Mismo patrón que .sel-card / .serv-card / .stat-card, replicado a todas las
   tarjetas de contenido en grid del sitio (blog, servicios, casos, nosotros,
   precios, soluciones, contacto, 404). Se coloca al final para ganar sobre las
   reglas base en cualquier ancho. Conservan su borde en reposo.
   NOTA: .use-card, .fmt-card y .next-card quedan FUERA de este patrón —
   usan el estilo bento tipo frame.io del bloque siguiente. */
.feat-card, .post-card, .rel-card, .proc-card,
.cf-card, .case-card, .value-card, .cert-card, .pkg, .agent,
.sol-card, .nf-card, .stat-cell, .arco-card {
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.feat-card:hover, .post-card:hover, .rel-card:hover, .proc-card:hover,
.cf-card:hover, .case-card:hover, .value-card:hover, .cert-card:hover, .pkg:hover, .agent:hover,
.sol-card:hover, .nf-card:hover, .stat-cell:hover, .arco-card:hover {
  background: var(--card-2);
  border-color: var(--line-strong);
}

/* ── Tarjetas bento (receta de frame.io) ──
   Gradiente diagonal con la esquina superior-izquierda "iluminada" (sus stops
   literales), filo interior hairline lavanda vía ::after en lugar de borde, y
   sombra profunda suave. Única fuente de verdad del acabado: las reglas base
   de cada clase solo definen layout. Va después del patrón de tarjetas
   transparentes para ganar la cascada. Réplicas inline: .sw-testi/.sw-guar
   (sitios-web) y .sx-guar (sitios-express). */
.use-card, .fmt-card, .next-card {
  position: relative;
  background: linear-gradient(140deg, #1b1b26 -41.97%, #09090d 77.06%);
  border: none; border-radius: var(--radius);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.use-card::after, .fmt-card::after, .next-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(157,157,255,0.05); pointer-events: none;
  transition: border-color .3s var(--ease);
}
.use-card:hover, .fmt-card:hover, .next-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 60px -24px rgba(0,0,0,.6);
}
.use-card:hover::after, .fmt-card:hover::after, .next-card:hover::after {
  border-color: rgba(157,157,255,0.14);
}

/* En móvil (sin hover) el borde de las tarjetas transparentes se ve un ~25% más:
   --line (0.08) → 0.10 para que el contorno resalte mejor. */
@media (max-width: 600px) {
  .sel-card, .serv-card, .stat-card,
  .feat-card, .post-card, .rel-card, .proc-card,
  .cf-card, .case-card, .value-card, .cert-card, .pkg, .agent,
  .sol-card, .nf-card, .stat-cell, .arco-card {
    border-color: rgba(255, 255, 255, 0.10);
  }
}

/* Carruseles horizontales en móvil para las páginas de agentes:
   "Qué hacen" y "Soluciones por industria" (.uses-grid), "Qué incluye"
   (.fmt-grid) y "Cómo trabajamos" (.proc-grid). Acotado por el body slug
   (yia-agentes-*) para no afectar esas mismas clases en otras páginas. */
@media (max-width: 600px) {
  body[class*="yia-agentes-"] .uses-grid,
  body[class*="yia-agentes-"] .fmt-grid,
  body[class*="yia-agentes-"] .proc-grid {
    display: flex; flex-flow: row nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px; margin-right: -20px;
    padding-block: 4px 10px;
  }
  body[class*="yia-agentes-"] .uses-grid::-webkit-scrollbar,
  body[class*="yia-agentes-"] .fmt-grid::-webkit-scrollbar,
  body[class*="yia-agentes-"] .proc-grid::-webkit-scrollbar { display: none; }
  body[class*="yia-agentes-"] .uses-grid .use-card,
  body[class*="yia-agentes-"] .fmt-grid .fmt-card,
  body[class*="yia-agentes-"] .proc-grid .proc-card { flex: 0 0 82%; scroll-snap-align: start; }
  body[class*="yia-agentes-"] .uses-grid .use-card.reveal,
  body[class*="yia-agentes-"] .fmt-grid .fmt-card.reveal,
  body[class*="yia-agentes-"] .proc-grid .proc-card.reveal { opacity: 1; transform: none; }
  body[class*="yia-agentes-"] .uses-grid .use-card:first-child,
  body[class*="yia-agentes-"] .fmt-grid .fmt-card:first-child,
  body[class*="yia-agentes-"] .proc-grid .proc-card:first-child { margin-left: 20px; }
  body[class*="yia-agentes-"] .uses-grid .use-card:last-child,
  body[class*="yia-agentes-"] .fmt-grid .fmt-card:last-child,
  body[class*="yia-agentes-"] .proc-grid .proc-card:last-child { margin-right: 20px; }
}

/* ── Paquete destacado + anclaje de precio ──
   Usado por las tarjetas .pkg de /precios/ y /sitios-web/. El destacado
   (.sw-featured) lleva badge "El más elegido", borde acento y leve escala en
   desktop; .sw-roi es la línea que mensualiza el precio bajo .pkg-price. */
.pkg { position: relative; }
.pkg.sw-featured {
  border-color: rgba(201,99,66,.5);
  background: linear-gradient(180deg, rgba(201,99,66,.08) 0%, transparent 45%), var(--card);
}
.pkg.sw-featured:hover { border-color: rgba(201,99,66,.75); }
@media (min-width: 901px) {
  .pkg.sw-featured { transform: scale(1.035); z-index: 1; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
  .pkg.sw-featured:hover { transform: scale(1.035) translateY(-4px); }
}
.sw-pkg-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: #c96342; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(201,99,66,.4);
}
.sw-roi { margin-top: 6px; font-size: 12.8px; line-height: 1.55; color: var(--muted); }
.sw-roi b { color: var(--fg); font-weight: 600; }
.pkg.sw-featured .sw-roi b { color: #e8a186; }
/* En los carruseles móviles el grid recorta lo que sobresale (overflow-y:
   hidden): más aire arriba para que el badge no se corte. */
@media (max-width: 600px) {
  .yia-precios .pkg-grid,
  .yia-sitios-web .pkg-grid { padding-block: 20px 10px; }
}

/* ── Dropdown "Servicios" del header ──
   El panel vive en header.php (#servicesDropdown); yialink-ui.js lo ancla al
   enlace /servicios/ del menú: clic para abrir/cerrar, Escape y clic fuera
   para cerrar. En móvil el mismo contenido alimenta un acordeón dentro
   del menú móvil (.mm-sub). */
.nav-dropdown {
  position: absolute; top: calc(100% - 4px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 680px; max-width: calc(100vw - 40px);
  background: rgba(15, 15, 17, 0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 12px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 99;
}
.nav-dropdown.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nd-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 14px; border-radius: 12px;
  transition: background 0.2s var(--ease);
}
.nd-item:hover { background: var(--card-2); }
/* Los íconos SVG (uploads/icon-*.svg) traen su propio marco naranja,
   así que el contenedor va limpio, sin fondo ni borde. */
.nd-ic {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.nd-ic img { width: 100%; height: 100%; display: block; }
.nd-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nd-txt b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.nd-txt span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Con 7 servicios el grid de 2 columnas quedaba con una celda vacía:
   "Ver todos" ocupa la fila completa al pie, como cierre del dropdown. */
.nd-item-all { grid-column: 1 / -1; }
/* Caret junto a "Servicios" (lo inyecta el JS) */
.nd-caret { display: inline-block; margin-left: 5px; vertical-align: 1px; transition: transform 0.2s var(--ease); }
a[aria-expanded="true"] .nd-caret { transform: rotate(180deg); }
@media (max-width: 900px) { .nav-dropdown { display: none; } }

/* ── Drill-down "Servicios" en el menú móvil (estilo panel de segundo nivel,
   como Webflow): tocar "Servicios" desliza el menú y entra un panel con
   encabezado [← | Servicios | espaciador] alineado a los mismos márgenes.
   La APERTURA es animada; el CIERRE es instantáneo (las transiciones viven
   solo en el estado .sub-open — al quitarlo no hay transición de regreso).
   Lo construye yialink-ui.js. ── */
.mm-drill .mm-drill-arrow {
  width: 20px; height: 20px; flex: none; color: var(--fg);
  transition: transform 0.25s var(--ease);
}
.mm-drill:hover .mm-drill-arrow { transform: translateX(5px); }

/* Con el panel abierto, el menú sube por ENCIMA del header del sitio
   (z-index 100): la barra del panel oculta el logo, como Webflow. Al
   regresar o cerrar, el header del sitio reaparece. */
.mobile-menu.sub-open { z-index: 110; }

.mm-panel {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(8, 8, 10, 0.99);
  display: flex; flex-direction: column;
  padding: 0 20px 28px; /* 20px = margen del logo/.wrap en móvil */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  visibility: hidden;
}
.mobile-menu.sub-open .mm-panel {
  transform: none; visibility: visible;
  transition: transform 0.4s var(--ease);
}

/* Barra del panel: [← regresar] [título centrado] [✕ cerrar] — fija arriba
   (sticky dentro del scroll del panel), a sangre completa y con fondo opaco
   para que el contenido pase por debajo al desplazarse. */
.mm-panel-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  margin: 0 -20px; padding: 14px 20px;
  background: rgba(8, 8, 10, 0.99);
  border-bottom: 1px solid var(--line);
}
.mm-back, .mm-close {
  flex: none; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--fg); cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.mm-back:hover, .mm-close:hover { border-color: rgba(255, 255, 255, 0.3); background: var(--card-2); }
.mm-panel-title {
  flex: 1; text-align: center;
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
}

.mm-panel-items { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.mm-panel-items .nd-item { padding: 13px 10px; margin: 0 -10px; }

/* Parallax del menú al abrir el panel; el regreso es instantáneo
   (la transición solo existe en .sub-open) */
.mobile-menu.sub-open .mm-links,
.mobile-menu.sub-open .mm-cta {
  transform: translateX(-10%); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

/* Entrada escalonada de los items — solo al abrir */
.mm-panel .nd-item { opacity: 0; transform: translateX(24px); }
.mobile-menu.sub-open .mm-panel .nd-item {
  opacity: 1; transform: none;
  transition: opacity 0.3s var(--ease), transform 0.36s var(--ease);
}
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(3) { transition-delay: 0.16s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(5) { transition-delay: 0.24s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(6) { transition-delay: 0.28s; }
.mobile-menu.sub-open .mm-panel .nd-item:nth-child(7) { transition-delay: 0.32s; }

/* ── Salida al "Volver" (estilo Webflow) ──
   Fase .sub-closing: la barra y los items se van en cascada hacia la
   IZQUIERDA (el lado contrario al de su entrada) con fade. Al terminar,
   el JS remueve .sub-open/.sub-closing y el menú anterior aparece de
   golpe (el estado base no tiene transición). */
.mobile-menu.sub-closing .mm-panel { pointer-events: none; }
.mobile-menu.sub-closing .mm-panel .mm-panel-head,
.mobile-menu.sub-closing .mm-panel .nd-item {
  opacity: 0; transform: translateX(-28px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.mobile-menu.sub-closing .mm-panel .mm-panel-head { transition-delay: 0s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(1) { transition-delay: 0s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(2) { transition-delay: 0.03s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(3) { transition-delay: 0.06s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(4) { transition-delay: 0.09s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(5) { transition-delay: 0.12s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(6) { transition-delay: 0.15s; }
.mobile-menu.sub-closing .mm-panel .nd-item:nth-child(7) { transition-delay: 0.18s; }

/* ================================================
   SECCIONES-TARJETA APILADAS (receta frame.io/enterprise)
   Activo en las páginas con clase de body .yia-stack (functions.php la
   agrega junto con js/yialink-stack.js, que mueve las tarjetas). Cada
   sección con .sx-panel se vuelve una tarjeta con gradiente a negro y
   esquinas redondeadas sobre fondo negro: la tarjeta EN PANTALLA queda
   encima (z-index descendente, vía JS) y sale por arriba en flujo normal
   — siempre legible —, mientras la siguiente entra POR DEBAJO, oscurecida
   por su velo (--sx-fade) y la sombra inferior de la de arriba, y emerge
   conforme la de arriba se aparta. Nació en /sitios-express/ y se
   compartió aquí al replicarse en el resto de las landings.
   Solo desktop: en móvil/tablet las páginas quedan exactamente igual.
================================================ */
@media (min-width: 1024px) {
  body.yia-stack { background: #000; }
  .yia-stack .sx-panel {
    position: relative;
    /* El gradiente de los "above default" de frame.io: termina en negro
       puro, así cada tarjeta aterriza en el fondo y en el footer */
    background: linear-gradient(167.52deg, #0d0e14 4.69%, #000 90.33%);
    border-radius: 36px;
    /* Aire interno con las proporciones de frame.io: ~150px arriba y
       ~240px abajo (asimétrico a propósito — el peso del respiro va
       donde ocurre la costura del efecto). Respiro total texto-a-texto
       por costura ≈ 360px, en el rango 250–460px que maneja frame.io. */
    padding: 150px 0 240px;
    /* Sombra grande y suave en el borde INFERIOR (dos capas, como los
       PNG de ~250px de frame.io): es la que la tarjeta en pantalla
       proyecta sobre la que emerge debajo — la lectura de profundidad */
    box-shadow:
      0 90px 140px -30px rgba(0, 0, 0, 0.88),
      0 28px 50px -14px rgba(0, 0, 0, 0.72),
      0 -34px 60px -22px rgba(0, 0, 0, 0.5);
  }
  /* Velo de desvanecido a negro de la tarjeta metida abajo. ::before y no
     ::after porque .contact::after ya existe (la trama de puntos del tema).
     z-index 5 dentro del stacking context que crea el transform de la
     tarjeta: cubre contenido, no recibe clics. */
  .yia-stack .sx-panel::before {
    content: "";
    position: absolute; inset: 0; z-index: 5;
    border-radius: inherit;
    background: #050609;
    opacity: var(--sx-fade, 0);
    pointer-events: none;
  }
  /* Las tarjetas se solapan un poco en reposo: la de abajo queda metida
     bajo las esquinas redondeadas de la de arriba, sin ranuras negras */
  .yia-stack .sx-panel + .sx-panel { margin-top: -32px; }
  /* Utilidades por página: la primera tarjeta se funde con el hero (sin
     radio superior) y la última con el footer (sin radio inferior) */
  .yia-stack .sx-panel.sx-flat-top { border-radius: 0 0 36px 36px; }
  .yia-stack .sx-panel.sx-flat-bottom { border-radius: 36px 36px 0 0; }
  /* La franja de métricas queda fuera del stack: pierde sus bordes de
     ancho completo y respira entre el hero y la primera tarjeta */
  .yia-stack .strip { border-top-color: transparent; border-bottom-color: transparent; padding: 26px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yia-stack .sx-panel { transform: none !important; }
  .yia-stack .sx-panel::before { opacity: 0 !important; }
}

/* ── Vidrio acanalado (fluted glass) de tarjetas destacadas ──
   Shader WebGL en un canvas de fondo (misma técnica que webflow.com —
   blobs de gradiente refractados en columnas verticales + grano), pintado
   por js/yialink-stack.js en cada .sx-glass-wrap. La tarjeta lleva
   .sx-glass-card: aporta el gradiente CSS de respaldo (si no hay WebGL el
   JS retira el wrap y queda este fondo) y sube su contenido sobre el
   canvas. El wrap recorta al radio de la tarjeta SIN ponerle
   overflow:hidden a ella (los badges sobresalen). */
.sx-glass-card {
  position: relative;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(201,99,66,.12) 0%, transparent 45%), #030c21;
}
.sx-glass-card > * { position: relative; z-index: 1; }
.sx-glass-card > .sx-glass-wrap { position: absolute; z-index: 0; }
.sx-glass-wrap {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.sx-glass-wrap canvas { width: 100%; height: 100%; display: block; }
/* Overlay de grano tipo película (receta de webflow.com): capa del 200%
   con una tila de motas casi transparentes (generada en JS, sin assets),
   saltando con steps(5) a ~17fps y al 50% de opacidad. Esta translucidez
   animada es la que tramea las costuras del vidrio y las hace orgánicas. */
.sx-grain {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: transparent repeat 0 0;
  background-size: 750px 750px;
  animation: sx-noise 0.3s steps(5) infinite;
  opacity: 0.5; will-change: transform; pointer-events: none; transform: translateZ(0);
}
@keyframes sx-noise {
  0% { transform: translate(0,0); } 10% { transform: translate(-2%,-3%); }
  20% { transform: translate(-4%,2%); } 30% { transform: translate(2%,-4%); }
  40% { transform: translate(-2%,5%); } 50% { transform: translate(-4%,2%); }
  60% { transform: translate(3%,0); } 70% { transform: translate(0,3%); }
  80% { transform: translate(-3%,0); } 90% { transform: translate(2%,2%); }
  100% { transform: translate(1%,0); }
}
@media (prefers-reduced-motion: reduce) { .sx-grain { animation: none; } }
/* Viñeta por encima de todo el fondo: oscurece suavemente hacia los bordes
   y un poco al centro para que la tipografía contraste sobre el gradiente */
.sx-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(3,12,33,.18) 0%, rgba(3,12,33,.38) 70%, rgba(3,12,33,.55) 100%);
}

/* Ajustes del vidrio acanalado sobre el paquete destacado (.pkg.sw-featured
   de /sitios-web/ y /precios/): el badge vuelve a ser absoluto
   (.sx-glass-card > * lo hace relative), el hover del .pkg no debe pisar el
   fondo de respaldo del vidrio y los textos secundarios suben de contraste
   sobre el shader. */
.pkg.sx-glass-card > .sw-pkg-badge { position: absolute; }
.pkg.sx-glass-card, .pkg.sx-glass-card:hover {
  background: linear-gradient(180deg, rgba(201,99,66,.12) 0%, transparent 45%), #030c21;
  border-color: transparent;
}
.pkg.sx-glass-card > p, .pkg.sx-glass-card .pkg-feats li { color: rgba(255,255,255,.86); }
.pkg.sx-glass-card .sw-roi { color: rgba(255,255,255,.8); }
/* El enlace "o Cotízalo por WhatsApp" iba en gris (--muted-2) y se perdía
   contra el naranja del shader: solo sobre el vidrio va en blanco. */
.pkg.sx-glass-card .agent-wa { color: #fff; }
/* Mismo caso para el "Desde" y el "MXN" del precio: sobre el vidrio van
   en gris muy claro en lugar del gris oscuro que se perdía. */
.pkg.sx-glass-card .pkg-price .pre,
.pkg.sx-glass-card .pkg-price .per { color: #e9e9e9; }

/* Variante azul del badge de paquete destacado: el acento del Sitio Express
   (#156ef5). En /precios/ diferencia al plan anual express sin competir con
   el vidrio del paquete Corporativo — solo una tarjeta "gana" por página. */
.sw-pkg-badge.sx-blue { background: #156ef5; box-shadow: 0 6px 18px rgba(21,110,245,.4); }
/* Ancla del badge: .sw-featured lo resolvía de rebote con su transform
   (scale crea containing block); en tarjetas sin transform hace falta. */
.pkg { position: relative; }

/* Grid de 2 paquetes centrado (sección Sitios Express de /precios/). Solo
   desktop: por debajo de 900px heredan el colapso/carrusel del .pkg-grid. */
@media (min-width: 901px) {
  .pkg-grid.pkg-grid-2 { grid-template-columns: 1fr 1fr; max-width: 880px; margin-left: auto; margin-right: auto; }
}

/* Glow interno de la tarjeta destacada del comparador (receta de la pricing
   card resaltada de frame.io: inset 0 4px 74px 30px azul al 10% + borde
   lavanda al 50%). Aplica a la tarjeta "ours" en todo el sitio; en
   /sitios-express/ el acabado bento local combina este glow con su sombra. */
.cmp-card.ours {
  border-color: rgba(157, 157, 255, 0.5);
  box-shadow: inset 0 4px 74px 30px rgba(97, 153, 246, 0.10);
}

/* Íconos personalizados (SVG de dos tonos vía <img>): el chip se limpia —
   sin fondo, sin borde y sin radio — y el ícono crece para lucir. Solo
   aplica a los contenedores que ya tienen un ícono custom (:has(img));
   los que aún llevan SVG genérico inline conservan su chip. */
.use-icon:has(img),
.value-card .v-icon:has(img),
.agent-ic:has(img) {
  background: none;
  border: none;
  border-radius: 0;
  width: 52px;
  height: 52px;
}
.use-icon img,
.value-card .v-icon img,
.agent-ic img {
  width: 52px;
  height: 52px;
  display: block;
}