/* VET·AI — sitio de mercadeo. Paleta y tipografía heredadas de la
   aplicación real (frontend/src/theme.js, LogoVetai.jsx): teal de marca
   #2e6f6e / #5fb3b1, Baloo 2 para títulos, autoalojada (sin CDN). El
   acento cálido (ámbar) es nuevo aquí -- el sitio de mercadeo necesita
   más rango tonal que la app (que solo usa un color primario). */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/baloo-2-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/baloo-2-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/baloo-2-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/baloo-2-latin-700-normal.woff2') format('woff2');
}

:root {
  --teal-900: #0d211f;
  --teal-800: #12302f;
  --teal-700: #1d4d4c;
  --teal-600: #2e6f6e;
  --teal-500: #3f8b89;
  --teal-300: #5fb3b1;
  --teal-100: #cfe7e5;
  --amber-600: #c97a2e;
  --amber-500: #d98a2b;
  --amber-100: #f7e4c8;
  --ink: #12302f;
  --ink-soft: #3d5654;
  --bg: #f5f9f8;
  --bg-alt: #eaf2f1;
  --surface: #ffffff;
  --border: #d7e6e4;
  --shadow: 0 20px 45px -25px rgba(13, 33, 31, 0.35);

  --font-display: 'Baloo 2', 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1160px;
  --radius-lg: 22px;
  --radius-md: 14px;

  /* Curva de aceleración "premium" -- deceleración marcada, sin rebote,
     el mismo tipo de easing que usan las páginas de producto de Apple.
     Se reutiliza en todas las transiciones de entrada del sitio. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme='dark'] {
  --ink: #eaf4f2;
  --ink-soft: #b7cbc8;
  --bg: #0d211f;
  --bg-alt: #122e2c;
  --surface: #142e2c;
  --border: #1f4341;
  --shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #eaf4f2;
    --ink-soft: #b7cbc8;
    --bg: #0d211f;
    --bg-alt: #122e2c;
    --surface: #142e2c;
    --border: #1f4341;
    --shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
  color: var(--ink-soft);
  max-width: 62ch;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-100);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  margin-bottom: 1.1em;
}

:root[data-theme='dark'] .eyebrow {
  color: var(--teal-300);
  background: rgba(95, 179, 177, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .eyebrow {
    color: var(--teal-300);
    background: rgba(95, 179, 177, 0.16);
  }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), background 0.25s var(--ease-premium);
  white-space: nowrap;
}

.boton-primario {
  background: var(--amber-500);
  color: #241304;
  box-shadow: 0 12px 24px -10px rgba(217, 138, 43, 0.55);
}
.boton-primario:hover {
  background: var(--amber-600);
  transform: translateY(-2px) scale(1.025);
}
.boton-primario:active {
  transform: translateY(0) scale(0.98);
}

.boton-secundario {
  background: transparent;
  color: var(--teal-600);
  border: 1.5px solid var(--teal-600);
}
:root[data-theme='dark'] .boton-secundario {
  color: var(--teal-300);
  border-color: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .boton-secundario {
    color: var(--teal-300);
    border-color: var(--teal-300);
  }
}
.boton-secundario:hover {
  background: var(--teal-100);
  transform: translateY(-2px) scale(1.025);
}
.boton-secundario:active {
  transform: translateY(0) scale(0.98);
}
:root[data-theme='dark'] .boton-secundario:hover {
  background: rgba(95, 179, 177, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .boton-secundario:hover {
    background: rgba(95, 179, 177, 0.14);
  }
}

.boton-claro {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.boton-claro:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Encabezado */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 14px 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}
.marca img {
  height: 38px;
  width: auto;
}
.marca-texto {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--teal-600);
  letter-spacing: 0.3px;
}
:root[data-theme='dark'] .marca-texto {
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .marca-texto {
    color: #ffffff;
  }
}

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-enlaces a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav-enlaces a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-premium);
}
:root[data-theme='dark'] .nav-enlaces a::after {
  background: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav-enlaces a::after {
    background: var(--teal-300);
  }
}
.nav-enlaces a:hover {
  color: var(--teal-600);
}
:root[data-theme='dark'] .nav-enlaces a:hover {
  color: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav-enlaces a:hover {
    color: var(--teal-300);
  }
}
.nav-enlaces a:hover::after {
  transform: scaleX(1);
}

