/* =====================================================================
   MEP Online — Escaparate público (capa de captación / SEO)
   Tokens y componentes trasladados del sistema de diseño de Claude Design
   a CSS propio. Mobile-first. NO carga styles.css: es autónomo para que
   las páginas públicas tengan su propia identidad sin chocar con las de
   autenticación.
   ===================================================================== */
:root {
  /* Verde eucalipto (marca) */
  --green-50:#f1f5f2; --green-100:#dfe8e2; --green-200:#c2d2c7; --green-300:#9db6a5;
  --green-400:#769583; --green-500:#5a7a68; --green-600:#486355; --green-700:#3a5044;
  --green-800:#2e3f36; --green-900:#25332c;
  /* Terracota (acento) */
  --clay-100:#f5e1d5; --clay-200:#eac3ae; --clay-300:#dba083; --clay-400:#cc8261;
  --clay-500:#be6e4e; --clay-600:#a65a3d; --clay-700:#874733;
  /* Agua */
  --water-100:#d6e6e8; --water-400:#6e9ba6; --water-500:#557f8a;
  /* Arena (fondos) */
  --sand-50:#fbf8f3; --sand-100:#f5efe6; --sand-200:#ebe2d4; --sand-300:#d9ccb8; --sand-400:#b9a88e;
  /* Tinta (texto y líneas) */
  --ink-200:#cdd2ce; --ink-300:#aeb5af; --ink-400:#8a938c; --ink-500:#66706a;
  --ink-700:#333a35; --ink-900:#1d221f;

  --primary:var(--green-600); --primary-hover:var(--green-700); --primary-subtle:var(--green-100);
  --accent:var(--clay-500);
  --surface-page:var(--sand-50); --surface-card:#fff; --surface-sunken:var(--sand-100);
  --surface-accent:#fbf3ee; --surface-green:var(--green-800);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --border-subtle:var(--sand-200); --border-default:var(--ink-200);

  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-hand:'Caveat', cursive;

  --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
  --shadow-xs:0 1px 2px rgba(20,40,30,.05);
  --shadow-sm:0 2px 8px rgba(20,40,30,.07);
  --shadow-md:0 8px 24px rgba(20,40,30,.10);
  --shadow-lg:0 22px 48px rgba(20,40,30,.16);
  --maxw:1180px;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* --- Tipografía de marca --------------------------------------------- */
.eyebrow {
  font-weight: 600; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.hand { font-family: var(--font-hand); font-weight: 600; line-height: 1.2; color: var(--accent); }
.display {
  font-family: var(--font-display); font-weight: 500; line-height: 1.15;
  letter-spacing: -.01em; color: var(--text-strong); margin: 0;
}
h1.display { font-size: clamp(2.1rem, 6vw, 3rem); }
h2.display { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h3.display { font-size: clamp(1.3rem, 3.5vw, 1.6rem); }

/* --- Contenedor / secciones ------------------------------------------ */
.section { padding: 38px 20px; }
.section > .inner { max-width: var(--maxw); margin: 0 auto; }
.section--sunken { background: var(--surface-sunken); }
.section--accent { background: var(--surface-accent); }
.section--green { background: var(--surface-green); color: var(--sand-100); }
.section-head { max-width: 640px; margin: 0 auto 26px; }
.section-head.center { text-align: center; }
@media (min-width: 860px) { .section { padding: 56px 40px; } }

/* --- Botones (pill) -------------------------------------------------- */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  padding: 13px 24px; border-radius: 999px; border: none; cursor: pointer;
  white-space: nowrap; text-align: center; transition: transform .15s ease, filter .15s ease;
}
.pbtn:hover { transform: translateY(-1px); filter: brightness(.96); }
.pbtn.lg { padding: 16px 28px; font-size: 1rem; }
.pbtn.sm { padding: 9px 17px; font-size: .85rem; }
.pbtn.full { width: 100%; }
.pbtn.primary { background: var(--primary); color: var(--sand-50); }
.pbtn.primary:hover { color: var(--sand-50); }
.pbtn.light { background: rgba(255,255,255,.96); color: var(--green-800); }
.pbtn.light:hover { color: var(--green-800); }
.pbtn.secondary { background: var(--surface-card); color: var(--text-strong); box-shadow: inset 0 0 0 1.5px var(--border-default); }
.pbtn.ghost-light { background: transparent; color: var(--sand-50); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.pbtn.ghost-light:hover { color: var(--sand-50); }
.pbtn[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.ic { flex: none; vertical-align: middle; }

/* --- Cabecera pública (sticky) --------------------------------------- */
.pub-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,248,243,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.pub-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: var(--maxw); margin: 0 auto; padding: 10px 18px;
}
.pub-header .logo img { height: 40px; width: auto; }
.pub-nav { display: none; align-items: center; gap: 24px; }
.pub-nav a.navlink { color: var(--text-body); font-weight: 600; font-size: .92rem; }
.pub-nav a.navlink:hover { color: var(--text-strong); }
.pub-cta-mobile { display: flex; align-items: center; gap: 6px; }

/* Menú móvil sin JS (etiqueta <details>) */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex;
  padding: 6px; color: var(--text-strong); border-radius: 8px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--sand-200); }
/* El icono cambia a una X cuando el menú está abierto (más fácil de cerrar). */
.menu > summary .i-close { display: none; }
.menu[open] > summary .i-open { display: none; }
.menu[open] > summary .i-close { display: inline-flex; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 8px;
  display: flex; flex-direction: column;
}
.menu-panel a {
  padding: 11px 14px; border-radius: 10px; color: var(--text-body);
  font-weight: 600; font-size: .95rem;
}
.menu-panel a:hover { background: var(--sand-100); color: var(--text-strong); }
@media (min-width: 860px) {
  .pub-nav { display: flex; }
  .pub-cta-mobile { display: none; }
  .pub-header .bar { padding: 14px 40px; }
}

/* --- Pie público ----------------------------------------------------- */
.pub-footer { background: var(--surface-green); color: var(--sand-100); padding: 38px 20px 30px; }
.pub-footer .inner { max-width: var(--maxw); margin: 0 auto; }
.pub-footer .logo img { height: 42px; width: auto; filter: brightness(0) invert(1); }
.pub-footer .foot-hand { font-family: var(--font-hand); font-size: 1.5rem; color: var(--clay-200); margin: 16px 0 8px; }
.pub-footer .foot-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0; font-size: .92rem; }
.pub-footer .foot-links a { color: var(--sand-200); }
.pub-footer .foot-links a:hover { color: #fff; }
.pub-footer .foot-legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; font-size: .8rem; color: var(--sand-300); }

