/* ==========================================================================
   SLIDER DE PORTADA
   Catalina Casa de Té — https://mktactual.com/

   Presentación a pantalla completa, al estilo de los sliders de revista:
   una sola foto panorámica por diapositiva, un velo que garantiza que el
   texto siempre se lea, y el contenido alineado a la izquierda sobre una
   rejilla. Sin tarjetas ni fotos flotantes: la foto de fondo es la
   protagonista.

   Todas las medidas usan clamp(), así que el diseño escala solo entre el
   móvil más pequeño y el escritorio más grande, sin saltos.

   Este archivo es el ÚNICO que da estilo al slider. Antes había cuatro
   bloques repartidos en secciones.css que se pisaban entre sí; se
   unificaron aquí el 22/07/2026.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CAJA
   El tema no trae un reset global de box-sizing, así que lo fijamos aquí.
   Sin esto, el relleno inferior que reserva sitio para los controles se
   SUMA a la altura en vez de descontarse, y el texto acaba encima de las
   barras de progreso en móvil.
   -------------------------------------------------------------------------- */
.catalina-hero,
.catalina-hero *,
.catalina-hero *::before,
.catalina-hero *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. VARIABLES DEL SLIDER
   Cambia estos valores para ajustar el slider entero de una sola vez.
   -------------------------------------------------------------------------- */
.catalina-hero {
  /* Alto: ocupa la pantalla menos la cabecera, con topes de seguridad.
     --catalina-alto-cabecera la mide slider.js en vivo (barra de beneficios
     + encabezado); el 120px es solo el valor de reserva por si el JS no
     llega a ejecutarse. */
  --hero-alto: clamp(560px, calc(100svh - var(--catalina-alto-cabecera, 120px)), 900px);

  /* Aire lateral: crece con la pantalla. */
  --hero-aire: clamp(22px, 5vw, 80px);

  /* Ancho máximo de la columna de texto. */
  --hero-columna: min(640px, 52vw);

  /* Cuánto tarda una diapositiva en fundirse con la siguiente. Corto a
     propósito: un fundido lento se percibe como que el sitio va lento. */
  --hero-fundido: 0.65s;

  /* Duración del ciclo — debe coincidir con INTERVALO en slider.js (6000 ms). */
  --hero-ciclo: 6s;

  position: relative;
  width: 100%;
  height: var(--hero-alto);
  overflow: hidden;
  background-color: #2A1B14;
  isolation: isolate;
}

/* Sin contorno al enfocar el slider con el teclado (el JS le da foco). */
.catalina-hero:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   2. DIAPOSITIVAS
   Se apilan una sobre otra y se cruzan con un fundido.
   -------------------------------------------------------------------------- */
.catalina-hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hero-fundido) cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear var(--hero-fundido);
  z-index: 1;
}

.catalina-hero .slide.esta-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hero-fundido) cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
  z-index: 2;
}

/* --- Foto de fondo, con un zoom lentísimo mientras está a la vista --- */
.catalina-hero .slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  will-change: transform;
}

.catalina-hero .slide.esta-activa .slide-bg {
  animation: catalina-hero-zoom 9s ease-out forwards;
}

@keyframes catalina-hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

/* --------------------------------------------------------------------------
   3. VELO DE LEGIBILIDAD
   Es la pieza clave: sin él, el texto blanco se pierde sobre las zonas
   claras de la foto. Son dos capas — una en diagonal desde la izquierda y
   otra desde abajo — que juntas garantizan contraste suficiente sin
   apagar la fotografía.
   -------------------------------------------------------------------------- */
