/* ==========================================================================
   Praxia — sitio de marketing
   Paleta y tipografías tomadas 1:1 de src/index.css (manual de marca Praxia
   v1.0 · Septiembre 2026) para que el sitio se sienta la misma marca que la
   app real, no una reinterpretación.

   Sistema visual: en vez del kit genérico de SaaS (mockup de laptop
   flotando, cards con el mismo radius/sombra para todo, eyebrows en
   mayúscula trackeada arriba de cada título), el motivo es la ficha de
   papel de un consultorio real — cada captura de pantalla se presenta como
   una ficha con esquina cortada y un código de registro (".ficha"), y la
   sección de seguridad usa una textura fina tipo papel de seguridad
   (recetario/formulario oficial) en vez de un gradiente decorativo.
   ========================================================================== */

:root {
  --font-sans: Outfit, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: Outfit, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --color-ink: #1b2a3a;
  --color-ink-rgb: 27, 42, 58;
  --color-graphite: #6e7c85;
  /* El graphite de marca da 4.3:1 sobre blanco, por debajo de AA para texto.
     Para párrafos y links se usa esta variante más oscura del mismo gris. */
  --color-text-muted: #55636c;
  --color-bone: #fafaf9;
  --color-white: #ffffff;

  --color-accent: #1b2a3a;
  --color-accent-strong: #121e29;
  --color-accent-foreground: #fafaf9;

  --color-success: #2e9b7a;
  --color-danger: #c05a3e;

  /* Único color "de más" respecto al manual de la app: el celeste del
     isotipo (el cuarto brazo de la cruz, #2E8EA8). En la app no se usa como
     token porque el acento ahí es siempre el ink; acá lo usamos como chispa
     puntual —un subrayado, un punto— para no gastar el acento en decoración. */
  --color-spark: #2e8ea8;
  --color-spark-rgb: 46, 142, 168;

  --radius-sm: 2px;
  --notch: 16px;
  --container: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bone);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.15;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

p {
  margin: 0;
  line-height: 1.65;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
  white-space: nowrap;
}

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

.btn:focus-visible {
  outline: 2px solid var(--color-spark);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-bone);
}

.btn-primary:hover {
  background: var(--color-accent-strong);
  box-shadow: 0 8px 24px -12px rgba(var(--color-ink-rgb), 0.45);
}

.btn-secondary {
  background: transparent;
  border-color: rgba(var(--color-ink-rgb), 0.22);
  color: var(--color-ink);
}

.btn-secondary:hover {
  background: rgba(var(--color-ink-rgb), 0.05);
  border-color: rgba(var(--color-ink-rgb), 0.4);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 0.95rem;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    padding 0.3s var(--ease);
  border-bottom: 1px solid transparent;
  background: rgba(250, 250, 249, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header.is-scrolled {
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(var(--color-ink-rgb), 0.08);
  padding: 12px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.brand img {
  width: 30px;
  height: 30px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a:not(.btn) {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}

.main-nav a:not(.btn):hover {
  color: var(--color-ink);
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-spark);
  transition: right 0.25s var(--ease);
}

.main-nav a:not(.btn):hover::after {
  right: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  color: var(--color-ink);
}

/* ---------- Hero ---------- */
/* Foto de fondo: una receta de Praxia Clinic recién escrita, con el
   escritorio libre a la izquierda para el título. El velo claro solo cubre
   esa mitad, para que el texto se lea sin lavar la receta. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(100svh, 880px);
  padding: 140px 0 96px;
  overflow: hidden;
}

/* La caja se extiende 6vw más allá del borde derecho (el hero la recorta)
   para correr la hoja hacia la derecha y que no pise el texto, sin perder
   la mano del médico. */
.hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: calc(100% + 6vw);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(250, 250, 249, 0.94) 0%,
    rgba(250, 250, 249, 0.8) 30%,
    rgba(250, 250, 249, 0) 48%
  );
}

.hero-copy {
  max-width: 540px;
}

/* Tope más bajo que el h1 global para que "Todo tu consultorio," entre en
   una línea sin pisar la receta de la foto. */
.hero-copy h1 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 1.5rem + 2.8vw, 3.4rem);
}

.hero-copy .lede {
  margin-bottom: 32px;
  max-width: 480px;
  color: var(--color-text-muted);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero .btn-secondary {
  background: rgba(250, 250, 249, 0.7);
}

/* ---------- Ficha: el motivo del sitio ----------
   Una captura de pantalla presentada como una ficha de papel: esquina
   cortada, código de registro mono en la solapa, sombra plana (no blur) —
   como una carpeta apoyada sobre el escritorio, no una ventana de software
   flotando en el aire. */
/* El notch, el borde y el fondo van en ".ficha-shape" (el hijo clipeado);
   ".ficha" (el padre) queda sin clip-path para poder llevar la sombra
   (drop-shadow, que sí sigue la silueta recortada de sus hijos) y la
   etiqueta ".ficha-tag" sin que el propio clip-path del padre se los coma. */
.ficha {
  position: relative;
  filter: drop-shadow(7px 7px 0 rgba(var(--color-ink-rgb), 0.18));
}

.ficha-shape {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-ink-rgb), 0.16);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  overflow: hidden;
}