.nav-acciones {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.boton-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.boton-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}

@media (max-width: 860px) {
  .nav-enlaces {
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 1.6rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-enlaces.abierto {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-enlaces a {
    font-size: 1.15rem;
  }
  .nav-acciones .boton-secundario {
    display: none;
  }
  .boton-menu {
    display: block;
  }
}

/* Hero */
.hero {
  padding: 88px 0 96px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--teal-300) 20%, transparent), transparent 45%),
    var(--bg);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
}
.hero-sub {
  font-size: 1.12rem;
  max-width: 52ch;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}
.hero-nota {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.mockup {
  position: relative;
}
.mockup-ventana {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: var(--surface);
  transform: rotate(-1.2deg);
}
.mockup-barra {
  display: flex;
  gap: 6px;
  padding: 11px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.mockup-barra span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.mockup-ventana img {
  display: block;
  width: 100%;
}
.mockup-flotante {
  position: absolute;
  width: 46%;
  right: -6%;
  bottom: -11%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transform: rotate(2.5deg);
  background: var(--surface);
}
.mockup-flotante img {
  width: 100%;
  display: block;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .mockup-flotante {
    display: none;
  }
}

/* Secciones generales */
section {
  padding: 88px 0;
}
.seccion-alt {
  background: var(--bg-alt);
}
.encabezado-seccion {
  max-width: 640px;
  margin: 0 auto 3.2rem;
  text-align: center;
}
.encabezado-seccion .eyebrow {
  display: inline-flex;
}
.encabezado-seccion h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}
.encabezado-seccion p {
  max-width: 56ch;
  margin: 0 auto;
}

/* Problema */
.banner-problema {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
  box-shadow: var(--shadow);
  position: relative;
  max-height: 420px;
}
.banner-problema::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 33, 31, 0) 55%, rgba(13, 33, 31, 0.55) 100%);
}
.banner-problema img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .banner-problema {
    max-height: 240px;
  }
}

.problema-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.tarjeta-problema {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}
.tarjeta-problema:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.tarjeta-problema .icono {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  display: inline-block;
  transition: transform 0.35s var(--ease-premium);
}
.tarjeta-problema:hover .icono {
  transform: scale(1.15) rotate(-4deg);
}
.tarjeta-problema h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4em;
}
.tarjeta-problema p {
  font-size: 0.95rem;
  margin: 0;
}

/* Cómo funciona */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding-top: 0.4rem;
}
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
}
.paso h3 {
  font-size: 1.15rem;
}
.paso p {
  font-size: 0.96rem;
}
.paso-nota {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber-600);
}

@media (max-width: 860px) {
  .problema-grid,
  .pasos {
    grid-template-columns: 1fr;
  }
}

/* Módulos */
.modulos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tarjeta-modulo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta-modulo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.tarjeta-modulo .foto {
  height: 160px;
  overflow: hidden;
}
.tarjeta-modulo .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s var(--ease-premium);
}
.tarjeta-modulo:hover .foto img {
  transform: scale(1.07);
}
.tarjeta-modulo .cuerpo {
  padding: 1.4rem 1.5rem 1.6rem;
}
.tarjeta-modulo h3 {
  font-size: 1.08rem;
  margin-bottom: 0.35em;
}
.tarjeta-modulo p {
  font-size: 0.92rem;
  margin: 0;
}
.tarjeta-modulo.solo-icono .cuerpo {
  padding-top: 1.7rem;
}
.tarjeta-modulo .icono-modulo {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  display: block;
}

@media (max-width: 960px) {
  .modulos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .modulos-grid {
    grid-template-columns: 1fr;
  }
}

