:root{
  --mint:#cbeebd; --mint-dk:#ade0a7; --indigo:#3b2cb9; --pink:#ff72ff;
  --lav:#e2dee7; --sun:#ffe97a;
  --f:"Comfortaa",system-ui,sans-serif; --f2:"Montserrat",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--indigo);background:var(--mint);line-height:1.35;font-size:clamp(1rem,1.1vw,1.25rem)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1300px,100% - 2.5rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h2,h3{font-weight:700}

/* Botón con borde punteado */
.btn{position:relative;display:inline-block;margin:10px;padding:.7em 1.9em;border-radius:999px;background:var(--pink);color:var(--indigo);font-weight:700;font-size:clamp(1rem,1.15vw,1.3rem);text-decoration:none;transition:transform .15s}
.btn::after{content:"";position:absolute;inset:-9px;border:2px dashed var(--pink);border-radius:inherit}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--indigo);outline-offset:12px}
.btn--dark{background:var(--indigo);color:#fff}
.btn--dark::after{border-color:var(--indigo)}
.btn--lg{font-size:clamp(1.15rem,1.5vw,1.7rem);padding:.7em 2.4em}
.cta-block{text-align:center}
.cta-block p{margin-top:.6rem;font-size:.95em}
.cta-block--end{align-self:end}

/* Header */
.top{height:clamp(120px,14vw,270px);display:flex;align-items:center}
.top__in{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.top__logo img{width:clamp(90px,10vw,195px)}

/* Hero */
.hero{background:var(--lav);display:grid;grid-template-columns:52% 1fr;align-items:center;min-height:clamp(260px,31vw,595px);overflow:hidden}
.hero__photo{height:100%}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero__body{text-align:center;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center}
.hero__body img{width:min(430px,70%)}
.hero__body p{margin-top:1.3rem;font-size:clamp(.85rem,1.05vw,1.2rem);line-height:1.5}

/* Pasos */
.pasos{padding-block:clamp(2rem,4vw,5rem) clamp(2rem,4vw,5rem)}
.pasos__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,3rem)}
.pasos h2{font-size:clamp(1.6rem,2.5vw,3rem);font-weight:500}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3.5rem) 2rem}
.step{display:flex;align-items:center;gap:clamp(.5rem,1vw,1.2rem)}
.step img{flex:0 0 auto;width:clamp(150px,18vw,350px)}
.step h3{font-size:clamp(1.25rem,1.9vw,2.2rem);line-height:1.15;margin-bottom:.5rem}
.step p{font-size:clamp(1rem,1.5vw,1.8rem);line-height:1.2;max-width:12em}
.step--final{grid-column:1/-1;justify-content:center}
.step--final .step__num{width:clamp(60px,5.4vw,104px)}
.step--final .step__mascot{width:clamp(220px,30vw,579px)}
.lema{margin-top:1rem;text-align:center;font-family:var(--f2);font-style:italic;font-weight:500;font-size:clamp(1.25rem,2vw,2.4rem);line-height:1.25}

/* ¿Necesitas...? */
.necesitas{position:relative;background:var(--indigo);color:#fff;overflow:hidden;padding-block:clamp(2.5rem,5vw,6rem)}
.necesitas__bg{position:absolute;left:-2%;top:0;width:clamp(260px,33vw,628px);opacity:.9;pointer-events:none}
.necesitas__in{position:relative;text-align:center}
.necesitas h2{font-size:clamp(1.5rem,2.1vw,2.5rem);font-weight:400;text-align:left;margin-bottom:clamp(2rem,6vw,7rem)}
.necesitas__txt{max-width:30em;margin:0 auto 2.5rem;font-size:clamp(1.15rem,2vw,2.4rem);line-height:1.25;font-weight:400}
.necesitas__zona{margin-top:clamp(2rem,5vw,6rem);color:var(--sun);font-size:clamp(1rem,1.4vw,1.7rem)}

/* Tarifas */
.tarifas{padding-block:clamp(2rem,4vw,5rem)}
.tarifas__kicker{font-size:clamp(1rem,1.2vw,1.4rem);font-weight:500}
.tarifas h2{margin-top:clamp(1.5rem,2.5vw,3rem);font-size:clamp(1.5rem,2.1vw,2.5rem);font-weight:500}
.tarifas__intro{max-width:44em;margin:.4rem 0 1.8rem;font-size:clamp(.9rem,1.1vw,1.3rem);line-height:1.25}
table{width:100%;border-collapse:collapse;border-top:3px dashed var(--indigo);border-bottom:3px dashed var(--indigo)}
th,td{text-align:left;padding:1rem 1.3rem;vertical-align:middle;font-size:clamp(.9rem,1.2vw,1.45rem);font-weight:400}
thead th{font-size:clamp(1rem,1.4vw,1.7rem);padding-block:1.6rem 1rem}
tbody tr:nth-child(odd){background:var(--mint-dk)}
tbody th{width:18%}
td strong{font-weight:500}
td.small{font-size:clamp(.78rem,.95vw,1.1rem);line-height:1.3}
.incluye{display:grid;grid-template-columns:1fr auto;gap:2rem;margin-top:1.5rem;padding:0 1.3rem}
.incluye h3{font-size:clamp(1rem,1.3vw,1.6rem);font-weight:500;margin-bottom:1.2rem}
.incluye dl{display:grid;gap:1.4rem;font-size:clamp(.9rem,1.1vw,1.3rem);line-height:1.3}
.incluye dd{margin:0}

/* Cobertura */
.cobertura{background:var(--indigo);color:#fff;padding-block:clamp(2rem,3vw,3.5rem) clamp(4rem,9vw,11rem)}
.cobertura .wrap{padding-inline:1.5rem}
.cobertura h2{font-size:clamp(1.1rem,1.4vw,1.7rem);font-weight:500;margin-bottom:.7rem}
.cobertura p{max-width:50em;font-size:clamp(.9rem,1.1vw,1.3rem);line-height:1.35}

/* Tablet */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__photo{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr}
  .step--final{flex-wrap:wrap}
  .step p{max-width:none}
  .necesitas h2{margin-bottom:2rem}
  .necesitas__bg{opacity:.6}
}
/* Móvil: la tabla pasa a tarjetas */
@media (max-width:700px){
  .top__in{flex-direction:column;gap:.2rem}
  .top{height:auto;padding-block:1rem}
  .pasos__head{flex-direction:column;align-items:flex-start}
  .step{flex-direction:column;text-align:center}
  .step img{width:min(300px,80%)}
  .step--final .step__mascot{width:min(360px,90%)}
  table,thead,tbody,tr,th,td{display:block}
  thead{position:absolute;left:-9999px}
  table{border:0}
  tbody tr{border-top:3px dashed var(--indigo);padding:.5rem 0}
  tbody tr:last-child{border-bottom:3px dashed var(--indigo)}
  tbody th,tbody td{padding:.4rem 1rem;width:auto}
  tbody th{font-size:1.2rem;font-weight:700}
  td::before{content:attr(data-l);display:block;font-size:.8em;font-weight:700;opacity:.75}
  .incluye{grid-template-columns:1fr;padding:0}
  .cta-block--end{justify-self:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}