/* The Big Squad — CSS propio, escrito a mano.
   css/styles.css es Tailwind YA COMPILADO: solo contiene las clases que usaba la web original.
   Todo lo que se añada después y no esté allí va aquí. Dos bloques:
     1) utilidades Tailwind que faltaban en el compilado (mismo nombre, mismo comportamiento)
     2) estilos propios: casilla de consentimiento del formulario y páginas legales
*/

/* ---------- 1. Utilidades que faltaban en el compilado ---------- */
.gap-3 { gap: .75rem; }
.mt-1 { margin-top: .25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-24 { margin-top: 6rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-6 { margin-bottom: 1.5rem; }
.max-w-3xl { max-width: 48rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.list-disc { list-style-type: disc; }
.pl-6 { padding-left: 1.5rem; }
.pt-32 { padding-top: 8rem; }

/* ---------- 2a. Casilla de consentimiento (RGPD) del formulario ---------- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .875rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.consent input[type="checkbox"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}
.consent a { color: hsl(var(--primary)); }
.consent a:hover { text-decoration: underline; }

/* ---------- 2b. Páginas legales (privacidad, aviso legal) ---------- */
.legal { max-width: 45rem; margin-left: auto; margin-right: auto; padding: 8rem 0 6rem; }
.legal h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: .75rem; }
.legal .legal-updated { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 3rem; }
.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.5rem 0 .875rem;
  color: hsl(var(--foreground));
}
.legal p, .legal li { color: hsl(var(--muted-foreground)); line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: hsl(var(--primary)); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: hsl(var(--foreground)); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 1rem; }
.legal th, .legal td {
  border: 1px solid hsl(var(--border));
  padding: .625rem .875rem;
  text-align: left;
  color: hsl(var(--muted-foreground));
  vertical-align: top;
}
.legal th { color: hsl(var(--foreground)); font-weight: 600; background: hsl(var(--card)); }
.legal-back { display: inline-block; margin-top: 3rem; font-size: 1rem; }
@media (max-width: 640px) {
  .legal { padding: 6rem 0 4rem; }
  .legal h1 { font-size: 1.875rem; }
  .legal table, .legal thead, .legal tbody, .legal th, .legal td, .legal tr { display: block; }
  .legal thead { display: none; }
  .legal td { border-top: none; }
  .legal tr { margin-bottom: 1rem; border-top: 1px solid hsl(var(--border)); }
}

/* ---------- 3. Sección "Plataforma IA para asesorías" (26-ago-2026) ---------- */

/* 3a. Lista "lo que dejas de hacer": tarea tachada + lo que pasa en su lugar */
.stop-list {
  display: grid;
  gap: 1px;
  background: hsl(var(--border));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: auto; margin-right: auto; margin-bottom: 4rem;
  max-width: 56rem;
}
.stop-item {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem;
  background: hsl(var(--card));
  transition: background .3s;
}
.stop-item:hover { background: hsl(var(--muted) / .5); }
.stop-item svg { width: 1.75rem; height: 1.75rem; color: hsl(var(--primary)); flex: none; margin-top: .125rem; }
.stop-item .stop-task {
  display: block;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: hsl(var(--secondary));
  text-decoration-thickness: 2px;
  margin-bottom: .375rem;
}
.stop-item .stop-gain { color: hsl(var(--foreground)); line-height: 1.7; opacity: .85; }

/* 3b. Las tres piezas del paquete */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin-left: auto; margin-right: auto;
}
.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.pack-card:hover {
  border-color: hsl(var(--primary) / .5);
  box-shadow: 0 0 30px hsl(var(--primary) / .18);
  transform: translateY(-2px);
}
.pack-card .pack-num {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: .875rem;
}
.pack-card h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.35; margin-bottom: .875rem; }
.pack-card p { color: hsl(var(--muted-foreground)); line-height: 1.7; }
.pack-card .pack-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: .3125rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .12);
  border: 1px solid hsl(var(--primary) / .3);
}
.pack-card p:last-of-type { margin-bottom: 1.25rem; } /* separación mínima; el auto de abajo alinea */
@media (max-width: 640px) {
  .stop-item { grid-template-columns: 1.5rem 1fr; gap: .875rem; padding: 1.25rem; }
  .stop-item svg { width: 1.5rem; height: 1.5rem; }
  .pack-card { padding: 1.5rem; }
}

