/* =========================================================
   MATI · Agente Comercial Entel — Landing portabilidad
   Reproduce el mockup "Landing Entel Chile" (lienzo 1366 px)
   Marca: Inter + Roboto · #072FFF · #FF3D00
   ========================================================= */

:root{
  --azul:        #072FFF;
  --azul-hondo:  #0424E8;
  --naranja:     #FF3D00;
  --naranja-osc: #E63500;

  --tinta:       #0B0B0F;
  --tinta-suave: #2B2F3A;
  --gris:        #6B7280;
  --azul-palido: #8498FF;

  --nieve:       #F5F7FD;
  --nieve-2:     #F6F8FD;
  --hielo:       #E3ECFB;
  --linea:       #C9D6FF;

  --shell:       1366px;
  --font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-2:      "Roboto", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  color:var(--tinta);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,picture{ display:block; max-width:100%; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
s{ text-decoration:line-through; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible{ outline:3px solid var(--naranja); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:12px 18px;
}
.skip-link:focus{ left:0; }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:47px;
}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; text-align:center;
  font-family:var(--font);
  transition:background .18s ease, transform .16s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--orange{
  height:51px; padding:0 26px;
  background:var(--naranja); color:#fff;
  border-radius:7px;
  font-size:17px; font-weight:700; letter-spacing:.005em;
  text-transform:uppercase;
  box-shadow:0 10px 22px -12px rgba(255,61,0,.75);
}
.btn--orange:hover{ background:var(--naranja-osc); }
.btn--block{ display:flex; width:100%; }

.btn--white{
  height:46px; padding:0 21px;
  background:#fff; color:var(--azul);
  border-radius:999px;
  font-size:19px; font-weight:700;
}
.btn--white svg{ width:22px; height:22px; }
.btn--white:hover{ background:var(--hielo); }

.btn--ghost{
  height:44px; padding:0 22px;
  background:transparent; color:#fff;
  border:1.6px solid rgba(255,255,255,.7);
  border-radius:999px;
  font-size:15px; font-weight:600;
}
.btn--ghost:hover{ background:rgba(255,255,255,.16); }

.btn__spinner{
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  display:none;
}
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn__spinner{ display:block; animation:giro .7s linear infinite; }
@keyframes giro{ to{ transform:rotate(360deg); } }

/* ---------------- Etiqueta con borde azul ---------------- */
.tag{
  display:inline-flex; align-items:center; gap:9px;
  padding:0 17px; height:44px;
  background:var(--nieve);
  border:1.6px solid var(--azul);
  border-radius:9px;
  color:var(--azul);
  font-size:20px; font-weight:400;
  white-space:nowrap;
}
.tag--sat{ height:51px; font-size:20px; color:var(--tinta); background:#fff; }
.tag--sat svg{ width:26px; height:26px; color:var(--azul); flex:0 0 auto; }
.tag--right{ height:37px; font-size:16px; padding:0 13px; border-width:1.3px; border-radius:6px; }
.tag--right svg{ width:19px; height:19px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:161px;
  padding-bottom:9px;
  overflow:clip;              /* clip, no hidden: hidden convierte la seccion en
                                 contenedor scrolleable y los anclas la dejan trabada */
  isolation:isolate;
}
/* Relleno azul mas alla del lienzo de 1366 px en pantallas anchas */
.hero::after{
  content:""; position:absolute; z-index:-2;
  top:0; height:771px;
  /* solapa 12 px sobre el bloque azul: sin esto se ve la costura donde la
     marca de agua queda recortada contra el borde del lienzo */
  left:calc(50% + 671px); right:0;
  background:var(--azul);
}

/* Bloque azul con esquina achaflanada a 45°, calcado del mockup */
.hero__shape{
  position:absolute; top:0; right:calc(50% - 683px); z-index:-2;
  width:660px; height:771px;   /* medidas del lienzo de 1366 px */
  background:var(--azul);
  overflow:hidden;
  clip-path:polygon(
    60.45% 0%, 57.73% .65%, 56.06% 1.30%, 54.85% 1.95%,
    53.64% 2.59%, 52.73% 3.24%, 51.97% 3.89%,
    0% 48.38%, 0% 100%, 100% 100%, 100% 0%
  );
}
/* Marca de agua retirada: al 2,5 % de opacidad no se percibe, pero su borde
   recortado dibujaba una franja vertical visible sobre el azul. */
.hero__watermark{ display:none; }

/* Logo pequeño arriba a la izquierda, sobre el blanco del hero.
   Va absoluto para no desplazar el resto de la composición. */
.hero__logo{
  position:absolute; z-index:3;
  /* misma referencia que .shell + el sangrado de .hero__copy, para que
     quede a plomo con «Porta Postpago» y el titular a cualquier ancho */
  top:46px; left:calc(max(0px, (100% - 1366px) / 2) + 70px);
  width:124px; height:auto;
}

/* salto de línea que sólo actúa en móvil */
.solo-cel{ display:none; }

/* En escritorio no genera caja: Mati, el polo y el globo se posicionan
   respecto al hero igual que antes. En móvil pasa a ser el panel azul. */
.hero__meet{ display:contents; }

.hero__mati{
  position:absolute; z-index:-1;
  right:calc(50% - 683px + 188px); top:113px;
  width:570px;
  pointer-events:none;
}
.hero__mati img{ width:100%; height:auto; }

/* Logo e) bordado en el polo */
.hero__polo{
  position:absolute; z-index:-1;
  right:calc(50% - 683px + 336px); top:500px;
  width:43px; height:auto;
  pointer-events:none;
}

/* Globo de diálogo */
.bubble{
  position:absolute; z-index:2;
  right:calc(50% - 683px + 17px); top:200px;
  width:275px;
  padding:29px 24px;
  background:#fff;
  border-radius:11px;
  color:#1E2A43;
  font-family:var(--font-2);
  font-size:19px; line-height:24px;
  box-shadow:0 10px 30px -18px rgba(2,22,72,.45);
}
.bubble strong{ font-weight:700; }
.bubble::after{
  content:""; position:absolute;
  left:-15px; top:46px;
  border:16px solid transparent;
  border-right-color:#fff; border-left:0;
  filter:drop-shadow(-3px 0 2px rgba(2,22,72,.05));
}

.hero__grid{ position:relative; }
.hero__copy{ padding-left:23px; max-width:700px; }

.hero__title{
  margin-top:34px; margin-left:7px;
  font-size:51px; font-weight:800; line-height:1;
  letter-spacing:-.012em;
  color:var(--azul);
}
.hero__sub{
  margin-top:6px; margin-left:7px;
  font-family:var(--font-2);
  font-size:34px; font-weight:400; line-height:1.06;
  letter-spacing:-.008em;
  color:#0A0A0A;
}
.hero__sub strong{ font-weight:700; }

.hero__pill{
  display:inline-block;
  height:59px; padding:0 25px; line-height:59px;
  margin-top:10px; margin-left:3px;
  background:var(--azul); color:#fff;
  border-radius:999px;
  font-size:23px; font-weight:400; letter-spacing:-.005em;
  white-space:nowrap;
}
.hero__pill strong{ font-weight:700; }

.hero__before{
  margin-top:14px; margin-left:29px;
  font-family:var(--font-2);
  color:var(--azul-palido);
  font-size:19px; font-weight:700; letter-spacing:.005em;
}

/* ---------------- Tarjeta del formulario ---------------- */
.lead{
  width:428px;
  margin-top:38px; margin-left:3px;
  padding:22px 25px 21px;
  background:linear-gradient(158deg, #084FE0 0%, var(--azul-hondo) 46%, #0031A3 100%);
  border-radius:16px;
  color:#fff;
  box-shadow:0 26px 48px -24px rgba(2,22,72,.6);
}
.lead__intro{
  margin-bottom:12px;
  text-align:center;
  font-size:14px; line-height:18px;
  color:rgba(255,255,255,.96);
}
.lead__lock{ margin-right:2px; }

.field__label{
  display:block; margin-bottom:7px;
  font-size:15px; line-height:19px; font-weight:500;
}
.field__input{
  width:100%; height:42px;
  padding:0 15px;
  background:#fff; color:var(--tinta);
  border:2px solid transparent; border-radius:8px;
  font-size:15px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field__input::placeholder{ color:#9AA6BC; }
.field__input:focus{ outline:none; border-color:var(--naranja); box-shadow:0 0 0 4px rgba(255,61,0,.25); }
.field__input[aria-invalid="true"]{ border-color:#FFC9C9; box-shadow:0 0 0 4px rgba(255,120,120,.25); }

.field__error{
  margin-top:7px;
  font-size:13px; font-weight:500;
  color:#FFD9D2;
}
.field__error--check{ margin-top:3px; }

.check{
  display:flex; align-items:center; gap:11px;
  height:21px; margin-top:14px;
}
.check input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  width:21px; height:21px;
  background:#fff; border:0; border-radius:5px;
  cursor:pointer;
}
.check input:checked{ background:var(--naranja); }
.check input:checked::after{
  content:""; display:block;
  width:5px; height:10px; margin:3px auto 0;
  border:solid #fff; border-width:0 2.4px 2.4px 0;
  transform:rotate(43deg);
}
.check label{ font-size:14px; line-height:21px; cursor:pointer; white-space:nowrap; }

.lead .btn--orange{ margin-top:12px; height:46px; font-size:19px; border-radius:6px; }

.lead__note{
  margin-top:11px;
  text-align:center;
  font-size:14px; line-height:18px;
}
.lead__note strong{ font-weight:700; }
.lead__legal{
  margin-top:5px;
  text-align:center;
  font-size:14px; line-height:18px;
}
.lead__legal a{ text-decoration:underline; text-underline-offset:3px; }

.lead__done{ text-align:center; padding:10px 4px 6px; }
.lead__done-icon{
  width:58px; height:58px; margin:0 auto 14px;
  display:grid; place-content:center;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.55);
  border-radius:50%;
}
.lead__done-icon svg{ width:28px; height:28px; color:#fff; }
.lead__done-title{ font-size:22px; font-weight:700; }
.lead__done-text{ margin:9px 0 18px; font-size:15px; color:rgba(255,255,255,.94); }

/* ---------------- Tarjeta flotante de specs ---------------- */
.specs{
  position:absolute;
  left:510px; top:250px;
  width:206px;
  padding:17px 9px 25px;
  background:var(--nieve-2);
  border:1px solid #E4EAFB;
  border-radius:20px;
  text-align:center;
  box-shadow:0 14px 30px -18px rgba(2,22,72,.35);
}
.specs__big{
  color:var(--azul);
  font-size:22px; line-height:24px; font-weight:700; letter-spacing:-.01em;
}
.specs__small{
  font-family:var(--font-2);
  font-size:18px; font-weight:400; line-height:22px;
  color:#111;
}
.specs__icons{
  display:flex; justify-content:center; align-items:center; gap:6px;
  height:30px; margin-top:8px;
}
.specs__icons svg{ width:30px; height:30px; }
.specs__rule{
  display:block; height:1px; margin:17px 4px 16px;
  background:#B9C8F5;
}

/* =========================================================
   ¿POR QUÉ EL MATI?
   ========================================================= */
.why{ position:relative; }
.why__wrap{ position:relative; }

.why__panel{
  position:relative;
  padding:47px 24px 0;
  background:var(--nieve);
  border-radius:26px;
  min-height:495px;
}
.why__title{
  text-align:center;
  font-size:40px; line-height:44px; font-weight:700; letter-spacing:-.02em;
  color:var(--azul);
}
.why__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:82px;
}
.why__item{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.why__item + .why__item::before{
  content:""; position:absolute; left:0; top:6px; bottom:-6px;
  width:1px; background:#DCE4F5;
}
.why__icon{
  display:grid; place-content:center;
  width:87px; height:87px; border-radius:50%;
  background:var(--hielo); color:var(--azul);
}
.why__icon svg{ width:41px; height:41px; }
.why__item p{
  margin-top:19px;
  font-size:18px; font-weight:700; line-height:1.28;
  color:var(--tinta-suave);
}

.why__panel .tag--sat{
  position:absolute; left:36px; bottom:37px;
}

.why__cta{
  position:absolute; left:479px; bottom:-29px;
  width:312px;
}

/* ---------------- Cupón 50 % ---------------- */
.ticket{
  position:absolute; right:48px; bottom:-109px;
  width:488px; height:250px;
  pointer-events:none;
}
.ticket::before{           /* tarjeta blanca de fondo, girada */
  content:"";
  position:absolute; inset:0;
  background:#fff;
  border-radius:22px;
  transform:rotate(-5.2deg);
  box-shadow:0 18px 40px -26px rgba(2,22,72,.4);
}
.ticket__blue{
  position:absolute; left:8px; top:20px;
  width:352px; height:222px;
  background:var(--azul);
  border-radius:20px 4px 4px 20px;
  transform:rotate(-5.2deg);
  color:#fff;
}
.ticket__pct{
  position:absolute; left:36px; top:22px;
  display:flex; align-items:flex-start;
  font-weight:800; line-height:.86; letter-spacing:-.045em;
}
.ticket__pct span{ font-size:96px; }
.ticket__pct em{ font-size:46px; font-style:normal; margin-top:4px; }
.ticket__dcto{
  position:absolute; left:146px; top:88px;
  font-size:34px; font-weight:800; letter-spacing:-.02em;
}
.ticket__months{
  position:absolute; left:32px; bottom:24px;
  display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 20px 0 12px;
  border:2px solid #fff; border-radius:7px;
  font-size:23px; font-weight:400;
}
.ticket__months svg{ width:30px; height:30px; }
.ticket__e{
  position:absolute; right:40px; top:92px;
  width:86px; height:auto;
  transform:rotate(-5.2deg);
}

/* =========================================================
   BENEFICIOS ENTEL
   ========================================================= */
.perks{ padding-top:149px; }
.perks__title{
  padding-left:30px;
  font-size:32px; line-height:50px; font-weight:400; letter-spacing:-.015em;
  color:#0A0A0A;
}
.perks__title strong{ font-weight:700; }

.perks__grid{
  display:flex; gap:20px;
  margin-top:42px;
  padding-left:9px; padding-right:23px;
}
.perk{
  flex:0 0 377px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:15px;
  min-height:132px;
  padding:20px 24px;
  background:#fff;
  border:1.4px solid var(--linea);
  border-radius:9px;
  box-shadow:0 10px 22px -18px rgba(2,22,72,.35);
}
.perk:nth-child(2){ flex:1 1 auto; }
.perk__logo{ height:32px; width:auto; }
.perk:nth-child(2) .perk__logo{ height:37px; }
.perk:nth-child(3) .perk__logo{ height:42px; }
.perk__text{
  font-family:var(--font-2);
  font-size:19px; font-weight:400; color:#111;
  text-align:center;
}

.perks__cta{
  display:flex; width:312px;
  margin:42px 10px 0 auto;
}

/* =========================================================
   PLAN DESTACADO
   ========================================================= */
.plan{ position:relative; padding-top:87px; padding-bottom:75px; overflow:clip; }

.plan__deco{
  position:absolute; z-index:-1;
  /* sangra por el borde: los trazos se cortan contra el filo, no quedan
     flotando con sus remates a la vista */
  left:-33px; top:234px;
  width:auto; height:495px;
  max-width:none;
}

.plan__wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }

.plan__card{
  width:566px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 26px 56px -28px rgba(2,22,72,.4), 0 0 0 1px rgba(2,22,72,.05);
}
.plan__ribbon{
  height:53px;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul); color:#fff;
  font-size:26px; font-weight:400; letter-spacing:-.01em;
}
.plan__ribbon strong{ font-weight:700; margin-right:.28em; }

.plan__body{ padding:16px 50px 115px; }
.plan__body .tag--right{ margin-left:auto; }

.plan__name{
  margin-top:16px;
  font-size:33px; line-height:38px; font-weight:700; letter-spacing:-.025em;
  color:#0A0A0A;
}
.plan__badges{ display:flex; margin-top:19px; }
.plan__badge{
  display:inline-flex; align-items:center; gap:7px;
  height:29px; padding:0 12px;
  font-size:17px; font-weight:700;
}
.plan__badge svg{ width:20px; height:20px; }
.plan__badge--blue{ background:var(--azul); color:#fff; border-radius:4px 0 0 4px; }
.plan__badge--white{
  background:var(--nieve); color:#111;
  border:1.2px solid var(--azul); border-left:0;
  border-radius:0 4px 4px 0;
  font-weight:400;
}

.plan__price{
  display:flex; align-items:baseline;
  margin-top:10px;
  color:var(--azul); line-height:50px;
}
.plan__amount{ font-size:52px; font-weight:800; letter-spacing:-.035em; }
.plan__per{ font-size:25px; font-weight:700; letter-spacing:-.02em; }
.plan__after{
  margin-top:8px;
  font-family:var(--font-2);
  font-size:19px; line-height:24px; color:#8DA0FF;
}

.plan__includes{
  margin-top:30px;
  font-size:23px; line-height:28px; font-weight:700; color:#0A0A0A;
}
.plan__list{ display:grid; gap:12px; margin-top:14px; }
.plan__list li{ display:flex; align-items:flex-start; gap:14px; }
.plan__list svg{ width:23px; height:23px; margin-top:5px; color:var(--azul); flex:0 0 auto; }
.plan__list span{ font-family:var(--font-2); font-size:21px; line-height:1.28; color:#111; }
.plan__list strong{ font-weight:700; }
.plan__social{ display:flex; gap:7px; margin-top:8px; }
.plan__social svg{ width:29px; height:29px; margin:0; }

.plan__cta{ width:276px; margin-top:-34px; position:relative; z-index:2; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  padding:47px 0 58px;
  background:var(--azul);
  color:#fff;
}
.site-footer__inner{
  display:grid;
  grid-template-columns:584px 1fr;
  align-items:center;
}
.site-footer__brand{ width:305px; padding-left:55px; }
.site-footer__logo{ width:250px; height:auto; }
.site-footer__claim{
  margin-top:12px;
  text-align:right;
  font-size:12px; font-weight:600; letter-spacing:.06em;
  color:#fff;
}
.site-footer__pitch{
  font-size:21px; font-weight:700; letter-spacing:-.01em;
}
.site-footer__cta .btn--white{ margin-top:13px; }
.site-footer__legal{
  display:flex; align-items:flex-start; gap:14px;
  margin-top:26px; margin-left:0;   /* alineado con el titular y el botón */
  font-size:14px; line-height:1.42;
  color:rgba(255,255,255,.92);
}
.site-footer__info{ width:38px; height:38px; flex:0 0 auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1320px){
  .shell{ padding-inline:24px; }
  .ticket{ right:0; }
  .plan__deco{ left:-320px; }
}

@media (max-width:1100px){
  .hero{ padding-top:120px; }
  .hero__shape{ width:56%; height:auto; aspect-ratio:660 / 771; }
  .hero__mati{ right:40px; width:48%; }
  .hero__polo{ display:none; }
  .bubble{ left:auto; right:12px; top:150px; width:250px; font-size:17px; }
  .specs{ position:static; width:auto; max-width:428px; margin:26px 0 0 23px; }
  .why__cta{ position:static; margin:26px auto 0; }
  .ticket{ position:relative; right:auto; bottom:auto; margin:34px auto 0; }
  .why__panel .tag--sat{ position:static; margin:0 auto; display:inline-flex; }
  .why__panel{ padding-bottom:38px; text-align:center; }
  .perks{ padding-top:70px; }
  .perks__cta{ margin-inline:auto; }
  .plan__deco{ display:none; }
  .site-footer__inner{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .site-footer__brand{ padding-left:0; display:inline-block; margin-inline:auto; }
  .site-footer__legal{ justify-content:center; text-align:left; }
}

@media (max-width:820px){
  /* ---- Móvil: orden de embudo, no orden del HTML ----
     1 gancho (etiqueta + titular)  2 oferta (precio)  3 qué incluye
     4 prueba social (Mati)         5 formulario
     La foto pasa a una banda compacta arriba para que el titular y el
     precio entren en la primera pantalla, en vez de comerse el scroll. */
  /* .hero pasa a ser el contenedor flex para poder ordenar TODO junto:
     Mati y el globo son hijos suyos, no de .hero__grid */
  .hero{ display:flex; flex-direction:column; padding:26px 24px 0; }
  .solo-cel{ display:inline; }        /* "El Mejor plan es / con Entel" */
  .hero__logo{
    order:0; position:relative; inset:auto;
    width:104px; margin:0 0 18px;
  }
  .hero::after{ display:none; }
  .hero__watermark{ display:none; }
  .hero__polo{ display:none; }

  /* Sin banda superior: el mensaje entra primero, Mati aparece luego
     en su propio panel azul, pegado al formulario (la cara junto a la
     petición del número refuerza el "te llama una persona"). */
  .hero__shape{ display:none; }

  /* display:contents disuelve la caja de .hero__copy para poder reordenar
     titular, precio, specs, Mati y formulario como items hermanos */
  .hero__grid{ display:contents; }
  .hero__copy{ display:contents; }
  .tag         { order:1; align-self:flex-start; }
  .hero__title { order:2; }
  .hero__sub   { order:3; }
  .hero__pill  { order:4; }
  .hero__before{ order:5; }
  /* el formulario sube: tiene que verse al entrar, sin scroll */
  .lead        { order:6; }
  .specs       { order:7; }
  .hero__title{ margin-left:0; margin-top:20px; }
  .hero__sub{ margin-left:0; }
  .hero__pill{ margin-left:0; }

  /* Panel azul: el saludo a la izquierda y Mati a la derecha, sin huecos
     muertos. Ambos apoyados en la base para que se lea como una escena. */
  .hero__meet{
    order:8; margin-top:26px;
    display:flex; align-items:flex-end; gap:6px;
    padding:0 0 0 20px;
    background:linear-gradient(160deg, var(--azul) 0%, var(--azul-hondo) 100%);
    border-radius:22px;
    overflow:hidden;
  }
  .bubble{
    /* como en entel.pe: el texto va sobre el color, no en una tarjeta
       flotando que deja aire muerto alrededor */
    order:1; align-self:center;
    position:relative; inset:auto; z-index:2;
    flex:1 1 0; width:auto; max-width:none;
    margin:0;
    padding:0;
    background:transparent; color:#fff;
    border-radius:0; box-shadow:none;
    font-size:20px; line-height:27px;
    text-align:center;
  }
  .bubble strong{ color:#fff; }
  .bubble::after{ display:none; }

  .hero__mati{
    order:2;
    position:relative; inset:auto;
    z-index:1;          /* en escritorio es -1 y aquí quedaría tapado por el panel */
    flex:0 0 54%; max-width:245px;
    width:auto; margin:0;
  }
  .hero__mati img{ width:100%; height:auto; display:block; margin-bottom:-1px; }
  .hero__title{ font-size:34px; }
  .hero__sub{ font-size:23px; }
  .hero__pill{
    display:block; height:auto; padding:14px 20px;
    font-size:17px; line-height:24px; white-space:normal;
    text-align:center;
  }
  .hero__before{ margin-left:0; font-size:17px; text-align:center; }
  /* sin esto la etiqueta del checkbox no puede partirse y ensancha toda la pagina */
  .check label{ white-space:normal; }
  .check{ height:auto; align-items:flex-start; }
  .lead{ width:100%; margin-top:26px; }
  .specs{ margin:22px 0 0; max-width:none; width:auto; }
  .specs__icons{ gap:10px; }
  .why__grid{ grid-template-columns:repeat(2, 1fr); gap:34px 0; }
  .why__item:nth-child(3)::before{ display:none; }
  .why__title{ font-size:24px; }
  /* el cupon conserva su maqueta interna en px: se recorta el contenedor para que
     sus 488 px no ensanchen el documento y corten toda la pagina */
  .why__wrap{ overflow:clip; }
  .ticket{
    width:488px; max-width:none; height:180px;
    margin:30px 0 0 50%;
    transform:translateX(-50%) scale(.7);
    transform-origin:top center;
  }
  .perks__grid{ flex-direction:column; padding-right:9px; }
  /* en columna, flex-basis pasa a ser ALTO: sin esto las tarjetas miden
     377 px de alto y quedan casi vacías */
  .perk,.perk:nth-child(2){ flex:0 0 auto; min-height:0; padding:22px 20px; }
  .perks__title{ padding-left:0; font-size:25px; }
  .perks__cta,.why__cta,.plan__cta{ width:100%; max-width:340px; }
  .plan__card{ width:100%; }
  .plan__body{ padding:16px 22px 38px; }
  .plan__amount{ font-size:46px; }
  .plan__list span{ font-size:18px; }
  .site-footer__pitch{ font-size:18px; }
  /* footer móvil: todo alineado a la izquierda */
  .site-footer__inner{ text-align:left; gap:26px; }
  .site-footer__brand{ margin-inline:0; }
  .site-footer__legal{ justify-content:flex-start; margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}