.ficha-tag {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--color-bone);
  background: var(--color-ink);
  padding: 5px 11px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.feature-row .ficha,
.specialty-card .ficha {
  width: 100%;
}

.ficha-shape .shot-wrap {
  position: relative;
  aspect-ratio: 16 / 10.4;
  background: var(--color-bone);
  overflow: hidden;
}

.ficha-phone .shot-wrap {
  aspect-ratio: 9 / 16;
}

.shot {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: var(--color-bone);
}

/* Detrás de la captura siempre (ver z-index arriba): solo se ve si el script
   oculta la imagen por no encontrarla (ver main.js, markMissing). Así una
   captura que todavía no se generó no rompe el layout ni muestra el ícono
   de imagen rota del navegador. */
.shot-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-ink-rgb), 0.05);
}

.shot-placeholder svg {
  width: 28%;
  height: 28%;
  color: rgba(var(--color-ink-rgb), 0.28);
}

/* ---------- Recorte ampliable ---------- */
.shot-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
}

.shot-zoom:focus-visible {
  outline: 2px solid var(--color-spark);
  outline-offset: -3px;
}

/* Siempre visible (no solo al hover): en touch no hay hover y es la única
   pista de que el recorte se puede ampliar. */
.zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 0.75rem;
  color: var(--color-bone);
  background: rgba(var(--color-ink-rgb), 0.82);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s var(--ease);
}

.zoom-hint svg {
  width: 13px;
  height: 13px;
}

.shot-zoom:hover .zoom-hint {
  background: var(--color-ink);
}

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 92vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(18, 30, 41, 0.86);
}

.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, 94vw);
  max-height: 88vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 250, 249, 0.12);
  color: var(--color-bone);
  cursor: pointer;
}

.lightbox-close svg {
  width: 22px;
  height: 22px;
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--color-spark);
  outline-offset: 2px;
}

/* ---------- Secciones genéricas ---------- */
section {
  padding: 96px 0;
}

/* Compensa el header fijo al navegar con anclas (#funcionalidades, etc.):
   sin esto el título de la sección queda tapado detrás del header. */
section[id] {
  scroll-margin-top: 84px;
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.section-head .lede {
  margin-top: 16px;
  max-width: 56ch;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Dolor / gancho ---------- */
/* Lista con separadores finos, como un check-list de recepción — no otra
   grilla de cards con borde. */
.pain-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}

.pain-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 28px 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.12);
}

.pain-item .icon {
  width: 26px;
  height: 26px;
  color: var(--color-danger);
  flex: none;
  margin-top: 2px;
}

.pain-item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.pain-item p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.pain-resolve {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.12);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
}

.pain-resolve svg {
  width: 22px;
  height: 22px;
  color: var(--color-success);
  flex: none;
}

/* ---------- Features (alternadas con captura) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}

.feature-row:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.feature-row.reverse .feature-copy {
  order: 2;
}

.feature-copy h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 14px;
}

.feature-copy p {
  color: var(--color-text-muted);
  margin-bottom: 18px;
  max-width: 62ch;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.feature-list svg {
  width: 16px;
  height: 16px;
  color: var(--color-success);
  margin-top: 3px;
  flex: none;
}

.feature-row .ficha {
  margin-top: 22px;
}

.feature-row.reverse .ficha {
  margin-top: 0;
}

/* Zoom sutil al detalle: la captura entra un poco más grande al pasar el
   mouse por la fila entera, nunca abrupto. */
.shot-wrap img {
  transition: transform 0.6s var(--ease);
}

.feature-row:hover .shot-wrap img {
  transform: scale(1.02);
}

/* Con ".feature-row" adelante para ganarle a ".feature-row .ficha { width: 100% }":
   sin eso el teléfono ocupa toda la columna (~540×950px). */
.feature-row .ficha-phone {
  width: min(240px, 60%);
  margin: 0 auto;
}

/* ---------- Especialidades ---------- */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px 28px;
  margin-top: 8px;
}

.specialty-card .body {
  padding: 22px 4px 4px;
}

.specialty-card h3 {
  margin-bottom: 10px;
}

.specialty-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.specialty-note {
  max-width: 60ch;
  margin: 48px auto 0;
  text-align: center;
  color: var(--color-text-muted);
}

.specialty-card:hover .ficha-tag {
  background: var(--color-spark);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-size: 0.78rem;
  color: var(--color-ink);
  border: 1px solid rgba(var(--color-ink-rgb), 0.16);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Precios ----------
   Tres planes que solo difieren en cantidad de profesionales. El destacado
   usa el mismo lenguaje de ficha que las capturas: solapa mono y sombra
   dura, en vez de un badge flotante. */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-ink-rgb), 0.14);
}

.plan h3 {
  font-size: 1.35rem;
}

.plan-for {
  margin-top: 4px;
  color: var(--color-text-muted);
}

