/* Estilo compartido de las páginas de contenido (guías, precio, quiénes somos). Mismos colores, letra y botones que la portada */
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url("/ds/assets/fonts/kalam-latin-400-normal.woff2") format("woff2")}
/* Mismos colores, letra y botones que la portada */
:root{
  --marino:#0F1B2D; --marino-oscuro:#070D17; --amarillo:#F5B517; --texto-amarillo:#4A3600;
  --gris:#4A5568; --gris-marino:#C7CEDB; --borde:#DDE1E7; --azul-claro:#EEF2F8;
  --marca:#FBE08F; --tinta-marca:#3D2E00;
  --letra:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mano:'Kalam',cursive;
}
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-padding-top:80px}
body{margin:0;background:#fff;color:var(--marino);font-family:var(--letra);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
a{color:var(--marino)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.envoltura{max-width:1180px;margin:0 auto;padding:0 24px}
.estrecha{max-width:760px}
.gris{color:var(--gris)}
.cifras{font-variant-numeric:tabular-nums}
.marca{background:var(--marca);color:var(--tinta-marca);padding:1px 7px;border-radius:7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.boton-si{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:10px;
  background-color:var(--amarillo);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));color:var(--texto-amarillo);
  font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(245,181,23,.6),0 10px 26px -12px rgba(245,181,23,.6);transition:filter .2s ease}
.boton-si:hover{filter:brightness(1.04)}
.boton-si.pequeno{min-height:44px;padding:0 18px;font-size:15px;font-weight:600;border-radius:8px}
/* Barra de arriba, como la portada */
.barra{position:sticky;top:0;z-index:50;background-color:var(--marino);background-image:radial-gradient(ellipse 50% 120px at 50% 100%,rgba(66,120,220,.35),rgba(66,120,220,0))}
.barra nav{height:68px;display:flex;align-items:center;gap:24px}
.barra .logo img{height:26px;width:auto}
.enlaces{display:flex;gap:4px;margin-left:12px;flex-grow:1}
.enlaces a{padding:8px 12px;border-radius:8px;color:var(--gris-marino);text-decoration:none;font-size:15px}
.enlaces a:hover{background:rgba(255,255,255,.08);color:#fff}
.acciones{display:flex;align-items:center;gap:12px;margin-left:auto}
.boton-barra{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-size:15px;font-weight:500;text-decoration:none}
/* Primera pantalla */
.portada{padding:64px 0 56px}
.antetitulo{font-size:15px;color:var(--gris);margin-bottom:16px}
.portada h1{font-size:52px;line-height:1.05;letter-spacing:-.035em;max-width:15em}
.entrada{margin-top:22px;font-size:20px;line-height:1.55;color:var(--gris);max-width:36em}
.llamada{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.llamada span{font-size:15px;color:var(--gris)}
/* Antes y después: el mismo bloque que la portada */
.seccion{padding:56px 0}
.seccion h2{font-size:36px;line-height:1.1}
.seccion .sub{margin-top:12px;font-size:18px;color:var(--gris);max-width:40em}
.comparacion{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.comparacion .etiqueta{padding:14px 40px;font-size:13px;font-weight:700;letter-spacing:.08em}
.apunte{background:#FFFDF6;border-right:1px solid var(--borde)}
.apunte .etiqueta{color:#6E6A5C;border-bottom:1px solid #ECE6D3}
.apunte p.mano{padding:28px 40px 36px;font-family:var(--mano);font-size:24px;line-height:1.6;color:#23324A}
.resultado{background:#fff;font-size:15px}
.resultado .etiqueta{color:#fff;background:var(--marino)}
.resultado .cuerpo{padding:28px 40px 36px}
.resultado .capitulo{font-weight:700;font-size:13px;letter-spacing:.04em}
.resultado .capitulo span{color:#B07F00}
.resultado p+p{margin-top:10px}
.resultado p.capitulo:not(:first-child){margin-top:18px}
.nota{margin-top:18px;font-size:16px;color:var(--gris);max-width:44em}
/* Paso a paso, con la captura del móvil al lado */
.pasos-zona{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;margin-top:32px}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.pasos li{counter-increment:paso;border-top:2px solid var(--marino);padding:20px 0 28px}
.pasos li:last-child{border-top-color:var(--amarillo)}
.pasos li::before{content:"0" counter(paso);display:block;font-size:15px;font-weight:700;color:#B07F00}
.pasos h3{margin:6px 0 8px;font-size:22px;letter-spacing:-.02em}
.pasos p{font-size:17px;line-height:1.6;color:var(--gris)}
.pasos p+p{margin-top:10px}
.captura{position:sticky;top:96px;margin:0}
.captura img{width:100%;height:auto;border-radius:28px;border:6px solid #1B1E23;box-shadow:0 30px 60px -30px rgba(15,27,45,.55)}
.captura figcaption{margin-top:12px;font-size:14px;color:var(--gris);text-align:center}
/* Lo que no hace y precio */
.franja{background:var(--azul-claro)}
.lista-no{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.lista-no li{font-size:18px;line-height:1.5;padding-left:22px;position:relative}
.lista-no li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:3px;background:var(--marino);border-radius:2px}
.precio-caja{margin-top:24px;border:1px solid var(--borde);border-radius:12px;background:#fff;padding:28px 32px}
.precio-caja p{font-size:18px;line-height:1.6}
.precio-caja p+p{margin-top:10px}
.precio-caja .boton-si{margin-top:22px}
/* Cierre y pie, como la portada */
.cierre{background-color:var(--marino);background-image:radial-gradient(ellipse 60% 260px at 50% 0,rgba(66,120,220,.45),rgba(66,120,220,0));color:#fff;text-align:center;padding:88px 24px}
.cierre h2{font-size:40px;line-height:1.1;max-width:15em;margin:0 auto}
.cierre p{margin-top:16px;font-size:18px;color:var(--gris-marino)}
.cierre .boton-si{margin-top:30px}
.cierre p.pie-boton{margin-top:14px;font-size:14px}
footer{background:var(--marino-oscuro);color:var(--gris-marino);padding:32px 0;font-size:14px}
footer .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
footer .empresa{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
footer img{height:22px;width:auto}
footer a{color:var(--gris-marino)}
footer a:hover{color:#fff}
footer .legales{display:flex;flex-wrap:wrap;gap:18px}
/* ---------- Componentes de las páginas de contenido ---------- */
.texto{max-width:760px}
.texto p{font-size:18px;line-height:1.65;color:var(--gris)}
.texto p+p,.texto p+ul,.texto ul+p{margin-top:14px}
.texto strong{color:var(--marino)}
.texto h3{margin:30px 0 8px;font-size:22px;letter-spacing:-.02em}
.texto ul{margin:0;padding-left:22px;font-size:18px;line-height:1.6;color:var(--gris)}
.texto ul li+li{margin-top:6px}
.leyenda{margin-top:12px;font-size:16px;color:var(--gris)}
.capitulo-partidas{margin-top:28px;border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.capitulo-partidas .cab{background:var(--marino);color:#fff;padding:12px 24px;font-size:13px;font-weight:700;letter-spacing:.08em}
.capitulo-partidas .cab span{color:var(--amarillo)}
.partida{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px;padding:20px 24px;border-top:1px solid var(--borde)}
.cab+.partida{border-top:0}
.partida .nota-mano{font-family:var(--mano);font-size:21px;line-height:1.35;color:#23324A;background:#FFFDF6;border:1px solid #ECE6D3;border-radius:8px;padding:8px 12px;align-self:start}
.partida .redaccion{font-size:16px;line-height:1.6;color:var(--gris)}
.partida .redaccion strong{color:var(--marino)}
.partida .medida{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;color:var(--marino)}
.partida .sin-medida{display:inline-block;margin-top:6px;font-size:14px;color:#8A6A00}
.tabla-caja{margin-top:24px;border:1px solid var(--borde);border-radius:12px;overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;min-width:560px}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:14px 18px;border-top:1px solid var(--borde)}
.tabla thead th{border-top:0;background:var(--marino);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em}
.tabla tbody th{font-weight:600;color:var(--marino);width:24%}
.tabla td{color:var(--gris)}
.lista-si{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.lista-si li{font-size:18px;line-height:1.5;padding-left:22px;position:relative}
.lista-si li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--amarillo)}
.prompt{margin-top:18px;background:var(--azul-claro);border-left:4px solid var(--amarillo);border-radius:8px;padding:18px 22px;font-size:17px;line-height:1.6;color:var(--marino);white-space:pre-line}
.boton-claro{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:10px;border:1px solid #C9CFD8;background:#fff;color:var(--marino);font-weight:600;font-size:17px;text-decoration:none}
.boton-claro:hover{border-color:var(--marino)}
.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.plan{border:1px solid var(--borde);border-radius:12px;padding:24px 26px;background:#fff}
.plan.destacado{border-color:var(--amarillo);box-shadow:0 0 0 1px var(--amarillo)}
.plan .nombre{font-weight:700;font-size:17px}
.plan .chapa{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px;background:var(--marca);color:var(--tinta-marca);font-size:13px;font-weight:700}
.plan .cifra{margin-top:10px}
.plan .cifra strong{font-size:44px;letter-spacing:-.03em}
.plan .cifra span{font-size:17px;color:var(--gris)}
.plan .aclara{margin-top:6px;font-size:15px;color:var(--gris)}
.preguntas-lista{margin-top:20px;border-top:1px solid var(--borde)}
.preguntas-lista details{border-bottom:1px solid var(--borde)}
.preguntas-lista summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-size:18px;font-weight:600}
.preguntas-lista summary::-webkit-details-marker{display:none}
.preguntas-lista summary::after{content:"+";font-size:22px;color:var(--gris)}
.preguntas-lista details[open] summary::after{content:"−"}
.preguntas-lista details p{padding-bottom:18px;font-size:17px;line-height:1.6;color:var(--gris);max-width:44em}
.datos-empresa{margin-top:16px;font-size:16px;line-height:1.7;color:var(--gris)}
footer .mas{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:0;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .mas b{font-weight:600;color:#fff}
@media (max-width:860px){
  .enlaces{display:none}
  .comparacion,.pasos-zona{grid-template-columns:minmax(0,1fr)}
  .apunte{border-right:0;border-bottom:1px solid var(--borde)}
  .captura{position:static;max-width:280px;margin:8px auto 0}
  .partida{grid-template-columns:minmax(0,1fr);gap:10px}
  .planes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .envoltura{padding:0 16px}
  .barra nav{height:60px;gap:12px}
  .barra .logo img{height:22px}
  .acciones .boton-si{display:none}
  .boton-barra{min-height:44px;font-size:16px}
  .portada{padding:28px 0 36px}
  .antetitulo{font-size:14px;margin-bottom:10px}
  .portada h1{font-size:34px;line-height:1.08}
  .entrada{margin-top:14px;font-size:17px}
  .llamada{margin-top:20px}
  .llamada .boton-si{width:100%}
  .seccion{padding:36px 0}
  .seccion h2{font-size:28px}
  .seccion .sub{font-size:17px}
  .comparacion{margin-top:20px}
  .comparacion .etiqueta{padding:10px 18px;font-size:12px}
  .apunte p.mano{padding:18px;font-size:20px;line-height:1.5}
  .resultado .cuerpo{padding:16px 18px 18px}
  .pasos h3{font-size:20px}
  .pasos p{font-size:16px}
  .lista-no li{font-size:17px}
  .precio-caja{padding:20px}
  .precio-caja p{font-size:17px}
  .precio-caja .boton-si{width:100%}
  .cierre{padding:56px 16px}
  .cierre h2{font-size:30px}
  footer a{display:inline-block;padding:12px 0}
  footer .legales{gap:6px 20px}
  footer .mas{gap:0 16px}
  .texto p,.texto ul,.lista-si li{font-size:17px}
  .partida{padding:16px 18px}
  .tabla th,.tabla td{padding:12px 14px}
  .plan .cifra strong{font-size:38px}
  .boton-claro{width:100%}
}
/* Las secciones de solo texto van alineadas a la izquierda como el resto, con líneas de lectura cómodas */
.envoltura.texto,.envoltura.estrecha{max-width:1180px}
.envoltura.texto>*,.envoltura.estrecha>*{max-width:760px}