/* =========================================================
   Medical Suite — sitio de promoción
   Tokens: fondo navy oscuro + degradado magenta→azul del
   isotipo fB + acento teal (línea de pulso, signo médico
   de marca ya definido). Sin framework, sin build step.
   ========================================================= */

:root {
  --bg: #0a0e1a;
  --bg-elevated: #121a2e;
  --bg-elevated-2: #17203a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --magenta: #c724b1;
  --blue: #2d6fee;
  --teal: #14e8c4;

  --text: #f4f6fb;
  --text-muted: #8b93a7;
  --text-faint: #5c6584;

  --grad-brand: linear-gradient(100deg, var(--magenta) 0%, var(--blue) 100%);

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --max-w: 1180px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; color: var(--text-muted); }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal);
  color: #04140f;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin: 0 0 0.9em;
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 6px 20px -4px rgba(199, 36, 177, 0.45);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -4px rgba(45, 111, 238, 0.5); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn-login {
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 16px;
  font-size: 0.86rem;
}
.btn-login:hover { border-color: var(--teal); color: var(--teal); }
.btn-login svg { transition: transform 0.18s ease; }
.btn-login:hover svg { transform: translateX(2px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  /* La barra puede ser mas ancha que el cuerpo del sitio. Atada a
     --max-w (1180) se quedaba estrecha aunque la pantalla tuviera 1900,
     y con ocho enlaces mas el boton de acceso los rotulos partian
     palabra: "Para / quien", "Como se / ve". */
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.brand-mark { border-radius: 6px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
}
.brand-name strong { font-weight: 700; }

.main-nav {
  display: flex;
  gap: 20px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Un rotulo de menu partido en dos lineas se lee como dos enlaces. Antes
   que eso, que el menu se pliegue — de eso ya se encarga la media query
   de 940. */
.main-nav a { white-space: nowrap; }
.main-nav a:hover { color: var(--text); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 108px 24px 108px;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
}

.hero-inner { max-width: 760px; }

.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  margin-bottom: 0.4em;
}

.hero-sub {
  font-size: 1.12rem;
  max-width: 560px;
  margin-bottom: 2em;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }






@media (prefers-reduced-motion: reduce) {
  .divider-glow { animation: none; opacity: 0; }
}

/* ---------- Separador animado entre secciones ---------- */
.section-divider { width: 100%; line-height: 0; }
.section-divider svg { width: 100%; height: 32px; display: block; }

.divider-base {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.divider-glow {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(20, 232, 196, 0.7));
  stroke-dasharray: 65 1183;
  animation: pulse-travel-divider 3.6s linear infinite;
}

@keyframes pulse-travel-divider {
  to { stroke-dashoffset: -1248; }
}


/* ---------- Sections ---------- */
.section { padding: 108px 24px; }
.section-alt { background: var(--bg-elevated); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }

.section-head { max-width: 560px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }

.two-col {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
.col-label h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
.col-body p { font-size: 1.02rem; max-width: 520px; }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--bg-elevated-2);
  color: var(--teal);
}
.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 {
  font-size: 1.06rem;
  margin-bottom: 0.5em;
}
.feature-card p { font-size: 0.92rem; margin: 0; }

/* ---------- Sección "Para quién" ---------- */
.audience-lead { max-width: 600px; margin-bottom: 28px; font-size: 1.02rem; }
.audience-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.audience-chip {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-elevated-2);
}

/* ---------- Sección Asesor IA ---------- */
.ai-section {
  text-align: center;
  background: radial-gradient(ellipse 90% 90% at 50% 0%, rgba(45, 111, 238, 0.16), transparent 60%),
              radial-gradient(ellipse 70% 70% at 50% 100%, rgba(199, 36, 177, 0.1), transparent 60%),
              var(--bg);
}
.ai-section .section-inner { max-width: 700px; }
.ai-section h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.ai-lead { font-size: 1.05rem; max-width: 560px; margin: 0 auto; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  /* Sin mayusculas: "SABIA" se lee como la palabra sabia y se pierde el
     juego del nombre, que es saber + IA. Con su caja original se ve de
     donde viene. */
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}

