/* ============================================================
   NETLIFE LANDING · sistema de diseño
   ============================================================ */

/* ---- Fuentes de marca (comerciales). Deja los archivos en assets/fonts/ ---- */
/* ITC Avant Garde Gothic — texto general */
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-Bk.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-Bk.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-BkObl.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-BkObl.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-Md.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-Md.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-MdObl.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-MdObl.woff") format("woff");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-Demi.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-Demi.woff") format("woff");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-DemiObl.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-DemiObl.woff") format("woff");
  font-weight: 600 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-Bold.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-Bold.woff") format("woff");
  font-weight: 800 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../assets/fonts/itc/ITCAvantGardeStd-BoldObl.woff2") format("woff2"),
       url("../assets/fonts/itc/ITCAvantGardeStd-BoldObl.woff") format("woff");
  font-weight: 800 900; font-style: italic; font-display: swap;
}
/* Muller Medium — textos legales.
   PENDIENTE: solo llegaron Thin y ExtraBold en DEMO (no aptos por licencia).
   Mientras tanto se usa el fallback "Mulish". Al recibir el Muller Medium real
   (.woff2), descomenta este bloque y el stack lo tomará automáticamente. */
/*
@font-face {
  font-family: "Muller";
  src: url("../assets/fonts/muller/Muller-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

:root {
  --orange-1: #ff8a00;
  --orange-2: #ff5a00;
  --orange-3: #e63600;
  --orange-deep: #c21f00;
  --card-1: #ff8410;
  --card-2: #ff5600;
  --black: #0b0b0d;
  --white: #ffffff;
  --ink: #1a1a1a;
  --radius: 22px;
  --shadow: 0 18px 45px rgba(0, 0, 0, .35);
  /* Texto general: ITC Avant Garde Gothic (fallback Jost) */
  --font: "ITC Avant Garde Gothic", "Jost", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Precios promo: Exo 2 */
  --font-price: "Exo 2", "Jost", var(--font);
  /* Textos legales: Muller Medium (fallback Mulish) */
  --font-legal: "Muller", "Mulish", system-ui, sans-serif;
  --font-impact: "Anton", var(--font);
  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--white);
  background: #fff;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Placeholder visible cuando falta un insumo gráfico */
img.is-missing {
  min-width: 60px;
  min-height: 40px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 10px, rgba(255,255,255,.05) 10px 20px);
  border: 1px dashed rgba(255,255,255,.6);
  border-radius: 8px;
  position: relative;
}
img.is-missing::after {
  content: attr(alt);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
  text-align: center;
  padding: 2px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: #ff5a00 url("../assets/img/background-hero.webp") no-repeat center bottom;
  background-size: cover;
}
.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 24px 40px;
  display: grid;
  grid-template-columns: 0.9fr 1.15fr 1fr;
  grid-template-areas:
    "title  title  right"
    "mascot center right";
  gap: 14px 18px;
  align-items: end;
}

/* Título superior: abarca desde la izquierda hasta el formulario */
.hero__title {
  grid-area: title;
  align-self: center;
  text-align: center;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  letter-spacing: .3px;
  padding: 10px 0;
}

/* Mascota */
.hero__mascot { grid-area: mascot; align-self: end; }

/* Centro */
.hero__center { grid-area: center; text-align: center; padding-top: 6px; }
.hero__logo { height: 46px; margin: 0 auto 4px; width: auto; }
.hero__disclaimer {
  font-family: var(--font-legal);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  margin: 0 0 10px;
}
.planhome-img { width: 100%; max-width: 460px; margin: 8px auto 0; }