.plan-price {
  margin: 24px 0 6px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan-currency,
.plan-per {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.plan-note {
  margin-bottom: 22px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.plan-services {
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.1);
}

.plan-services li {
  font-size: 0.9rem;
}

.pricing-trial {
  margin-top: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.referral {
  max-width: 640px;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.14);
  text-align: center;
}

.referral h3 {
  margin-bottom: 10px;
}

.referral p {
  color: var(--color-text-muted);
}

.plan .btn {
  margin-top: auto;
}

.plan-featured {
  border-color: var(--color-ink);
  box-shadow: 7px 7px 0 rgba(var(--color-ink-rgb), 0.18);
}

.plan-featured .ficha-tag {
  left: -1px;
}

.plan-includes {
  max-width: 860px;
  margin: 64px auto 0;
}

.plan-includes h3 {
  margin-bottom: 20px;
  text-align: center;
}

.plan-includes .feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
}

.pricing-fine {
  max-width: 60ch;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ---------- Seguridad ---------- */
/* Bloque oscuro con una textura fina de líneas diagonales — el mismo
   recurso que un papel de seguridad de recetario o formulario oficial,
   en vez de un gradiente de color decorativo. */
.security-wrap {
  background: var(--color-ink);
  padding: clamp(36px, 5vw, 64px);
  color: var(--color-bone);
  position: relative;
  overflow: hidden;
}

.security-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 9px
  );
  pointer-events: none;
}

.security-wrap .section-head {
  position: relative;
}

.security-wrap .section-head h2 {
  color: var(--color-bone);
}

.security-wrap .section-head .lede {
  color: rgba(250, 250, 249, 0.72);
}

.security-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}

.security-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.security-item .icon {
  width: 24px;
  height: 24px;
  color: #7fd0e4;
  flex: none;
  margin-top: 2px;
}

.security-item h3 {
  color: var(--color-bone);
  font-size: 1rem;
  margin-bottom: 8px;
}

.security-item p {
  color: rgba(250, 250, 249, 0.68);
  font-size: 0.88rem;
}

/* ---------- CTA final ---------- */
.cta-final {
  text-align: center;
}

.cta-final h2 {
  margin-bottom: 16px;
}

.cta-final .lede {
  margin: 0 auto 36px;
  text-align: center;
}

.cta-final .hero-ctas {
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.1);
  padding: 40px 0;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: 0.95rem;
  text-decoration: none;
}

.footer-brand img {
  width: 22px;
  height: 22px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 22px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.footer-links a {
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer-links a:hover {
  color: var(--color-ink);
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}

.footer-social a:hover {
  color: var(--color-ink);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---------- Reveal on scroll ---------- */
/* Mejora progresiva: visible por defecto. El estado oculto de partida solo
   se activa si main.js llegó a correr y marcó <html class="js"> (ver
   index.html) — así el contenido nunca depende de JS para mostrarse, solo
   para animarse. */
.reveal {
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}

/* Mismo prefijo "html.js" que la regla de arriba: si no fuera así, esta
   regla (una sola clase de más) empataría o perdería en especificidad
   contra "html.js .reveal" según el orden de declaración, y el elemento
   podía quedar con opacity:0 para siempre aunque ya tuviera .is-visible. */
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > * {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Responsive ---------- */
/* En pantallas angostas no hay escritorio libre para el título: el texto va
   arriba sobre fondo liso y la foto abajo, recortada sobre la receta. */
@media (max-width: 920px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero::before {
    display: none;
  }
  .hero-photo {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 48px;
    object-position: right center;
  }
  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .feature-row.reverse .feature-copy {
    order: 0;
  }
  .feature-row .ficha,
  .feature-row.reverse .ficha {
    margin-top: 0;
  }
  .pricing {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    gap: 44px;
  }
  .plan-includes .feature-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El menú completo necesita ~850px; por debajo de eso se pisa con el logo
   y el botón "Pedí una demo" queda cortado. */
@media (max-width: 980px) {
  .main-nav {
    position: fixed;
    inset: 64px 16px auto 16px;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-ink-rgb), 0.1);
    border-radius: 6px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    box-shadow: 0 24px 50px -20px rgba(var(--color-ink-rgb), 0.3);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.25s var(--ease),
      transform 0.25s var(--ease);
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .nav-links .btn {
    margin-top: 6px;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 120px;
  }
  /* Recorte vertical: la receta llena el ancho del teléfono y se lee el
     diagnóstico, en vez de quedar chica sobre el escritorio. */
  .hero-photo {
    aspect-ratio: 4 / 5;
    object-position: 82% center;
  }
  /* A 375px la pantalla completa de la app es ilegible: se muestra al doble
     de ancho y se recorre con scroll. */
  .lightbox {
    max-width: 100vw;
    width: 100vw;
    max-height: 80vh;
    overflow: auto;
  }
  .lightbox-img {
    max-width: none;
    max-height: none;
    width: 220vw;
  }
  section {
    padding: 64px 0;
  }
  .pain-list,
  .security-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

@media (max-width: 520px) {
  .hero-ctas .btn {
    width: 100%;
  }
}