/* Quicksand es variable: un solo archivo cubre de 300 a 700. */
@font-face {
  font-family: Quicksand;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/quicksand-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-300-latin.woff2") format("woff2");
}

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/lato-900-latin.woff2") format("woff2");
}

:root {
  --alta-aqua-900: #04353b;
  --alta-aqua-800: #075c65;
  --alta-aqua-700: #076e79;
  --alta-aqua-600: #0d8391;
  --alta-aqua-400: #4faab4;
  --alta-aqua-200: #b8dde1;
  --alta-aqua-100: #e4f2f3;
  --alta-ink-900: #12100e;
  --alta-ink-700: #3a3632;
  --alta-ink-500: #5f5850;
  /* Texto terciario (precio anterior, avisos legales, migas). #8c857d daba
     3.6:1 sobre papel y no alcanzaba el mínimo AA que promete la auditoría. */
  --alta-ink-300: #6b645c;
  --alta-line: #e4dfd8;
  --alta-paper: #faf8f5;
  --alta-nude-100: #f6efe8;
  --alta-nude-200: #f1e9e1;
  --alta-nude-300: #e8d5c4;
  --alta-success: #1b7a4b;
  --alta-warning: #8a5a00;
  --alta-error: #b3261e;
  --alta-teal: var(--alta-aqua-600);
  --alta-teal-dark: var(--alta-aqua-700);
  --alta-ink: var(--alta-aqua-900);
  --alta-text: var(--alta-ink-900);
  --alta-muted: var(--alta-ink-500);
  --alta-radius-sm: .625rem;
  --alta-radius: .875rem;
  --alta-radius-lg: 1rem;
  --alta-content: 80rem;
  --alta-shadow: 0 1rem 3rem rgba(4, 53, 59, .08);
  --alta-shadow-sm: 0 .25rem 1rem rgba(4, 53, 59, .06);

  /* Altura de la cabecera fija: el resto del sistema se mide contra ella. */
  --alta-header-h: 5.5rem;

  /* Una pantalla = el viewport menos la cabecera. */
  --alta-screen-h: calc(100svh - var(--alta-header-h));
  --alta-screen-pad: clamp(1.25rem, 3.2vh, 2.75rem);
  --alta-screen-gap: clamp(.9rem, 2.2vh, 1.75rem);

  /* Escala tipografica: crece con el ancho pero con techo, para que las
     secciones sigan cabiendo en una pantalla. */
  --alta-fs-display: clamp(2rem, 2.9vw, 2.75rem);
  --alta-fs-h1: clamp(1.6rem, 2.3vw, 2.125rem);
  --alta-fs-h2: clamp(1.55rem, 2.6vw, 2.5rem);
  --alta-fs-h3: clamp(1.2rem, 1.7vw, 1.625rem);
  --alta-fs-body: clamp(.9375rem, .55vw + .75rem, 1rem);
  --alta-fs-small: .8125rem;
  --alta-fs-micro: .75rem;

  /* Movimiento. Una sola curva para todo el sitio: sale rápido y frena largo,
     que es lo que se lee como calma y no como rebote. */
  --alta-ease: cubic-bezier(.22, .61, .36, 1);
  --alta-ease-out: cubic-bezier(.16, 1, .3, 1);
  --alta-dur-fast: 180ms;
  --alta-dur: 320ms;
  --alta-dur-slow: 520ms;
}

/* ---------------------------------------------------------------------------
   Revelado al entrar en pantalla

   Sólo `opacity` y `transform`: los compone la GPU y no obligan al navegador a
   recalcular la maqueta. El hero queda fuera a propósito —está sobre la línea
   de flotación y animarlo retrasaría la primera impresión.
--------------------------------------------------------------------------- */
.alta-js [data-alta-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity var(--alta-dur-slow) var(--alta-ease-out),
    transform var(--alta-dur-slow) var(--alta-ease-out);
  transition-delay: calc(var(--alta-reveal-i, 0) * 70ms);
}

