/* ==========================================================================
   MEDIO MINUTO — sistema de diseño (v1 18-jul-2026 · repintado 1-oct-2026)
   Paleta común de las tres marcas (decisión Javier 1-oct; ver _comun/estilos/tokens.css):
     --ink    #1D3039  petróleo — titulares, destacados, cifras, contornos, fondos oscuros
     --muted  #5C6B73  gris petróleo — párrafos y textos secundarios (confirmado por Javier el 5-oct)
     --accent #FF6D5F  coral — palabras destacadas de los titulares, botones, CTAs, iconos y acentos (NUNCA dominante)
     --accent-text #C9392D  coral oscuro — SOLO para texto pequeño sobre fondo claro: antetítulos, rótulos, «Ver…»
                            (decisión Javier 5-oct: el coral de marca da 2,7:1 y el mínimo es 4,5:1; este da 5,0:1
                            sobre blanco cálido y 4,7:1 sobre el gris de las secciones). Sobre petróleo se usa --accent (4,96:1).
     --line   #C7D3D9  gris azulado — bordes y líneas (confirmado por Javier el 5-oct)
     --bg     #FFFCFA  blanco cálido — fondo principal
   Antes (julio): #25254F / #565A70 / #FF6C5F — copia en _archivo/04_Codigo_v1-identidad-julio_copia-2026-10-01/.
   Tipografía: Montserrat 700/800 (titulares) + Inter (texto), alojadas en /assets/fonts/ (css/fonts.css).
   ========================================================================== */

:root {
  --ink: #1D3039;
  --muted: #5C6B73;
  --accent: #FF6D5F;
  --accent-text: #C9392D; /* coral para texto pequeño sobre fondos claros (ver cabecera) */
  --accent-soft: rgba(255, 109, 95, 0.08);
  --bg: #FFFCFA;
  --line: #C7D3D9;
  --card: #ffffff;
  --shadow: 0 18px 50px rgba(29, 48, 57, 0.10);
  --radius: 16px;
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --w-content: 1080px;
}

/* Sobre fondo petróleo el coral de marca ya cumple (4,96:1): ahí el texto coral vuelve a él */
.section-ink, .cta-final, .site-footer { --accent-text: var(--accent); }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

h1 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
h3 { font-weight: 700; font-size: 1.15rem; }

strong { color: var(--ink); }

a { color: var(--ink); }

img, svg { max-width: 100%; height: auto; }

.shell { max-width: var(--w-content); margin: 0 auto; padding: 0 24px; }

.accent { color: var(--accent); }

/* ---------- kickers / antetítulos ---------- */
.kicker {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}

/* ---------- botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 12px;
  padding: 15px 28px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn small {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.72rem;
  margin-top: 3px;
  opacity: 0.8;
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(255, 109, 95, 0.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 109, 95, 0.38); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- header ---------- */
/* Cabecera clara común a las tres webs (decisión Javier, 7-oct-2026: clara con el logo principal).
   Valores compartidos en _comun/estilos/cabecera.md. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 252, 250, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px; /* área libre del logo (guía de marca: ≥ 1/4 del símbolo) */
  padding-top: 15px;   /* 20-oct (prueba): cabecera de 82 px, la misma altura que la de vocesenlared.com (logo de 52 px + 2 × 15) */
  padding-bottom: 15px;
}
/* Barra superior de contacto (7-oct-2026, como en vocesenlared.com) */
/* 7-oct (prueba): fondo oscuro sin línea; la cabecera fija se pega con top negativo,
   así la barra de contacto se va con el scroll y el menú queda arriba (sin JS). */
.site-header { top: -30px; }
.topbar { background: var(--ink); }
.topbar .shell { display: flex; align-items: center; justify-content: flex-end; gap: 22px; height: 30px; font-size: 0.8125rem; line-height: 1; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 252, 250, 0.78); text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.topbar a:hover, .topbar a:focus-visible { color: #fff; }
.topbar svg { flex: 0 0 auto; }
@media (max-width: 420px) { .topbar .shell { justify-content: center; gap: 16px; font-size: 0.75rem; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 360px) { .topbar svg { display: none; } }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.brand svg { width: 40px; height: 40px; flex: 0 0 auto; }
.brand-logo { width: 213px; min-width: 175px; height: auto; display: block; } /* mínimo 175 px (guía de marca); 19-oct (prueba): 52 px de alto, antes 44 */
.footer-logo { width: 180px; min-width: 175px; height: auto; display: block; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.1;
}
.brand-name small {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 26px; }
@media (max-width: 1140px) { .site-nav { gap: 16px; } .site-nav a { font-size: 0.84rem; } }
.site-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink); }
.site-nav a[aria-current="page"]:not(.nav-cta) { color: var(--accent-text); }
.site-nav a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.site-nav .nav-cta,
.site-nav .nav-cta:hover {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  background: var(--accent);
  padding: 9px 18px;
  border-radius: 10px;
}
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--ink); border-radius: 2px; margin: 5px 0; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: #F7F5F6; }
#servicios.section-tint { background: #FFF7F4; } /* 7-oct (prueba): intercambiado con el hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, var(--accent-soft), transparent 45%);
  pointer-events: none;
}
.hero .shell {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start; /* 8-oct plantilla común: el reloj no depende de lo largo que sea el texto */
  padding-top: 64px;
  padding-bottom: 72px;
}
.hero .sub {
  font-size: 1.06rem;
  max-width: 54ch;
  margin: 20px 0 30px;
}
/* 8-oct: titular en dos frases («Medio Minuto. / Más tiempo para tu pyme.»), tamaño estándar de h1 */
.hero-title { line-height: 1.08; }
.hero-title .line { display: block; text-wrap: balance; }
.hero-title .line + .line { margin-top: 0.12em; }
.hero-dial { display: flex; justify-content: center; padding: 24px; margin-top: 24.9px; } /* 8-oct: más aire, esfera un 12 % menor y altura fija (la misma que tenía centrada en la home) */
.hero-title { text-wrap: balance; }
.hero .sub .sub-lead { display: block; } /* 8-oct: la frase en negrita del subtítulo va sola en su línea */

