/* neuropsicologia.com — hoja única, identidad «Chispa» (azul cobalto desde el 23-sep) (23-sep-2026).
 *
 * La misma del portal de profesionales: azul cobalto (antes violeta eléctrico, evolución del
 * ciruela anterior), sol y naranja como acentos, papel cálido, serif gruesa
 * (Fraunces) para los titulares y una sans pública para leer largo. Pedido
 * del usuario con referencias de Lumosity, BrainHQ y Nibble: más riesgo en
 * color y forma, sin perder la sobriedad que pide un sitio de salud.
 *
 * Sigue siendo distinta del .co (teal) a propósito: dos dominios, dos sitios.
 * Tokens arriba, componentes después. Ningún color vive fuera de :root.
 */
:root {
  --tinta: #121F38;
  --tinta-2: #343F56;
  --texto: #232D40;
  --suave: #5B6578;
  --tenue: #8891A3;
  --papel: #FFF9F1;
  --papel-2: #F6EFE4;
  --blanco: #FFFFFF;
  --linea: #DCE8F5;
  --linea-2: #C4DAF5;
  --acento: #2B5EF0;
  --acento-2: #1F52DB;
  --acento-osc: #163FB5;
  --acento-suave: #E4F0FF;
  --lila: #E4F0FF;
  --naranja: #FF7A2F;
  --naranja-osc: #D85A14;
  --sol: #FFC83D;
  --menta: #22C58B;
  --ok: #1A8A5E;
  --ok-suave: #E3F7EE;
  --aviso: #8A5A0B;

  --display: 'Fraunces', 'Newsreader', Georgia, serif;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r: 22px;
  --r-s: 14px;
  --ancho: 1160px;
  --lectura: 68ch;
  --sombra: 0 14px 34px rgba(22, 62, 181, .10);
  --relieve: 0 5px 0 var(--linea-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 400 17px/1.65 var(--sans); font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--acento-2); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; position: relative; }
.lectura { max-width: var(--lectura); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── tipografía ─────────────────────────────────────────────────────────── */
h1, h2, h3 { color: var(--tinta); letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 800; font-optical-sizing: auto; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.1; }
h3 { font-family: var(--sans); font-size: 1.2rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--acento); }
p { margin: 0 0 1.05em; }
/* Etiquetas de sección: sin cápsula (la usan todas las plantillas). Texto
   azul precedido de una chispa naranja, el guiño al nombre de la identidad. */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 800 .76rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--acento); margin: 0 0 16px; }
