/* ==========================================================================
   HazteVIP — web comercial
   Mismo sistema de diseño que cartadigital.app: son productos hermanos y
   tienen que parecerlo. Tokens, nombres de clase y anatomía de componentes
   son los suyos; los valores de marca son los de HazteVIP (docs/ESTILO.md),
   para que la web cuadre con la app del socio y con el panel del negocio.
   ========================================================================== */

:root {
  /* Marca: azul de HazteVIP (docs/ESTILO.md), no el de cartadigital. */
  --brand: #1E7AC7;
  --brand-2: #4B9BE0;
  --brand-soft: #E9F2FB;

  --ink: #0E2138;
  --text: #3A3D52;
  --muted: #7A7F94;
  --bg: #ffffff;
  --surface: #F7F8FB;
  --line: #ECEEF3;

  /* Acción: el oro VIP. En la app se reserva a la zona VIP; aquí, además,
     es el color de lo que se pulsa. Sobre oro el texto va OSCURO: blanco
     sobre amarillo no llega al contraste mínimo. */
  --accion: #F8C21C;
  --accion-oscuro: #E0A800;
  --sobre-accion: #1B1300;

  --exito: #0F9D74;    /* lo que incluye un plan, confirmaciones */
  --aviso: #b45309;
  --peligro: #dc2626;

  --grad-marca:  linear-gradient(140deg, #4B9BE0 0%, #1E7AC7 100%);
  --grad-accion: linear-gradient(140deg, #FFD75E 0%, #F8C21C 100%);

  --radio-card: 28px;
  --radius: 16px;
  --radius-lg: 24px;

  --sombra-1: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
  --sombra-2: 0 12px 32px rgba(15,23,42,.10);
  --sombra-3: 0 26px 60px rgba(15,23,42,.15);
  --glow-marca:  0 16px 36px rgba(30,122,199,.28);
  --glow-accion: 0 12px 28px rgba(248,194,28,.34);
  --glow-exito:  0 12px 26px rgba(15,157,116,.26);

  --suave: cubic-bezier(.2,.7,.3,1);
  --seccion-y: clamp(58px, 6.4vw, 104px);
  --maxw: 1280px;

  /* Una sola pila de titulares, con fallback real: si Google Fonts tarda,
     "Be Vietnam Pro" a secas caería al serif del navegador. */
  --fuente-titulo: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-2); }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(36px, 5.2vw, 62px); letter-spacing: -.028em; line-height: 1.05; }
h2 { font-size: clamp(30px, 3.9vw, 52px); letter-spacing: -.028em; }
h3 { font-size: 20px; }
h4 { font-size: 16.5px; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
strong, b { font-weight: 700; color: var(--ink); }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .88em;
  background: var(--brand-soft);
  color: var(--brand);
  padding: .12em .42em;
  border-radius: 6px;
}

:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand); color: #fff; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 32px);
}

section { padding-block: var(--seccion-y); }

/* --------------------------------------------------------------------------
   Botones — pastilla, y el principal en ámbar y mayúsculas
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fuente);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn:active { transform: translateY(1px); }

/* En movil, un rotulo largo con `nowrap` no cabe y empuja la pagina de lado:
   «Abrir el panel de la cafeteria» mide 350 px dentro de una tarjeta que deja
   306, y demo.html se desplazaba en horizontal. Se le deja partir en dos lineas
   —la pastilla aguanta— antes que romper el ancho de la pantalla. */
@media (max-width: 560px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

.btn-primary {
  background: var(--grad-accion);
  color: var(--sobre-accion);
  box-shadow: var(--glow-accion);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14.5px;
  font-weight: 700;
}

.btn-primary:hover {
  color: var(--sobre-accion);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(248,194,28,.45);
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sombra-1);
}

