/* ==========================================================================
   TASS — coco.css
   Estilos específicos de la página Sustrato Hidropónico (fibra-de-coco.html).
   Estructura de 4 slides/secciones a pantalla completa.
   No modifica layout.css, components.css ni home-about.css.
   ========================================================================== */

.page-coco .coco-slide {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
}

.page-coco .coco-slide + .coco-slide {
  position: relative;
}

.page-coco .coco-slide + .coco-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0.5);
  width: min(60%, 480px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-sand), transparent);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-elegant),
    transform var(--duration-slow) var(--ease-elegant);
}

.page-coco .coco-slide + .coco-slide.is-visible::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-slide + .coco-slide::before {
    transition: none;
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* ---------- Slide 3 (Calidad y estandarización): título/texto ----------
   .coco-slide--alt (franja off-white con desvanecidos a --color-paper)
   se retiró por completo. Antes también daba estilo al slide 1 (con
   <h1>) y a su subtítulo en cursiva; ese slide se sustituyó por el
   nuevo .coco-hero (ver más abajo). .coco-slide__title/__text siguen
   aplicando tal cual al slide 3 (Calidad), único que las usa ahora
   (Compromiso y entrega, que antes tenía sus propias clases
   .coco-commitment/*, se eliminó por completo en la ronda de
   "depuración editorial"). */
.page-coco .coco-slide__title {
  max-width: 720px;
  margin: 0 auto;
}

.page-coco .coco-slide__text {
  max-width: 620px;
  margin: var(--space-md) auto 0;
}

@media (max-width: 700px) {
  .page-coco .coco-slide {
    min-height: 45vh;
    padding: var(--space-lg) 0;
  }
}

/* ==========================================================================
   HERO — SUSTRATO HIDROPÓNICO (geometría alineada a Proyectos)
   Composición editorial de 2 columnas sobre la misma retícula exacta que
   .projects-hero (proyectos.html/projects.css) — mismo .container, mismo
   --color-linen, mismo padding vertical (80px), misma proporción de
   columnas (44/56), mismo align-items:center, mismo gap base
   (--space-xl) y mismo border-radius/box-shadow del visual. El carrusel
   de fotografía real (en vez de video) y la fila de atributos de
   confianza (sin equivalente en Proyectos) son el contenido propio de
   esta página — su tratamiento interno no cambia, solo su contenedor
   exterior/posición ahora sigue la arquitectura de Proyectos. Sin
   min-height artificial: la altura la marca el carrusel (520-620px
   desktop, idéntico a .projects-hero__video) + el padding de la
   sección. ========================================================================== */

.page-coco .coco-hero {
  padding-top: 5rem;
  /* Ronda "depuración editorial": se pidió explícitamente más
     respiración en "el espacio inferior del hero antes de la
     siguiente sección" — a diferencia del resto de la página (donde
     el ritmo entre capítulos se controla solo desde el padding-top de
     la sección siguiente), aquí SÍ se pidió tocar este lado. 56px→78px
     tablet (+22px). El resto del padding-top de "Soluciones a la
     medida" (más abajo) completa el total del capítulo Hero→Soluciones
     (100-130px tablet pedido). */
  padding-bottom: 4.875rem;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-coco .coco-hero {
    /* 60px→85px desktop (+25px). Sumado al padding-top de Soluciones
       (más abajo): 150px de capítulo Hero→Soluciones, dentro de
       140-180px pedido. */
    padding-bottom: 5.3125rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-hero {
    /* 52px→68px móvil (+16px, proporcionalmente menor). */
    padding-bottom: 4.25rem;
    /* Ronda "refinamiento móvil": -35px (80px → 45px) — header→H1 se
       sentía con demasiado aire. padding-top era el único valor
       compartido con desktop (sin override propio hasta ahora); este
       nuevo override sube TODO el bloque del hero (H1, atributos,
       carrusel) como una sola unidad por flujo normal, no solo el
       título. Desktop y tablet conservan 80px. */
    padding-top: 2.8125rem;
  }
}

.page-coco .coco-hero__grid {
  display: grid;
  /* 44/56, idéntico a .projects-hero__grid (antes 45/55, propio de
     SUHM). */
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  /* center, idéntico a .projects-hero__grid (antes stretch — ver
     .coco-hero__content más abajo, ya no necesita el hack de altura
     100%+flex que requería stretch). */
  align-items: center;
  gap: var(--space-xl);
}

/* Franja de desktop angosto (901-1150px): el gap fijo de --space-xl (112px)
   deja muy poco ancho a la columna de texto, justo donde la fila de
   atributos corre más riesgo de partirse en dos líneas. Se reduce solo
   el gap en esta franja (no el tamaño del carrusel ni la proporción de
   columnas) para devolverle aire a la columna izquierda. Con el tamaño
   más grande de los atributos (ver .coco-trust__item) el límite 901px
   justo desbordaba con --space-lg (64px) — se ajustó a 40px. */
@media (min-width: 901px) and (max-width: 1150px) {
  .page-coco .coco-hero__grid {
    gap: 2.5rem;
  }
}

@media (max-width: 900px) {
  .page-coco .coco-hero__grid {
    /* Idéntico a .projects-hero__grid en su breakpoint móvil (900px,
       mismo valor). */
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Ronda "carrusel más cerca de los atributos": solo <701px (breakpoint
   móvil real del proyecto; tablet 701-900px conserva los 64px de
   arriba, sin cambio). Este gap es el espacio real de layout entre
   .coco-hero__content (H1 + atributos) y .coco-hero__media (carrusel)
   cuando están apilados en 1 columna — al reducirlo aquí (no con
   transform/translateY sobre el carrusel), por flujo normal sube el
   carrusel Y todo el contenido posterior (Soluciones a la medida,
   composición, mezclas, Calidad y estandarización, Hecho en México,
   Presentaciones, footer), sin tocar esas secciones individualmente.
   64px → 50px (-21.9%, dentro de 20-25% pedido). H1, atributos
   (tamaño/orden) y el carrusel (tamaño/aspect-ratio/crop/autoplay/
   controles/JS): sin cambio, solo se acercan por este único valor. */
@media (max-width: 700px) {
  .page-coco .coco-hero__grid {
    gap: 3.125rem;
  }
}

/* .coco-hero__content: base sin reglas propias, igual que
   .projects-hero__content — con align-items:center en .coco-hero__grid
   la columna se centra como bloque junto al carrusel. Ajuste fino de
   alineación (ronda de verificación 1440×900): el título de dos
   líneas ("Sustrato Hidropónico" vs "Proyectos", una sola línea) hace
   que el bloque quede centrado un poco más abajo de lo que se ve en
   Proyectos — se corrige con un pequeño margin-top negativo (36px,
   dentro de 35-40px pedido), solo en desktop, sin position:absolute
   ni transforms. Igual que antes, el borde inferior de los atributos
   queda muy por dentro de la altura del carrusel (~200px de sobra),
   así que este ajuste no genera riesgo de desbordar. */
@media (min-width: 901px) {
  .page-coco .coco-hero__content {
    margin-top: -2.25rem;
  }
}

/* .coco-hero__media: refinamiento visual del hero (ronda editorial) —
   el carrusel empezaba muy arriba respecto al bloque de texto; se
   baja ~55px (dentro de 45-65px pedido) para que su borde superior
   dialogue mejor con el título. Sustituye el ajuste fino anterior
   (-18px) por uno neto de +37px (-18px + 55px). Solo en desktop, sin
   position:absolute ni transforms; el título no se toca. */
@media (min-width: 901px) {
  .page-coco .coco-hero__media {
    margin-top: 2.3125rem;
  }
}

/* .coco-header: mismo nudge óptico que .projects-header (20px hacia
   abajo en mobile/tablet, 20px hacia arriba en desktop), valor
   reutilizado tal cual de Proyectos — independiente del ajuste de
   .coco-hero__content de arriba (ese mueve todo el bloque; este solo
   afecta la posición del título dentro del bloque). */
.page-coco .coco-header {
  max-width: 100%;
  text-align: left;
  margin-top: 1.25rem;
}

@media (min-width: 901px) {
  .page-coco .coco-header {
    margin-top: -1.25rem;
  }
}

/* Título — ronda "H1 simplificado": el H1 pasó de "Sustrato Hidropónico"
   (20 caracteres) a "Sustrato de alta calidad para cultivos de alto
   rendimiento" (59 caracteres, el texto del antiguo subtítulo, ahora
   retirado por completo). El tamaño anterior (64-74px, pensado para 1-2
   líneas cortas) desbordaría por completo la columna del 44% del hero
   (mismo ancho de columna, mismo carrusel, sin ampliar el contenedor,
   tal como se pidió) — se reduce a un rango que produce una composición
   de 2-3 líneas bien equilibradas dentro de ese mismo espacio (mismo
   criterio ya usado en .projects-header__title de Proyectos cuando su
   H1 pasó de "Proyectos" a un texto largo). max-width en ch (escala con
   el propio font-size, no un ancho fijo en px) favorece un salto de
   línea limpio cerca de "Sustrato de alta calidad" sin forzarlo con
   <br> — el navegador sigue decidiendo el corte real según el ancho de
   columna disponible. Peso, color, letter-spacing, alineación, ancho de
   columna, carrusel y atributos: sin cambio.
   Ronda "mismo tamano que Proyectos": se pidio el valor REAL exacto de
   .projects-header__title (projects.css), no una aproximacion. No
   existe hoy ningun token/clase/variable tipografica compartida entre
   los H1 grandes de las distintas paginas -- cada uno (Acerca de,
   Servicios, Insumos, Proyectos) fue calibrado de forma independiente
   a traves de muchas rondas para el ancho de columna especifico de su
   propia pagina (ver el historial de comentarios de cada archivo);
   unificarlos en una variable compartida es un cambio de arquitectura
   mayor que tocaria projects.css y tocaria una pagina fuera de esta
   tarea, asi que no se hizo aqui (avisar si se prefiere ese refactor
   en una ronda aparte). Siguiendo el propio criterio pedido ("si no
   existe sistema reutilizable, usa el valor real"), se copian aqui los
   3 valores EXACTOS del clamp() y line-height de
   .projects-header__title, tal cual, en vez de una cifra aproximada.
   max-width en ch se retira (Proyectos usa 17ch, calibrado para su
   propio texto/columna, distinto al de esta pagina) -- se deja que el
   salto de linea dependa solo del ancho real de esta columna (44%,
   sin tocar), tal como se pidio ("permite saltos de linea naturales",
   "adaptarse al ancho actual de la columna"). */
.page-coco .coco-header__title {
  font-size: clamp(2.25rem, 1.85rem + 1.6vw, 2.875rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-coco .coco-header__title {
    /* Valores exactos de .projects-header__title en su propio
       @media(min-width:901px) (projects.css): clamp 44-54px,
       line-height 1.0. */
    font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.375rem);
    line-height: 1.0;
  }
}

/* Ronda "composición móvil del H1": solo <701px (breakpoint móvil real
   del proyecto). Sin max-width (se deja igual que arriba: el salto de
   línea sigue dependiendo del ancho real de la columna, ahora a ancho
   completo en móvil) ni <br>, el tamaño anterior (36px fijo, el clamp
   de la regla base queda pegado a su mínimo en todo el rango
   360-430px) solo tiene 2 saltos de línea posibles para este texto de
   9 palabras, y ambos son el problema reportado: "Sustrato de alta /
   calidad para cultivos / de alto rendimiento" (el ejemplo explícito
   de composición accidental) en los anchos más angostos, o "para
   cultivos de alto / rendimiento" con "rendimiento" huérfano en una
   tercera línea en los más anchos — no hay una tercera variante de 3
   líneas posible con este orden de palabras (verificado midiendo cada
   punto de corte alcanzable). La única composición sin huérfanos y con
   líneas de longitud pareja es "Sustrato de alta calidad para" /
   "cultivos de alto rendimiento" (2 líneas, prácticamente el mismo
   ancho cada una) — para que el propio salto de línea del navegador
   caiga ahí en vez de en los patrones problemáticos, el font-size baja
   lo mínimo necesario (36px → 27-30px según el ancho real del
   viewport vía clamp, con vw para que crezca en dispositivos más
   anchos dentro del propio rango 360-430px) y letter-spacing se
   ajusta -0.02em → -0.03em (aporta algo de margen extra sin verse
   distinto al ojo). Peso, color, line-height y el propio texto: sin
   cambio. Tablet (≥701px) y desktop: reglas de arriba, sin tocar. */
@media (max-width: 700px) {
  .page-coco .coco-header__title {
    font-size: clamp(1.6875rem, 0.72rem + 4.3vw, 1.875rem);
    letter-spacing: -0.03em;
  }
}

/* Atributos de confianza: editorial y discreto — sin cards, sin iconos,
   sin botones (a propósito distinto del diseño interno de
   .projects-stats__bar — Proyectos es solo la referencia de zona
   vertical, no de tratamiento visual, ver item 9 del pedido). Una fila
   con hairlines verticales cuando hay espacio (desktop/tablet);
   envuelve a varias líneas en móvil sin perder el lenguaje. Tono
   café/oliva muy controlado (color-mix con --color-leaf, el verde de
   marca, mezclado con espresso para desaturarlo — el único acento
   oliva de la página, tal como se pidió "muy controlado"). Margen
   superior: 80px (dentro de 75-95px pedido en la ronda de
   verificación 1440×900 — un poco más que los 72px de
   .projects-stats__bar, para que la fila quede claramente separada
   del subtítulo tras subir todo el bloque). */
.page-coco .coco-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  /* Segunda ronda: 56px→44px (-12px, dentro de 10-15px pedido) para
     acercar aún más la fila al subtítulo.
     Ronda "depuración editorial": +12px (44px→56px) — "aumenta
     ligeramente el espacio entre subtítulo y atributos" pedido, otra
     vez solo spacing, sin tocar tamaños/tipografía de los atributos. */
  margin: 3.5rem 0 0;
  max-width: 100%;
}

/* Ronda "refinamiento móvil": -14% (56px → 48px, dentro de 10-15%
   pedido) para que los atributos se sientan más conectados con el H1.
   Contenido, tamaño, peso, color y alineación sin cambio. Tablet y
   desktop conservan 56px. */
@media (max-width: 700px) {
  .page-coco .coco-trust {
    margin-top: 3rem;
  }
}

@media (min-width: 601px) {
  .page-coco .coco-trust {
    gap: 0.25rem 0;
  }
}

/* Ronda "refinamiento integral": pierden demasiada presencia en la
   vista general de la página — +1px en cada tramo y más contraste
   (mezcla 45/55 → 30/70 hacia espresso, mismo acento oliva "muy
   controlado", solo más legible) y peso 700. Siguen sin badge/pill:
   solo tipografía + hairlines verticales heredados. */
.page-coco .coco-trust__item {
  padding: 0.1875rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-leaf) 30%, var(--color-espresso) 70%);
}

.page-coco .coco-trust__item:first-child {
  padding-left: 0;
}

/* Ajuste "una sola línea en móvil": los 3 atributos deben caber en una
   única fila entre 360-430px de ancho, sin que "Mezclas a la medida"
   baje a una segunda línea. Mismos textos/orden/color/uppercase/estilo
   editorial. white-space:nowrap por atributo ya viene de la regla base
   de arriba.
   Ronda "más presencia + todo el ancho": el tamaño anterior (8px) se
   sentía demasiado pequeño — sube a 9px (+12.5%, dentro de 10-15%
   pedido) y letter-spacing sube ligeramente (0.02em→0.03em, más
   presencia editorial, sigue dejando margen de sobra frente al ancho
   disponible).
   Ronda "divisores en móvil": se retira la exclusión de hairlines de
   este rango (ya no aplica: la fila ya es de una sola línea garantizada
   por flex-wrap:nowrap, sin riesgo de línea huérfana) y se reutiliza
   tal cual el mismo recurso que ya usan tablet/desktop más abajo
   (border-left, 1px, var(--color-border) — ni un color/opacidad
   nuevos).
   Ronda "tres columnas centradas": antes cada item se dimensionaba por
   su propio contenido y justify-content:space-between repartía el
   espacio sobrante como huecos entre ellos — con textos de largo muy
   distinto ("Hecho en México" vs "Mezclas a la medida") eso dejaba a
   cada uno visualmente descentrado dentro de su tramo. Ahora cada
   .coco-trust__item es una columna de ancho equivalente
   (flex:1 1 0 — flex-basis:0 reparte el ancho disponible en 3 partes
   iguales vía flex-grow) con su propio texto centrado dentro
   (display:flex + justify-content:center + text-align:center como
   respaldo) — así las líneas divisorias, que ya caen exactamente en el
   borde entre columnas adyacentes, quedan "entre" los tres textos en
   vez de pegadas a uno de ellos. min-width:auto (sin tocar, valor por
   defecto) es intencional: dentro del rango 360-430px el texto más
   largo ("Mezclas a la medida") apenas cabe en un tercio exacto del
   ancho disponible, así que se le permite conservar su ancho mínimo de
   contenido si hiciera falta un pixel de más — eso mantiene la fila
   sin overflow ni salto de línea en cualquier punto del rango, a costa
   de un reparto no matemáticamente exacto en el peor caso (imperceptible
   en la práctica: los otros dos textos, más cortos, absorben la
   diferencia). padding horizontal simétrico (2px) en vez del asimétrico
   anterior — necesario para que el centrado sea real y no solo el del
   texto dentro de una caja ya desplazada. justify-content:space-between
   en el contenedor ya no hace falta (las 3 columnas ocupan el 100% del
   ancho por sí mismas) — se retira. Tamaño, tipografía, peso, color,
   uppercase, una sola línea, líneas divisorias, ancho general del
   bloque y spacing vertical (margin-top de .coco-trust, arriba): sin
   cambio. */
@media (max-width: 600px) {
  .page-coco .coco-trust {
    flex-wrap: nowrap;
  }

  .page-coco .coco-trust__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.1875rem 0.125rem;
    font-size: 0.5625rem;
    letter-spacing: 0.03em;
  }

  .page-coco .coco-trust__item:first-child {
    padding-left: 0.125rem;
  }

  .page-coco .coco-trust__item:not(:first-child) {
    border-left: 1px solid var(--color-border);
  }
}

/* Desde tablet (columna de texto a ancho completo) hasta desktop: una
   sola línea obligatoria. Por debajo de 601px se permite el reflow
   controlado (wrap heredado arriba) pedido para móvil. Los hairlines
   verticales solo se dibujan cuando la línea única está garantizada
   (≥601px): con flex-wrap:wrap en móvil, un border-left fijo por
   :not(:first-child) dejaría una raya huérfana antes de un atributo
   que cayó solo en su propia fila (p. ej. "Mezclas a la medida" en
   2+1) — se evita por completo en vez de intentar detectar el salto
   de línea. En su lugar, el espaciado entre filas envueltas lo da el
   gap de .coco-trust. */
@media (min-width: 601px) {
  .page-coco .coco-trust {
    flex-wrap: nowrap;
  }

  .page-coco .coco-trust__item:not(:first-child) {
    border-left: 1px solid var(--color-border);
  }

  /* Tablet (columna de texto a ancho completo, mucho margen disponible):
     tamaño más generoso — +1px sobre el tramo anterior. */
  .page-coco .coco-trust__item {
    font-size: 0.9375rem;
  }
}

/* Franja angosta de desktop (901-1150px, gap de columnas ya reducido en
   .coco-hero__grid): el ancho disponible es el más apretado de todo el
   rango desktop. 12.5px queda un poco debajo del piso de 13px pedido,
   pero el límite justo en 901px (verificado con screenshot) no cierra
   con 13px ni con tracking/padding más ajustados — se prioriza no
   partir la fila en dos líneas sobre el piso exacto de 13px, con
   tracking y padding también más ajustados. Nunca vuelve al tamaño
   anterior (10-11px). */
@media (min-width: 901px) and (max-width: 1150px) {
  .page-coco .coco-trust__item {
    font-size: 0.84375rem;
    letter-spacing: 0.01em;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* Desktop amplio (gap completo entre columnas, ver .coco-hero__grid):
   con más aire disponible, el extremo superior del rango. */
@media (min-width: 1151px) {
  .page-coco .coco-trust__item {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================================
   CARRUSEL GRANDE — protagonista de la columna derecha del hero
   Mismo componente/contenedor/tamaño/posición que ya existía (.coco-
   carousel, flechas, contador). Ronda "crossfade cinematográfico": el
   mecanismo de transición pasa de scroll-snap horizontal a un
   crossfade apilado (slides position:absolute, alternados por
   opacidad) con loop infinito, autoplay, pausa en interacción/hover/
   visibilidad de pestaña y swipe táctil manual — ver coco.js. Sigue
   sin librerías externas. ========================================================================== */

/* Altura idéntica a .projects-hero__media (antes clamp(400px,40vw,620px)
   base / clamp(540px,32vw,620px) desktop, propios de SUHM) — mismo x/y/
   width/height que el video de Proyectos en cada breakpoint. Radio y
   sombra ya coincidían exactamente con .projects-hero__media, sin
   cambios. */
.page-coco .coco-carousel {
  position: relative;
  width: 100%;
  height: clamp(320px, 55vw, 430px);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Segunda ronda de refinamiento: aún más cerca del crema general
     (4%→3%, dentro de 2-3% pedido) — el contenedor debe delimitar el
     área sin leerse como card. Mismo mecanismo/colores de paleta. */
  background-color: color-mix(in srgb, var(--color-linen) 97%, var(--color-espresso) 3%);
  /* Hairline aún más sutil (mezclada con transparent) — solo lo
     mínimo para delimitar el área, sin sensación de tarjeta. */
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

@media (min-width: 901px) {
  .page-coco .coco-carousel {
    /* Segunda ronda: -7% adicional sobre 468-558px (posición vertical
       ya aprobada, no se toca) → 435-519px. Misma proporción,
       comportamiento y alineación en la columna derecha. */
    height: clamp(435px, 33.5vw, 519px);
  }
}

/* Ronda "crossfade cinematográfico": el viewport deja de ser un
   scroller horizontal (scroll-snap) — las 4 fotos ahora viven
   apiladas exactamente en el mismo lugar y se alternan con opacidad
   (ver .coco-carousel__slide más abajo y coco.js). Se retira todo lo
   que era exclusivo del scroll horizontal (overflow-x, scroll-snap,
   scrollbar oculta); el contenedor sigue siendo el mismo tamaño/
   posición/radio (.coco-carousel, sin cambios). */
.page-coco .coco-carousel__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-coco .coco-carousel__track {
  position: relative;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada slide ocupa exactamente el mismo espacio (apilados), y se
   alterna con opacidad — crossfade en vez de desplazamiento
   horizontal. 1050ms con la misma curva editorial del sitio
   (--ease-elegant = cubic-bezier(0.22, 1, 0.36, 1)), dentro de los
   900-1200ms pedidos. is-active la controla coco.js. */
.page-coco .coco-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-linen);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1050ms var(--ease-elegant);
}

.page-coco .coco-carousel__slide.is-active {
  opacity: 1;
}

.page-coco .coco-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Micro movimiento opcional (punto 5): escala casi imperceptible
   (1 → 1.015) solo en la foto activa, muy lenta — sensación
   ligeramente cinematográfica sin leerse como zoom. El contenedor
   recorta el 1.5% de sobrante (overflow:hidden arriba), así que nunca
   se ve un borde/gap. El efecto principal sigue siendo el crossfade:
   esto es un acompañamiento sutil, no el protagonista. */
.page-coco .coco-carousel__slide.is-active img {
  animation: coco-carousel-kenburns 7000ms var(--ease-elegant) forwards;
}

@keyframes coco-carousel-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.015); }
}

/* Punto 13: sin zoom y transición mínima/inmediata para quien pide
   menos movimiento. El autoplay ya se desactiva por completo para
   estos usuarios en coco.js (prefersReducedMotion), pero la
   navegación manual (flechas) sigue funcionando — aquí solo se quita
   la animación de escala y se acorta el crossfade a un cambio casi
   instantáneo en vez de eliminarlo del todo (para no perder el
   contexto de "una foto reemplaza a otra"). */
@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-carousel__slide {
    transition-duration: 1ms;
  }

  .page-coco .coco-carousel__slide.is-active img {
    animation: none;
    transform: none;
  }
}

/* Controles agrupados en la esquina inferior derecha (alternativa a
   flechas en los laterales, pedida como opción) — más discreto que dos
   círculos flotando sobre la foto. Scrim en tono café espresso (no gris
   frío) a baja opacidad, solo detrás del grupo de controles, más
   pequeño y más transparente en reposo que la versión anterior. */
.page-coco .coco-carousel__controls {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  /* Segunda ronda: se retira casi todo el volumen de la cápsula
     (10%→4% de mezcla con espresso, radio 6px→4px, padding más
     ajustado) — el control queda casi integrado sobre el fondo. El
     blur se conserva (reducido) solo para no perder legibilidad del
     texto/flechas claros sobre slides muy luminosas; la
     funcionalidad (clic, hover, navegación) no cambia. */
  padding: 0.25rem 0.4375rem;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--color-espresso) 4%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-coco .coco-carousel__counter {
  /* Segunda ronda: tipografía aún más pequeña (10px→9px). */
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}

.page-coco .coco-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-paper);
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}

