/* styles/shared/portada.css — portada pública de arycraft.com (portada.php), 27-09-2026.
 * Propuesta G del laboratorio: colores del logo + bastidor y tela Aida, modo claro y oscuro.
 * Botón de Google (.gsi) con las pautas de marca de Google: no cambiarle colores ni forma. */
.gsi{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 20px;border-radius:24px;font:500 16px/1 Roboto,Arial,sans-serif;letter-spacing:.25px;text-decoration:none;background:#fff;color:#1f1f1f;border:1px solid #747775;box-shadow:none}.gsi svg{width:20px;height:20px;flex:none}.gsi:hover{background:#f8f9fa}.gsi.oscuro{background:#131314;color:#e3e3e3;border-color:#8e918f}.gsi.oscuro:hover{background:#1f1f22}@media (max-width:860px){.gsi{width:100%}}
:root{--tinta:#2d2340;--suave:#5f5873;--rosa:#e8437a;--cian:#27b3d3;--naranja:#f39237;--amarillo:#ffd23f;--verde:#8ac926;--madera:#b97a3f;
  --fondo:#fbf5e9;--punto:#e4d5b8;--tarjeta:#fffaf0;--borde:#eadcc4;--pespunte:#d8b98f;--pastilla:#fff;
  --luz1:rgba(39,179,211,.26);--luz2:rgba(232,67,122,.20);--luz3:rgba(255,210,63,.32);--sombra:rgba(90,60,30,.12);--tinte:.07;--tinte-abierto:.12}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tinta:#f4ede4;--suave:#c9bcae;--fondo:#1a1422;--punto:rgba(255,255,255,.07);--tarjeta:#2a2233;--borde:#3d3347;--pespunte:rgba(255,255,255,.22);--pastilla:#2a2233;--luz1:rgba(39,179,211,.24);--luz2:rgba(232,67,122,.30);--luz3:rgba(243,146,55,.26);--sombra:rgba(0,0,0,.45);--tinte:.10;--tinte-abierto:.17}}
:root[data-theme="dark"]{--tinta:#f4ede4;--suave:#c9bcae;--fondo:#1a1422;--punto:rgba(255,255,255,.07);--tarjeta:#2a2233;--borde:#3d3347;--pespunte:rgba(255,255,255,.22);--pastilla:#2a2233;--luz1:rgba(39,179,211,.24);--luz2:rgba(232,67,122,.30);--luz3:rgba(243,146,55,.26);--sombra:rgba(0,0,0,.45);--tinte:.10;--tinte-abierto:.17}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{background:radial-gradient(circle at 1px 1px,var(--punto) 1.3px,transparent 1.5px) 0 0/12px 12px,radial-gradient(800px 500px at 15% 0%,rgba(232,67,122,.22),transparent 60%),radial-gradient(700px 500px at 100% 40%,rgba(39,179,211,.18),transparent 60%),radial-gradient(900px 600px at 50% 100%,rgba(243,146,55,.18),transparent 60%),linear-gradient(160deg,#211a2c,#1a1422 60%,#15111b) #1a1422} :root:not([data-theme="light"]) .gsi{background:#131314;color:#e3e3e3;border-color:#8e918f} :root:not([data-theme="light"]) .idiomas button.on{background:#f4ede4;color:#1a1422}}
:root[data-theme="dark"] body{background:radial-gradient(circle at 1px 1px,var(--punto) 1.3px,transparent 1.5px) 0 0/12px 12px,radial-gradient(800px 500px at 15% 0%,rgba(232,67,122,.22),transparent 60%),radial-gradient(700px 500px at 100% 40%,rgba(39,179,211,.18),transparent 60%),radial-gradient(900px 600px at 50% 100%,rgba(243,146,55,.18),transparent 60%),linear-gradient(160deg,#211a2c,#1a1422 60%,#15111b) #1a1422} :root[data-theme="dark"] .gsi{background:#131314;color:#e3e3e3;border-color:#8e918f} :root[data-theme="dark"] .idiomas button.on{background:#f4ede4;color:#1a1422}
*{box-sizing:border-box}
body{margin:0;color:var(--tinta);font:18px/1.65 Nunito,system-ui,sans-serif;overflow-x:hidden;background-color:var(--fondo);
  background-image:radial-gradient(circle at 1px 1px,var(--punto) 1.3px,transparent 1.5px);background-size:12px 12px}
a{color:inherit}
.envol{max-width:1120px;margin:0 auto;padding:0 20px;position:relative}
.hero{position:relative;padding:20px 0 70px;background:
  radial-gradient(900px 440px at 90% 10%,var(--luz1),transparent 60%),
  radial-gradient(700px 440px at 0% 30%,var(--luz2),transparent 60%),
  radial-gradient(760px 380px at 55% 105%,var(--luz3),transparent 60%)}
.ajustes{display:flex;gap:8px;align-items:center}
.idioma-sel{display:none;height:40px;border-radius:12px;border:0;padding:0 10px;font:700 15px Nunito,sans-serif;background:var(--tarjeta);color:var(--tinta);box-shadow:0 2px 8px var(--sombra)}
.tema{width:40px;height:40px;border-radius:12px;border:0;background:var(--tarjeta);color:var(--tinta);font-size:20px;cursor:pointer;box-shadow:0 2px 8px var(--sombra)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top .nom{display:flex;align-items:center;gap:10px;font:800 24px Nunito,sans-serif;text-decoration:none;background:var(--tarjeta);padding:5px 18px 5px 6px;border-radius:999px;outline:2px dashed var(--madera);outline-offset:-5px}
.top .nom img{width:42px}
.idiomas{display:flex;gap:4px;flex-wrap:wrap;background:var(--tarjeta);padding:4px;border-radius:12px}
.idiomas button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13px;padding:4px 8px;border-radius:8px;color:var(--suave)}
.idiomas button.on{background:var(--tinta);color:#fff}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin-top:34px}
.beta{display:inline-flex;gap:8px;align-items:center;background:var(--pastilla);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.06);margin-bottom:18px}
.beta i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(138,201,38,.25)}
h1{font:900 clamp(36px,5.2vw,60px)/1.06 Nunito,sans-serif;margin:0 0 20px;letter-spacing:-.02em}
h1 .arco{background:linear-gradient(90deg,var(--rosa),var(--naranja) 45%,var(--cian));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:20px;color:var(--suave);margin:0 0 28px}
.bastidor{width:100%;max-width:470px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 24px 34px rgba(90,60,30,.25))}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:60px 0}
.fila.inv .parche{order:2}
.parche{background:var(--tarjeta);border-radius:26px;padding:18px;outline:3px dashed var(--c);outline-offset:-9px;box-shadow:0 18px 40px var(--sombra)}
.parche svg{width:100%;height:auto;display:block;border-radius:16px}
.etq{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;color:#fff;background:var(--c);margin-bottom:12px}
.fila h2{font:900 38px/1.1 Nunito,sans-serif;margin:0 0 14px}
.fila p{font-size:19px;color:var(--suave);margin:0}
.trad{margin-top:20px} .trad svg{width:100%;max-width:340px;height:auto}
.franja{background:linear-gradient(120deg,#2d2340,#40306a);border-radius:28px;padding:30px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:20px 0 60px;outline:2px dashed rgba(255,255,255,.25);outline-offset:-10px}
.franja span{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:8px 18px 8px 8px;font-weight:800}
.franja i{width:32px;height:32px;border-radius:50%;flex:none;background:repeating-linear-gradient(35deg,var(--c) 0 4px,rgba(255,255,255,.55) 4px 6px)}
.cierre{text-align:center;padding:0 0 64px}
.cierre h2{font:900 36px Nunito,sans-serif;margin:0 0 10px}
.cierre p{color:var(--suave);max-width:36em;margin:0 auto 24px}
.faq{max-width:780px;margin:0 auto;padding:10px 0 56px}
.faq h2{font:900 34px Nunito,sans-serif;text-align:center;margin:0 0 20px}
.faq details{background:linear-gradient(rgba(var(--rgb),var(--tinte)),rgba(var(--rgb),var(--tinte))),var(--tarjeta);border-radius:20px;margin-bottom:14px;padding:0 30px;
  outline:2px dashed rgba(var(--rgb),.55);outline-offset:-8px;box-shadow:0 6px 18px var(--sombra);transition:background .2s}
.faq details[open]{--tinte:var(--tinte-abierto)}
.faq summary{cursor:pointer;font-weight:800;font-size:19px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;
  color:#fff;background:rgb(var(--rgb))}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:14px 0 28px;border-top:1px dashed rgba(var(--rgb),.4);color:var(--suave)}
.faq details a{color:var(--cian)}
footer{border-top:2px dashed var(--pespunte);padding:26px 0 40px;text-align:center;color:var(--suave);font-size:15px}
footer .legal{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:6px}
footer p{margin:0}
footer .instagram{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 16px;border-radius:999px;color:var(--tinta);text-decoration:none;font-weight:700;background:var(--tarjeta);border:1px solid var(--borde);box-shadow:0 2px 8px var(--sombra)}
footer .instagram:hover{color:#e1306c}
footer .instagram svg{color:#e1306c;flex:none}
@media (max-width:860px){
  body{font-size:17px} .envol{padding:0 16px}
  .top .nom img{display:none} .top .nom{padding:5px 16px;font-size:21px}
  .top{flex-wrap:nowrap} .ajustes .idiomas{display:none} .idioma-sel{display:block}
  .hero{padding:12px 0 44px}
  .hero-grid,.fila{grid-template-columns:1fr;gap:26px}
  /* Primera pantalla del móvil: bastidor pequeño, título y el botón de Google antes que la descripción */
  .hero-grid{margin-top:10px;gap:6px}
  .hero-grid .bastidor{width:min(52vw,200px);order:-1}
  .hero-grid > div{display:flex;flex-direction:column;align-items:flex-start}
  .hero-grid .beta{margin-bottom:10px}
  .hero-grid h1{font-size:clamp(28px,8vw,34px);margin:0 0 16px}
  .hero-grid .entrar{order:3;width:100%;margin-bottom:20px}
  .hero-grid .intro{order:4;font-size:17px;margin:0}
  .fila{padding:40px 0} .fila.inv .parche{order:0}
  .fila h2{font-size:30px}
  .franja{padding:22px 16px;flex-direction:column;align-items:stretch}
}
/* (06-10-2026) Aviso de la prueba gratuita de Estándar bajo el botón de Google: tarjeta con pespunte, como el resto */
.prueba{display:flex;flex-direction:column;gap:2px;max-width:440px;margin:14px 0 0;padding:10px 16px;border-radius:14px;background:var(--tarjeta);
  outline:2px dashed var(--pespunte);outline-offset:-6px;box-shadow:0 2px 10px var(--sombra);font-size:15px;line-height:1.45;color:var(--suave);text-align:left}
.prueba strong{color:var(--tinta);font-size:16px}
/* (07-10) alineado a la izquierda con el boton de Google: arriba tal cual; en el cierre, boton + aviso en un bloque
   centrado en la pagina pero alineados entre si a la izquierda. En movil, los dos a todo el ancho. */
.entrar-cierre{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:440px}
@media (max-width:860px){.entrar-cierre{display:flex;align-items:stretch;max-width:none}}
@media (max-width:860px){.prueba{max-width:none}}


/* =====================================================================================================================
   (16-10-2026) Portada nueva («Tus labores, todas en una app», propuesta 2 del laboratorio) y página hermana
   academias.php. Mismo lenguaje: tarjeta, pespunte, colores del logo. Los colores salen de las variables de arriba,
   así que el modo oscuro va solo; lo poco que lleva color fijo tiene su versión oscura al final.
   ===================================================================================================================== */
.intro b{color:var(--tinta)}
.nota-bajo{font-size:15px;color:var(--suave);margin:10px 0 0}

/* Navegación entre las dos páginas */
.secciones{display:flex;gap:4px;background:var(--tarjeta);padding:4px;border-radius:999px;box-shadow:0 2px 8px var(--sombra)}
.secciones a{text-decoration:none;font-weight:800;font-size:15px;padding:7px 16px;border-radius:999px;color:var(--suave);white-space:nowrap}
.secciones a[aria-current="page"]{background:linear-gradient(90deg,var(--rosa),var(--naranja));color:#fff}
.secciones a:not([aria-current]):hover{color:var(--tinta);background:rgba(127,127,127,.10)}
@media (max-width:1080px) and (min-width:861px){.ajustes .idiomas{display:none}.idioma-sel{display:block}}

/* Móvil con un vídeo real de la app */
.movil{position:relative;width:min(100%,var(--ancho,300px));margin:0 auto;padding:10px;border-radius:38px;background:#1d1726;box-shadow:0 26px 50px rgba(60,30,20,.30),inset 0 0 0 2px #3a3046}
.movil video,.movil img{display:block;width:100%;height:auto;border-radius:29px;background:#fff;aspect-ratio:780/1688;object-fit:cover;object-position:top}
.movil img[data-quieta]{cursor:pointer}

/* Cabecera: dos móviles en abanico, sello «2 apps en 1» y sus etiquetas */
.abanico-caja{position:relative}
.abanico{display:flex;justify-content:center;align-items:flex-end;padding:10px 0 0}
.abanico figure{margin:0}
.abanico .movil{padding:7px;border-radius:28px}
.abanico .movil video,.abanico .movil img{border-radius:22px}
.abanico.dos .movil{--ancho:215px}
.abanico.dos figure:nth-of-type(1){transform:rotate(-5deg) translate(14px,10px)}
.abanico.dos figure:nth-of-type(2){transform:rotate(5deg) translate(-14px,10px);z-index:1}
.sello-3{font:900 14px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:6px 14px;border-radius:999px;
  background:linear-gradient(90deg,var(--rosa),var(--naranja) 50%,var(--cian));box-shadow:0 6px 16px rgba(232,67,122,.3)}
.abanico-caja > .sello-3{position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:3;font-size:13px;white-space:nowrap}
.abanico-caja .etiquetas{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}
.abanico-caja .etiquetas span{justify-self:center;font-weight:900;font-size:14px;padding:3px 14px;border-radius:999px;color:#fff;background:var(--c);text-align:center}
.pista-ac{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:800;color:var(--tinta);text-decoration:none;
  padding:8px 14px;border-radius:999px;background:rgba(243,146,55,.14);outline:2px dashed rgba(243,146,55,.6);outline-offset:-4px}
.pista-ac:hover{background:rgba(243,146,55,.24)}

/* Así funciona */
.titulo-sec{font:900 38px/1.1 Nunito,sans-serif;text-align:center;margin:0 0 8px}
.sub-sec{text-align:center;color:var(--suave);margin:0 auto 30px;max-width:34em}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:20px 0 50px}
.paso{background:var(--tarjeta);border-radius:26px;padding:22px 22px 26px;outline:3px dashed var(--c);outline-offset:-9px;box-shadow:0 18px 40px var(--sombra);display:flex;flex-direction:column;gap:10px}
.paso .num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:900 20px Nunito,sans-serif;color:#fff;background:var(--c)}
.paso h3{font:900 24px/1.15 Nunito,sans-serif;margin:0}
.paso p{margin:0;color:var(--suave);font-size:17px}
.paso .movil{--ancho:210px;margin-top:auto;padding:7px;border-radius:28px}
.paso .movil video{border-radius:22px}

/* Tarjetas con vídeo + texto (labores en la portada, bloques en academias) */
.tres{position:relative;padding:40px 0 20px}
.tres > .sello-3{display:block;width:max-content;margin:0 auto 10px}
.oficio{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;background:var(--tarjeta);border-radius:30px;padding:34px 40px;margin:0 0 28px;
  outline:3px dashed var(--c);outline-offset:-11px;box-shadow:0 18px 40px var(--sombra);
  background-image:radial-gradient(500px 260px at 0% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%)}
.oficio.inv{grid-template-columns:1fr 300px;background-image:radial-gradient(500px 260px at 100% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%)}
.oficio.inv .ov{order:2}
.oficio .movil{--ancho:260px}
.oficio .etq{margin-bottom:10px}
.oficio h3{font:900 34px/1.1 Nunito,sans-serif;margin:0 0 12px}
.oficio p{font-size:18px;color:var(--suave);margin:0 0 16px}
.oficio ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.oficio li{position:relative;padding-left:32px;font-size:16px;line-height:1.45;color:var(--suave)}
.oficio li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;background:var(--c)}
.oficio li b{color:var(--tinta)}

/* Precios */
.precio{background:var(--tarjeta);border-radius:28px;padding:34px 30px;outline:3px dashed var(--verde);outline-offset:-10px;box-shadow:0 18px 40px var(--sombra);text-align:center;margin:20px 0 50px}
.precio h2{font:900 34px/1.1 Nunito,sans-serif;margin:0 0 8px}
.precio > p{color:var(--suave);margin:0 auto 22px;max-width:36em}
.precio > p b{color:var(--tinta)}
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px;margin:0 auto}
.plan{border-radius:18px;padding:14px 10px;background:linear-gradient(rgba(var(--rgb),.10),rgba(var(--rgb),.10)),var(--fondo);outline:2px dashed rgba(var(--rgb),.5);outline-offset:-6px}
.plan b{display:block;font-size:16px}
.plan span{display:block;font:900 26px Nunito,sans-serif}
.plan small{color:var(--suave);font-size:13px}
.precio .prueba{margin:22px auto 0}

/* Academias: «¿Te suena?», lo que hace, precio y botones */
.academy{position:relative;margin:30px 0 60px;padding:46px 44px;border-radius:34px;
  background:radial-gradient(600px 300px at 100% 0%,rgba(243,146,55,.22),transparent 70%),radial-gradient(500px 300px at 0% 100%,rgba(232,67,122,.14),transparent 70%),var(--tarjeta);
  outline:3px dashed var(--naranja);outline-offset:-12px;box-shadow:0 20px 50px var(--sombra);scroll-margin-top:20px}
.academy .cab{text-align:center;max-width:760px;margin:0 auto 26px}
.academy .cab h2{font:900 40px/1.1 Nunito,sans-serif;margin:10px 0 10px}
.academy .cab p{color:var(--suave);margin:0;font-size:19px}
.suena{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 34px}
.suena div{background:var(--fondo);border-radius:20px;padding:16px 16px 18px;box-shadow:0 6px 16px var(--sombra);font-size:16px;line-height:1.45;color:var(--suave)}
.suena div::before{content:attr(data-i);display:block;font-size:30px;margin-bottom:6px}
.suena b{color:var(--tinta)}
.ac-sol{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.ac-sol h3{font:900 30px/1.15 Nunito,sans-serif;margin:0 0 14px}
.ac-lista{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.ac-lista li{position:relative;padding-left:34px;color:var(--suave)}
.ac-lista li::before{content:"✓";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;background:var(--naranja)}
.ac-lista b{color:var(--tinta)}
.ac-precio{margin:0 0 20px;padding:12px 16px;border-radius:14px;background:rgba(138,201,38,.12);outline:2px dashed rgba(138,201,38,.55);outline-offset:-5px;color:var(--suave)}
.ac-precio b{color:var(--tinta)}
.ac-botones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ac-botones.centro{justify-content:center;margin-top:8px}
.btn-ac{font-weight:900;text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--naranja),var(--rosa));padding:12px 20px;border-radius:999px;box-shadow:0 6px 16px rgba(243,146,55,.35)}
.btn-ac.sec{background:var(--tarjeta);color:var(--tinta);box-shadow:none;outline:2px solid var(--borde)}
.hero .texto > .etq{margin-bottom:14px}
.ac-hero{position:relative;max-width:460px;margin:0 auto}
.mock{background:var(--tarjeta);border-radius:22px;padding:16px;box-shadow:0 18px 40px var(--sombra);border:1px solid var(--borde);font-size:15px;line-height:1.4;width:min(100%,320px)}
.mock.flota{position:absolute;right:-14px;bottom:-34px;width:250px;transform:rotate(3deg)}
.m-cab{font-weight:900;font-size:14px;color:#fff;margin:-16px -16px 12px;padding:10px 16px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--rosa),var(--naranja))}
.m-txt{margin:0 0 10px;color:var(--suave)} .m-txt b{color:var(--tinta)}
.m-fila{display:flex;gap:8px;flex-wrap:wrap}
.m-pag{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--fondo);color:var(--suave)}
.m-pag.ok{background:rgba(138,201,38,.2);color:#4d7a0c}
.ac-prof{margin:20px 0 8px;color:var(--suave)} .ac-prof b{color:var(--tinta)}
.ejemplos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px}
.ejemplos div{display:flex;flex-direction:column;align-items:center;padding:12px 22px;border-radius:18px;background:var(--fondo);outline:2px dashed var(--pespunte);outline-offset:-6px;min-width:200px}
.ejemplos small{color:var(--suave);font-weight:800}
.ejemplos b{font:900 30px Nunito,sans-serif;white-space:nowrap} .ejemplos b i{font-size:15px;font-style:normal;color:var(--suave);margin-left:3px}
.ejemplos span{font-size:14px;color:var(--suave)}

/* El bastidor con el logo, como firma encima del cierre */
.firma-logo{width:230px;margin:10px auto 6px}
.firma-logo .bastidor{width:100%;max-width:none;filter:drop-shadow(0 14px 22px rgba(90,60,30,.22))}

/* Modo oscuro: lo que lleva color fijo */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .m-pag.ok{color:#b6e36a} :root:not([data-theme="light"]) .movil{box-shadow:0 26px 50px rgba(0,0,0,.5),inset 0 0 0 2px #4a3f58}}
:root[data-theme="dark"] .m-pag.ok{color:#b6e36a}
:root[data-theme="dark"] .movil{box-shadow:0 26px 50px rgba(0,0,0,.5),inset 0 0 0 2px #4a3f58}

@media (max-width:860px){
  /* Móvil: título → frase → la app en vídeo → botón. El bloque de texto se «abre» para intercalar el vídeo */
  .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  .hero-grid > .texto{display:contents}
  .hero-grid .etq{order:0;align-self:flex-start}
  .hero-grid h1{order:1;margin:0 0 10px} .hero-grid .intro{order:3;margin:0 0 18px}
  .hero-grid > .visual{order:4;width:100%;margin:0 0 22px;display:block} .hero-grid .entrar{order:5}
  .top{flex-wrap:wrap} .top .nom img{display:block;width:34px} .top .nom{padding:4px 14px 4px 5px}
  .secciones{order:3;flex:1 1 100%;margin-top:10px}
  .secciones a{flex:1;text-align:center;font-size:14px;padding:8px 6px;white-space:normal}
  .abanico.dos .movil{--ancho:40vw}
  .abanico-caja > .sello-3{top:-14px}
  .abanico-caja .etiquetas{margin-top:16px} .abanico-caja .etiquetas span{font-size:12px;padding:2px 10px}
  .pista-ac{font-size:14px}
  .titulo-sec{font-size:30px}
  .pasos{grid-template-columns:1fr;gap:20px}
  .paso .movil{--ancho:190px}
  .tres{padding:26px 0 10px}
  .oficio,.oficio.inv{grid-template-columns:1fr;gap:20px;padding:26px 18px;border-radius:24px;outline-offset:-8px}
  .oficio.inv .ov{order:0}
  .oficio .movil{--ancho:min(62vw,240px)}
  .oficio h3{font-size:27px} .oficio p{font-size:16.5px}
  .oficio ul{grid-template-columns:1fr}
  .planes{grid-template-columns:repeat(2,1fr)}
  .precio{padding:28px 18px} .precio h2{font-size:28px}
  .academy{padding:34px 18px;border-radius:26px;outline-offset:-9px}
  .academy .cab h2{font-size:28px} .academy .cab p{font-size:17px}
  .suena{grid-template-columns:1fr 1fr;gap:10px} .suena div{font-size:14.5px;padding:12px}
  .ac-sol{grid-template-columns:1fr;gap:24px} .ac-sol h3{font-size:24px}
  .btn-ac{flex:1 1 100%;text-align:center}
  .ac-hero{margin-bottom:40px}
  .mock.flota{width:200px;right:-4px;bottom:-40px;font-size:13px}
  .ejemplos div{min-width:0;flex:1;padding:12px 10px} .ejemplos b{font-size:24px} .ejemplos b i{font-size:13px}
  .firma-logo{width:170px}
}
@media (max-width:360px){.ejemplos b{font-size:20px} .ejemplos b i{font-size:12px} .ejemplos{gap:8px}}

/* (19-10-2026) Navegación más discreta: letra y relleno menores */
.secciones{padding:3px}
.secciones a{font-size:13px;padding:5px 12px}
@media (max-width:860px){
  .secciones{margin-top:8px}
  .secciones a{font-size:12.5px;padding:6px 6px}
}