.btn-ghost:hover { color: var(--ink); border-color: #d8dbe6; transform: translateY(-2px); }

.btn-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

.btn-white:hover { color: #fff; background: rgba(255,255,255,.12); border-color: #fff; }

.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-primary.btn-lg { font-size: 16px; }

.acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.acciones.centrado { justify-content: center; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}

.site-header.scrolled { border-color: var(--line); box-shadow: 0 2px 16px rgba(15,23,42,.05); }

.site-header .nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 74px;
}

.marca { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.marca img { height: 40px; width: auto; }
.marca .marca-txt {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--ink);
}
.marca .marca-txt .vip { color: var(--brand); }

.site-header nav { margin-left: auto; }

/* 20 y no 28, y sin partir palabras.

   Con 28 el menu pide 1265 px dentro de una caja de contenido de 1216 —el
   contenedor tope a 1280 menos sus dos margenes de 32—, asi que a CUALQUIER
   ancho, hasta a 1600, los enlaces se encogian por debajo de su texto y
   «Sectores ▾» partia el simbolo a una segunda linea, dejando la cabecera con
   un renglon suelto. Con 20 pide 1205 y entra con 11 px de sobra.

   El `nowrap` es el cinturon: un rotulo del menu no debe partirse nunca, y sin
   el, el sintoma vuelve en cuanto alguien alargue una etiqueta. */
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a { color: var(--text); font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav-links a:hover, .nav-links a.activo { color: var(--brand); }

/* Submenú de sectores: cada uno tiene su página y se llega sin pasar por la home. */
.nav-links .has-sub { position: relative; }
.nav-links .caret { font-size: 10px; opacity: .7; margin-left: 2px; }

.subnav {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 246px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sombra-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

.has-sub:hover .subnav,
.has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }

.subnav a { display: block; padding: 9px 12px; border-radius: 11px; font-size: 14.5px; }
.subnav a:hover { background: var(--brand-soft); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 10px 18px; font-size: 14px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* La franja de 1041 a 1271 px: el menu completo se salia por la derecha.

   El menu de escritorio pide 1241 px de contenido —marca 127, enlaces 686
   (518 de texto y 168 de huecos), botones 380, mas los dos huecos de 24— que
   con el maximo del contenedor son 1272 px de ventana. Pero el corte a menu de
   hamburguesa esta en 1040, asi que entre medias se pintaba el menu entero sin
   sitio: «Montar mi club» se iba fuera de la pantalla y la pagina se desplazaba
   de lado. Justo el rango de un portatil de 1280 o de una ventana a media
   pantalla, medido en las 26 paginas.

   El corte no va en 1272 —donde deja de desbordar la ventana— sino en 1330:
   entre 1272 y 1329 tecnicamente «cabe», pero solo porque el menu se mete en
   los 32 px de margen del contenedor y el boton acaba pegado al borde de la
   pantalla (a 1272, holgura cero). Por debajo de 1330 el margen ya no da, asi
   que ahi empieza la version apretada.

   Se apreta en vez de saltar a la hamburguesa, que en un escritorio canta.
   Fuera el boton secundario —que ya desaparecia por debajo de 1040, asi que no
   es una decision nueva; sigue en el pie y en contacto.html— y huecos mas
   cortos: 193 + 16 + 36 = 245 px ahorrados. Quedan 960 de contenido contra los
   977 disponibles a 1041 px, y el margen de 32 px se respeta en todo el rango. */
@media (max-width: 1329px) {
  .nav-cta .btn-ghost { display: none; }
  .site-header .nav { gap: 16px; }
  .nav-links { gap: 14px; }
}

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .mobile-open .nav-links {
    display: flex;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 16px 22px;
    gap: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sombra-2);
  }
  .mobile-open .nav-links a { padding: 13px 0; width: 100%; border-bottom: 1px solid var(--line); }
}

/* Cabecera en pantallas estrechas.

   A 360 px habia 324 px utiles y el contenido sumaba 354: la marca (127), el
   boton (187) y el menu (40). El resultado es que el BOTON DE MENU se quedaba
   fuera de la pantalla y en movil no se podia navegar. Venia de origen —con el
   texto corto anterior ya se salia, 403 sobre 390— y se agravo al alargarlo.

   Se recorta el boton y la marca en vez de esconder ninguno de los dos: el
   boton es la accion de venta y el menu es la navegacion, y en un movil hacen
   falta los dos. */
@media (max-width: 560px) {
  /* El `gap: 24px` de `.nav` son 48 px de huecos entre las tres piezas: a 360 px
     eso solo ya se come el margen que hacia falta. Es lo que empujaba el menu
     fuera de la pantalla. */
  .site-header .nav { gap: 8px; }
  .nav-cta .btn { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
  .marca { gap: 7px; }
  .marca img { width: 30px; height: 30px; }
  .marca-txt { font-size: 15.5px; }
  .nav-toggle { padding: 8px 0 8px 6px; }
}

/* Pantallas muy estrechas (320 px, moviles pequenos o con el zoom subido): ahi
   ni recortando cabe todo, y lo que se quedaba fuera seguia siendo el menu. Se
   esconde el texto de la marca y queda el icono, que se reconoce igual. Antes
   que perder la navegacion, se pierde el rotulo. */
@media (max-width: 380px) {
  .marca-txt { display: none; }
  .mobile-open .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0;
  }
  .mobile-open .subnav a { border-bottom: 0; padding: 9px 0; font-size: 14px; color: var(--muted); }
}

/* --------------------------------------------------------------------------
   Héroe sobre foto
   -------------------------------------------------------------------------- */
.hero { padding-block: 72px 78px; }
.hero-foto { position: relative; overflow: hidden; color: #fff; padding-block: 92px 84px; }

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/hero-fondo.jpg') center/cover no-repeat;
  /* El velo no es decoración: sin él, el texto blanco sobre foto clara
     desaparece. */
  filter: brightness(.36) saturate(1.05);
  transform: scale(1.04);
}

.hero-foto .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

/* Antetítulo: mayúsculas, ámbar y muy espaciado. No es una pastilla. */
.eyebrow {
  display: inline-block;
  color: var(--brand);
  font-family: var(--fuente-titulo);
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero .eyebrow {
  color: var(--accion);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .18em;
  margin-bottom: 14px;
}

.hero-foto h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin-bottom: 18px; }

/* Azul brillante a secas: sobre foto oscura destaca más que cualquier recuadro. */
.hero-foto h1 .hl {
  color: #4FA8FF;
  text-shadow: 0 0 26px rgba(79,168,255,.55), 0 2px 18px rgba(0,0,0,.45);
}

.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--muted); max-width: 560px; margin-bottom: 28px; }
.hero-foto p.lead { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); }

