/* Cóbralo — sistema visual de la página de planes
   Marca: carbón #373643 · azul #0059B2 · celeste #3DC3FF · gris #F5F5F7 · blanco */

:root{
  --carbon:#373643; --blue:#0059B2; --blue-dark:#00407F; --sky:#3DC3FF;
  --sky-50:#E8F7FF; --sky-100:#EAF7FF; --sky-200:#BDE8FF;
  --grey-50:#FAFAFC; --grey-100:#F5F5F7; --grey-200:#EFEFF3;
  --line:#E6E6EC; --line-2:#EDEDF1; --line-3:#F3F3F6;
  --ink:#4A4957; --muted:#6F6E7C; --faint:#82818E; --dim:#A9A8B4; --dash:#C3C2CC;
  --r-sm:14px; --r-md:18px; --r-lg:20px; --r-xl:22px; --pill:999px;
  --shell:1180px; --shell-legal:1120px; --pad:clamp(20px,4%,52px);
  --nav-h:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--carbon);
  font-family:Poppins,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:var(--blue); text-decoration:none; transition:color .16s ease}
a:hover{color:var(--blue-dark)}
h1,h2,h3,p{margin:0}
button{font-family:inherit}

.shell{max-width:var(--shell); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.section{padding:clamp(48px,6%,86px) 0}
.section--grey{background:var(--grey-100)}
.section--tight{padding:clamp(40px,5%,72px) 0 clamp(48px,6%,80px)}
[id]{scroll-margin-top:96px}

.kicker{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.h2{margin-top:12px; font-size:clamp(24px,2.8vw,34px); line-height:1.15; font-weight:600; letter-spacing:-.02em; color:var(--carbon); text-wrap:pretty}
.lede{margin-top:14px; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:62ch}

/* ---------- Navegación ---------- */
.nav{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line-2)}
.nav__inner{max-width:var(--shell); margin:0 auto; padding:12px var(--pad); display:flex; align-items:center; gap:20px}
.nav__logo{flex:0 0 auto; display:block; width:clamp(128px,13%,160px); min-width:128px}
.nav__logo img{width:100%; height:auto; display:block}
.nav__right{display:flex; align-items:center; gap:clamp(12px,1.8%,24px); margin-left:auto}
.nav__links{display:flex; align-items:center; gap:clamp(11px,1.7%,22px)}
.nav__links a{font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap}
.nav__links a:hover{color:var(--blue)}
.nav__back{margin-left:auto; font-size:14px; font-weight:500; color:var(--ink)}

.btn{display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px;
  border-radius:var(--pill); background:var(--blue); color:#fff; font-size:13.5px; font-weight:600;
  white-space:nowrap; transition:background .16s ease}
.btn:hover{background:var(--blue-dark); color:#fff}
.btn--block{display:flex; width:100%; height:46px}
.cta-short{display:none}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(44px,6%,80px); padding-bottom:clamp(30px,4%,44px)}
.badge-soft{display:inline-flex; align-items:center; gap:9px; background:var(--grey-100);
  border-radius:var(--pill); padding:7px 16px 7px 12px; margin-bottom:24px; font-size:12.5px; font-weight:500; color:var(--ink)}
.badge-soft i{width:7px; height:7px; border-radius:50%; background:var(--sky); display:block}
.h1{font-size:clamp(30px,4.2vw,52px); line-height:1.08; font-weight:700; letter-spacing:-.02em; max-width:14ch; text-wrap:pretty}
.hero__sub{margin-top:18px; font-size:clamp(15px,1.5vw,19px); line-height:1.5; color:var(--muted); max-width:46ch}
.facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line-2)}
.fact{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--ink)}

.tick{flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--sky-50); color:var(--blue); font-size:10px; font-weight:700}
.tick--lg{width:18px; height:18px; font-size:11px; margin-top:1px}