/* ---------- 4. Página /ia-para-asesorias-energeticas (26-ago-2026) ---------- */

/* 4a. Bloques desarrollados de "qué automatizamos" */
.auto-block {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid hsl(var(--border));
  max-width: 60rem;
  margin-left: auto; margin-right: auto;
}
.auto-block:last-child { border-bottom: 1px solid hsl(var(--border)); }
.auto-block .auto-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}
.auto-block .auto-icon svg { width: 1.5rem; height: 1.5rem; }
.auto-block h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: .625rem; }
.auto-block p { color: hsl(var(--muted-foreground)); line-height: 1.75; margin-bottom: .75rem; }
.auto-block p:last-child { margin-bottom: 0; }
.auto-block .auto-before {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(var(--secondary));
  margin-bottom: .5rem;
}

/* 4b. Las cuatro semanas de la implantación */
.weeks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin-left: auto; margin-right: auto;
}
.week {
  position: relative;
  padding: 1.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}
.week .week-tag {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: .75rem;
}
.week h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .625rem; }
.week p { font-size: 1rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }

/* 4c. Preguntas frecuentes: <details> nativo, sin JavaScript */
.faq { max-width: 45rem; margin-left: auto; margin-right: auto; }
.faq details {
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.25rem 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
  list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: hsl(var(--primary)); }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: hsl(var(--primary));
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin-top: .875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
}
.faq details p + p { margin-top: .75rem; }

/* 4d. Migas de pan */
.crumbs { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.crumbs a { color: hsl(var(--muted-foreground)); }
.crumbs a:hover { color: hsl(var(--primary)); }

@media (max-width: 640px) {
  .auto-block { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
  .auto-block .auto-icon { width: 3rem; height: 3rem; }
  .week { padding: 1.5rem; }
}

/* ---------- 5. Accesibilidad e interacción (auditoría UI/UX, 26-ago-2026) ---------- */

/* 5a. Foco de teclado visible.
   El Tailwind compilado solo trae `focus-visible:ring` en los botones estilo shadcn;
   los enlaces de texto se quedaban con el contorno del navegador, negro sobre negro
   (medido: outline auto 1px rgb(16,16,16) = invisible). Esto lo cubre todo. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 3px;
}
/* Los botones que YA traen su propio anillo no necesitan los dos */
.focus-visible\:ring-2:focus-visible { outline: none; }

/* 5b. Enlace para saltar al contenido: invisible hasta que se le da el foco */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* 5c. Objetivos táctiles de 44×44 como mínimo (medido: el menú móvil daba 24×24,
   los puntos del carrusel 10×10 y las flechas 40×40). El tamaño visible no cambia:
   lo que crece es el área sensible. */
/* OJO: la regla va dentro de un media query de móvil a propósito. Un `#menu-toggle { display: ... }`
   suelto gana por especificidad al `md:hidden` de Tailwind y el icono aparecería también en escritorio. */
@media (max-width: 767px) {
  #menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px; /* compensa el ancho extra para que el icono no se desplace */
  }
}
#carousel-prev, #carousel-next, #carousel-play { width: 44px; height: 44px; }
#carousel-dots { gap: .25rem; }
#carousel-dots button { position: relative; }
#carousel-dots button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
/* En móvil, campos de 44 px de alto (venían a 40) */
@media (max-width: 640px) {
  #contact-form input:not([type="checkbox"]):not([type="hidden"]) { min-height: 44px; }
}

/* 5d. Área de clic de las preguntas frecuentes.
   El espaciado estaba en <details>, así que solo eran clicables los 26 px del texto. */
.faq details { padding: 0; }
.faq summary { padding: 1.25rem 0; }
.faq details[open] > p:last-child { padding-bottom: 1.25rem; }

/* 5e. Errores del formulario junto al campo que falla */
.field-error {
  display: block;
  margin-top: .375rem;
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--secondary));
}
.field-invalid { border-color: hsl(var(--secondary)) !important; }