.hero-metrics {
  display: flex;
  gap: clamp(24px, 3.5vw, 56px);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.hero-metrics .m {
  /* Las tres columnas, al mismo peso: si una etiqueta crece, se reparte el
     ancho en vez de robarselo a las vecinas. Ya paso una vez. */
  flex: 1 1 0;
  min-width: 0;
}

.hero-metrics .m strong {
  display: block;
  /* «7,90 €» es una unidad: nunca entre la cifra y el simbolo. */
  white-space: nowrap;
  font-family: var(--fuente-titulo);
  color: var(--accion);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}

.hero-metrics .m span {
  font-size: clamp(12.5px, 1.05vw, 15px);
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

@media (max-width: 560px) {
  .hero-metrics { gap: 18px; }
  .hero-metrics .m span { font-size: 11.5px; line-height: 1.3; display: block; }
}

/* Cuña diagonal: la sección no termina en línea recta. Se pinta del color de
   la sección que viene detrás, para que el encuentro no deje costura. */
.hero-foto, .cta-band { position: relative; }

.hero-foto::after, .cta-band::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  z-index: 3;
  height: clamp(44px, 5.5vw, 104px);
  pointer-events: none;
}

.hero-foto::after { bottom: -1px; background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 101%); }
.cta-band::after  { top: -1px; background: #F5FAF7; clip-path: polygon(0 0, 100% 0, 0 100%); }

@media (max-width: 640px) {
  .hero-foto::after, .cta-band::after { height: 34px; }
}

/* Cabecera de página interior (no home) */
.pagehead { position: relative; overflow: hidden; color: #fff; padding-block: 84px 96px; text-align: center; }
.pagehead .hero-bg { filter: brightness(.32) saturate(1.05); }
.pagehead .container { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); max-width: 900px; margin-inline: auto; }
.pagehead .eyebrow { color: var(--accion); }
.pagehead p { color: rgba(255,255,255,.92); font-size: clamp(16.5px, 1.35vw, 19.5px); max-width: 700px; margin-inline: auto; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.pagehead .acciones { margin-top: 28px; }
.pagehead::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; z-index: 3; height: clamp(40px, 5vw, 88px); background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 101%); pointer-events: none; }

/* --------------------------------------------------------------------------
   Cabecera de sección
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(34px, 4vw, 56px);
}

.sec-head.izq { justify-items: start; text-align: left; margin-inline: 0; }
.sec-head h2, .sec-head p { margin: 0; }
.sec-head p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); }

.tag {
  display: inline-block;
  color: var(--brand);
  font-family: var(--fuente-titulo);
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Lo resaltado, en color plano con un trazo ámbar debajo. El degradado
   recortado sobre el texto es el recurso de las plantillas generadas: el
   subrayado hace el mismo trabajo y parece hecho a mano. */