.eyebrow::before { content: ''; flex: none; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5C11.3 16.9 7.1 12.7 1.5 12 7.1 11.3 11.3 7.1 12 1.5z' fill='%23FF7A2F'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Etiqueta del héroe: pegatina. Insignia azul con icono, texto en la serif
   cursiva y un trazo de marcador amarillo debajo, levemente torcida. */
.eyebrow-heroe { gap: 12px; text-transform: none; letter-spacing: 0; font: 700 italic 1.08rem/1.35 var(--display); color: var(--tinta); transform: rotate(-1.5deg); transform-origin: left center; margin-bottom: 20px; }
.eyebrow-heroe::before { width: 38px; height: 38px; border-radius: 12px; transform: rotate(-6deg); box-shadow: 0 4px 0 var(--acento-osc);
  background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.6 4.6 4 8 8.6 8.6-4.6.6-8 4-8.6 8.6C11.4 15.6 8 12.2 3.4 11.6 8 11 11.4 7.6 12 3z' fill='%23FFC83D'/%3E%3C/svg%3E") center / 22px no-repeat; }
.eyebrow-heroe.casa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3Ccircle cx='12' cy='14.5' r='2.2' fill='%23FFC83D' stroke='none'/%3E%3C/svg%3E"); }
.eyebrow-heroe span { background: linear-gradient(transparent 58%, rgba(255, 200, 61, .7) 58%, rgba(255, 200, 61, .7) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--tinta-2); }
.nota { font-size: .9rem; color: var(--suave); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── cabecera ───────────────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 30; background: rgba(255, 249, 241, .9); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 2px solid var(--linea); }
.cab .envoltura { display: flex; align-items: center; gap: 28px; height: 70px; }
.logo { display: flex; align-items: baseline; gap: 1px; text-decoration: none; color: var(--tinta); font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.logo span { color: var(--acento); font-weight: 700; font-size: .72em; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--tinta-2); text-decoration: none; font-size: .95rem; font-weight: 700; padding: 8px 13px; border-radius: 999px; }
.nav a:hover { background: var(--acento-suave); color: var(--acento); }
.nav a[aria-current] { color: var(--acento); background: var(--acento-suave); }
.cab .btn { margin-left: 8px; }
.menu-boton { display: none; margin-left: auto; background: #fff; border: 2px solid var(--linea-2); border-radius: 999px; padding: 8px 14px; font: 700 .9rem var(--sans); color: var(--tinta); cursor: pointer; }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; background: var(--blanco); border-bottom: 2px solid var(--linea); padding: 10px 16px 16px; box-shadow: var(--sombra); }
  .nav.abierto { display: flex; }
  .nav a { padding: 12px; font-size: 1.02rem; }
  .menu-boton { display: block; }
  .cab .btn-cab { display: none; }
}

/* ── botones: píldoras con relieve que se hunden al pulsar ──────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font: 800 .98rem/1 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .08s, box-shadow .08s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(3px); }
.btn-p { background: var(--acento); color: #fff; box-shadow: 0 5px 0 var(--acento-osc); }
.btn-p:hover { background: var(--acento-2); color: #fff; }
.btn-p:active { box-shadow: 0 2px 0 var(--acento-osc); }
.btn-s { background: #fff; color: var(--tinta); border-color: var(--linea-2); box-shadow: 0 5px 0 var(--linea-2); }
.btn-s:hover { border-color: var(--acento); color: var(--acento); }
.btn-s:active { box-shadow: 0 2px 0 var(--linea-2); }
.btn-wa { background: #fff; color: var(--tinta); border-color: #CDEEDD; box-shadow: 0 5px 0 #CDEEDD; }
.btn-wa:hover { border-color: var(--ok); color: var(--ok); }
.btn-sm { padding: 10px 16px; font-size: .9rem; }

/* ── héroe: rayos de sol que giran despacio y pegatinas en los bordes ───── */
.heroe { position: relative; overflow: hidden; padding-top: 60px; padding-bottom: 72px; background: var(--papel); }
.heroe::before { content: ''; position: absolute; width: 1500px; height: 1500px; right: -560px; top: -820px; border-radius: 50%;
  background: radial-gradient(circle, var(--sol) 0 72px, #FFE7A6 73px 118px, transparent 119px),
              repeating-conic-gradient(from 0deg, rgba(255, 210, 77, .22) 0deg 7deg, transparent 7deg 22.5deg);
  animation: rayos 150s linear infinite; pointer-events: none; }
@keyframes rayos { to { transform: rotate(360deg); } }
.heroe::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q75 0 150 22 T300 22 T450 22 T600 22 T750 22 T900 22 T1050 22 T1200 22 V44 H0Z' fill='%23E4F0FF'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.heroe > .envoltura { z-index: 1; }
.heroe-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.heroe .lead { margin-top: 18px; max-width: 56ch; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.datos li { flex: 1 1 130px; display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; min-width: 0; background: #fff; border: 2px solid var(--linea); border-radius: 18px; box-shadow: var(--relieve); }
.datos b { font: 800 1.02rem/1.2 var(--display); color: var(--acento); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.datos span { font-size: .84rem; color: var(--suave); font-style: italic; }
@media (max-width: 900px) { .heroe-grid { grid-template-columns: 1fr; gap: 36px; } .heroe { padding-top: 36px; padding-bottom: 60px; } .heroe::before { right: -900px; top: -1000px; opacity: .7; } }

.migas { font-size: .86rem; color: var(--suave); margin: 0 0 20px; }
.migas a { color: var(--suave); text-decoration: none; font-weight: 600; }
.migas a:hover { color: var(--acento); }
.migas span[aria-hidden] { margin: 0 7px; color: var(--tenue); }

/* ── tarjeta de contacto (formulario de lead) ───────────────────────────── */
.contacto { position: relative; background: var(--blanco); border: 2px solid var(--linea-2); border-radius: 26px; padding: 28px; box-shadow: var(--sombra); }
.contacto h2, .contacto .titulo { font: 800 1.35rem/1.25 var(--display); color: var(--tinta); margin: 0 0 4px; letter-spacing: -.01em; }
.contacto .sub { font-size: .9rem; color: var(--suave); margin: 0 0 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.campo label { font-size: .84rem; font-weight: 700; color: var(--tinta-2); }
.campo input, .campo select { width: 100%; padding: 12px 14px; border: 2px solid var(--linea-2); border-radius: var(--r-s); font: 400 1rem var(--sans); color: var(--tinta); background: var(--papel); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); background: #fff; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span { display: block; padding: 9px 14px; border: 2px solid var(--linea-2); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--tinta-2); cursor: pointer; background: #fff; }
.opcion input:checked + span { border-color: var(--acento); background: var(--acento); color: #fff; }
.opcion input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.contacto .btn { width: 100%; margin-top: 6px; }
.contacto .pie { font-size: .8rem; color: var(--tenue); margin: 14px 0 0; text-align: center; }
.contacto .hecho { padding: 18px; background: var(--ok-suave); color: var(--ok); border-radius: var(--r-s); font-weight: 600; }
.contacto .error { color: #9B2C2C; font-size: .88rem; margin: 8px 0 0; }

/* ── secciones: la blanca pasa a azul claro festoneada, como una banda ────────── */
.seccion { position: relative; padding-top: 76px; padding-bottom: 76px; }
.seccion-blanca { background: var(--lila); margin: 44px 0; }
.seccion-blanca::before, .seccion-blanca::after { content: ''; position: absolute; left: 0; right: 0; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q75 0 150 22 T300 22 T450 22 T600 22 T750 22 T900 22 T1050 22 T1200 22 V44 H0Z' fill='%23E4F0FF'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.seccion-blanca::before { top: -43px; }
.seccion-blanca::after { bottom: -43px; transform: scaleY(-1); }
.heroe + .seccion-blanca { margin-top: 0; }
.heroe + .seccion-blanca::before { display: none; }
.seccion .cabecera { max-width: 64ch; margin-bottom: 38px; }
.seccion .cabecera p { color: var(--suave); margin-top: 12px; }
.seccion .cabecera .eyebrow { color: var(--acento); margin-top: 0; }
@media (max-width: 700px) { .seccion { padding-top: 54px; padding-bottom: 54px; } }

/* Cuerpo de artículo: la mayor parte de las páginas. */
.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.articulo .cuerpo > section { margin-bottom: 48px; }
.articulo .cuerpo h2 { margin: 0 0 16px; }
.articulo .cuerpo h3 { margin: 26px 0 8px; }
.articulo .cuerpo ul, .articulo .cuerpo ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.articulo .cuerpo li { margin-bottom: 8px; }
.articulo .cuerpo li::marker { color: var(--acento); font-weight: 800; }
.lateral { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px) { .articulo { grid-template-columns: 1fr; gap: 20px; } .lateral { position: static; } }

.destacado { background: #fff; border: 2px solid var(--linea-2); border-left: 6px solid var(--naranja); padding: 18px 22px; border-radius: var(--r-s); margin: 0 0 1.2em; color: var(--tinta-2); box-shadow: var(--relieve); }
.destacado p:last-child { margin: 0; }

/* Tablas: comparativas y precios. */
.tabla-caja { overflow-x: auto; margin: 0 0 1.3em; border: 2px solid var(--linea); border-radius: var(--r-s); background: var(--blanco); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 800; color: var(--acento); background: var(--lila); font-size: .86rem; }
tr:last-child td { border-bottom: 0; }

/* ── tarjetas estilo «bento»: cada una con su color de etiqueta ─────────── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tarjeta { --t-color: var(--acento); position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r); padding: 24px; text-decoration: none; color: var(--texto); box-shadow: var(--relieve); transition: border-color .15s, transform .15s, box-shadow .15s; }
.rejilla > .tarjeta:nth-child(6n+2) { --t-color: var(--naranja-osc); }
.rejilla > .tarjeta:nth-child(6n+3) { --t-color: #0F9E8E; }
.rejilla > .tarjeta:nth-child(6n+4) { --t-color: #D6336C; }
.rejilla > .tarjeta:nth-child(6n+5) { --t-color: #2F7FD8; }
.rejilla > .tarjeta:nth-child(6n+6) { --t-color: #B8860B; }
a.tarjeta:hover { border-color: var(--t-color); transform: translateY(-3px); box-shadow: 0 8px 0 color-mix(in srgb, var(--t-color) 35%, #fff); color: var(--texto); }
.tarjeta .etiqueta { align-self: flex-start; font: 800 .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: #fff; background: var(--t-color); padding: 6px 10px; border-radius: 999px; }
.tarjeta h3 { font-size: 1.16rem; }
.tarjeta p { margin: 0; font-size: .93rem; color: var(--suave); }
.tarjeta .mas { margin-top: auto; padding-top: 8px; font-size: .9rem; font-weight: 800; color: var(--t-color); }

/* ── pasos (el proceso real, en orden) ──────────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: paso; padding: 0; margin: 0; list-style: none; }
.pasos li { counter-increment: paso; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r); padding: 24px; box-shadow: var(--relieve); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--acento); color: #fff; font: 800 1.2rem var(--display); margin-bottom: 14px; transform: rotate(-5deg); box-shadow: 0 4px 0 var(--acento-osc); }
.pasos li:nth-child(2)::before { background: var(--naranja); box-shadow: 0 4px 0 var(--naranja-osc); }
.pasos li:nth-child(3)::before { background: #0F9E8E; box-shadow: 0 4px 0 #0A6E63; }
.pasos li:nth-child(4)::before { background: #D6336C; box-shadow: 0 4px 0 #9E2150; }
.pasos b { display: block; color: var(--tinta); margin-bottom: 6px; font-size: 1.04rem; }
.pasos span { font-size: .93rem; color: var(--suave); }

/* ── precio ─────────────────────────────────────────────────────────────── */
.precio { background: var(--blanco); border: 2px solid var(--linea-2); border-radius: var(--r); padding: 24px; box-shadow: var(--relieve); }
.precio .titulo { font: 800 .76rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--acento); margin: 0 0 14px; }
.precio .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.precio .fila:last-of-type { border-bottom: 0; }
.precio .fila b { font: 800 1.55rem/1 var(--display); color: var(--acento); font-variant-numeric: tabular-nums; }
.precio .fila span { font-size: .86rem; color: var(--suave); }
.precio .incluye { font-size: .86rem; color: var(--suave); margin: 12px 0 0; }

/* ── autor (E-E-A-T: quién firma el contenido clínico) ──────────────────── */
.autor { display: flex; gap: 16px; align-items: center; background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r); padding: 18px; box-shadow: var(--relieve); }
.autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--sol); }
.autor b { display: block; color: var(--tinta); font-size: .98rem; }
.autor span { display: block; font-size: .84rem; color: var(--suave); line-height: 1.45; }
.revision { font-size: .84rem; color: var(--suave); margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

.autor-grande { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; }
.autor-grande img { border-radius: 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 10px 10px 0 var(--sol); }
@media (max-width: 800px) { .autor-grande { grid-template-columns: 1fr; } .autor-grande img { max-width: 260px; } }

/* ── preguntas frecuentes: fichas plegables ─────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 2px solid var(--linea); border-radius: var(--r-s); padding: 0 20px; }
.faq details[open] { border-color: var(--linea-2); box-shadow: var(--relieve); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 800; color: var(--tinta); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); font: 800 1.2rem/1 var(--sans); transform: translateY(-50%); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 0 18px; color: var(--texto); max-width: var(--lectura); }

/* ── llamada final: azul con rayos ───────────────────────────────────── */
.cierre { position: relative; overflow: hidden; background: var(--acento); color: #E4F0FF; padding: 72px 0; }
.cierre::before { content: ''; position: absolute; width: 1400px; height: 1400px; left: -700px; bottom: -760px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0deg 8deg, transparent 8deg 22.5deg); animation: rayos 170s linear infinite; pointer-events: none; }
.cierre .envoltura { z-index: 1; }
.cierre h2 { color: #fff; }
.cierre h2 em { color: var(--sol); }
.cierre p { color: #D6E2FF; max-width: 58ch; margin-top: 12px; }
.cierre .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cierre .btn-p { background: var(--sol); color: var(--tinta); box-shadow: 0 5px 0 #C99612; }
.cierre .btn-p:hover { background: #FFD45E; color: var(--tinta); }
.cierre .btn-s, .cierre .btn-wa { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.cierre .btn-s:hover, .cierre .btn-wa:hover { border-color: #fff; color: #fff; }

/* ── pie ────────────────────────────────────────────────────────────────── */
.pie-sitio { background: var(--tinta); padding: 56px 0 32px; font-size: .92rem; color: #B2BACC; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pie-sitio h3 { font: 800 .76rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--sol); margin: 0 0 14px; }
.pie-sitio ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pie-sitio a { color: #D2D9EA; text-decoration: none; }
.pie-sitio a:hover { color: #fff; }
.pie-sitio .logo { color: #fff; }
.pie-sitio .logo span { color: var(--sol); }
.pie-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .84rem; }
@media (max-width: 800px) { .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pie-rejilla > * { min-width: 0; }
@media (max-width: 800px) { .pie-rejilla > :first-child { grid-column: 1 / -1; } }
.pie-sitio .logo { white-space: normal; }
.pie-sitio a, .pie-sitio p { overflow-wrap: anywhere; }

/* ── WhatsApp flotante ──────────────────────────────────────────────────── */
.wa-flota { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--tinta); border: 2px solid #CDEEDD; border-radius: 999px; padding: 11px 16px 11px 13px; font: 800 .9rem var(--sans); text-decoration: none; box-shadow: 0 5px 0 #CDEEDD, var(--sombra); }
.wa-flota:hover { border-color: var(--ok); color: var(--ok); }
.wa-flota svg { width: 20px; height: 20px; color: #1FA855; }
@media (max-width: 600px) { .wa-flota { right: 14px; bottom: 14px; padding: 10px 14px 10px 11px; font-size: .86rem; } }

/* ── reseñas de Google ──────────────────────────────────────────────────── */
.resenas-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.resenas-nota { font: 800 3rem/1 var(--display); color: var(--acento); }
.resenas-estrellas { color: var(--sol); font-size: 1.3rem; letter-spacing: 3px; -webkit-text-stroke: .5px #E0A800; }
.resenas-cab a { font-weight: 800; font-size: .92rem; }
.resenas-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.resena { margin: 0; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 2px solid var(--linea); border-radius: var(--r); padding: 22px; box-shadow: var(--relieve); }
.resena-estrellas { color: var(--sol); letter-spacing: 2px; -webkit-text-stroke: .4px #E0A800; }
.resena blockquote { margin: 0; color: var(--texto); font-size: .96rem; line-height: 1.55; }
.resena blockquote::before { content: '“'; font: 800 2.2rem/0 var(--display); color: var(--acento); vertical-align: -.45em; margin-right: 2px; }
.resena figcaption { margin-top: auto; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; font-weight: 800; color: var(--tinta); font-size: .92rem; }
.resena figcaption small { grid-column: 2; font-weight: 600; color: var(--tenue); font-size: .78rem; }
.resena-inicial { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; }
@media (max-width: 900px) { .resenas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .resenas-rejilla { grid-template-columns: 1fr; } .resena:nth-child(n+4) { display: none; } }

/* Variantes de .articulo como CLASES (antes iban en style="" y el estilo en
   línea ganaba a la media query: en móvil seguían en dos columnas y la
   tarjeta de precio se montaba encima de las preguntas). */
.articulo.mitades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.articulo.con-precio { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 980px) { .articulo.mitades, .articulo.con-precio { grid-template-columns: 1fr; gap: 24px; } }
.acciones-seccion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── móvil: centrado, como en las apps de referencia ─────────────────────── */
@media (max-width: 700px) {
  .heroe { padding-bottom: 50px; }
  .heroe-grid > div:first-child, .heroe .lectura { text-align: center; }
  .heroe .lectura h1, .heroe .lectura .lead { margin-left: auto; margin-right: auto; }
  .heroe .lead { margin-left: auto; margin-right: auto; }
  .heroe-acciones { flex-direction: column; align-items: center; }
  .heroe-acciones .btn { width: min(320px, 100%); }
  .datos li { align-items: center; text-align: center; }
  .migas { text-align: center; }
  .seccion .cabecera { text-align: center; margin-left: auto; margin-right: auto; }
  .acciones-seccion { justify-content: center; }
  .autor-grande { justify-items: center; text-align: center; gap: 26px; }
  .autor-grande img { margin: 0 auto; box-shadow: 8px 8px 0 var(--sol); }
  .autor-grande p:not(.lead):not(.eyebrow) { text-align: left; }
  .articulo.mitades > div:first-child { text-align: center; }
  .articulo.con-precio > div > h2 { display: block; text-align: center; }
  .articulo.con-precio > div > .eyebrow, .seccion .cabecera .eyebrow, .articulo.mitades .eyebrow, .autor-grande .eyebrow { display: flex; justify-content: center; }
  .eyebrow-heroe { transform: rotate(-1.5deg); transform-origin: center; justify-content: center; font-size: 1rem; }
  .resenas-cab { justify-content: center; }
  .cierre .envoltura { text-align: center; }
  .cierre p { margin-left: auto; margin-right: auto; }
  .cierre .acciones { justify-content: center; }
}

/* «También evaluamos»: enlaces en fila, con subrayado de marcador al pasar. */
.tambien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 26px 0 0; font-size: .95rem; color: var(--suave); }
.tambien b { color: var(--tinta); }
.tambien a { font-weight: 700; text-decoration: none; background: linear-gradient(transparent 62%, rgba(255, 200, 61, .55) 62%) no-repeat; background-size: 0 100%; transition: background-size .2s; }
.tambien a:hover { background-size: 100% 100%; }
.tambien a::after { content: ' →'; color: var(--naranja); }
@media (max-width: 700px) { .tambien { justify-content: center; text-align: center; } .tambien b { flex-basis: 100%; } }

/* ── Informe preliminar gratuito (formulario compartido con neuroes.co) ──
   El formulario trae sus estilos en /informe-preliminar/ip.css; aquí solo se
   le pasa la identidad «Chispa» (azul cobalto desde el 23-sep). `.seccion .ip` gana a las variables por
   defecto de ip.css aunque esa hoja se cargue después. */
.seccion-informe { background: radial-gradient(900px 380px at 12% 0%, rgba(255, 200, 61, .16), transparent 70%), radial-gradient(800px 360px at 95% 100%, rgba(43, 94, 240, .10), transparent 70%), var(--papel); }
.seccion .ip {
  --ip-acento: var(--acento); --ip-acento-2: #4D77FF; --ip-acento-suave: var(--acento-suave);
  --ip-tinta: var(--tinta); --ip-texto: var(--texto); --ip-suave: var(--suave);
  --ip-borde: var(--linea); --ip-fondo: var(--papel); --ip-papel: var(--blanco);
  --ip-fuente: var(--sans); --ip-titulos: var(--display);
}
.seccion .ip .ip-titulo, .seccion .ip .ip-pregunta { font-weight: 700; letter-spacing: -.01em; }