.page-coco .coco-carousel__arrow:hover,
.page-coco .coco-carousel__arrow:focus-visible {
  opacity: 1;
}

.page-coco .coco-carousel__arrow:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 2px;
}

.page-coco .coco-carousel__arrow svg {
  width: 13px;
  height: 13px;
  /* Segunda ronda: aún más finas (1.5→1.25). */
  stroke-width: 1.25;
}

/* Entrada del hero — sutil, sin esperar demasiado (pedido explícitamente:
   "el contenido debe ser legible casi inmediatamente"). Título: 30px
   (dentro de 25-35px), 1000ms (dentro de 900-1200ms). Atributos:
   stagger muy pequeño entre sí, vía [data-reveal-group] si se agrupan —
   aquí, al ser un solo bloque .coco-trust, comparte el mismo timing que
   .reveal-up genérico, con un pequeño delay adicional. Carrusel: 20px
   (dentro de 15-25px), 1000ms (dentro de 900-1100ms).
   Ronda "H1 simplificado": el subtítulo (.coco-header__intro) se
   eliminó del HTML y sus reglas de esta sección (incluida su propia
   transition-delay) se retiraron por completo — el multiplicador de
   .coco-trust.reveal-up (×2 de --stagger-step, más abajo) se deja sin
   cambio para no tocar el timing de animaciones existente más allá de
   lo estrictamente necesario. */