.alta-js [data-alta-reveal].is-revealed { opacity: 1; transform: none; }

.alta-site,
.alta-section,
.alta-site-shell {
  color: var(--alta-text);
  font-family: Lato, system-ui, sans-serif;
  font-size: var(--alta-fs-body);
  font-synthesis: none;
}

.alta-site-shell,
.alta-section {
  margin-inline: auto;
  max-width: var(--alta-content);
  width: calc(100% - clamp(2rem, 7vw, 10rem));
}

/* ---------------------------------------------------------------------------
   Sistema de pantallas

   Cada seccion del sitio es una "pantalla" conceptual, pero su caja abraza el
   contenido: estirarla al viewport dejaba aire muerto bajo las secciones
   cortas en escritorio. El ritmo vertical lo marca --alta-screen-pad, y el
   limite superior sigue vigilado en QA: una seccion no deberia rebasar el
   viewport.
--------------------------------------------------------------------------- */
.alta-screen {
  box-sizing: border-box;
  display: grid;
  /* Arriba, no centrado: centrar dejaba un hueco muerto entre la cabecera y
     el contenido en las pantallas cortas (portadas de página interior). */
  align-content: start;
  gap: var(--alta-screen-gap);
  min-height: 0;
  padding-block: var(--alta-screen-pad);
  scroll-margin-top: var(--alta-header-h);
}

/* Portada de página interior: encabeza el documento, no necesita reclamar
   una pantalla completa. Sigue sin rebasarla. */
.alta-screen--intro { min-height: 0; }

/* El salto entre pantallas se acompaña, no se teletransporta. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Bandas de apoyo (confianza, avisos): no son pantalla completa. */
.alta-strip {
  box-sizing: border-box;
  padding-block: clamp(1rem, 2.4vh, 1.75rem);
}

/*
 * Red de seguridad del sistema de pantallas.
 *
 * Un hijo de rejilla o de flex arranca con `min-width: auto` y no baja de su
 * contenido mínimo. En pantallas estrechas eso desbordaba secciones enteras, y
 * el `overflow-x: clip` del contenedor lo escondía recortando el contenido en
 * vez de avisar. Aquí se declara que todo puede encogerse.
 */
.alta-screen > *,
.alta-screen__head > *,
.alta-grid > *,
.alta-carousel__track > * { min-width: 0; }

.alta-screen__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}

.alta-eyebrow {
  color: var(--alta-aqua-700);
  font-size: var(--alta-fs-micro);
  font-weight: 900;
  letter-spacing: .11em;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}

/* Sobre la banda teal, aqua-200 se queda en 4.1:1. */
.alta-eyebrow--light { color: var(--alta-aqua-100); }

/* ---------------------------------------------------------------------------
   Migas de pan

   Ocupan el sitio del antetítulo y heredan su tratamiento —micro, versalitas,
   espaciado— para que sustituirlo no mueva el diseño. Lo que cambia es que
   ahora hay enlaces, así que el paso actual se distingue por peso y color y no
   sólo por posición.
--------------------------------------------------------------------------- */
/* El margen baja de .55 a .3rem porque el relleno de los enlaces (necesario
   para el objetivo táctil) ya aporta el resto del aire. */
.alta-breadcrumbs { margin: 0 0 .3rem; }

.alta-breadcrumbs__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alta-breadcrumbs__item { align-items: center; display: inline-flex; gap: .45rem; }

.alta-breadcrumbs__link,
.alta-breadcrumbs__current {
  font-size: var(--alta-fs-micro);
  letter-spacing: .11em;
  text-transform: uppercase;
}

/*
 * El relleno vertical no es estético: sin él el enlace mide 17 px de alto y
 * WCAG 2.2 pide 24×24 como objetivo mínimo. En una miga, que es texto pequeño
 * y en móvil va cerca del borde, fallar el toque es lo normal.
 */