/* Diferenciador */
.diferenciador {
  background: linear-gradient(155deg, var(--teal-700), var(--teal-900));
  color: #fff;
  border-radius: 32px;
  padding: 3.2rem;
}
.diferenciador .encabezado-seccion h2,
.diferenciador .encabezado-seccion p {
  color: #fff;
}
.diferenciador .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.diferenciador-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}
.tarjeta-diferenciador {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tarjeta-diferenciador .foto {
  height: 190px;
  overflow: hidden;
}
.tarjeta-diferenciador .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s var(--ease-premium);
}
.tarjeta-diferenciador:hover .foto img {
  transform: scale(1.06);
}
.tarjeta-diferenciador .cuerpo {
  padding: 1.6rem 1.8rem 1.9rem;
}
.tarjeta-diferenciador h3 {
  color: #fff;
  font-size: 1.25rem;
}
.tarjeta-diferenciador p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
@media (max-width: 860px) {
  .diferenciador {
    padding: 2rem 1.4rem;
    border-radius: 22px;
  }
  .diferenciador-grid {
    grid-template-columns: 1fr;
  }
}

/* Capturas reales */
.capturas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.tarjeta-captura {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tarjeta-captura .mockup-barra {
  padding: 9px 12px;
}
.tarjeta-captura img {
  width: 100%;
  display: block;
  transform: scale(1);
  transition: transform 0.7s var(--ease-premium);
}
.tarjeta-captura:hover img {
  transform: scale(1.04);
}
.tarjeta-captura figcaption {
  padding: 1rem 1.2rem 1.3rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.tarjeta-captura figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.2em;
}
@media (max-width: 960px) {
  .capturas-grid {
    grid-template-columns: 1fr;
  }
}

/* Seguridad */
.seguridad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 2.4rem;
}
.item-seguridad {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.item-seguridad .icono {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: transform 0.35s var(--ease-premium);
  background: var(--teal-100);
}
:root[data-theme='dark'] .item-seguridad .icono {
  background: rgba(95, 179, 177, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .item-seguridad .icono {
    background: rgba(95, 179, 177, 0.16);
  }
}
.item-seguridad:hover .icono {
  transform: scale(1.12) rotate(-4deg);
}
.item-seguridad h4 {
  font-size: 1rem;
  margin-bottom: 0.25em;
}
.item-seguridad p {
  font-size: 0.92rem;
  margin: 0;
}
@media (max-width: 700px) {
  .seguridad-grid {
    grid-template-columns: 1fr;
  }
}

/* Planes */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  align-items: stretch;
}
.tarjeta-plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}
.tarjeta-plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.tarjeta-plan.destacada {
  border: 2px solid var(--teal-600);
  box-shadow: var(--shadow);
  transform: scale(1.04);
  z-index: 1;
}
.tarjeta-plan.destacada:hover {
  transform: scale(1.04) translateY(-6px);
}
:root[data-theme='dark'] .tarjeta-plan.destacada {
  border-color: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tarjeta-plan.destacada {
    border-color: var(--teal-300);
  }
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 1em;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-badge-ahorro {
  background: var(--amber-500);
  color: #241304;
}
.tarjeta-plan h3 {
  font-size: 1.3rem;
  margin-bottom: 0.3em;
}
.plan-descripcion {
  font-size: 0.9rem;
  min-height: 2.6em;
}
.plan-precio {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0.6rem 0 0.2rem;
}
.plan-precio .cifra {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--teal-600);
}
:root[data-theme='dark'] .plan-precio .cifra {
  color: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plan-precio .cifra {
    color: var(--teal-300);
  }
}
.plan-precio .periodo {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.plan-nota {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.plan-lista {
  list-style: none;
  margin: 1.1rem 0 1.6rem;
  padding: 0;
  flex-grow: 1;
}
.plan-lista li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.4em 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.plan-lista li:first-child {
  border-top: none;
}
.plan-lista li::before {
  content: '✓';
  color: var(--teal-600);
  font-weight: 700;
  flex-shrink: 0;
}
:root[data-theme='dark'] .plan-lista li::before {
  color: var(--teal-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .plan-lista li::before {
    color: var(--teal-300);
  }
}
.plan-lista-encabezado {
  font-weight: 600;
  color: var(--ink);
}
.plan-lista-encabezado::before {
  content: '' !important;
}
.plan-cta {
  width: 100%;
}
.planes-nota-legal {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 2.2rem auto 0;
  max-width: 640px;
}

@media (max-width: 960px) {
  .planes-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
  .tarjeta-plan.destacada {
    transform: none;
    order: -1;
  }
  .tarjeta-plan.destacada:hover {
    transform: translateY(-6px);
  }
}

/* CTA final */
.cta-final {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
  color: #fff;
  text-align: center;
  border-radius: 32px;
  padding: 4rem 2rem;
}
.cta-final h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.cta-final p {
  color: rgba(255, 255, 255, 0.86);
  margin: 0 auto 1.8rem;
}
.cta-final .hero-cta {
  justify-content: center;
}

/* Pie de página */
.pie {
  background: var(--teal-900);
  color: rgba(255, 255, 255, 0.75);
  padding: 3.5rem 0 2rem;
}
.pie-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.pie-marca {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9rem;
}
.pie-marca img {
  height: 32px;
}
.pie-marca span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
}
.pie p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
}
.pie h5 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pie a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 0.92rem;
}
.pie a:hover {
  color: #fff;
}
.pie-redes {
  display: flex;
  gap: 0.8rem;
}
.pie-redes a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.pie-linea {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 760px) {
  .pie-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .pie-grid {
    grid-template-columns: 1fr;
  }
}