/* plantilla común de hero (8-oct): migas superpuestas en el margen superior, sin mover textos ni reloj */
.hero-crumbs {
  position: absolute; z-index: 1; top: 18px; left: 0; right: 0;
  max-width: var(--w-content); margin: 0 auto; padding: 0 24px;
  font-size: 0.8rem;
}
.hero-crumbs a { color: var(--muted); text-decoration: none; }
.hero-crumbs a:hover { color: var(--ink); }
.hero-crumbs span { color: var(--ink); font-weight: 600; }

/* franja de confianza bajo el hero (8-oct, en las cuatro páginas) */
.trust-strip { background: var(--ink); color: rgba(255, 252, 250, 0.78); }
.trust-strip strong { color: var(--bg); }
.trust-strip .trust { margin: 0; padding: 20px 0; border-top: 0; justify-content: space-between; font-size: 0.88rem; }
.hero-dial svg { width: min(280px, 80%); filter: drop-shadow(0 24px 50px rgba(29, 48, 57, 0.16)); }

/* animación del barrido (8-oct): la aguja recorre la mitad derecha y va descubriendo la cuña coral.
   La máscara es un arco de 190° (de −10° a 180°) con pathLength=190: el borde que crece está siempre
   en 180°·e(t), el mismo ángulo que la aguja, porque ambos usan la misma curva y la misma duración. */
