/* ===========================================================
   NOVUM Newsletter — Frutas exóticas
   Hoja de estilos de la landing
   =========================================================== */

/* --- Fuente de pago PP Agrandir (archivo variable local) --- */
/* Fuente variable: para los titulares grandes (corte "Grand Heavy") */
@font-face {
  font-family: "PP Agrandir";
  src: url("../fonts/PPAgrandir-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;       /* eje de peso de la fuente variable */
  font-stretch: 50% 200%;     /* eje de ancho: 200% = corte "Grand" del diseño */
  font-style: normal;
  font-display: swap;
}

/* Corte estático "Text Bold": para los nombres de fruta y "DESLIZA" */
@font-face {
  font-family: "PP Agrandir Text";
  src: url("../fonts/PPAgrandir-TextBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Variables de color del diseño --- */
:root {
  --naranja: #ff9861;   /* fondo */
  --crema:   #fff7c9;   /* texto y trazos */
}

/* --- Reset básico --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;   /* cada sección encaja en pantalla al deslizar (estilo diapositivas) */
}

body {
  background: var(--naranja);
  color: var(--crema);
  font-family: "Inter", sans-serif;
  max-width: 100%;
  overflow-x: clip;   /* clipa el desborde lateral sin romper el position:sticky del hero */
}

img { display: block; }


/* ===========================================================
   SECCIÓN 1 — HERO
   =========================================================== */
.hero {
  background: var(--naranja);
  height: 100vh;
  overflow: hidden;            /* ocupa la pantalla exacta, sin desbordar */
  scroll-snap-align: start;    /* encaja en pantalla */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 20px 39px 20px;
}

.hero-newsletter {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(14px, 1.4vw, 20px);
}

/* Bloque central: título grande + texto de introducción */
.hero-centro {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* el texto llena el ancho y se ajusta solo; el centrado lo da text-align */
  gap: 14px;
  max-width: 1364px;
  width: 100%;
}

.hero-titulo {
  font-family: "PP Agrandir", sans-serif;
  font-weight: 800;          /* "Heavy" */
  font-stretch: 200%;        /* "Grand" (ancho ancho) -> juntos: Grand Heavy */
  font-size: clamp(44px, 8.5vw, 122px);   /* fallback sin JS; en escritorio el JS lo ajusta al ancho del párrafo */
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;       /* las dos palabras nunca saltan de línea (el ancho lo iguala el JS) */
}

/* --- Título del hero: peso de cada letra reactivo al ratón (la estructura la crea el JS) --- */
.hero-titulo .ht-w, .frutas-titulo .ht-w { display: inline-block; white-space: nowrap; }  /* cada palabra es indivisible */
.hero-titulo .ht-l, .frutas-titulo .ht-l { display: inline-block; }                       /* cada letra: peso propio reactivo */

/* Con JS: oculto el título hasta que la fuente variable está lista, para que NO se vea
   primero con la fuente de sistema (sin el ancho "Grand") y luego salte a su forma final. */
.js .hero-titulo { opacity: 0; transition: opacity 0.3s ease; }
.js .hero-titulo.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-titulo { transition: none; }
}

.hero-intro {
  font-family: "Inter", sans-serif;
  font-weight: 400;                       /* mismo peso que los cuerpos de las fichas */
  font-size: clamp(16px, 2vw, 24px);      /* mismo cuerpo que .dato-texto / .item-texto */
  line-height: 1.25;          /* interlineado del Figma (leading normal) */
  text-align: justify;        /* párrafo justificado como en el diseño */
  max-width: 1364px;
}

/* Indicador "DESLIZA" con flecha hacia abajo */
.desliza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.desliza-texto {
  font-family: "PP Agrandir Text", sans-serif;   /* corte Text Bold */
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(16px, 1.7vw, 24px);
}

.desliza-flecha {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bob 1.6s ease-in-out infinite;   /* rebote suave arriba-abajo */
}
.desliza-flecha img {
  width: 40px;
  height: 11px;
  transform: rotate(-90deg);   /* la flecha del SVG es horizontal: la giramos para que apunte hacia abajo */
}

@keyframes bob {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(6px); }
}
/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .desliza-flecha { animation: none; }
}


/* ===========================================================
   SECCIÓN 2 — ELIGE LA FRUTA
   =========================================================== */
.frutas {
  position: relative;            /* contexto para el pie a ancho completo */
  background: var(--naranja);
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;      /* encaja en pantalla */
  padding: 0 39px;               /* sin padding vertical: el lienzo ocupa todo el alto y las
                                    posiciones en % mapean al artboard original (1024) sin comprimirse */
}