.page-coco .coco-header__title.reveal-up {
  transform: translateY(30px);
  transition: opacity 1000ms var(--ease-elegant), transform 1000ms var(--ease-elegant);
}

.page-coco .coco-trust.reveal-up {
  transform: translateY(12px);
  transition-delay: calc(var(--stagger-step) * 2);
}

.page-coco .coco-hero__media.reveal-up {
  transform: translateY(20px);
  transition: opacity 1000ms var(--ease-elegant), transform 1000ms var(--ease-elegant);
  transition-delay: calc(var(--stagger-step) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-header__title.reveal-up,
  .page-coco .coco-trust.reveal-up,
  .page-coco .coco-hero__media.reveal-up {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   TEXTOS COMPLEMENTARIOS EDITORIALES — clase común
   Ronda de refinamiento de alineación/jerarquía: tratamiento
   tipográfico consistente para los párrafos que acompañan a los
   títulos en Soluciones a la medida, Calidad y estandarización,
   Hecho en México, Presentaciones y Compromiso y entrega — 18px base
   (dentro de 17-20px pedido, y dentro de cada rango específico por
   sección), line-height 1.6, peso regular, color secundario. Los
   anchos (max-width) y el resto del layout de cada sección NO se
   tocan aquí: siguen viviendo en las reglas propias de cada una.
   .coco-editorial-copy--paired es solo para las 3 secciones donde el
   texto vive en una columna paralela a su título (Soluciones, Hecho
   en México, Presentaciones) — añade un padding-top pequeño que
   compensa la diferencia óptica de leading entre un título grande y
   un párrafo pequeño: con align-items:start ambos arrancan en el
   mismo borde de caja, pero el título (mucho más grande) tiene más
   "aire" invisible por encima de sus glifos por su propio
   line-height, así que sin este ajuste el párrafo se percibe
   arrancando más arriba — nunca al revés. Calidad y Compromiso no lo
   llevan: ahí título y texto van apilados dentro de la misma columna
   (no compiten por el mismo eje superior), así que no tienen ese
   problema. ========================================================================== */
/* Ronda "refinamiento integral": +11% (18px→20px, 17px→19px) — el
   texto de Calidad y la frase de Hecho en México (ambos usan esta
   clase compartida) se leían demasiado pequeños/tenues frente al
   resto de la página ya reforzada. Mismo peso/line-height/color. */
.page-coco .coco-editorial-copy {
  color: var(--color-graphite);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .page-coco .coco-editorial-copy {
    font-size: 1.1875rem;
  }
}

@media (min-width: 701px) {
  .page-coco .coco-editorial-copy--paired {
    /* 10px, dentro de 8-16px pedido. */
    padding-top: 0.625rem;
  }
}

/* ==========================================================================
   SOLUCIONES A LA MEDIDA (rediseño premium)
   Antes centrada, con mucho espacio vacío alrededor. Ahora alineada a la
   izquierda, con más protagonismo tipográfico y las 4 mezclas
   presentadas de forma editorial abierta (sin cards). Mismo
   --color-linen continuo — sin cambio de fondo respecto al hero.
   Ronda "depuración editorial completa de Sustrato Hidropónico": se
   pidió pasar de una página "saturada, compacta, con poco espacio
   entre bloques" a una lectura editorial amplia — jerarquía de ritmo
   vertical de toda la página: 140-180px desktop / 100-130px tablet /
   80-110px móvil entre capítulos (cambio de sección), 80-110px
   desktop entre bloques del mismo capítulo. También se pidió quitar
   texto redundante (ver .coco-solutions__header más abajo: el párrafo
   descriptivo se eliminó por completo) y, donde existía, eliminar
   secciones que solo repetían conceptos genéricos sin dato nuevo (ver
   .coco-commitment, retirada por completo — buscar "COMPROMISO Y
   ENTREGA" en el historial de este archivo si hace falta recuperar
   sus valores). Sin cards/cajas/sombras/fondos nuevos en ningún punto
   de esta ronda: toda la amplitud viene de tipografía + espacio
   negativo, tal como se pidió. */
.page-coco .coco-solutions {
  /* Ronda "depuración editorial": se invierte por completo el criterio
     — antes se buscaba una transición inmediata, ahora una "pausa
     amplia entre capítulos" (100-130px tablet pedido). Junto con el
     padding-bottom de .coco-hero (arriba, +22px): 12px→37px tablet
     (+25px). Total Hero→Soluciones tablet: 115px, dentro de lo
     pedido. */
  padding-top: 2.3125rem;
  /* Ronda "refinamiento integral": +12px (60px→72px, tablet/base) para
     que Soluciones→Calidad gane la pausa adicional de 40-60px
     pedida (repartida entre este valor y el padding-top del slide
     siguiente, más abajo). */
  padding-bottom: 4.5rem;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-coco .coco-solutions {
    /* 10px→65px desktop (+55px). Total Hero→Soluciones desktop:
       85px (hero) + 65px = 150px, dentro de 140-180px pedido. */
    padding-top: 4.0625rem;
    /* Ronda "refinamiento integral": override propio de desktop
       (antes compartía el valor de tablet, 72px) — 72px→84px, para
       que la pausa hacia Calidad sea más amplia específicamente en
       desktop, sin arrastrar tablet al mismo extremo. */
    padding-bottom: 5.25rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-solutions {
    /* 10px→22px móvil (+12px). Total Hero→Soluciones móvil: 68px
       (hero) + 22px = 90px, dentro de 80-110px pedido. */
    padding-top: 1.375rem;
    /* Ronda "refinamiento móvil" (prioridad): -20px (52px → 32px) —
       parte de reducir ~28% el hueco Personalizada→Calidad y
       estandarización (junto con el padding-top de
       .coco-solutions + .coco-slide, más abajo). Mezclas/Personalizada
       sin cambio interno. Tablet/desktop conservan 60px/84px. */
    padding-bottom: 2rem;
  }
}

/* Ronda "depuración editorial": se retira por completo el párrafo
   descriptivo (coco-solutions__text) — las propias mezclas (70/30,
   80/20, 90/10, Personalizada) ya comunican el concepto, tal como se
   pidió ("no quiero un párrafo que simplemente explica que hacemos
   mezclas según las necesidades del cliente"). Sin el texto pareado,
   el grid de 2 columnas (título 47% / texto 53%) que existía aquí ya
   no tiene sentido — se retira, el encabezado vuelve a ser solo el
   título a ancho completo.
   Ronda "rediseño técnico": vuelve a existir un párrafo bajo el
   título (el nuevo texto introductorio), pero NO se restaura el grid
   de 2 columnas de antes — funciona como introducción editorial de
   ancho controlado (ver .coco-solutions__intro más abajo), no como
   bloque pareado junto al título. */
.page-coco .coco-solutions__header {
  max-width: 100%;
}

/* Texto introductorio (ronda "rediseño técnico"): ancho editorial
   controlado (560-680px pedido, 620px punto medio) para que funcione
   como introducción breve, no como bloque de texto pesado a ancho
   completo. title->intro 28px (dentro de 24-36px pedido); el espacio
   intro->mezclas vive en .coco-mixes (margin-top, más abajo), no aquí,
   para no duplicar spacing. */
.page-coco .coco-solutions__intro {
  max-width: 620px;
  margin: 1.75rem 0 0;
  color: color-mix(in srgb, var(--color-graphite) 88%, var(--color-espresso) 12%);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (min-width: 901px) {
  .page-coco .coco-solutions__intro {
    font-size: 1.125rem;
  }
}

/* Título: 54-64px desktop (rediseño editorial: antes 46-58px) — uno
   de los headlines importantes de la página. Peso medium (500, antes
   600 — pedido explícitamente), café oscuro, alineado a la izquierda.
   Texto exacto; el salto de línea ("Soluciones" / "a la medida") es
   natural según el ancho de la columna, no forzado. */
.page-coco .coco-solutions__title {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-coco .coco-solutions__title {
    /* 54-64px, dentro de lo pedido. */
    font-size: clamp(3.375rem, 2.8rem + 1.8vw, 4rem);
  }
}

/* Composición visual (fibra / polvillo / chip) — puente entre el texto
   introductorio y las mezclas técnicas. Imagen real del proyecto
   ("imagenes suhm/composición.png", raíz del repo — no se copia a
   assets/img/ ni se genera otra versión, se referencia tal cual con
   ruta relativa) a 70-80% del ancho del contenedor en desktop y
   centrada; 100% del ancho en móvil/tablet, sin recortar ninguna de
   las tres franjas (fibra/polvillo/chip). intro->imagen: 44px
   móvil/tablet, 60px desktop (dentro de 45-65px pedido). */
.page-coco .coco-composition {
  max-width: 100%;
  margin: 2.75rem auto 0;
}

/* Ronda "refinamiento móvil": -9% (44px → 40px) párrafo→imagen de
   composición, sin comprimir agresivamente. Imagen (archivo, ancho,
   crop, proporción, labels) sin cambio. Tablet y desktop conservan
   44px/60px. */
@media (max-width: 700px) {
  .page-coco .coco-composition {
    margin-top: 2.5rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-composition {
    max-width: 78%;
    margin-top: 3.75rem;
  }
}

.page-coco .coco-composition__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Etiquetas Fibra/Polvillo/Chip: grid de 3 columnas del mismo ancho
   que la imagen, una etiqueta centrada bajo cada tercio. Tipografía
   TASS actual, color espresso, sin badge/caja/icono — solo apoyan la
   lectura de la imagen, no compiten con ella. imagen->etiquetas: 20px
   (dentro de 18-24px pedido). */
.page-coco .coco-composition__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.25rem 0 0;
  padding: 0;
}

/* Ronda "refinamiento integral": seguían demasiado discretas en la
   lectura completa de la página — otro +18% de tamaño (17.6px→20.8px)
   y más contraste (82/18→75/25 hacia ink) y peso 700. Sigue sin
   badge/caja/icono, misma alineación por tercio (grid de 3 columnas
   sin tocar). */
.page-coco .coco-composition__label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: color-mix(in srgb, var(--color-espresso) 75%, var(--color-ink) 25%);
}

@media (max-width: 480px) {
  .page-coco .coco-composition__label {
    /* Reduce ligeramente si las tres columnas quedan justas en
       pantallas muy angostas — el orden Fibra/Polvillo/Chip no
       cambia. Mismo incremento proporcional que el tamaño base. */
    font-size: 1.0625rem;
  }
}

/* Subtítulo "Nuestras mezclas" (ronda "refinamiento editorial"):
   encabeza el bloque de mezclas para que se lea como una sección
   propia dentro de "Soluciones a la medida", sin competir con el
   título principal (54-64px desktop) — tamaño claramente menor, mismo
   peso medio y color espresso, alineado a la izquierda como el resto
   del contenido. Vive pegado a las mezclas (margin-bottom corto,
   18-22px: es su encabezado directo) y separado de la imagen de
   composición por un margin-top generoso (esa es la pausa
   imagen->mezclas que se pidió aumentar). */
.page-coco .coco-mixes-heading {
  /* Ronda "refinamiento integral": otro +12% de tamaño (25px→28px)
     para marcar con más claridad el paso componentes→formulaciones,
     siempre por debajo de "Soluciones a la medida" (32-64px). Margin
     sin cambio sobre la ronda anterior (ya ajustado). */
  margin: 3.25rem 0 1.25rem;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-coco .coco-mixes-heading {
    /* +12.5% de tamaño (32px→36px). */
    margin-top: 4.25rem;
    margin-bottom: 1.75rem;
    font-size: 2.25rem;
  }
}

/* Mezclas — ronda "rediseño técnico": de una fila de 4 valores sueltos
   a una composición editorial 2x2 con datos técnicos reales
   (composición + descripción por mezcla), sin cards. Mobile/tablet
   (<901px): 1 columna, las 4 mezclas apiladas (antes tablet compartía
   la retícula de 4 columnas con desktop y solo móvil angosto pasaba a
   2x2 — con el contenido nuevo, mucho más alto por bloque, 1 columna
   es la única composición legible por debajo de 901px). Desktop
   (≥901px): 2 columnas iguales + hairline vertical centrada (mismo
   lenguaje que la retícula de "Nuestras áreas de integración" en
   Proyectos, projects.css — color-mix espresso/transparent, 1px,
   bajo contraste). Ronda "refinamiento editorial": ya no carga la
   pausa imagen->mezclas (esa vive ahora en .coco-mixes-heading, más
   generosa) — este margin-top es solo título->grid, corto porque el
   título es el encabezado directo de las mezclas. */
.page-coco .coco-mixes {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}

@media (min-width: 901px) {
  .page-coco .coco-mixes {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-lg);
  }

  .page-coco .coco-mixes::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: color-mix(in srgb, var(--color-espresso) 12%, transparent);
  }
}

/* Hairline horizontal encima de cada mezcla (mismo lenguaje que
   .projects-areas__item en Proyectos: border-top + padding-top
   generoso) — en desktop, la de la fila 1 se cruza con la vertical de
   arriba ("┬"), la de la fila 2 forma el divisor central ("┼"); en
   móvil/tablet (1 columna) quedan como los únicos divisores,
   horizontales entre cada una de las 4 mezclas apiladas, tal como se
   pidió ("quita la hairline vertical, mantén únicamente divisores
   horizontales"). Ronda "refinamiento editorial": +4px/+8px (se
   sentía comprimido) — 44px móvil/tablet, 60px desktop. */
.page-coco .coco-mixes__item {
  border-top: 1px solid color-mix(in srgb, var(--color-espresso) 14%, transparent);
  padding: 2.75rem 0;
}

@media (min-width: 901px) {
  .page-coco .coco-mixes__item {
    padding: 3.75rem 0;
  }
}

/* Porcentaje/nombre de mezcla: el elemento más visible del bloque
   (pedido explícito) — tamaño claramente mayor que antes (24-30px →
   32-44px), mismo peso limpio (500), mismo color espresso, mismo
   lenguaje tipográfico TASS. margin-bottom 28px = porcentaje→
   COMPOSICIÓN (dentro de 24-30px pedido). Sin badge/círculo. */
.page-coco .coco-mixes__value {
  display: block;
  margin: 0 0 2rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  text-align: left;
}

@media (min-width: 901px) {
  .page-coco .coco-mixes__value {
    font-size: 2.75rem;
  }
}

/* "Personalizada": jerarquía equivalente, no secundaria — mismo
   margin-bottom/peso/color que .coco-mixes__value, tamaño ligeramente
   menor (dentro de "puede usar un tamaño ligeramente menor que
   70/30" pedido) para no competir por ser el valor numérico más
   protagonista, pero con presencia suficiente para completar el
   sistema visual. */
.page-coco .coco-mixes__value--custom {
  font-size: 1.75rem;
}

@media (min-width: 901px) {
  .page-coco .coco-mixes__value--custom {
    font-size: 2.375rem;
  }
}

/* Microetiqueta "Composición": mismo lenguaje editorial que las
   microetiquetas ya usadas en el sitio (p.ej. "QUÉ EVALUAMOS" en
   Proyectos, projects.css) — uppercase, pequeña, tracking amplio,
   contraste moderado hacia el café principal, sin badge/pill/fondo. */
/* Ronda "refinamiento integral": tamaño apenas mayor (12px→13px, sigue
   siendo etiqueta técnica/editorial, no subtítulo), más contraste
   (20/80→10/90 hacia espresso) y tracking algo mayor (0.12em→0.14em)
   para más presencia visual. */
.page-coco .coco-mixes__label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-sand) 10%, var(--color-espresso) 90%);
}

