/* Planes y APP K-ONE: planes, plan destacado, tabla y APP en versión compacta (réplica de
   referencias/referencias-parte-25/referencia-planes-app-compacto.html). Todo el texto está en el HTML;
   scripts/planes-app.js solo abre y cierra. */

/* ---------- Sección de planes ---------- */
.planes { position: relative; overflow: hidden; background: #FFFFFF; color: #333333; padding: clamp(40px, 5vw, 72px) 24px; }
.planes::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 34% at 92% 6%, rgba(255,102,0,.05), transparent 100%),
    radial-gradient(48% 36% at 4% 52%, rgba(0,168,198,.05), transparent 100%),
    radial-gradient(40% 30% at 90% 96%, rgba(255,102,0,.04), transparent 100%);
}
.planes > * { position: relative; }
.planes__wrap { max-width: 1100px; margin: 0 auto; }
/* +12 px: al subir con el cursor, la etiqueta "Más popular" no tapa el final de la bajada */
.planes__head { text-align: center; margin: 0 auto calc(clamp(24px, 3vw, 40px) + 12px); }
.planes__title { font: 800 clamp(26px, 3vw, 40px)/1.15 var(--font-heading); letter-spacing: -.01em; color: #333333; text-wrap: balance; margin: 0 auto 12px; max-width: 900px; }
.planes__title .t1, .planes__title .t2 { display: block; }
@media (min-width: 641px) { .planes__title .t2 { white-space: nowrap; } }
.planes__lead { font: 400 15px/1.6 var(--font-copy); color: #555555; margin: 0 auto; max-width: 560px; text-wrap: balance; }
/* Ajuste 7: segunda frase en negrita (Roboto 700 autoalojada, ajuste 7b), mismo color */
.planes__lead strong { font-weight: 700; }
/* Mismo cristal de .glass, un poco más opaco y con hilo gris porque va sobre blanco */
.planes .glass, .app .glass {
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(255,102,0,.05), transparent 100%),
    radial-gradient(70% 50% at 0% 0%, rgba(0,168,198,.04), transparent 100%),
    linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.66) 100%);
  outline: 1px solid #EDEDED; outline-offset: -1px;
}
/* Tarjetas de plan (con "Ver más") y cuadro de Características (con sus fichas) sin backdrop-filter, como las preguntas
   frecuentes: van sobre un fondo liso y el desenfoque solo retrasaba el pintado; sin él se ven igual (0 % de píxeles con
   diferencia, medido en el ajuste 11b). Aprobado por Elena el 23 oct 2026. */
.planes .plan-card, .planes .planes__tabla { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Tarjetas de plan ----------
   Sin subgrid: cada tarjeta mide lo suyo y al abrir "Ver más" las demás no se estiran (align-items: start).
   Se ven 4 viñetas (el alto de Secured es la base); el resto se recoge con grid-template-rows 0fr → 1fr. */
.planes__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; align-items: start;
}
/* Posición en reposo y al pasar el cursor en variables, para que el plan destacado las cambie sin repetir reglas */
.plan-card {
  --plan-rest: none; --plan-hover: var(--lift-hover); --plan-shadow-hover: var(--lift-shadow);
  display: flex; flex-direction: column;
  padding: 26px 22px 22px; margin-bottom: 18px; transform: var(--plan-rest);
  transition: transform .25s var(--ease-lift), box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover, .planes .plan-card--top:hover { transform: var(--plan-hover); box-shadow: var(--plan-shadow-hover); }
}
/* Plan destacado (Essential): borde naranja de 2 px y etiqueta sobre el borde; overflow visible para que no se corte.
   Queda por encima de los demás también en reposo (es estático, sigue así con movimiento reducido). */
