/* Omnifunk — hoja de estilos única, compartida entre las 7 páginas.
   Paleta, tipografía y radios documentados en CLAUDE.md de esta carpeta. */

/* Inter auto-alojada (antes: Google Fonts, 2 saltos de red externos antes del
   primer paint). El archivo es una fuente variable: Google sirve el mismo woff2
   para 400 y 500, el navegador interpola el peso visual desde ahí. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: #14181A;
  font-family: Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 { font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
p, ul, ol { margin: 0; }
a { color: #1E6E3A; text-decoration: none; }
a:hover { color: #14231B; text-decoration: underline; }
a[aria-current="page"] { color: #1E6E3A; box-shadow: inset 0 -2px 0 0 #1E6E3A; }
:focus-visible { outline: 2px solid #1E6E3A; outline-offset: 2px; border-radius: 2px; }
.on-dark:focus-visible { outline-color: #A2E4B8; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .acordeon-icono { border-color: #1E6E3A; background: #A2E4B8; }
details[open] > summary .acordeon-icono::after { content: "\2212"; }
details:not([open]) > summary .acordeon-icono::after { content: "+"; }
input, select, textarea, button { font: inherit; color: inherit; }
img { max-width: 100%; }

.visually-hidden {
  position: absolute; left: -9999px; top: -9999px;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: #14181A; color: #FFFFFF; padding: 10px 16px; border-radius: 4px;
}
.skip-link:focus { left: 8px; }

/* ---------- Layout ---------- */
.container { max-width: 75rem; margin: 0 auto; padding: 0 24px; }
.container-angosto { max-width: 52rem; margin: 0 auto; padding: 0 24px; }

