/* ============================================================
   ESTILO NUEVO · englishclasses.es · diseño unificado 2026
   Paleta general: naranja (español) → azul (inglés)
   Frasly: morado original de marca (html[data-marca="frasly"])
   ============================================================ */
:root{
  --bg:#FAF7F2; --bg2:#FFFFFF; --ink:#141B2E; --ink2:#4A5266;
  --es:#E4572E; --en:#1D5DEC; --ok:#118A5F;
  --card:#FFFFFF; --line:#E8E1D6; --soft:#F2EDE4;
  --shadow:0 10px 30px rgba(20,27,46,.08);
  --r:18px;
}
html[data-tema="oscuro"]{
  --bg:#0E1320; --bg2:#141B2E; --ink:#F2F1EC; --ink2:#A8AEC0;
  --card:#182036; --line:#26304A; --soft:#1C2439;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
/* ---- FRASLY: colores corporativos del logo ----
   Azul #3B82F6 · Ámbar #F2A93B · Tinta .es #574F74
   El fondo (--bg) NO se distingue de las demás páginas, a propósito:
   Ramón lo pidió así el 25-ago-2026 (todas las pestañas con el mismo). */
html[data-marca="frasly"]{
  --ink:#2E2947; --ink2:#574F74;
  --es:#F2A93B; --en:#3B82F6; --ok:#118A5F;
  --card:#FFFFFF; --line:#E6E2ED; --soft:#EFEBF6;
  --shadow:0 10px 30px rgba(87,79,116,.12);
}
html[data-marca="frasly"][data-tema="oscuro"]{
  --ink:#F3F1F9; --ink2:#A9A3BA;
  --card:#211D30; --line:#37324B; --soft:#2A2539;
  --es:#F6BC5E; --en:#7AA8F8;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
html[data-marca="frasly"] .btn-es{color:#2E2947}
html[data-marca="frasly"] .tag{color:#D98A0B}
/* Logotipo Frasly */
.marca-logo{line-height:1;user-select:none}
.marca-logo .f-azul{color:#3B82F6}
.marca-logo .f-ambar{color:#F2A93B}
html[data-tema="oscuro"] .marca-logo .f-azul{color:#7AA8F8}
html[data-tema="oscuro"] .marca-logo .f-ambar{color:#F6BC5E}
.marca-logo .f-azul,.marca-logo .f-ambar{font-family:'Inter',sans-serif;font-weight:800;font-size:4rem;letter-spacing:-.03em}
.marca-logo .f-es{font-family:'Inter',sans-serif;font-weight:800;font-size:1.5rem;color:var(--ink2);margin-left:.15rem}
.marca-logo .f-lema{font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);margin-top:.7rem}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}
a{color:inherit}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem);margin-bottom:.5rem}
.sub{color:var(--ink2);font-size:1.06rem;max-width:640px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
section{padding:72px 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;padding:.9rem 1.6rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-es{background:var(--es);color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--es) 40%,transparent)}
.btn-en{background:var(--en);color:#fff;box-shadow:0 6px 20px color-mix(in srgb,var(--en) 35%,transparent)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.tag{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--es);margin-bottom:.8rem}
/* NAV */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.logo b{color:var(--es)}
.menu{display:flex;gap:1.2rem;align-items:center;list-style:none}
.menu a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink2);white-space:nowrap}
.menu a:hover{color:var(--ink)}
.menu .actual{color:var(--es);font-weight:700}
.menu .zona{background:var(--ink);color:var(--bg);padding:.5rem 1.1rem;border-radius:999px;font-weight:700}
html[data-tema="oscuro"] .menu .zona{background:var(--card);color:var(--ink)}
#luna{background:none;border:0;font-size:1.2rem;cursor:pointer}
/* Desplegables del menú (Dudas de inglés / El negocio del inglés): el
   <details>/<summary> de más abajo está pensado para acordeones tipo FAQ
   (fondo, borde, sombra propios) y desentonaba metido en la barra de
   navegación, apretando el buscador de al lado hasta dejarlo sin sitio. */
/* 25-ago-2026: antes usaba <details>/<summary>, y el <summary> SOLO puede
   desplegar (es lo único que hace nativamente), nunca navegar a la vez.
   Mismo patrón que ya usan los 377 artículos del blog: la etiqueta es un
   enlace real, y un botón aparte, más pequeño, abre el panel. */
.menu-desp{position:relative;display:inline-flex;align-items:center;gap:.2rem}
.menu-desp>a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink2);white-space:nowrap}
.menu-desp>a:hover{color:var(--ink)}
.menu-desp>a.actual{color:var(--es);font-weight:700}
.menu-desp .desp-boton{background:none;border:0;padding:0;margin:0;font-size:.75rem;color:var(--ink2);cursor:pointer;line-height:1;display:inline-flex;transition:transform .15s}
.menu-desp .desp-boton[aria-expanded="true"]{transform:rotate(180deg)}
.menu-desp .desp-panel{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;display:flex;flex-direction:column;gap:.1rem;min-width:250px;z-index:60}
.menu-desp .desp-panel[hidden]{display:none}
.menu-desp .desp-panel a{display:block;padding:.55rem .8rem;border-radius:8px;font-size:.86rem;font-weight:500;color:var(--ink2);text-decoration:none;white-space:normal;line-height:1.3}
.menu-desp .desp-panel a:hover{background:var(--soft);color:var(--ink)}
@media (max-width:1300px){
  .menu-desp{position:static;width:100%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:.2rem 0}
  .menu-desp>a{padding:.7rem 0}
  .menu-desp .desp-boton{width:32px;height:32px;justify-content:center;border:1px solid var(--line);border-radius:50%}
  .menu-desp .desp-panel{position:static;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0 0 .6rem 1rem;width:100%}
}
.burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
/* BUSCADOR (solo index, frasly y dudas) */
.busca{flex:1;min-width:170px;max-width:280px}
.busca input{width:100%;padding:.55rem 1rem;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.88rem;outline:none}
.busca input:focus{border-color:var(--es)}
/* HERO */
.hero{padding:64px 0 80px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.hero h1 .sube{color:var(--es)}
.hero h1 .baja{color:var(--en)}
.hero p{margin:1.2rem 0 1.8rem}
.confianza{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2rem;font-size:.9rem;color:var(--ink2)}
.confianza b{color:var(--ink);display:block;font-size:1.05rem}
.marca{font-family:'Fraunces',serif;font-size:1.05rem}
.marca b{background:linear-gradient(90deg,var(--es),var(--en));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:3.2rem;font-weight:700;letter-spacing:-.02em;display:inline-block;line-height:1}
/* Tarjeta demo */
.demo{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:2rem;user-select:none;position:relative}
.demo::before{content:attr(data-cinta);position:absolute;top:-12px;left:24px;background:var(--ok);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;padding:.3rem .8rem;border-radius:999px}
.demo .paso{font-size:.8rem;color:var(--ink2);font-weight:600;margin-bottom:1rem}
.demo .lbl{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.demo .lbl.es{color:var(--es)} .demo .lbl.en{color:var(--en)}
.demo .frase{font-family:'Fraunces',serif;font-size:1.5rem;margin:.3rem 0 1.2rem;min-height:2.2em}
.demo .en-linea{border-top:2px dashed var(--line);padding-top:1rem;min-height:4.6em}
.demo .botones{display:flex;gap:.7rem;flex-wrap:wrap}
.demo .honesto{font-size:.82rem;color:var(--ink2);margin-top:.9rem}
.demo .fin{display:none;text-align:center;padding:.6rem 0}
.demo .fin p{font-size:1.05rem;margin-bottom:1rem}
/* Pestañas de la tarjeta de muestra (25-ago-2026): varios modos compartiendo
   la misma cinta y el mismo hueco, para enseñar más de uno sin alargar la
   página. */
.demo-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.demo-tab{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.82rem;font-weight:700;color:var(--ink2);cursor:pointer;font-family:inherit}
.demo-tab.on{background:var(--es);color:#2E2947;border-color:var(--es)}
.demo-modo[hidden]{display:none}
.demo .gm-pool,.demo .gm-resp{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.6em}
.demo .gm-resp{border-top:2px dashed var(--line);padding-top:1rem;margin-top:1rem}
.demo .gm-pal{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:.5rem .9rem;font-size:1.05rem;font-family:'Fraunces',serif;cursor:pointer;color:var(--ink)}
.demo .gm-pal:hover{border-color:var(--es)}
.demo .gm-input{width:100%;padding:.8rem 1rem;border-radius:10px;border:2px solid var(--line);font:inherit;font-size:1.05rem;background:var(--bg2);color:var(--ink);box-sizing:border-box}
.demo .gm-input:focus{border-color:var(--es);outline:none}
.flecha-svg{width:100%;max-width:200px;margin:.4rem auto;display:block}
/* STATS BAND */
.banda{background:var(--ink);color:#F2F1EC;padding:44px 0}
html[data-tema="oscuro"] .banda{background:#060a14}
html[data-marca="frasly"] .banda{background:#574F74}
.banda .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center}
.banda b{font-family:'Fraunces',serif;font-size:1.9rem;display:block}
.banda span{font-size:.85rem;opacity:.75}
/* Aparición suave al hacer scroll: cada bloque "reveal" se desliza a su
   sitio la primera vez que entra en pantalla (JS al final del body). El
   contenido nunca depende de JS para verse: opacity siempre es 1, solo
   se anima el transform, y solo si <html> lleva la clase "js-anim". */
.reveal{opacity:1}
.js-anim .reveal{transform:translateY(18px);transition:transform .7s ease}
.js-anim .reveal.is-visible{transform:none}
@media(prefers-reduced-motion:reduce){.js-anim .reveal{transform:none;transition:none}}
/* GRIDS Y TARJETAS */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
.paso-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow)}
.paso-c .num{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:1rem}
.paso-c h3{font-size:1.2rem;margin-bottom:.4rem}
.paso-c p{color:var(--ink2);font-size:.95rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.5rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.card h3{font-size:1.05rem}
.card p{color:var(--ink2);font-size:.92rem;flex:1}
.card .btn{justify-content:center;font-size:.92rem;padding:.7rem 1.2rem}
/* PROFESOR / FOTOS */
.prof{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.foto-marco{position:relative}
.foto-marco img{border-radius:24px;position:relative;z-index:1}
.foto-marco.suelo{background:radial-gradient(ellipse at 50% 88%,color-mix(in srgb,var(--es) 22%,transparent),transparent 65%),var(--soft);border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);padding:1.4rem 1.4rem 0}
.sello{position:absolute;z-index:2;bottom:-14px;left:-14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;box-shadow:var(--shadow);font-size:.85rem}
.sello b{color:var(--es)}
.moviles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.5rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-top:2.5rem}
.movil{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:.8rem;box-shadow:var(--shadow);transition:transform .2s}
.movil:hover{transform:translateY(-6px)}
.movil img{border-radius:18px;width:100%;aspect-ratio:9/10;object-fit:cover;display:block}
.movil p{text-align:center;font-size:.9rem;font-weight:600;padding:.8rem 0 .4rem}
/* MODOS */
.modos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.modo{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow);font-size:.92rem;font-weight:600;display:flex;gap:.7rem;align-items:center}
.modo span{font-size:1.2rem}
/* TESTIMONIOS */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.5rem}
.t-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.8rem}
.t-card .estrellas{color:#F5A623;letter-spacing:2px}
.t-card q{font-family:'Fraunces',serif;font-size:1.05rem;quotes:"«" "»"}
.t-card footer{font-size:.85rem;color:var(--ink2);margin-top:auto}
/* PRECIOS */
.precios{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.5rem;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.8rem 1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.plan.destacado{border:2px solid var(--es);transform:scale(1.03)}
.plan .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--es);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:.3rem .9rem;border-radius:999px;white-space:nowrap}
.plan h3{font-size:1.1rem}
.plan .p-precio{font-family:'Fraunces',serif;font-size:2rem;margin:.6rem 0 0}
.plan .p-precio small{font-family:'Inter';font-size:.85rem;color:var(--ink2);font-weight:500}
.plan .p-precio s{font-size:1.1rem;color:var(--ink2);font-weight:400}
.plan .semana{display:inline-block;background:var(--soft);color:var(--ok);font-weight:700;font-size:.8rem;border-radius:8px;padding:.25rem .6rem;margin:.7rem 0 1rem}
.plan ul{list-style:none;font-size:.88rem;color:var(--ink2);display:grid;gap:.5rem;margin-bottom:1.4rem}
.plan ul li::before{content:"✓ ";color:var(--ok);font-weight:800}
.plan ul li.no{opacity:.5}
.plan ul li.no::before{content:"✕ ";color:var(--ink2)}
.plan .btn{margin-top:auto;justify-content:center}
.garantias{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem;font-size:.85rem}
.garantias span{background:var(--soft);border-radius:999px;padding:.45rem 1rem;color:var(--ink2)}
/* LIBROS */
.libros{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.5rem}
.libro{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:1.8rem;display:flex;flex-direction:column;gap:.8rem;text-align:center}
.libro img{max-width:210px;margin:0 auto;border-radius:8px;box-shadow:0 14px 28px rgba(20,27,46,.22);transition:transform .2s}
.libro:hover img{transform:translateY(-6px) rotate(-1deg)}
.libro h3{font-size:1.15rem;margin-top:.6rem}
.libro .l-sub{color:var(--ink2);font-size:.9rem;flex:1}
.libro .l-precio{font-family:'Fraunces',serif;font-size:1.6rem}
.pack{background:linear-gradient(135deg,var(--es),color-mix(in srgb,var(--es) 60%,var(--en)));border-radius:28px;color:#fff;padding:48px 36px;margin-top:3rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;box-shadow:var(--shadow)}
.pack h2{color:#fff}
.pack p{opacity:.92}
.pack .p-precio{font-family:'Fraunces',serif;font-size:2.4rem}
.pack .p-precio s{font-size:1.3rem;opacity:.7}
.pack .btn{background:#fff;color:var(--es)}
/* VÍDEOS */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2.5rem}
.video{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.video .v-media{aspect-ratio:16/9;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.video .v-media video,.video .v-media iframe{width:100%;height:100%;border:0}
.video p{padding:1rem 1.3rem;font-weight:600;font-size:.95rem}
/* DUDAS */
.buscador-grande{max-width:640px;margin:2rem auto 0}
.buscador-grande input{width:100%;padding:1.1rem 1.6rem;font:inherit;font-size:1.05rem;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);outline:none;box-shadow:var(--shadow)}
.buscador-grande input:focus{border-color:var(--es)}
.temas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.tema{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:var(--shadow);text-decoration:none;display:flex;flex-direction:column;gap:.3rem;transition:transform .15s}
.tema:hover{transform:translateY(-4px)}
.tema b{font-size:.98rem}
.tema span{font-size:.82rem;color:var(--ink2)}
.sin-resultados{display:none;text-align:center;background:var(--soft);border-radius:16px;padding:2rem;margin-top:2rem;color:var(--ink2)}
/* ARTÍCULOS / LISTAS */
.articulos{display:grid;gap:.8rem;margin-top:2rem}
.articulo{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.4rem;box-shadow:var(--shadow);text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:transform .15s}
.articulo:hover{transform:translateX(4px)}
.articulo b{font-size:.98rem}
.articulo span{color:var(--es);font-weight:800}
/* HONESTIDAD / BLOQUES OSCUROS */
.honestidad{background:var(--ink);color:#F2F1EC;border-radius:28px;padding:56px 40px;text-align:center}
html[data-marca="frasly"] .honestidad{background:#3D2E63}
html[data-tema="oscuro"] .honestidad{background:#060a14}
.honestidad h2{color:#fff}
.honestidad p{opacity:.85;max-width:640px;margin:1rem auto 0}
.honestidad .botones-h{display:flex;gap:1rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.honestidad .chip{border:2px solid rgba(255,255,255,.3);border-radius:999px;padding:.7rem 1.6rem;font-weight:700}
.honestidad .chip.si{border-color:#2ECC8F;color:#7BE0B8}
.honestidad .chip.no{border-color:#FF8A65;color:#FFB39B}
/* FAQ */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:700;padding:1.1rem 1.4rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:1.4rem;color:var(--es);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.4rem 1.2rem;color:var(--ink2);font-size:.95rem}
/* CTA FINAL */
.final{background:linear-gradient(135deg,var(--es) 0%,color-mix(in srgb,var(--es) 55%,#000) 55%,var(--en) 130%);border-radius:28px;color:#fff;text-align:center;padding:64px 28px;box-shadow:var(--shadow)}
.final h2{color:#fff}
.final p{opacity:.92;max-width:560px;margin:.8rem auto 1.8rem}
.final .btn{background:#fff;color:var(--es)}
/* FOOTER */
footer.pie{border-top:1px solid var(--line);padding:44px 0;font-size:.88rem;color:var(--ink2)}
.pie-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.pie a{color:var(--ink2)}
/* RESPONSIVE */
@media(max-width:920px){
  .hero-grid,.prof,.dos,.pack{grid-template-columns:1fr;gap:36px}
  .banda .wrap{grid-template-columns:repeat(2,1fr);gap:1.6rem}
  .pasos,.moviles,.testi,.grid3,.libros,.videos{grid-template-columns:1fr}
  .grid4,.precios,.modos{grid-template-columns:repeat(2,1fr)}
  .temas{grid-template-columns:repeat(2,1fr)}
  .plan.destacado{transform:none}
}
/* El menú (9 elementos con los 2 desplegables) y el buscador de la cabecera
   necesitan más ancho del que cabe a la vez que el logo incluso en un
   portátil normal (1280px): comprobado que a 1280px el buscador se quedaba
   en 56px, ilegible. Corte propio, más alto que el de las rejillas de
   arriba, para que no compitan por sitio (25-ago-2026). */
@media(max-width:1300px){
  .busca{display:none}
  .menu{display:none;position:absolute;top:66px;left:0;right:0;background:var(--bg);flex-direction:column;padding:1.2rem;border-bottom:1px solid var(--line)}
  .menu.abierto{display:flex}
  .menu .busca-m{display:block;width:100%}
  .burger{display:block}
}
@media(max-width:560px){.grid4,.precios,.temas{grid-template-columns:1fr}}

/* «NO ES SOLO UNA APP: HAY UNA PERSONA» (29-ago-2026, Ramón).

   Lo que deja a distancia esta oferta no son funciones: es que SIEMPRE se
   trata con Ramón. La puesta en marcha con él por WhatsApp o teléfono, la
   clase en grupo al mes por Teams, y las preguntas sin límite desde la ficha,
   que contesta él. No hay tutores. Él mismo: «la experiencia la tengo yo y no
   la delego». Todo va en TODOS los planes, también en el de 19 €.

   Estaban solo pegadas a los precios: en la home, las cuatro menciones a
   partir del 48 % de la página; en frasly, todas dentro del bloque de
   planes. Quien no bajaba hasta allí no se enteraba nunca, y arriba solo se
   le hablaba de la máquina. Ramón: «el tesoro estaba escondido».

   Todo con variables y con su valor de reserva detrás, para que valga igual
   en las páginas que usan esta hoja y en las que tienen su propia paleta, y
   en claro y en oscuro sin una regla más. */
.hay-persona{
  margin:1.25rem 0 0; padding:1rem 1.15rem; max-width:46rem;
  background:var(--card,#fff);
  border:1px solid var(--line,var(--border,#E8E1D6));
  border-left:4px solid var(--es,var(--amber,#E4572E));
  border-radius:var(--r,14px);
  box-shadow:var(--shadow,0 10px 30px rgba(20,27,46,.08));
  text-align:left;
}
.hay-persona .hp-titular{
  margin:0 0 .55rem; font-weight:700; line-height:1.4;
  color:var(--ink,var(--text,#141B2E));
}
.hay-persona ul{ margin:0; padding-left:1.15rem; }
.hay-persona li{
  margin:.3rem 0; font-size:.95rem; line-height:1.5;
  color:var(--ink2,var(--soft,#4A5266));
}
.hay-persona li strong{ color:var(--ink,var(--text,#141B2E)); }
/* El pie en tinta fuerte, no en el color de acento: medido el 29-ago, el
   naranja sobre el fondo de la tarjeta daba 3,7 de contraste y lo legible
   empieza en 4,5. El acento ya lo pone la barra de la izquierda. */
.hay-persona .hp-pie{
  margin:.75rem 0 0; font-size:.9rem; font-weight:700; line-height:1.45;
  color:var(--ink,var(--text,#141B2E));
}

/* «AQUÍ DEBE RESPLANDECER» (29-ago-2026, Ramón). En las tarjetas de precio,
   la clase mensual y la puesta en marcha estaban como dos «✓» más, en cuarto
   y quinto lugar de una lista de seis, detrás de los juegos. Es decir: lo
   único que hace que 19 € no sea el precio de una app, contado como si fuera
   una función más.

   Ahora van delante de la lista y en su propio recuadro, con la tercera que
   ni siquiera estaba (las preguntas sin límite desde la ficha). Detrás queda
   el ecosistema, que es lo que se lee como «y además».

   Las palomitas las sigue poniendo `.plan ul li::before`, no se repiten. Y
   el recuadro usa --soft y --line, que se redefinen en oscuro: vale en los
   dos temas sin una regla más. */
.plan-conmigo{
  margin:.2rem 0 1rem; padding:.75rem .9rem;
  background:var(--soft); border:1px solid var(--line);
  border-left:3px solid var(--es); border-radius:12px;
}
.plan-conmigo .pc-tit{
  margin:0 0 .45rem; font-size:.8rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.plan-conmigo ul{ margin-bottom:0; font-size:.9rem; color:var(--ink); gap:.4rem; }
.plan-conmigo ul li{ font-weight:600; }