/* --- HERO ------------------------------------------------------------ */
.hero { position: relative; background: var(--green-800); color: var(--sand-50); overflow: hidden; }
.hero .inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 32px 22px 38px; }
.hero .eyebrow { color: var(--clay-200); }
.hero h1 { color: var(--sand-50); margin: 14px 0 0; }
.hero p.sub { color: var(--sand-200); font-size: 1.05rem; line-height: 1.6; max-width: 520px; margin: 16px 0 0; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-figure { margin-top: 26px; position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-figure img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.hero-figure .fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,40,30,.55)); }
.hero-figure .hand { position: absolute; left: 20px; right: 20px; bottom: 16px; color: var(--sand-50); font-size: 1.7rem; }
@media (min-width: 860px) {
  .hero .inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 66px 40px 74px; }
  .hero-figure { margin-top: 0; }
  .hero-figure img { aspect-ratio: 4/3; }
  .hero p.sub { font-size: 1.12rem; }
}

/* --- ValueRows (lo que recibes) -------------------------------------- */
.values { display: grid; grid-template-columns: 1fr; gap: 18px; }
.value { display: flex; gap: 14px; align-items: flex-start; }
.value .vico {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  background: var(--primary-subtle); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.value h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--text-strong); margin: 0 0 4px; }
.value p { margin: 0; font-size: .9rem; color: var(--text-muted); }
@media (min-width: 860px) { .values { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* --- Tarjetas de área (home) ----------------------------------------- */
.areas { display: grid; grid-template-columns: 1fr; gap: 16px; }
.area-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  color: var(--text-body);
}
.area-card:hover { color: var(--text-body); box-shadow: var(--shadow-md); transform: translateY(-2px); transition: .18s ease; }
.area-card .cover { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.area-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-card .cover .fade { position: absolute; inset: 0; }
.area-card .cover .title {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: #fff; line-height: 1.15;
}
.area-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.area-card .body p { margin: 0; font-size: .9rem; color: var(--text-muted); }
.area-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.area-card .price strong { font-size: 1.25rem; color: var(--text-strong); }
.area-card .price .per { color: var(--text-muted); font-size: .8rem; }
.area-card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; }
@media (min-width: 860px) { .areas { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* --- Chips de categoría ---------------------------------------------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; font-weight: 600; font-size: .9rem;
  background: var(--t-soft, var(--sand-100)); color: var(--t-ink, var(--text-body));
}
.cat-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--t-solid, var(--primary)); flex: none; }
.cat-chip:hover { color: var(--t-ink, var(--text-strong)); filter: brightness(.97); }