/* ---------- Tarjetas de plan (carrusel) ---------- */
.plans{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px 2px 26px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; flex:1 1 246px; min-width:246px; scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 22px 24px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.plan:hover{border-color:#BFE4FF; box-shadow:0 22px 46px -30px rgba(55,54,67,.5); transform:translateY(-3px)}
.plan--featured{border:2px solid var(--sky); padding:25px 21px 23px; box-shadow:0 20px 44px -26px rgba(0,89,178,.5)}
.plan--featured:hover{border-color:var(--sky); box-shadow:0 26px 52px -28px rgba(0,89,178,.62)}
.plan__badge{position:absolute; top:-13px; left:21px; background:var(--blue); color:#fff; font-size:10.5px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--pill)}
.plan__name{font-size:19px; font-weight:600; letter-spacing:-.01em}
.plan__profile{margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--faint); min-height:54px}
.plan__price{margin-top:4px; font-size:38px; font-weight:700; color:var(--blue); letter-spacing:-.03em; line-height:1}
.plan__vat{margin-top:4px; font-size:12.5px; color:var(--faint)}
.rule{height:1px; background:var(--grey-200); margin:20px 0}
.plan--featured .rule{background:#D7F0FF}
.benefits{display:flex; flex-direction:column; gap:11px; font-size:13.5px; line-height:1.45; color:var(--ink)}
.benefit{display:flex; gap:9px}
.plan__wa{margin-top:16px; padding-top:15px; border-top:1px dashed var(--line);
  display:flex; gap:9px; align-items:center; font-size:12.5px; line-height:1.4; color:var(--muted)}
.plan__wa i{flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--sky); display:block}
.plan__wa b{font-weight:600; color:var(--carbon)}
.plan__cta{margin-top:auto; padding-top:22px}
.plan__demo{display:block; margin-top:12px; text-align:center; font-size:13px; font-weight:500}

/* ---------- Envíos automáticos ---------- */
.sendicons{display:flex; align-items:center; gap:14px; margin-top:20px}
.sendicon{width:54px; height:54px; border-radius:50%; background:var(--sky-50); display:flex; align-items:center; justify-content:center}
.sendicons span.plus{font-size:22px; font-weight:300; color:var(--dash); line-height:1}
.sendgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(144px,1fr)); gap:14px; margin-top:32px}
.sendcard{background:var(--grey-100); border-radius:var(--r-md); padding:22px 20px}
.sendcard--featured{background:var(--sky-100); border:1px solid var(--sky-200); padding:21px 19px}
.sendcard__plan{font-size:13px; font-weight:600; color:var(--faint)}
.sendcard__n{margin-top:10px; font-size:32px; font-weight:700; color:var(--blue); letter-spacing:-.03em; line-height:1}
.sendcard__label{margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--muted)}

/* ---------- Comparativa ---------- */
.cmp{margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden}
.cmp__scroll{overflow-x:auto}
.cmp__table{border-collapse:collapse; width:100%; min-width:900px; text-align:left}
.cmp__table th, .cmp__table td{padding:13px 6px; font-weight:400; vertical-align:middle}
.cmp__table thead th{padding:20px 6px 14px; text-align:center; font-size:13.5px; font-weight:600; color:var(--carbon); border-bottom:1px solid var(--grey-200)}
.cmp__table thead th:first-child{width:34%; padding-left:22px; text-align:left; font-size:12px; font-weight:600; color:var(--dim); vertical-align:bottom}
.cmp__table thead th span{display:block; margin-top:3px; font-size:13px; font-weight:600; color:var(--blue)}
.cmp__table tbody th{padding-left:22px; padding-right:14px; font-size:13.5px; line-height:1.4; color:var(--ink)}
.cmp__table tbody td{text-align:center; font-size:13px; line-height:1.35; font-weight:500; color:var(--ink)}
.cmp__table tbody tr{border-bottom:1px solid var(--line-3)}
.cmp__group th{padding:18px 22px 8px !important; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); background:var(--grey-50);
  border-top:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200)}
.cmp__table .yes{color:var(--blue); font-weight:600}
.cmp__table .no{color:var(--dash)}
.cmp__table th:last-child, .cmp__table td:last-child{background:rgba(61,195,255,.09)}
.cmp__group th:last-child{background:var(--grey-50)}
.cmp__table td:last-child{padding-right:14px}

.cmp-mobile{display:none; margin-top:26px}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:14px}
.chip{flex:0 0 auto; border:1px solid #E0DFE7; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
  padding:9px 15px; border-radius:var(--pill); cursor:pointer; white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.planpanel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.planpanel__head{padding:18px 20px; border-bottom:1px solid var(--grey-200)}
.planpanel__name{font-size:17px; font-weight:600}
.planpanel__price{margin-top:2px; font-size:14px; font-weight:600; color:var(--blue)}
.planpanel__group{padding:16px 20px 7px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); background:var(--grey-50); border-top:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200)}
.planpanel__row{display:flex; gap:14px; justify-content:space-between; align-items:baseline; padding:12px 20px; border-bottom:1px solid var(--line-3)}
.planpanel__row dt{font-size:13.5px; line-height:1.4; color:var(--ink)}
.planpanel__row dd{margin:0; font-size:13px; line-height:1.4; font-weight:600; text-align:right; flex:0 0 auto; max-width:52%}
.planpanel__row dd.yes{color:var(--blue)} .planpanel__row dd.no{color:var(--dash)} .planpanel__row dd.val{color:var(--ink)}