.planes .plan-card--top {
  --plan-rest: translateY(-16px) scale(1.03);
  --plan-hover: translateY(-24px) scale(1.04);
  --plan-shadow-hover: 0 72px 130px -30px rgba(2,10,10,.34), 0 26px 52px -18px rgba(255,102,0,.38), inset 0 1px 0 rgba(255,255,255,.95);
  position: relative; z-index: 2; overflow: visible; outline: 2px solid var(--orange-title); outline-offset: -2px;
  box-shadow: 0 64px 120px -30px rgba(2,10,10,.30), 0 22px 46px -20px rgba(255,102,0,.30), inset 0 1px 0 rgba(255,255,255,.95);
}
.plan-card__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  padding: 6px 16px; border-radius: 999px; background: var(--orange-title); color: #020A0A;
  font: 700 11px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(255,102,0,.6);
}
/* Nombre siempre en dos líneas: "K-ONE" / variante (solo los hijos directos, no el .nowrap de "SD-WAN") */
.plan-card__name { font: 800 21px/1.18 var(--font-heading); letter-spacing: -.01em; margin: 0; color: #333333; }
.plan-card__name > span { display: block; }
.plan-card .nowrap { white-space: nowrap; }
.plan-card__tag { font: 600 14px/1.3 var(--font-heading); margin: 8px 0 0; color: #CC5500; }
.plan-card__desc { font: 400 14px/1.55 var(--font-copy); margin: 10px 0 0; color: #555555; }
.plan-card__sep { width: 100%; height: 1px; border: 0; margin: 18px 0 16px; background: linear-gradient(90deg, rgba(255,102,0,.35), rgba(0,168,198,.25), transparent); }
.plan-card__label { font: 700 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: #555555; margin: 0 0 10px; }
.plan-card__check { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.plan-card__check li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font: 400 14px/1.4 var(--font-copy); color: #333333; }
.plan-card__check svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #CC5500; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Resto de viñetas: siguen en el HTML; cerradas no ocupan alto y se ocultan también a lectores de pantalla */
.plan-card__more {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .35s var(--ease-lift), visibility 0s linear .35s;
}
.plan-card__more-in { overflow: hidden; min-height: 0; }
.plan-card__more .plan-card__check { padding-top: 9px; }
.plan-card.is-open .plan-card__more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
/* "Ver más ⌄" / "Ver menos ⌃": ancho completo y discreto, debajo de la 4.ª viñeta */
.plan-card__toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 32px; margin-top: 10px; padding: 6px 10px;
  border: 1px solid rgba(255,102,0,.28); border-radius: 999px; background: rgba(255,102,0,.05); cursor: pointer;
  font: 700 11px/1 var(--font-heading); letter-spacing: .09em; text-transform: uppercase; color: #CC5500;
  transition: background-color .2s ease, border-color .2s ease;
}
.plan-card__toggle:hover { background: rgba(255,102,0,.1); border-color: rgba(255,102,0,.5); }
.plan-card__toggle:focus-visible { outline: 2px solid #00A8C6; outline-offset: 3px; border-radius: 999px; }
.plan-card__toggle-i { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-lift); }
.plan-card.is-open .plan-card__toggle-i { transform: rotate(180deg); }
.plan-card__spacer { height: 0; }

.plan-card__ideal { margin-top: 18px; }
.plan-card__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-card__chips li {
  padding: 5px 11px; border-radius: 999px; background: rgba(235,249,252,.9); border: 1px solid rgba(0,168,198,.14);
  font: 400 12.5px/1.3 var(--font-copy); color: #333333;
}
/* Cierre de cada plan (ficha) con línea gris encima, justo arriba del botón */
.plan-card__close {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #ECECEC; text-align: center; text-wrap: balance;
  font: 600 13.5px/1.4 var(--font-heading); color: #333333;
}
.plan-card__cta { padding-top: 16px; }
.plan-card .cta {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 12px;
  font: 700 12px/1 var(--font-heading); letter-spacing: .09em;
}
/* Escritorio: en reposo, nombre, frase, descripción, lista visible e "Ideal para" empiezan a la misma altura en las
   cuatro tarjetas (altos mínimos medidos con las fuentes del sitio). Secured reserva el alto del botón "Ver más". */
@media (min-width: 1100px) {
  /* --plan-name-h y --plan-desc-h: alto del nombre y de la descripción más largos, los pone scripts/planes-app.js */
  .plan-card__name { min-height: max(2.36em, var(--plan-name-h, 0px)); }
  .plan-card__tag { min-height: 2.6em; }
  .plan-card__desc { min-height: max(6.2em, var(--plan-desc-h, 0px)); }
  .plan-card__spacer { height: 42px; }
}

/* Ajuste final, solo escritorio (≥1100 px):
   - En reposo las cuatro tarjetas miden lo mismo (stretch) y ninguna se anima; Essential conserva etiqueta y borde de 2 px.
   - Al pasar el cursor o con el foco dentro, la tarjeta sube y crece (solo transform) y su botón enciende el zoom y la
     luz del borde (.is-live).
   - La lista visible mide lo que miden las 4 viñetas de Secured de una línea (14 px × 1.4 y 9 px entre ellas). Altura fija,
     sin CLS; scripts/planes-app.js deja ahí solo las viñetas completas que caben y pasa las demás a "Ver más".
   - Con una tarjeta abierta el contenedor pasa a start (.has-open) para que las demás no se estiren. */
@media (min-width: 1100px) {
  .planes__cards { align-items: stretch; }
  .planes__cards.has-open { align-items: start; }
  .plan-card__close { margin-top: auto; }
  /* "Ideal para": un chip por fila, a la izquierda; aire mínimo de 20 px sobre la línea del cierre (margin-top: auto
     del cierre no deja nada en la tarjeta más alta) */
  .plan-card__chips { flex-direction: column; align-items: flex-start; }
  .plan-card__ideal { margin-bottom: 20px; }
  .planes .plan-card--top {
    --plan-rest: none; --plan-hover: var(--lift-hover); --plan-shadow-hover: var(--lift-shadow);
    box-shadow: 0 40px 90px -34px rgba(2,10,10,.14), 0 12px 30px -20px rgba(2,10,10,.08), inset 0 1px 0 rgba(255,255,255,.95);
  }
  .plan-card__incluye > .plan-card__check { height: calc(4 * 14px * 1.4 + 3 * 9px); overflow: hidden; }
  /* Abierta: la lista toma su alto real y el resto de viñetas sigue justo debajo, sin hueco */
  .plan-card.is-open .plan-card__incluye > .plan-card__check { height: auto; }
  .plan-card:focus-within { transform: var(--plan-hover); box-shadow: var(--plan-shadow-hover); }
  .planes__cards.is-pending .plan-card.is-in:focus-within { transform: var(--plan-hover); box-shadow: var(--plan-shadow-hover); transition-delay: 0ms; }
  /* Sin cursor ningún botón se anima (antes Essential lo hacía siempre) */
  .planes .plan-card .cta.btn--invita.is-live,
  .planes .plan-card .cta.btn--invita.is-live::before { animation: none; will-change: auto; }
  .planes .plan-card .cta.btn--invita.is-live::before { opacity: 0; }
  .planes .planes__cards .plan-card:is(:hover, :focus-within) .cta.btn--invita.is-live::before { opacity: 1; animation: giroBorde 3.2s linear infinite; will-change: transform; }
  .planes .planes__cards .plan-card:is(:hover, :focus-within) .cta.btn--invita.is-live:not(:hover, :active) { animation: pulsoCta 3.6s ease-in-out .4s infinite; }
}

/* ---------- Características principales: 4 fichas y un panel abierto a la vez ---------- */
.planes__tabla { margin-top: 22px; padding: 30px 28px 26px; }
.planes__tabla-title { font: 800 clamp(32px, 3.8vw, 48px)/1.15 var(--font-heading); letter-spacing: -.01em; text-align: center; margin: 0 0 10px; color: #333333; text-wrap: balance; }
/* "Características" en negro y "principales" en naranja; si no cabe en una línea, se parte entre las dos palabras */
.planes__tabla-t1, .planes__tabla-t2 { white-space: nowrap; }
.planes__tabla-t2 { color: var(--orange-title); }
.caract__lead { font: 400 16px/1.5 var(--font-copy); color: #555555; text-align: center; margin: 0 auto 22px; max-width: 520px; text-wrap: balance; }
.caract__fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.caract__ficha {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 14px;
  cursor: pointer; text-align: center; color: #333333;
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.7)); border: 1px solid #ECECEC; border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(2,10,10,.2);
  transition: transform .25s var(--ease-lift), box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .caract__ficha:hover { transform: translateY(var(--lift-sm)); border-color: rgba(255,102,0,.4); box-shadow: 0 26px 48px -26px rgba(2,10,10,.28); }
}
.caract__ficha:focus-visible { outline: 2px solid #00A8C6; outline-offset: 3px; border-radius: 18px; }
.caract__ficha[aria-expanded="true"] { border-color: var(--orange-title); box-shadow: 0 0 0 1px var(--orange-title), 0 26px 48px -26px rgba(255,102,0,.35); }
.caract__ic { width: 44px; height: 44px; flex: none; }
.caract__n { font: 800 18px/1.25 var(--font-heading); text-wrap: balance; }
.caract__ch { margin-top: auto; fill: none; stroke: #CC5500; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-lift); }
.caract__ficha[aria-expanded="true"] .caract__ch { transform: rotate(180deg); }
.caract__paneles { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-lift); }
.caract__paneles.is-open { grid-template-rows: 1fr; }
.caract__paneles-in { overflow: hidden; min-height: 0; }
.caract__panel { max-width: 980px; margin: 18px auto 0; text-align: center; }
/* Al cambiar de ficha el contenido nuevo entra con un fundido (solo opacidad) */
@media (prefers-reduced-motion: no-preference) {
  .caract__panel:not([hidden]) { animation: caractFundido .2s ease; }
}
@keyframes caractFundido { from { opacity: 0; } to { opacity: 1; } }
.caract__panel table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.caract__panel thead th {
  font: 700 12px/1.3 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: #555555;
  text-align: center; padding: 0 8px 12px; vertical-align: bottom;
}
.caract__panel thead th:first-child { width: 28%; }
.caract__panel tbody th, .caract__panel tbody td { padding: 13px 8px; border-top: 1px solid #ECECEC; text-align: center; }
.caract__panel tbody th { font: 600 16px/1.35 var(--font-copy); color: #333333; padding-inline: 12px; }
.caract__panel tbody td { font: 400 16px/1.35 var(--font-copy); color: #555555; }
.caract__panel tbody td.si { font-family: var(--font-heading); font-weight: 700; color: #CC5500; }
.caract__panel tbody tr:nth-child(odd) :is(th, td) { background: rgba(245,245,245,.6); }
.caract__panel tbody tr:first-child th { border-top-left-radius: 12px; }
.caract__panel tbody tr:first-child td:last-child { border-top-right-radius: 12px; }
.caract__panel tbody tr:last-child th { border-bottom-left-radius: 12px; }
.caract__panel tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.planes__leyenda { margin: 18px auto 0; max-width: 760px; font: 400 14px/1.5 var(--font-copy); color: #555555; text-align: center; }
.planes__leyenda strong { font-family: var(--font-heading); font-weight: 700; color: #333333; }
/* Pie de la tabla (ajuste 17): una línea desde 768 px; en celular se parte */
.planes__pie { margin: 6px auto 0; max-width: 760px; font: 400 14px/1.5 var(--font-copy); color: #555555; text-align: center; text-wrap: balance; }
@media (min-width: 768px) { .planes__pie { white-space: nowrap; } }

/* ---------- Bloque +5G (sin cambios) ---------- */
.planes__g5 { margin-top: 22px; padding: 24px 28px; display: flex; align-items: center; justify-content: center; gap: 20px; }
/* El texto mide lo que mide su título, así el conjunto "+5G + texto" queda centrado en la tarjeta */
.planes__g5-body { flex: 0 1 auto; width: fit-content; text-align: center; }
/* "+5G" con un latido (mini zoom) cada 3.6 s. Solo transform: no mueve nada (sin CLS).
   scripts/pulse-in-view.js pone .is-live mientras el bloque está en pantalla; con movimiento reducido no corre. */
.planes__g5-num {
  display: inline-block; flex: none; transform-origin: 50% 55%;
  font: 800 clamp(56px, 5.8vw, 80px)/1 var(--font-heading); letter-spacing: -.02em; color: #CC5500;
}
@keyframes pulso5g { 0% { transform: scale(1); } 9% { transform: scale(1.12); } 20% { transform: scale(1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .planes__g5.is-live .planes__g5-num { animation: pulso5g 3.6s ease-in-out .6s infinite; }
}
.planes__g5-title { font: 700 clamp(18px, 1.9vw, 22px)/1.2 var(--font-heading); margin: 0 0 6px; color: #333333; }
.planes__g5-text { font: 400 14.5px/1.55 var(--font-copy); margin: 0 auto; color: #555555; max-width: 340px; text-wrap: balance; }
@media (min-width: 641px) { .planes__g5-title { white-space: nowrap; } }

/* Entrada escalonada de las tarjetas (scripts/stagger-in.js) */
@media (prefers-reduced-motion: no-preference) {
  .planes__cards.is-pending .plan-card { opacity: 0; transform: translateY(20px); }
  .planes__cards.is-pending .plan-card.is-in {
    opacity: 1; transform: var(--plan-rest);
    transition: opacity .4s ease, transform .4s var(--ease-lift), box-shadow .25s ease; transition-delay: calc(var(--i, 0) * 40ms);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .planes__cards.is-pending .plan-card.is-in:hover { transform: var(--plan-hover); box-shadow: var(--plan-shadow-hover); transition-delay: 0ms; }
}
/* Con las tarjetas en fila (más de 640 px) solo el botón del plan destacado lleva el zoom y la luz;
   los otros tres quedan con el efecto normal al pasar el cursor. En celular (una columna) los cuatro se animan al verse. */
@media (min-width: 641px) {
  .planes .plan-card:not(.plan-card--top) .cta.btn--invita.is-live,
  .planes .plan-card:not(.plan-card--top) .cta.btn--invita.is-live::before { animation: none; will-change: auto; }
  .planes .plan-card:not(.plan-card--top) .cta.btn--invita.is-live::before { opacity: 0; }
}

/* ---------- APP K-ONE ---------- */
.app { position: relative; overflow: hidden; background: #FFFFFF; color: #333333; padding: clamp(40px, 5vw, 72px) 24px; }
.app::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 36% at 8% 30%, rgba(0,168,198,.06), transparent 100%),
    radial-gradient(44% 34% at 94% 70%, rgba(255,102,0,.06), transparent 100%);
}
.app > * { position: relative; }
.app__wrap { max-width: 1100px; margin: 0 auto; }
.app .nowrap { white-space: nowrap; }
.app__head { text-align: center; }
/* Ajuste 14: "APP" y el logo K-ONE en una fila dentro del título (el alt "K-ONE" y un ":" oculto mantienen el nombre
   accesible "APP K-ONE: Tu conectividad…"). La altura de "APP" se parece a la de las letras del logo; el recuadro
   redondeado del ajuste 10 lo enmarca */
.app__marca { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 14px; }
.app__marca-t { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .02em; line-height: 1; color: #333333; }
.app__icono { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E6E6E6; }
.app__icono-logo { display: block; width: 62px; height: auto; }
/* "Disponible en:" y los logos de las tiendas, debajo del celular (ajuste 14) */
/* Ajuste 16: 26 px en pantalla (sin importar --page-zoom) más los ~2–3 px transparentes del borde inferior de la imagen:
   28–29 px del borde visible del celular a "Disponible en:". La sombra (drop-shadow) no ocupa lugar */
.app__tiendas { text-align: center; margin-top: calc(26px / var(--page-zoom, 1)); }
/* Ajuste 16b: el celular está inclinado; su franja de abajo (filas 1000–1150 de la imagen, justo sobre "Disponible en:")
   tiene el centro 6.13 % del ancho de la imagen a la derecha del centro de la caja. .app__tiendas mide lo mismo que el
   celular (todo el ancho de .app__movil), así que translate: 6.13 % (de su propio ancho) corre el grupo (texto y símbolos,
   centrados entre sí) justo eso y lo sigue en cualquier ancho. Ajuste 16c: sin container-type, que impedía la subrejilla */
.app__tiendas { translate: 6.13% 0; }
.app__tiendas-t { margin: 0 0 10px; font: 400 14px/1.4 var(--font-copy); color: #555555; }
.app__tiendas-fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
/* Ajuste 15: solo los símbolos (manzana y triángulo), lado a lado, del mismo alto: 44 px en pantalla y nunca menos de 40
   con el zoom del sitio (--page-zoom, 0.8 a 1.1) */
.app__tienda { display: block; width: auto; height: max(44px, calc(44px / var(--page-zoom, 1))); }
.app__tienda-link { display: block; border-radius: 8px; }
.app__tienda-link:focus-visible { outline: 3px solid rgba(255,102,0,.6); outline-offset: 3px; }
/* Título en dos líneas fijas ("Tu conectividad, bajo control" / "desde tu celular"); solo "conectividad" en naranja (.hl).
   Cada línea se parte solo si no cabe; la segunda es la más corta, así nunca se parte antes que la primera */
.app__title { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 0 auto; max-width: 880px; }
.app__title-o { display: block; font-size: clamp(26px, 3vw, 40px); color: #333333; }
.app__title-l { display: block; text-wrap: balance; }
.app__lead { font: 400 18px/1.6 var(--font-copy); color: #555555; margin: 16px auto 0; max-width: 620px; text-wrap: balance; }
/* Etiquetas (ajuste 17b: 3, la definición de la APP de Claudia): las tres en una línea, centradas; en celular, una por línea */
.app__puntos { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.app__puntos li { justify-content: center; }
@media (max-width: 700px) {
  .app__puntos { flex-direction: column; align-items: center; }
  .app__puntos li { max-width: 100%; }
}
.app__puntos li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: rgba(235,249,252,.9); border: 1px solid rgba(0,168,198,.16); font: 400 15px/1.3 var(--font-copy); color: #333333;
}
.app__puntos svg { flex: none; fill: none; stroke: #CC5500; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Frase clave, central y destacada, con la barra de marca debajo; desde el ajuste 14, justo después de las etiquetas */
.app__clave { max-width: 760px; margin: clamp(22px, 2.6vw, 30px) auto 0; padding: 20px 28px; text-align: center; }
/* Ajuste 10: subordinado al título (.app__title-o, 26–40 px): ~58 % de su tamaño en cada ancho, mismo peso */
.app__clave p { margin: 0; font: 800 clamp(15px, 1.75vw, 23px)/1.3 var(--font-heading); text-wrap: balance; }
/* Dos líneas fijas: la primera en negro y la segunda en naranja; si una no cabe, baja con su ancho natural */
.app__clave-n, .app__clave-o { display: block; }
.app__clave-n { color: #333333; }
.app__clave-o { color: var(--orange-title); }
/* Ajuste 17b: una sola línea desde 768 px (tarjeta más ancha y letra un poco menor); en celular se parte después de la coma */
@media (min-width: 768px) {
  .app__clave { max-width: 880px; }
  .app__clave p { font-size: clamp(15px, 1.6vw, 22px); white-space: nowrap; }
  .app__clave-n, .app__clave-o { display: inline; }
}
.app__clave::after { content: ''; display: block; width: 84px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--grad); }

/* Ajuste 14: rejilla de 2 × 2 en escritorio: celular | funciones arriba; tiendas (centradas bajo el celular) | cierre con el
   botón (centrado bajo las funciones) abajo; desde el ajuste 16 el celular y las tiendas van juntos a la izquierda. En una columna, el orden del HTML: celular, tiendas, funciones, cierre */
.app__fila {
  display: grid; grid-template-columns: clamp(300px, 26vw, 340px) 1fr; grid-template-areas: "movil fn" "movil final";
  gap: clamp(28px, 3.4vw, 40px) clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px);
}
/* Ajuste 16: celular y tiendas en un solo bloque (.app__movil) que ocupa las dos filas de la izquierda; las tiendas quedan
   pegadas al celular y la columna derecha (funciones y cierre) no cambia */
/* Ajuste 16b: .app__movil mide lo mismo que el celular (tope en --cel-max) */
.app__movil { grid-area: movil; align-self: start; justify-self: center; width: min(100%, var(--cel-max, 100%)); }
.app__fn { grid-area: fn; }
.app__final { grid-area: final; align-self: center; }
/* Ajuste 16c: en dos columnas, "Disponible en:" se lee en paralelo con la primera línea del cierre. .app__movil pasa a
   subrejilla de las dos filas (celular arriba, tiendas abajo) y las tiendas y el cierre se alinean por su primera línea base
   (align-self: baseline en la misma fila). El cierre tiene la línea base más baja, así que no se mueve: bajan las tiendas.
   En una columna (hasta 900 px) sigue el margen de 26 px bajo el celular */
@media (min-width: 901px) {
  .app__movil { display: grid; grid-template-rows: subgrid; align-self: stretch; }
  .app__celular { align-self: start; }
  .app__tiendas { align-self: baseline; margin-top: 0; }
  .app__final { align-self: baseline; }
}

/* Celular: imagen realista con fondo transparente y resplandor propio; sin marco, fondo ni recorte.
   Manda el ancho (300–340 px en escritorio); la fila puede crecer y las funciones quedan centradas a su lado. */
.app__celular { display: block; width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 24px 30px rgba(2,10,10,.18)); }
/* Entrada al llegar a la pantalla (scripts/stagger-in.js), solo transform y opacidad */
@media (prefers-reduced-motion: no-preference) {
  .app__fila.is-pending .app__celular { opacity: 0; transform: translateY(24px); }
  .app__fila.is-pending .app__celular.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s var(--ease-lift); }
}

/* Funciones: dos segmentos de 6 tarjetas, cada uno en su columna (independientes: align-items: start).
   Tarjeta en fila: ícono en un hueco fijo, nombre y flecha en una zona de 44 px pegada al borde derecho.
   La descripción se despliega dentro de su tarjeta y solo empuja hacia abajo a su columna.
   Sin JS se ven todas abiertas; con JS (.is-ready) arrancan cerradas. */
.app__sub { font: 800 clamp(20px, 2vw, 24px)/1.25 var(--font-heading); color: #333333; margin: 0 0 4px; text-wrap: balance; }
.app__sub-hl { color: var(--orange-title); white-space: nowrap; }
.app__guia { font: 400 15px/1.5 var(--font-copy); color: #555555; margin: 0; }
.app__segs { display: grid; grid-template-columns: 1fr; gap: 0 36px; align-items: start; }
.app-seg { min-width: 0; }
.app-seg__t { margin: 48px 0 20px; font: 800 clamp(24px, 2.2vw, 28px)/1.2 var(--font-heading); letter-spacing: -.01em; color: #333333; text-wrap: balance; }
/* Dos líneas fijas en los dos títulos (span por línea, no <br>: el lector de pantalla lee la frase de corrido) */
.app-seg__l { display: block; }
.app-seg__t::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--grad); }
.app__fns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-fn {
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.7)); border: 1px solid #ECECEC; border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(2,10,10,.2);
  transition: translate .25s var(--ease-lift), box-shadow .25s ease, border-color .25s ease;
}
.app-fn__b {
  width: 100%; min-height: 72px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px;
  padding: 10px 8px 10px 16px; cursor: pointer; text-align: left; color: #333333; background: none; border: 0; border-radius: 18px;
}
.app-fn__b .caract__ic { width: 44px; height: 44px; }
.app-fn__n { font: 700 16px/1.28 var(--font-heading); text-wrap: balance; }
.app-fn__ch { display: grid; place-items: center; width: 44px; height: 44px; }
.app-fn__ch .caract__ch { margin: 0; }
.app-fn__b:focus-visible { outline: 2px solid #00A8C6; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  /* Mismo efecto que "Características principales"; translate (no transform): la entrada escalonada usa transform */
  .app-fn:hover { translate: 0 var(--lift-sm); border-color: rgba(255,102,0,.4); box-shadow: 0 26px 48px -26px rgba(2,10,10,.28); }
}
.app-fn.is-open { border-color: var(--orange-title); box-shadow: 0 0 0 1px var(--orange-title), 0 26px 48px -26px rgba(255,102,0,.35); }
.app-fn__b[aria-expanded="true"] .caract__ch { transform: rotate(180deg); }
.app-fn__d { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-lift), visibility 0s; }
.app-fn__in { overflow: hidden; min-height: 0; }
/* Alineada con el nombre: 16 px de borde + 44 de ícono + 12 de espacio */
.app-fn__in p { margin: 0; padding: 0 20px 16px 72px; font: 400 15px/1.5 var(--font-copy); color: #555555; text-wrap: pretty; }
/* Cerrada: alto 0 y fuera del árbol de accesibilidad (visibility) hasta que termina de cerrarse */
.app__segs.is-ready .app-fn:not(.is-open) .app-fn__d { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease-lift), visibility 0s linear .3s; }
.app__segs.is-booting.is-ready .app-fn:not(.is-open) .app-fn__d { transition: none; }
.app__segs:not(.is-ready) .app-fn__ch { visibility: hidden; }
/* Dos columnas lado a lado desde 900 px. Subgrid: los dos títulos comparten fila (si uno ocupa dos líneas, las
   tarjetas de ambas columnas empiezan a la misma altura); cada lista va arriba y crece sola, sin mover la otra. */
.app__fns { align-content: start; align-self: start; }
@media (min-width: 900px) {
  .app__segs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .app-seg { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .app-seg__t { align-self: end; }
}

/* Primera frase con el estilo del subtítulo (.app__lead: Roboto 400, 18 px, #555555); la línea grande sigue igual */
.app__cierre { max-width: 680px; margin: 0 auto; text-align: center; text-wrap: balance; font-family: var(--font-heading); line-height: 1.3; }
.app__cierre-n { display: block; font: 400 18px/1.6 var(--font-copy); color: #555555; }
.app__cierre-o { display: block; margin-top: 4px; font-weight: 800; font-size: clamp(25px, 2.8vw, 36px); color: #333333; }
.app__cta { display: flex; justify-content: center; margin-top: 22px; }
.app .cta { font: 700 14px/1 var(--font-heading); letter-spacing: .09em; padding: 16px 28px; }

/* Entrada escalonada de las funciones (scripts/stagger-in.js), solo transform y opacidad */
@media (prefers-reduced-motion: no-preference) {
  .app__fns.is-pending .app-fn { opacity: 0; transform: translateY(16px); }
  .app__fns.is-pending .app-fn.is-in {
    opacity: 1; transform: none;
    transition: opacity .4s ease, transform .4s var(--ease-lift); transition-delay: calc(var(--i, 0) * 40ms);
  }
}

/* ---------- Puntos de quiebre ---------- */
/* Tarjetas: escritorio desde 1100 px (ajuste final), así 1100 ya no mezcla 2 columnas con las reglas de escritorio */
@media (max-width: 1099px) {
  .planes__cards { grid-template-columns: repeat(2, 1fr); }
  .planes .plan-card--top { --plan-rest: translateY(-8px) scale(1.02); --plan-hover: translateY(-14px) scale(1.03); }
}
@media (max-width: 1100px) {
  .caract__fichas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app__fila { grid-template-columns: 1fr; grid-template-areas: "movil" "fn" "final"; }
  .app__movil { --cel-max: 320px; }
}
/* Celular: cada característica pasa a un bloque con sus 4 planes en 2×2 (etiqueta desde data-l), sin scroll horizontal */
@media (max-width: 700px) {
  .caract__panel :is(table, tbody, tr, th, td) { display: block; }
  .caract__panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .caract__panel tbody tr { margin-bottom: 10px; padding: 12px; border: 1px solid #ECECEC; border-radius: 14px; background: rgba(245,245,245,.6); }
  .caract__panel tbody tr:nth-child(odd) :is(th, td) { background: none; }
  .caract__panel tbody th { border: 0; padding: 0 0 8px; font-weight: 700; }
  .caract__panel tbody td { display: inline-block; width: calc(50% - 4px); vertical-align: top; border: 0; padding: 6px 4px; font-size: 15px; }
  .caract__panel tbody td::before {
    content: attr(data-l); display: block; margin-bottom: 2px;
    font: 700 11px/1.3 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: #555555;
  }
  .caract__panel tbody tr :is(th, td) { border-radius: 0; }
}
@media (max-width: 640px) {
  .planes__cards { grid-template-columns: 1fr; }
  .planes .plan-card--top { --plan-rest: scale(1.02); --plan-hover: translateY(-6px) scale(1.03); }
  .planes .planes__g5, .app .glass { -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); }
  .planes__tabla { padding: 22px 14px 18px; }
  .caract__fichas { gap: 10px; }
  .planes__g5 { flex-direction: column; gap: 8px; padding: 22px 20px; }
  .app__icono { width: 64px; height: 64px; border-radius: 16px; }
  .app__icono-logo { width: 52px; }
  .app__marca { gap: 12px; }
  .app__movil { --cel-max: 260px; }
  .app__clave { padding: 16px 18px; }
}

/* Movimiento reducido: todo abre y cierra sin transición (va después de los puntos de quiebre) */
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card__more, .plan-card__toggle-i, .caract__ficha, .caract__ch, .caract__paneles, .app-fn, .app-fn__d, .app__segs.is-ready .app-fn:not(.is-open) .app-fn__d { transition: none; }
  /* El destacado sigue elevado, pero no se mueve al pasar el cursor */
  .planes .plan-card--top { --plan-hover: var(--plan-rest); }
  .app-fn:hover { translate: none; }
}
/* Escritorio con movimiento reducido: ninguna tarjeta se mueve al pasar el cursor */
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .planes .plan-card { --plan-hover: none; }
}