/* --- Tarjetas de clase (rejilla, con candado) ------------------------ */
.class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.class-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--text-body);
}
.class-card:hover { color: var(--text-body); box-shadow: var(--shadow-md); }
.class-card .thumb { position: relative; aspect-ratio: 16/11; background: var(--sand-200); overflow: hidden; }
.class-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.class-card .thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--sand-400); }
.class-card .lock {
  position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(29,34,31,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.class-card .chip { position: absolute; left: 9px; top: 9px; }
.class-card .meta { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.class-card .meta .t { font-weight: 700; font-size: .92rem; color: var(--text-strong); line-height: 1.25; }
.duration { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .78rem; color: var(--text-muted); margin-top: auto; }
@media (min-width: 640px) { .class-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .class-grid.four { grid-template-columns: repeat(4, 1fr); } }

.with-lock { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); }

/* --- Biblioteca (índice de categorías) ------------------------------- */
.cat-index { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cat-index-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--t-solid, var(--primary)); color: var(--text-body);
}
.cat-index-card:hover { color: var(--text-body); box-shadow: var(--shadow-md); transform: translateY(-2px); transition: .18s ease; }
.cat-index-card .cover { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.cat-index-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-index-card .body { padding: 16px 18px 18px; }
.cat-index-card .body h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-strong); margin: 0 0 6px; }
.cat-index-card .body p { margin: 0 0 8px; font-size: .9rem; color: var(--text-muted); }
.cat-index-card .count { font-size: .82rem; font-weight: 600; color: var(--t-ink, var(--primary)); }
@media (min-width: 700px) { .cat-index { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1000px) { .cat-index { grid-template-columns: repeat(3, 1fr); } }

/* --- Migas y cabecera de categoría ----------------------------------- */
.crumb { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; }
.cat-head { padding: 26px 20px 28px; background: var(--t-soft, var(--sand-100)); }
.cat-head .inner { max-width: var(--maxw); margin: 0 auto; }
.cat-head .crumb { color: var(--t-ink, var(--text-body)); margin-bottom: 14px; }
.cat-head .eyebrow { color: var(--t-ink, var(--accent)); }
.cat-head h1 { color: var(--t-ink, var(--text-strong)); max-width: 760px; }
.cat-head .blurb { color: var(--t-ink, var(--text-body)); opacity: .9; font-size: 1.05rem; max-width: 680px; margin: 14px 0 0; }
@media (min-width: 860px) { .cat-head { padding: 44px 40px; } }

/* --- Layout de categoría (listado + barra lateral) ------------------- */
.cat-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.list-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text-strong); margin: 0; }
.seo-text { color: var(--text-body); line-height: 1.7; margin: 0 0 26px; }
.seo-text p { margin: 0 0 14px; }
.side-cta { background: var(--surface-card); border: 1.5px solid var(--t-mid, var(--border-default)); border-radius: var(--radius-xl); padding: 22px; }
.side-cta .hand { color: var(--t-solid, var(--accent)); font-size: 1.5rem; }
.side-cta p { font-size: .9rem; color: var(--text-muted); line-height: 1.55; margin: 8px 0 16px; }
.side-more { margin-top: 18px; font-size: .85rem; line-height: 1.9; }
.side-more strong { color: var(--text-body); display: block; margin-bottom: 4px; }
.side-more a { display: block; }
@media (min-width: 900px) { .cat-layout { grid-template-columns: 1fr 300px; gap: 40px; } }