.catalina-hero .slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  /* Tinte del velo, en componentes R,G,B sueltos para poder darles opacidad
     con rgb(). Cada diapositiva puede cambiarlo más abajo. */
  --velo: 26 16 11;

  /* Multiplicador general: súbelo para fotos claras, bájalo para oscuras. */
  --velo-fuerza: 1;

  background:
    linear-gradient(
      100deg,
      rgb(var(--velo) / calc(0.88 * var(--velo-fuerza))) 0%,
      rgb(var(--velo) / calc(0.70 * var(--velo-fuerza))) 30%,
      rgb(var(--velo) / calc(0.30 * var(--velo-fuerza))) 56%,
      rgb(var(--velo) / calc(0.06 * var(--velo-fuerza))) 78%,
      rgb(var(--velo) / 0) 100%
    ),
    linear-gradient(
      to top,
      rgb(var(--velo) / calc(0.58 * var(--velo-fuerza))) 0%,
      rgb(var(--velo) / calc(0.14 * var(--velo-fuerza))) 30%,
      rgb(var(--velo) / 0) 55%
    );
}

/* --- Un tinte propio por diapositiva ---
   No es solo decoración: cada fotografía tiene una luz distinta y necesita
   distinta cantidad de velo para que el texto blanco se lea. La segunda es
   una foto de estudio sobre fondo blanco, así que pide bastante más.

   Si cambias el orden de los fondos en catalina_slides_portada()
   (inc/helpers.php), revisa también estos tintes. */

/* 1 · Mesa de gongfucha, madera cálida — marrón té */
.catalina-hero .slide:nth-of-type(1) .slide-overlay {
  --velo: 26 16 11;
}

/* 2 · Tetera y tazas de cristal sobre blanco — verde olivo, y más velo */
.catalina-hero .slide:nth-of-type(2) .slide-overlay {
  --velo: 30 32 20;
  --velo-fuerza: 1.16;
}

/* 3 · Matcha, tonos verdes — terracota profundo */
.catalina-hero .slide:nth-of-type(3) .slide-overlay {
  --velo: 44 22 15;
  --velo-fuerza: 1.04;
}

/* Grano sutil: quita el aspecto "plano" del degradado sobre la foto. */
.catalina-hero .slide-grano {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. CONTENIDO
   Rejilla centrada, texto a la izquierda. El contenido se centra en
   vertical y deja sitio abajo para los controles.
   -------------------------------------------------------------------------- */
.catalina-hero .slide-content {
  position: relative;
  z-index: 4;
  height: 100%;
  width: 100%;
  max-width: calc(var(--catalina-container-width) + var(--hero-aire) * 2);
  margin: 0 auto;
  padding: 0 var(--hero-aire) clamp(120px, 16vh, 190px);
  display: flex;
  align-items: center;
}

.catalina-hero .slide-texto {
  max-width: var(--hero-columna);
  color: #fff;
}

/* --- Etiqueta superior --- */
.catalina-hero .slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 14px;
  margin-bottom: clamp(16px, 2.2vh, 26px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--catalina-font-body);
  font-size: clamp(10px, 1.05vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.catalina-hero .slide-badge-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--badge-color, var(--catalina-salmon));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

/* --- Titular ---
   Repetimos body.catalina-redesign en el selector: base.css pinta todos
   los h1 de color terracota y ganaría a un simple .slide-texto .slide-titulo.

   El estilo cuelga de la CLASE .slide-titulo, no de la etiqueta h1, porque
   solo la PRIMERA diapositiva lleva <h1>: las demás llevan <h2>. Antes todas
   eran <h1> y la portada salía con tres titulares de primer nivel, cosa que
   confunde a Google (no sabe cuál es el título de la página) y a los lectores
   de pantalla. Se ven exactamente igual. */
body.catalina-redesign .catalina-hero .slide-texto .slide-titulo {
  font-family: var(--catalina-font-heading);
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  /* Sin sombra de texto: la máscara de cada palabra (overflow:hidden) la
     recortaría por los lados. El contraste lo da el velo. */
}

/* Entrada del titular palabra por palabra, detrás de una máscara.
   El relleno inferior (compensado con un margen negativo) evita que
   overflow:hidden corte los rabos de las letras g, j, p, y. */
.catalina-hero .hero-palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.catalina-hero .hero-palabra-interior {
  display: inline-block;
  transform: translateY(110%);
}

/* El retraso de cada palabra lo escribe PHP en el atributo style
   (catalina_titulo_animado(), en inc/helpers.php). */
.catalina-hero .slide.esta-activa .hero-palabra-interior {
  animation: catalina-palabra-sube 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--retraso, 0ms);
}