/* 5f. Movimiento reducido: quien lo pida en su sistema no ve nada moverse solo.
   La portada tenía 4 animaciones infinitas decorativas (halos, rebote, pulso). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6. Ritmo de lectura (reescritura del copy, 26-ago-2026) ----------
   El copy sigue la escuela de Victor: una idea por línea, frases cortas y mucho aire.
   Estas clases existen para que el texto respire; no meter párrafos largos dentro. */

/* 6a. Bloque de lectura: cada <p> es una frase suelta con aire alrededor */
.beat { max-width: 45rem; }
.beat p {
  font-size: 1.25rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  margin: 0 0 1.5rem;
}
.beat p:last-child { margin-bottom: 0; }
.beat p.strong { color: hsl(var(--foreground)); font-weight: 500; }
.beat p.big {
  font-size: 1.875rem;
  line-height: 1.35;
  color: hsl(var(--foreground));
  font-weight: 600;
  letter-spacing: -.01em;
}
.beat--right { margin-left: auto; }
.beat--center { margin-left: auto; margin-right: auto; text-align: center; }

/* 6b. Las escenas del "¿te suena?": cuatro momentos concretos del día */
.scenes { display: grid; gap: 1.25rem; max-width: 60rem; margin-left: auto; margin-right: auto; }
.scene {
  border-left: 2px solid hsl(var(--secondary) / .45);
  padding: .25rem 0 .25rem 1.75rem;
}
.scene p {
  font-size: 1.25rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  margin: 0 0 .5rem;
}
.scene p:last-child { margin-bottom: 0; }
.scene p:first-child { color: hsl(var(--foreground)); font-weight: 500; }
@media (max-width: 640px) {
  .scene { padding-left: 1.25rem; }
  .scene p { font-size: 1.125rem; }
  .beat p { font-size: 1.125rem; }
  .beat p.big { font-size: 1.5rem; }
}

/* 6c. Objeciones: misma mecánica que las FAQ pero con su propio aire */
.objs { max-width: 45rem; margin-left: auto; margin-right: auto; }
.objs details { border-bottom: 1px solid hsl(var(--border)); }
.objs summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 1.375rem 0;
  font-size: 1.125rem; font-weight: 600;
  transition: color .2s;
}
.objs summary::-webkit-details-marker { display: none; }
.objs summary:hover { color: hsl(var(--primary)); }
.objs summary::after {
  content: "+"; flex: none; font-size: 1.5rem; font-weight: 300; line-height: 1;
  color: hsl(var(--primary)); transition: transform .25s;
}
.objs details[open] summary::after { transform: rotate(45deg); }
.objs details p {
  margin: 0 0 1rem; padding-right: 2rem;
  color: hsl(var(--muted-foreground)); line-height: 1.7;
}
.objs details > p:last-child { padding-bottom: 1.375rem; }

/* 6d. La posdata: la firma de Victor en todos sus emails */
.pd {
  max-width: 45rem;
  margin-left: auto; margin-right: auto;  /* NO usar `margin: 0 auto`: anularía el mt-* del HTML */
  padding: 1.75rem 0 0;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}
.pd strong { color: hsl(var(--primary)); font-weight: 600; }