/* --- Ficha de clase (sin reproductor) -------------------------------- */
.clase-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.poster { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--sand-200); }
.poster img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.poster .ph { width: 100%; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; color: var(--sand-400); }
.poster .veil {
  position: absolute; inset: 0; background: rgba(20,34,28,.42);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px;
}
.poster .veil .ring {
  width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px); border: 1.5px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.poster .veil .cap { font-weight: 700; font-size: .85rem; color: #fff; }
.clase-meta-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.clase-meta-row .area-tag { font-size: .85rem; color: var(--text-muted); }
.clase-desc { font-size: 1rem; color: var(--text-body); line-height: 1.7; }
.clase-desc p { margin: 0 0 14px; }
.clase-cta { background: var(--green-800); color: var(--sand-50); border-radius: var(--radius-xl); padding: 22px; margin-top: 20px; }
.clase-cta .hand { color: var(--clay-200); font-size: 1.5rem; }
.clase-cta p { font-size: .9rem; color: var(--sand-200); line-height: 1.55; margin: 8px 0 16px; }
.clase-cta p strong { color: #fff; }
.video-note { font-size: .78rem; color: var(--text-faint); text-align: center; margin-top: 14px; }
@media (min-width: 900px) { .clase-layout { grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; } }

/* --- Qué es una ruta: pasos y ejemplo -------------------------------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
.step { background: var(--surface-card); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-sm); }
.step .sico { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step .st { font-weight: 700; font-size: 1rem; color: var(--text-strong); margin-bottom: 6px; }
.step p { margin: 0; font-size: .88rem; color: var(--text-muted); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.route-example { max-width: 560px; margin: 0 auto; background: var(--surface-card); border-radius: var(--radius-xl); padding: 20px 18px; box-shadow: var(--shadow-sm); }
.route-intro { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.route-intro img { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex: none; }
.route-intro .hand { color: var(--clay-500); font-size: 1.25rem; }
.route-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.route-step:first-of-type { border-top: none; }
.route-step .n { width: 26px; height: 26px; border-radius: 999px; background: var(--primary-subtle); color: var(--primary); flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.route-step .rt { flex: 1; font-weight: 600; font-size: .88rem; color: var(--text-strong); }
.route-more { text-align: center; padding-top: 12px; font-size: .82rem; color: var(--text-muted); }

/* --- Planes (3 suscripciones) ---------------------------------------- */
.plans { display: grid; grid-template-columns: 1fr; gap: 18px; }
.plan {
  background: var(--surface-card); border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.plan.featured { border: 2px solid var(--t-solid, var(--primary)); box-shadow: var(--shadow-lg); }
.plan .cover { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.plan .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan .cover .fade { position: absolute; inset: 0; }
.plan .cover .title { position: absolute; left: 18px; bottom: 14px; right: 18px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.plan .ribbon {
  position: absolute; top: 12px; right: 12px; background: var(--clay-500); color: #fff;
  font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.plan .body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan .body > p.desc { margin: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.55; }
.plan .price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .price-line .now { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; color: var(--text-strong); }
.plan .price-line .per { color: var(--text-muted); font-size: .9rem; }
.plan .price-line .was { color: var(--text-faint); text-decoration: line-through; font-size: .95rem; }
.fomo {
  background: var(--surface-accent); border: 1px solid var(--clay-200); border-radius: var(--radius-md);
  padding: 11px 13px; font-size: .82rem; color: var(--clay-700); line-height: 1.45;
}
.fomo strong { color: var(--clay-700); }
.plan .includes { display: flex; flex-direction: column; gap: 9px; }
.plan .includes .li { display: flex; gap: 9px; align-items: flex-start; font-size: .86rem; color: var(--text-body); }
.plan .includes .li .ic { color: var(--t-solid, var(--primary)); margin-top: 1px; }
.plan .trial { font-size: .82rem; color: var(--accent); font-weight: 600; }
.plan form, .plan .body > .pbtn { margin-top: auto; }
.no-perma { text-align: center; font-size: .85rem; color: var(--text-muted); margin-top: 24px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* --- Píldoras (voces anónimas, NO testimonios atribuidos) ------------ */
.pildoras { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pildora {
  background: var(--surface-card); border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-xs); border-left: 3px solid var(--clay-300);
  font-family: var(--font-display); font-size: 1.2rem; color: var(--text-strong); line-height: 1.4;
}
@media (min-width: 760px) { .pildoras { grid-template-columns: repeat(3, 1fr); } }

/* --- Voz de Fabiola (bloque de filosofía) ---------------------------- */
.voz { max-width: 720px; margin: 0 auto; text-align: center; }
.voz .hand { font-size: 1.9rem; color: var(--text-strong); display: block; line-height: 1.3; }
.voz .firma { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; }
.voz .firma img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.voz .firma span { font-weight: 600; font-size: .9rem; color: var(--text-body); }

/* --- CTA final (banda verde) ----------------------------------------- */
.final-cta { background: var(--green-800); color: var(--sand-50); text-align: center; padding: 44px 22px; }
.final-cta h2 { color: var(--sand-50); margin: 0 auto; max-width: 720px; }
.final-cta .pbtn { margin-top: 22px; }

/* --- Banner empático de pago (suscriptora con sesión en público) ----- */
.pay-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fbeedd; border: 1px solid #e9cfa8; border-radius: var(--radius-md);
  padding: 14px 18px; max-width: var(--maxw); margin: 16px auto 0;
}
.pay-banner-text strong { color: var(--text-strong); display: block; }
.pay-banner-text span { color: var(--text-body); font-size: .9rem; }
.pay-banner .pbtn { background: var(--clay-500); color: #fff; }
.pay-banner form { margin: 0; }
@media (max-width: 560px) { .pay-banner { flex-direction: column; align-items: stretch; } }

/* --- 404 -------------------------------------------------------------- */
.notfound { text-align: center; max-width: 520px; margin: 0 auto; padding: 60px 22px; }
.notfound h1 { margin-bottom: 10px; }
.notfound p { color: var(--text-muted); margin: 0 0 24px; }

/* --- Utilidades ------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--text-muted); }
.mt-s { margin-top: 8px; }
.tone-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--t-solid, var(--primary)); display: inline-block; }

/* Tonos por categoría/área (del sistema de diseño) */
.tone-green    { --t-soft:#e3ece5; --t-mid:#c2d2c7; --t-ink:#3a5044; --t-solid:#486355; }
.tone-clay     { --t-soft:#f3e2d6; --t-mid:#eac3ae; --t-ink:#874733; --t-solid:#a65a3d; }
.tone-water    { --t-soft:#dcebed; --t-mid:#b0cdd2; --t-ink:#3f6770; --t-solid:#557f8a; }
.tone-rose     { --t-soft:#f2e1e1; --t-mid:#e3c4c4; --t-ink:#945c5c; --t-solid:#ad6f6f; }
.tone-lavender { --t-soft:#e8e4f0; --t-mid:#cdc6e0; --t-ink:#5f5680; --t-solid:#7a6fa0; }
.tone-sand     { --t-soft:#efe7da; --t-mid:#d9ccb8; --t-ink:#7a6a4f; --t-solid:#94836a; }