/* ==========================================================
   Intelixia Lab — sistema de diseño "Laboratorio"
   Editorial: blanco cálido, tinta ciruela, acento vino y
   chispa naranja quemado, tipografía Bricolage Grotesque
   (auto-alojada, sin dependencias externas ni problemas RGPD).
   ========================================================== */

/* Títulos: serif con carácter. Cuerpo: sans optimizada para leer largo. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/InstrumentSans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/assets/fonts/SplineSansMono.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

/* ──────────────────────────────────────────────────────────────
   PALETA v2 · agosto 2026
   La v1 era neobrutalismo: bordes gruesos oscuros y sombras duras
   desplazadas en TODOS los elementos. Esa estética envejeció mal y,
   aplicada a todo a la vez, se lee como proyecto personal en vez de
   como proveedor de software fiable — que es justo lo contrario de
   lo que tiene que sentir alguien antes de pagar 2.900 €.
   v2 mantiene lo que era bueno (las tipografías y la familia ciruela,
   que nos distingue de los diez competidores azules) y cambia lo que
   restaba: más contraste, elevación real en vez de sombra dura,
   bordes finos y claros, y fuera el grano que enturbiaba la pantalla.
   ────────────────────────────────────────────────────────────── */
:root {
  --paper: #FFFFFF;
  --paper-deep: #F6F3F8;     /* secciones alternas: lila casi blanco */
  --ink: #14111C;            /* casi negro con un punto de violeta */
  --ink-soft: #4B4557;
  /* #857E93 daba 3.89:1 sobre blanco: por debajo del mínimo legible (4.5).
     Se usa en pies de foto, fuentes de datos y notas de todo el sitio, así
     que un punto más oscuro arregla decenas de textos de golpe. */
  --ink-faint: #6C6579;
  --accent: #A81552;         /* ciruela saturada: viva, no apagada */
  --accent-dark: #85103F;
  --accent-soft: #FCEBF2;
  --cobalt: #A81552;         /* enlaces */
  --lab-green: #25D366;      /* solo burbuja de WhatsApp (color oficial) */
  --amber: #E0A03C;          /* chispa sobre fondo tinta */

  /* alias heredados por páginas interiores */
  --brand-ink: var(--ink);
  --brand-ink-soft: #241F30;
  --text: #201B2C;
  --text-soft: var(--ink-soft);
  --bg: var(--paper);
  --bg-alt: var(--paper-deep);
  --line: #E8E3EE;

  --radius: 16px;
  --radius-sm: 10px;
  --border: 1px solid #E8E3EE;
  --border-fuerte: 1.5px solid #DAD3E2;

  /* Elevación real: dos capas, una de contacto y otra de difusión.
     Es lo que hace que una tarjeta parezca que está encima del papel
     en vez de parecer una pegatina con sombra de Word. */
  --shadow-sm: 0 1px 2px rgba(20,17,28,.05), 0 2px 6px rgba(20,17,28,.04);
  --shadow:    0 2px 4px rgba(20,17,28,.05), 0 8px 24px rgba(20,17,28,.07);
  --shadow-lg: 0 4px 10px rgba(20,17,28,.06), 0 20px 56px rgba(20,17,28,.11);
  --shadow-accent: 0 4px 14px rgba(168,21,82,.24);

  --font: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'Spline Sans Mono', 'SFMono-Regular', Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grano de papel — v1 lo tenía a .22 con multiply sobre TODA la página,
   incluido el panel de trabajo. Enturbiaba cada texto y cada fondo, y en
   pantallas normales daba la sensación de monitor sucio. A .05 aporta la
   textura sin comerse el contraste. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: #fff; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 18px; z-index: 1100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Tipografía ─────────────────────────────── */
/* La serif de display solo en tamaños grandes (h1 y h2 de sección).
   A partir de h3 la letra es pequeña y densa: ahí gana la sans, que se lee
   mejor. Y en el panel interno, sans en todo: es una herramienta de trabajo. */
h1, h2 {
  font-family: var(--display);
  color: var(--ink); line-height: 1.08; font-weight: 700; letter-spacing: -.015em;
  font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 0;
}
h3, h4 {
  font-family: var(--font);
  color: var(--ink); line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.7vw, 2.5rem); }
h3 { font-size: 1.22rem; }

/* Panel de ventas: interfaz de trabajo, todo en sans */
.panel-wrap h1, .panel-wrap h2, .panel-wrap h3,
.panel-login h1, .panel-login h2 {
  font-family: var(--font); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  font-variation-settings: normal;
}
.panel-wrap h1, .panel-login h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.panel-wrap h2 { font-size: 1.3rem; }
.pc-num, .emb-num, .nota-grande { font-family: var(--font); letter-spacing: -.03em; }
p  { margin-bottom: 1em; }
a  { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
strong { color: var(--ink); font-weight: 700; }

.lead { font-size: 1.25rem; color: var(--ink-soft); line-height: 1.5; font-weight: 400; }

.kicker {
  display: inline-block; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .14em; font-size: .74rem; font-weight: 600;
  color: var(--ink); background: transparent; padding: 5px 12px;
  border: var(--border); border-radius: 99px; margin-bottom: 18px;
  position: relative;
}
.kicker::before { content: "● "; color: var(--accent); }

/* etiqueta mono suelta */
.mono-label {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}

/* ── Botones ────────────────────────────────── */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; text-decoration: none !important;
  font-family: var(--font);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  border: var(--border); cursor: pointer; text-align: center;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--ink); color: var(--paper); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.btn-ghost-light { border-color: rgba(251,248,246,.7); color: var(--paper); background: transparent; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.btn-lg { padding: 17px 36px; font-size: 1.1rem; }
.btn-nav { padding: 9px 18px; font-size: .93rem; box-shadow: var(--shadow-sm); }

/* ── Header ─────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--border);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.logo-text { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variation-settings: "opsz" 40, "SOFT" 25, "WONK" 0; }
.logo-text em { font-style: normal; color: var(--accent); }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; position: relative; }
.main-nav a:not(.btn):hover, .main-nav a[aria-current] { color: var(--accent); text-decoration: none; }
.main-nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--accent);
}
.main-nav a.btn { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ── Menú desplegable (mega) ─────────────────── */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--ink); font-weight: 600; font-size: .95rem; padding: 0;
}
.nav-drop-toggle svg { width: 13px; height: 13px; transition: transform .2s; }
.nav-item.open > .nav-drop-toggle svg { transform: rotate(180deg); }
.nav-drop-toggle:hover, .nav-item.open > .nav-drop-toggle,
.nav-drop-toggle.active-parent { color: var(--accent); }