/* ---------- Login band ---------- */
.login-band {
  padding: 76px 24px;
  background: radial-gradient(ellipse 120% 100% at 15% 0%, rgba(199, 36, 177, 0.16), transparent 55%),
              radial-gradient(ellipse 120% 100% at 85% 100%, rgba(45, 111, 238, 0.16), transparent 55%),
              var(--bg-elevated);
}
.login-band-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.login-band-inner h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 0.3em; }
.login-sub { margin: 0; }

/* ---------- Contact list ---------- */
.contact-list { list-style: none; margin: 1.4em 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-list li { display: flex; gap: 14px; align-items: baseline; font-size: 0.98rem; }
.contact-list li span:first-child {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  width: 90px;
  flex-shrink: 0;
}
.contact-list a:hover { color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 44px 24px; }
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand-footer { margin-right: auto; }
.footer-note, .footer-copy { font-size: 0.82rem; color: var(--text-faint); margin: 0; }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #04160f;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.6);
}

.whatsapp-float-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-float-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0.55;
  animation: wa-pulse 2.4s ease-out infinite;
}

.whatsapp-float-label {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-icon::after { animation: none; }
}

@media (max-width: 640px) {
  .whatsapp-float { right: 16px; bottom: 16px; padding: 10px; }
  .whatsapp-float-label { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 76px 20px; }
  .hero { padding-top: 88px; }
}

/* El menu se pliega a 940, no a 640: con "Precios" ya son siete enlaces
   mas el boton de acceso, y a partir de ahi se salian de la barra y
   empujaban la pagina a desplazarse en horizontal. El resto de reglas de
   esta media query siguen en 640, que es donde de verdad hacen falta. */
@media (max-width: 940px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .main-nav a:last-child { border-bottom: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
  }
  .nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; }
  .btn-login { display: none; }
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .login-band-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   GALERÍA DE CAPTURAS — texto a un lado, carrusel al otro
   ============================================================
   Un sitio de un sistema médico sin una sola imagen del producto
   obliga al visitante a imaginárselo. Estas capturas son de datos
   de demostración, nunca de un consultorio real.

   La rejilla anterior ponía seis capturas grandes una tras otra:
   ocupaban media pantalla cada una y había que hacer mucho scroll
   para pasarlas, sin saber cuántas faltaban. El carrusel muestra
   una a la vez, en tamaño contenido, y el lector decide si sigue.

   El lado se alterna sección a sección (.invertida). Cuatro
   bloques idénticos seguidos se leen como una plantilla; alternar
   marca dónde empieza cada uno sin necesidad de un separador.
   ============================================================ */

.section-sub {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 15px;
  max-width: 54ch;
}

.galeria-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(0, 320px);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

/* El texto va a la derecha y el carrusel a la izquierda. Se mueven
   los dos por posición explícita —no con direction ni order— para
   que el orden de lectura y el de tabulación no cambien. */
.galeria.invertida .galeria-inner { grid-template-columns: minmax(0, 320px) 1fr; }
.galeria.invertida .galeria-texto { grid-column: 2; grid-row: 1; }
.galeria.invertida .carrusel      { grid-column: 1; grid-row: 1; }

.galeria-texto h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }

.galeria-lista {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.galeria-lista li {
  position: relative;
  padding-left: 27px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* El check se dibuja con borde en vez de con un carácter: así no
   depende de que la tipografía tenga el glifo. */
.galeria-lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Un documento no es una pantalla de telefono: forzarlo al marco 9/19.5
   lo recortaria hasta dejarlo ilegible. Va con proporcion A4, sobre fondo
   blanco y sin bisel, para que se lea como la hoja que es.

   Conserva el alto de las demas laminas porque la pista la marca la mas
   alta —el telefono—, asi que la hoja queda centrada sin desplazar nada. */
.marco-hoja {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.marco-hoja img {
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
  object-position: center;
  border-radius: 5px;
  background: #fff;
}

/* ---------- Carrusel ---------- */

.carrusel { width: 100%; max-width: 300px; margin: 0 auto; }

/* El desplazamiento nativo hace el trabajo: se puede arrastrar con
   el dedo en el teléfono y con la rueda en el escritorio, y sigue
   funcionando si el JS falla. Los botones solo lo empujan. */
.pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pista::-webkit-scrollbar { display: none; }
.pista:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 8px; }

.lamina {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

/* El marco insinúa un teléfono sin dibujar uno falso: un bisel
   fino y las esquinas redondeadas bastan. */
.marco {
  background: #05070d;
  border: 1px solid var(--border-strong);
  border-radius: 30px;
  padding: 7px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.marco img {
  width: 100%;
  /* Proporción de un teléfono actual. Las capturas tomadas a esta
     medida encajan enteras; el object-fit solo actúa sobre las que
     todavía son de escritorio, recortándolas por abajo. */
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top center;
  border-radius: 24px;
}

/* Alto fijo: si cada pie mide distinto, los mandos saltan de sitio
   al cambiar de lámina y los botones se escapan del cursor. */
.lamina figcaption {
  margin-top: 18px;
  min-height: 68px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.lamina figcaption strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-weight: 600;
}

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

.flecha {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

.flecha:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.flecha:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.flecha:disabled { opacity: .3; cursor: default; }

.puntos { display: flex; gap: 7px; }

.punto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .18s ease, width .18s ease;
}

.punto.is-activo { width: 18px; border-radius: 4px; background: var(--teal); }
.punto:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

@media (max-width: 900px) {
  /* En una columna el carrusel va debajo del texto siempre:
     alternar lados no significa nada si no hay dos lados. */
  .galeria-inner,
  .galeria.invertida .galeria-inner { grid-template-columns: 1fr; gap: 40px; }
  .galeria.invertida .galeria-texto,
  .galeria.invertida .carrusel { grid-column: 1; grid-row: auto; }
  .carrusel { max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .pista { scroll-behavior: auto; }
}


/* ============================================================
   PRECIOS
   ============================================================
   Cinco planes es demasiado para una sola fila: se parten en dos
   bloques, que además es como el propio negocio los piensa —
   quien trabaja solo y quien ya tiene equipo.

   Lo que va arriba del todo no es un plan sino lo que llevan
   TODOS: facturacion SRI, firma y SabIA. Es el argumento
   central frente a la competencia, que los cobra aparte, y si
   estuviera repetido dentro de cada tarjeta se leeria como
   relleno en vez de como diferencia.
   ============================================================ */

.precios-head { max-width: 620px; margin-bottom: 36px; }

.precios-incluido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding: 18px 22px;
  margin-bottom: 44px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: rgba(20, 232, 196, 0.06);
}

.precios-incluido p { margin: 0; color: var(--text); font-size: 15px; }

.precios-incluido ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.precios-incluido li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 14.5px;
}

.precios-incluido li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.precios-bloque { margin-bottom: 52px; }
.precios-bloque h3 { font-size: 1.15rem; margin-bottom: 4px; }
.precios-bloque-sub { color: var(--text-faint); font-size: 14px; margin-bottom: 24px; }

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

/* Uno solo destacado: si se resaltan dos, no se resalta ninguno. */
.plan-destacado {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), 0 18px 44px rgba(0, 0, 0, 0.35);
}

.plan-cinta {
  position: absolute;
  top: -11px;
  left: 24px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--teal);
  color: #06231e;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan-cab { margin-bottom: 16px; }
.plan-cab h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 10px; }

.plan-precio { margin: 0; color: var(--text-muted); font-size: 13px; }
.plan-precio .cifra {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan-nota { font-size: 13px; }

.plan-usuarios {
  margin: 6px 0 0;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}

.plan-quien {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.plan-incluye {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}

.plan-incluye li {
  position: relative;
  padding-left: 24px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.plan-incluye li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plan-incluye em { color: var(--text); font-style: normal; font-weight: 600; }
.plan-incluye strong { color: var(--text); }

.plan-distingue {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.plan-distingue strong { color: var(--text); }

.precios-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.extra {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.extra h4 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 10px; }

.extra-precio {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.extra-precio span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}

.extra p { margin: 0; font-size: 14px; line-height: 1.55; }

.precios-pie {
  max-width: 62ch;
  margin: 0 0 28px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.55;
}

.precios-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.ai-lead-sec { margin-top: 14px; color: var(--text-faint); font-size: 14.5px; }

@media (max-width: 760px) {
  .planes, .precios-extras { grid-template-columns: 1fr; }
  .precios-incluido { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Llamada a la accion por plan. Va en verde de WhatsApp y no en el color
   de marca: el visitante tiene que saber a donde le lleva ANTES de
   pulsar, sobre todo si esta en el movil y va a salirse del sitio.

   El mensaje viaja escrito y diciendo de que plan viene, asi la
   conversacion no empieza por "cual te interesa" — que es justo el paso
   que este boton existe para saltarse. */
.plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid #25d366;
  border-radius: 999px;
  color: #25d366;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color .18s ease, color .18s ease;
}

.plan-cta:hover,
.plan-cta:focus-visible { background: #25d366; color: #06231e; }
.plan-cta:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }

/* En el plan destacado va relleno: es el que se propone. */
.plan-destacado .plan-cta { background: #25d366; color: #06231e; }
.plan-destacado .plan-cta:hover { background: #1fbb59; }

/* ============================================================
   DOCUMENTO LEGAL
   ============================================================
   Una politica de privacidad se lee o no se lee, y casi siempre
   no. Se le da medida de lectura (65 caracteres), aire entre
   secciones y contraste real en el cuerpo — no el gris apagado
   del resto del sitio, que aqui seria una forma elegante de
   esconderla.
   ============================================================ */

.legal { padding: 108px 24px 96px; }
.legal-inner { max-width: 760px; margin: 0 auto; }

.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 8px 0 6px; }

.legal-fecha {
  color: var(--text-faint);
  font-size: 13.5px;
  font-family: var(--font-mono);
  margin-bottom: 34px;
}

.legal-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  max-width: 64ch;
  margin-bottom: 40px;
}

.legal h2 {
  font-size: 1.3rem;
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.legal h3 { font-size: 1.02rem; margin: 26px 0 8px; color: var(--text); }

.legal p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 65ch;
  margin-bottom: 14px;
}

.legal strong { color: var(--text); }
.legal em { color: var(--text); font-style: italic; }
.legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.legal-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
  max-width: 65ch;
}

.legal-lista li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.legal-lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* Quien responde por los datos va primero y se ve primero: de eso
   depende a quien tiene que escribir la persona. */
.legal-destacado {
  padding: 26px 28px;
  margin: 8px 0 40px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: rgba(20, 232, 196, 0.05);
}

.legal-destacado h2 { border: none; padding-top: 0; margin: 0 0 12px; font-size: 1.15rem; }
.legal-destacado p:last-child { margin-bottom: 0; }

.legal-quien {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13.5px !important;
}

/* El dictado manda audio clinico a un tercero. Es lo menos evidente
   de toda la pagina, asi que se saca del cuerpo del texto. */
.legal-aviso {
  padding: 22px 24px;
  margin: 26px 0 34px;
  border-left: 3px solid var(--magenta);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-elevated);
}

.legal-aviso h3 { margin-top: 0; }
.legal-aviso p:last-child { margin-bottom: 0; }

/* La tabla se desplaza dentro de su caja en vez de estirar la pagina. */
.legal-tabla-envoltorio {
  overflow-x: auto;
  margin: 18px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.legal-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }

.legal-tabla th,
.legal-tabla td {
  padding: 13px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.legal-tabla th { color: var(--text); font-weight: 600; background: var(--bg-elevated); }
.legal-tabla td { color: var(--text-muted); vertical-align: top; }
.legal-tabla tr:last-child td { border-bottom: none; }
.legal-tabla td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

.footer-legal { margin-top: 6px; }
.footer-legal a { color: var(--text-faint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--text-muted); }

@media (max-width: 640px) {
  .legal { padding: 80px 20px 72px; }
  .legal-destacado, .legal-aviso { padding: 20px 18px; }
}

/* ---------- Selector mensual / anual ----------
   El precio de renovacion se ve en la misma tarjeta, no en una nota al
   pie. Es la diferencia deliberada con como lo hace la competencia de
   alojamiento: ahi el primer termino es barato y la renovacion sorprende
   al ano. Aqui la pagina entera defiende lo contrario, y una letra
   pequena lo desmentiria. */
.selector-plazo {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.precios-bloque, .selector-plazo, .selector-nota { position: relative; }
.section-inner > .selector-plazo { display: flex; width: fit-content; }

.plazo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.plazo:hover { color: var(--text); }
.plazo.is-activo { background: var(--teal); color: #06231e; }
.plazo:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.plazo-ahorro {
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--teal);
  color: #06231e;
  font-size: 11.5px;
  font-weight: 700;
}

.plazo.is-activo .plazo-ahorro { background: rgba(6, 35, 30, 0.16); color: #06231e; }

.selector-nota {
  max-width: 62ch;
  margin: 0 0 36px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height: 1.55;
}

.plan-oculto { display: none; }

.plan-facturacion {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.plan-facturacion s { color: var(--text-faint); margin-right: 6px; }
.plan-facturacion strong { color: var(--text); }

/* La renovacion no se esconde ni se disimula: se enmarca. */
.plan-renovacion {
  margin: 10px 0 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- Interruptor por tarjeta ----------
   Cada plan manda sobre si mismo. Quien compara dos puede dejar uno en
   mensual y otro en anual y verlos lado a lado, que es la comparacion
   que de verdad hace alguien decidiendo — el selector general obliga a
   recordar la cifra anterior. */
.plan-plazo {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.pz {
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.pz:hover { color: var(--text); }
.pz.is-activo { background: var(--teal); color: #06231e; }
.pz:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- La cuenta de cada modalidad ---------- */
.plan-cuenta {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.plan-cuenta strong { color: var(--text); }
.plan-solo-mensual { color: var(--text-faint); font-style: italic; }
.cuenta-linea { margin: 0 0 12px; font-size: 13.5px; color: var(--text-muted); }
.cuenta-linea s { color: var(--text-faint); margin-right: 6px; }
.cuenta-linea strong { color: var(--text); font-size: 15px; }

/* Los dos ahorros van separados y con nombre. Resumirlos en uno seria
   esconder que la renovacion ahorra la mitad — justo la letra pequena
   que esta pagina dice no tener. */
.plan-ahorros {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(20, 232, 196, 0.07);
  border: 1px solid rgba(20, 232, 196, 0.3);
}

.plan-ahorros > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-ahorros dt { font-size: 12.5px; color: var(--text-muted); }
.plan-ahorros dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--teal); }

.cuenta-renov {
  margin: 0;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.45;
}

.cuenta-renov strong { color: var(--text-muted); }

/* La rebaja de la puesta en marcha con plan anual. Se separa del parrafo
   normal para que no se lea como una condicion mas de la lista: es la
   ventaja, y tiene que verse como tal. */
.extra-anual {
  margin-top: 12px !important;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(20, 232, 196, 0.08);
  border: 1px solid rgba(20, 232, 196, 0.3);
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.extra-anual strong { color: var(--teal); }

/* El IVA se avisa junto al titulo, no solo en el pie: quien mira precios
   decide ahi mismo, y enterarse al final es exactamente la sorpresa que
   esta seccion dice no dar. */
.precios-iva {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13.5px;
}

.precios-iva strong { color: var(--text); }