/* Lienzo del collage: ocupa todo el ancho y alto disponibles (a sangre, con los
   márgenes de la sección 1). Todo lo de dentro (incluido el pie) se posiciona en %
   y se reparte por todo el ancho de la pantalla. */
.collage {
  position: relative;
  width: 100%;
  max-width: 1364px;             /* mismo ancho que el título del hero (.hero-centro) */
  margin-inline: auto;           /* columna centrada -> no full-bleed en pantallas anchas */
  height: 100%;
  container-type: size;          /* ancho y alto definen el lienzo (para "cqw" y "cqh") */
  --art-ratio: 1.333;            /* proporción ancho/alto del artboard (1364×1024): por
                                    debajo de ese alto las frutas encogen para no solaparse.
                                    Sube/baja para calibrar ese umbral. */
}

.frutas-titulo {
  position: absolute;
  left: 50%;
  top: 20px;                 /* misma distancia al borde superior que el eyebrow de la sección 1 */
  transform: translateX(-50%);
  width: 95%;
  text-align: center;
  font-family: "PP Agrandir", sans-serif;
  font-weight: 800;          /* "Heavy" */
  font-stretch: 200%;        /* "Grand" -> Grand Heavy */
  font-size: clamp(40px, 8vw, 110px);   /* fluido: nunca gigante en ventanas estrechas, 110px en pantalla ancha */
  line-height: 1;
  letter-spacing: -0.01em;
}

.frutas-linea {
  position: absolute;
  left: 3.4375%;
  top: 15.33%;
  width: 93.82%;
  height: 2px;
  background: var(--crema);
}

/* La <figure> no pinta nada: deja que la imagen del grupo se posicione
   directamente dentro del lienzo. */
.fruit { display: contents; }

/* El enlace de una fruta (p. ej. la chirimoya) no debe pintar el texto de azul ni subrayarlo:
   hereda color y desactiva la decoración por defecto del navegador. */
.fruit-link { color: inherit; text-decoration: none; }

/* En ESCRITORIO el carrusel "no existe": display:contents hace que el track y su
   envoltorio desaparezcan del layout y las frutas vuelvan a posicionarse en el collage. */
.carrusel, .carrusel-track { display: contents; }
.car-flecha, .car-puntos { display: none; }

/* La tarjeta de piezas sueltas es solo para la columna móvil (ver responsive). */
.fruit-card { display: none; }

/* Cada fruta = una imagen ya compuesta (fruta + flecha + nombre).
   - Ancho = ancho nativo del PNG (--pw) por la escala única (--scale), en cqw.
     Como TODAS comparten --scale, sus tamaños relativos quedan correctos.
   - height:auto -> conserva su proporción.
   - El anclaje es el CENTRO (--cx/--cy) con translate(-50%,-50%). */
.fruit-group {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: calc(var(--pw) * var(--scale) * min(1cqw, var(--art-ratio) * 1cqh));
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 0.35s ease;
}
/* Efecto al pasar el ratón: la fruta crece un poco y gira muy sutilmente (manteniendo el anclaje).
   Sólo en escritorio con puntero — en móvil/tablet/táctil no aplica. */
@media (hover: hover) and (min-width: 1025px) {
  .fruit-group:hover {
    transform: translate(-50%, -50%) scale(1.07) rotate(2.5deg);
  }
}

/* Pie de página: dentro del lienzo, anclado abajo (como en el Figma) */
.pie {
  position: absolute;
  left: 20px;                    /* a ancho completo de pantalla con 20px de margen lateral */
  right: 20px;
  bottom: 12px;                  /* footer pegado al borde inferior */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(14px, 1.4vw, 20px);   /* mismo tamaño que el eyebrow de la sección 1 */
}

/* NOVUM del pie: subrayado que se anima al hover (barre de izquierda a derecha).
   El enlace ya lleva text-decoration:none inline; el subrayado es esta línea ::after. */
.pie a { position: relative; }
.pie a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;   /* al salir, se retrae hacia la derecha */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .pie a:hover::after { transform: scaleX(1); transform-origin: left center; }  /* al entrar, crece desde la izquierda */
}


/* ===========================================================
   APARICIÓN de la sección 2 (título sube + frutas en cascada)
   Solo se activa si hay JS (clase .js). Sin JS, todo se ve normal.
   =========================================================== */