/* 6e. Separación entre secciones: más aire del que parece necesario. Lo es. */
.airy { padding-top: 8rem; padding-bottom: 8rem; }
@media (max-width: 640px) { .airy { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

/* ---------- 7. Clases que el HTML usaba y NO existían en el Tailwind compilado ----------
   Auditoría del 26-ago-2026: 5 clases se usaban sin estar definidas, así que no hacían nada.
   La peor, `pb-24`: dejaba el hero de la página de IA con padding inferior 0 y el botón
   quedaba pegado al borde donde cambia el color de fondo, cortándole el resplandor.
   Antes de usar una clase Tailwind nueva, comprobar que existe. */
.pb-24 { padding-bottom: 6rem; }
.mb-12 { margin-bottom: 3rem; }
.bg-primary\/20 { background-color: hsl(var(--primary) / .2); }
.bg-secondary\/20 { background-color: hsl(var(--secondary) / .2); }
@media (min-width: 768px) {
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* ---------- ESCALA TIPOGRÁFICA (26-ago-2026) ----------
   La web llegó a tener CATORCE tamaños de letra y DOCE interlineados: 22, 19, 15 y 13px eran
   casi-duplicados de 24, 20, 16 y 14 y solo añadían ruido. La escala es:
     12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48 · 60
   y cuatro interlineados: 1.1 (titular grande) · 1.35 (titular medio) · 1.5 (interfaz) · 1.7 (lectura).
   Un valor nuevo que no esté en la escala, no entra.
   ---------- ESCALA DE ANCHOS (26-ago-2026) ----------
   La web tenía SEIS anchos distintos y por eso cada salto se veía como un escalón.
   A partir de ahora solo hay tres. Al añadir un bloque, usar uno de estos:
     72rem (1152px) — rejillas de tarjetas: .pack-grid, .weeks
     60rem  (960px) — bloques destacados de dos columnas y las escenas: .vs, .scenes
     45rem  (720px) — texto de lectura: .aparte, .objs, .pd, .beat
   ---------- 8. Los bloques de texto, dentro del sistema visual (26-ago-2026) ----------
   Problema que detectó Victor: los bloques de texto suelto (.beat) medían 736px y flotaban
   sin contenedor, mientras las tarjetas medían 1152px y llevaban borde. Cada salto era un
   escalón y parecían parches. Estas clases usan EXACTAMENTE los mismos valores que .pack-card
   (mismo borde, mismo radio, mismo fondo, mismo padding) para que todo se lea como un sistema. */

/* 8a. Dos columnas enfrentadas: para el contraste y para el "si lo montas / si no" */
.vs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  max-width: 60rem;
  margin-left: auto; margin-right: auto;
}
.vs-col {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  transition: border-color .3s, box-shadow .3s;
}
.vs-col .vs-tag {
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.vs-col p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin: 0 0 .875rem; }
.vs-col p:last-child { margin-bottom: 0; }
.vs-col .vs-remate { color: hsl(var(--foreground)); font-weight: 600; margin-top: auto; padding-top: 1.25rem; }

/* la columna que pierde: apagada y con el acento rosa */
.vs-col--frio .vs-tag { color: hsl(var(--secondary)); }
.vs-col--frio:hover { border-color: hsl(var(--secondary) / .4); }
/* la columna que gana: acento cian y un punto de luz */
.vs-col--calido { border-color: hsl(var(--primary) / .35); }
.vs-col--calido .vs-tag { color: hsl(var(--primary)); }
.vs-col--calido:hover { border-color: hsl(var(--primary) / .6); box-shadow: 0 0 30px hsl(var(--primary) / .15); }

/* 8b. El "aparte": una tarjeta centrada para las frases que cortan el hilo a propósito */
.aparte {
  max-width: 45rem;
  margin-left: auto; margin-right: auto;
  padding: 2.25rem 2.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  text-align: center;
}
.aparte p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin: 0 0 .875rem; }
.aparte p:last-child { margin-bottom: 0; }
.aparte .aparte-lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
  margin-bottom: 1.125rem;
}
.aparte strong { color: hsl(var(--foreground)); font-weight: 600; }

@media (max-width: 640px) {
  .vs-col { padding: 1.5rem; }
  .aparte { padding: 1.75rem 1.5rem; }
  .aparte .aparte-lead { font-size: 1.25rem; }
}

/* El indicador de "sigue bajando" choca con el segundo botón en pantallas cortas */
@media (max-width: 767px), (max-height: 720px) {
  #inicio .animate-bounce { display: none; }
}