/* ---------- Add-ons ---------- */
.addons{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:30px}
.addon{background:var(--grey-100); border-radius:var(--r-lg); padding:24px 22px; display:flex; flex-direction:column; transition:background .18s ease}
.addon:hover{background:var(--grey-200)}
.addon--excl{background:var(--sky-100); border:1px solid var(--sky-200)}
.addon--excl:hover{background:var(--sky-100)}
.addon__name{font-size:16.5px; font-weight:600}
.addon__price{margin-top:14px; font-size:28px; font-weight:700; color:var(--blue); letter-spacing:-.03em; line-height:1}
.addon__vat{margin-top:4px; font-size:12.5px; color:var(--faint)}
.addon__where{margin-top:auto; padding-top:18px; font-size:12.5px; line-height:1.5; color:var(--muted)}
.pill{align-self:flex-start; margin-top:10px; background:var(--blue); color:#fff; font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--pill)}
.pill--dark{background:var(--carbon); margin-top:0}
.oneoff{margin-top:20px; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  display:flex; flex-wrap:wrap; gap:20px 36px; align-items:center; justify-content:space-between}
.oneoff__main{flex:1 1 380px}
.oneoff__head{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.oneoff__name{font-size:16.5px; font-weight:600}
.oneoff__text{margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:62ch}
.oneoff__price{font-size:28px; font-weight:700; color:var(--blue); letter-spacing:-.03em; line-height:1}

/* ---------- Aliados contables ---------- */
.allies{display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:16px; margin-top:32px}
.ally{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; display:flex; flex-direction:column;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.ally:hover{border-color:#BFE4FF; box-shadow:0 22px 46px -30px rgba(55,54,67,.45); transform:translateY(-2px)}
.ally__logo{height:136px; background:#fff; border-bottom:1px solid var(--line-3); display:flex; align-items:center; justify-content:center; padding:20px}
.ally__logo img{max-height:100%; max-width:100%; object-fit:contain; display:block; border-radius:10px}
.ally__body{padding:20px 22px 22px}
.ally__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ally__name{font-size:17px; font-weight:600; letter-spacing:-.01em}
.ally__tag{background:var(--sky-50); color:var(--blue); font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 10px; border-radius:var(--pill)}
.ally__spec{margin-top:9px; font-size:13.5px; line-height:1.55; color:var(--muted)}
.ally__link{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:13px; font-weight:500; color:var(--blue)}
.ally__link:hover{color:var(--blue-dark)}
.allies-cta{margin-top:22px; background:var(--grey-100); border-radius:var(--r-lg); padding:26px 24px;
  display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between}
.allies-cta__main{flex:1 1 360px}
.allies-cta__title{font-size:16.5px; font-weight:600}
.allies-cta__text{margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:58ch}
.btn--wide{height:46px; padding:0 24px}

/* ---------- Confianza ---------- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,4%,48px)}
.trust h3{margin-top:16px; font-size:17px; line-height:1.4; font-weight:600; letter-spacing:-.01em}

/* ---------- Preguntas frecuentes ---------- */
.faq{max-width:840px; margin:0 auto}
.faq__list{border-top:1px solid var(--line)}
.faq__q{width:100%; display:flex; gap:18px; align-items:baseline; justify-content:space-between; padding:20px 0;
  background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; transition:opacity .16s ease}
.faq__q:hover{opacity:.62}
.faq__q span{font-size:16px; line-height:1.4; font-weight:500; color:var(--carbon)}
.faq__sign{flex:0 0 auto; font-size:20px; font-weight:400; color:var(--blue); line-height:1}
.faq__a{padding:16px 60px 22px 0; font-size:14.5px; line-height:1.6; color:var(--muted); border-bottom:1px solid var(--line)}
.faq__a[hidden]{display:none}

/* ---------- Pie ---------- */
.footer{background:var(--carbon); padding:clamp(44px,5.5%,72px) 0 clamp(26px,3%,36px)}
.footer__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:36px 40px}
.footer__logo{width:188px; height:auto; display:block}
.footer__title{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sky)}
.footer__lines{margin-top:14px; display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.5; color:#C7C6D2}
.footer__links{margin-top:14px; display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.footer__links a{font-size:13.5px; font-weight:500; color:#C7C6D2}
.footer__links a:hover{color:var(--sky)}
.footer__bottom{margin-top:clamp(32px,4%,48px); padding-top:24px; border-top:1px solid #4A4957;
  display:flex; flex-wrap:wrap; gap:10px 32px; align-items:center; justify-content:space-between; font-size:13px; color:#9C9BAA}
.footer--slim{padding:clamp(36px,4.5%,56px) 0}
.footer--slim .footer__row{display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between}
.footer--slim .footer__row img{width:170px; height:auto; display:block}
.footer--slim .footer__row nav{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; font-size:13.5px; font-weight:500}
.footer--slim .footer__row nav a{color:#C7C6D2}
.footer--slim .footer__row nav a:hover{color:var(--sky)}
.footer--slim .footer__row nav span{font-weight:400; color:#9C9BAA; font-size:13px}

/* ---------- Páginas legales ---------- */
.legal-head{max-width:var(--shell-legal); margin:0 auto; padding:clamp(44px,6%,76px) var(--pad) clamp(28px,3%,40px)}
.legal-head .h1{margin-top:14px; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.025em; max-width:18ch}
.legal-head p{margin-top:16px; font-size:16px; line-height:1.6; color:var(--muted); max-width:62ch}
.legal-meta{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-2); font-size:13px; color:var(--faint)}
.legal-body{max-width:var(--shell-legal); margin:0 auto; padding:0 var(--pad) clamp(56px,7%,96px);
  display:flex; flex-wrap:wrap; gap:clamp(28px,4%,56px); align-items:flex-start}
.legal-index{flex:1 1 210px; max-width:250px; position:sticky; top:92px}
.legal-index__title{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:14px}
.legal-index ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.legal-index a{font-size:13.5px; line-height:1.4; font-weight:500; color:var(--ink)}
.legal-index a:hover{color:var(--blue)}
.legal-text{flex:4 1 520px; min-width:0; max-width:720px}
.legal-text h2{margin-top:52px; font-size:23px; line-height:1.3; font-weight:600; letter-spacing:-.015em}
.legal-text h2:first-child{margin-top:0}
.legal-text h3{margin-top:24px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.legal-text p{margin-top:14px; font-size:15px; line-height:1.75; color:var(--ink)}
.legal-text h2 + p{margin-top:16px}
.legal-text p b{font-weight:600; color:var(--carbon)}
.legal-note{margin-top:56px; padding:24px 26px; background:var(--grey-100); border-radius:var(--r-lg); font-size:15px; line-height:1.7; color:var(--ink)}
.dtable{margin-top:20px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.dtable__scroll{overflow-x:auto}
.dtable table{border-collapse:collapse; width:100%; text-align:left}
.dtable thead th{padding:14px 12px; background:var(--grey-50); border-bottom:1px solid var(--grey-200);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.dtable thead th:first-child, .dtable tbody th{padding-left:20px}
.dtable tbody th{padding:13px 12px 13px 20px; font-size:13.5px; line-height:1.45; font-weight:500; color:var(--carbon); text-align:left}
.dtable tbody td{padding:13px 12px; font-size:13.5px; line-height:1.45; color:var(--ink)}
.dtable tbody tr{border-bottom:1px solid var(--line-3)}
.dtable tbody tr:last-child{border-bottom:0}
.dtable .price{font-weight:600; color:var(--blue)}
.dtable .no{color:var(--dash)}
.dtable .code{color:var(--faint)}
.steps{margin-top:20px; display:flex; flex-direction:column; gap:12px}
.step{border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 20px}
.step__head{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline; justify-content:space-between}
.step__name{font-size:15px; font-weight:600}
.step__when{font-size:12.5px; font-weight:500; color:var(--blue)}
.step__text{margin-top:7px; font-size:14px; line-height:1.6; color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:890px){
  .nav__links{display:none}
}
@media (max-width:780px){
  :root{--nav-h:64px}
  .cta-long{display:none}
  .cta-short{display:inline}
  .cmp{display:none}
  .cmp-mobile{display:block}
  .faq__a{padding-right:0}
  .legal-index{position:static; max-width:none; flex-basis:100%}
  .legal-index ol{flex-direction:row; flex-wrap:wrap; gap:8px 18px}
}
@media (max-width:480px){
  .plan{flex:0 0 84%; min-width:84%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}