/* Línea y pie: aparecen con un fundido simple */
.js .frutas-linea,
.js .pie {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Título: la frase entera sube de una pieza desde detrás de una máscara.
   (la estructura máscara > inner la crea el JS) */
.frutas-titulo .ft-mask {
  display: inline-block;
  overflow: hidden;               /* recorta la frase mientras sube */
  vertical-align: top;
  padding: 0.15em 0.06em;         /* aire para que el clip no corte la cola de la "g" de "Elige" */
  margin: -0.15em -0.06em;        /* ...compensado, sin hueco visible */
}
.frutas-titulo .ft-inner { display: inline-block; will-change: transform; }
.js .frutas-titulo .ft-inner {
  transform: translateY(120%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Frutas: la OPACIDAD se anima para la cascada; el TRANSFORM (anclaje/hover) va aparte,
   rápido y sin retardo -> el hover no se ve lento. */
.js .fruit-group {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.35s ease;
}

/* cuando la sección 2 entra en pantalla, todo aparece */
.frutas.is-visible .frutas-titulo .ft-inner { transform: translateY(0); }
.frutas.is-visible .frutas-linea  { opacity: 1; transition-delay: 0.1s; }
.frutas.is-visible .fruit-group {
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 0.09s + 0.2s), 0s;   /* retardo solo en la opacidad (cascada), no en el transform/hover */
}
.frutas.is-visible .pie { opacity: 1; transition-delay: 1s; }

/* quien prefiera menos movimiento: todo visible sin animación */
@media (prefers-reduced-motion: reduce) {
  .js .frutas-linea,
  .js .fruit-group,
  .js .pie { opacity: 1; transition: none; }
  .js .frutas-titulo .ft-inner { transform: none; transition: none; }
}


/* ===========================================================
   CURSOR PERSONALIZADO — esfera blanca que crece al pasar por las frutas
   Solo en escritorio con ratón (puntero fino); en móvil/tablet/táctil no se toca nada.
   =========================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  * { cursor: none; }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--crema);             /* #FFF7C9 sobre el fondo (sin fusión) */
    mix-blend-mode: normal;
    pointer-events: none;                 /* nunca bloquea clics ni hovers */
    z-index: 9999;
    opacity: 0;                           /* aparece con el primer movimiento */
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease;
    will-change: transform;
  }
  .cursor.is-visible { opacity: 1; }
  .cursor.is-over  { mix-blend-mode: exclusion; }  /* se funde al superponerse a imágenes o textos */
  .cursor.is-hover { width: 22px; height: 22px; }  /* crece muy poco sobre las frutas */
}


/* ===========================================================
   RESPONSIVE — móvil y tablet (hasta 1024px)
   El collage artístico se apila en una sola columna, legible y sin tirones.
   =========================================================== */
