/* Estilos de las paginas publicas: inicio, privacidad y terminos.
   Compartidos para que las tres se vean igual sin tener el CSS copiado
   tres veces, que es como terminan pareciendose cada vez menos. */
  :root{
    --tinta:#1c1917; --tinta-2:#57534e; --tinta-3:#78716c;
    --fondo:#ffffff; --fondo-2:#fafaf9; --borde:#e7e5e4;
    --azul:#1565c0; --azul-claro:#e8f1fb;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --tinta:#f5f5f4; --tinta-2:#d6d3d1; --tinta-3:#a8a29e;
      --fondo:#121212; --fondo-2:#1c1c1b; --borde:#333130;
      --azul:#5b9bd5; --azul-claro:#16202b;
    }
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--fondo); color:var(--tinta);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .env{max-width:780px; margin:0 auto; padding:0 20px}
  header{border-bottom:1px solid var(--borde)}
  header .env{display:flex; align-items:center; justify-content:space-between; padding-block:16px}
  .marca{font-weight:800; font-size:18px; letter-spacing:-.3px; text-decoration:none; color:var(--tinta)}
  a{color:var(--azul)}
  .btn{
    display:inline-block; background:var(--azul); color:#fff; text-decoration:none;
    padding:14px 26px; border-radius:10px; font-weight:700; font-size:16px;
  }
  .btn.chico{padding:9px 16px; font-size:14px}
  .btn.borde{background:transparent; color:var(--azul); border:1.5px solid var(--azul)}
  h1{font-size:clamp(28px,6vw,42px); line-height:1.15; letter-spacing:-1px; margin:0 0 16px}
  h2{font-size:clamp(21px,4vw,27px); line-height:1.25; letter-spacing:-.5px; margin:0 0 14px}
  h3{font-size:17px; margin:0 0 6px}
  p{margin:0 0 14px; color:var(--tinta-2)}
  .bajada{font-size:clamp(17px,2.4vw,19px); color:var(--tinta-2); margin-bottom:28px}
  section{padding-block:52px; border-bottom:1px solid var(--borde)}
  .hero{padding-top:56px}
  .cuadros{display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px}
  @media (min-width:640px){ .cuadros{grid-template-columns:1fr 1fr} }
  .cuadro{background:var(--fondo-2); border:1px solid var(--borde); border-radius:12px; padding:20px}
  .cuadro p{margin:0; font-size:15px}
  .cita{
    border-left:3px solid var(--azul); padding:4px 0 4px 18px; margin:24px 0;
    color:var(--tinta-2); font-style:italic;
  }
  .precio{background:var(--azul-claro); border:1px solid var(--borde); border-radius:14px; padding:28px; text-align:center}
  .monto{font-size:40px; font-weight:800; letter-spacing:-1.5px; color:var(--tinta); line-height:1.1}
  .monto span{font-size:16px; font-weight:600; color:var(--tinta-3)}
  .lista{list-style:none; padding:0; margin:20px 0 0; text-align:left; display:inline-block}
  .lista li{margin-bottom:8px; color:var(--tinta-2); font-size:15px}
  .lista li::before{content:"✓"; color:var(--azul); font-weight:800; margin-right:10px}
  details{border-bottom:1px solid var(--borde); padding:14px 0}
  details summary{cursor:pointer; font-weight:600; list-style:none}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; float:right; color:var(--tinta-3); font-weight:400}
  details[open] summary::after{content:"–"}
  details p{margin:12px 0 0; font-size:15px}
  footer{padding-block:32px; font-size:13px; color:var(--tinta-3)}
  footer a{color:var(--tinta-3); margin-right:16px}
  .centrado{text-align:center}

  /* El interruptor mensual/anual funciona con dos radios y CSS, sin una linea
     de JavaScript: la pagina tiene que servir aunque el navegador no ejecute
     nada, que es justamente el caso del rastreador de Meta. */
  .interruptor{display:inline-flex; background:var(--fondo-2); border:1px solid var(--borde);
    border-radius:999px; padding:4px; margin-bottom:28px}
  .interruptor label{padding:8px 20px; border-radius:999px; cursor:pointer; font-size:15px;
    font-weight:600; color:var(--tinta-2); display:flex; align-items:center; gap:8px}
  #per-mensual, #per-anual{position:absolute; opacity:0; pointer-events:none}
  #per-mensual:checked ~ .env .interruptor label[for=per-mensual],
  #per-anual:checked ~ .env .interruptor label[for=per-anual]{background:var(--azul); color:#fff}
  .ahorra{background:#e8f5e9; color:#1b5e20; font-size:12px; padding:2px 8px; border-radius:999px; font-weight:700}
  #per-mensual:checked ~ .env .anual,
  #per-anual:checked ~ .env .mensual{display:none}

  .planes{display:grid; grid-template-columns:1fr; gap:16px; text-align:left}
  @media (min-width:760px){ .planes{grid-template-columns:repeat(3,1fr)} }
  .plan{border:1px solid var(--borde); border-radius:14px; padding:24px; background:var(--fondo-2);
    display:flex; flex-direction:column}
  .plan.destacado{border:2px solid var(--azul); background:var(--azul-claro)}
  .plan .etiqueta{font-size:12px; font-weight:800; color:var(--azul); letter-spacing:.5px;
    text-transform:uppercase; margin-bottom:8px; min-height:18px}
  .plan h3{font-size:20px; margin:0 0 2px}
  .plan .para{font-size:14px; color:var(--tinta-3); margin-bottom:18px}
  .plan .valor{font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1.1}
  .plan .unidad{font-size:14px; color:var(--tinta-3); font-weight:600}
  .plan .coniva{font-size:13px;color:var(--tinta-3);margin-top:2px}
  .plan .ahorro{font-size:13px; color:#2e7d32; font-weight:700; margin-top:6px; min-height:20px}
  .plan ul{list-style:none; padding:0; margin:18px 0 22px; flex:1}
  .plan li{font-size:14px; color:var(--tinta-2); margin-bottom:7px}
  .plan li::before{content:"✓"; color:var(--azul); font-weight:800; margin-right:9px}
  .plan .btn{text-align:center; display:block}

/* Documentos largos: privacidad y terminos. */
.doc h2{font-size:19px; margin:32px 0 10px}
.doc h3{font-size:15px; margin:20px 0 6px}
.doc p, .doc li{color:var(--tinta-2); font-size:15px; line-height:1.75}
.doc ul{padding-left:22px}
.doc li{margin-bottom:7px}
.doc .destacado{background:var(--fondo-2); border:1px solid var(--borde);
  border-left:3px solid var(--azul); border-radius:0 8px 8px 0; padding:16px 18px; margin:18px 0}
.doc .destacado p{margin:0}
.doc .fecha{color:var(--tinta-3); font-size:14px}