@keyframes catalina-palabra-sube {
  to { transform: translateY(0); }
}

/* --- Descripción --- */
.catalina-hero .slide-description {
  font-family: var(--catalina-font-body);
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  max-width: 46ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.30);
}

/* --- Lista de datos sueltos (envío, duración…) --- */
.catalina-hero .slide-meta {
  list-style: none;
  margin: 0 0 clamp(22px, 3vh, 34px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.catalina-hero .slide-meta li {
  position: relative;
  padding-left: 16px;
  font-family: var(--catalina-font-body);
  font-size: clamp(0.78rem, 0.95vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

.catalina-hero .slide-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--catalina-salmon);
}

/* --------------------------------------------------------------------------
   5. LLAMADA A LA ACCIÓN
   -------------------------------------------------------------------------- */
.catalina-hero .slide-acciones {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  flex-wrap: wrap;
}

.catalina-hero .slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.7vh, 18px) clamp(28px, 3vw, 38px);
  border-radius: 100px;
  background: var(--catalina-terracotta);
  color: #fff;
  font-family: var(--catalina-font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(164, 94, 68, 0.42);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.catalina-hero .slide-cta:hover,
.catalina-hero .slide-cta:focus-visible {
  background: #8D533D;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(164, 94, 68, 0.52);
}

.catalina-hero .slide-cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.catalina-hero .slide-cta:hover svg {
  transform: translateX(4px);
}

/* --- Dato al lado del botón (precio, plazas…) --- */
.catalina-hero .slide-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: clamp(16px, 2.4vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, 0.26);
}

.catalina-hero .slide-dato em {
  font-family: var(--catalina-font-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.catalina-hero .slide-dato strong {
  font-family: var(--catalina-font-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   6. CONTROLES
   Contador, miniaturas con barra de progreso y flechas. Van sobre una
   línea fina que cruza el slider de lado a lado.
   -------------------------------------------------------------------------- */
.catalina-hero .hero-controles {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(28px, 5vh, 52px);
  width: 100%;
  max-width: calc(var(--catalina-container-width) + var(--hero-aire) * 2);
  padding: clamp(18px, 2.4vh, 26px) var(--hero-aire) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

/* Truco: el borde superior debe quedar dentro del aire lateral, no pegado
   al filo de la pantalla. Lo conseguimos con un pseudo-elemento. */
.catalina-hero .hero-controles {
  border-top: none;
}

.catalina-hero .hero-controles::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hero-aire);
  right: var(--hero-aire);
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* --- Contador 01 — 03 --- */
.catalina-hero .hero-contador {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--catalina-font-heading);
  color: #fff;
}

.catalina-hero .contador-actual {
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.catalina-hero .contador-linea {
  width: clamp(16px, 2.2vw, 26px);
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
}

.catalina-hero .contador-total {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  font-variant-numeric: tabular-nums;
}

/* --- Miniaturas nombradas, con barra de progreso --- */
.catalina-hero .slider-puntos {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  flex: 1 1 auto;
  min-width: 0;
}

.catalina-hero .slider-punto {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 190px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  -webkit-appearance: none;
  appearance: none;
}

.catalina-hero .punto-etiqueta {
  font-family: var(--catalina-font-body);
  font-size: clamp(9.5px, 1vw, 11px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.catalina-hero .slider-punto:hover .punto-etiqueta,
.catalina-hero .slider-punto:focus-visible .punto-etiqueta {
  color: rgba(255, 255, 255, 0.85);
}

.catalina-hero .slider-punto.esta-activo .punto-etiqueta {
  color: #fff;
}

/* Pista de la barra */
.catalina-hero .punto-pista {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.catalina-hero .punto-progreso {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--catalina-salmon);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Solo la diapositiva activa rellena su barra, al ritmo del ciclo. */
.catalina-hero .slider-punto.esta-activo .punto-progreso {
  animation: catalina-punto-progreso var(--hero-ciclo) linear forwards;
}

@keyframes catalina-punto-progreso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Con el ratón encima el slider se detiene: la barra también. */
.catalina-hero.esta-en-pausa .slider-punto.esta-activo .punto-progreso {
  animation-play-state: paused;
}

/* --- Flechas --- */
.catalina-hero .hero-flechas {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.catalina-hero .slider-flecha {
  width: clamp(42px, 3.4vw, 50px);
  height: clamp(42px, 3.4vw, 50px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.catalina-hero .slider-flecha:hover,
.catalina-hero .slider-flecha:focus-visible {
  background: var(--catalina-terracotta);
  border-color: var(--catalina-terracotta);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. AVISO DE "HAY MÁS ABAJO"
   Vertical, contra el filo derecho. Se esconde en pantallas estrechas.
   -------------------------------------------------------------------------- */
.catalina-hero .hero-scroll {
  position: absolute;
  z-index: 5;
  right: clamp(18px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.catalina-hero .hero-scroll-linea {
  width: 1px;
  height: 62px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
}

.catalina-hero .hero-scroll-texto {
  writing-mode: vertical-rl;
  font-family: var(--catalina-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   8. RESPONSIVE
   El contenido pasa de estar centrado a anclarse abajo, con aire de sobra.
   ========================================================================== */

/* --- Tabletas grandes: la columna de texto puede ser más ancha --- */
@media (max-width: 1024px) {
  .catalina-hero {
    --hero-columna: min(620px, 70vw);
  }

  .catalina-hero .hero-scroll {
    display: none;
  }
}

/* --- Tabletas y móviles apaisados --- */
@media (max-width: 768px) {
  .catalina-hero {
    --hero-alto: clamp(540px, calc(100svh - var(--catalina-alto-cabecera, 110px)), 780px);
    --hero-columna: 100%;
  }

  /* El texto baja: se lee mejor sobre la parte baja de la foto y deja
     ver la fotografía completa en la mitad de arriba. */
  .catalina-hero .slide-content {
    align-items: flex-end;
    padding-bottom: clamp(150px, 22vh, 210px);
  }

  /* En vertical el velo diagonal deja el texto sobre la zona clara de la
     foto. Aquí mandamos un velo de abajo hacia arriba. */
  .catalina-hero .slide-overlay {
    background: linear-gradient(
      to top,
      rgb(var(--velo) / calc(0.94 * var(--velo-fuerza))) 0%,
      rgb(var(--velo) / calc(0.86 * var(--velo-fuerza))) 30%,
      rgb(var(--velo) / calc(0.58 * var(--velo-fuerza))) 52%,
      rgb(var(--velo) / calc(0.26 * var(--velo-fuerza))) 72%,
      rgb(var(--velo) / calc(0.12 * var(--velo-fuerza))) 100%
    );
  }

  .catalina-hero .slide-description {
    max-width: 100%;
  }

  /* Los controles se reordenan: contador y flechas arriba, barras abajo. */
  .catalina-hero .hero-controles {
    gap: 16px;
  }
}

/* --- Móvil vertical --- */
@media (max-width: 600px) {
  .catalina-hero {
    --hero-alto: clamp(520px, calc(100svh - var(--catalina-alto-cabecera, 100px)), 720px);
    --hero-aire: 26px;
    --hero-fundido: 0.8s;
  }

  /* El bloque se apoya en la parte baja, dejando que la fotografía luzca
     arriba, y guarda una buena separación con los controles. Centrado en
     horizontal para que quede equilibrado en pantalla estrecha. */
  .catalina-hero .slide-content {
    align-items: flex-end;
    text-align: center;
    padding-top: clamp(16px, 3vh, 28px);
    padding-bottom: clamp(132px, 18.5vh, 168px);
  }

  /* Todo el contenido en columna y centrado. */
  .catalina-hero .slide-texto {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .catalina-hero .slide-badge {
    padding: 7px 15px 7px 12px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
  }

  body.catalina-redesign .catalina-hero .slide-texto .slide-titulo {
    font-size: clamp(2.15rem, 9.4vw, 2.9rem);
    line-height: 1.08;
    margin-bottom: 14px;
  }

  .catalina-hero .slide-description {
    font-size: 0.94rem;
    line-height: 1.65;
    margin: 0 auto 24px;

    /* Ancho de lectura cómodo: a todo lo ancho las líneas quedan largas
       y el bloque centrado pierde forma. */
    max-width: 34ch;

    /* Dos líneas y puntos suspensivos: evita que un texto largo empuje
       el botón fuera de la pantalla. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Filete fino entre el titular y el texto: da un aire editorial y
     separa sin necesidad de más espacio en blanco. */
  .catalina-hero .slide-texto .slide-titulo::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: var(--catalina-salmon);
    opacity: 0.9;
  }

  /* Los datos sueltos se esconden: en móvil son ruido y roban espacio. */
  .catalina-hero .slide-meta {
    display: none;
  }

  /* Botón y precio en columna, centrados. */
  .catalina-hero .slide-acciones {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  /* El botón se ajusta a su texto en vez de ocupar todo el ancho: a pantalla
     completa se veía enorme y basto. El mínimo garantiza que siga siendo
     cómodo de pulsar aunque el texto sea corto. */
  .catalina-hero .slide-cta {
    width: auto;
    min-width: 200px;
    justify-content: center;
    padding: 15px 34px;
    font-size: 0.78rem;
    letter-spacing: 0.11em;
  }

  /* El precio queda debajo del botón, en una línea y centrado. */
  .catalina-hero .slide-dato {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding-left: 0;
    border-left: none;
  }

  .catalina-hero .slide-dato em {
    font-size: 0.64rem;
  }

  .catalina-hero .slide-dato strong {
    font-size: 1.18rem;
  }

  /* --- Controles compactos --- */
  .catalina-hero .hero-controles {
    bottom: 26px;
    padding-top: 16px;
    gap: 14px;
  }

  .catalina-hero .hero-contador {
    gap: 7px;
  }

  .catalina-hero .contador-actual {
    font-size: 1.15rem;
  }

  .catalina-hero .contador-linea {
    width: 12px;
  }

  .catalina-hero .contador-total {
    font-size: 0.78rem;
  }

  /* Las miniaturas pierden el nombre y quedan como barras finas. */
  .catalina-hero .punto-etiqueta {
    display: none;
  }

  .catalina-hero .slider-puntos {
    gap: 8px;
  }

  .catalina-hero .slider-punto {
    max-width: none;
    gap: 0;
  }

  .catalina-hero .punto-pista {
    height: 3px;
  }

  /* Área táctil cómoda sin agrandar la barra: se amplía por fuera. */
  .catalina-hero .slider-punto::after {
    content: "";
    position: absolute;
    inset: -14px 0;
  }

  /* Sin flechas: en móvil se desliza con el dedo. */
  .catalina-hero .hero-flechas {
    display: none;
  }
}

/* --- Móviles pequeños (iPhone SE y similares) --- */
@media (max-width: 380px) {
  .catalina-hero {
    --hero-aire: 20px;
  }

  body.catalina-redesign .catalina-hero .slide-texto .slide-titulo {
    font-size: 2rem;
  }

  .catalina-hero .slide-description {
    font-size: 0.89rem;
  }
}

/* --- Pantallas bajas y apaisadas: que no se salga nada --- */
@media (max-height: 560px) and (orientation: landscape) {
  .catalina-hero {
    --hero-alto: 520px;
  }

  .catalina-hero .slide-content {
    padding-bottom: 110px;
  }

  .catalina-hero .slide-description,
  .catalina-hero .slide-meta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. ACCESIBILIDAD — quien pidió menos animación, menos animación tiene
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .catalina-hero .slide.esta-activa .slide-bg,
  .catalina-hero .slide.esta-activa .hero-palabra-interior,
  .catalina-hero .slider-punto.esta-activo .punto-progreso {
    animation: none !important;
  }

  .catalina-hero .hero-palabra-interior {
    transform: none;
  }

  .catalina-hero .punto-progreso {
    transform: scaleX(1);
  }

  .catalina-hero .slide {
    transition-duration: 0.01ms;
  }
}