/* ===== PLAFI — estilos del sitio · v1 jul-2026 ===== */
:root{
  --navy:#0B1F36; --teal:#0FC0AD; --oro:#D9A441; --bg:#F2F5F6; --marfil:#FBFAF7;
  --line:#E3E9EC; --linec:#EDE8DF; --txt:#0B1F36; --txt2:#5A6B7A; --corazon:#D6455B; --morado:#7A3E9D;
}
*{box-sizing:border-box; margin:0; padding:0; font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
html{scroll-behavior:smooth;}
body{background:#fff; color:var(--txt);}
img{max-width:100%;}
a{color:inherit;}
.serif{font-family:'Lora',serif;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}

/* NAV */
nav{position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:50;}
.navin{display:flex; align-items:center; gap:24px; padding:10px 0;}
.navin .logo img{height:48px; display:block;}
.navlinks{display:flex; gap:22px; align-items:center;}
.navlinks a{font-size:13.5px; color:var(--txt2); text-decoration:none; font-weight:600;}
.navlinks a.on{color:var(--navy); border-bottom:2px solid var(--teal); padding-bottom:3px;}
.navcta{margin-left:auto; background:var(--teal); color:#fff; font-weight:800; font-size:13px; padding:10px 18px; border-radius:24px; text-decoration:none; white-space:nowrap;}
.navcta.morado{background:var(--morado);}
.burger{display:none; margin-left:auto; background:none; border:none; font-size:26px; color:var(--navy); cursor:pointer; padding:4px 10px;}

/* HERO fotográfico */
.heroF{position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden; color:#fff; background:var(--navy);}
.heroF img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.heroF .veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,31,54,.94) 0%, rgba(11,31,54,.78) 40%, rgba(11,31,54,.22) 75%, rgba(11,31,54,.08) 100%);}
.heroF .in{position:relative; z-index:2; padding:64px 0; max-width:560px;}
.heroF.chica{min-height:400px;}
.slogan{font-size:50px; font-weight:800; line-height:1.1; letter-spacing:-.5px; text-shadow:0 2px 18px rgba(11,31,54,.45);}
.slogan .dot{color:var(--teal);}
.h1f{font-size:34px; font-weight:800; line-height:1.18; letter-spacing:-.4px; text-shadow:0 2px 16px rgba(11,31,54,.5);}
.hsub{font-size:16.5px; color:#DDE8EE; line-height:1.6; margin:16px 0 24px; text-shadow:0 1px 10px rgba(11,31,54,.5);}
.cta{display:inline-block; background:var(--teal); color:#fff; font-weight:800; font-size:15.5px; padding:15px 30px; border-radius:28px; text-decoration:none;}
.cta.morado{background:var(--morado);}
.free{font-size:13px; font-weight:700; color:var(--teal); margin-top:12px;}
.trust{font-size:11.5px; color:#B9CBD6; margin-top:20px;}

/* STAT */
.stat{background:var(--bg); padding:32px 0; text-align:center;}
.stat b{font-size:26px; color:var(--navy); display:block; line-height:1.3;}
.stat p{font-size:14px; color:var(--txt2); max-width:640px; margin:8px auto 0; line-height:1.6;}
.stat small{font-size:10.5px; color:#9AA7B1; display:block; margin-top:8px;}

/* SECCIONES */
section{padding:56px 0;}
.k{font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--teal);}
.k.morado{color:var(--morado);}
h2{font-size:29px; font-weight:800; line-height:1.22; margin:10px 0 8px; letter-spacing:-.3px;}
h3{font-size:20px; font-weight:800; margin-bottom:6px;}
.lead{font-size:15px; color:var(--txt2); line-height:1.65; max-width:600px;}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center;}
.g3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:28px;}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;}
.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;}
.card h4{font-size:15.5px; margin-bottom:6px;}
.card p{font-size:13px; color:var(--txt2); line-height:1.55;}
.n{width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.ben{display:flex; gap:13px; align-items:flex-start; margin-bottom:16px;}
.ben .ic{width:42px; height:42px; border-radius:12px; background:#F0FBF9; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ben .ic.oro{background:#FBF6EA;}
.ben h5{font-size:14.5px;} .ben p{font-size:12.5px; color:var(--txt2); line-height:1.5;}
svg{display:block;}
.foto{border-radius:18px; overflow:hidden;}
.foto img{width:100%; height:100%; object-fit:cover; display:block;}
.calidasec{background:var(--marfil); border-top:1px solid var(--linec); border-bottom:1px solid var(--linec);}
.calidasec .card{border-color:var(--linec);}
.logo-c{height:76px; margin-bottom:14px; margin-left:-12px;}

/* PALABRAS / bloques navy */
.palabras{background:var(--navy); color:#fff; text-align:center; padding:76px 0;}
.palabras .serif{font-size:30px; line-height:1.35; max-width:680px; margin:0 auto; font-style:italic;}
.palabras .who{font-size:13px; color:#AEC4CF; margin-top:18px;}
.palabras .corazon{margin:0 auto 22px;}
.comp{background:var(--bg); border-radius:20px; padding:34px; text-align:center;}
.comp .serif{font-size:19px; line-height:1.55; max-width:720px; margin:8px auto;}

/* PILARES */
.pilar{border:1px solid var(--linec); border-radius:16px; padding:18px; background:#fff;}
.pilar h4{font-size:14px; margin:10px 0 4px;}
.pilar p{font-size:12px; color:var(--txt2); line-height:1.5;}
.pilar.destacado{grid-column:span 2; background:linear-gradient(135deg,#FFF,#FBF3F1); border-color:#F0DBD7;}

/* PRECIOS */
.pill{display:inline-block; font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:12px; letter-spacing:.5px;}
.pill.free{background:#E8F0F2; color:var(--navy);}
.pill.mem{background:var(--teal); color:#fff;}
.pricegrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:0 auto;}
.price-card{border:1.5px solid var(--line); border-radius:20px; padding:28px; background:#fff;}
.price-card.dest{border-color:var(--teal); box-shadow:0 8px 30px rgba(15,192,173,.12); position:relative;}
.price-card .tag{position:absolute; top:-12px; left:26px; background:var(--teal); color:#fff; font-size:11px; font-weight:800; padding:4px 14px; border-radius:12px; letter-spacing:.8px;}
.price{font-size:36px; font-weight:800; margin:8px 0 2px;}
.price small{font-size:14px; color:var(--txt2); font-weight:600;}
.tach{text-decoration:line-through; color:#9AA7B1; font-size:20px; font-weight:700; margin-right:8px;}
.price-card ul{list-style:none; margin-top:16px;}
.price-card li{font-size:13px; color:var(--txt2); padding:6px 0; line-height:1.5;}
.price-card li b{color:var(--txt);}
.check{color:var(--teal); font-weight:800;}
.faq td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px;}
.faq{width:100%; border-collapse:collapse; margin-top:24px;}

/* FORMULARIO */
.formcard{max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px;}
.formcard label{display:block; font-size:13px; font-weight:700; margin:14px 0 6px;}
.formcard input{width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:15px;}
.formcard input:focus{outline:none; border-color:var(--teal);}
.formcard button{width:100%; margin-top:20px; background:var(--teal); color:#fff; font-weight:800; font-size:16px; padding:15px; border:none; border-radius:28px; cursor:pointer;}
.formnote{font-size:11px; color:var(--txt2); margin-top:12px; line-height:1.5; text-align:center;}
.hp{position:absolute; left:-5000px;}

/* FOOTER */
footer{background:var(--navy); color:#8FA6B5; padding:40px 0 28px; font-size:12px;}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:24px;}
footer img{height:52px; margin-bottom:12px;}
footer h6{color:#fff; font-size:12.5px; margin-bottom:8px;}
footer a{display:block; color:#8FA6B5; text-decoration:none; margin:5px 0;}
.legal{border-top:1px solid rgba(255,255,255,.12); padding-top:16px; font-size:10.5px; line-height:1.6;}

/* PÁGINA LEGAL */
.legalpage{max-width:760px; margin:0 auto; padding:56px 24px; font-size:14px; line-height:1.7; color:var(--txt2);}
.legalpage h1{font-size:28px; color:var(--txt); margin-bottom:18px;}
.legalpage h2{font-size:18px; color:var(--txt); margin:26px 0 8px;}

/* BADGES gratis/membresía — etiqueta propia arriba del título (nunca empalma) */
.badge{display:inline-block; font-size:10px; font-weight:800; padding:3px 10px; border-radius:10px; letter-spacing:.6px; margin-bottom:8px;}
.badge.gratis{background:#E6F9F5; color:#0A8A7B;}
.badge.mem{background:var(--teal); color:#fff;}
.badge.mixto{background:#FFF6E3; color:#B8860B;}
.card{position:relative;}

/* TEASE de oportunidad */
.tease{border:1.5px solid var(--line); border-radius:16px; padding:22px; background:#fff;}
.tease .monto{font-size:30px; font-weight:800; color:var(--navy);}
.tease .row{display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:14px; margin-top:14px; flex-wrap:wrap;}
.lock{font-size:12.5px; color:var(--txt2);}
.minicta{background:var(--teal); color:#fff; font-weight:800; font-size:12.5px; padding:9px 16px; border-radius:20px; white-space:nowrap; text-decoration:none;}

/* CINTA de lanzamiento */
.cinta{text-align:center; margin:6px 0 26px;}
.cinta > div{display:inline-block; background:#FFF6E3; border:1.5px solid var(--oro); border-radius:30px; padding:12px 28px;}
.cinta b{font-size:15px; color:var(--navy);}
.cinta span{font-size:13px; color:#8a6d2a;}

/* COMPARADOR completo */
details.compara{max-width:920px; margin:26px auto 0;}
details.compara summary{cursor:pointer; text-align:center; list-style:none; background:var(--navy); color:#fff; font-weight:800; font-size:14px; padding:14px 26px; border-radius:28px; display:inline-block; margin:0 auto;}
details.compara{text-align:center;}
details.compara[open] summary{background:var(--txt2);}
details.compara table{text-align:left;}
.tcomp{width:100%; border-collapse:collapse; margin-top:22px; font-size:13px;}
.tcomp th{padding:12px 14px; text-align:left; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--txt2); border-bottom:2px solid var(--navy);}
.tcomp th.c, .tcomp td.c{text-align:center; width:140px;}
.tcomp td{padding:10px 14px; border-bottom:1px solid var(--line); line-height:1.45;}
.tcomp td.cat{background:var(--bg); font-weight:800; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--navy);}
.si{color:#0A8A7B; font-weight:800;}
.no{color:#C4CDD3; font-weight:800;}
.nota{font-size:11px; color:var(--txt2); display:block; font-weight:400;}

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .g2,.g3,.pricegrid{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr 1fr;}
  .pilar.destacado{grid-column:span 2;}
  .heroF{min-height:480px;}
  .heroF .veil{background:linear-gradient(180deg, rgba(11,31,54,.9) 0%, rgba(11,31,54,.65) 60%, rgba(11,31,54,.35) 100%);}
  .slogan{font-size:38px;}
  .h1f{font-size:27px;}
  h2{font-size:24px;}
  section{padding:44px 0;}
  .navlinks{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:16px 24px; gap:14px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(11,31,54,.08);}
  .navlinks.open{display:flex;}
  .burger{display:block;}
  .navcta{margin-left:0;}
  .navin{gap:12px;}
  .navin .logo img{height:40px;}
  .foto{max-height:320px;}
}
@media (max-width:480px){
  .slogan{font-size:32px;}
  .stat b{font-size:20px;}
  .g4{grid-template-columns:1fr;}
  .pilar.destacado{grid-column:span 1;}
  .palabras .serif{font-size:23px;}
}