/* Utilidades de aparición al hacer scroll -- discretas y consistentes;
   el "momento" vistoso de la página vive en el hero y en la sección
   anclada (.diferenciador-pin), no aquí. */
.reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Entrada escalonada del hero y sección anclada del Diferenciador --
   ambas son "progresión mejorada": el contenido es visible y legible
   por defecto (sin JS, o si algo falla, nunca queda oculto) y solo se
   oculta para animarse cuando `js-listo` confirma que el script cargó
   bien (lo agrega main.js en la primera línea, antes de pintar). */
html.js-listo .hero-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
  transition-delay: calc(var(--d, 0) * 0.11s);
}
.hero-titulo .linea {
  display: block;
  overflow: hidden;
  /* Un poco de aire extra para que la máscara no corte descendentes
     (p, g) de la propia línea en reposo. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
html.js-listo .hero-titulo .linea .hero-anim-linea {
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease-premium);
  transition-delay: calc(var(--d, 0) * 0.11s);
}
body.jugar-hero .hero-anim {
  opacity: 1;
  transform: none;
}
body.jugar-hero .hero-titulo .linea .hero-anim-linea {
  transform: translateY(0);
}

/* Inclinación 3D del mockup principal del hero, siguiendo el cursor
   (ver seguirCursor() en js/main.js) -- sutil, se resetea suave. */
#mockupPrincipal {
  transition: transform 0.4s var(--ease-premium);
  will-change: transform;
}

/* Encabezado que se condensa al hacer scroll -- detalle de acabado,
   no un efecto vistoso, casi imperceptible a propósito. */
.encabezado {
  transition: box-shadow 0.3s ease;
}
.encabezado.condensado {
  box-shadow: 0 12px 32px -24px rgba(13, 33, 31, 0.45);
}
.encabezado .barra-nav {
  transition: padding 0.3s var(--ease-premium);
}
.encabezado.condensado .barra-nav {
  padding: 9px 0;
}

/* Sección anclada (Diferenciador) -- el contenedor alto crea el rango
   de scroll; el contenido queda fijo en pantalla (position: sticky) y
   sus piezas entran en escena según el progreso, calculado en
   pinDiferenciador() (js/main.js). */
