/* MARCO COMUN DE LA WEB (3-oct-2026): barra de arriba, menu de tres rayas,
   boton "¿Quieres probarme gratis?", avisos de las tiendas y pie. Lo usan la
   portada y todas las paginas interiores. Pensado primero para el movil.
   No usa las etiquetas <nav> ni <footer>: los estilos antiguos del contenido
   (css/contenido.css) tienen reglas para ellas y chocarian. */

  :root{
    --bosque:#0F2E1F;
    --bosque-hondo:#0A2016;
    --verde:#3FBF7F;
    --ambar:#F2B705;
    --crema:#F5F2EA;
    --crema-suave:#C9D3CB;
    --raya:rgba(245,242,234,.14);
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0; overflow-x:hidden; background:var(--bosque); color:var(--crema);
    font-family:'Inter',system-ui,sans-serif; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  :focus-visible{outline:3px solid var(--ambar); outline-offset:3px;}
  .ancho{max-width:1120px; margin:0 auto; padding:0 20px;}

  /* ── Barra de arriba ─────────────────────────────────────────────── */
  .barra{position:sticky; top:0; z-index:30; background:var(--bosque); border-bottom:1px solid var(--raya);}
  .barra .ancho{display:flex; align-items:center; justify-content:space-between; height:60px;}
  .marca{display:flex; align-items:center; gap:10px; text-decoration:none;
         font-family:'Anton',sans-serif; font-size:22px; letter-spacing:.02em;}
  .marca img{width:34px; height:34px; border-radius:8px; display:block;}
  .enlaces{display:none;}
  .rayas{width:48px; height:48px; margin-right:-10px; border:0; background:none; color:var(--crema);
         cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
  .rayas span{display:block; width:26px; height:3px; border-radius:2px; background:currentColor;}

  /* ── Menu a pantalla completa ────────────────────────────────────── */
  .menu{position:fixed; inset:0; z-index:40; background:var(--bosque-hondo); overflow-y:auto;
        display:none; padding:0 20px 40px;}
  .menu.abierto{display:block;}
  .menu-cabeza{display:flex; align-items:center; justify-content:space-between; height:60px;}
  .cerrar{width:48px; height:48px; margin-right:-10px; border:0; background:none; color:var(--crema);
          font-size:34px; line-height:1; cursor:pointer;}
  .menu .lista a{display:block; padding:15px 0; border-bottom:1px solid var(--raya); text-decoration:none;
              font-family:'Anton',sans-serif; font-size:28px; letter-spacing:.01em;}
  .menu .lista a.destacado{color:var(--ambar);}
  .menu .legal{margin-top:26px; font-size:14px; color:var(--crema-suave); display:flex; flex-wrap:wrap; gap:8px 20px;}

  /* ── Primer plano ────────────────────────────────────────────────── */
  .primero{padding:34px 0 0; overflow:hidden;}
  h1{margin:0; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
     font-size:clamp(68px,20.5vw,150px); line-height:.94; letter-spacing:.005em;}
  .bajada{margin:18px 0 0; font-size:20px; line-height:1.4; max-width:22em; color:var(--crema);}
  .llamada{margin:26px 0 0; max-width:440px;}
  .boton{display:block; width:100%; border:0; cursor:pointer; text-align:center; text-decoration:none;
         background:var(--ambar); color:var(--bosque-hondo); font:700 19px/1.2 'Inter',sans-serif;
         padding:19px 20px; border-radius:14px;}
  .caminos{display:none; margin-top:10px;}
  .caminos.abierto{display:block;}
  .camino{display:block; text-decoration:none; border:2px solid var(--crema); border-radius:14px;
          padding:15px 18px; margin-top:10px; font-weight:700; font-size:18px;}
  .camino small{display:block; margin-top:3px; font-weight:400; font-size:14px; color:var(--crema-suave);}
  .camino:first-child{border-color:var(--ambar);}

  /* Donde se podra descargar. No son botones: todavia no esta publicada. */
  .tiendas{display:flex; gap:10px; margin:22px 0 0; max-width:440px; padding:0; list-style:none;}
  .tiendas li{flex:1; display:flex; align-items:center; gap:9px; padding:10px 12px;
              border:1px solid var(--raya); border-radius:12px;}
  .tiendas svg{width:22px; height:22px; flex-shrink:0;}
  .tiendas span{display:block; font-size:12px; line-height:1.2; color:var(--crema-suave);}
  .tiendas strong{display:block; font-size:16px; line-height:1.2; color:var(--crema);}

  /* El movil con la pantalla real de la app. */
  .movil{margin:38px auto -150px; width:min(74vw,300px); border:9px solid #05110b; border-radius:38px;
         background:#000; overflow:hidden; box-shadow:0 0 0 1px var(--raya);}
  .movil img{display:block; width:100%; height:auto;}

  /* ── Los cuatro temas ────────────────────────────────────────────── */
  .temas{position:relative; background:var(--bosque-hondo); border-top:1px solid var(--raya); padding:14px 0 10px;}
  .tema{display:block; text-decoration:none; padding:24px 0; border-bottom:1px solid var(--raya);}
  .tema:last-child{border-bottom:0;}
  .tema h2{margin:0; font-family:'Anton',sans-serif; font-weight:400; font-size:32px; line-height:1.1; color:var(--verde);}
  .tema p{margin:8px 0 10px; font-size:18px; line-height:1.45; color:var(--crema);}
  .tema span{font-weight:700; font-size:16px; text-decoration:underline; text-underline-offset:4px; color:var(--crema);}

  .pie{border-top:1px solid var(--raya); padding:26px 0 40px; font-size:14px; color:var(--crema-suave);}
  .pie .lista{display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px;}

  /* ── Ordenador ───────────────────────────────────────────────────── */
  @media (min-width:900px){
    .ancho{padding:0 32px;}
    .barra .ancho{height:72px;}
    .enlaces{display:flex; gap:30px; font-size:16px; font-weight:600;}
    .enlaces a{text-decoration:none; opacity:.9;}
    .enlaces a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px;}
    .enlaces a.destacado{color:var(--ambar); opacity:1;}
    .primero{padding:70px 0 0;}
    .primero .ancho{display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:start;}
    h1{font-size:clamp(110px,11.5vw,170px);}
    .bajada{font-size:24px; margin-top:26px;}
    .llamada{margin-top:34px;}
    .movil{margin:0 0 -170px; width:320px;}
    .texto{padding-bottom:70px;}
    .temas{padding:30px 0 34px;}
    .temas .ancho{display:grid; grid-template-columns:repeat(4,1fr); column-gap:44px;}
    .tema{border-bottom:0;}
    .tema h2{font-size:34px;}
  }
  @media (prefers-reduced-motion:no-preference){
    .movil img{animation:encender .9s ease-out .15s both;}
    @keyframes encender{from{opacity:0;} to{opacity:1;}}
  }

  /* ── Paginas interiores ──────────────────────────────────────────── */
  .cierre{background:var(--bosque-hondo); border-top:1px solid var(--raya); padding:44px 0 50px;}
  .cierre .llamada{margin-top:0;}
  .pie a{text-underline-offset:3px;}
  /* El contenido antiguo fijaba anchos pensados para ordenador. */
  main img{max-width:100%;}