@media (max-width: 1024px) {
  /* Snap fullscreen: cada sección encaja entera (mandatory) para que la sección 2 no
     asome por debajo del hero. El overscroll-behavior del carrusel (más abajo) ya evita
     que el scroll se trabe al arrastrar sobre las frutas. */
  html { scroll-snap-type: y mandatory; }

  /* 100dvh = alto VISIBLE real del móvil (descuenta la barra de URL): así el hero cubre
     la pantalla exacta y no deja ver la sección siguiente. */
  .hero {
    padding: 24px 22px 32px;
    height: 100dvh;
    position: relative;          /* ancla para eyebrow y desliza absolutos */
    justify-content: center;     /* centra .hero-centro en la pantalla */
  }
  /* Eyebrow anclado arriba: no afecta al centrado del bloque central */
  .hero .hero-newsletter {
    position: absolute;
    top: 24px;
    left: 22px;
    right: 22px;
  }
  /* Bloque central: menos hueco título -> texto */
  .hero .hero-centro { gap: 6px; }
  /* DESLIZA anclado al borde inferior (más abajo que antes) */
  .hero .desliza {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
  }

  /* PAGER por transform (lo monta el JS en móvil): el body NO hace scroll y recorta lo que
     sobra, así la sección siguiente nunca asoma por el borde. El cambio de sección lo
     desplaza el script con su curva de easing. */
  html.pager-on, html.pager-on body { height: 100dvh; overflow: hidden; }
  html.pager-on .pager-track { will-change: transform; }
  .hero-titulo { font-size: clamp(40px, 13.5vw, 64px); white-space: normal; overflow-wrap: anywhere; }   /* ~52px en 390; puede partir en dos líneas */
  .hero-intro { text-align: center; font-size: 18px; }

  /* La sección 2 vuelve a ser UNA pantalla completa: título arriba, CARRUSEL en medio
     (una fruta por "slide", se desliza con el dedo / flechas / puntos) y pie abajo. */
  .frutas {
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .collage {
    position: static;
    aspect-ratio: auto;
    container-type: normal;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 44px 16px 0;
    box-sizing: border-box;
    /* Factor de escala GLOBAL: cada fruta = su --pw * este factor * su --fs individual.
       Sube/baja --fscale para reescalar TODAS a la vez; usa --fs en cada <figure>
       (en el HTML) para ajustar fruta a fruta. */
    --fscale: min(0.16vw, 0.62px);
    /* Escala ÚNICA de los frames del carrusel: un solo valor para TODAS (1 = tamaño base).
       Sube/baja este número para agrandar o reducir todas las frutas a la vez. */
    --cscale: 1.3;
  }

  .frutas-titulo,
  .frutas-linea {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 100%;
  }
  .frutas-titulo { font-size: clamp(40px, 14vw, 64px); white-space: normal; overflow-wrap: anywhere; }   /* ~55px en 390 */
  .frutas-linea { display: none; }   /* en móvil el indicador son los puntos, no la línea */
  .js .frutas-titulo { transform: translateY(28px); }
  .frutas.is-visible .frutas-titulo { transform: translateY(0); }

  /* --- CARRUSEL: ocupa todo el hueco entre el título y el pie --- */
  /* display:flex anula el display:contents de la regla base (escritorio). */
  .carrusel {
    display: flex;
    flex-direction: column;
    justify-content: center;       /* centra el bloque puntos+imagen+nombre en el hueco */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }
  .carrusel-track {
    flex: 0 0 auto;                /* alto = el del contenido, para poder centrarlo como bloque */
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior: contain;          /* no encadena el scroll del carrusel con el de la página */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox: oculta la barra */
  }
  .carrusel-track::-webkit-scrollbar { display: none; }   /* WebKit: oculta la barra */

  /* Cada fruta = un slide a pantalla completa, contenido centrado.
     El padding lateral deja aire para las flechas; el inferior, para los puntos. */
  .fruit {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;     /* un swipe = una fruta: no deja pasar de largo (anti-fling en Android) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 44px 20px;
    box-sizing: border-box;
  }

  /* En móvil NO se usa el collage de escritorio. */
  .fruit-group { display: none; }

  /* Cada slide = fruta AISLADA (recursos/movil_solas/, lienzo cuadrado 708x708) + su nombre
     como texto debajo. Como el lienzo es cuadrado e idéntico en todas, al fijar el ancho
     todas salen al MISMO tamaño en pantalla. --cscale escala TODAS a la vez. */
  /* Mismo hueco arriba (puntos -> fruta) y abajo (fruta -> nombre): tarjeta alineada al
     inicio, con padding-top y gap iguales (--gap-fruta). */
  .fruit-card {
    --gap-fruta: clamp(14px, 3.5vh, 34px);
    flex: 0 0 auto;                          /* alto = imagen + nombre (no estira el slide) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-fruta);                    /* hueco fruta -> nombre */
    width: 100%;
    min-height: 0;
  }
  .fruit-photo {
    width: calc(60vw * var(--cscale));
    max-width: calc(300px * var(--cscale));
    height: auto;
    max-height: 46vh;                        /* no desborda el alto del slide */
    object-fit: contain;
    /* --fs = escala VISUAL por fruta. Va en transform (no en width/height) para no alterar
       el layout: la caja es idéntica en todas, así el nombre no se mueve entre slides. */
    transform: scale(var(--fs, 1));
    transform-origin: center 60%;
  }
  /* Nombre de la fruta bajo la imagen — spec Figma: PP Agrandir Text Bold, 50px,
     line-height auto, letter-spacing 0%, centrado. (clamp para no desbordar en pantallas
     más estrechas; en 390px da exactamente 50px). */
  .fruit-name {
    display: block;
    font-family: "PP Agrandir Text", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: clamp(32px, 10.8vw, 42px);
    line-height: normal;
    text-align: center;
    color: var(--crema);
  }

  /* En el carrusel solo se ve una fruta: fundido simple, sin la cascada del collage. */
  .js .fruit-card { opacity: 0; transition: opacity 0.6s ease; }
  .frutas.is-visible .fruit-card { opacity: 1; transition-delay: 0.2s; }

  /* --- Efecto al centrar una fruta: el nombre sube en cascada (letra a letra) y la
         fruta entra con un fundido-zoom muy leve. Se redispara al cambiar de slide. --- */
  .fruit-name .fn-l { display: inline-block; opacity: 0; transform: translateY(0.5em); will-change: transform, opacity; }
  .fruit.is-active .fruit-name .fn-l {
    animation: fn-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--l, 0) * 0.04s);
  }
  @keyframes fn-rise {
    from { opacity: 0; transform: translateY(0.5em); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Imagen: al centrarse, sutil zoom + balanceo. El keyframe solo toca escala/rotación
     (nunca la opacidad) y arranca y termina en reposo -> ni salto ni parpadeo. */
  .fruit-photo { transform-origin: center 60%; }
  .fruit.is-active .fruit-photo { animation: fn-img-bob 0.85s cubic-bezier(0.34, 1.1, 0.64, 1) both; }
  @keyframes fn-img-bob {
    0%   { transform: scale(calc(0.9 * var(--fs, 1))) rotate(-6deg); }
    100% { transform: scale(var(--fs, 1)) rotate(0deg); }
  }

  /* Menos movimiento: nombre e imagen sin animación. */
  @media (prefers-reduced-motion: reduce) {
    .fruit-name .fn-l { opacity: 1; transform: none; }
    .fruit.is-active .fruit-name .fn-l,
    .fruit.is-active .fruit-photo { animation: none; }
  }

  /* Flechas laterales */
  .car-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 44%;                                /* alineadas con la fruta (el nombre queda debajo) */
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crema);
    font-family: "PP Agrandir Text", sans-serif;
    font-size: 46px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .car-prev { left: -4px; }
  .car-next { right: -4px; }
  .car-flecha:disabled { opacity: 0.3; pointer-events: none; }

  /* Puntos indicadores: justo debajo del título (order:-1 los lleva arriba del carrusel). */
  .car-puntos {
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1;
    flex: 0 0 auto;
    gap: 11px;                               /* puntos más separados, como el mockup */
    margin: 0 0 clamp(14px, 3.5vh, 34px);    /* hueco puntos -> fruta (mismo ritmo que fruta -> nombre) */
    z-index: 3;
  }
  .car-punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--crema);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .car-punto.is-active { opacity: 1; transform: scale(1.3); }

  /* Pie como barra inferior compacta del panel (no debe robar alto al carrusel).
     Padding inferior reducido para pegarlo al borde de la pantalla. */
  .pie {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 10px 16px 4px;
    font-size: 14px;
  }
}