.nav-drop {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 640px; max-width: 92vw;
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px; z-index: 70;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
/* puente invisible para que el hover no se corte al bajar el cursor */
.nav-drop::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
@media (hover: hover) {
  .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
}
.nav-item.open .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

.nav-drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-drop-grid a {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px;
  border-radius: 10px; text-decoration: none; transition: background .12s;
}
.nav-drop-grid a:hover { background: var(--paper-deep); text-decoration: none; }
.nd-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--ink); color: var(--amber); display: grid; place-items: center; }
.nd-icon svg { width: 17px; height: 17px; }
.nd-txt strong { display: block; color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.2; }
.nd-txt small { color: var(--ink-soft); font-size: .79rem; line-height: 1.3; display: block; margin-top: 3px; }
.nd-feature { background: var(--accent-soft); border: 1.5px solid var(--accent); margin-top: 4px; }
.nd-feature:hover { background: var(--accent-soft); }
.nd-feature .nd-icon { background: var(--accent); color: #fff; }
.nd-feature .nd-txt strong { color: var(--accent-dark); }

.nav-drop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.nav-drop-foot span { font-size: .88rem; color: var(--ink-soft); font-weight: 600; }
.nav-drop-foot .btn { box-shadow: var(--shadow-sm); }

/* ── Hero home ──────────────────────────────── */
.hero {
  background: var(--paper);
  color: var(--ink);
  padding: 72px 0 84px;
  position: relative; overflow: hidden;
  border-bottom: var(--border);
}
/* retícula de plano técnico */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .28;
  mask-image: radial-gradient(ellipse 90% 80% at 70% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 20%, #000 0%, transparent 70%);
}
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: var(--ink); margin-bottom: 24px; }
.hero h1 .hl {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: .055em;
  text-decoration-skip-ink: none;
  text-underline-offset: .17em;
}
.hero .lead { color: var(--ink-soft); margin-bottom: 32px; max-width: 34em; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-note { font-size: .92rem; color: var(--ink-faint); }
.hero-note strong { color: var(--ink); font-weight: 700; }

/* entrada escalonada */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead, .hero-actions, .hero-note, .hero-visual {
    opacity: 0; transform: translateY(18px);
    animation: rise .6s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .hero .lead { animation-delay: .1s; }
  .hero-actions { animation-delay: .2s; }
  .hero-note { animation-delay: .3s; }
  .hero-visual { animation-delay: .25s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* registro del laboratorio (diario de actividad, no terminal) */
.hero-visual {
  background: var(--ink); border: var(--border); border-radius: var(--radius);
  padding: 0; box-shadow: var(--shadow-lg); overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--ink); padding: 14px 20px; border-bottom: 1px solid #3A2E38;
}
.console-bar span { font-family: var(--mono); font-size: .68rem; color: #9A8A94; letter-spacing: .14em; text-transform: uppercase; }
.console-bar em { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--amber); letter-spacing: .14em; }
.console-body {
  padding: 22px 22px 26px; font-size: .92rem;
  color: #E7DEC9; line-height: 1.5; min-height: 300px;
}
.console-body .c-line { display: block; padding: 9px 0; border-bottom: 1px solid #2E2632; }
.console-body .c-line:last-of-type { border-bottom: 0; }
.console-body .c-time { font-family: var(--mono); font-size: .74rem; color: var(--amber); margin-right: 10px; }
.console-body .c-note { color: #9A8A94; font-size: .85rem; }
.console-cursor {
  display: inline-block; width: 8px; height: 15px; background: var(--accent);
  vertical-align: middle; margin-left: 4px; animation: blink 1.4s steps(1) infinite; opacity: .85;
}
@keyframes blink { 50% { opacity: 0; } }

/* hero-visual antiguo (filas) sigue funcionando en interiores */
.hero-visual .hv-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #3A2E38; }
.hero-visual .hv-row:last-child { border-bottom: 0; }
.hv-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius); display: grid; place-items: center; background: #2A2029; color: var(--amber); font-size: 1.2rem; }
.hv-txt strong { display: block; color: var(--paper); font-size: .95rem; }
.hv-txt span { font-size: .82rem; color: #9A8A94; font-family: var(--mono); }

/* ── Marquesina ─────────────────────────────── */
.marquee {
  background: var(--ink); color: var(--paper);
  border-bottom: var(--border);
  overflow: hidden; padding: 13px 0; position: relative;
}
.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee span {
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .18em; white-space: nowrap; padding: 0 18px;
}
.marquee span::after { content: "✳"; color: var(--accent); margin-left: 36px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Secciones ──────────────────────────────── */
.section { padding: 88px 0; }
.section-alt { background: var(--paper-deep); border-top: var(--border); border-bottom: var(--border); }
.section-alt + .section-alt, .hero + .section-alt { border-top: 0; }
.section-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.12rem; margin: 14px auto 0; max-width: 620px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head.left p { margin-left: 0; }

/* aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Tarjetas ───────────────────────────────── */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 30px; transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; position: relative;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow); }
.card h3 { margin: 18px 0 10px; }
.card p { color: var(--ink-soft); font-size: .97rem; flex-grow: 1; }
.card .card-link { font-weight: 700; margin-top: 10px; color: var(--accent-dark); font-size: .95rem; }
.card .card-link:hover { color: var(--accent-dark); }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--ink); color: var(--amber); border: var(--border);
}
.card-icon svg { width: 26px; height: 26px; }
.section-alt .card { background: var(--paper); }

/* ── Proyectos (fichas de laboratorio) ──────── */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.proj-card {
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.proj-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.proj-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: var(--border); background: var(--paper-deep);
}
.proj-head .ref { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-faint); }
.stamp {
  font-family: var(--mono); font-size: .66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 99px;
}
.stamp.live { background: var(--amber); color: var(--ink); border-color: var(--ink); }
.stamp.prod { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.stamp.priv { background: transparent; color: var(--ink-soft); }
.proj-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.proj-body h3 { margin-bottom: 10px; }
.proj-body p { color: var(--ink-soft); font-size: .95rem; flex-grow: 1; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.proj-tags span {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 9px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 99px; color: var(--ink-soft);
}
.proj-body .card-link { font-weight: 700; margin-top: 16px; color: var(--accent-dark); font-size: .95rem; }

/* ── Stats ──────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.stat { border: var(--border); background: var(--paper); padding: 26px; border-radius: var(--radius); position: relative; }
.stat::after { content: ""; position: absolute; top: 10px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.stat .num { font-size: 3rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.stat .lbl { color: var(--ink-soft); font-size: .95rem; margin: 12px 0 0; max-width: none; }
.stat .src { display: block; font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); margin-top: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Proceso (pasos) ────────────────────────── */
.steps { counter-reset: paso; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { position: relative; padding: 34px 22px 24px; background: var(--paper); border: var(--border); border-radius: var(--radius); }
.step::before {
  counter-increment: paso; content: "0" counter(paso);
  position: absolute; top: -20px; left: 18px;
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  padding: 6px 12px; background: var(--accent); color: #fff;
  border: var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 1.08rem; margin: 6px 0 8px; }
.step p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ── FAQ ────────────────────────────────────── */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 14px; transition: box-shadow .15s ease;
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { font-weight: 700; color: var(--ink); cursor: pointer; font-size: 1.05rem; list-style: none; position: relative; padding-right: 40px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: -6px; font-size: 1.7rem; color: var(--accent); transition: transform .2s; font-weight: 400; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; color: var(--ink-soft); }

/* ── Banda CTA ──────────────────────────────── */
.cta-band { background: var(--ink); color: #D6C8D2; padding: 72px 0; border-top: var(--border); position: relative; overflow: hidden; }
.cta-band::before {
  content: "✳"; position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  font-size: 26rem; line-height: 1; color: var(--accent); opacity: .16; pointer-events: none;
}
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; }
.cta-band h2 { color: var(--paper); margin-bottom: 10px; max-width: 600px; }
.cta-band p { margin: 0; }
.cta-band-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────── */
.site-footer { background: var(--ink); color: #9A8A94; padding: 64px 0 30px; font-size: .95rem; border-top: 1px solid #3A2E38; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 40px; margin-bottom: 44px; }
.footer-logo { font-family: var(--display); font-size: 1.3rem; margin-bottom: 12px; color: var(--paper); font-weight: 700; }
.footer-logo em { color: #D8548C; font-style: normal; }
.footer-col h3 { color: var(--paper); font-family: var(--mono); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #9A8A94; }
.footer-col a:hover { color: var(--paper); }
.footer-bottom { border-top: 1px solid #3A2E38; padding-top: 24px; font-family: var(--mono); font-size: .74rem; color: #796A76; letter-spacing: .04em; }
.footer-bottom p { margin: 0; }

/* ── WhatsApp flotante ──────────────────────── */
.whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  border: var(--border); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.whatsapp-fab:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); }

/* ── Página interior / prosa ────────────────── */
.page-hero { background: var(--paper-deep); padding: 64px 0 52px; border-bottom: var(--border); }
.page-hero h1 { max-width: 850px; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero .lead { max-width: 720px; margin-top: 16px; }
.breadcrumbs { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .08em; }
.breadcrumbs a { color: var(--ink-faint); }

.prose { max-width: 760px; margin: 0 auto; }
.prose p, .prose li { font-size: 1.05rem; line-height: 1.72; }
.prose h2 { margin: 48px 0 16px; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose h3 { margin: 34px 0 12px; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.4em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
  border-left: 5px solid var(--accent); background: var(--accent-soft);
  padding: 18px 22px; margin: 26px 0; color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .95rem; }
.prose th, .prose td { border: 1.5px solid var(--ink); padding: 12px 14px; text-align: left; }
.prose th { background: var(--paper-deep); color: var(--ink); font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.prose .meta { color: var(--ink-faint); font-family: var(--mono); font-size: .78rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }

.toc { background: var(--paper-deep); border: var(--border); border-radius: var(--radius); padding: 22px 26px; margin: 30px 0; }
.toc strong { display: block; margin-bottom: 10px; color: var(--ink); font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.toc ol { margin: 0 0 0 1.2em; }
.toc a { color: var(--ink-soft); }

.note-box {
  background: #F7E9F0; border: var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin: 26px 0; font-size: .95rem; box-shadow: var(--shadow-sm);
}
.note-box strong { color: var(--accent-dark); }

/* ── Formularios ────────────────────────────── */
.form-card { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow); max-width: 680px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 7px; font-size: .95rem; }
.form-group .hint { font-weight: 400; color: var(--ink-faint); font-size: .84rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--radius);
  font: inherit; color: var(--ink); background: #FCF7F9; transition: box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--accent); }
textarea { min-height: 130px; resize: vertical; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); margin-bottom: 22px; }
.form-consent input { margin-top: 4px; accent-color: var(--accent); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── Calculadora ────────────────────────────── */
.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.calc-panel { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.calc-result {
  background: var(--ink); color: #D6C8D2;
  border: var(--border); border-radius: var(--radius); padding: 34px; position: sticky; top: 96px;
  box-shadow: var(--shadow-lg);
}
.calc-result h3 { color: var(--paper); }
.calc-big { font-size: 3.2rem; font-weight: 800; color: var(--amber); letter-spacing: -.03em; line-height: 1.05; }
.calc-line { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #3A2E38; font-size: .95rem; font-family: var(--mono); }
.calc-line strong { color: var(--paper); }
.range-val { font-weight: 700; color: var(--accent); font-family: var(--mono); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ── Comparativa / precios ──────────────────── */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-cards.two { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
.price-card { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 34px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { box-shadow: var(--shadow-lg); background: #FCF7F9; }
.price-card .badge { position: absolute; top: -16px; left: 24px; transform: none; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 5px 14px; border: var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); white-space: nowrap; }
.price-card .price { font-size: 2.4rem; font-weight: 800; color: var(--ink); margin: 14px 0 4px; letter-spacing: -.03em; }
.price-card .price small { font-size: .95rem; color: var(--ink-soft); font-weight: 400; font-family: var(--mono); }
.price-card ul { list-style: none; margin: 18px 0 24px; flex-grow: 1; }
.price-card li { padding: 7px 0 7px 28px; position: relative; font-size: .95rem; color: var(--ink-soft); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

/* ── Casos de uso ───────────────────────────── */
.case-card { border-left: 6px solid var(--accent); }
.case-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.case-meta span { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.case-meta strong { color: var(--accent-dark); }

/* ── Guías (blog) ───────────────────────────── */
.post-card h3 a { color: var(--ink); }
.post-card .post-date { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }

/* ── Encargos: potencial (home) ─────────────── */
.brief-list { display: grid; gap: 16px; max-width: 880px; margin: 0 auto; }
.brief {
  display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 18px; align-items: center;
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 20px 26px; transition: transform .15s ease, box-shadow .15s ease;
}
.brief:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.brief .b-ask { font-size: 1.02rem; color: var(--ink); font-weight: 600; }
.brief .b-ask::before { content: "« "; color: var(--accent); font-weight: 800; }
.brief .b-ask::after { content: " »"; color: var(--accent); font-weight: 800; }
.brief .b-arrow { font-family: var(--mono); color: var(--accent); font-size: 1.1rem; }
.brief .b-res { font-size: .9rem; color: var(--ink-soft); }
.brief .b-res strong { display: block; color: var(--ink); font-size: .95rem; }
.brief-cta { text-align: center; margin-top: 34px; }
.brief-cta .mono-label { display: block; margin-bottom: 16px; }

/* ── Quién está detrás (home) ───────────────── */
.founder-strip {
  display: flex; align-items: center; gap: 28px; max-width: 880px; margin: 0 auto;
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 30px 34px; box-shadow: var(--shadow);
}
.founder-strip .f-avatar {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #fff; border: var(--border);
  display: grid; place-items: center; font-size: 1.7rem; font-weight: 800;
}
.founder-strip p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.founder-strip .f-name { font-weight: 800; color: var(--ink); font-size: 1.15rem; display: block; margin-bottom: 4px; }

/* ── Vertical destacado (home) ──────────────── */
.vertical-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.vertical-card {
  border: var(--border); border-radius: var(--radius); padding: 40px 34px;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vertical-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.vertical-card.v-ink { background: var(--ink); color: #D6C8D2; }
.vertical-card.v-ink h3 { color: var(--paper); font-size: 1.6rem; }
.vertical-card.v-accent { background: var(--accent); color: #F4D5E2; }
.vertical-card.v-accent h3 { color: #fff; font-size: 1.6rem; }
.vertical-card .mono-label { margin-bottom: 12px; }
.vertical-card.v-ink .mono-label { color: var(--amber); }
.vertical-card.v-accent .mono-label { color: #F0C6D8; }
.vertical-card p { flex-grow: 1; }
.vertical-card .btn { align-self: flex-start; margin-top: 18px; }
.vertical-note { text-align: center; margin: 30px auto 0; max-width: 620px; color: var(--ink-soft); font-size: .98rem; }

/* ── Testimonios reales ────────────────────── */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; align-items: stretch;
}
.testimonial-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonial-card {
  position: relative; margin: 0; padding: 34px 28px 26px;
  background: #fff; border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.testimonial-card::before {
  content: "“"; position: absolute; top: 8px; left: 20px;
  font-family: var(--display); font-size: 3.2rem; line-height: 1;
  color: var(--accent); opacity: .5;
}
.testimonial-card p {
  margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.65;
}
.testimonial-card footer {
  margin-top: auto; padding-top: 20px; color: var(--ink-soft);
  font-family: var(--mono); font-size: .76rem; line-height: 1.5;
}
.testimonial-single { max-width: 820px; margin: 34px auto 0; }
.prose .testimonial-card { margin: 34px 0; padding: 34px 28px 26px; border-left: var(--border); }
.prose .testimonial-card footer { margin-top: 0; padding-top: 20px; }

/* ── Panel de ventas (interno) ──────────────── */
.panel-login { max-width: 520px; margin: 0 auto; }
.panel-login h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 12px; }
.panel-login .lead { font-size: 1.05rem; margin-bottom: 24px; }
.panel-nota { font-size: .87rem; color: var(--ink-faint); }
.panel-nota code { font-family: var(--mono); font-size: .85em; background: var(--paper-deep); padding: 1px 5px; border-radius: 4px; }

.panel-wrap { padding: 30px 0 70px; }
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.panel-top h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.panel-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 22px 0 24px; border-bottom: var(--border); padding-bottom: 0; }
.panel-nav a {
  padding: 10px 16px; font-weight: 700; font-size: .93rem; color: var(--ink-soft);
  text-decoration: none; border: 1.5px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0; margin-bottom: -1.5px;
}
.panel-nav a:hover { color: var(--accent-dark); text-decoration: none; }
.panel-nav a.activo { background: var(--paper); border-color: #4A3D46; border-bottom-color: var(--paper); color: var(--ink); }

.panel-aviso { border: var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px; font-size: .95rem; }
.panel-aviso.es-ok { background: #DFF0DC; border-color: #2F7D52; }
.panel-aviso.es-error { background: var(--accent-soft); border-color: var(--accent); }
.panel-aviso.es-info { background: #FBEED2; border-color: #B8702A; }

.panel-card { background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px; }
.panel-card h2 { font-size: 1.35rem; margin-bottom: 14px; }
.panel-card form { margin-top: 4px; }
.panel-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.panel-vacio { text-align: center; padding: 46px 28px; }
.panel-vacio p { max-width: 46em; margin: 0 auto 20px; color: var(--ink-soft); }

.panel-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.pc { border: var(--border); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); }
.pc.destaca { background: var(--accent-soft); border-color: var(--accent); }
.pc-num { display: block; font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--ink); }
.pc-lbl { font-size: .86rem; color: var(--ink-soft); }

.embudo { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.emb { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border: var(--border); border-radius: var(--radius); text-decoration: none; background: var(--paper-deep); }
.emb:hover { text-decoration: none; transform: translateY(-2px); }
.emb.vacio { opacity: .55; }
.emb-num { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--ink); }
.emb-nom { font-size: .8rem; color: var(--ink-soft); }
.emb.c-verde   { background: #DFF0DC; }
.emb.c-ciruela { background: var(--accent-soft); }
.emb.c-ambar   { background: #FBEED2; }
.emb.c-azul    { background: #DDE7F5; }

.panel-lista { list-style: none; margin: 0; }
.panel-lista li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.panel-lista li:last-child { border-bottom: 0; }
.panel-lista a { text-decoration: none; }
.pl-meta { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 2px; }
.atrasado { color: var(--accent-dark); font-weight: 700; }

.nota-mini { display: inline-block; min-width: 30px; text-align: center; font-family: var(--mono); font-size: .8rem; font-weight: 600; padding: 2px 6px; border-radius: 6px; border: 1.5px solid var(--ink); }
.n-alta  { background: #DFF0DC; }
.n-media { background: #FBEED2; }
.n-baja  { background: var(--accent-soft); }
.n-pend  { background: var(--paper-deep); color: var(--ink-faint); }
.n-error { background: #F5D7D7; }
.nota-grande { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 2.1rem; font-weight: 700; }

.panel-tabla-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--paper); }
.panel-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.panel-tabla thead th { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 11px 14px; text-align: left; white-space: nowrap; }
.panel-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.panel-tabla tr:last-child td { border-bottom: 0; }
.td-sub { display: block; font-size: .82rem; color: var(--ink-soft); }
.badge-estado { display: inline-block; font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1.5px solid var(--ink); white-space: nowrap; }
.badge-estado.c-verde { background: #DFF0DC; }
.badge-estado.c-ciruela { background: var(--accent-soft); }
.badge-estado.c-ambar { background: #FBEED2; }
.badge-estado.c-azul { background: #DDE7F5; }
.badge-estado.c-gris { background: var(--paper-deep); }

/* cambio de estado al momento desde la lista */
.estado-rapido { margin: 0; }
.sel-estado {
  font-family: var(--font); font-size: .8rem; font-weight: 700; padding: 4px 8px;
  /* Ancho suficiente para "Ha respondido", el estado de nombre más largo:
     sin esto la columna lo recortaba a "Ha…" y no se leía nada. */
  min-width: 8.5rem;
  border: 1.5px solid var(--ink); border-radius: 99px; cursor: pointer;
  background: var(--paper-deep); color: var(--ink); appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231E1620' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.sel-estado:hover { box-shadow: 2px 2px 0 rgba(30,22,32,.18); }
.sel-estado.c-verde   { background-color: #DFF0DC; }
.sel-estado.c-ciruela { background-color: var(--accent-soft); }
.sel-estado.c-ambar   { background-color: #FBEED2; }
.sel-estado.c-azul    { background-color: #DDE7F5; }
.ficha-estado-actual { font-size: .88rem; color: var(--ink-soft); margin-bottom: 18px; }

.panel-filtros { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-grupo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-grupo a { font-size: .87rem; font-weight: 600; padding: 6px 13px; border: 1.5px solid var(--line); border-radius: 99px; color: var(--ink-soft); text-decoration: none; }
.pf-grupo a:hover { text-decoration: none; border-color: var(--ink); }
.pf-grupo a.activo { background: var(--accent); color: #fff; border-color: var(--accent); }

.panel-ficha-top { display: flex; gap: 24px; align-items: flex-start; }
.panel-ficha-top h2 { margin-bottom: 4px; }
.ficha-gancho { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 10px 14px; margin: 12px 0; font-size: .95rem; }
.ficha-resumen { font-size: .95rem; color: var(--ink-soft); margin: 8px 0 0; }

/* Dos números que se leen al revés: potencial (más = mejor) y nota web */
.ficha-notas { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.ficha-notas .nota-mini { margin-top: 10px; }
.nota-etiqueta { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 700; }
.td-notaweb { color: var(--ink-faint); font-size: .72rem; }

/* Señales de carga operativa */
.ficha-senales { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.ficha-senales li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ficha-senales li:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-senales strong { display: block; margin-bottom: 4px; }
.sen-evidencia { display: block; color: var(--ink-faint); font-size: .86rem; }
.sen-oportunidad { display: block; color: var(--ink-soft); line-height: 1.5; margin-top: 5px;
  border-left: 3px solid var(--accent-soft); padding-left: 10px; }

/* Propuesta redactada por la IA para ese negocio concreto */
.ficha-propuesta { margin: 0; padding-left: 1.3em; font-size: .92rem; }
.ficha-propuesta li { margin-bottom: 14px; }
.ficha-propuesta li:last-child { margin-bottom: 0; }
.ficha-propuesta strong { display: block; margin-bottom: 3px; }
.ficha-propuesta span { display: block; color: var(--ink-soft); line-height: 1.5; }

/* Marca de "esto lo ha analizado la IA" */
.tag-ia {
  display: inline-block; vertical-align: middle; font-family: var(--font);
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 2px 7px; border-radius: 99px;
  margin-left: 6px; font-variation-settings: normal;
}
/* El botón flotante de WhatsApp es para visitantes de la web pública.
   En el panel tapa la tabla y no aporta: el equipo no se escribe a sí mismo. */
body:has(.panel-wrap) .whatsapp-fab,
body:has(.panel-login) .whatsapp-fab { display: none; }

.aviso-ia { font-size: .9rem; line-height: 1.55; margin-bottom: 22px; }
.aviso-ia code { font-size: .84em; }
.ia-probar { margin-top: 8px; text-align: left; }
.pb-aviso { color: var(--amber) !important; }
.panel-volver { margin-bottom: 14px; font-size: .9rem; }
.panel-mensaje { width: 100%; font-family: var(--mono); font-size: .83rem; line-height: 1.6; }
.panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.panel-hist { list-style: none; margin: 0; font-size: .87rem; }
.panel-hist li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.panel-hist li:last-child { border-bottom: 0; }
.ph-fecha { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); margin-right: 6px; }
.panel-borrar { text-align: center; margin-top: 8px; }
.panel-link-borrar { background: none; border: 0; color: var(--ink-faint); font-size: .84rem; text-decoration: underline; cursor: pointer; font-family: inherit; }
.panel-link-borrar:hover { color: var(--accent-dark); }

.panel-progreso { margin-top: 18px; }
.pb { height: 10px; background: var(--paper-deep); border: 1.5px solid var(--ink); border-radius: 99px; overflow: hidden; }
.pb-in { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.panel-log { list-style: none; margin: 12px 0 0; max-height: 220px; overflow-y: auto; font-size: .85rem; }
.panel-log li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.panel-log em { color: var(--ink-faint); font-style: normal; font-size: .82rem; }
.panel-ayuda { margin-top: 18px; font-size: .89rem; }
.panel-ayuda summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); }
.panel-ayuda ul { margin: 10px 0 0 1.2em; color: var(--ink-soft); }
.panel-ayuda li { margin-bottom: 6px; }

.panel-claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.panel-claves > div { border-left: 3px solid var(--accent); padding-left: 14px; }
.panel-claves strong { display: block; margin-bottom: 3px; }
.panel-claves span { font-size: .89rem; color: var(--ink-soft); }
.guion { display: grid; gap: 16px; }
.g-paso { display: flex; gap: 14px; align-items: flex-start; }
.g-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--mono); font-size: .85rem; font-weight: 600; }
.g-texto { background: var(--paper-deep); border-radius: var(--radius); padding: 12px 16px; margin: 6px 0; font-size: .95rem; }
.g-nota { font-size: .86rem; color: var(--ink-faint); margin: 0; }
/* Preguntas del guion de diagnóstico: se leen de un vistazo durante la reunión */
.g-lista { margin: 6px 0 10px; padding-left: 0; list-style: none; }
.g-lista li { background: var(--paper-deep); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 8px 14px; margin-bottom: 6px; font-size: .95rem; }
.objeciones details { border: var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.objeciones summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.objeciones p { margin: 12px 0 0; font-size: .93rem; color: var(--ink-soft); }
.panel-cita { background: var(--paper-deep); border-left: 4px solid var(--accent); padding: 16px 20px; font-size: .95rem; border-radius: 0 var(--radius) var(--radius) 0; }
.panel-reglas { margin: 0 0 0 1.2em; }
.panel-reglas li { margin-bottom: 8px; font-size: .93rem; color: var(--ink-soft); }
.panel-doc h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .panel-dos { grid-template-columns: 1fr; }
  .panel-ficha-top { flex-direction: column; gap: 14px; }
}

/* ── Proyectos (casos reales) ───────────────── */
.proy-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
  border: var(--border); border-radius: var(--radius); padding: 22px 26px;
  background: var(--paper-deep); margin-bottom: 34px;
}
.proy-ficha > div { display: flex; flex-direction: column; gap: 3px; }
.proy-ficha strong { color: var(--ink); font-size: .95rem; line-height: 1.3; }
.proy-ficha-dato { border-left: 3px solid var(--accent); padding-left: 16px; }
.proy-dato-num { font-family: var(--display); font-size: 2.1rem; font-weight: 700; color: var(--accent-dark); line-height: 1; }
.proy-ficha-dato span:last-child { font-size: .84rem; color: var(--ink-soft); line-height: 1.3; }
.proy-cliente { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px !important; }
.proj-body h3 a { color: var(--ink); text-decoration: none; }
.proj-body h3 a:hover { color: var(--accent-dark); }

@media (max-width: 680px) { .proy-ficha { grid-template-columns: 1fr; gap: 14px; } }

/* ── Auditoría gratuita ─────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.aud-form { display: flex; gap: 12px; max-width: 620px; margin: 30px 0 10px; flex-wrap: wrap; }
.aud-form input[type="text"] {
  flex: 1 1 280px; padding: 15px 18px; font-size: 1.05rem;
  border: var(--border); border-radius: var(--radius); background: #fff;
}
.aud-form input:focus { outline: none; box-shadow: 3px 3px 0 var(--accent); }
.aud-form .btn { flex: 0 0 auto; }
.aud-nota { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); margin: 0; }

.aud-resumen {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  border: var(--border); border-radius: var(--radius); padding: 30px 34px;
  background: var(--paper); box-shadow: var(--shadow); margin-bottom: 34px;
}
.aud-nota-box {
  flex: 0 0 auto; width: 130px; height: 130px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--ink);
}
.aud-nota-box.aud-ok  { background: #DFF0DC; border-color: #2F7D52; }
.aud-nota-box.aud-med { background: #FBEED2; border-color: #B8702A; }
.aud-nota-box.aud-bad { background: var(--accent-soft); border-color: var(--accent); }
.aud-nota-num { font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--ink); }
.aud-nota-de { font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.aud-resumen-txt { flex: 1 1 320px; }
.aud-resumen-txt h2 { font-size: 1.9rem; margin: 4px 0 8px; }
.aud-resumen-txt p { margin-bottom: 8px; color: var(--ink-soft); }
.aud-conteo { font-size: .93rem; }
.aud-conteo strong { color: var(--ink); }

.aud-lista { display: grid; gap: 12px; }
.aud-item {
  display: flex; gap: 16px; align-items: flex-start;
  border: var(--border); border-radius: var(--radius); padding: 18px 22px; background: var(--paper);
}
.aud-item.aud-bien    { border-left: 6px solid #2F7D52; }
.aud-item.aud-regular { border-left: 6px solid #B8702A; }
.aud-item.aud-mal     { border-left: 6px solid var(--accent); }
.aud-icono {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: #fff;
}
.aud-bien .aud-icono    { background: #2F7D52; }
.aud-regular .aud-icono { background: #B8702A; }
.aud-mal .aud-icono     { background: var(--accent); }
.aud-item h3 { font-size: 1.08rem; margin-bottom: 4px; }
.aud-detalle { font-size: .95rem; color: var(--ink); margin-bottom: 4px; }
.aud-impacto { font-size: .89rem; color: var(--ink-soft); margin: 0; }
.aud-pie { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-top: 26px; }

/* Informe público con IA: evita el aspecto de "puntuación automática" y
   separa visualmente hechos, interpretación y decisión comercial. */
.aud-hero .lead { max-width: 820px; }
.aud-ai-resumen {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px;
  align-items: start; border: var(--border); border-radius: var(--radius);
  padding: 34px 38px; background: var(--paper); box-shadow: var(--shadow);
}
.aud-ai-sello {
  width: 58px; height: 58px; display: grid; place-items: center;
  border: var(--border); border-radius: 50%; background: var(--ink);
  color: var(--paper); font-family: var(--mono); font-weight: 800;
  letter-spacing: .08em;
}
.aud-ai-resumen h2 { font-size: clamp(1.75rem, 4vw, 2.45rem); margin: 5px 0 12px; }
.aud-ai-resumen p { color: var(--ink-soft); max-width: 760px; }
.aud-ai-resumen .aud-confianza {
  margin: 16px 0 0; font-family: var(--mono); font-size: .76rem;
  color: var(--ink-faint); text-transform: none;
}
.aud-head { margin: 58px 0 26px; max-width: 760px; }
.aud-decision-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 42px;
}
.aud-decision {
  border: var(--border); border-radius: var(--radius); padding: 30px;
  background: var(--paper-deep);
}
.aud-decision-si { background: var(--ink); color: #D9D2E0; }
.aud-decision h2 { font-size: 1.45rem; margin: 8px 0 12px; }
.aud-decision p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.aud-decision-si h2 { color: var(--paper); }
.aud-decision-si p { color: #D9D2E0; }
.aud-decision-si .mono-label { color: var(--amber); }
.aud-limite { margin: 20px 0 0; }
.aud-oferta {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 32px; align-items: center; margin-top: 54px; padding: 42px;
  background: var(--accent-soft); border: var(--border); border-radius: var(--radius);
}
.aud-oferta h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 8px 0 12px; }
.aud-oferta-copy > p { max-width: 650px; }
.aud-oferta-precio { font-family: var(--mono); font-weight: 700; color: var(--accent-dark); }
.aud-oferta-nota { margin: 15px 0 0; color: var(--ink-faint); font-size: .84rem; }
.aud-testimonio { box-shadow: none; }
.aud-como {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 34px; align-items: center; margin: 58px 0 0;
}
.aud-como h2 { margin: 8px 0 14px; }
.aud-como p { color: var(--ink-soft); }

/* mini informe personalizado */
.aud-informe { margin-top: 44px; border: var(--border); border-radius: var(--radius); background: var(--paper-deep); padding: 34px 36px; }
.aud-informe-head { max-width: 46em; margin-bottom: 26px; }
.aud-informe-head h2 { font-size: 1.9rem; margin-bottom: 10px; }
.aud-informe-head p { color: var(--ink-soft); margin: 0; }
.aud-recs { display: grid; gap: 14px; }
.aud-rec { display: flex; gap: 16px; align-items: flex-start; background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 20px 24px; }
.aud-rec-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--mono); font-size: .9rem; }
.aud-rec h3 { font-size: 1.1rem; margin-bottom: 6px; }
.aud-rec p { font-size: .96rem; color: var(--ink-soft); margin-bottom: 8px; }
.aud-informe-pie { font-size: .87rem; color: var(--ink-faint); margin: 22px 0 0; max-width: 52em; }
@media (max-width: 680px) { .aud-informe { padding: 24px 20px; } }

@media (max-width: 680px) {
  .aud-resumen { gap: 20px; padding: 24px; }
  .aud-nota-box { width: 100px; height: 100px; }
  .aud-nota-num { font-size: 2.3rem; }
  .aud-ai-resumen { grid-template-columns: 1fr; padding: 26px 22px; }
  .aud-ai-sello { width: 50px; height: 50px; }
  .aud-decision-grid,
  .aud-oferta,
  .aud-como { grid-template-columns: 1fr; }
  .aud-oferta { padding: 28px 22px; }
}

/* ── Guías: menú lateral + relacionadas ─────── */
.guia-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 54px; align-items: start; }
.guia-layout .prose { max-width: 100%; margin: 0; }

.guia-side-inner { position: sticky; top: 96px; }
.guia-side-title { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 16px; }
.guia-side-group { margin-bottom: 20px; }
.guia-side-cat { font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: 7px; }
.guia-side-group ul { list-style: none; margin: 0; border-left: 2px solid var(--line); }
.guia-side-group li { margin: 0; }
.guia-side-group a {
  display: block; padding: 6px 0 6px 12px; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--ink-soft);
  font-size: .89rem; line-height: 1.35; text-decoration: none;
}
.guia-side-group a:hover { color: var(--accent-dark); border-left-color: var(--line); text-decoration: none; }
.guia-side-group a[aria-current] { color: var(--accent-dark); font-weight: 700; border-left-color: var(--accent); }
.guia-side-cta { border: var(--border); border-radius: var(--radius); padding: 16px; background: var(--paper-deep); margin-top: 26px; }
.guia-side-cta p { font-size: .86rem; color: var(--ink-soft); margin-bottom: 12px; }

.guia-cierre { margin-top: 56px; padding-top: 36px; border-top: var(--border); }
.guia-cierre h2 { font-size: 1.5rem; margin-bottom: 20px; }
.guia-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guia-rel-card {
  display: flex; flex-direction: column; gap: 5px; padding: 18px;
  border: var(--border); border-radius: var(--radius); background: var(--paper);
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.guia-rel-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.guia-rel-cat { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-dark); }
.guia-rel-card strong { color: var(--ink); font-size: .95rem; line-height: 1.25; }
.guia-rel-desc { color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }

.guia-final-cta {
  margin-top: 32px; padding: 30px 32px; text-align: center;
  border: var(--border); border-radius: var(--radius); background: var(--accent-soft);
}
.guia-final-cta p { font-size: 1.02rem; color: var(--ink); max-width: 46em; margin: 0 auto 20px; }

/* listado de guías por categoría */
.guia-cat-head { margin: 46px 0 20px; }
.guia-cat-head:first-of-type { margin-top: 0; }
.guia-cat-head h2 { font-size: 1.6rem; margin-bottom: 4px; }
.guia-cat-head p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

@media (max-width: 900px) {
  .guia-layout { grid-template-columns: 1fr; gap: 32px; }
  .guia-side-inner { position: static; }
  .guia-side { border-bottom: var(--border); padding-bottom: 24px; }
  .guia-rel { grid-template-columns: 1fr; }
}

/* ── Formación (banda oscura, home) ─────────── */
.train-band { background: var(--ink); color: #D6C8D2; border-top: var(--border); border-bottom: var(--border); }
.train-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.train-inner h2 { color: var(--paper); margin-bottom: 18px; }
.train-inner .kicker.kd { color: var(--paper); border-color: #4E404A; margin-bottom: 20px; }
.train-lead-txt { font-size: 1.15rem; color: #D6C8D2; line-height: 1.55; margin-bottom: 28px; max-width: 33em; }
.train-lead-txt strong { color: var(--paper); }
.train-card { background: var(--paper); color: var(--ink); border: var(--border); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-lg); }
.train-card .mono-label { color: var(--accent-dark); margin-bottom: 16px; display: block; }
.train-points { list-style: none; margin: 0; }
.train-points li { padding: 11px 0 11px 30px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .97rem; }
.train-points li:last-child { border-bottom: 0; }
.train-points li strong { color: var(--ink); }
.train-points li::before { content: "→"; position: absolute; left: 3px; color: var(--accent); font-weight: 700; }
.train-foot { margin: 18px 0 0; font-size: .88rem; color: var(--ink-faint); }
@media (max-width: 860px) { .train-inner { grid-template-columns: 1fr; gap: 36px; } }

/* ── Nexio landing ──────────────────────────── */
.chat-demo {
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; max-width: 420px;
}
.chat-head { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 14px 18px; }
.chat-head .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-weight: 800; color: #fff; }
.chat-head strong { display: block; font-size: .95rem; color: var(--paper); }
.chat-head span { font-family: var(--mono); font-size: .7rem; color: var(--lab-green); }
.chat-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; background: #EEE6EA; min-height: 320px; }
.msg { max-width: 85%; padding: 10px 14px; border: 1.5px solid var(--ink); font-size: .88rem; line-height: 1.45; border-radius: 10px; }
.msg.in { align-self: flex-start; background: #fff; border-bottom-left-radius: 2px; }
.msg.out { align-self: flex-end; background: #D9F5C9; border-bottom-right-radius: 2px; }
.msg .msg-meta { display: block; font-family: var(--mono); font-size: .62rem; color: var(--ink-faint); margin-top: 4px; text-align: right; }

.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: var(--border); border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); }
.metric-band .m { padding: 30px 24px; border-right: 1px solid #3A2E38; }
.metric-band .m:last-child { border-right: 0; }
.metric-band .m .num { font-size: 2.4rem; font-weight: 800; color: var(--amber); letter-spacing: -.02em; line-height: 1; }
.metric-band .m .lbl { color: #9A8A94; font-size: .86rem; margin-top: 10px; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4, .price-cards, .steps, .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .metric-band { grid-template-columns: repeat(2, 1fr); }
  .metric-band .m { border-bottom: 1px solid #3A2E38; }
  .vertical-split { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .brief { grid-template-columns: 1fr; gap: 10px; }
  .brief .b-arrow { display: none; }
  .founder-strip { flex-direction: column; text-align: center; }
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4, .stats, .price-cards, .price-cards.two, .steps, .proj-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .metric-band { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--paper); border-bottom: var(--border);
    flex-direction: column; padding: 22px 24px; gap: 18px; align-items: flex-start;
    box-shadow: 0 10px 0 rgba(30,22,32,.12);
  }
  .main-nav.open { display: flex; }
  .steps { gap: 36px; }
  .console-body { min-height: 240px; }

  /* desplegable en móvil: se abre en línea, sin flotar */
  .nav-item { display: block; width: 100%; }
  .nav-drop-toggle { width: 100%; justify-content: space-between; padding: 4px 0; }
  .nav-drop, .nav-item.open .nav-drop {
    position: static; transform: none; left: auto; width: 100%; max-width: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; padding: 4px 0 4px 14px; margin: 6px 0;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-drop { display: none; }
  .nav-item.open .nav-drop { display: block; }
  .nav-drop-grid { grid-template-columns: 1fr; gap: 0; }
  .nav-drop-grid a { padding: 10px 8px; }
  .nav-drop-foot { flex-direction: column; align-items: stretch; text-align: left; }
  .nav-drop-foot .btn { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   LA ESCALERA — los cuatro escalones de la oferta.
   Es el componente central de la home: comunica de un vistazo que
   se puede entrar por abajo y que nadie te obliga a subir. Cada
   escalón se indenta un poco más que el anterior; en móvil la
   indentación desaparece (no cabe y además ya no hace falta:
   el orden vertical comunica lo mismo).
   ══════════════════════════════════════════════════════════════ */
.escalera { display: grid; gap: 18px; max-width: 1000px; margin: 0 auto; }

.esc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* La indentación creciente es la metáfora. Sutil a propósito:
   si se exagera, en portátiles de 13" el cuarto escalón se rompe. */
.esc-2 { margin-left: 26px; }
.esc-3 { margin-left: 52px; }
.esc-4 { margin-left: 78px; }

/* El primer escalón es el que queremos que se venda: pesa más. */
.esc-1 {
  background: #FCF7F9;
  box-shadow: var(--shadow-lg);
  border-width: 2.5px;
}

@media (hover: hover) {
  .esc:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
  .esc-1:hover { box-shadow: 10px 10px 0 rgba(30, 22, 32, .15); }
}

.esc-num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-faint);
  line-height: 1;
  align-self: start;
  padding-top: 4px;
}
.esc-1 .esc-num { color: var(--accent); }

.esc-body h3 { margin-bottom: 8px; }
.esc-body p { font-size: .97rem; color: var(--ink-soft); margin-bottom: 12px; }

.esc-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.esc-1 .esc-tag { color: var(--accent); }

.esc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.esc-meta span {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-soft);
}
.esc-meta strong { color: var(--ink); font-weight: 600; }

.esc-price { text-align: right; min-width: 150px; }
.esc-eur {
  font-family: var(--font);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  margin-bottom: 12px;
  white-space: nowrap;
}
.esc-1 .esc-eur { font-size: 2.1rem; color: var(--accent); }
.esc-price .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .esc-2, .esc-3, .esc-4 { margin-left: 0; }
  .esc { grid-template-columns: auto 1fr; padding: 22px 22px; gap: 16px; }
  .esc-price { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 18px; }
  .esc-eur { margin-bottom: 0; }
  .esc-price .btn { width: auto; }
}
@media (max-width: 520px) {
  .esc-price { flex-direction: column; align-items: stretch; gap: 12px; }
  .esc-price .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   REFINAMIENTO VISUAL v2 · agosto 2026
   Capa de corrección sobre la hoja original. Va al final a
   propósito: gana la cascada sin tener que tocar 60 KB de reglas
   y se puede quitar de un tijeretazo si algo no convence.
   Objetivo: que la web parezca de una empresa que cobra 2.900 €,
   no de un portfolio. Menos artificios, más aire, más contraste.
   ══════════════════════════════════════════════════════════════ */

/* ── Botones: la corrección más visible ───────────────────────
   v1 movía el botón en diagonal al pasar el ratón y dejaba una
   sombra dura desplazada. Es el gesto que más "delataba" la
   estética antigua. Ahora: elevación real y un empuje mínimo. */
.btn {
  border-radius: 12px;
  padding: 14px 26px;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .15s cubic-bezier(.2,.8,.2,1),
              box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0);    box-shadow: var(--shadow-sm); }

.btn-primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
  box-shadow: 0 6px 20px rgba(168,21,82,.32);
}
.btn-secondary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-secondary:hover { background: #241F30; border-color: #241F30; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-deep); border-color: #D5CEDF; box-shadow: var(--shadow-sm); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; box-shadow: var(--shadow); }
.btn-ghost-light {
  background: rgba(255,255,255,.06); color: #fff;
  border: 1.5px solid rgba(255,255,255,.28); box-shadow: none;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* ── Tarjetas: borde fino, elevación al pasar por encima ────── */
.card, .proj-card, .price-card, .stat, .step, .train-card, .esc, .aud-item, .aud-rec {
  border: var(--border);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .card:hover, .proj-card:hover, .esc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #DED7E6;
  }
  .esc-1:hover { box-shadow: var(--shadow-lg); }
}
.price-card.featured {
  box-shadow: var(--shadow-lg);
  background: #fff;
  border: 1.5px solid var(--accent);
}
.esc-1 { border: 1.5px solid var(--accent); background: #fff; box-shadow: var(--shadow); }

/* ── Aire. v1 apretaba demasiado para el tamaño de tipografía ─ */
.section { padding: 104px 0; }
.section-head { margin-bottom: 64px; }
.container { max-width: 1200px; }

@media (max-width: 780px) {
  .section { padding: 68px 0; }
  .section-head { margin-bottom: 40px; }
}

/* ── Tipografía: más contraste de tamaño entre titular y cuerpo,
      que es lo que hace que una página se lea como diseñada ──── */
h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); letter-spacing: -.025em; line-height: 1.1; }
h3 { font-size: 1.24rem; letter-spacing: -.015em; }
body { font-size: 17px; letter-spacing: -.005em; }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); }
.section-head p { font-size: 1.14rem; line-height: 1.6; }

/* El subrayado del titular: v1 usaba un border-bottom recto y grueso.
   Un trazo con curva parece dibujado a mano y llama menos la atención
   sobre sí mismo. */
.hl, .hero h1 .hl {
  position: relative;
  color: var(--accent);
  border-bottom: 0;
  /* Fuera el subrayado recto de la v1: se solapaba con el trazo nuevo
     y salían dos rayas. La regla original vive en `.hero h1 .hl`, que
     tiene más especificidad, así que hay que nombrarla aquí también. */
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C22 4 46 2.5 70 3.2c18 .5 36 2.4 48 5' stroke='%23A81552' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% .32em;
  background-position: 0 96%;
  padding-bottom: .08em;
}

/* ── Kicker: era una píldora con borde. Ahora, etiqueta limpia ─ */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent);
  border: 0; border-radius: 99px;
  padding: 7px 16px; margin-bottom: 20px;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.kicker.kd { background: rgba(255,255,255,.12); color: #fff; }

/* ── Cabecera: cristal esmerilado en vez de barra plana ─────── */
.site-header {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { height: 76px; }

/* ── Secciones alternas: sin bordes duros arriba y abajo ────── */
.section-alt { border-top: 0; border-bottom: 0; }

/* ── Bandas oscuras: negro real en vez de ciruela apagada ───── */
.metric-band { border: 0; background: var(--ink); box-shadow: var(--shadow-lg); }
.train-band  { background: var(--ink); }
.cta-band    { background: var(--ink); }

/* ── Franja de marca: quitamos peso. Era demasiado carnaval ─── */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); opacity: .5; }
.marquee span { font-size: .82rem; }

/* ── Detalles pequeños que suman ──────────────────────────────── */
.faq details { border: var(--border); border-radius: var(--radius-sm); box-shadow: none; }
.faq details[open] { box-shadow: var(--shadow-sm); border-color: #DED7E6; }
.form-card, .note-box, .guia-final-cta { border: var(--border); box-shadow: var(--shadow-sm); }
input, select, textarea { border-radius: 10px !important; }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
::selection { background: var(--accent); color: #fff; }

/* Foco visible y bonito para quien navega con teclado */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* La "V" del fundador: mientras no haya foto real, que al menos
   no parezca un avatar por defecto de una app. */
.f-avatar {
  background: linear-gradient(140deg, var(--accent) 0%, #6B1038 100%);
  color: #fff; border: 0; box-shadow: var(--shadow);
}
.founder-strip { border: var(--border); box-shadow: var(--shadow-sm); background: var(--paper); }

/* ── Auditoría v2: las señales de negocio son ahora el plato ──── */
.aud-item.aud-senal { border-left: 3px solid var(--accent); background: var(--paper); }
.aud-senal .aud-icono {
  background: var(--accent); color: #fff; border: 0;
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
}
.aud-senal .aud-detalle { color: var(--ink); }
.aud-senal .aud-impacto { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

/* La caja de la nota pasa a ser "potencial": el número que de verdad
   importa es cuánto encaja esta empresa, no si su web está bien hecha. */
.aud-nota-de { line-height: 1.25; text-align: center; }

/* Anexo técnico plegado: presente pero claramente secundario */
.aud-anexo {
  border: var(--border); border-radius: var(--radius);
  padding: 22px 26px; background: var(--paper-deep);
}
.aud-anexo > summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.aud-anexo > summary::-webkit-details-marker { display: none; }
.aud-anexo > summary::before {
  content: "▸"; color: var(--accent); font-size: 1.1rem;
  transition: transform .18s ease; display: inline-block;
}
.aud-anexo[open] > summary::before { transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════════════
   ANTES / DESPUÉS — sustituye a la consola negra de la portada.
   Objetivo: que una persona no técnica entienda en tres segundos
   qué compra. Números concretos, sin jerga y sin pantalla de
   programador.
   ══════════════════════════════════════════════════════════════ */
.antes-despues {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 30px 24px;
}
.ad-cabecera { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 4px; }
.ad-cabecera .mono-label { color: var(--accent); }
.ad-cabecera p { font-size: .89rem; color: var(--ink-faint); margin: 6px 0 0; }

.ad-lista { list-style: none; margin: 0; padding: 0; }
.ad-lista li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.ad-lista li:last-child { border-bottom: 0; }

.ad-tarea { font-size: .95rem; color: var(--ink); line-height: 1.35; }
.ad-tiempos { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.ad-antes {
  font-family: var(--mono); font-size: .85rem; font-style: normal;
  color: var(--ink-faint); text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.ad-flecha { color: var(--ink-faint); font-size: .9rem; }
.ad-despues {
  font-family: var(--mono); font-size: 1.06rem; font-weight: 700;
  color: var(--accent); letter-spacing: -.02em;
}
.ad-pie {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-soft); line-height: 1.5;
}

@media (max-width: 560px) {
  .antes-despues { padding: 22px 20px 18px; }
  .ad-lista li { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   PANEL · MI PLAN
   El manual dejó de ser un .md que nadie abre y pasó a ser la
   primera pantalla del panel, con lo hecho tachado y lo siguiente
   destacado. La idea es que al entrar no se vea un número, se vea
   una acción.
   ══════════════════════════════════════════════════════════════ */
.plan-cabecera { background: var(--ink); color: #fff; }
.plan-cabecera h2 { color: #fff; margin: 6px 0 8px; }
.plan-cabecera .mono-label { color: var(--amber); }
.plan-cabecera .panel-nota { color: rgba(255,255,255,.72); }
.plan-cabecera .panel-nota a, .plan-cabecera a { color: #fff; text-decoration: underline; }

.plan-progreso { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.plan-barra {
  flex: 1; height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.plan-barra span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--amber); transition: width .4s ease;
}
.plan-cuenta { margin: 0; font-family: var(--mono); font-size: .82rem; color: rgba(255,255,255,.8); white-space: nowrap; }
.plan-cuenta strong { color: #fff; }

.plan-bloque-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.plan-chip {
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  background: var(--paper-deep); color: var(--ink-soft);
  padding: 4px 12px; border-radius: 99px; white-space: nowrap;
}
.plan-completo .plan-chip { background: var(--accent-soft); color: var(--accent); }
.plan-completo { opacity: .72; }

.plan-pasos { list-style: none; margin: 18px 0 0; padding: 0; }
.plan-pasos li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.plan-check { margin: 0; flex: 0 0 auto; }
.plan-caja {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1.5px solid #CFC7DA; background: #fff;
  cursor: pointer; font-size: .95rem; font-weight: 700; color: #fff;
  display: grid; place-items: center; padding: 0;
  transition: background .15s, border-color .15s, transform .1s;
}
.plan-caja:hover { border-color: var(--accent); transform: scale(1.06); }
.es-hecho .plan-caja { background: var(--accent); border-color: var(--accent); }

.plan-texto { flex: 1; min-width: 0; }
.plan-que { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }
.plan-tiempo {
  font-family: var(--mono); font-size: .74rem; font-weight: 400;
  color: var(--ink-faint); margin-left: 8px; white-space: nowrap;
}
.plan-detalle { margin: 5px 0 0; font-size: .91rem; color: var(--ink-soft); line-height: 1.5; }
.plan-fecha { margin: 5px 0 0; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.es-hecho .plan-que { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; }
.es-hecho .plan-detalle { display: none; }

@media (max-width: 560px) {
  .plan-progreso { flex-direction: column; align-items: stretch; gap: 10px; }
  .plan-cuenta { text-align: right; }
}

/* ══════════════════════════════════════════════════════════════
   ARREGLO DE CONTRASTE · bloques "train-inner"
   Este componente nació dentro de .train-band, que tiene fondo
   tinta, así que sus textos se pintaron en blanco y lila claro.
   Al reutilizarlo en secciones claras (/formacion-ia/, /radar/,
   /colabora/, /charla/ y la portada) quedaba blanco sobre casi
   blanco: ilegible.
   La causa de fondo era que el color dependía del componente en
   vez de depender del fondo. Se corrige al revés: por defecto los
   textos son oscuros —que es lo seguro— y solo se aclaran cuando
   están DENTRO de .train-band. Así el fallo no puede repetirse
   aunque se reutilice el bloque en cualquier otro sitio.
   ══════════════════════════════════════════════════════════════ */

/* Por defecto (fondo claro) */
.train-inner h2        { color: var(--ink); }
.train-lead-txt        { color: var(--ink-soft); }
.train-lead-txt strong { color: var(--ink); }
.train-inner .kicker.kd {
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
}

/* Solo cuando el bloque va sobre fondo tinta */
.train-band .train-inner h2        { color: #fff; }
.train-band .train-lead-txt        { color: #D9D2E0; }
.train-band .train-lead-txt strong { color: #fff; }
.train-band .train-inner .kicker.kd {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.train-band { color: #D9D2E0; }

/* La tarjeta de la derecha es siempre clara, esté donde esté */
.train-card            { background: #fff; color: var(--ink); }
.train-card .mono-label{ color: var(--accent); }
.train-card .train-points li        { color: var(--ink-soft); }
.train-card .train-points li strong { color: var(--ink); }
.train-card .train-foot             { color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════
   PIE · contraste
   Dos fallos detectados midiendo, no a ojo:
   1. Un <strong> dentro de un enlace del pie heredaba el color de
      tinta general (#14111C) sobre el fondo del pie, que TAMBIÉN
      es tinta. Contraste 1.00: literalmente invisible. Pasó al
      destacar "Colabora conmigo" con <strong>.
   2. La línea de copyright estaba en 3.67:1, por debajo del
      mínimo legible de 4.5.
   ══════════════════════════════════════════════════════════════ */
.site-footer strong,
.site-footer b { color: #fff; }

.site-footer .footer-col a strong { color: #fff; }
.site-footer .footer-col a:hover strong { color: var(--paper); }

.footer-bottom p { color: #A79FB2; }

/* El grano encima del pie oscuro no aporta y resta legibilidad */
.site-footer, .cta-band { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   MÓVIL · zonas de toque
   Medido a 375 px: los enlaces del pie, los "Ver el caso →" de las
   tarjetas y los desplegables de preguntas quedaban en 19-27 px de
   alto. Con el dedo eso se falla, y cada fallo es alguien que se va.
   Los enlaces dentro de un párrafo se dejan como están: ahí la
   referencia de 44 px no aplica y separarlos rompería la lectura.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  /* En pantallas estrechas el flotante tapaba el CTA y el formulario. */
  .whatsapp-fab         { display: none; }
  .testimonial-grid,
  .testimonial-grid.cols-2 { grid-template-columns: 1fr; }

  .footer-col ul li     { margin-bottom: 2px; }
  .footer-col ul li a   { display: block; padding: 9px 0; }
  .footer-brand p a     { display: inline-block; padding: 7px 0; }

  .card-link            { display: inline-block; padding: 10px 0; }

  .faq summary          { padding-top: 16px; padding-bottom: 16px; }

  .nav-toggle           { padding: 12px; }

  /* Los botones ya cumplen, pero en móvil ganan ocupando el ancho:
     menos puntería y más superficie. */
  .hero-actions .btn,
  .guia-final-cta .btn  { width: 100%; }
  .hero-actions         { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ── Aviso de cookies ─────────────────────────────────────────────────
   Aparece abajo, no bloquea la lectura, y los dos botones pesan lo
   mismo: rechazar tiene que costar igual que aceptar. */
.aviso-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--ink); color: #C9BAC1;
  border-radius: var(--radius); padding: 16px 20px;
  box-shadow: 0 12px 40px rgba(30,22,32,.28);
  font-size: .88rem; line-height: 1.5;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.aviso-cookies.visible { opacity: 1; transform: none; }
.ac-texto { flex: 1 1 300px; }
.ac-texto strong { color: var(--paper); display: block; margin-bottom: 2px; }
.ac-texto a { color: var(--accent-bright); }
.ac-botones { display: flex; gap: 8px; flex-shrink: 0; }
.aviso-cookies .btn-ghost {
  background: transparent; color: var(--paper); border-color: rgba(251,248,246,.45);
}
.aviso-cookies .btn-ghost:hover { background: rgba(251,248,246,.1); border-color: var(--paper); }

@media (max-width: 560px) {
  .aviso-cookies { padding: 14px 16px; gap: 12px; }
  .ac-botones { width: 100%; }
  .ac-botones .btn { flex: 1; text-align: center; }
}

/* Tablas dentro de texto: que no rompan el ancho en móvil */
.prose-scroll { overflow-x: auto; }
.prose-scroll table { min-width: 460px; }