html.js-listo .diferenciador-pin {
  position: relative;
  height: 300vh;
}
html.js-listo .diferenciador-pin-fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  /* Antes tenía overflow:hidden -- si el contenido (encabezado + dos
     tarjetas con foto) era más alto que el alto real de pantalla, el
     título quedaba tapado por el encabezado sticky o el pie de las
     tarjetas se cortaba. overflow-x evita el desborde horizontal de
     las tarjetas mientras entran desde los lados; overflow-y visible
     dejar ver todo el contenido igual, aunque en pantallas muy bajas
     empuje ligeramente por debajo del pliegue. */
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 76px;
  box-sizing: border-box;
}
.diferenciador-pin .diferenciador {
  width: 100%;
  padding: 1.6rem 3.2rem;
}
.diferenciador-pin .encabezado-seccion {
  margin-bottom: 2rem;
}
.diferenciador-pin .tarjeta-diferenciador .foto {
  height: 150px;
}
html.js-listo .diferenciador-pin [data-fase] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
html.js-listo .diferenciador-pin [data-fase='1'][data-desde='izquierda'] {
  transform: translateX(-70px) translateY(10px) scale(0.92);
}
html.js-listo .diferenciador-pin [data-fase='2'][data-desde='derecha'] {
  transform: translateX(70px) translateY(10px) scale(0.92);
}

@media (max-width: 860px) {
  /* En celular el "scroll anclado" se siente forzado (poco alto de
     pantalla, scroll táctil) -- se degrada a bloque estático normal. */
  html.js-listo .diferenciador-pin {
    height: auto;
  }
  html.js-listo .diferenciador-pin-fijo {
    position: static;
    height: auto;
    min-height: 0;
  }
  .diferenciador-pin .diferenciador {
    padding: 1.6rem 1.2rem;
  }
  html.js-listo .diferenciador-pin [data-fase] {
    opacity: 1;
    transform: none;
  }
}

/* Entrada escalonada dentro de cada cuadrícula -- cada tarjeta aparece
   un poco después que la anterior en vez de todas de golpe. Se apoya
   en el mismo mecanismo de .reveal (solo cambia el momento de inicio
   de la transición, vía transition-delay). */
.problema-grid > .reveal:nth-child(2) { transition-delay: 0.1s; }
.problema-grid > .reveal:nth-child(3) { transition-delay: 0.2s; }

.pasos > .reveal:nth-child(2) { transition-delay: 0.12s; }
.pasos > .reveal:nth-child(3) { transition-delay: 0.24s; }

.modulos-grid > .reveal:nth-child(2) { transition-delay: 0.06s; }
.modulos-grid > .reveal:nth-child(3) { transition-delay: 0.12s; }
.modulos-grid > .reveal:nth-child(4) { transition-delay: 0.18s; }
.modulos-grid > .reveal:nth-child(5) { transition-delay: 0.24s; }
.modulos-grid > .reveal:nth-child(6) { transition-delay: 0.3s; }
.modulos-grid > .reveal:nth-child(7) { transition-delay: 0.36s; }
.modulos-grid > .reveal:nth-child(8) { transition-delay: 0.42s; }

.capturas-grid > .reveal:nth-child(2) { transition-delay: 0.12s; }
.capturas-grid > .reveal:nth-child(3) { transition-delay: 0.24s; }

.seguridad-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.seguridad-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.seguridad-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }

.planes-grid > .reveal:nth-child(2) { transition-delay: 0.1s; }
.planes-grid > .reveal:nth-child(3) { transition-delay: 0.2s; }

@media (max-width: 860px) {
  /* En una sola columna el escalonado se siente lento esperando a que
     cada tarjeta llegue a la pantalla -- se desactiva, cada una entra
     apenas se ve, sin retraso artificial. */
  .problema-grid > .reveal,
  .pasos > .reveal,
  .modulos-grid > .reveal,
  .capturas-grid > .reveal,
  .seguridad-grid > .reveal,
  .planes-grid > .reveal {
    transition-delay: 0s;
  }
}