/* ===========================================================
   TABLET (vertical, 768–1024px)
   Misma estructura que móvil (pager + carrusel a pantalla completa),
   pero los elementos crecen para repartirse en una pantalla más grande
   y no quedar pequeños flotando en el centro.
   =========================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Eyebrow y pie al mismo tamaño en tablet */
  .hero .hero-newsletter { font-size: 22px; }
  .pie { font-size: 22px; padding: 12px 22px 24px; }   /* 24px abajo = misma distancia que el eyebrow arriba */

  /* Hero: título y cuerpo más grandes */
  .hero-titulo { font-size: clamp(64px, 10vw, 96px); }
  .hero-intro  { font-size: 26px; }

  /* Indicador DESLIZA más grande (texto + flecha) */
  .desliza-texto      { font-size: clamp(20px, 2vw, 28px); }
  .desliza-flecha     { height: 56px; }
  .desliza-flecha img { width: 56px; height: 15px; }
  /* DESLIZA del hero: subirlo (más separado del borde inferior) */
  .hero .desliza      { bottom: clamp(40px, 6vh, 80px); }

  /* Sección 2: título y frutas del carrusel más grandes */
  .frutas-titulo { font-size: clamp(64px, 10vw, 96px); }
  .collage {
    --cscale: 2.1;                 /* frutas del carrusel más grandes (1.3 en móvil) */
    padding-top: 56px;
  }
  .fruit-photo { max-height: 60vh; }
  .fruit-name  { font-size: clamp(48px, 7vw, 64px); }

  /* Más aire bajo el título (puntos) y puntos algo mayores */
  .car-puntos { gap: 14px; margin-top: clamp(28px, 5vh, 56px); }
  .car-punto  { width: 12px; height: 12px; }

  /* Flechas del carrusel más grandes */
  .car-flecha { width: 60px; height: 60px; font-size: 64px; }
}