.txt-hl {
  color: var(--brand);
  background: linear-gradient(var(--accion), var(--accion)) 0 88% / 100% .14em no-repeat;
  padding-bottom: .06em;
}

/* --------------------------------------------------------------------------
   Fondos de sección — planos, con una línea que los separa
   -------------------------------------------------------------------------- */
.benefits { background: #F4F8FD; border-top: 1px solid #E3EBF5; }
.adv      { background: #F5FAF7; border-top: 1px solid #E2EFE8; }
.showcase { position: relative; overflow: hidden; color: #fff; }

.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 12% 8%, rgba(248,194,28,.16), transparent 62%),
    radial-gradient(760px 400px at 90% 96%, rgba(79,168,255,.20), transparent 64%),
    linear-gradient(150deg, #091624 0%, #12304F 55%, #1B4674 100%);
}

.showcase > .container { position: relative; z-index: 1; }
.showcase h2, .showcase h3, .showcase h4 { color: #fff; }
.showcase p { color: rgba(255,255,255,.78); }
.showcase .tag { color: #FFD98A; }
.showcase .txt-hl { color: #8ACDFF; background: none; }

/* --------------------------------------------------------------------------
   Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 26px;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
  height: 100%;
}

.card:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); border-color: transparent; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card h4 { margin-bottom: 6px; }
.card p { font-size: 14.5px; color: var(--muted); margin-bottom: 0; }
.card ul { font-size: 14.5px; color: var(--muted); margin: 0; padding-left: 1.15em; }
.card.plano:hover { transform: none; box-shadow: var(--sombra-1); border-color: var(--line); }

.card .ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  margin-bottom: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.card .ico svg { width: 24px; height: 24px; stroke-width: 1.7; }
.card .ico.ico-oro   { background: #FFF4D2; color: #8A6100; }
.card .ico.ico-exito { background: #DCF5EC; color: #0B7A5A; }

.showcase .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.showcase .card:hover { background: rgba(255,255,255,.08); border-color: rgba(248,194,28,.4); }
.showcase .card .ico { background: rgba(255,255,255,.08); color: var(--accion); border: 1px solid rgba(255,255,255,.12); }

/* Pasos de «Cómo funciona» */
.benefit {
  background: rgba(255,255,255,.72);
  border: 1px solid #E3EBF7;
  border-radius: var(--radio-card);
  padding: 32px 24px 28px;
  box-shadow: var(--sombra-1);
  text-align: center;
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
  height: 100%;
}

.benefit:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--glow-marca), var(--sombra-2); }

.benefit .big {
  width: 72px; height: 72px;
  border-radius: 22px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  background: var(--grad-marca);
  color: #fff;
  box-shadow: var(--glow-marca);
  font-family: var(--fuente-titulo);
  font-size: 26px;
  font-weight: 800;
  transition: transform .26s var(--suave);
}

.benefit:hover .big { transform: translateY(-3px) rotate(-4deg) scale(1.05); }
.benefit .big svg { width: 32px; height: 32px; stroke-width: 1.7; }
.benefit h3 { font-size: 18px; margin-bottom: 8px; }
.benefit p { font-size: 14.5px; color: var(--muted); margin-bottom: 0; }

.showcase .benefit { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.showcase .benefit .big { background: var(--grad-accion); color: var(--sobre-accion); box-shadow: var(--glow-accion); }

/* Sobre oscuro, el gris de `.card p` y `.benefit p` desaparece. Las reglas de
   `.showcase p` son de una sola clase y perdían por especificidad. */
.showcase .card p,
.showcase .card ul,
.showcase .benefit p,
.showcase .adv-item p,
.showcase .nota { color: rgba(255,255,255,.78); }

.showcase code { background: rgba(255,255,255,.12); color: #BEE3FF; }

/* Ventajas: acento verde, que son «síes» */
.adv-item {
  background: linear-gradient(180deg, #F3FBF6 0%, #EAF7F0 100%);
  border: 1px solid #D5EEE0;
  border-radius: var(--radio-card);
  padding: 20px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  transition: transform .26s var(--suave), box-shadow .26s ease, border-color .26s ease;
}

.adv-item:hover { transform: translateY(-6px); box-shadow: var(--glow-exito), var(--sombra-2); border-color: transparent; }
.adv-item .check { flex: none; display: grid; place-items: center; color: var(--exito); transition: transform .26s ease; }
.adv-item:hover .check { transform: scale(1.08); }
.adv-item .check svg { width: 22px; height: 22px; }
.adv-item h4 { font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.adv-item p { color: #46506B; font-size: 13.8px; line-height: 1.5; margin: 0; }

/* Bloque de dos columnas (texto + visual) */
.bloque .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .bloque .container { grid-template-columns: 1fr; } }
/* `.bloque` parte su contenedor en dos columnas, asi que lo que tiene que ir
   debajo de lado a lado —la fila de botones con la que se cierra el bloque— cae
   si no en la columna izquierda y sale descentrado. */
.bloque .container > .ancho-total { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Pastillas de sectores
   -------------------------------------------------------------------------- */
/* Con `flex-wrap` las diez pastillas caian 8 + 2 —y con un ancho maximo, 5 + 4 + 1—,
   porque los rotulos miden cosas muy distintas y el corte lo decide el que no cabe.
   Con rejilla el reparto es exacto: cinco por fila en escritorio, y menos columnas
   segun encoge la pantalla. Las columnas van a `auto`, asi que cada pastilla sigue
   midiendo lo que mide su texto. */
.pastillas {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: 10px;
}
/* Con diez elementos, solo 5, 2 y 1 columnas reparten exacto: con 3 vuelve a
   quedar una suelta al final (3+3+3+1), que es lo que habia que quitar. */
@media (max-width: 1040px) { .pastillas { grid-template-columns: repeat(2, auto); } }
@media (max-width: 380px)  { .pastillas { grid-template-columns: auto; } }

/* La rejilla estira cada pastilla hasta el ancho de su columna, asi que el
   rotulo corto quedaba pegado a la izquierda de una pastilla ancha: se centra
   el contenido dentro de la caja. */
.pastilla {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sombra-1);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Tabla comparativa
   -------------------------------------------------------------------------- */
/* `overflow-x: auto` obliga a que `overflow-y` deje de ser `visible` (lo
   fuerza el propio spec, aunque no se escriba), y con eso `.tabla-scroll`
   pasa a ser el contenedor de referencia de la cabecera `sticky` — no el
   viewport. Como `.tabla-scroll` nunca hace scroll interno de verdad (crece
   con su contenido), la cabecera deja de fijarse: se limita a desplazarse
   con la pagina a un offset fijo, así que la primera fila termina asomando
   por encima de la cabecera en vez de quedar tapada por ella.
   El scroll horizontal solo hace falta cuando la tabla de verdad no cabe, y
   eso no es el mismo ancho en todas las tablas —comparativa.html tiene una
   columna mas que la de la home—, así que no vale un punto de corte fijo:
   `main.js` mide `scrollWidth` contra `clientWidth` de cada tabla y añade
   `.desborda` solo cuando hace falta. Por defecto va sin `overflow-x`, que
   es el caso normal en escritorio y donde la cabecera se fija de verdad. */
.tabla-scroll {
  border-radius: var(--radio-card);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sombra-1);
}

.tabla-scroll.desborda {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cmp { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }

.cmp thead th {
  position: sticky;
  top: 74px;
  background: var(--surface);
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 2px solid #dfe3ec;
  white-space: nowrap;
}

/* Con `.desborda` la cabecera vuelve a enganchar al contenedor y no al
   viewport (ver arriba): se renuncia a fijarla en vez de dejar el hueco
   fantasma. */
.tabla-scroll.desborda .cmp thead th { position: static; }

.cmp thead th.us { background: linear-gradient(150deg, #0E2138, #1B4674); color: #fff; border-bottom-color: var(--accion); }
.cmp tbody td.us { background: rgba(30,122,199,.05); font-weight: 600; color: var(--ink); }
.cmp tbody tr:hover td { background: rgba(30,122,199,.035); }
.cmp tbody tr:hover td.us { background: rgba(30,122,199,.09); }
.cmp th[scope="row"] { font-family: var(--fuente); font-weight: 600; font-size: 14.5px; color: var(--ink); background: #fff; }
.cmp .grupo th { background: var(--brand-soft); color: var(--brand); font-family: var(--fuente-titulo); font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }

.si, .no, .medio { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.8px; }
.si { color: #0B7A5A; }
.no { color: #97a3b4; }
.medio { color: var(--aviso); }

.si::before, .no::before, .medio::before {
  content: ""; width: 17px; height: 17px; border-radius: 50%; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}

.si::before { background-color: #DCF5EC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a5a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.no::before { background-color: #EEF1F5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3b4' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.medio::before { background-color: #FDF0DC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

.nota { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.nota a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; align-items: stretch; }
@media (max-width: 940px) { .planes { grid-template-columns: 1fr; max-width: 460px; } }

/* Cuatro opciones —la prueba y los tres planes— no caben en la rejilla de tres:
   sale un 3+1 con una tarjeta suelta. Baja a 2x2 antes que a una columna, que
   con cuatro tarjetas altas obliga a un scroll largo. */
.planes.cuatro { grid-template-columns: repeat(4, 1fr); max-width: 1200px; }
@media (max-width: 1180px) { .planes.cuatro { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
@media (max-width: 700px)  { .planes.cuatro { grid-template-columns: 1fr; max-width: 460px; } }

/* «A medida» no es una cifra: a 40 px se come el ancho de la tarjeta. */
.plan-precio.texto { font-size: 30px; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 30px 26px 26px;
  box-shadow: var(--sombra-1);
  transition: transform .26s var(--suave), box-shadow .26s ease;
}

.plan:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); }
.plan-destacado { border: 2px solid var(--brand); box-shadow: 0 22px 54px rgba(30,122,199,.18); }

.plan-etiqueta {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--grad-accion);
  color: var(--sobre-accion);
  font-family: var(--fuente-titulo);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--glow-accion);
}

.plan h3 { font-size: 20px; margin: 0; }
.plan > p { margin: 6px 0 16px; color: var(--muted); font-size: 14.5px; min-height: 42px; }

.plan-precio { font-family: var(--fuente-titulo); font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.plan-precio span { font-family: var(--fuente); font-size: 14.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-alt { font-size: 13.5px; color: var(--exito); font-weight: 700; margin-bottom: 20px; }

.plan-lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; font-size: 14.5px; }
/* El check va posicionado, no como item de un flex: con `display:flex` en el
   `li`, cualquier marcado dentro del texto —un `<strong>` para destacar el
   limite del plan— se convertia en OTRO item de la fila y salia partido por el
   `gap`, con el resto de la frase reordenado alrededor. Asi el contenido del
   `li` es texto normal y admite negrita, enlaces o `code` sin romperse. */
.plan-lista li { position: relative; padding-left: 26px; margin: 0; color: var(--text); }
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #DCF5EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a5a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.plan .btn { margin-top: auto; justify-content: center; }

/* Conmutador mensual / anual */
.conmutador {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 40px;
}

.conmutador button {
  font-family: var(--fuente-titulo);
  font-size: 14.5px; font-weight: 700;
  color: var(--muted);
  background: transparent; border: 0;
  padding: 10px 20px; border-radius: 999px;
  cursor: pointer; transition: all .18s ease;
}

.conmutador button.on { background: #fff; color: var(--brand); box-shadow: var(--sombra-1); }
.conmutador .ahorro { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800; color: #0B7A5A; background: #DCF5EC; padding: 2px 7px; border-radius: 999px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-wrap { max-width: 860px; margin: 0 auto; }

.faq-item { border: 1px solid var(--line); border-radius: var(--radio-card); margin-bottom: 12px; background: #fff; overflow: hidden; box-shadow: var(--sombra-1); }

.faq-q {
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 19px 22px;
  font-family: var(--fuente-titulo);
  font-weight: 700; font-size: 16px; color: var(--ink);
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}

.faq-q .pm { color: var(--brand); font-size: 22px; line-height: 1; transition: transform .2s; flex: none; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 22px 18px; color: var(--muted); font-size: 15px; margin: 0; }
.faq-a p + p { padding-top: 0; }

/* --------------------------------------------------------------------------
   Franja de llamada final
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(120deg, rgba(9,22,36,.94) 0%, rgba(18,48,79,.86) 45%, rgba(27,70,116,.80) 100%),
    url('../img/hero-fondo.jpg') center 70% / cover no-repeat;
  padding-block: clamp(84px, 9vw, 148px);
}

.cta-band::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 360px at 12% 8%, rgba(248,194,28,.30), transparent 62%),
    radial-gradient(760px 400px at 90% 96%, rgba(79,168,255,.28), transparent 64%);
}

.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -.028em; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.86); font-size: clamp(16.5px, 1.35vw, 19.5px); max-width: 620px; margin: 0 auto 28px; }

/* --------------------------------------------------------------------------
   Avisos y notas
   -------------------------------------------------------------------------- */
.aviso {
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--text);
}

.aviso strong { color: var(--brand); }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radio-card); overflow: hidden; }
@media (max-width: 760px) { .cifras { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cifras .c { background: #fff; padding: 24px 18px; text-align: center; }
.cifras .c b { display: block; font-family: var(--fuente-titulo); font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; color: var(--brand); letter-spacing: -.035em; line-height: 1.1; }
.cifras .c span { font-size: 13.5px; color: var(--muted); }

/* Rótulos, no cifras.
   Antes esto era `.cifras`, un bloque de cuatro columnas con el rótulo a 34 px
   pensado para números cortos («2.400», «98 %»). Con palabras dentro no cabía:
   en la columna estrecha de «Datos y seguridad» cada celda deja 106 px útiles y
   «Auditoría» mide 149, así que el `overflow:hidden` del contenedor la cortaba a
   media palabra, y «Multi-tenant» partía en dos líneas. Dos columnas y un rótulo
   a la medida de una palabra. */
.rasgos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radio-card); overflow: hidden; }
@media (max-width: 420px) { .rasgos { grid-template-columns: minmax(0,1fr); } }
.rasgos .r { background: #fff; padding: 22px 20px; }
.rasgos .r b { display: block; margin-bottom: 5px; font-family: var(--fuente-titulo); font-size: 19px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; line-height: 1.2; }
.rasgos .r span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form-fila { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 620px) { .form-fila { grid-template-columns: minmax(0,1fr); } }

.campo label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.campo label .req { color: var(--peligro); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--fuente);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #dfe3ec;
  border-radius: 14px;
  padding: 13px 15px;
  transition: border-color .16s, box-shadow .16s;
}

.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(30,122,199,.14); }
.campo .pista { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--brand); }

/* --------------------------------------------------------------------------
   Maqueta de móvil
   -------------------------------------------------------------------------- */
.movil {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  aspect-ratio: 300 / 610;
  background: #0b1a2c;
  border-radius: 42px;
  padding: 10px;
  box-shadow: var(--sombra-3), 0 0 0 1.5px rgba(255,255,255,.16);
}

.movil-pantalla { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: #f5f7fa; display: flex; flex-direction: column; }
.movil-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 92px; height: 21px; background: #0b1a2c; border-radius: 999px; z-index: 3; }












/* Tarjetas flotantes junto al móvil */
/* Los dos moviles NO se dibujan aqui: son la pantalla real de la app, portada
   en `assets/css/app-mockup.css` desde sus propias vistas. Aqui solo queda el
   marco y las tarjetas flotantes, que si son de la web. */
.movil-wrap { position: relative; }

.flota {
  position: absolute;
  background: rgba(255,255,255,.97);
  border-radius: 16px;
  box-shadow: var(--sombra-3);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink); font-weight: 600;
  z-index: 2;
  animation: flotar 5.5s ease-in-out infinite;
}

.flota i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font-style: normal; font-size: 16px; }
.flota small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.flota.a { top: -9%; left: -7%; }
.flota.b { bottom: 15%; right: -7%; animation-delay: 1.6s; }

@media (max-width: 1100px) { .flota.a { left: -2%; } .flota.b { right: -2%; } }
@media (max-width: 520px) { .flota { display: none; } }

@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.site-footer { background: #0F1120; color: #A9AEC2; padding: 64px 0 28px; font-size: 14.5px; }

.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.09); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }

.footer-marca img { height: 54px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: .95; }
.footer-marca p { max-width: 320px; font-size: 14px; color: #8B90A6; }

.site-footer h4 { color: #fff; font-family: var(--fuente-titulo); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer ul li { margin: 0; }
.site-footer a { color: #A9AEC2; }
.site-footer a:hover { color: #fff; }

.footer-bajo { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: #757B93; }
.footer-bajo nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* --------------------------------------------------------------------------
   Aparición progresiva
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .plan:hover, .benefit:hover, .adv-item:hover, .btn:hover { transform: none; }
}

@media print {
  .site-header, .cta-band, .site-footer, .flota { display: none !important; }
  body { color: #000; font-size: 12pt; }
}