/* Composición técnica ("35% chip · 35% fibra · 30% polvillo"): dato
   real — ronda "refinamiento integral": más contraste (55/45→45/55
   hacia espresso) para que se lea fácil de un vistazo; mismo
   tamaño/peso, sin tocar porcentajes ni contenido. */
.page-coco .coco-mixes__composition {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-graphite) 45%, var(--color-espresso) 55%);
}

/* Descripción: secundaria frente a la mezcla, ancho controlado para
   2-3 líneas visuales cuando el ancho lo permite (dentro de la mitad
   del bloque en desktop, ya angosta por la retícula 2 columnas).
   Ronda "refinamiento integral": eran demasiado pequeñas en la vista
   general — +6% combinando tamaño (17px→18px) y contraste (68/32→
   60/40 hacia ink), sin volverse protagonistas frente al nombre de la
   mezcla. */
.page-coco .coco-mixes__desc {
  max-width: 420px;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-graphite) 60%, var(--color-ink) 40%);
}

/* ==========================================================================
   REVELADO SECUENCIAL POR SCROLL — Soluciones a la medida
   Reutiliza el observer/sistema .reveal-up + [data-reveal-group] ya
   existente (main.js/base.css: esta página observa con un segundo
   IntersectionObserver propio, threshold 0.25 en vez de 0.15, para
   activarse un poco más tarde). Ronda anti-solapamiento: recorridos
   más cortos (14-20px títulos, 8-12px textos, 6-10px datos, dentro de
   lo pedido — antes 28/16/12px) y delays comprimidos: toda la
   secuencia título→texto→mezclas cierra en ~1.1s, bastante antes de
   que el trigger (más tardío) de Calidad y estandarización se
   active. */
.page-coco .coco-solutions__title.reveal-up {
  transform: translateY(18px);
  transition-duration: 750ms;
}