/* ---------- 9. Objetivos táctiles de la barra en móvil (auditoría 26-ago-2026) ----------
   En móvil quedaban por debajo de 44px: el botón "Hablemos" de la página de IA (99×40) y el
   enlace "Contacto" de las páginas legales (69×24). Solo se aplica por debajo de 768px, donde
   la barra de escritorio está oculta, así que no altera el diseño en pantallas grandes.
   (Y por lo mismo de siempre: nada de tocar `display` fuera del media query, que se lleva por
   delante el `md:hidden` de Tailwind.) */
@media (max-width: 767px) {
  nav a:not([aria-label]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ================================================================================
   10. ESCALA TIPOGRÁFICA APPLE (27-ago-2026)
   Victor: «mejorar el tamaño de los textos y la claridad con la que se pueden leer».
   Valores medidos de apple.com por la skill apple-hig — no aproximados de oído.

   Tres cosas hacen el trabajo, y las tres importan:
   1. PELDAÑOS, no interpolación: 64·56·48·40·32·28·24·21·19·17·14·12.
   2. Cada peldaño lleva SU interlineado y SU tracking. El texto grande va negativo,
      el mediano ligeramente POSITIVO, y el cuerpo de 17px a −0.022em. Saltarse esto
      es lo que delata al imitador.
   3. El cuerpo sube de 16 a 17px y NO baja nunca, ni en móvil.

   Se redefinen las clases de Tailwind en vez de tocar el HTML: así toda la web sube
   de golpe y no hay que revisar página por página.
   ================================================================================ */

/* El cuerpo base de la página: 17px, el peldaño de lectura de Apple */
body { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }

/* ---- Cuerpo: peldaños de lectura (interlineado generoso, es lo que da claridad) ---- */
.text-xs   { font-size: 12px; line-height: 1.3334; letter-spacing: -.01em; }
.text-sm   { font-size: 14px; line-height: 1.4286; letter-spacing: -.016em; }
.text-base { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.text-lg   { font-size: 19px; line-height: 1.4211; letter-spacing: -.012em; }
.text-xl   { font-size: 21px; line-height: 1.381;  letter-spacing: -.011em; }

/* ---- Display: peldaños de titular (interlineado corto, tracking de Apple) ---- */
.text-2xl  { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
.text-3xl  { font-size: 32px; line-height: 1.125;  letter-spacing: .004em; }
.text-4xl  { font-size: 40px; line-height: 1.1;    letter-spacing: 0; }
.text-5xl  { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
.text-6xl  { font-size: 56px; line-height: 1.0714; letter-spacing: -.028em; }
.text-7xl  { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; }

@media (min-width: 768px) {
  .md\:text-2xl { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
  .md\:text-3xl { font-size: 32px; line-height: 1.125;  letter-spacing: .004em; }
  .md\:text-4xl { font-size: 40px; line-height: 1.1;    letter-spacing: 0; }
  .md\:text-5xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
  .md\:text-6xl { font-size: 56px; line-height: 1.0714; letter-spacing: -.028em; }
  .md\:text-7xl { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; }
  .md\:text-xl  { font-size: 21px; line-height: 1.381;  letter-spacing: -.011em; }
  .md\:text-2xl.text-2xl { font-size: 24px; }
}

/* ---- Descenso responsive: se BAJA DE PELDAÑO, nunca se escala ----
   Breakpoints de Apple: 1068 y 734. El cuerpo (17px) no se toca en ninguno. */
@media (max-width: 1068px) {
  .text-4xl { font-size: 32px; line-height: 1.125;  letter-spacing: .004em; }
  .text-5xl { font-size: 40px; line-height: 1.1;    letter-spacing: 0; }
  .text-6xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
  .text-7xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
  /* las md: van DESPUÉS: un elemento con `text-4xl md:text-6xl` lleva las dos clases */
  .md\:text-4xl { font-size: 32px; line-height: 1.125;  letter-spacing: .004em; }
  .md\:text-5xl { font-size: 40px; line-height: 1.1;    letter-spacing: 0; }
  .md\:text-6xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
  .md\:text-7xl { font-size: 48px; line-height: 1.0835; letter-spacing: -.003em; }
}
@media (max-width: 734px) {
  .text-2xl { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; }
  .text-3xl { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
  .text-4xl { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
  .text-5xl { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .text-6xl { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .text-7xl { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .md\:text-2xl { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; }
  .md\:text-3xl { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
  .md\:text-4xl { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
  .md\:text-5xl { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .md\:text-6xl { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .md\:text-7xl { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
}

/* ---- Los bloques propios, a los mismos peldaños ---- */
.beat p            { font-size: 21px; line-height: 1.381; letter-spacing: -.011em; }
.beat p.big        { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
.scene p           { font-size: 19px; line-height: 1.4211; letter-spacing: -.012em; }
.vs-col p          { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.vs-col .vs-remate { font-size: 19px; line-height: 1.4211; letter-spacing: -.012em; }
.aparte p          { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.aparte .aparte-lead { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
.pack-card h3      { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
.pack-card p       { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.week h3           { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; }
.week p            { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.objs summary      { font-size: 21px; line-height: 1.381; letter-spacing: -.011em; }
.objs details p    { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.faq summary       { font-size: 21px; line-height: 1.381; letter-spacing: -.011em; }
.faq details p     { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.auto-block h3     { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
.auto-block p      { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.pd                { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.legal p, .legal li { font-size: 17px; line-height: 1.4706; letter-spacing: -.022em; }
.legal h2          { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
.legal h1          { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
@media (max-width: 734px) {
  .beat p.big { font-size: 24px; line-height: 1.1667; letter-spacing: .009em; }
  .aparte .aparte-lead, .pack-card h3, .auto-block h3 { font-size: 21px; line-height: 1.1905; letter-spacing: .011em; }
  .legal h1 { font-size: 28px; line-height: 1.1429; letter-spacing: .007em; }
}

/* ---- Pesos de Apple (regla 2 de la skill): 800 en hero y titulares de sección,
        700 en titulares de tarjeta. Con 600-700 en un titular de sección "se queda
        soso al instante", y se nota aunque no sepas por qué. ---- */
h1.font-bold,
main section > div > div > h2.font-bold,
.container > .text-center > h2 { font-weight: 800; }
.pack-card h3, .week h3, .auto-block h3, .aparte .aparte-lead { font-weight: 700; }
.objs summary, .faq summary { font-weight: 700; }
.beat p.big { font-weight: 700; }

/* ---- Geometría de Apple (reglas 6 y 7): radios grandes y más aire ----
   Radios medidos en apple.com: 28px en tarjeta, 20px en tarjeta pequeña y FAQ,
   980px (cápsula) en botones y pills. Nunca 4px ni 8px — la web venía a 12 y 10.
   Aire: 150px entre secciones en escritorio (aquí estaba en 128), 120 a ≤1068 y 90 a ≤734.
   Más aire es más claridad de lectura, que es justo lo que pidió Victor. */
.vs-col, .pack-card, .aparte, .stop-list, .auto-block-card { border-radius: 28px; }
.week { border-radius: 20px; }
.glass.p-8, .glass.p-12, .rounded-lg.glass { border-radius: 28px; }

/* Botones y pastillas: cápsula */
a[class*="gradient-primary"], button[class*="gradient-primary"],
a[class*="border-primary/50"], .rounded-md.h-11, .rounded-md.h-10 { border-radius: 980px; }
#contact-form button[type="submit"] { border-radius: 980px; }
#contact-form input:not([type="checkbox"]), #contact-form textarea { border-radius: 14px; }

/* Aire entre secciones */
.airy { padding-top: 150px; padding-bottom: 150px; }
@media (max-width: 1068px) { .airy { padding-top: 120px; padding-bottom: 120px; } }
@media (max-width: 734px)  { .airy { padding-top: 90px;  padding-bottom: 90px; } }