.seccion { padding: 80px 0; }
.seccion-superficie { background: #F7F9F8; }
.seccion-oscura { background: #14181A; color: #FFFFFF; }

.eyebrow {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #55625B;
}
.texto-secundario { color: #55625B; }

/* ---------- Header / nav ---------- */
.header-sitio {
  position: sticky; top: 0; z-index: 50; background: #FFFFFF;
}
.header-fila {
  min-height: 72px; display: flex; align-items: center; gap: 24px; justify-content: space-between;
}
.logo-link {
  display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500;
  color: #14181A; letter-spacing: -0.02em; text-decoration: none; padding: 8px 0;
}
.logo-link img { height: 44px; width: auto; display: block; }
.logo-link:hover { text-decoration: none; }

.nav-principal ul {
  display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; margin: 0;
}
.nav-principal a {
  color: #55625B; font-size: 15px; padding: 10px 0; display: inline-block;
}
.nav-principal a:hover { color: #14181A; }

.boton-menu {
  width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center;
  gap: 5px; background: transparent; border: 1px solid #8A968F; border-radius: 4px;
  padding: 0 10px; cursor: pointer;
}
.boton-menu span { display: block; height: 2px; background: #14181A; }

.menu-movil {
  border-top: 1px solid #949494; background: #FFFFFF; padding: 16px 24px 24px;
}
.menu-movil ul { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.menu-movil a {
  display: block; padding: 12px 0; font-size: 17px; color: #14181A;
  border-bottom: 1px solid #949494;
}
.menu-movil li:last-child a { border-bottom: none; }

@media (min-width: 860px) {
  .boton-menu, .menu-movil { display: none; }
}
@media (max-width: 859px) {
  .nav-principal { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 15px 24px;
  border-radius: 4px; font-weight: 500; text-decoration: none; border: none; cursor: pointer;
  font-size: 16px;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: #A2E4B8; color: #14231B; }
.btn-primario:hover { background: #8FDCA8; color: #14231B; }
.btn-oscuro { background: #1E6E3A; color: #FFFFFF; }
.btn-oscuro:hover { background: #14231B; color: #FFFFFF; }
.btn-borde {
  background: transparent; border: 1px solid #8A968F; color: #14181A; padding: 12px 20px;
}
.btn-borde:hover { border-color: #14181A; text-decoration: none; }
.link-flecha { font-weight: 500; color: #1E6E3A; }

/* ---------- Tarjetas y grillas ---------- */
.grid-auto {
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tarjeta {
  background: #FFFFFF; border: 1px solid #949494; border-radius: 4px;
  padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;
}
.tarjeta:hover { border-color: #55625B; }
.tarjeta h3 { font-size: 22px; }
.tarjeta-icono { width: 32px; height: 32px; color: #1E6E3A; }

.dot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dot-list li { display: flex; gap: 12px; align-items: flex-start; color: #55625B; }
.dot-list .punto {
  flex: none; margin-top: 7px; width: 8px; height: 8px; background: #A2E4B8;
  border: 1px solid #1E6E3A; border-radius: 50%;
}
.dot-list.dot-list-grande .punto { margin-top: 6px; width: 10px; height: 10px; }
.dot-list.dot-list-grande li {
  background: #FFFFFF; border: 1px solid #949494; border-radius: 4px; padding: 20px;
}

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.hero > * { flex: 1 1 420px; min-width: 260px; }
.hero h1, .titulo-pagina { font-size: clamp(36px, 5vw, 56px); }
.hero-intro { font-size: clamp(17px, 1.6vw, 20px); color: #55625B; max-width: 34em; margin-top: 24px; }

/* ---------- Carruseles ---------- */
.carrusel-flechas {
  display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px;
}
.carrusel-flecha {
  width: 44px; height: 44px; display: grid; place-items: center; background: #FFFFFF;
  border: 1px solid #55625B; border-radius: 4px; color: #14181A; font-size: 18px; cursor: pointer;
}
.carrusel-flecha:hover { background: #F7F9F8; }
.carrusel-pista {
  margin-top: 20px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
.carrusel-item {
  flex: 0 0 min(86%, 340px); scroll-snap-align: start; border: 1px solid #949494;
  border-radius: 4px; display: flex; flex-direction: column; background: #FFFFFF;
}
.carrusel-item:hover { border-color: #55625B; }
.carrusel-item-foto {
  width: 100%; aspect-ratio: 4 / 3; border-bottom: 1px solid #949494; background: #EEF2F0;
}
.carrusel-item-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carrusel-item-cuerpo { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

@media (max-width: 640px) {
  .carrusel-flechas { display: none; }
}

/* ---------- Aplicaciones ---------- */
.categoria-titulo { font-size: 24px; padding-bottom: 12px; border-bottom: 1px solid #949494; }
.app-carrusel {
  margin-top: 20px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
.app-carrusel.sin-carrusel { display: block; }
.app-card {
  flex: 0 0 min(88%, 360px); scroll-snap-align: start; border: 1px solid #949494; border-radius: 4px;
  padding: 24px; background: #FFFFFF; display: flex; flex-direction: column; gap: 10px;
}
.app-card:hover { border-color: #55625B; }
.app-card h3 {
  font-size: 20px; background: #A2E4B8; color: #14231B; padding: 4px 10px; border-radius: 4px;
  display: inline-block;
}
.app-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-badge {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: #55625B; border: 1px solid #949494; border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.app-card .beneficios {
  margin-top: auto; padding-top: 12px; border-top: 1px solid #EEF2F0; font-size: 14px; color: #55625B;
}
.app-card .beneficios strong { font-weight: 500; color: #14181A; }

/* ---------- App Omnifunk (página PoC) ---------- */
.app-galeria {
  margin-top: 40px; display: grid; gap: 24px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
}
.app-funciones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.app-galeria figure { margin: 0; }
.app-galeria img {
  display: block; width: 100%; height: auto;
  border: 1px solid #949494; border-radius: 4px; background: #14181A;
}
.app-galeria figcaption { margin-top: 12px; font-size: 15px; color: #55625B; text-align: center; }
.tarjeta-app { padding: 0; overflow: hidden; gap: 0; }
.tarjeta-app h3 {
  background: #A2E4B8; color: #14231B; font-size: 20px; padding: 18px 24px;
  border-bottom: 1px solid #949494;
}
.tarjeta-app p { padding: 24px; margin: 0; }
.tarjeta-app:hover h3 { background: #8FDCA8; }
.nota-requisitos { margin-top: 32px; font-size: 15px; color: #55625B; }
.dispositivos-grid {
  margin-top: 32px; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.dispositivo-figura { margin: 0; }
.dispositivo-figura img {
  display: block; width: 100%; height: auto;
  border: 1px solid #949494; border-radius: 4px; background: #FFFFFF;
}
.dispositivo-figura figcaption { margin-top: 12px; font-size: 15px; color: #55625B; }
.dispositivo-nombre { display: block; font-weight: 500; color: #14181A; }
.dispositivo-certs { margin-top: 12px; display: flex; gap: 12px; align-items: center; }
.dispositivo-certs img { width: auto; height: 34px; border: none; border-radius: 0; }

/* ---------- Integración ---------- */
.int-articulo {
  background: #FFFFFF; border: 1px solid #949494; border-radius: 4px; padding: 28px 24px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
}
.int-articulo-texto { flex: 1 1 340px; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.int-articulo-texto p { color: #55625B; max-width: 46em; }
.int-articulo-texto .titulo-caso { font-weight: 600; font-size: 20px; color: #14231B; }
.int-articulo figure { flex: 1 1 520px; min-width: 280px; margin: 0; }
.int-articulo img {
  display: block; width: 100%; height: auto; border: 1px solid #949494; border-radius: 4px; background: #FFFFFF;
}
.int-articulo figcaption { margin-top: 12px; font-size: 15px; color: #55625B; }

.tecnologia-caja { background: #FFFFFF; border: 1px solid #949494; border-radius: 4px; padding: 24px; }
.tecnologia-caja p:first-child { font-weight: 600; color: #14231B; }
.tecnologia-caja .dot-list { margin-top: 14px; }

/* ---------- Formulario de contacto ---------- */
/* El atributo hidden tiene que ganarle a los display de los bloques del formulario:
   main.js oculta el form completo al enviar, y el campo "Otro sector" hasta elegirlo. */
[hidden] { display: none !important; }

.form-contacto {
  background: #FFFFFF; color: #14181A; border-radius: 4px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.form-contacto fieldset { border: none; padding: 0; margin: 0; }
.form-contacto legend { font-weight: 500; padding: 0; }
.form-campo { display: flex; flex-direction: column; gap: 6px; }
.form-campo label { font-weight: 500; }
.form-campo .opcional, .form-campo .obligatorio { color: #55625B; font-weight: 400; }
.form-campo input[type="text"],
.form-campo input[type="email"],
.form-campo input[type="tel"],
.form-campo select,
.form-campo textarea {
  background: #EEF2F0; border: 1px solid #55625B; border-radius: 4px; padding: 12px; min-height: 44px;
}
.form-campo textarea { resize: vertical; }
.form-error { font-size: 13px; color: #A11B1B; font-weight: 500; min-height: 1em; }
.form-checkbox {
  display: flex; gap: 10px; align-items: flex-start; min-height: 44px; cursor: pointer;
}
.form-checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: #1E6E3A; }
.form-checkbox-fila { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.form-checkbox-fila .form-checkbox { margin-top: 0; }
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.form-envio { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-estado { font-size: 14px; color: #55625B; }
.form-exito { background: #FFFFFF; color: #14181A; border-radius: 4px; padding: 40px 32px; }
.form-exito h2 { font-size: 28px; }

/* Honeypot: campo oculto para bots, no editar */
.campo-trampa { position: absolute; left: -9999px; top: -9999px; }

/* ---------- FAQ ---------- */
.faq-lista { margin-top: 32px; border-top: 1px solid #949494; }
.faq-item { border-bottom: 1px solid #949494; padding: 4px 0; }
.faq-item summary {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 0;
  font-size: 20px; font-weight: 500; min-height: 44px;
}
.acordeon-icono {
  flex: none; width: 28px; height: 28px; border: 1px solid #8A968F; border-radius: 4px;
  display: grid; place-items: center; font-size: 18px; line-height: 1; color: #14231B;
}
.faq-item p { padding: 0 0 24px; color: #55625B; max-width: 60ch; }

/* ---------- Legal ---------- */
.legal-cuerpo h2 { margin-top: 40px; font-size: 24px; }
.legal-cuerpo h2:first-child { margin-top: 0; }
.legal-cuerpo p { margin-top: 16px; color: #55625B; }
.legal-cuerpo .dot-list { margin-top: 16px; }
.legal-footer {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid #949494; color: #55625B;
}

/* ---------- Footer ---------- */
.footer-sitio { background: #F7F9F8; padding: 56px 0 40px; margin-top: auto; }
.footer-grid {
  display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.footer-grid h2 { font-size: 16px; }
.footer-grid ul { margin-top: 16px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer-grid .texto-secundario { color: #55625B; }
.footer-logo-prospectiva { margin-top: 20px; display: inline-flex; align-items: center; min-height: 44px; }
.footer-logo-prospectiva img { display: block; width: 54px; height: auto; }
.footer-legal {
  max-width: 75rem; margin: 32px auto 0; padding: 24px 24px 0; border-top: 1px solid #949494;
  color: #55625B; font-size: 13px;
}

/* ---------- Animación de aparición (progresiva, opcional) ---------- */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal-listo [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal-listo [data-revealed] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .js-reveal-listo [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Fichas de terminal (pagina Terminales) ---------- */
/* El header es sticky: sin esto, al llegar desde "Ver mas" de la pagina de Planes
   el ancla deja el titulo metido debajo de la barra. */
.term-ficha { padding-top: 48px; scroll-margin-top: 90px; }
.term-ficha + .term-ficha { border-top: 1px solid #EEF2F0; margin-top: 8px; }
.term-ficha-titulo { font-size: clamp(22px, 2.2vw, 28px); }
.term-ficha-grid {
  display: grid; gap: 32px; margin-top: 24px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
/* Visor: columna de miniaturas y foto grande, dentro del mismo marco. */
.term-visor {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px;
  border: 1px solid #949494; border-radius: 4px; background: #FFFFFF; padding: 16px;
}
.term-miniaturas { display: flex; flex-direction: column; gap: 10px; }
.term-mini {
  appearance: none; border: 1px solid #EEF2F0; border-radius: 4px; background: #F7F9F8;
  padding: 4px; cursor: pointer; min-height: 44px;
}
.term-mini img { width: 100%; height: 56px; object-fit: contain; display: block; }
.term-mini:hover { border-color: #55625B; }
.term-mini[aria-pressed="true"] { border-color: #1E6E3A; background: #FFFFFF; }
.term-principal {
  background: #F7F9F8; border-radius: 4px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
.term-principal img { max-width: 100%; height: 300px; object-fit: contain; display: block; }
.term-lead { color: #55625B; font-size: 17px; text-wrap: pretty; }
.term-specs { margin-top: 20px; border-top: 0; padding-top: 0; }
.term-specs li { font-size: 15px; }
.term-datasheet { margin-top: 24px; font-size: 15px; }

@media (max-width: 720px) {
  /* Las miniaturas pasan a una fila bajo la foto: en vertical dejarian la foto
     demasiado angosta. */
  .term-visor { grid-template-columns: 1fr; }
  .term-miniaturas { flex-direction: row; order: 2; }
  .term-mini { flex: 1; }
  .term-principal { order: 1; }
  .term-principal img { height: 240px; }
}

/* ---------- Planes ---------- */
.plan-selector-envoltorio { display: flex; justify-content: center; margin-top: 20px; }
.plan-selector { display: inline-flex; border: 1px solid #949494; border-radius: 4px; background: #FFFFFF; }
/* El ahorro vive dentro del boton, bajo el nombre del plazo. El boton mensual
   trae una sola linea y el flex de la fila lo estira a la misma altura. */
.plan-selector button {
  appearance: none; border: 0; border-right: 1px solid #949494; background: transparent;
  font: inherit; font-size: 17px; color: #55625B; cursor: pointer;
  padding: 12px 26px; min-height: 44px; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.plan-selector button:first-child { border-radius: 3px 0 0 3px; }
.plan-selector button:last-child { border-right: 0; border-radius: 0 3px 3px 0; }
.plan-selector button:hover { background: #F7F9F8; color: #14181A; }
.plan-selector button[aria-pressed="true"] { background: #A2E4B8; color: #14231B; font-weight: 500; }
/* El ahorro es el argumento del boton, no una nota al pie: va casi del tamano del
   plazo y en negrita. Las tarjetas ya no lo repiten. */
.plan-selector-ahorro { font-size: 16px; font-weight: 600; color: #1E6E3A; }
.plan-selector button[aria-pressed="true"] .plan-selector-ahorro { color: #14231B; }

.planes-grilla {
  margin-top: 32px; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.plan-card {
  border: 1px solid #949494; border-radius: 4px; background: #FFFFFF;
  display: flex; flex-direction: column; overflow: hidden;
}
.plan-card:hover { border-color: #55625B; }
.plan-card.plan-destacado { border-color: #1E6E3A; border-width: 2px; }
.plan-cinta {
  background: #1E6E3A; color: #FFFFFF; font-size: 12px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 7px 12px;
}
/* Reserva el alto de la cinta en las tarjetas que no la llevan, para que las fotos
   y los precios queden a la misma altura en toda la fila. */
.plan-cinta-vacia { visibility: hidden; }
.plan-foto {
  background: #F7F9F8; border-bottom: 1px solid #EEF2F0; padding: 20px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
/* Distintivo de la App en la esquina de la foto del terminal. Va con alt vacio
   a proposito: la lista de la tarjeta ya dice "App Omnifunk configurada", asi que
   para un lector de pantalla seria una repeticion. */
.plan-foto .plan-foto-badge { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; }
.plan-foto img { width: auto; max-width: 100%; height: 132px; object-fit: contain; display: block; }
.plan-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan-nombre {
  font-size: 20px; background: #A2E4B8; color: #14231B; padding: 4px 10px;
  border-radius: 4px; display: inline-block; align-self: flex-start;
}
.plan-precio-bloque { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-precio {
  font-size: 34px; font-weight: 600; color: #14181A;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
.plan-precio.plan-precio-chico { font-size: 24px; }
.plan-precio-sufijo { font-size: 15px; color: #55625B; }
.plan-precio-nota { font-size: 13px; color: #55625B; margin-top: -8px; }
.plan-desc { color: #55625B; font-size: 15px; min-height: 4.8em; }
.plan-card .btn { text-align: center; }
/* La lista se ancla arriba, no abajo: todo lo que va sobre ella tiene alto fijo
   (nombre, precio, contrato, ahorro y descripcion con min-height), asi que su
   linea separadora queda a la misma altura en las cuatro tarjetas. El hueco por
   diferencia de largo se lo come el margin auto de los links del pie. */
.plan-features {
  list-style: none; padding: 16px 0 0; margin: 0;
  border-top: 1px solid #EEF2F0; display: flex; flex-direction: column; gap: 9px;
}
.plan-features li { position: relative; padding-left: 24px; font-size: 14px; color: #55625B; }
.plan-features li::before {
  content: ""; position: absolute; left: 1px; top: 3px; width: 13px; height: 7px;
  border-left: 2px solid #1E6E3A; border-bottom: 2px solid #1E6E3A;
  transform: rotate(-45deg);
}
.plan-nota { font-size: 13px; color: #55625B; }
/* Reparte el texto en lineas parejas. Con text-wrap: pretty la intro de terminales
   cortaba justo despues de "Ademas,", dejando el conector colgando al final de la
   primera linea. Con balance el corte cae dentro de la frase, no en la bisagra. */
.plan-intro { max-width: 58em; text-wrap: balance; }

/* Link "Ver mas" al pie de cada tarjeta de terminal */
.plan-vermas {
  display: inline-block; margin-top: 12px; font-size: 14px; color: #1E6E3A;
  min-height: 24px;
}
/* El primer link del pie empuja el bloque de links al fondo de la tarjeta. */
.plan-features + .plan-vermas { margin-top: auto; padding-top: 12px; }

/* La tarjeta de la App no tiene foto, asi que el distintivo va en la fila del
   nombre, alineado a la derecha. */
.plan-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-titulo-fila .plan-nombre { align-self: center; }
.plan-titulo-fila .plan-foto-badge { width: 40px; height: 40px; flex: none; }

/* Logos de plataforma en la tarjeta de la App */
.plan-plataformas { display: flex; align-items: center; gap: 14px; }
.plan-plataformas img { width: auto; display: block; }
/* El robot de Android es vertical y el de iOS horizontal con wordmark: a la misma
   altura el segundo se ve enorme, asi que se equilibran a ojo, no por numero. */
.plan-plataformas .logo-android { height: 30px; }
.plan-plataformas .logo-ios { height: 20px; }

/* Foto de accesorio, mas baja que la de terminal */
.plan-foto-acc img { height: 104px; }
/* Seccion "Que incluyen los planes": llega desde los links "Detalles del plan",
   y el header sticky le comeria el titulo sin este margen. */
.plan-incluye-seccion { scroll-margin-top: 90px; }
.plan-incluye-grupos { display: grid; gap: 40px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan-incluye-grupo h3 {
  font-size: 20px; background: #A2E4B8; color: #14231B; padding: 4px 10px;
  border-radius: 4px; display: inline-block; margin-bottom: 18px;
}
.plan-incluye-grupo .plan-features { border-top: 0; padding-top: 0; margin: 0; gap: 12px; }
.plan-incluye-grupo .plan-features li { font-size: 16px; }

@media (max-width: 480px) {
  .plan-selector { width: 100%; }
  /* El ahorro puede partirse en dos lineas en pantallas angostas. Sin esto,
     "ahorra hasta 49%" desborda el boton a 320px de ancho. */
  .plan-selector button { flex: 1; padding: 10px 6px; font-size: 15px; white-space: normal; }
  .plan-selector-plazo { white-space: nowrap; }
  .plan-selector-ahorro { font-size: 14px; line-height: 1.25; text-align: center; }
}