.page-coco .coco-mixes__item.reveal-up {
  transform: translateY(8px);
  transition-duration: 600ms;
}

/* Stagger propio (80ms) con delay base de 280ms (~130ms después de
   que empieza el texto) — sustituye el stagger genérico de
   [data-reveal-group] (base.css) solo para este grupo, mismo
   mecanismo con mayor especificidad (mismo patrón que
   .projects-stats__item en projects.css). Última mezcla termina a
   los ~1120ms desde que arranca el título. */
.page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(1).reveal-up { transition-delay: 280ms; }
.page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(2).reveal-up { transition-delay: 360ms; }
.page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(3).reveal-up { transition-delay: 440ms; }
.page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(4).reveal-up { transition-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-solutions__title.reveal-up,
  .page-coco .coco-mixes__item.reveal-up,
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(1).reveal-up,
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(2).reveal-up,
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(3).reveal-up,
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(4).reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ---------- Slides 3 y 4: composición texto + imagen ---------- */
.page-coco .coco-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.page-coco .coco-feature__text {
  min-width: 0;
  text-align: left;
}

.page-coco .coco-feature__text .coco-slide__title,
.page-coco .coco-feature__text .coco-slide__text {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.page-coco .coco-feature__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.page-coco .coco-feature__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-coco .coco-feature__img--omri {
  max-width: 260px;
}

.page-coco .coco-feature__img--delivery {
  max-width: 200px;
}

.page-coco .coco-feature__tagline {
  max-width: 200px;
  margin: var(--space-xs) auto 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.page-coco .coco-feature__tagline::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 0 auto var(--space-xs);
  background-color: var(--color-sand);
}

.page-coco .coco-feature--reverse .coco-feature__text {
  order: 2;
}

.page-coco .coco-feature--reverse .coco-feature__media {
  order: 1;
}

@media (max-width: 700px) {
  .page-coco .coco-feature {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .page-coco .coco-feature__text {
    text-align: center;
  }

  .page-coco .coco-feature--reverse .coco-feature__text,
  .page-coco .coco-feature--reverse .coco-feature__media {
    order: 0;
  }
}

/* ==========================================================================
   CALIDAD Y ESTANDARIZACIÓN — composición reforzada (slide 3)
   Todo lo de aquí abajo se dirige exclusivamente a ESTE slide, nunca al
   slide 4 ("Compromiso y entrega", .coco-slide--alt) — ambos comparten
   .coco-slide/.coco-feature/.coco-slide__title/.coco-slide__text, así
   que en vez de tocar esas reglas compartidas (que sí afectarían al
   slide 4, fuera de alcance) se usa el selector de hermano adyacente
   ".coco-solutions + .coco-slide": Calidad es siempre el slide que
   sigue inmediatamente a Soluciones a la medida en el DOM, así que este
   selector lo aísla con precisión sin marcar HTML nuevo. Mismo fondo
   --color-linen continuo, sin min-height artificial (ver ronda
   anterior) — aquí solo se suma un poco más de aire antes del título y
   se rediseña la composición interna (columnas, tamaños, alineación,
   reveal). */
.page-coco .coco-solutions + .coco-slide {
  min-height: 0;
  background-color: var(--color-linen);
  /* Ronda "refinamiento integral": +8px (84px→92px, tablet/base) —
     junto con el padding-bottom de .coco-solutions (arriba, ahora
     72px): total tablet 72px + 92px = 164px, pausa de capítulo aún
     más clara. */
  padding-top: 5.75rem;
  /* Sin cambios: deja Calidad→Hecho en México resuelto por el
     padding-top de .coco-facilities (ver más abajo). */
  padding-bottom: 2.75rem;
}

@media (min-width: 901px) {
  .page-coco .coco-solutions + .coco-slide {
    /* Ronda "refinamiento integral": +24px (72px→96px) — pedido
       explícito de +40-60px totales en desktop entre mezclas y
       Calidad. Total desktop: 84px (padding-bottom de .coco-solutions
       en desktop) + 96px = 180px (+48px sobre el estado anterior,
       132px). */
    padding-top: 6rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-solutions + .coco-slide {
    min-height: 0;
    /* Ronda "refinamiento móvil" (prioridad): -27px (72px → 45px) —
       segunda mitad de la reducción Personalizada→Calidad (junto con
       el padding-bottom de .coco-solutions, arriba): total 32px + 45px
       = 77px, -28% sobre el estado anterior (32+44+72... ver nota en
       .coco-mixes__item, sin tocar). Tablet/desktop conservan
       92px/96px. */
    padding-top: 2.8125rem;
    /* Ronda "refinamiento móvil": -4px (28px → 24px) — logo OMRI→Hecho
       en México, parte de compactar ~15-20% el ritmo interno de
       Calidad (junto con .coco-facilities padding-top, más abajo).
       Tablet/desktop conservan 44px. */
    padding-bottom: 1.5rem;
  }
}

/* Rediseño editorial: composición invertida vía .coco-feature--reverse
   (ya existente, ver HTML) — OMRI ahora ocupa el primer track visual
   (35%, dentro de 32-38% pedido) y título+texto el segundo (65%,
   dentro de 62-68% pedido). En mobile (mismo quiebre que ya usa
   .coco-feature) vuelve a 1fr para apilar, con el order reseteado a 0
   (regla ya existente) — se apila en orden de DOM: texto, luego
   OMRI. En tablet se mantienen las dos columnas con gap reducido. */
.page-coco .coco-solutions + .coco-slide .coco-feature {
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
}

/* Acerca OMRI al bloque de título+texto vía el gap del grid: 64px
   heredado de .coco-feature → 40px (ronda anterior) → 10px (ronda
   posterior). OMRI no llena todo su columna (queda centrado por
   .coco-feature__media, ver abajo), así que sigue quedando aire real
   entre ambos bloques — no pegado al texto, solo más cerca.
   Ronda "corregir alineacion": 10px se sintio demasiado apretado
   ("mantener suficiente separacion horizontal" pedido) -- sube a
   2.5rem/40px, un punto medio entre el 64px original y el 10px
   posterior. align-items:center (heredado de .coco-feature, sin
   tocar) ya centra verticalmente OMRI con el bloque de texto. */
@media (min-width: 701px) {
  .page-coco .coco-solutions + .coco-slide .coco-feature {
    /* Ronda "refinamiento integral": -8px (40px→32px) — "acercar
       ligeramente logo y contenido" pedido, sin volver al extremo
       apretado (10px) de rondas previas. */
    gap: 2rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-solutions + .coco-slide .coco-feature {
    grid-template-columns: 1fr;
    /* Ronda "refinamiento móvil": -19% (32px heredado de .coco-feature
       → 26px) texto→logo OMRI, apilados en 1 columna. */
    gap: 1.625rem;
  }
}

/* Título: 44-50px desktop (rediseño editorial: antes 42-50px). Puede
   quedar en dos líneas ("Calidad y" / "estandarización") sin forzar
   una sola — el ancho de la columna de texto (65% del bloque) ya lo
   decide de forma natural. Peso medium (500), sin cambios. */
/* Ronda "refinamiento integral": +12% de tamaño (título perdía peso
   dentro de mucho espacio vacío) — 32-40px→36-45px base,
   44-50px→49-56px desktop. Mismo peso (500), sin convertirse en
   protagonista de la página. */
.page-coco .coco-solutions + .coco-slide .coco-slide__title {
  font-weight: 500;
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 2.8rem);
  line-height: 1.15;
}

@media (min-width: 901px) {
  .page-coco .coco-solutions + .coco-slide .coco-slide__title {
    font-size: clamp(3.0625rem, 2.55rem + 1.1vw, 3.5rem);
  }
}

/* Texto: line-height 1.6 y separación del título 26px (ambos ya dentro
   de los rangos pedidos, sin cambios sobre la ronda anterior). Ancho
   cómodo. Ronda de refinamiento: la columna de texto ahora es más
   ancha (65%, tras invertir la composición) — se agrega max-width:
   620px (dentro de 500-650px pedido) para no dejar líneas
   demasiado largas; sustituye el max-width:none heredado de
   .coco-feature__text .coco-slide__text solo para este slide. */
.page-coco .coco-solutions + .coco-slide .coco-slide__text {
  max-width: 620px;
  margin-top: 1.625rem;
}

/* Ronda "refinamiento móvil": -19% (26px → 21px) título→texto, parte
   de compactar ~15-20% el ritmo interno de Calidad y estandarización.
   Tamaño, contenido y ancho sin cambio. Tablet/desktop conservan 26px. */
@media (max-width: 700px) {
  .page-coco .coco-solutions + .coco-slide .coco-slide__text {
    margin-top: 1.3125rem;
  }
}

/* Sello OMRI: 190px (dentro de 160-210px pedido — esta vez el rango sí
   es coherente con "que forme parte de la composición" en vez de
   "está muy pequeño", así que se sigue el número tal cual, a
   diferencia del ajuste de la ronda anterior). object-fit:contain,
   ancho automático, imagen completa, sin recorte ni deformación
   (heredado de .coco-feature__img). Alineado verticalmente con el
   texto vía el align-items:center ya existente en .coco-feature. */
/* Micro-ajuste: más presencia. El valor base (190px) sigue rigiendo
   en móvil, sin cambios; tablet y desktop ganan sus propios tramos,
   cada uno con más tamaño que antes. */
.page-coco .coco-solutions + .coco-slide .coco-feature__img--omri {
  max-width: 190px;
}

@media (min-width: 701px) and (max-width: 900px) {
  .page-coco .coco-solutions + .coco-slide .coco-feature__img--omri {
    /* 160px→192px (+20%, proporcionalmente menos que en desktop). */
    max-width: 192px;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-solutions + .coco-slide .coco-feature__img--omri {
    /* 190px→235px (+24%, dentro de 20-25% pedido). */
    max-width: 235px;
  }
}

/* Sube ópticamente el sello dentro de su columna (dentro de 15-25px
   pedido): .coco-feature usa align-items:center, así que un
   margin-bottom en el propio contenedor desplaza hacia arriba el
   punto donde se centra su caja, sin position:absolute ni valores
   distintos por resolución. No queda pegado al borde superior (sigue
   centrado, solo desplazado). */
@media (min-width: 701px) {
  .page-coco .coco-solutions + .coco-slide .coco-feature__media {
    margin-bottom: 1.25rem;
  }
}

/* Reveal secuencial: OMRI → título → texto (rediseño editorial:
   resecuenciado porque OMRI ahora vive en la columna izquierda —
   entra primero, siguiendo el orden de lectura izquierda→derecha).
   Recorridos cortos y delays comprimidos (secuencia completa cierra
   en ~930ms) para que Calidad termine de revelarse muy antes de que
   el trigger (más tardío, threshold 0.25) de Hecho en México se
   active. */
.page-coco .coco-solutions + .coco-slide .coco-feature__media.reveal-up {
  transform: translateY(8px);
  transition-duration: 650ms;
}

.page-coco .coco-solutions + .coco-slide .coco-slide__title.reveal-up {
  transform: translateY(18px);
  transition-duration: 750ms;
  transition-delay: 150ms;
}

.page-coco .coco-solutions + .coco-slide .coco-slide__text.reveal-up {
  transform: translateY(10px);
  transition-duration: 700ms;
  transition-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-solutions + .coco-slide .coco-slide__title.reveal-up,
  .page-coco .coco-solutions + .coco-slide .coco-slide__text.reveal-up,
  .page-coco .coco-solutions + .coco-slide .coco-feature__media.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   HECHO EN MÉXICO (nueva sección)
   Entre Calidad y estandarización y Presentaciones. Mismo
   --color-linen continuo, sin franja/caja nueva. Fotografía real del
   proyecto ("Instalaciones suhm.png", raíz del sitio) a ancho completo
   del contenido, sin overlay/badge/gradiente — "la imagen debe hablar
   por sí sola", tal como se pidió. ========================================================================== */
.page-coco .coco-facilities {
  background-color: var(--color-linen);
  /* Ronda "depuración editorial": única fuente modificada = este
     padding-top (el padding-bottom de Calidad, 44px, sigue sin
     tocarse) — pausa amplia de capítulo. Total tablet: 44px + 76px =
     120px, dentro de 100-130px pedido. */
  padding-top: 4.75rem;
  /* Con el padding-top de Presentaciones (ver más abajo) suma el
     nuevo total Hecho en México→Presentaciones. */
  padding-bottom: 2.5rem;
}

@media (min-width: 901px) {
  .page-coco .coco-facilities {
    /* Ronda "ritmo visual, jerarquia de espacios": Calidad->Hecho en
       Mexico debe ser el tramo mas amplio ("nuevo capitulo
       importante"), pero dentro de 130-150px, no 140-180px. Total
       desktop: 44px + 116px = 160px (ronda anterior) -> 44px + 96px =
       140px. Unico valor tocado; .coco-solutions + .coco-slide
       (padding-bottom, 44px) sigue sin tocarse. */
    padding-top: 6rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-facilities {
    /* Ronda "refinamiento móvil": -13px (67px → 54px) — segunda mitad
       de Calidad→Hecho en México (junto con el padding-bottom de
       .coco-solutions + .coco-slide, arriba): total 24px + 54px = 78px,
       -18% sobre el estado anterior. Título, texto, fotografía sin
       cambio. */
    padding-top: 3.375rem;
    /* Ronda "refinamiento móvil": -8px (32px → 24px) — primera mitad de
       Foto→Presentaciones (junto con el padding-top de
       .coco-presentations, más abajo). Tablet/desktop conservan
       40px/44px. */
    padding-bottom: 1.5rem;
  }
}

/* Rediseño editorial (retirado, ronda "recomponer Hecho en México"):
   la composición de 2 columnas (título 47% / texto 53% lado a lado)
   dejaba el título a la izquierda y la frase "demasiado lejos a la
   derecha" — se pidió explícitamente unir ambos elementos
   visualmente, con la frase debajo del título, como un solo bloque.
   Vuelve al apilado simple (título arriba, texto debajo) en todos los
   anchos — mismo que ya usaba móvil, ahora también desktop/tablet.
   max-width:100% se mantiene: no hay razón para acotar un bloque de 1
   columna aquí (el título ya define su propio ancho por tamaño de
   fuente, el texto por .coco-facilities__text más abajo). */
.page-coco .coco-facilities__header {
  max-width: 100%;
}

/* Título: "Hecho en México" tal cual (sin mayúsculas completas),
   60-72px desktop (rediseño editorial: antes 42-52px) — el titular
   más grande de la página después del hero, con fuerza suficiente
   para acompañar la fotografía aérea. Café espresso, peso medium,
   line-height compacto, alineado a la izquierda. El salto de línea
   ("Hecho" / "en México") es natural según el ancho de la columna, no
   forzado. */
.page-coco .coco-facilities__title {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.375rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
  text-align: left;
}

@media (min-width: 901px) {
  .page-coco .coco-facilities__title {
    /* 60-72px, dentro de lo pedido. */
    font-size: clamp(3.75rem, 3.1rem + 1.8vw, 4.5rem);
  }
}

/* Texto: 16-18px, line-height 1.6, ancho 620-700px, tono secundario.
   Ronda "recomponer Hecho en México": vuelve a ir debajo del título en
   todos los anchos (ver .coco-facilities__header más arriba) — se
   retira el override que lo llevaba a margin-top:0 desde 701px (era
   para el layout de 2 columnas, ya retirado); el margin-top base
   (28px) vuelve a aplicar siempre, uniendo visualmente título+frase
   como un solo bloque, tal como se pidió. */
.page-coco .coco-facilities__text {
  max-width: 650px;
  margin: 1.75rem 0 0;
}

/* Fotografía: ancho completo del contenido, altura generosa (500-580px
   desktop, dentro de lo pedido), esquinas discretas (var(--radius-md),
   8px, dentro de 6-8px pedido) y overflow:hidden — sin card, sin
   sombra, sin marco. object-position 50% 40%: la nave de invernaderos
   queda ligeramente por encima del centro vertical del encuadre real
   de la foto, así el recorte de cover conserva el complejo completo y
   buena parte del campo alrededor en vez de cortar simétricamente.
   Ronda "depuración editorial": el texto se redujo a una sola frase
   breve y "la imagen debe hacer la mayor parte del trabajo visual" —
   el margin-top (título/texto → foto, "mismo capítulo") sube de 52px
   a 88px desktop (dentro de 80-110px pedido), con tablet/móvil
   escalando proporcionalmente. */
.page-coco .coco-facilities__media {
  margin: 3.5rem 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-coco .coco-facilities__media {
    margin-top: 5.5rem;
  }
}

.page-coco .coco-facilities__img {
  display: block;
  width: 100%;
  height: clamp(420px, 45vw, 480px);
  object-fit: cover;
  object-position: 50% 40%;
}

@media (min-width: 901px) {
  .page-coco .coco-facilities__img {
    /* 500-580px, dentro de lo pedido. */
    height: clamp(500px, 38vw, 580px);
  }
}

@media (max-width: 700px) {
  .page-coco .coco-facilities__img {
    /* Altura fija en vez de clamp: a los anchos móviles típicos, la
       proporción real de la foto (1670×941, ~16:9) da una altura
       natural muy por debajo de 280-380px — forzar el piso pedido
       implica recortar los costados en vez de arriba/abajo (cover se
       reacomoda al eje más restrictivo). 300px (dentro del rango
       pedido) es el equilibrio que menos recorta manteniendo la
       fotografía grande, sin llegar a un crop agresivo. */
    height: 300px;
  }
}

/* Reveal secuencial: título → texto → fotografía, mismo mecanismo y
   mismo observer .page-coco (threshold 0.25, ver main.js) que el
   resto de la página. Recorridos y delays alineados con la ronda
   anti-solapamiento de las demás secciones. */
.page-coco .coco-facilities__title.reveal-up {
  transform: translateY(20px);
  transition-duration: 900ms;
}

.page-coco .coco-facilities__text.reveal-up {
  transform: translateY(12px);
  transition-duration: 780ms;
  transition-delay: 200ms;
}

.page-coco .coco-facilities__media.reveal-up {
  transform: translateY(15px);
  transition-duration: 900ms;
  transition-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-facilities__title.reveal-up,
  .page-coco .coco-facilities__text.reveal-up,
  .page-coco .coco-facilities__media.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   PRESENTACIONES (ronda de refinamiento visual)
   Última sección de contenido de la página (Compromiso y entrega,
   antes aquí después, se eliminó por completo en la ronda de
   "depuración editorial" — repetía conceptos genéricos sin dato
   nuevo). El CTA final la sigue directamente ahora. Mismo
   --color-linen continuo (sin franja nueva). Dos familias editoriales
   (Slabs / Paca) sin cards/cajas/iconos — separación por tipografía y
   espacio/proporción. Numeración 01/02 y el separador "·" entre
   capacidades de rondas anteriores se retiraron por completo. Solo
   familia + capacidades disponibles (sin cultivo, drenaje, EC/pH,
   etc. — pendiente de otra ronda).
   Ronda "una sola fila": Slabs y Paca, que vivían apiladas en dos
   filas completas (cada una a ancho completo del contenedor), dejaban
   demasiado espacio vertical vacío — vuelven a compartir una misma
   fila en desktop (.coco-presentations__families pasa a 2 columnas
   ~50/50 con una hairline vertical central), con una única hairline
   compartida bajo el título (.coco-presentations__rule) en vez de las
   dos hairlines individuales de antes. Móvil/tablet siguen apiladas
   en 1 columna, con gaps mucho más cortos. ========================================================================== */
.page-coco .coco-presentations {
  background-color: var(--color-linen);
  /* Ronda "depuración editorial": única fuente modificada = este
     padding-top (el padding-bottom de Hecho en México, 40px, sigue
     sin tocarse) — pausa amplia de capítulo. Total tablet: 40px +
     85px = 125px, dentro de 100-130px pedido. */
  padding-top: 5.3125rem;
  /* Última sección antes del CTA (color de fondo distinto, oscuro):
     se sube moderadamente (48px→64px) para un cierre con más aire,
     sin perseguir el mismo rango numérico de "capítulo" que entre
     secciones del mismo fondo — el cambio de color del CTA ya aporta
     una separación visual fuerte por sí solo. */
  padding-bottom: 4rem;
}

@media (min-width: 901px) {
  .page-coco .coco-presentations {
    /* Ronda "ritmo visual, jerarquia de espacios": Hecho en Mexico->
       Presentaciones pasa de "capitulo mas amplio" (170px) a un tramo
       intermedio (110-130px pedido ahora), mas corto que
       Calidad->Hecho en Mexico (140px) para que la jerarquia entre
       tramos se perciba distinta en vez de repetir el mismo spacing en
       toda la pagina. Total desktop: 40px + 130px = 170px (ronda
       anterior) -> 40px + 80px = 120px. Unico valor tocado;
       .coco-facilities (padding-bottom, 40px) sigue sin tocarse. */
    padding-top: 5rem;
  }
}

@media (max-width: 700px) {
  .page-coco .coco-presentations {
    /* Ronda "refinamiento móvil": -14px (68px → 54px) — segunda mitad
       de Foto de Hecho en México→Presentaciones (junto con el
       padding-bottom de .coco-facilities, arriba): total 24px + 54px =
       78px, -22% sobre el estado anterior (100px), dentro de 20-25%
       pedido. Título, hairline y contenido sin cambio. */
    padding-top: 3.375rem;
    padding-bottom: 3rem;
  }
}

/* Rediseño editorial: de "título arriba, introducción debajo" a dos
   columnas — título izquierda (47%, dentro de 45-50% pedido),
   introducción derecha (53%, dentro de 50-55%). max-width:680px
   (pensado para el layout apilado) se retira.
   Ronda "depuración editorial": se elimina por completo la
   introducción genérica ("Diferentes formatos y capacidades para
   adaptarse a las necesidades productivas...") — las capacidades
   (15-40 L, 220-300 L) ya comunican la idea, tal como se pidió. Sin
   texto pareado, el grid de 2 columnas de este encabezado ya no tiene
   sentido — se retira, vuelve a ser solo el título. Slabs/Paca (más
   abajo, .coco-presentations__families) no cambian: siguen siendo su
   propia retícula independiente, solo conectada por spacing. */
.page-coco .coco-presentations__header {
  max-width: 100%;
}

/* Título: 48-54px desktop (rediseño editorial: antes 48-58px, tope
   reducido para dar más rango de jerarquía frente a "Hecho en
   México"). Café espresso, peso medium, line-height compacto,
   alineado a la izquierda. */
.page-coco .coco-presentations__title {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-coco .coco-presentations__title {
    /* 48-54px, dentro de lo pedido. */
    font-size: clamp(3rem, 2.7rem + 0.8vw, 3.375rem);
  }
}

/* Ronda "depuración editorial": con la introducción eliminada, este
   margin-top pasa a ser la separación interna título→familias
   ("mismo capítulo", 80-110px desktop pedido) — sube de 56px a 90px
   desktop, dándole a "Slabs"/"Paca" el aire de "sentirse importantes"
   pedido explícitamente. Tablet/móvil escalan proporcionalmente.
   Ronda "integrar imágenes reales": Slabs y Paca dejan de vivir lado a
   lado (62/38, ronda anterior) — cada una ahora es una composición
   propia de imagen+info a ancho completo (ver .coco-family__grid más
   abajo), así que aquí solo queda apilarlas verticalmente con aire
   editorial real entre ambas.
   Ronda "una sola fila" (reorganización definitiva): Slabs y Paca
   dejaban demasiado espacio vertical vacío apiladas en dos filas
   completas — pasan a vivir en la misma fila (2 columnas ~50/50) en
   desktop, con una hairline vertical fina como único divisor central
   (mismo lenguaje que .coco-mixes::before, más arriba). Móvil/tablet
   (<901px) siguen apiladas en 1 columna (Slabs, luego Paca), pero con
   gaps/margin muy reducidos frente a la ronda anterior — el objetivo
   explícito es "mucho más compacta" en todos los anchos. */
/* Ronda "refinamiento móvil": esta regla base ya es exclusiva de
   <701px (701px+ la sobreescribe por completo, justo abajo) — se
   ajusta directamente. margin-top -4px (32px→28px, título
   Presentaciones→primer producto, junto con .coco-presentations__rule
   más abajo) y gap -8px (44px→36px, -18%, lista de litros→imagen
   Paca). Slabs/Paca, contenido y layout de cada familia sin cambio. */
.page-coco .coco-presentations__families {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-top: 1.75rem;
}

@media (min-width: 701px) {
  .page-coco .coco-presentations__families {
    gap: 3.25rem;
    margin-top: 2.25rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-presentations__families {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--space-lg);
    row-gap: 0;
    margin-top: 2.5rem;
  }

  .page-coco .coco-presentations__families::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: color-mix(in srgb, var(--color-espresso) 12%, transparent);
  }
}

/* Hairline compartida bajo "Presentaciones" (ronda "una sola fila"):
   sustituye las dos hairlines individuales que antes encabezaban cada
   bloque (Slabs/Paca) — con ambas familias ahora en la misma fila, dos
   líneas cortas separadas por un hueco ya no tenían función y leían
   como "la gran separación entre Slabs y Paca en dos filas" que se
   pidió quitar. Una sola línea de ancho completo, mismo tratamiento
   visual (1px, café a baja opacidad, sin caja/fondo). */
.page-coco .coco-presentations__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1.75rem;
  background-color: color-mix(in srgb, var(--color-espresso) 22%, transparent);
}

/* Ronda "refinamiento móvil": -21% (28px → 22px) título Presentaciones
   → hairline, junto con .coco-presentations__families (arriba) para
   compactar título→primer producto. Grosor, color y ancho del
   hairline sin cambio. Tablet/desktop conservan 28px/36px. */
@media (max-width: 700px) {
  .page-coco .coco-presentations__rule {
    margin-top: 1.375rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-presentations__rule {
    margin-top: 2.25rem;
  }
}

/* ---------- Composición interna imagen + info (ronda "integrar imágenes reales") ----------
   Cada familia (Slabs/Paca) es ahora una sola composición editorial de
   imagen + información — no una galería aparte. Móvil/tablet (<901px):
   1 columna, imagen arriba (orden natural del DOM) e información
   debajo, igual para ambas familias — "no alternar izquierda/derecha
   en móvil" pedido explícitamente. Desktop (≥901px): 2 columnas
   44/56 (imagen/información, dentro de 40-48% / 52-60% pedido) —
   mismo ratio ya usado en los grids imagen+texto del sitio
   (.projects-hero__grid, .about-hero__grid, .coco-hero__grid), no un
   valor nuevo. align-items:center para que la imagen y el bloque de
   texto se centren verticalmente entre sí, mismo criterio que esos
   otros grids. */
.page-coco .coco-family__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Ronda "refinamiento móvil": -15% (20px → 17px) imagen→título/
   contenido, aplica igual a Slabs y Paca (mismo lenguaje visual, tal
   como se pidió para la última área). Tablet/desktop conservan
   20px/28px. */
@media (max-width: 700px) {
  .page-coco .coco-family__grid {
    gap: 1.0625rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-family__grid {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    align-items: center;
    /* Ronda "una sola fila": -36px (64px→28px) — cada familia vive
       ahora en media columna (~50% del contenedor, antes 100%), así
       que "imagen y datos próximos entre sí" (pedido explícito) pide
       un gap interno bastante más corto que cuando cada bloque tenía
       todo el ancho para sí. */
    gap: 1.75rem;
  }

  /* Paca invierte el orden visual (información izquierda, imagen
     derecha) solo en desktop — el DOM sigue siendo imagen primero en
     ambas familias, así que en móvil/tablet (sin este override) las
     dos muestran imagen arriba de forma natural, sin necesidad de
     alternar ahí. */
  .page-coco .coco-family__grid--reverse .coco-family__media {
    order: 2;
  }

  .page-coco .coco-family__grid--reverse .coco-family__content {
    order: 1;
  }

  /* Ronda "equilibrar peso visual Slab <-> Paca": columnas propias por
     fila en vez de la proporcion generica 44/56 de arriba. Slabs:
     44fr -> 56fr en la columna de imagen (+27%, dentro de 25-35%
     pedido) -- la imagen crece, el texto cede el espacio equivalente
     (44fr). Paca: dado que su fila usa order (arriba) para que la
     imagen visualmente quede a la derecha, la pista/track que ocupa
     la imagen (segunda, order:2) es la que se reduce: 56fr -> 38fr
     (-13.6%, dentro de 10-15% pedido); la primera pista (order:1,
     contenido) sube a 62fr para compensar el ancho total de la fila.
     height:auto/width:100% de .coco-family__img (sin tocar) siguen
     escalando la imagen a la proporcion original de cada archivo,
     ahora dentro de una columna mas ancha (Slabs) o mas angosta
     (Paca) -- sin deformacion, sin recorte.
     Ronda "reducir imagenes ~50%": las imagenes ganaron demasiado
     protagonismo -- se reduce la columna de cada imagen a la mitad de
     su valor anterior (contenedor, no transform:scale), y el texto
     recupera ese espacio para que no queden huecos. Slabs: pista de
     imagen (primera, sin order) 56fr -> 28fr; contenido 44fr -> 72fr.
     Paca: pista de imagen (segunda, order:2) 38fr -> 19fr; contenido
     (primera, order:1) 62fr -> 81fr.
     Ronda "refinamiento integral": punto intermedio entre ese 50% y el
     tamaño grande original. Slabs: imagen 28fr->33fr (~33% de la
     fila), contenido 72fr->67fr. Paca: pista de imagen (segunda,
     order:2) 19fr->25fr (~25%), contenido (primera, order:1)
     81fr->75fr.
     Ronda "una sola fila": cada familia pasó de ocupar el 100% del
     contenedor a ~50% (columna propia dentro de
     .coco-presentations__families) -- a ese ancho, 33%/25% de imagen
     dejarían el producto diminuto (~180px/~140px reales). Se sube el
     track de imagen de cada familia para que el producto conserve
     presencia similar a la de la ronda anterior en términos absolutos,
     ambos archivos son casi cuadrados (slab 1350x1350, paca
     1312x1199) así que fr similares producen anchos similares. Slabs:
     imagen 33fr->40fr, contenido 67fr->60fr. Paca: imagen (segunda,
     order:2) 25fr->42fr, contenido (primera, order:1) 75fr->58fr --
     mayor que el de Slabs porque su columna de texto ("Paca" +
     "220-300 L") necesita mucho menos ancho que la retícula de
     capacidades de Slabs. width:100%/height:auto de .coco-family__img
     (sin tocar) siguen escalando cada imagen a su propia columna --
     sin deformar, sin recortar. */
  .page-coco .coco-family--slabs .coco-family__grid {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  }

  .page-coco .coco-family--paca .coco-family__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }
}

/* Imagen de producto real, sin recorte: se muestra a su proporción
   original (width:100%/height:auto, sin aspect-ratio ni object-fit
   forzados — ninguno de los dos archivos necesita recortarse). Sin
   card/fondo/sombra/marco: ambos archivos son recortes de producto
   (fondo transparente o, en el caso de Paca, blanco sólido neutralizado
   más abajo), así que un border-radius no tendría ningún borde
   rectangular visible sobre el que aplicarse — se omite. */
/* Ronda "reducir imagenes ~50%": en movil/tablet (1 columna, la imagen
   ocupa el ancho completo del bloque) reducir 50% se veria "diminuta"
   -- se pidio explicitamente no copiar ese numero ahi. max-width:65%
   centrado mantenía la imagen legible sin dominar la composicion.
   Ronda "refinamiento integral": 65% seguía leyéndose pequeña frente
   al resto de la página ya reforzada -- sube a 82% (+26%, dentro de
   25-35% pedido), sigue centrada, sin llegar a 100% para conservar
   aire lateral. Desde 901px, el tamano real ya lo define la columna
   del grid (ver arriba) -- se retira el max-width/centrado ahi para
   que la imagen vuelva a ocupar el 100% de su propia columna. */
.page-coco .coco-family__img {
  display: block;
  width: 100%;
  max-width: 82%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 901px) {
  .page-coco .coco-family__img {
    max-width: none;
    margin: 0;
  }
}

/* Ronda "más presencia del Slab (solo móvil)": +12% (82% → 92%,
   dentro de 10-15% pedido) — el Slab se sentía pequeño frente a Paca.
   Escopado a .coco-family--slabs para no tocar la imagen de Paca (no
   modificar: archivo, tamaño, proporción, posición, detalle circular,
   transparencia). height:auto (heredado) conserva la proporción
   exacta del archivo, sin transform/zoom/márgenes negativos — solo
   width/max-width. Tablet/desktop conservan 82%/columna del grid. */
@media (max-width: 700px) {
  .page-coco .coco-family--slabs .coco-family__img {
    max-width: 92%;
  }
}

/* Ronda "nueva imagen Paca": el archivo anterior (paca-fibra-coco.png)
   traía un fondo blanco sólido horneado (verificado con canal alfa:
   esquina A=255, no transparente) y por eso necesitaba
   mix-blend-mode:multiply para fundirse con --color-linen. El nuevo
   archivo ("imagenes insumos/hidroponía/paca fibra de coco.png", ver
   HTML) ya trae transparencia real (verificado: A=0 en las 4 esquinas,
   A=253 en el producto) — el blend ya no hace falta y se retira para
   esta imagen; sin fondo/filtro adicional, se apoya directamente sobre
   el crema de la página. */

/* Nombre de familia (Slabs / Paca): funcionan como subtítulos
   principales de producto, dentro de 20-24px desktop (ronda de
   refinamiento: antes 28px, se sentía ya demasiado cerca del título
   Presentaciones) — se mantienen a 24px, el mismo tamaño en todos los
   anchos.
   Ronda "equilibrar peso visual Slab <-> Paca": +10% (dentro de 8-12%
   pedido), 1.5rem/24px -> 1.65rem/26.4px, para un poco mas de
   jerarquia -- mismo peso (500), mismo lenguaje tipografico TASS, no
   se convierte en titulo grande. */
.page-coco .coco-family__name {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  text-align: left;
}

/* Capacidades de Slabs: retícula editorial de 3 columnas (2 filas ×
   3, "15 L 18 L 22 L / 26 L 30 L 40 L"). Sin separadores, sin cards.
   Ronda de refinamiento: mucha más presencia tipográfica (ver
   .coco-family__capacity abajo) — en desktop se amplían también los
   gaps y el margen hacia "Slabs" para que el bloque, ya más grande,
   siga respirando correctamente; tablet/móvil conservan los valores
   ya aprobados (el aumento de tamaño ahí es más moderado). */
/* Ronda "equilibrar peso visual Slab <-> Paca": gaps ligeramente
   mayores para mejorar lectura (pedido explícito) -- valores de
   capacidad sin cambio (15L/18L/22L/26L/30L/40L). */
.page-coco .coco-family__capacities {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  column-gap: 2.5rem;
  row-gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

/* Ronda "refinamiento móvil": -16% (32px → 27px) Slabs→lista de
   litros. Contenido, orden, tipografía y layout de la lista (3
   columnas, column-gap/row-gap) sin cambio. Tablet conserva 32px;
   desktop 28px. */
@media (max-width: 700px) {
  .page-coco .coco-family__capacities {
    margin-top: 1.6875rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-family__capacities {
    /* Ronda "una sola fila": la columna de contenido de Slabs ahora es
       ~mitad de ancho que antes (comparte fila con Paca) — el
       column-gap generoso de rondas previas (50px) ya no cabe sin
       forzar overflow con las 3 columnas de capacidades a 32px; se
       reduce a 28px (dentro de "compacta y editorial" pedido), sigue
       claramente separado, solo menos ancho. row-gap también baja un
       poco para la misma compactación general de la sección. */
    column-gap: 1.75rem;
    row-gap: 1.25rem;
    margin-top: 1.75rem;
  }
}

/* Capacidades: mucha más presencia — 24px móvil (dentro de 22-26px),
   26px tablet (dentro de 24-28px), 32px desktop (dentro de 28-34px,
   empezando en el extremo alto de "30-32px" pedido). Mismo peso
   (500, dentro de 400-500), mismo café oscuro, line-height compacto,
   sin mayúsculas. Ligeramente por debajo de .coco-family__lead/
   220-300 L (34px desktop) — Paca no se toca, pero se conserva una
   pequeña distinción de jerarquía entre ambas. */
.page-coco .coco-family__capacity {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-espresso);
  white-space: nowrap;
}

@media (min-width: 701px) and (max-width: 900px) {
  .page-coco .coco-family__capacity {
    font-size: 1.625rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-family__capacity {
    font-size: 2rem;
  }
}

/* Paca: valor único con más presencia (28-34px) que las capacidades
   de Slabs — refleja que es la presentación protagonista de esta
   familia, sin convertirse en badge (mismo tratamiento tipográfico
   que el resto de la sección, solo más grande). 32px hasta el título,
   dentro de 28-36px pedido. */
.page-coco .coco-family__lead {
  margin: 2rem 0 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  text-align: left;
}

/* Ronda "refinamiento móvil": -16% (32px → 27px) Paca→220-300L.
   Contenido y tamaño tipográfico sin cambio. Tablet/desktop conservan
   32px. */
@media (max-width: 700px) {
  .page-coco .coco-family__lead {
    margin-top: 1.6875rem;
  }
}

@media (min-width: 901px) {
  .page-coco .coco-family__lead {
    /* 28-34px, dentro de lo pedido. */
    font-size: 2.125rem;
  }
}

/* Reveal secuencial: título → Slabs (hairline+nombre) → capacidades
   de Slabs (stagger) → Paca (con ligero solapamiento, no espera a que
   Slabs termine) → 220-300 L. Ronda anti-solapamiento: recorridos más
   cortos y stagger comprimido. */
.page-coco .coco-presentations__title.reveal-up {
  transform: translateY(18px);
  transition-duration: 750ms;
}

/* Slabs y Paca: cada bloque (hairline+nombre) sigue siendo una sola
   unidad, como antes. Slabs arranca 280ms después del título; Paca
   arranca 130ms después de Slabs — no espera a que Slabs termine su
   animación ni a que terminen sus capacidades, el ligero solapamiento
   sigue siendo intencional. */
.page-coco .coco-family.reveal-up {
  transform: translateY(10px);
  transition-duration: 600ms;
  transition-delay: 280ms;
}

.page-coco .coco-family--paca.reveal-up {
  transition-delay: 410ms;
}

/* Capacidades de Slabs: stagger propio (55ms) con delay base de
   350ms (70ms después de que arranca el bloque Slabs) — sustituye el
   stagger genérico de [data-reveal-group] solo para este grupo,
   mayor especificidad, mismo mecanismo que .coco-mixes arriba. */
.page-coco .coco-family__capacity.reveal-up {
  transform: translateY(8px);
  transition-duration: 550ms;
}

.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(1).reveal-up { transition-delay: 350ms; }
.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(2).reveal-up { transition-delay: 405ms; }
.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(3).reveal-up { transition-delay: 460ms; }
.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(4).reveal-up { transition-delay: 515ms; }
.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(5).reveal-up { transition-delay: 570ms; }
.page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(6).reveal-up { transition-delay: 625ms; }

/* "220-300 L": último paso, 200ms después de que arranca Paca (no
   espera a que Paca termine de aparecer). */
.page-coco .coco-family__lead.reveal-up {
  transform: translateY(9px);
  transition-duration: 550ms;
  transition-delay: 610ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-presentations__title.reveal-up,
  .page-coco .coco-family.reveal-up,
  .page-coco .coco-family--paca.reveal-up,
  .page-coco .coco-family__capacity.reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(1).reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(2).reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(3).reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(4).reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(5).reveal-up,
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(6).reveal-up,
  .page-coco .coco-family__lead.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   REVELADO SECUENCIAL POR SCROLL — ajustes de móvil
   Ronda anti-solapamiento: recorridos aún más cortos que en desktop
   (títulos 8-14px, textos 6-10px, datos/logos ~6-7px, dentro de lo
   pedido) y delays más comprimidos, para que en pantallas pequeñas el
   contenido no se encime y no tarde en leerse. Mismo sistema, mismas
   duraciones/easing — solo recorridos y esperas más cortos. No toca
   layout, tamaños de texto ni spacing. ========================================================================== */
@media (max-width: 700px) {

  /* Soluciones a la medida */
  .page-coco .coco-solutions__title.reveal-up {
    transform: translateY(13px);
  }

  .page-coco .coco-mixes__item.reveal-up {
    transform: translateY(6px);
  }

  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(1).reveal-up { transition-delay: 210ms; }
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(2).reveal-up { transition-delay: 270ms; }
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(3).reveal-up { transition-delay: 330ms; }
  .page-coco .coco-mixes[data-reveal-group] > .coco-mixes__item:nth-child(4).reveal-up { transition-delay: 390ms; }

  /* Calidad y estandarización */
  .page-coco .coco-solutions + .coco-slide .coco-slide__title.reveal-up {
    transform: translateY(13px);
  }

  .page-coco .coco-solutions + .coco-slide .coco-slide__text.reveal-up {
    transform: translateY(7px);
    transition-delay: 110ms;
  }

  .page-coco .coco-solutions + .coco-slide .coco-feature__media.reveal-up {
    transform: translateY(6px);
    transition-delay: 210ms;
  }

  /* Hecho en México */
  .page-coco .coco-facilities__title.reveal-up {
    transform: translateY(14px);
  }

  .page-coco .coco-facilities__text.reveal-up {
    transform: translateY(7px);
    transition-delay: 150ms;
  }

  .page-coco .coco-facilities__media.reveal-up {
    transform: translateY(10px);
    transition-delay: 300ms;
  }

  /* Presentaciones */
  .page-coco .coco-presentations__title.reveal-up {
    transform: translateY(13px);
  }

  .page-coco .coco-family.reveal-up {
    transform: translateY(7px);
    transition-delay: 210ms;
  }

  .page-coco .coco-family--paca.reveal-up {
    transition-delay: 310ms;
  }

  .page-coco .coco-family__capacity.reveal-up {
    transform: translateY(6px);
  }

  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(1).reveal-up { transition-delay: 265ms; }
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(2).reveal-up { transition-delay: 305ms; }
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(3).reveal-up { transition-delay: 345ms; }
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(4).reveal-up { transition-delay: 385ms; }
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(5).reveal-up { transition-delay: 425ms; }
  .page-coco .coco-family__capacities[data-reveal-group] > .coco-family__capacity:nth-child(6).reveal-up { transition-delay: 465ms; }

  .page-coco .coco-family__lead.reveal-up {
    transform: translateY(7px);
    transition-delay: 460ms;
  }

}

@media (prefers-reduced-motion: reduce) {
  .page-coco .coco-solutions__title.reveal-up,
  .page-coco .coco-mixes__item.reveal-up,
  .page-coco .coco-solutions + .coco-slide .coco-slide__title.reveal-up,
  .page-coco .coco-solutions + .coco-slide .coco-slide__text.reveal-up,
  .page-coco .coco-solutions + .coco-slide .coco-feature__media.reveal-up,
  .page-coco .coco-facilities__title.reveal-up,
  .page-coco .coco-facilities__text.reveal-up,
  .page-coco .coco-facilities__media.reveal-up,
  .page-coco .coco-presentations__title.reveal-up,
  .page-coco .coco-family.reveal-up,
  .page-coco .coco-family--paca.reveal-up,
  .page-coco .coco-family__capacity.reveal-up,
  .page-coco .coco-family__lead.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ---------- CTA: profundidad sutil (sin tocar layout.css) ---------- */
.page-coco .cta-section {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(199, 165, 124, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(32, 28, 25, 0.18) 0%, rgba(32, 28, 25, 0) 35%, rgba(32, 28, 25, 0.22) 100%);
}