/* ===========================================================
   NOVUM Newsletter — Frutas exóticas
   Página de detalle de una fruta (plantilla)
   3 secciones a pantalla completa, mismo lenguaje que la home.
   Autocontenida: no depende de styles.css (la landing).
   =========================================================== */

/* --- Fuentes PP Agrandir (mismos archivos que la landing) --- */
@font-face {
  font-family: "PP Agrandir";
  src: url("../fonts/PPAgrandir-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Agrandir Text";
  src: url("../fonts/PPAgrandir-TextBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --naranja: #ff9861;
  --crema:   #fff7c9;
  --ancho:   1364px;   /* mismo ancho de contenido que la home */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;   /* cada sección encaja en pantalla (como la home) */
}

body {
  background: var(--naranja);
  color: var(--crema);
  font-family: "Inter", sans-serif;
  overflow-x: clip;
}

img { display: block; }

/* ===========================================================
   SECCIONES A PANTALLA COMPLETA
   =========================================================== */
.seccion {
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 20px 39px;            /* mismos márgenes laterales que la home */
}

/* Contenedor centrado al ancho de la home */
.contenido {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  container-type: inline-size;   /* permite dimensionar titulares en cqi (fallback sin JS) */
}

/* Bloques que llenan el alto disponible y centran su contenido */
.intro-centro,
.acordeon-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sección 2 (mapa): tarjeta centrada vertical y horizontalmente */
.seccion--mapa { justify-content: center; }

/* ===========================================================
   SECCIÓN 1 — Intro (cabecera + foto + nombre + datos)
   =========================================================== */
.cabecera-titulo {
  font-family: "PP Agrandir", sans-serif;
  font-weight: 800;
  font-stretch: 200%;            /* Grand Heavy */
  font-size: clamp(40px, 8vw, 110px);   /* mismo tamaño que .frutas-titulo de la home; el JS lo ajusta a una línea */
  line-height: 0.95;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;            /* misma cabecera que la sección 2 de la home */
}
/* El título enlaza a la home: mismo aspecto que el texto, sin subrayado (tampoco en hover). */
.cabecera-titulo a { color: inherit; text-decoration: none; }

/* Línea bajo el título, a todo el ancho del contenido (como .frutas-linea de la home) */
.cabecera-linea {
  width: 100%;
  height: 2px;
  background: var(--crema);
  margin-top: clamp(10px, 1.5vw, 18px);
}

/* Botón volver: cápsula fija (chrome) en la esquina superior izquierda.
   Mismo lenguaje que los pills: fondo crema, contenido naranja. */
.volver {
  position: fixed;
  top: 50%;                       /* centro vertical, pegado al borde izquierdo */
  left: 16px;
  transform: translateY(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0;                         /* el gap aparece sólo al expandirse (vía margin-left del texto) */
  padding: 10px 14px;             /* cápsula compacta cuando solo se ve la flecha */
  background: var(--crema);
  color: var(--naranja);
  border-radius: 999px;
  text-decoration: none;
  /* Texto idéntico al "DESLIZA" de la home (.desliza-texto) */
  font-family: "PP Agrandir Text", sans-serif;
  font-weight: 700;              /* Text Bold */
  text-transform: uppercase;
  font-size: clamp(16px, 1.7vw, 24px);
  transition: padding 0.25s ease, transform 0.25s ease;
}
.volver:focus-visible {
  transform: translateY(calc(-50% - 1px));   /* mantiene el centrado y eleva un pelín */
  padding: 10px 20px;                        /* se ensancha al mostrar el texto */
}
/* Flecha SVG inline: hereda el color naranja del botón vía currentColor */
.volver-flecha {
  width: 40px;                    /* mismo tamaño que la flecha de la home */
  height: auto;
  display: block;
  transition: transform 0.25s ease;   /* la flecha base ya apunta a la izquierda */
}
.volver:focus-visible .volver-flecha { transform: translateX(-4px); }
/* Texto VOLVER: colapsado por defecto, se despliega al focus (y al hover en escritorio) */
.volver-texto {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}
.volver:focus-visible .volver-texto {
  max-width: 8ch;
  opacity: 1;
  margin-left: 8px;
}
/* Hover sólo en dispositivos con puntero (no se dispara en móvil/táctil) */
@media (hover: hover) and (min-width: 1025px) {
  .volver:hover {
    transform: translateY(calc(-50% - 1px));
    padding: 10px 20px;
  }
  .volver:hover .volver-flecha { transform: translateX(-4px); }
  .volver:hover .volver-texto {
    max-width: 8ch;
    opacity: 1;
    margin-left: 8px;
  }
}

/* Imagen de la fruta (versión cortada, cabecera).
   z-index por encima del nombre: donde solapan, la foto pinta delante. */
.fruta-foto {
  width: min(64%, 500px);
  height: auto;
  max-height: 38dvh;             /* en pantallas altas no muerde (igual que hoy); en las bajas
                                    limita el alto de la foto y evita el solape con el nombre */
  object-fit: contain;           /* al topar max-height mantiene la proporción (no aplasta la foto);
                                    sin efecto cuando manda el ancho, así que no cambia móvil/tablet */
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Nombre y nombre científico */
.fruta-nombre {
  text-align: center;
  font-family: "PP Agrandir", sans-serif;   /* fuente VARIABLE (para el peso reactivo) */
  font-weight: 550;              /* reposo más ligero (el JS lo gobierna por letra) */
  font-stretch: 78%;             /* condensada (más estrecha que el ancho normal) */
  font-size: clamp(42px, 11cqi, 150px);   /* el JS lo ajusta a una línea; fallback */
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-top: -0.16em;           /* solapa con la foto; la foto (z-index mayor) pinta delante */
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
/* Estructura que crea el JS para el efecto de peso reactivo al ratón */
.fruta-nombre .fn-w { display: inline-block; white-space: nowrap; }  /* palabra indivisible */
.fruta-nombre .fn-l { display: inline-block; }                       /* letra con peso propio */
.fruta-cientifico {
  text-align: center;
  font-weight: 400;              /* Inter Regular, oblicua "falsa" (mantiene la 'a' de 2 pisos) */
  font-style: normal;
  font-size: 48px;
  margin-top: -6px;
}
/* Cursiva "falsa" reutilizable: inclina la fuente normal con skew en vez de usar
   la cursiva real de Inter (que tiene una 'a' de un piso, distinta al resto).
   En un <span> interior para no chocar con el transform de .reveal en el <p>.
   Se usa en el nombre científico y en las notas en cursiva del acordeón. */
.ital {
  display: inline-block;
  transform: skewX(-10deg);
  font-style: normal;
}

/* Etiquetas (TAMBIÉN LLAMADA / ORIGEN) */
.datos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(20px, 3.2vw, 40px);
}
.dato { text-align: center; }
.dato-pill {
  display: inline-block;
  background: var(--crema);
  color: var(--naranja);
  font-family: "PP Agrandir Text", sans-serif;
  font-weight: 700;              /* Text Bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(15px, 2vw, 24px);
  padding: 7px 22px;
  border-radius: 999px;
}
.dato-texto {
  margin-top: 9px;
  font-weight: 400;              /* Inter Regular, recta (sin cursiva) */
  font-style: normal;
  font-size: clamp(16px, 2vw, 24px);
  opacity: 0.92;
}

/* ===========================================================
   SECCIÓN 2 — CULTIVO Y CONSUMO (tarjeta con el mapa)
   =========================================================== */
.cultivo {
  position: relative;            /* ancla el scrim + la card por país (atenúa la tarjeta entera) */
  background: var(--crema);
  color: var(--naranja);
  border-radius: 26px;
  max-width: 980px;              /* tarjeta centrada dentro de la columna */
  margin-inline: auto;
  padding: clamp(12px, 1.6vw, 20px) clamp(22px, 3vw, 44px);   /* nota a la misma distancia del borde que el título */
}
.cultivo-titulo {
  text-align: center;
  font-family: "PP Agrandir", sans-serif;   /* variable */
  font-weight: 600;
  font-stretch: 100%;            /* ancho normal, no condensada */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(24px, 3.4vw, 40px);
}

/* Lienzo del mapa: contenedor relativo para posicionar las marcas en % */
.mapa {
  position: relative;
  width: min(86%, 560px, calc(62dvh * 203.71 / 275.69));   /* tope de alto ~62dvh (viewBox 203.71×275.69): el mapa cabe entero en pantallas bajas */
  margin: clamp(12px, 2vw, 22px) auto 0;
}
.mapa-base { width: 100%; height: auto; }

/* Cada fruta sobre un país de cultivo. El <span> (left/top en % del lienzo, ver
   comentario en el HTML) centra la fruta en el punto; la <img> interior lleva la
   rotación y el crecer; el ::after es la etiqueta del país. */
.marca {
  position: absolute;
  width: 7.5%;
  transform: translate(-50%, -50%);   /* centra en el punto del mapa */
  transition: opacity 0.5s ease;      /* la usa la aparición al scroll */
}
.marca img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);          /* 90° hacia la izquierda */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  transition: transform 0.3s ease, filter 0.3s ease;
}
@media (hover: hover) and (min-width: 1025px) {
  .marca:hover { z-index: 2; }          /* la fruta + etiqueta quedan sobre las vecinas */
  .marca:hover img {
    transform: rotate(-90deg) scale(1.3);
    filter: drop-shadow(0 4px 9px rgba(0,0,0,0.28));
  }
}

/* Etiqueta con el país: oculta; aparece al hover encima de la fruta */
.marca::after {
  content: attr(data-pais);
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translate(-50%, 6px);
  padding: 4px 10px;
  background: var(--crema);
  color: var(--naranja);
  border-radius: 999px;
  font-family: "PP Agrandir", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(11px, 1.3vw, 14px);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (min-width: 1025px) {
  .marca:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);      /* sube ligeramente al aparecer */
  }
}

/* En táctil no hay hover fiable: el JS marca .is-active según la posición
   de scroll y vamos mostrando los nombres de país de uno en uno */
@media (hover: none) {
  .marca.is-active { z-index: 2; }
  .marca.is-active::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ===========================================================
   CARD POR PAÍS — al clicar/tocar un pin aparece una ficha superpuesta
   (país + temporada local + dato). El scrim atenúa TODA la tarjeta de cultivo
   (no solo el mapa, ni toda la página) para enfocar la card. Estado abierto:
   clase .card-abierta en .cultivo. Mismo lenguaje visual que las etiquetas
   (crema sobre naranja). JS rellena el contenido y gestiona apertura/cierre
   (clic en ✕, fuera de la card o Escape). Scrim y card son hijos de .cultivo. */
.mapa-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;           /* hereda los 26px de .cultivo: dim con esquinas redondeadas */
  background: rgba(0, 0, 0, 0.30);
  opacity: 0;
  visibility: hidden;               /* oculto también desactiva el clic cuando está cerrado */
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cultivo.card-abierta .mapa-scrim { opacity: 1; visibility: visible; }

.mapa-card {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(82%, 280px);
  padding: 18px 18px 20px;
  background: var(--crema);
  color: var(--naranja);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.cultivo.card-abierta .mapa-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.mapa-card-icono {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  object-fit: contain;
  transform: rotate(-90deg);        /* misma orientación que la fruta en los pines */
}
.mapa-card-pais {
  margin: 0 0 8px;
  font-family: "PP Agrandir", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(18px, 2.4vw, 24px);
}
.mapa-card-temporada {
  margin: 0 0 6px;
  font-weight: 600;
}
.mapa-card-dato {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 15px);
  opacity: 0.9;
}
.mapa-card-cerrar {
  position: absolute;
  top: 4px;
  right: 10px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--naranja);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
/* Móvil/tablet: la card mide lo mismo (≈280px) pero se mira de cerca; subimos el
   cuerpo de texto (las medidas en vw lo encogían) y le damos un pelín más de ancho. */
@media (max-width: 1024px) {
  .mapa-card { width: min(88%, 340px); padding: 22px 20px 24px; }
  .mapa-card-icono { width: 60px; height: 60px; }
  .mapa-card-pais { font-size: 26px; }
  .mapa-card-temporada { font-size: 18px; }
  .mapa-card-dato { font-size: 17px; }
}

/* Nota a pie del mapa (la excepción de España) */
.mapa-nota {
  margin-top: 14px;
  text-align: center;
  font-size: clamp(15px, 1.9vw, 20px);
  font-style: normal;            /* misma cursiva "falsa" que el resto (skew, no italic real) */
  transform: skewX(-10deg);
  opacity: 0.9;
}

/* ===========================================================
   INDICADOR "DESLIZA" — flecha que rebota (mismo lenguaje que la home)
   SOLO MÓVIL: en escritorio no se muestra (display:none); se reactiva en el
   bloque @media (max-width: 1024px). Estilos base aquí para no repetirlos.
   =========================================================== */
.desliza {
  display: none;                 /* escritorio: oculto; móvil lo reactiva */
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity 0.25s ease;
}
.desliza-texto {
  font-family: "PP Agrandir Text", sans-serif;   /* corte Text Bold, igual que la home */
  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 hacia abajo */
}
@keyframes bob {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(6px); }
}
.desliza.is-hidden { opacity: 0; pointer-events: none; }

/* ===========================================================
   BOTÓN "VOLVER ARRIBA" — sección 3, encima del pie.
   Es LITERALMENTE el botón VOLVER (misma cápsula, flecha y texto que se despliega)
   girado 90º para apuntar hacia arriba. SOLO MÓVIL (se reactiva en @media 1024px).
   Valores calcados de .volver / .volver-flecha / .volver-texto.
   =========================================================== */
.subir {
  display: none;                 /* escritorio: oculto; móvil lo reactiva */
  align-items: center;
  gap: 0;
  padding: 5px 10px;             /* mismo tamaño que el VOLVER en móvil */
  background: var(--crema);
  color: var(--naranja);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-family: "PP Agrandir Text", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}
.subir-flecha {
  width: 20px;                   /* misma flecha que el VOLVER en móvil */
  height: auto;
  display: block;
}
/* Texto VOLVER: colapsado; se despliega al focus/tap (igual que el botón original) */
.subir-texto {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}
.subir:focus-visible .subir-texto,
.subir.is-open .subir-texto {
  max-width: 8ch;
  opacity: 1;
  margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .desliza-flecha, .desliza-fija-flecha { animation: none; }
}

/* ===========================================================
   ESCRITORIO — flecha "desliza" fija a la derecha + "volver arriba"
   La flecha (la misma que rebota en la home) invita a bajar; al entrar la última
   sección (html.en-final) cede su sitio, en el MISMO punto, al botón .subir, que
   aquí sube al inicio (su click ya está montado en el HTML). Solo ≥1025px; en
   móvil/tablet queda oculto.
   =========================================================== */
.desliza-fija { display: none; }   /* móvil/tablet: oculto, igual que .desliza y .subir */

@media (min-width: 1025px) {
  /* DESLIZA: misma cápsula vertical que el "volver arriba" (.subir) pero con la flecha
     apuntando ABAJO, en naranja sobre crema — el feedback decía que la flecha pelada no se
     veía sobre el naranja. Fija a la derecha y centrada; en la última sección (html.en-final)
     se funde para dejar paso a "volver arriba".
     El contenedor (.desliza-fija) SOLO posiciona (centrado + relevo); la cápsula visible es
     .desliza-fija-flecha y rebota ENTERA — así no chocan el transform del centrado con el del
     rebote (van en elementos distintos). */
  .desliza-fija {
    display: inline-flex;              /* envuelve la cápsula */
    position: fixed;
    top: 50%;
    right: 16px;                       /* a la derecha, mismo margen que el VOLVER */
    transform: translateY(-50%);       /* centra; el relevo (en-final) la desliza */
    z-index: 50;
    color: var(--naranja);             /* la flecha (currentColor) en naranja sobre crema */
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .desliza-fija-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;                       /* la cápsula (misma que .subir) */
    height: 84px;
    background: var(--crema);
    border-radius: 999px;
    animation: bob 1.6s ease-in-out infinite;   /* la cápsula ENTERA rebota (flecha incluida) */
  }
  .desliza-fija-flecha svg {
    width: 46px;                       /* misma flecha que .subir */
    height: auto;
    transform: rotate(-90deg);         /* apunta hacia abajo */
  }
  /* Relevo: al entrar la última sección, la flecha (que apunta abajo) se desliza hacia
     abajo y se desvanece, mientras el botón "volver arriba" sube a su sitio (ver .subir). */
  html.en-final .desliza-fija { opacity: 0; pointer-events: none; transform: translateY(calc(-50% + 18px)); }

  /* "VOLVER ARRIBA": el mismo .subir del móvil, traído a la derecha en escritorio
     (mismo punto que la flecha). Cápsula VERTICAL (más alta que ancha): la flecha
     apunta hacia arriba, así que la píldora acostada del VOLVER no encaja. Sin texto.
     Estado base = visible y centrado; fuera de la última sección se esconde abajo
     (html:not(.en-final)) para que el relevo ENTRE subiendo + fundido. */
  .subir {
    display: inline-flex;
    align-items: center;
    justify-content: center;          /* flecha centrada en la cápsula */
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 50;
    width: 56px;                      /* estrecha... */
    height: 84px;                     /* ...y alta -> cápsula vertical (border-radius:999px de base) */
    padding: 0;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .subir-flecha { width: 46px; transform: rotate(90deg); }   /* misma flecha, apuntando arriba */
  .subir-texto { display: none; }    /* escritorio: cápsula vertical sin texto (la etiqueta va en aria-label) */
  .subir:focus-visible { transform: translateY(-50%) scale(1.1); }
  /* Oculto y desplazado abajo salvo en la última sección (así el relevo entra subiendo) */
  html:not(.en-final) .subir { opacity: 0; pointer-events: none; transform: translateY(calc(-50% + 18px)); }
  /* Al aparecer (entrar la última sección) entra con un micro-rebote (overshoot).
     Es un @keyframes aparte para NO tocar el hover de escala, que sigue suave. */
  html.en-final .subir { animation: subir-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes subir-pop {
    0%   { opacity: 0; transform: translateY(calc(-50% + 18px)); }
    100% { opacity: 1; transform: translateY(-50%); }
  }
}

/* Hover (solo puntero fino): la cápsula escala un poco como feedback (igual el desliza y el "volver arriba").
   En el desliza el escalado va en el contenedor exterior (.desliza-fija): su transform está libre,
   mientras la cápsula interior se encarga del rebote. */
@media (hover: hover) and (min-width: 1025px) {
  .subir:hover        { transform: translateY(-50%) scale(1.1); }
  .desliza-fija:hover { transform: translateY(-50%) scale(1.1); }
}

/* En escritorio el wrapper del pin desaparece: la tarjeta del mapa vuelve al
   flujo normal (la sección centra como siempre, con hover + snap por rueda). */
.mapa-pin { display: contents; }

/* ===========================================================
   SECCIÓN 3 — ACORDEÓN + PIE
   =========================================================== */
.acordeon { width: 100%; }

.item { border-top: 2px solid var(--crema); }
.acordeon .item:last-child { border-bottom: 2px solid var(--crema); }

.item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 2px;             /* ajustado: menos hueco con la línea y con el párrafo */
  font-family: "PP Agrandir", sans-serif;
  font-weight: 300;              /* más ligero (la 400 se veía demasiado densa) */
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.item > summary::-webkit-details-marker { display: none; }

/* Indicador ">" que gira a "∨" al abrir */
.item > summary::before {
  content: "›";
  display: inline-block;
  font-weight: 300;
  transform: rotate(0deg);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.item.is-open > summary::before { transform: rotate(90deg); }

/* Letras del summary envueltas por JS para el efecto de peso reactivo al ratón */
.item > summary .fn-w { display: inline-block; white-space: nowrap; }
.item > summary .fn-l { display: inline-block; }

/* Panel plegable: técnica grid 0fr<->1fr, que anima la ALTURA REAL del contenido
   (suave, sin el tramo muerto del max-height). Sin JS queda visible (accesible);
   con JS va plegado salvo .is-open (la clase la gobierna el JS al hacer clic). */
.item-panel {
  display: grid;
  grid-template-rows: 1fr;       /* sin JS: visible */
}
.js .item-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .item.is-open .item-panel { grid-template-rows: 1fr; }

/* Máscara: la celda del grid solo recorta. SIN padding, para que colapse a 0 real
   (el padding aquí dejaría una franja visible y el texto se vería partido plegado). */
.item-cuerpo {
  overflow: hidden;
  min-height: 0;                 /* permite que la fila baje hasta 0 */
}
/* El texto y su espaciado van dentro de la máscara, no en ella */
.item-texto {
  padding: 2px 2px 22px 2px;     /* alineado a la flecha del summary (mismo padding-left que él), no al título */
  font-weight: 400;              /* Inter Regular (sin cursiva) */
  font-size: clamp(16px, 2vw, 24px);   /* mismo cuerpo que la sección 1 (.dato-texto) */
  line-height: 1.45;
  max-width: 70ch;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .js .item-panel { transition: none; }
  .item > summary::before { transition: none; }
}

/* Pie: anclado al borde inferior a ancho completo (mismo que la home) */
.seccion--detalle { position: relative; }
.pie {
  position: absolute;            /* anclado al borde inferior, como en la home */
  left: 20px;
  right: 20px;
  bottom: 12px;                  /* pegado al borde inferior, mismo valor que la home */
  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 la home */
}

/* 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 AL SCROLL (mismo patrón que .frutas.is-visible de la home)
   Solo con JS (clase .js). Sin JS, todo se ve normal.
   =========================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.seccion.is-visible .reveal {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 0.09s);   /* cascada */
}


/* Marcas del mapa: solo se anima la OPACIDAD (el transform queda para rotación/hover) */
.js .marca { opacity: 0; }
.seccion.is-visible .marca {
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 0.12s + 0.25s);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .marca { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   RESPONSIVE — móvil / tablet (hasta 1024px)
   Mismo snap fullscreen que desktop, pero apoyado en el scroll nativo
   (no JS): cada sección encaja al alto del viewport y el dedo salta
   limpio de una a otra.
   =========================================================== */
@media (max-width: 1024px) {
  /* PAGER por transform (lo monta el JS, igual que la home): el body NO hace scroll
     y recorta lo que sobra, así la sección siguiente nunca asoma. El cambio de sección
     lo anima el script con su curva de easing; en el mapa cada gesto enciende un país. */
  html.pager-on, html.pager-on body { height: 100dvh; overflow: hidden; }
  html.pager-on .pager-track { will-change: transform; }
  html.pager-on .seccion { overflow: hidden; }   /* nada asoma entre secciones */
  .seccion {
    min-height: 100dvh;          /* pantalla completa real (respeta la barra del navegador móvil) */
    overflow: visible;
    padding: 24px 22px;
  }
  .intro-centro { margin-top: 0; }
  .acordeon-wrap { margin: 0; }   /* el flex la centra dentro de la pantalla completa */

  /* Indicadores DESLIZA: solo visibles en móvil */
  .desliza { display: flex; }

  /* Foto de la fruta en móvil (más grande) */
  .fruta-foto { width: min(70%, 420px); }

  /* Nombre de la fruta: MISMO tamaño en todas las fichas (móvil/tablet), igual que
     en escritorio. Por defecto el JS encoge cada nombre hasta que cabe en una línea,
     y como el contenedor es estrecho en móvil cada fruta quedaba en un tamaño distinto
     según su longitud. Aquí lo fijamos idéntico para todas con cqi (% del ancho del
     contenedor, igual en todas); el !important gana al font-size inline del script. */
  .fruta-nombre { font-size: clamp(38px, 16cqi, 90px) !important; }

  /* --- MAPA: una pantalla más del pager (solo móvil) ---
     El recorrido país a país ya no depende del scroll: lo gobierna el pager por
     gestos (cada swipe enciende el siguiente país; tras el último, pasa a la sección 3).
     Por eso la sección vuelve a medir una pantalla, sin sticky ni altura extra. */
  .seccion--mapa { padding: 0; position: relative; }
  .mapa-pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    padding: 24px 22px;
    position: relative;
  }
  /* Tarjeta del mapa: menos padding lateral en móvil -> el mapa gana ancho */
  .cultivo { padding-left: 14px; padding-right: 14px; }

  /* DESLIZA bajo el mapa: anclada al borde inferior del pin, más abajo */
  .desliza--mapa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(8px, 2vh, 18px);
  }
  /* En el mapa solo dejamos la flecha (sin la palabra DESLIZA) */
  .desliza--mapa .desliza-texto { display: none; }

  /* El país activo (lo enciende el pager por gestos) muestra su etiqueta.
     En móvil el pager manda aunque el dispositivo declare hover. */
  .marca.is-active { z-index: 2; }
  .marca.is-active::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  /* El pager va encendiendo los países en cascada; cada fruta aparece (con el fundido
     de .marca) y se queda. La etiqueta del país sí es solo la del actual (is-active). */
  .seccion--mapa.is-visible .marca { opacity: 0; transition-delay: 0s; }
  .seccion--mapa.is-visible .marca.is-shown { opacity: 1; }
  /* Pie anclado al borde inferior de la sección 3 (mismo patrón que desktop) */
  .seccion--detalle { padding-bottom: 10px; }

  /* Pareja VOLVER + SUBIR: cápsula fija y centrada arriba (el JS del pager las
     mete en este envoltorio y lo cuelga del body para que el transform de la
     pista no rompa el position:fixed). Se desvanece junta al pasar de sección. */
  .nav-top {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0;                         /* el hueco lo aporta el margin-left de .subir; con la flecha colapsada, INICIO no arrastra gap y queda centrado */
    transition: opacity 0.25s ease;
  }
  .nav-top.is-hidden { opacity: 0; pointer-events: none; }

  /* Flecha "subir arriba": botón circular crema, secundario a INICIO. Gira SOLO la
     flecha (apunta arriba), a su tamaño completo; la cápsula NO gira y tiene caja
     explícita, así que INICIO queda centrado de verdad. Oculta en la sección 1 (ya
     estás arriba) y revelada al avanzar (.is-visible vía el pager) con fundido;
     colapsa su ancho a 0 mientras está oculta para no descentrar INICIO en la intro. */
  .subir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 0;                       /* colapsada: 0 de ancho → INICIO centrado en la intro */
    height: 30px;
    padding: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, width 0.3s ease, margin 0.3s ease;
  }
  .subir-flecha { width: 20px; transform: rotate(90deg); }   /* flecha hacia arriba, tamaño completo */
  .subir-texto  { display: none; }                           /* sin texto: un tap no despliega "VOLVER" */
  .subir.is-visible {
    opacity: 1;
    pointer-events: auto;
    width: 30px;                    /* círculo de 30px (border-radius:999px de base) */
    margin-left: 8px;
  }

  /* La intro deja sitio arriba al botón VOLVER fijo (no lo tapa el título) y
     baja un poco todo el contenido: más aire arriba y menos abajo desplaza el
     conjunto (título, foto, datos y desliza) hacia abajo. El VOLVER es fixed: no se mueve. */
  .seccion--intro { padding-top: 72px; padding-bottom: 8px; }

  /* Cabecera: mismos valores que los títulos de la home en móvil
     (.hero-titulo / .frutas-titulo, styles.css:360/402) */
  .cabecera-titulo {
    font-size: clamp(40px, 13.5vw, 64px);
    line-height: 1;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* La línea bajo el título se quita en móvil/tablet (como en la home) */
  .cabecera-linea { display: none; }
  /* Nombre científico: 48px era enorme en móvil; ahora ~1:3 respecto al título */
  .fruta-cientifico { font-size: clamp(18px, 4.5vw, 28px); }

  /* Cuerpos de texto a 18px en móvil (mismo tamaño que el hero de la home) */
  .dato-texto,
  .item-texto { font-size: 18px; }

  /* Acordeón: en móvil se revela por el mismo camino fiable que el resto
     (.seccion.is-visible .reveal, en cascada con --i), igual que las secciones
     1 y 2. No depende de ningún observer aparte. */

  /* Botón volver: estático dentro de la barra superior .nav-top (que es quien
     se fija y centra). El desvanecimiento al cambiar de sección lo gobierna
     .nav-top.is-hidden, no el volver por separado. */
  .intro-top { text-align: center; }
  /* INICIO: cápsula crema con la palabra (sin flecha). Acción principal: va a la home. */
  .volver {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 0;
    padding: 6px 16px;
    font-size: 13px;
    transition: transform 0.25s ease, padding 0.25s ease;
  }
  .volver-flecha { display: none; }                /* en móvil/tablet no lleva icono */
  .volver-texto  { display: none; }                /* se sustituye por la palabra INICIO */
  .volver::after { content: "INICIO"; }            /* hereda crema/naranja/mayúsculas/fuente de .volver */
  .volver:focus-visible { transform: translateY(-1px); }
}
@media (max-width: 600px) {
  .mapa { width: 100%; }
  .marca { width: 9%; }
  .item > summary { font-size: 40px; }   /* 64px desbordaría en móvil */
  /* El pie se queda en una sola línea (NOVUM #xxx — © NOVUM) */
}

/* ===========================================================
   TABLET (vertical, 768–1024px)
   Misma estructura que móvil (3 secciones a pantalla + pager por gestos),
   con los elementos más grandes para repartirse bien en pantalla.
   =========================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* SECCIÓN 1 — intro */
  .fruta-foto       { width: min(62%, 560px); }
  .cabecera-titulo  { font-size: clamp(64px, 10vw, 96px); }
  .fruta-cientifico { font-size: clamp(28px, 4vw, 40px); }
  .dato-pill        { font-size: clamp(18px, 2vw, 26px); padding: 8px 26px; }
  .dato-texto,
  .item-texto       { font-size: 26px; }

  /* SECCIÓN 2 — mapa: tarjeta y mapa más grandes */
  .mapa           { width: min(78%, 680px); }
  .cultivo-titulo { font-size: clamp(42px, 5.4vw, 60px); }
  .mapa-nota      { font-size: clamp(22px, 2.6vw, 30px); margin-top: 18px; }
  /* Etiquetas de país (la del país activo): más grandes en tablet */
  .marca::after   { font-size: clamp(15px, 2vw, 21px); padding: 5px 13px; }

  /* SECCIÓN 3 — acordeón: títulos más grandes (sin desbordar) */
  .item > summary { font-size: clamp(64px, 9vw, 88px); }

  /* Indicador DESLIZA y cápsulas VOLVER / SUBIR algo mayores */
  .desliza-texto                { font-size: clamp(20px, 2vw, 28px); }
  /* DESLIZA de la sección 1: subirlo (más separado del borde inferior) */
  .desliza--intro               { margin-bottom: clamp(40px, 6vh, 80px); }
  /* DESLIZA de la sección del mapa: subirlo igual */
  .desliza--mapa                { bottom: clamp(40px, 6vh, 80px); }
  /* INICIO + flecha en tablet: algo mayores. La flecha vuelve a su tamaño previo (34px)
     dentro de un botón circular que la contiene sin recortarla. */
  .volver           { font-size: 17px; padding: 9px 20px; }
  .subir            { width: 0; height: 44px; }
  .subir.is-visible { width: 44px; margin-left: 10px; }
  .subir-flecha     { width: 34px; }

  /* Pie mayor en tablet */
  .pie { font-size: 22px; }

  /* SECCIÓN 4 — recetas: reproductor algo mayor en tablet.
     Selector con doble clase para ganar al bloque general @media (max-width:1024px)
     de más abajo (mismo specificity con una sola clase, pero va después en el archivo). */
  .seccion--recetas .recetas-titulo { font-size: clamp(64px, 9vw, 88px); }   /* mismo tamaño que los títulos del acordeón */
}

/* ===========================================================
   ESCRITORIO BAJO — intro que cabe entera (solo ≥1025px).
   En escritorio el título y el nombre se dibujan para llenar el ANCHO en una
   línea (lo hace el JS fit/ajustar): en pantallas anchas se vuelven muy altos y,
   con la foto (38dvh), el contenido pasa del alto del viewport y .seccion lo
   recorta (overflow:hidden) -> ORIGEN y DESLIZA quedaban cortados.
   Aquí, SOLO en escritorio con poca altura, encogemos foto + titulares +
   espaciado para que todo quepa. Nada de esto afecta a móvil/tablet (≤1024px),
   que mantienen su maquetación. !important en título y nombre porque el JS les
   fija el font-size inline; el selector con dos clases gana a las reglas base. */
@media (min-width: 1025px) and (max-height: 900px) {
  .seccion--intro .fruta-foto       { max-height: 30dvh; }
  .seccion--intro .cabecera-titulo  { font-size: clamp(46px, 9dvh, 96px) !important; }
  .seccion--intro .fruta-nombre     { font-size: clamp(46px, 13dvh, 128px) !important; }
  .seccion--intro .fruta-cientifico { font-size: clamp(26px, 4.6dvh, 48px); }
  .seccion--intro .datos { gap: clamp(12px, 2.4dvh, 30px); margin-top: clamp(16px, 3dvh, 40px); }
}
@media (min-width: 1025px) and (max-height: 740px) {
  .seccion--intro { padding-top: 14px; padding-bottom: 14px; }
  .seccion--intro .fruta-foto       { max-height: 26dvh; }
  .seccion--intro .cabecera-titulo  { font-size: clamp(40px, 8dvh, 76px) !important; }
  .seccion--intro .fruta-nombre     { font-size: clamp(42px, 12dvh, 104px) !important; }
  .seccion--intro .fruta-cientifico { font-size: clamp(22px, 4dvh, 38px); }
  .seccion--intro .datos { gap: clamp(8px, 2dvh, 22px); margin-top: clamp(12px, 2.4dvh, 28px); }
}
@media (min-width: 1025px) and (max-height: 600px) {
  .seccion--intro { padding-top: 10px; padding-bottom: 10px; }
  .seccion--intro .cabecera-linea   { display: none; }   /* libera el alto de la línea + su margen */
  .seccion--intro .fruta-foto       { max-height: 24dvh; }
  .seccion--intro .cabecera-titulo  { font-size: clamp(32px, 7dvh, 56px) !important; }
  .seccion--intro .fruta-nombre     { font-size: clamp(34px, 11dvh, 80px) !important; }
  .seccion--intro .fruta-cientifico { font-size: clamp(18px, 3.4dvh, 30px); }
  .seccion--intro .datos { gap: clamp(6px, 1.6dvh, 16px); margin-top: clamp(8px, 2dvh, 18px); }
}

/* ===========================================================
   SECCIÓN 4 — RECETAS (texto + carrusel de vídeo)
   =========================================================== */
.seccion--recetas { position: relative; justify-content: center; }
.recetas-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vh, 30px);
}
.recetas-titulo {
  font-family: "PP Agrandir", sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.receta-nombre {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-weight: 400;                          /* regular */
  font-stretch: 150%;                        /* extended (Inter no tiene anchos: sin efecto) */
  font-size: clamp(28px, 4.3vw, 50px);       /* algo más grande */
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: clamp(-14px, -2vh, -8px);   /* acerca el nombre al vídeo (compensa el gap del wrap) */
}
/* Fundido al cambiar de receta. Animación (no transition) a propósito:
   1) no pisa la transición de entrada de .reveal;
   2) una animación en curso manda sobre el opacity:1 de
      .seccion.is-visible .reveal (que por especificidad ganaba a una clase .is-cambiando). */
@keyframes receta-cambio { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
.receta-nombre.is-cambiando { animation: receta-cambio 0.5s ease; }
/* Carrusel: flecha — marco — flecha */
.reproductor {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  width: 100%;
}
.rep-marco {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: calc(58vh * 16 / 9);   /* limita por alto para caber en una pantalla */
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  overflow: hidden;
}
.rep-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.rep-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rep-thumb { width: 100%; height: 100%; object-fit: cover; }
/* Crossfade direccional al cambiar de portada: la nueva entra (con un leve deslizamiento)
   y la anterior se desvanece encima, sin hueco ni salto. Lo orquesta el JS del carrusel
   (clases entra-der / entra-izq al entrar, is-saliendo al salir). */
.rep-poster { transition: opacity 0.45s ease, transform 0.45s ease; }
.rep-poster.entra-der { opacity: 0; transform: translateX(6%); }
.rep-poster.entra-izq { opacity: 0; transform: translateX(-6%); }
.rep-poster.is-saliendo { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rep-poster { transition: none; }
  .rep-poster.entra-der, .rep-poster.entra-izq { opacity: 1; transform: none; }
}
.rep-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(54px, 7vw, 76px);
  height: clamp(54px, 7vw, 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;             /* centra ópticamente el triángulo */
  background: var(--crema);
  color: var(--naranja);
  border-radius: 999px;
  font-size: clamp(20px, 3vw, 28px);
}
/* Flechas: misma cápsula crema que .subir, con la flecha del sitio */
.rep-flecha {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  background: var(--crema);
  color: var(--naranja);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.rep-flecha svg { width: 26px; height: auto; display: block; }
.rep-next svg { transform: rotate(180deg); }   /* la flecha base apunta a la izquierda */

/* Escritorio: el botón crece un poco al pasar el ratón (mismo gesto que las marcas del mapa) */
@media (hover: hover) and (min-width: 1025px) {
  .rep-flecha:hover { transform: scale(1.12); }
}
.rep-puntos { display: flex; gap: 10px; justify-content: center; }
.rep-puntos .dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--crema);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.rep-puntos .dot.is-on { opacity: 1; }

@media (max-width: 1024px) {
  .seccion--recetas { padding-bottom: 10px; }
  .recetas-titulo { font-size: clamp(36px, 11vw, 56px); }
  .receta-nombre { font-size: clamp(20px, 6vw, 32px); margin-bottom: -12px; }   /* en móvil, un pelín más separado del vídeo */
  /* En móvil se quita el patrón flecha—vídeo—flecha: las flechas ahogaban el vídeo.
     Se cambia de receta deslizando (swipe, ver JS) y con los puntos. */
  .rep-flecha { display: none; }
  .reproductor { gap: 0; }
  .rep-marco { max-width: none; }   /* vídeo a ancho completo (mantiene 16/9) */
}

/* Si el usuario pide menos movimiento, el mapa de móvil/tablet no hace la cascada:
   se muestran todas las frutas a la vez (el JS tampoco auto-reproduce). */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .seccion--mapa.is-visible .marca { opacity: 1; }
}

/* ===========================================================
   CURSOR PERSONALIZADO — misma esfera blanca que la home.
   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 */
}