.dial-reveal { stroke-dasharray: 190 190; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dial-hand { transform-origin: 100px 100px; animation: sweep 1.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 300ms; }
  .dial-reveal { animation: reveal 1.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 300ms; }
  @keyframes sweep { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
  @keyframes reveal { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }

  /* iconos de servicio en la semiesfera blanca: entran cuando la aguja va por la mitad (1,0 s) y acaban con ella */
  .dial-icon * { transform-box: fill-box; transform-origin: center; }
  .ic-draw { stroke-dasharray: 1 2; animation: ic-draw 0.62s cubic-bezier(0.33, 0, 0.2, 1) backwards 1000ms; }
  .ic-pop { animation: ic-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 950ms; }
  .ic-pop--late { animation-delay: 1500ms; }
  .ic-wave { animation: ic-wave 0.42s cubic-bezier(0.2, 0, 0.2, 1) backwards; }
  .ic-wave--1 { animation-delay: 1180ms; }
  .ic-wave--2 { animation-delay: 1380ms; }
  .ic-spin { animation: ic-spin 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) backwards 1000ms; }
  @keyframes ic-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
  @keyframes ic-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes ic-wave { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  @keyframes ic-spin { from { opacity: 0; transform: rotate(-120deg) scale(0.3); } to { opacity: 1; transform: none; } }
  /* «Sobre nosotros» (8-oct): las dos mitades del isotipo entran desde fuera y se juntan */
  .ic-half { animation: ic-half-l 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards 1000ms; }
  .ic-half--r { animation-name: ic-half-r; animation-delay: 1150ms; }
  @keyframes ic-half-l { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
  .ic-dot { animation: ic-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .ic-dot--1 { animation-delay: 1250ms; }
  .ic-dot--2 { animation-delay: 1380ms; }
  .ic-dot--3 { animation-delay: 1510ms; }
  @keyframes ic-half-r { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
}

/* ---------- barra de confianza ---------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}

/* ---------- secciones ---------- */
.section { padding: 72px 0; }
.section-tint { background: #F7F5F6; }
.section-ink { background: var(--ink); }
.section-ink h2, .section-ink h3, .section-ink strong { color: var(--bg); }
.section-ink p { color: rgba(255, 252, 250, 0.78); }
.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 12px; }

/* ---------- cuñas de ejemplo con logo y reproductor (radio, 13-oct-2026) ---------- */
.cunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.cuna { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 20px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.cuna.is-playing { border-color: rgba(255, 109, 95, 0.6); box-shadow: var(--shadow); }
.cuna-logo { height: 84px; display: flex; align-items: center; justify-content: center; }
.cuna-logo img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; }
.cuna-logo img.is-wide { max-height: 52px; }
.cuna audio { width: 100%; }
.cuna-player { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.cuna-player[hidden] { display: none; }
.cuna-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 160ms ease, background 160ms ease; }
.cuna-play:hover { transform: scale(1.06); }
.cuna-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cuna-play svg { width: 18px; height: 18px; }
.cuna-play .i-pause { display: none; }
.cuna.is-playing .cuna-play .i-play { display: none; }
.cuna.is-playing .cuna-play .i-pause { display: block; }
.cuna-track { flex: 1; min-width: 0; }
.cuna-bar { position: relative; height: 6px; border-radius: 3px; background: #E6ECEF; cursor: pointer; }
.cuna-bar::before { content: ""; position: absolute; inset: -8px 0; } /* zona de clic más alta */
.cuna-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--accent); }
.cuna-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.cuna-meta strong { color: var(--ink); font-weight: 600; }
.cuna-time { font-variant-numeric: tabular-nums; }
@media (max-width: 920px) { .cunas { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* ---------- testimonio en audio con carátula de nota media (Formación IA, 14-oct-2026) ---------- */
.testimonio { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.testimonio.is-playing { border-color: rgba(255, 109, 95, 0.6); box-shadow: var(--shadow); }
.testimonio-cover { aspect-ratio: 1; border-radius: 14px; background: #FFF7F4; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px; }
.testimonio-nota { font-family: var(--font-display); font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.testimonio-nota small { font-size: 1.1rem; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.testimonio-stars { width: 116px; height: 20px; display: block; }
.testimonio-cover p { font-size: 0.8rem; line-height: 1.35; color: var(--muted); margin: 0; }
.testimonio-cover p strong { color: var(--ink); font-weight: 600; }
.testimonio-body blockquote { margin: 0 0 18px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.testimonio-body blockquote::before { content: "«"; color: var(--accent); }
.testimonio-body blockquote::after { content: "»"; color: var(--accent); }
.testimonio-body > p { font-size: 0.95rem; margin: 0 0 4px; }
.testimonio .cuna-player { margin-top: 18px; }
.testimonio audio { width: 100%; margin-top: 18px; }
@media (max-width: 720px) { .testimonio { grid-template-columns: 1fr; gap: 22px; padding: 22px; } .testimonio-cover { max-width: 220px; width: 100%; margin: 0 auto; } }

/* ---------- caso real de Posicionamiento: gráfico de clics animado (15-oct-2026) ---------- */
.clics-chart { margin: 8px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px 14px; }
.clics-chart svg { display: block; width: 100%; height: auto; }
.clics-chart figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 6px; padding-left: 4px; }
.clics-hint { display: none; }
.fases { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fases li { font-size: 0.92rem; line-height: 1.5; border-top: 2px solid var(--accent); padding-top: 12px; }
.fases strong { display: block; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 0.98rem; margin-bottom: 4px; }
.fases-total { margin-top: 26px; color: var(--ink); font-size: 1.02rem; }
@media (max-width: 920px) { .fases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .clics-chart { padding: 16px 0 12px 12px; }
  .clics-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .clics-scroll svg { min-width: 760px; }
  .clics-hint { display: inline; }
  .fases { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mm-clics .a-reveal, .mm-clics .a-dot, .mm-clics .a-tip { transform-box: fill-box; }
  .mm-clics .a-reveal { transform-origin: left center; }
  .mm-clics .a-dot { transform-origin: center; }
  .mm-clics.is-waiting .a-reveal, .mm-clics.is-playing .a-reveal { animation: mm-clics-reveal 1.8s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-clics.is-waiting .a-dot, .mm-clics.is-playing .a-dot { animation: mm-clics-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-clics.is-waiting .a-tip, .mm-clics.is-playing .a-tip { animation: mm-clics-tip 0.42s cubic-bezier(0.2, 0, 0.2, 1) backwards; }
  .mm-clics .a-dot--1 { animation-delay: 150ms !important; }
  .mm-clics .a-tip--1 { animation-delay: 230ms !important; }
  .mm-clics .a-dot--2 { animation-delay: 929ms !important; }
  .mm-clics .a-tip--2 { animation-delay: 1009ms !important; }
  .mm-clics .a-dot--3 { animation-delay: 1114ms !important; }
  .mm-clics .a-tip--3 { animation-delay: 1194ms !important; }
  .mm-clics .a-dot--4 { animation-delay: 1772ms !important; }
  .mm-clics .a-tip--4 { animation-delay: 1852ms !important; }
  .mm-clics.is-waiting .a-reveal, .mm-clics.is-waiting .a-dot, .mm-clics.is-waiting .a-tip { animation-play-state: paused; }
  @keyframes mm-clics-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes mm-clics-pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes mm-clics-tip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- tarjetas de servicio (las tres puertas) ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* 3 servicios (7-oct-2026): posicionamiento web, radio y formación IA */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(255, 109, 95, 0.5); }
.service-card .icon { width: 44px; height: 44px; margin-bottom: 18px; }
.service-card h3 { margin-bottom: 10px; }
.service-card .hook {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.service-card p { font-size: 0.92rem; }
.service-card .proof { font-size: 0.82rem; font-style: italic; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } /* línea fina sobre la frase final, alineada en las tres tarjetas (11-oct-2026) */
.service-card p:has(+ .proof) { margin-bottom: 18px; }
.service-card .go {
  padding-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--accent-text);
}

/* ---------- método ---------- */
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.method-step { text-align: left; }
.method-step .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 8px;
}
.method-step h3 { color: var(--bg); margin-bottom: 8px; }
.method-step p { font-size: 0.92rem; }
.method-arrow { color: var(--accent); font-weight: 800; }

/* ---------- por qué / premios ---------- */
.awards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.award {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ---------- caso destacado ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.case-stat .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink);
  display: block;
  line-height: 1;
}
.case-stat .big em { font-style: normal; color: var(--accent-text); } /* coral oscuro: el coral de marca sobre blanco no llega al contraste mínimo (16-oct-2026) */
.case-stat span:last-child { font-size: 0.78rem; display: block; margin-top: 8px; }

/* ---------- para quién ---------- */
.forwho { margin-left: 0; }
.forwho p + p { margin-top: 14px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); padding: 56px 0 36px; }
.site-footer, .site-footer a { color: rgba(255, 252, 250, 0.75); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; font-size: 0.88rem; }
.footer-grid h3 { color: var(--bg); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
/* Los títulos de las columnas se apoyan en la misma línea base que «medio minuto» del logo (logo de 180 px; medido el 7-oct-2026) */
.footer-grid > div:not(.footer-brand) { padding-top: 17px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-brand svg { width: 38px; height: 38px; }
.footer-brand p { font-size: 0.84rem; margin-top: 12.44px; max-width: 30ch; } /* 9-oct: 12.44px = la última línea apoya en la misma línea base que el 2.º enlace de «Servicios» */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 252, 250, 0.15);
  font-size: 0.78rem;
}

/* ---------- responsive ---------- */
/* Menú plegable por debajo de 1.020 px (19-oct, prueba: con el logo a 213 px el menú completo no cabe entre 960 y 1.010 px;
   ya se salía 8 px a 960 con el logo a 180). Antes: desde 960 px (7-oct) y desde 1.080 px (con «Centralita con IA»). */
@media (max-width: 1019px) {
  .site-header > .shell { padding-top: 14px; padding-bottom: 14px; }
  .brand-logo { width: 198px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(29, 48, 57, 0.10);
    padding: 12px 24px 20px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 0; font-size: 1rem; }
  .site-nav .nav-cta { margin-top: 10px; }
  .nav-toggle { display: block; }
}

@media (max-width: 920px) {
  .hero .shell { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 52px; }
  .hero-dial { padding: 12px 0; margin-top: 0; }
  .hero-crumbs { top: 14px; }
  .trust-strip .trust { justify-content: flex-start; gap: 8px 22px; }
  .hero-dial svg { width: min(190px, 60%); }
  .services, .method-steps { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Componentes de páginas interiores (añadido 18-jul, fase 2)
   ========================================================================== */

/* hero interior */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% -30%, var(--accent-soft), transparent 42%); pointer-events: none; }
.page-hero .shell { position: relative; padding-top: 56px; padding-bottom: 52px; }
.page-hero .sub { font-size: 1.05rem; max-width: 60ch; margin: 18px 0 26px; }
.page-hero .trust { margin-top: 30px; }
/* textos legales (14-oct-2026): titulares más pequeños, como un documento; menos hueco bajo el título */
.page-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.page-hero .shell { padding-bottom: 12px; }
.section.legal { padding-top: 28px; }
.legal h2 { font-size: 1.22rem; line-height: 1.3; margin-top: 38px; margin-bottom: 10px; }
.legal h3 { font-size: 1.02rem; line-height: 1.35; margin-top: 22px; margin-bottom: 8px; }

/* prosa */
.prose { max-width: var(--w-content); } /* 8-oct: todas las secciones al ancho del hero */
.prose h2 { margin-bottom: 14px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0 22px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--accent); font-weight: 700; }

/* listas numeradas destacadas (qué incluye / llave en mano) */
.feature-list { list-style: none; margin: 32px 0 0 !important; display: grid; gap: 16px; }
.feature-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin: 0; }
.feature-list .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; }
.feature-list strong { display: inline; }

/* precios */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.price-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.price-card { position: relative; }
.price-card .price-art { position: absolute; top: 16px; right: 16px; width: 104px; height: 104px; }
/* 9-oct: misma altura de tarjeta en todas las páginas con planes (Posicionamiento y Formación IA) en escritorio; si un texto es más largo, la tarjeta crece */
@media (min-width: 921px) { .price-card { min-height: 377px; } }

/* Sección texto + gráfico (9-oct): el texto se queda en ~680 px y el gráfico de la colección va al lado.
   .split = gráfico a la derecha; .split--left = a la izquierda. Se alternan bajando por la página.
   En pantallas estrechas el gráfico va encima del texto, a 180 px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.split--left { grid-template-columns: 300px minmax(0, 1fr); }
.split--left .split-art { order: -1; }
.split-art { margin: 0; }
.split-art svg { display: block; width: 100%; height: auto; }
.split-head { margin-bottom: 28px; }
.split--sticky { align-items: start; }
.split--sticky .split-art { position: sticky; top: 130px; }
@media (max-width: 920px) {
  .split, .split--left { grid-template-columns: 1fr; gap: 20px; }
  .split-art { order: -1; width: 180px; margin: 0 auto; }
  .split--sticky .split-art { position: static; }
}

/* Ilustraciones animadas (9-oct): mismo ritmo que el reloj del hero (1,4 s, misma curva), animación corta, sin bucle, al entrar en pantalla y al pasar el ratón
   por la tarjeta. El estado final es el dibujo estático: sin JS o con «reducir movimiento» no se anima.
   assets/js/mm-anim.js pone .is-waiting (pausada en el primer fotograma) y luego .is-playing. */
@media (prefers-reduced-motion: no-preference) {
  .mm-anim .a-rocket, .mm-anim .a-smoke, .mm-anim .a-planet { transform-box: view-box; }
  .mm-anim .a-smoke { transform-origin: 120px 192px; }
  .mm-anim .a-planet { transform-origin: 120px 322px; }
  .mm-anim .a-flame { transform-box: fill-box; transform-origin: 50% 0; }
  .mm-despegue.is-waiting .a-rocket, .mm-despegue.is-playing .a-rocket { animation: mm-lift 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards 450ms; }
  .mm-despegue.is-waiting .a-flame, .mm-despegue.is-playing .a-flame { animation: mm-ignite 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 150ms; }
  .mm-despegue.is-waiting .a-smoke, .mm-despegue.is-playing .a-smoke { animation: mm-smoke 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 300ms; }
  .mm-ascenso.is-waiting .a-rocket, .mm-ascenso.is-playing .a-rocket { animation: mm-climb 1.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-ascenso.is-waiting .a-trail, .mm-ascenso.is-playing .a-trail { animation: mm-fade 0.42s cubic-bezier(0.2, 0, 0.2, 1) backwards 1150ms; }
  .mm-orbita.is-waiting .a-planet, .mm-orbita.is-playing .a-planet { animation: mm-spin 1.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-anim.is-waiting * { animation-play-state: paused !important; }
  .mm-valle .a-reveal { stroke-dasharray: 1; }
  .mm-valle.is-waiting .a-reveal, .mm-valle.is-playing .a-reveal { animation: mm-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-valle .a-flag { transform-box: view-box; transform-origin: 190px 84px; }
  .mm-valle.is-waiting .a-flag, .mm-valle.is-playing .a-flag { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 1450ms; }
  @keyframes mm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes mm-pop { from { transform: scale(0); } to { transform: none; } }
  .mm-casa .a-star, .mm-casa .a-item { transform-box: fill-box; transform-origin: center; }
  .mm-casa.is-waiting .a-star, .mm-casa.is-playing .a-star { animation: mm-spin-in 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) backwards 300ms; }
  .mm-casa.is-waiting .a-item, .mm-casa.is-playing .a-item { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-casa .a-i1 { animation-delay: 650ms !important; }
  .mm-casa .a-i2 { animation-delay: 800ms !important; }
  .mm-casa .a-i3 { animation-delay: 950ms !important; }
  .mm-casa .a-i4 { animation-delay: 1100ms !important; }
  @keyframes mm-spin-in { from { opacity: 0; transform: rotate(-120deg) scale(0.3); } to { opacity: 1; transform: none; } }
  .mm-foco .a-cone { transform-box: view-box; transform-origin: 92px 50px; }
  .mm-foco.is-waiting .a-cone, .mm-foco.is-playing .a-cone { animation: mm-cone 0.8s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-foco.is-waiting .a-lit, .mm-foco.is-playing .a-lit { animation: mm-fade 0.5s cubic-bezier(0.2, 0, 0.2, 1) backwards 850ms; }
  @keyframes mm-cone { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
  .mm-geo .a-l, .mm-geo .a-reveal { stroke-dasharray: 1; }
  .mm-geo .a-chip { transform-box: fill-box; transform-origin: center; }
  .mm-geo.is-waiting .a-l, .mm-geo.is-playing .a-l { animation: mm-draw 0.35s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
  .mm-geo .a-l1 { animation-delay: 150ms !important; }
  .mm-geo .a-l2 { animation-delay: 330ms !important; }
  .mm-geo .a-l3 { animation-delay: 510ms !important; }
  .mm-geo.is-waiting .a-chip, .mm-geo.is-playing .a-chip { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 780ms; }
  .mm-geo.is-waiting .a-reveal, .mm-geo.is-playing .a-reveal { animation: mm-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) backwards 950ms; }
  .mm-geo.is-waiting .a-lit, .mm-geo.is-playing .a-lit { animation: mm-fade 0.4s cubic-bezier(0.2, 0, 0.2, 1) backwards 1300ms; }
  .mm-ranking .a-type { stroke-dasharray: 1; }
  .mm-ranking.is-waiting .a-type, .mm-ranking.is-playing .a-type { animation: mm-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-ranking.is-waiting .a-rYou, .mm-ranking.is-playing .a-rYou { animation: mm-climb-rank 1.1s cubic-bezier(0.65, 0, 0.35, 1) backwards 550ms; }
  .mm-ranking.is-waiting .a-rA, .mm-ranking.is-playing .a-rA,
  .mm-ranking.is-waiting .a-rB, .mm-ranking.is-playing .a-rB { animation: mm-drop-rank 1.1s cubic-bezier(0.65, 0, 0.35, 1) backwards 550ms; }
  @keyframes mm-climb-rank { from { transform: translateY(72px); } to { transform: none; } }
  @keyframes mm-drop-rank { from { transform: translateY(-36px); } to { transform: none; } }
  .mm-tiempo .a-flip { transform-box: view-box; transform-origin: 120px 120px; }
  .mm-tiempo.is-waiting .a-flip, .mm-tiempo.is-playing .a-flip { animation: mm-flip 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-tiempo.is-waiting .a-stream, .mm-tiempo.is-playing .a-stream { animation: mm-fade 0.42s cubic-bezier(0.2, 0, 0.2, 1) backwards 1300ms; }
  @keyframes mm-flip { from { transform: rotate(180deg); } to { transform: none; } }
  @keyframes mm-lift { from { transform: translateY(44px); } to { transform: none; } }
  @keyframes mm-ignite { from { transform: scale(0.2, 0); } to { transform: none; } }
  @keyframes mm-smoke { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
  @keyframes mm-climb { 0% { opacity: 0; transform: translate(-58px, 70px); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mm-spin { from { transform: rotate(35deg); } to { transform: none; } }
  /* Publicidad en radio (9-oct): precio, sintonía, plazas, estudio, coche, caso ×7 */
  /* precio */
  .mm-precio .a-wedge { stroke-dasharray: 0.3333 1; }
  .mm-precio .a-hand { transform-box: view-box; transform-origin: 104px 108px; }
  .mm-precio .a-tag { transform-box: view-box; transform-origin: 168px 168px; }
  .mm-precio.is-waiting .a-wedge, .mm-precio.is-playing .a-wedge { animation: mm-wedge 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-precio.is-waiting .a-hand, .mm-precio.is-playing .a-hand { animation: mm-hand 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-precio.is-waiting .a-tag, .mm-precio.is-playing .a-tag { animation: mm-swing 1.0s ease-out backwards 650ms; }
  @keyframes mm-wedge { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 0.3333 1; } }
  @keyframes mm-hand { from { transform: rotate(-120deg); } to { transform: none; } }
  @keyframes mm-swing { 0% { transform: rotate(32deg); } 35% { transform: rotate(-14deg); } 62% { transform: rotate(7deg); } 84% { transform: rotate(-2deg); } 100% { transform: none; } }
  /* radio · sintonía */
  .mm-sintonia .a-knob { transform-box: view-box; transform-origin: 160px 161px; }
  .mm-plazas .a-wave, .mm-caso .a-wave { transform-box: fill-box; }
  .mm-sintonia .a-wave { transform-box: view-box; transform-origin: 120px 14px; } /* las ondas llegan desde arriba y tocan la antena (recibe) */
  .mm-sintonia.is-waiting .a-needle, .mm-sintonia.is-playing .a-needle { animation: mm-tune 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-sintonia.is-waiting .a-knob, .mm-sintonia.is-playing .a-knob { animation: mm-knob 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-sintonia.is-waiting .a-lit, .mm-sintonia.is-playing .a-lit { animation: mm-fade 0.3s cubic-bezier(0.2, 0, 0.2, 1) backwards 1150ms; }
  .mm-sintonia.is-waiting .a-wave, .mm-sintonia.is-playing .a-wave { animation: mm-wave-grow 0.75s cubic-bezier(0.2, 0.6, 0.35, 1) backwards; }
  .mm-sintonia .a-w1 { animation-delay: 150ms !important; }
  .mm-sintonia .a-w2 { animation-delay: 350ms !important; }
  .mm-sintonia .a-w3 { animation-delay: 550ms !important; }
  @keyframes mm-tune { 0% { transform: translateX(-76px); } 78% { transform: translateX(5px); } 100% { transform: none; } }
  @keyframes mm-knob { 0% { transform: rotate(-220deg); } 78% { transform: rotate(14deg); } 100% { transform: none; } }
  @keyframes mm-wave { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
  /* radio · plazas */
  .mm-plazas .a-reveal { stroke-dasharray: 1; }
  .mm-plazas .a-sat, .mm-plazas .a-wave { transform-box: fill-box; transform-origin: center; }
  .mm-plazas .a-sat { transform-origin: 50% 100%; }
  .mm-plazas.is-waiting .a-main, .mm-plazas.is-playing .a-main { animation: mm-drop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) backwards 150ms; }
  .mm-plazas.is-waiting .a-wave, .mm-plazas.is-playing .a-wave { animation: mm-wave 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-plazas .a-w1 { animation-delay: 550ms !important; }
  .mm-plazas .a-w2 { animation-delay: 680ms !important; }
  .mm-plazas.is-waiting .a-reveal, .mm-plazas.is-playing .a-reveal { animation: mm-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) backwards 750ms; }
  .mm-plazas.is-waiting .a-sat, .mm-plazas.is-playing .a-sat { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-plazas .a-s1 { animation-delay: 1150ms !important; }
  .mm-plazas .a-s2 { animation-delay: 1220ms !important; }
  .mm-plazas .a-s3 { animation-delay: 1290ms !important; }
  .mm-plazas .a-s4 { animation-delay: 1360ms !important; }
  @keyframes mm-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
  /* radio · estudio */
  .mm-estudio .a-rec { transform-box: view-box; transform-origin: 110px 0; }
  .mm-estudio.is-waiting .a-rec, .mm-estudio.is-playing .a-rec { animation: mm-rec 1.3s cubic-bezier(0.45, 0, 0.55, 1) backwards 150ms; }
  .mm-estudio.is-waiting .a-head, .mm-estudio.is-playing .a-head { animation: mm-head 1.3s cubic-bezier(0.45, 0, 0.55, 1) backwards 150ms; }
  @keyframes mm-rec { from { transform: scaleX(0.04); } to { transform: none; } }
  @keyframes mm-head { from { transform: translateX(-88px); } to { transform: none; } }
  /* radio · coche: las ondas salen de la esquina superior izquierda, crecen y alcanzan al coche (van más rápidas que él) */
  .mm-coche .a-wave { transform-box: view-box; transform-origin: 40px 52px; }
  .mm-coche.is-waiting .a-car, .mm-coche.is-playing .a-car { animation: mm-drive 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) backwards 150ms; }
  .mm-coche.is-waiting .a-wave, .mm-coche.is-playing .a-wave { animation: mm-wave-grow 0.75s cubic-bezier(0.2, 0.6, 0.35, 1) backwards; }
  .mm-coche .a-w1 { animation-delay: 250ms !important; }
  .mm-coche .a-w2 { animation-delay: 450ms !important; }
  .mm-coche .a-w3 { animation-delay: 650ms !important; }
  @keyframes mm-drive { from { transform: translateX(-150px); } to { transform: none; } }
  @keyframes mm-wave-grow { from { opacity: 0; transform: scale(0.1); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
  /* radio · caso */
  .mm-caso .a-line { stroke-dasharray: 1; }
  .mm-caso .a-wave { transform-origin: 50% 100%; }
  .mm-caso .a-end { transform-box: fill-box; transform-origin: 80% 80%; }
  .mm-caso.is-waiting .a-wave, .mm-caso.is-playing .a-wave { animation: mm-wave 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-caso .a-w1 { animation-delay: 150ms !important; }
  .mm-caso .a-w2 { animation-delay: 280ms !important; }
  .mm-caso.is-waiting .a-line, .mm-caso.is-playing .a-line { animation: mm-draw 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 450ms; }
  .mm-caso.is-waiting .a-area, .mm-caso.is-playing .a-area { animation: mm-fade 0.4s cubic-bezier(0.2, 0, 0.2, 1) backwards 1200ms; }
  .mm-caso.is-waiting .a-end, .mm-caso.is-playing .a-end { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 1350ms; }
  /* Home, Formación IA y Sobre nosotros (9-oct): cronómetro, crece, pizarra, cuaderno, historia, medalla, sello */
  .mm-cronometro .a-wedge { stroke-dasharray: 0.5 1; }
  .mm-cronometro .a-hand { transform-box: view-box; transform-origin: 120px 132px; }
  .mm-cronometro .a-star, .mm-pizarra .a-star, .mm-cuaderno .a-star { transform-box: fill-box; transform-origin: center; }
  .mm-cronometro.is-waiting .a-wedge, .mm-cronometro.is-playing .a-wedge { animation: mm-half 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-cronometro.is-waiting .a-hand, .mm-cronometro.is-playing .a-hand { animation: mm-half-hand 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-cronometro.is-waiting .a-star, .mm-cronometro.is-playing .a-star { animation: mm-spin-in 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) backwards 900ms; }
  @keyframes mm-half { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 0.5 1; } }
  @keyframes mm-half-hand { from { transform: rotate(-180deg); } to { transform: none; } }
  .mm-crece .a-line { stroke-dasharray: 1; }
  .mm-crece .a-head { transform-box: fill-box; transform-origin: 100% 0; }
  .mm-crece.is-waiting .a-line, .mm-crece.is-playing .a-line { animation: mm-draw 1.0s cubic-bezier(0.65, 0, 0.35, 1) backwards 150ms; }
  .mm-crece.is-waiting .a-head, .mm-crece.is-playing .a-head { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 1100ms; }
  .mm-pizarra .a-l { stroke-dasharray: 1; }
  .mm-pizarra.is-waiting .a-star, .mm-pizarra.is-playing .a-star { animation: mm-spin-in 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) backwards 150ms; }
  .mm-pizarra.is-waiting .a-l, .mm-pizarra.is-playing .a-l { animation: mm-draw 0.35s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
  .mm-pizarra .a-l1 { animation-delay: 550ms !important; }
  .mm-pizarra .a-l2 { animation-delay: 730ms !important; }
  .mm-pizarra .a-l3 { animation-delay: 910ms !important; }
  .mm-pizarra .a-l4 { animation-delay: 1150ms !important; }
  .mm-cuaderno .a-chk { stroke-dasharray: 1; }
  .mm-cuaderno.is-waiting .a-chk, .mm-cuaderno.is-playing .a-chk { animation: mm-draw 0.35s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
  .mm-cuaderno .a-c1 { animation-delay: 250ms !important; }
  .mm-cuaderno .a-c2 { animation-delay: 550ms !important; }
  .mm-cuaderno .a-c3 { animation-delay: 850ms !important; }
  .mm-cuaderno.is-waiting .a-star, .mm-cuaderno.is-playing .a-star { animation: mm-spin-in 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) backwards 1100ms; }
  .mm-historia .a-reveal { stroke-dasharray: 1; }
  .mm-historia .a-node { transform-box: fill-box; transform-origin: center; }
  .mm-historia.is-waiting .a-reveal, .mm-historia.is-playing .a-reveal { animation: mm-draw 1.0s cubic-bezier(0.45, 0, 0.55, 1) backwards 350ms; }
  .mm-historia.is-waiting .a-node, .mm-historia.is-playing .a-node { animation: mm-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .mm-historia .a-n1 { animation-delay: 150ms !important; }
  .mm-historia .a-n2 { animation-delay: 800ms !important; }
  .mm-historia .a-n3 { animation-delay: 1300ms !important; }
  .mm-medalla .a-swing { transform-box: view-box; transform-origin: 120px 36px; }
  .mm-medalla.is-waiting .a-drop, .mm-medalla.is-playing .a-drop { animation: mm-drop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) backwards 150ms; }
  .mm-medalla.is-waiting .a-swing, .mm-medalla.is-playing .a-swing { animation: mm-swing 1.0s ease-out backwards 450ms; }
  .mm-sello .a-stamp { transform-box: view-box; transform-origin: 120px 120px; }
  .mm-sello .a-chk { stroke-dasharray: 1; }
  .mm-sello.is-waiting .a-stamp, .mm-sello.is-playing .a-stamp { animation: mm-stamp 0.5s cubic-bezier(0.5, 0, 0.75, 0) backwards 150ms; }
  .mm-sello.is-waiting .a-chk, .mm-sello.is-playing .a-chk { animation: mm-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) backwards 750ms; }
  @keyframes mm-stamp { 0% { opacity: 0; transform: scale(1.35); } 70% { opacity: 1; transform: scale(0.96); } 100% { opacity: 1; transform: none; } }
}
.price-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.price-card .tier { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.price-card .amount { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink); margin: 10px 0 2px; }
.price-card .amount small { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.price-card .tagline { font-weight: 700; color: var(--ink); font-size: 0.95rem; margin-bottom: 10px; }
.price-card p { font-size: 0.92rem; }
.pricing-note { margin-top: 26px; font-size: 0.92rem; }

/* FAQs */
.faq { }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.4rem; font-weight: 700; color: var(--accent); transition: transform 160ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 16px; }

/* garantías / checklist */
.checklist { list-style: none; margin: 26px 0 0 !important; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; margin: 0; }
.checklist .check { color: var(--accent); font-weight: 800; }

/* estadísticas de artículo (caso) */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 36px 0; }
.stat-row .case-stat { padding: 24px 16px; }

/* cita / nota */
.note { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; font-size: 0.95rem; margin: 26px 0; }

/* cruces entre landings */
.cross { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cross a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.cross a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cross > a:only-child { grid-column: 1 / -1; }
.cross h3 { margin-bottom: 8px; }
.cross p { font-size: 0.92rem; }
.cross .go { display: inline-block; margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; color: var(--accent-text); }

/* CTA final de página */
.cta-final { background: var(--ink); text-align: center; }
.cta-final .shell { }
.cta-final h2 { color: var(--bg); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.cta-final p { color: rgba(255, 252, 250, 0.78); margin: 16px auto 28px; }

/* formulario */
.form { max-width: 640px; display: grid; gap: 18px; }
.form label { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--ink); display: block; margin-bottom: 6px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1px solid rgba(29, 48, 57, 0.28); border-radius: 10px; padding: 12px 14px; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D3039' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; } /* flecha propia separada del borde (14-oct-2026) */
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* campos obligatorios (14-oct-2026, criterio Baymard): * en los obligatorios, «(opcional)» en los opcionales, ayuda visible en teléfono/email */
.form .req { color: var(--accent-text); font-weight: 800; margin-left: 2px; }
.form .form-legend { font-size: 0.82rem; color: var(--muted); margin: 0 0 -6px; }
.form .check-row { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 0.85rem; }
.form .check-row input { width: 18px; height: 18px; margin-top: 2px; }
.form button { justify-self: start; border: 0; cursor: pointer; }
.form-msg { display: none; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; font-weight: 600; color: var(--ink); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* contacto (14-oct-2026): toda la página es hero; el formulario va bajo el texto, en la columna izquierda, y el reloj a la derecha (en móvil, entre el texto y el formulario) */
.hero--contacto .shell { grid-template-areas: "copy dial" "form dial"; row-gap: 0; }
.hero--contacto .hero-copy { grid-area: copy; }
.hero--contacto .hero-dial { grid-area: dial; align-self: start; }
.hero--contacto .contact-main { grid-area: form; }
.hero--contacto .sub { margin-bottom: 28px; }
.contact-main { max-width: 640px; }
@media (max-width: 920px) { .hero--contacto .shell { grid-template-areas: "copy" "dial" "form"; } .hero--contacto .hero-dial { margin-bottom: 24px; } }
.contact-note { font-size: 1.05rem; line-height: 1.6; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 16px 20px; margin-bottom: 28px; }
.contact-note a { white-space: nowrap; font-weight: 600; }

/* migas */
.crumbs { font-size: 0.8rem; padding: 18px 0 0; position: relative; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs span { color: var(--ink); font-weight: 600; }

@media (max-width: 920px) {
  .pricing, .stat-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .cross, .contact-grid { grid-template-columns: 1fr; }
}

/* Pie en móvil estrecho: una sola columna (7-oct-2026; va al final para ganar a la regla de 2 columnas de ≤920 px) */
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-grid > div:not(.footer-brand) { padding-top: 0; } }

/* Fundador en «Sobre nosotros» (15-oct-2026): foto redonda, nombre y enlace a LinkedIn bajo la historia */
.founder { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.founder picture, .founder img { display: block; flex: none; }
.founder img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.founder-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.founder-text strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.founder-text span { color: var(--muted); font-size: .92rem; }
.founder-text a { color: var(--accent-text); font-weight: 600; font-size: .92rem; text-decoration: none; }
.founder-text a:hover { text-decoration: underline; }

/* Franja de confianza en móvil: cuadrícula 2 × 2 (16-oct) */
@media (max-width: 600px) {
  .trust-strip .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 20px 0; font-size: 0.84rem; line-height: 1.38; }
}

/* Nota de fuente bajo una lista o un dato (17-oct-2026) */
.prose .source-note { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.prose .source-note a { color: inherit; }