/* Botón WhatsApp */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
  padding: 8px 22px 8px 12px;
  border-radius: 40px;
  box-shadow: var(--shadow);
  margin: 6px 0 18px;
}
.wa-btn__icon { width: 30px; height: 30px; color: #25d366; flex: none; }

/* Caja "Quiero conocer los planes" */
.call-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: 40px;
  border: 2px solid var(--orange-1);
  box-shadow: var(--shadow);
  margin: -6px auto 18px;
  width: fit-content;
  max-width: 320px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.call-box__icon { width: 18px; height: 18px; color: var(--orange-1); flex: none; transition: color .15s ease; }
.call-box:hover {
  background: linear-gradient(180deg, var(--orange-1), var(--orange-2));
  color: #111;
  transform: scale(1.03);
}
.call-box:hover .call-box__icon { color: #111; }

/* Plan Home */
.planhome { color: #fff; }
.planhome__label {
  display: inline-block;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 3px;
  font-size: 14px;
  margin-bottom: -6px;
}
.planhome__old { line-height: 1; }
.planhome__old .strike {
  font-family: var(--font-impact);
  font-size: clamp(48px, 6vw, 78px);
  position: relative;
  color: #2a0d00;
  -webkit-text-stroke: 1px rgba(0,0,0,.25);
}
.planhome__old .strike::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; top: 52%;
  height: 6px;
  background: #ffd400;
  transform: rotate(-8deg);
  box-shadow: 0 0 8px rgba(255,212,0,.8);
}
.planhome__old small { font-weight: 800; font-size: 16px; vertical-align: super; }
.planhome__specs-top {
  display: flex; justify-content: center; gap: 26px;
  font-size: 10px; margin: 4px 0 8px;
}
.planhome__specs-top b { display: block; font-size: 9px; letter-spacing: .5px; }
.planhome__recibe {
  display: inline-block; background: #111; color: #fff;
  font-weight: 800; font-style: italic; font-size: 13px;
  padding: 3px 16px; border-radius: 6px; letter-spacing: 1px;
}
.planhome__big {
  font-family: var(--font-impact);
  font-size: clamp(80px, 11vw, 150px);
  line-height: .85;
  color: #1b0a02;
  text-shadow: 0 3px 0 rgba(255,255,255,.25), 0 8px 14px rgba(0,0,0,.35);
  position: relative;
  margin: 4px 0;
}
.planhome__big-unit {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  vertical-align: top;
  display: inline-block;
  line-height: 1.05;
  text-shadow: none;
  margin-left: 4px;
}
.planhome__specs-bottom p { font-size: 10px; font-weight: 600; line-height: 1.3; }

/* Columna derecha */
.hero__right { grid-area: right; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.precio-img { width: 100%; max-width: 400px; margin: 0 auto; }

/* Formulario */
.lead-form {
  background: url("../assets/img/background-tenemos-plan.webp") no-repeat center center;
  background-size: 100% 100%;
  border-radius: 26px;
  padding: 34px 40px 40px;
}
.lead-form__title { font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; text-align: center; }
.lead-form__title strong { color: #fff; }
.lead-form__sub { font-size: 11px; color: #cfcfcf; margin: 6px 0 12px; text-align: center; }
.lead-form__input {
  width: 100%;
  background: #2b2b2e;
  border: 1px solid #3a3a3d;
  border-radius: 8px;
  padding: 11px 14px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
}
.lead-form__input::placeholder { color: #8a8a8d; }
.lead-form__check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 10px; color: #d0d0d0; margin-bottom: 12px; cursor: pointer;
}
.lead-form__check input {
  margin-top: 1px;
  accent-color: var(--orange-1);
  flex: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.lead-form__submit {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--orange-1), var(--orange-2));
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.lead-form__submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Caja de precio */
.promo-box {
  background: linear-gradient(180deg, #1c1c1e, #050506);
  border-radius: 26px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.promo-box__label { font-weight: 800; letter-spacing: 2px; font-size: 15px; }
.promo-box__price {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 2px; margin: 2px 0;
}
.promo-box__currency { font-size: 22px; font-weight: 800; margin-top: 10px; }
.promo-box__int { font-family: var(--font-impact); font-size: 74px; line-height: .9; }
.promo-box__dec { font-family: var(--font-impact); font-size: 40px; margin-top: 6px; }
.promo-box__iva { font-size: 13px; font-weight: 800; text-align: left; margin-top: 12px; line-height: 1; }
.promo-box__note { font-size: 10px; color: #d0d0d0; margin-bottom: 12px; }
.promo-box__note b { color: #fff; font-size: 12px; }
.promo-box__includes {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; flex-wrap: wrap;
}
.promo-box__includes > span { font-size: 11px; font-weight: 800; }
.promo-box__includes img { height: 26px; width: auto; }
.badge21 { height: 40px !important; }

/* ============================================================
   PLANES Y PROMOCIONES
   ============================================================ */
.plans { background: #fff; padding: 46px 24px 40px; }
.section-title {
  text-align: center;
  color: #111;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 1px;
  margin-bottom: 34px;
}
.plans__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.plan-card {
  background: linear-gradient(160deg, var(--card-1) 0%, var(--card-2) 60%, #f04e00 100%);
  border-radius: var(--radius);
  padding: 24px 20px 28px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.plan-card__name {
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.plan-card__old { line-height: 1; }
.plan-card__old .strike {
  font-family: var(--font-impact);
  font-size: 54px;
  color: #2a0d00;
  position: relative;
  display: inline-block;
}
.plan-card__old .strike::after {
  content: "";
  position: absolute; left: -8%; right: -8%; top: 50%;
  height: 5px; background: #ffd400; transform: rotate(-10deg);
}
.plan-card__old small { font-weight: 800; font-size: 13px; vertical-align: super; margin-left: 2px; }
.plan-card__old .old-img { height: auto; max-height: 100px; width: auto; margin: 0 auto; }
.plan-card__minmax { font-size: 9px; font-weight: 700; letter-spacing: .3px; margin: 2px 0 8px; }
.plan-card__recibe {
  display: inline-block; font-weight: 800; font-style: italic;
  font-size: 12px; letter-spacing: 1px; margin: 12px 0 10px;
}
.plan-card__big {
  font-family: var(--font-impact);
  font-size: 76px;
  line-height: .82;
  color: #1b0a02;
  text-shadow: 0 2px 0 rgba(255,255,255,.2), 0 6px 12px rgba(0,0,0,.35);
  margin: 6px 0 2px;
}
.plan-card__big span {
  font-family: var(--font);
  font-size: 12px; font-weight: 800; color: #fff;
  vertical-align: top; display: inline-block; line-height: 1.05;
  text-shadow: none; margin-left: 3px;
}
.plan-card__speed { font-size: 9.5px; font-weight: 700; line-height: 1.35; margin: 6px 0 14px; }

.plan-card__promo-label { display: block; font-family: var(--font-price); font-weight: 800; font-style: italic; font-size: 23px; letter-spacing: 1px; }
.plan-card__price {
  font-family: var(--font-price);
  display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 2px 0;
}
.plan-card__price .cur { font-size: 30px; font-weight: 800; font-style: italic; margin-top: 12px; }
.plan-card__price .int { font-family: var(--font-price); font-weight: 800; font-style: italic; font-size: 82px; line-height: .85; }
.plan-card__price .dec { font-family: var(--font-price); font-weight: 700; font-style: italic; font-size: 40px; margin-top: 10px; }
.plan-card__price .iva { font-size: 12px; font-weight: 800; text-align: left; margin-top: 10px; line-height: 1.05; }
.plan-card__price-note { font-size: 9.5px; margin-bottom: 16px; }
.plan-card__price-note b { font-size: 11px; }

.plan-card__discount { margin: 4px 0 6px; }
.plan-card__discount b {
  font-family: var(--font-impact);
  font-size: 52px;
  font-style: italic;
  color: #fff;
  line-height: .9;
  display: inline-block;
  text-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.plan-card__discount span {
  display: block; font-size: 11px; font-weight: 800; font-style: italic;
  letter-spacing: .5px; margin-top: -2px;
}
.plan-card__pay { font-size: 11px; font-weight: 800; font-style: italic; margin: 8px 0 16px; }

.plan-card__inc-title { font-size: 12px; font-weight: 800; font-style: italic; margin-bottom: 10px; }
.plan-card__badges {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.plan-card__badges img { height: 32px; width: auto; }
.plan-card__badges .badge21 { height: 40px !important; }
.plan-card__badges .badges-img { height: auto; width: 100%; max-width: 300px; }

.plan-card__custom { font-size: 11px; font-weight: 800; font-style: italic; line-height: 1.3; margin-bottom: 12px; }
.plan-card__custom span { font-size: 10px; }
.plan-card__options {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.plan-card__options img { height: auto; max-height: 46px; max-width: 180px; width: auto; }

.plan-card__combos { list-style: none; display: grid; gap: 18px; margin-top: 6px; }
.plan-card__combos li {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 800; flex-wrap: wrap;
}
.plan-card__combos img { height: auto; max-height: 44px; max-width: 150px; width: auto; }
.plan-card__combos b { font-size: 26px; }
.combo-plus { font-size: 22px; font-weight: 900; }

/* ============================================================
   RESTRICCIONES
   ============================================================ */
.restrictions { background: #050506; padding: 26px 24px; }
.restrictions p {
  max-width: var(--maxw);
  margin: 0 auto;
  color: #cfcfcf;
  font-family: var(--font-legal);
  font-size: 10px;
  line-height: 1.5;
  text-align: justify;
  font-weight: 500;
}
.restrictions p a {
  color: #fff;
}

/* ============================================================
   CARACTERÍSTICAS
   ============================================================ */
.features {
  background: #ff5300 url("../assets/img/background-footer.webp") no-repeat center center;
  background-size: cover;
  padding: 50px 24px 60px;
}
.features__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.feature { text-align: center; }
.feature__icon {
  width: 120px; margin: -60px auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.feature__icon img { width: 120px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.feature {
  background: url("../assets/img/background-cajas-footer.webp") no-repeat center center;
  background-size: 100% 100%;
  padding: 26px 22px 34px;
  position: relative;
}
.feature__title {
  font-style: italic; font-weight: 800; font-size: 20px;
  color: #fff; margin-bottom: 12px;
}
.feature__text { font-size: 12.5px; line-height: 1.5; color: #eaeaea; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #050506;
  /* reserva a la derecha para que los enlaces no queden bajo el botón flotante de WhatsApp */
  padding: 18px 150px 18px 24px;
}
.site-footer__container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: nowrap;
}
.site-footer__logo { height: 46px; width: auto; flex: none; }
.site-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
}
.site-footer__links a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: color .15s;
}
.site-footer__links a:hover { color: var(--orange-1); }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: block;
  line-height: 0;
  transition: transform .2s ease;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
  animation: wa-float-pulse 2.4s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.06); }
/* Oculto mientras el banner de cookies está visible, para que no se solapen
   (ambos son elementos fixed anclados a la esquina inferior derecha). */
.wa-float--hidden { display: none; }
.wa-float img { width: 150px; height: auto; }
@keyframes wa-float-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 760px;
  margin: 0 auto;
  background: #050506;
  color: #cfcfcf;
  border: 1px solid rgba(255, 138, 0, .35);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-legal);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { flex: 1 1 320px; font-size: 13px; line-height: 1.5; margin: 0; }
.cookie-banner__text a { color: #fff; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }
.cookie-banner__btn {
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-banner__btn--solid {
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color: #fff;
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: #cfcfcf;
  border: 1px solid rgba(255, 255, 255, .3);
}
.cookie-banner__btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Footer: pasa a apilado cuando la línea única ya no cabe */
@media (max-width: 1200px) {
  .site-footer { padding: 20px 24px 100px; }
  .site-footer__container { flex-direction: column; text-align: center; gap: 18px; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
}

@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title  title"
      "center right";
  }
  .hero__mascot { display: none; }
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 22px; }
}

@media (max-width: 820px) {
  .plans__grid { grid-template-columns: 1fr; max-width: 440px; }
  .wa-float img { width: 120px; }
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "center"
      "right";
    text-align: center;
  }
  .hero__right { max-width: 440px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
  .hero__inner { padding: 20px 16px 30px; }
  .planhome__big { font-size: 92px; }
  .features__grid { grid-template-columns: 1fr; max-width: 380px; gap: 70px; }
  .plans { padding: 34px 16px; }
  .restrictions p { font-size: 9px; }
  .wa-btn { font-size: 18px; }
  .site-footer__links { flex-direction: column; gap: 12px; }
  .wa-float { right: 12px; bottom: 12px; }
  .wa-float img { width: 100px; }
}