.alta-breadcrumbs__link {
  color: var(--alta-ink-500);
  display: inline-block;
  font-weight: 700;
  min-height: 24px;
  padding-block: .25rem;
  text-decoration: none;
}

.alta-breadcrumbs__link:hover,
.alta-breadcrumbs__link:focus-visible { color: var(--alta-aqua-700); text-decoration: underline; }

.alta-breadcrumbs__current { color: var(--alta-aqua-700); font-weight: 900; }

/*
 * El separador es decoración, pero se pinta con un tono que cumple AA igual.
 *
 * La primera versión usaba el gris de marca #91969A y daba 2.82:1 sobre el
 * crema: ese color está documentado como «sólo bordes y grafismos» y yo lo
 * había puesto en texto. Aunque va con aria-hidden y un lector de pantalla no
 * lo anuncia, un separador que no se ve deja la ruta pareciendo palabras
 * sueltas.
 */
.alta-breadcrumbs__sep { color: var(--alta-ink-300); font-size: var(--alta-fs-micro); }

/* Sobre fondo oscuro, el gris de enlace cae por debajo de AA. */
.alta-breadcrumbs--light .alta-breadcrumbs__link { color: var(--alta-aqua-100); }
.alta-breadcrumbs--light .alta-breadcrumbs__current { color: #fff; }
.alta-breadcrumbs--light .alta-breadcrumbs__sep { color: var(--alta-aqua-200, #9fc9cd); }

.alta-section__title,
.alta-site h1,
.alta-site h2,
.alta-site h3 {
  text-wrap: balance;
}

.alta-section__title,
.alta-site h1,
.alta-site h2 {
  color: var(--alta-ink-900);
  font-family: Quicksand, "Trebuchet MS", system-ui, sans-serif;
  /* Quicksand es geométrica y redonda: a 500 se ve floja en titular grande.
     600 le da presencia sin llegar al peso de un bold. */
  font-weight: 600;
  letter-spacing: -.01em;
}

.alta-section__title {
  font-size: var(--alta-fs-display);
  line-height: 1.04;
  margin: 0 0 .5rem;
}

.alta-section__lead {
  color: var(--alta-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 44rem;
}

/* Etiqueta suave a la derecha de un encabezado de pantalla. */
.alta-note {
  background: var(--alta-nude-200);
  border-radius: 999px;
  color: var(--alta-ink-700);
  display: inline-flex;
  flex-direction: column;
  font-size: var(--alta-fs-small);
  line-height: 1.35;
  margin: 0;
  padding: .5rem 1.1rem;
}

.alta-note strong {
  font-size: var(--alta-fs-micro);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alta-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.alta-card {
  background: #fff;
  border: 1px solid var(--alta-line);
  border-radius: var(--alta-radius);
  min-width: 0;
  overflow: hidden;
  transition:
    border-color var(--alta-dur) var(--alta-ease),
    box-shadow var(--alta-dur) var(--alta-ease),
    transform var(--alta-dur) var(--alta-ease);
}

/* Sólo donde hay puntero: en táctil el hover se queda pegado tras el toque. */
@media (hover: hover) {
  .alta-card:hover {
    border-color: var(--alta-aqua-200);
    box-shadow: var(--alta-shadow);
    transform: translateY(-4px);
  }
}

.alta-card :is(h3, p):first-child { margin-top: 0; }
.alta-card :last-child { margin-bottom: 0; }
.alta-card a { color: var(--alta-aqua-700); }

:where(.alta-site) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--alta-aqua-400);
  outline-offset: 3px;
}

.alta-empty { color: var(--alta-muted); }

.alta-cta {
  align-items: center;
  background: var(--alta-aqua-700);
  border: 2px solid var(--alta-aqua-700);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: .9375rem;
  font-weight: 700;
  gap: .3rem .6rem;
  justify-content: center;
  margin: 0;
  min-height: 3rem;
  padding: .65rem 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.alta-cta:hover { background: var(--alta-aqua-800); border-color: var(--alta-aqua-800); transform: translateY(-1px); }
/* Respuesta al pulsar: el botón cede un poco bajo el dedo. */
.alta-cta:active { transform: translateY(0) scale(.985); transition-duration: var(--alta-dur-fast); }
.alta-cta__phone { font-size: .8em; font-weight: 700; opacity: .9; }
.alta-cta--unavailable { cursor: not-allowed; opacity: .62; }
.alta-cta--unavailable:hover { background: var(--alta-aqua-700); border-color: var(--alta-aqua-700); transform: none; }
.alta-cta__status { font-size: var(--alta-fs-micro); font-weight: 700; }
.alta-cta--light { background: #fff; border-color: #fff; color: var(--alta-aqua-900) !important; }
.alta-cta--light:hover { background: var(--alta-aqua-100); border-color: var(--alta-aqua-100); }
.alta-cta--outline { background: transparent; color: var(--alta-aqua-700) !important; }
.alta-cta--outline:hover { background: var(--alta-aqua-100); color: var(--alta-aqua-900) !important; }
.alta-cta--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.alta-cta--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.alta-cta--sm { font-size: .875rem; min-height: 2.75rem; padding: .5rem 1.15rem; }

/* El HTML de los CTA lo genera CTA Studio (tipo enlace); el vestido sigue
   siendo de Alta. Especificidad 0-2-0 para ganar a la piel de enlace del
   estudio sin depender del orden en que se impriman las hojas. */
.alta-cta.wacta-studio-cta,
.alta-cta.wacta-studio-cta:hover,
.alta-cta.wacta-studio-cta:focus {
  font-weight: 700;
  gap: .3rem .6rem;
  line-height: inherit;
  text-decoration: none;
}

/* En contacto el CTA es un <button type="submit"> con el mismo vestido. */
button.alta-cta { cursor: pointer; font-family: inherit; }

/* El banner de consentimiento y los avisos de formularios de WaCta pintan
   con las variables genéricas del plugin (Analytics & UX ≥ 1.6.0); aquí
   toman la marca de Alta sin tocar código ajeno. El prefijo body gana al
   orden de carga de las hojas. */
body .waux-consent,
body .waux-consent-manage,
body .waux-form-privacy {
  --waux-accent: var(--alta-aqua-700);
  --waux-check: var(--alta-aqua-600);
  --waux-ink: var(--alta-aqua-900);
  --waux-ink-strong: var(--alta-aqua-900);
  --waux-muted: var(--alta-ink-500);
  --waux-muted-2: var(--alta-ink-300);
  --waux-border: #cfe5e7;
  --waux-border-strong: var(--alta-aqua-200);
  --waux-tint: #f2f9f9;
  --waux-focus: rgba(13, 131, 145, .35);
  --waux-font: Lato, system-ui, sans-serif;
  --waux-heading-font: Quicksand, Lato, system-ui, sans-serif;
}

/* Precio con tachado y vigencia, tal como aparece en las laminas. */
.alta-price { display: grid; gap: .1rem; margin: 0; }
.alta-price__before { color: var(--alta-ink-300); font-size: var(--alta-fs-small); text-decoration: line-through; }
.alta-price__now { color: var(--alta-aqua-700); font-size: 1.6rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; }
.alta-price__until { color: var(--alta-warning); font-size: var(--alta-fs-micro); }
.alta-price--light .alta-price__before { color: rgba(255, 255, 255, .68); }
.alta-price--light .alta-price__now { color: #fff; font-size: 2.125rem; }
.alta-price--light .alta-price__until { color: rgba(255, 255, 255, .78); }

.alta-tag {
  background: #fff;
  border-radius: 999px;
  color: var(--alta-aqua-700);
  display: inline-block;
  font-size: var(--alta-fs-micro);
  font-weight: 900;
  letter-spacing: .07em;
  /* line-height propia: la media de las tarjetas usa line-height 0 (por el
     hueco de la imagen) y sin esto la píldora heredaba una caja de 11px, más
     baja que su propio texto — el texto se salía por arriba y por abajo. */
  line-height: 1;
  padding: .5rem .95rem;
  /* El enlace de la tarjeta pinta su subrayado a través de la etiqueta. */
  text-decoration: none;
  text-transform: uppercase;
}

/* Texto de 12 px en blanco: aqua-600 se queda en 4.49:1, a una centésima. */
.alta-tag--teal { background: var(--alta-aqua-700); color: #fff; }
/* Baja un escalón más para que las dos etiquetas del hero sigan leyéndose
   como dos, ahora que --teal subió a aqua-700. */
.alta-tag--deep { background: var(--alta-aqua-900); color: #fff; }

/* Píldora seleccionable. La usan el filtro del catálogo y el selector de sede
   de contacto, así que vive aquí y no en un módulo. */
.alta-chip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--alta-line);
  border-radius: 999px;
  color: var(--alta-ink-700);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--alta-fs-small);
  font-weight: 700;
  justify-content: center;
  min-height: 2.5rem;
  padding: .45rem 1rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.alta-chip:hover { border-color: var(--alta-aqua-400); }

.alta-text-link {
  align-items: center;
  color: var(--alta-aqua-700);
  display: inline-flex;
  font-weight: 700;
  gap: .4rem;
  /* WCAG 2.2 AA (2.5.8) pide 24 px de objetivo: el texto solo da 21. */
  min-height: 1.75rem;
  text-decoration: none;
}

.alta-text-link:hover { text-decoration: underline; }
.alta-text-link--light { color: #fff; }

/* Componente: preguntas frecuentes.
   <details> nativo: funciona sin JavaScript y es indexable. */
.alta-faq { background: #fff; }
.alta-faq__wrap { align-items: start; display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.alta-faq__intro .alta-section__title { margin: 0; }
.alta-faq__list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.alta-faq details {
  background: var(--alta-paper);
  border: 1px solid var(--alta-line);
  border-radius: var(--alta-radius-sm);
  padding: 1rem 1.25rem;
  /* El cambio de estado (abierta = tarjeta oscura) acompaña a la animación
     de altura que lleva el guion del acordeón. */
  transition: background-color .35s ease, border-color .35s ease;
}
.alta-faq details summary::after { transition: color .35s ease; }

.alta-faq summary {
  align-items: baseline;
  color: var(--alta-ink-900);
  cursor: pointer;
  display: flex;
  font-size: 1.0625rem;
  font-weight: 700;
  gap: .85rem;
  list-style: none;
  padding-right: 2rem;
  position: relative;
}

.alta-faq summary::-webkit-details-marker { display: none; }
.alta-faq summary::after { color: var(--alta-aqua-600); content: "+"; font-size: 1.5rem; line-height: 1; position: absolute; right: 0; top: -.15rem; }
.alta-faq details[open] summary::after { content: "−"; }
.alta-faq details p { color: var(--alta-muted); line-height: 1.65; margin: .75rem 0 0; }

.alta-faq__number { color: var(--alta-aqua-600); font-family: Quicksand, "Trebuchet MS", system-ui, sans-serif; font-weight: 600; }

/* La pregunta abierta se resalta, como en la lámina de la ficha. */
.alta-faq details[open] { background: var(--alta-aqua-900); border-color: var(--alta-aqua-900); }
.alta-faq details[open] summary { color: #fff; }
.alta-faq details[open] summary::after,
.alta-faq details[open] .alta-faq__number { color: var(--alta-aqua-200); }
.alta-faq details[open] p { color: var(--alta-aqua-100); }

/* Controles de carrusel compartidos por promociones y tratamientos. */
.alta-carousel { min-width: 0; position: relative; }

/*
 * `overflow-x: auto` es lo que hace que el carrusel se pueda DESLIZAR.
 *
 * Con `overflow: hidden` el contenedor sólo se movía por script: las flechas
 * funcionaban y el dedo no, porque el navegador no deja desplazar lo que está
 * oculto. En móvil, donde las flechas van ocultas a propósito y los puntos son
 * decorativos, eso dejaba el carrusel sin ningún control utilizable.
 *
 * Con `auto`, el gesto táctil, el trackpad y las teclas los resuelve el propio
 * navegador —con su inercia y su snap nativos, mejores que cualquier script—
 * en Android, iOS, Windows y Mac por igual. La barra se oculta para no cambiar
 * el diseño; el arrastre con ratón lo añade common.js, que es lo único que
 * ningún navegador da gratis.
 */
.alta-carousel__viewport {
  -ms-overflow-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  /* Sin esto, deslizar más allá del primer slide dispara el "atrás" del
     navegador en Chrome y en Safari, y el visitante se sale de la página. */
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.alta-carousel__viewport::-webkit-scrollbar { display: none; }

/* Con ratón no hay gesto que insinúe el arrastre: lo dice el cursor. */
@media (hover: hover) and (pointer: fine) {
  .alta-carousel__viewport { cursor: grab; }
  .alta-carousel__viewport:active { cursor: grabbing; }
}

.alta-carousel__track {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: calc((100% - 3rem) / 3);
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alta-carousel__track > * { scroll-snap-align: start; }

.alta-carousel__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  justify-content: space-between;
}

.alta-carousel__dots { align-items: center; display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }

/* El punto que se ve es el ::before. El botón mide 24 px para cumplir el tamaño
   mínimo de objetivo de WCAG 2.2 sin engordar el indicador: en escritorio los
   puntos siguen siendo pulsables y ya no aparecen como objetivo insuficiente. */
.alta-carousel__dot {
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  place-items: center;
}

.alta-carousel__dot::before {
  background: var(--alta-line);
  border-radius: 999px;
  content: "";
  display: block;
  height: .5rem;
  transition: background-color .2s ease, width .2s ease;
  width: .5rem;
}

.alta-carousel__dot[aria-current="true"] { min-width: 2.25rem; }
.alta-carousel__dot[aria-current="true"]::before { background: var(--alta-aqua-600); width: 1.75rem; }
.alta-carousel__status { color: var(--alta-muted); font-size: var(--alta-fs-small); margin: 0 0 0 .6rem; }

.alta-carousel__arrow {
  align-items: center;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 3.25rem;
  justify-content: center;
  transition: background-color .2s ease;
  width: 3.25rem;
}

.alta-carousel__arrow:hover { background: rgba(255, 255, 255, .38); }
.alta-carousel__arrow[disabled] { cursor: not-allowed; opacity: .35; }

@media (max-width: 62rem) {
  :root { --alta-header-h: 4.5rem; }
  .alta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alta-carousel__track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
  .alta-faq__wrap { grid-template-columns: 1fr; }
  /* Objetivo táctil: 48 px, no 44. */
  .alta-carousel__arrow--quiet { height: 3rem; width: 3rem; }
}

@media (max-width: 47.99rem) {
  :root {
    --alta-screen-pad: clamp(1.5rem, 4vh, 2.5rem);
    --alta-content: 100%;
  }

  .alta-site-shell,
  .alta-section { width: calc(100% - 2rem); }

  .alta-grid { grid-template-columns: 1fr; }

  .alta-carousel__track { grid-auto-columns: 84%; }
  /* Indicador, no control: el script les quita el foco y los deshabilita. */
  .alta-carousel__dot { cursor: default; pointer-events: none; }
  /* 48 px de objetivo táctil en las píldoras seleccionables. */
  .alta-chip { min-height: 3rem; }
}

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

  /* Nada se mueve, pero nada queda invisible: lo que iba a revelarse ya está
     revelado. */
  .alta-js [data-alta-reveal] { opacity: 1; transform: none; transition: none; }

  .alta-site *,
  .alta-section *,
  .alta-site-shell *,
  .alta-mobile-menu * { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}