/* ============================================
   BASE
   ============================================ */

:root {

    /* --- Brand Colors --- */--color-tierra:        #623B2A;--color-tierra-dark:   #4a2b1e;--color-tierra-light:  #8B5E4A;--color-verde:         #CEDC00;--color-verde-hover:   #b8c600;--color-crema:         #FCF9F6;--color-crema-suave:   #f3eeea;--color-oscuro:        #1d1b16;

    /* --- Typography Scale --- */--font-base: 18px;          /* 16px — browser default */--font-caption:        0.6875rem;     /* 11px — meta, dates */--font-xs:             0.6875rem;     /* 11px */--font-sm:             0.875rem;      /* 14px */--font-md:             1rem;          /* 16px */--font-lg:             1.125rem;      /* 18px */--font-xl:             1.25rem;       /* 20px *//* --- Component: Volantas (super-title labels) --- */--font-volanta: 100%;--font-volanta-card: 100%;--font-volanta-hero:   0.6875rem;--letter-volanta:      0.25em;--letter-volanta-card: 0.2em;/* --- Component: Titles --- */--font-titulo-hero: clamp(2.5rem, 6vw, 6.5rem);--font-titulo-seccion: clamp(2rem, 4vw, 3.5rem);--font-titulo-modulo:  clamp(1.75rem, 3vw, 2.75rem);--font-titulo-card: 1rem;        /* 24px — card h3 */--font-titulo-card-sm: 1.25rem;       /* 20px — small card h4 */--font-titulo-articulo:1.125rem;      /* 18px *//* --- Component: Body / Lead --- */--font-parrafo-lead:   1.125rem;      /* 18px */--font-parrafo:        1rem;          /* 16px */--font-parrafo-sm:     0.875rem;      /* 14px *//* --- Component: Navigation --- */--font-nav-link: 0.6875rem;--letter-nav-link:     0.15em;--nav-height:          3.5rem;        /* 56px */--nav-outer-py:        1.5rem;        /* 24px — padding outside pill */--nav-inner-px:        0.5rem;        /* 8px *//* --- Component: Buttons --- */--font-boton:          0.6875rem;--font-boton-lg:       0.8125rem;     /* 13px */--letter-boton:        0.15em;--boton-px:            1.75rem;       /* 28px */--boton-py:            0.75rem;       /* 12px */--boton-px-sm:         1.125rem;      /* 18px */--boton-py-sm:         0.5rem;        /* 8px */--boton-px-nav:        1.25rem;       /* 20px */--boton-py-nav: 0.9rem;        /* 8px */--boton-px-ficha:      0.875rem;      /* 14px */--boton-py-ficha:      0.375rem;      /* 6px */--boton-radius:        999px;/* --- Component: Cards --- */--card-px:             2rem;          /* 32px */--card-py:             2rem;          /* 32px */--card-px-sm:          1.5rem;        /* 24px */--card-py-sm:          1.5rem;        /* 24px */--card-radius: 2em;       /* 12px */--card-radius-sm:      0.5rem;        /* 8px */--card-hover-lift:     -0.25rem;      /* -4px */--card-shadow-hover:   0 0.75rem 2rem rgba(0,0,0,0.1);--card-img-height: 10em;       /* 200px */--card-img-height-lg:  15rem;         /* 240px *//* --- Component: Stack --- */--stack-height:        21.25rem;      /* 340px */--stack-min-width: 12em;          /* 80px inactive strip */--stack-gap:           0.375rem;      /* 6px */--stack-radius:        0.875rem;      /* 14px *//* --- Component: Stats / Cifras --- */--font-cifra-grande:   clamp(2.5rem, 5vw, 4rem);/* --- Component: Forms --- */--campo-px:            1rem;          /* 16px */--campo-py:            0.75rem;       /* 12px */--campo-radius:        0.5rem;        /* 8px */--font-campo:          0.875rem;      /* 14px */--font-campo-label:    0.6875rem;     /* 11px */--letter-campo-label:  0.1em;/* --- Component: Filter selects --- */--filtro-px:           1rem;--filtro-py:           0.625rem;      /* 10px */--font-filtro:         0.875rem;/* --- Component: Tabs --- */--tab-px:              2rem;          /* 32px */--tab-py:              1rem;          /* 16px */--font-tab:            0.6875rem;--letter-tab:          0.15em;/* --- Component: Timeline --- */--timeline-dot:        0.75rem;       /* 12px */--timeline-outline:    0.25rem;       /* 4px ring *//* --- Component: Nutrient badges --- */--badge-size: 4em;          /* 32px */--font-badge:          0.6875rem;

    /* --- Layout / Spacing --- */--contenedor-max:      75rem;         /* 1200px */--contenedor-px:       1.5rem;        /* 24px */--seccion-py:          7rem;          /* ~112px */--seccion-py-sm:       5rem;          /* ~80px */--seccion-py-hero:     6rem;          /* ~96px */--gap-grid:            1.5rem;        /* 24px */--section-separator:   33vh;

    /* --- Trama texture --- */--trama-size:          0.5rem;        /* 8px */--trama-opacity:       0.04;

    /* --- Shadows --- */--shadow-nav:          0 0.125rem 1.25rem rgba(0,0,0,0.06), 0 0 0 0.0625rem rgba(0,0,0,0.03);--shadow-nav-scrolled: 0 0.25rem 1.875rem rgba(0,0,0,0.1), 0 0 0 0.0625rem rgba(0,0,0,0.04);

    /* --- Transitions --- */--ease-fast:           0.2s ease;--ease-base:           0.3s ease;--ease-enter:          0.7s cubic-bezier(0.16, 1, 0.3, 1);--ease-stack:          0.55s cubic-bezier(0.4, 0, 0.2, 1);--ease-spring:         0.5s cubic-bezier(0.34, 1.56, 0.64, 1);}


* { font-family: 'Titillium Web', sans-serif; }
html { scroll-behavior: smooth; font-size:var(--font-base);}


/* ============================================
   NAV
   ============================================ */
.nav-nuevo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: var(--nav-outer-py) var(--contenedor-px);
    transition: padding var(--ease-base);
}
.nav-nuevo-inner {
    max-width: var(--contenedor-max);
    margin: 0 auto;
    background: rgb(255 255 255 / 50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(0.75rem);
    border-radius: var(--boton-radius);
    box-shadow: var(--shadow-nav);
    padding: 0 var(--nav-inner-px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    transition: box-shadow var(--ease-base);
    border-top: solid 1px #ffffff36;
    border-bottom: solid 1px #ffffff29;
}
.nav-nuevo.scrolled .nav-nuevo-inner {
    box-shadow: var(--shadow-nav-scrolled);
}
.nav-logo {height: 1.25rem;margin-left: 0.85rem;}
.nav-links { display: flex; align-items: center; gap: 0.375rem; }
.nav-link {
    position: relative;
    color: var(--color-tierra);
    opacity: 0.9;
    font-size: var(--font-nav-link);
    font-weight: 600;
    letter-spacing: var(--letter-nav-link);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem var(--boton-px-sm);
    border-radius: var(--boton-radius);
    line-height: 1;
    transition: opacity var(--ease-fast), background var(--ease-fast);
}
.nav-link:hover {
    opacity: 1;
    /* background: rgba(98,59,42,0.05); */
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    width: 0;
    height: 0.09375rem; /* 1.5px */
    background: var(--color-verde);
    transition: width var(--ease-base), left var(--ease-base);
}
.nav-link:hover::after { width: 50%; left: 25%; }
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-tierra);
}
@media (max-width: 1023px) {
    .nav-links-desktop { display: none !important; }
    .nav-hamburger { display: block; }
}

/* Nav mobile menu */
.nav-nuevo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    width: 100%;
}
.nav-nuevo-inner {
    /* Override fixed height to allow expansion */
    height: auto;
    min-height: var(--nav-height);
    flex-direction: column;
    align-items: stretch;
    border-radius: calc(var(--nav-height) / 2);
}
.nav-mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}
.nav-nuevo.nav-abierto .nav-mobile-menu {
    max-height: 24rem;
    padding-bottom: 0.75rem;
}
.nav-nuevo.nav-abierto .nav-nuevo-inner {
}
.nav-mobile-link {
    display: block;
    color: var(--color-tierra);
    font-size: var(--font-nav-link);
    font-weight: 600;
    letter-spacing: var(--letter-nav-link);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem var(--boton-px-sm);
    border-radius: var(--boton-radius);
    transition: background var(--ease-fast), color var(--ease-fast);
}
.nav-mobile-link:hover { background: rgba(98,59,42,0.05); }
.nav-mobile-link.boton-nav {
    display: inline-block;
    margin-top: 0.5em;
    /* align-self: flex-start; */
    margin-left: var(--boton-px-sm);
}
/* Hamburger X state */
.nav-nuevo.nav-abierto .nav-hamburger-open { display: none; }
.nav-hamburger-close { display: none; }
.nav-nuevo.nav-abierto .nav-hamburger-close { display: block; }


/* ============================================
   BUTTONS
   ============================================ */
.boton {
    display: inline-block;
    padding: var(--boton-py) var(--boton-px);
    font-size: var(--font-boton);
    font-weight: 700;
    letter-spacing: var(--letter-boton);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--boton-radius);
    transition: all 0.25s ease;
    cursor: pointer;
    border: 0.09375rem solid transparent; /* 1.5px */
}
.boton-primario {
    background: var(--color-verde);
    color: var(--color-oscuro);
    border-color: var(--color-verde);
}
.boton-primario:hover {
    background: var(--color-verde-hover);
    border-color: var(--color-verde-hover);
}
.boton-secundario {
    background: var(--color-tierra);
    color: var(--color-crema);
    border-color: var(--color-tierra);
}
.boton-secundario:hover {
    background: var(--color-tierra-dark);
    border-color: var(--color-tierra-dark);
}
.boton-outline {
    background: transparent;
    border-color: currentColor;
}
.boton-outline:hover {
    background: var(--color-tierra);
    border-color: var(--color-tierra);
    color: var(--color-crema);
}
.boton-outline-gris {
    background: transparent;
    color: rgba(29,27,22,0.55);
    border-color: rgba(29,27,22,0.2);
}
.boton-outline-gris:hover {
    background: rgba(29,27,22,0.06);
    border-color: rgba(29,27,22,0.35);
    color: var(--color-oscuro);
}
.boton-outline-claro {
    background: transparent;
    color: var(--color-crema);
    border-color: rgba(252,249,246,0.3);
}
.boton-outline-claro:hover {
    background: rgba(252,249,246,0.1);
    border-color: rgba(252,249,246,0.6);
}
.boton-nav {
    background: var(--color-verde);
    color: var(--color-oscuro);
    padding: var(--boton-py-nav) var(--boton-px-nav);
    font-size: var(--font-boton);
    font-size: var(--font-nav-link);
    line-height: 1;
}
.boton-nav:hover { background: var(--color-verde-hover); }
.boton-sm {
    padding: var(--boton-py-sm) var(--boton-px-sm);
    font-size: var(--font-boton);
}
.boton-ficha {
    display: inline-block;
    font-size: var(--font-boton);
    padding: var(--boton-py-ficha) var(--boton-px-ficha);
    border-radius: var(--boton-radius);
    border: 0.0625rem solid rgba(98,59,42,0.25);
    color: var(--color-tierra);
    font-weight: 600;
    letter-spacing: var(--letter-boton);
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--ease-fast);
}
.boton-ficha:hover {
    background: var(--color-tierra);
    border-color: var(--color-tierra);
    color: var(--color-crema);
}
.boton-ficha-gris {
    display: inline-block;
    font-size: var(--font-boton);
    padding: var(--boton-py-ficha) var(--boton-px-ficha);
    border-radius: var(--boton-radius);
    border: 0.0625rem solid rgba(29,27,22,0.1);
    color: rgba(29,27,22,0.5);
    font-weight: 600;
    letter-spacing: var(--letter-boton);
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--ease-fast);
}
.boton-ficha-gris:hover {
    background: var(--color-oscuro);
    border-color: var(--color-oscuro);
    color: var(--color-crema);
}
.boton-filtro {
    padding: var(--filtro-py) 1.375rem;
    font-size: var(--font-boton);
    font-weight: 700;
    letter-spacing: var(--letter-boton);
    text-transform: uppercase;
    border-radius: var(--boton-radius);
    cursor: pointer;
    transition: all var(--ease-fast);
    border: 0.09375rem solid transparent;
}
.boton-filtro-activo {
    background: var(--color-verde);
    color: var(--color-oscuro);
}
.boton-filtro-inactivo {
    background: transparent;
    border-color: rgba(252,249,246,0.2);
    color: rgba(252,249,246,0.6);
}
.boton-filtro-inactivo:hover {
    border-color: rgba(252,249,246,0.5);
    color: var(--color-crema);
}
.enlace-ver {
    font-size: var(--font-boton);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-tierra);
    padding-bottom: 0.125rem;
    transition: color var(--ease-fast), border-color var(--ease-fast);
}
.enlace-ver:hover {
    color: var(--color-oscuro);
    border-color: var(--color-oscuro);
}
.enlace-ver-claro {
    color: var(--color-verde);
    border-color: var(--color-verde);
}
.enlace-ver-claro:hover {
    color: var(--color-crema);
    border-color: var(--color-crema);
}


/* ============================================
   LAYOUT
   ============================================ */
.seccion {position: relative;overflow: hidden;}
.seccion-oscura     {background: var(--color-tierra);color: var(--color-crema);}
.seccion-oscura-deep{ background: var(--color-tierra-dark); color: var(--color-crema); }
.seccion-crema      { background: var(--color-crema);       color: var(--color-oscuro); }
.seccion-suave      { background: var(--color-crema-suave); color: var(--color-oscuro); }

.contenedor {
    max-width: var(--contenedor-max);
    margin: 0 auto;
    padding-left: var(--contenedor-px);
    padding-right: var(--contenedor-px);
}

/* Section separators — eran para el /nuevo single-page (secciones apiladas).
   En multi-página el único <section> hermano es #contacto (del footer), así que
   este margen sólo deja un hueco blanco antes de Contacto: se excluye. */
section + section:not(#contacto) { margin-top: var(--section-separator); }
.seccion-hero .contenedor {
    padding-bottom: 10vh;
}
/* ============================================
   TYPOGRAPHY COMPONENTS
   ============================================ */

/* Volantas */
.volanta {
    font-size: var(--font-volanta);
    font-size: 80%;
    font-weight: 700;
    letter-spacing: var(--letter-volanta);
    text-transform: uppercase;
    margin-bottom: 1em;
}
.volanta-card {
    font-size: var(--font-volanta-card);
    letter-spacing: var(--letter-volanta-card);
}
.volanta-verde { color: var(--color-verde); }
.volanta-tierra { color: var(--color-tierra); }
.volanta-crema { color: rgba(252,249,246,0.5); }

/* Titles */
.titulo {font-weight: 900;line-height: 0.9;letter-spacing: -0.025em;}
.titulo-hero    { font-size: var(--font-titulo-hero); }
.titulo-seccion { font-size: var(--font-titulo-seccion); }
.titulo-modulo  {font-size: var(--font-titulo-modulo);margin: 0.25em 0;}
.titulo-card    { font-size: var(--font-titulo-card); }
.titulo-card-sm { font-size: var(--font-titulo-card-sm); }
.titulo-articulo{ font-size: var(--font-titulo-articulo); }
.titulo-light   { font-weight: 300; }
.titulo-destaque{ color: var(--color-verde); }

/* Body copy */
.parrafo-lead { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; }
.parrafo      { font-size: var(--font-parrafo);      font-weight: 300; line-height: 1.65; }
.parrafo-sm   { font-size: var(--font-parrafo-sm);   font-weight: 300; line-height: 1.6; }
.caption      { font-size: var(--font-caption); }

/* Stats */
.cifra { font-weight: 700; line-height: 1; }
.cifra-grande { font-size: var(--font-cifra-grande); }
.cifra-verde  { color: var(--color-verde); }
.cifra-crema  { color: var(--color-crema); }
.cifra-tierra { color: var(--color-tierra); }


/* ============================================
   CARDS
   ============================================ */
.tarjeta {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.tarjeta:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--card-shadow-hover);
}
.tarjeta-producto {
    padding: var(--card-py) var(--card-px);
    padding-right: 30%;
    position: relative;
    overflow: hidden;
}
.tarjeta-producto-oscura   { background: var(--color-tierra-dark); color: var(--color-crema); }
.tarjeta-producto-tierra   { background: var(--color-tierra);      color: var(--color-crema); }
.tarjeta-producto-clara    {border: 0.0625rem solid rgba(29,27,22,0.08);background: white;}
.tarjeta-producto-cta      { background: var(--color-verde); }
.tarjeta-producto-detalle  {
    background: white;
    border: 0.0625rem solid rgba(29,27,22,0.08);
    padding: var(--card-py) var(--card-px);
    border-radius: var(--card-radius-sm);
}
/* Estrategias — stack vertical sticky con fade on scroll */
/* Override del overflow:hidden de .seccion para permitir position:sticky de los items.
   Necesario también en el <section> outer (#inicio.seccion-hero) porque cualquier ancestro
   con overflow distinto a visible crea un scroll container y rompe el sticky. */
.seccion-hero,
.seccion-estrategias,
.seccion-ensayos,
.seccion-ensayos-contenido { overflow: visible; }
.estrategias-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3em;
}
.estrategia-item {
    position: sticky;
    top: 6rem;
    will-change: transform, opacity;
    transform-origin: 50% 0%;
}
.estrategia-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    display: flex;
    max-width: 90%;
    margin: 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3em 2em;
    min-height: 22rem;
    background-size: cover;
    background-position: center;
    color: var(--color-crema);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0em 0em rgba(29,27,22,0);
    transition: all 0.2s cubic-bezier(0.53, 0.29, 0.4, 0.99);
    transform-origin: 50% 50%;
}
.estrategia-card:hover {
    transform: scale(1.01);
    box-shadow: 0 0 0 2.5px var(--color-verde);
}
.estrategia-card:hover .estrategia-cta {
    color: var(--color-verde);
    text-decoration-thickness: 2px;
}
.estrategia-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(29,27,22,0.88), rgba(29,27,22,0.25));
}
.estrategia-card > * { position: relative; z-index: 1; }
.estrategia-logo {
    width: auto;
    height: 4em;
    object-fit: contain;
    object-position: left bottom;
    opacity: 0.9;
    margin-bottom: 1rem;
}
.estrategia-texto {
    color: var(--color-crema);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    max-width: 38rem;
}
.estrategia-cta {
    align-self: flex-start;
    color: var(--color-crema);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    /* font-size: 0.8125rem; */
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: opacity var(--ease-fast);
}
.estrategia-cta:hover { opacity: 0.7; }

.tarjeta-cultivo {
    padding: var(--card-py-sm) var(--card-px-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--color-tierra-dark);
    color: var(--color-crema);
    border-radius: var(--card-radius-sm);
}
.tarjeta-cultivo::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0.125rem;
    background: var(--color-verde);
    transform: scaleX(0);
    transition: transform var(--ease-base);
    transform-origin: left;
}
.tarjeta-cultivo:hover::after { transform: scaleX(1); }

.tarjeta-articulo {
    background: white;
    border-radius: var(--card-radius);
    border: solid 1px var(--color-crema-suave);
    border-radius: 1.5em;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.tarjeta-articulo-img {
    width: 100%;
    height: var(--card-img-height) !important;
    object-fit: cover;
    background: #e8e2db;
}
.tarjeta-articulo-body {
    padding: var(--card-py-sm) var(--card-px-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tarjeta-articulo:hover .tarjeta-articulo-titulo { color: var(--color-tierra); }
.tarjeta-articulo-titulo { transition: color var(--ease-fast); }

.tarjeta-ensayo {
    background: var(--color-crema);
    border: 0.0625rem solid rgba(29,27,22,0.08);
    padding: var(--card-py-sm) var(--card-px-sm);
    border-radius: 0;
}
.tarjeta-etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid rgba(29,27,22,0.08);
    padding: var(--card-py-sm) var(--card-px-sm);
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    isolation: isolate;
    transition: background 0.25s ease-out, border-color 0.25s ease-out;
}
/* Contenido por encima de la trama */
.tarjeta-etapa > *:not(.tarjeta-etapa-bg) { position: relative; z-index: 1; }
/* "Productos recomendados" pegado al fondo → botones al mismo nivel entre tarjetas */
.tarjeta-etapa-foot { margin-top: auto; }
/* Capa de trama que scrollea lento (misma animación que home/productos) */
.tarjeta-etapa-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background-image: url('/img/trama.svg');
    background-size: 100px auto;
    background-repeat: repeat;
    animation: prod-trama-scroll 8s linear infinite;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
/* Estado activo: se enciende al pasar el mouse por un botón de producto (vía JS),
   y --prod-color se sobreescribe inline con el color de ESE producto. */
.tarjeta-etapa.etapa-activa {
    background: var(--fam-color);
    border-color: transparent;
}
.tarjeta-etapa.etapa-activa .tarjeta-etapa-bg {
    opacity: 0.2;
    animation-play-state: running;
}
/* Tipografía a blanco cuando la tarjeta está activa */
.tarjeta-etapa.etapa-activa .etapa-codigo,
.tarjeta-etapa.etapa-activa .titulo-etapa,
.tarjeta-etapa.etapa-activa .etapa-desc,
.tarjeta-etapa.etapa-activa .etapa-prod-label { color: #fff; }
.tarjeta-etapa.etapa-activa .tarjeta-etapa-foot { border-top-color: rgba(255,255,255,0.25); }

/* Colores en reposo (antes inline con utilidades) */
.etapa-desc { color: rgba(29,27,22,0.5); }
.etapa-prod-label { color: rgba(29,27,22,0.4); }

/* Botones de producto recomendado — color principal de la familia, con jerarquía de botón */
.etapa-prods { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etapa-prod {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--fam-color);
    color: #fff;
    text-decoration: none;
    transition: background var(--ease-fast), color var(--ease-fast), filter var(--ease-fast);
}
/* Con la tarjeta activa: el botón que disparó queda blanco sólido, el resto blanco translúcido */
.tarjeta-etapa.etapa-activa .etapa-prod {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.tarjeta-etapa.etapa-activa .etapa-prod-activo {
    background: #fff;
    color: var(--fam-color);
}


/* ============================================
   FORMS
   ============================================ */
.campo {
    width: 100%;
    background: var(--color-tierra);
    border: 0.0625rem solid var(--color-tierra-light);
    color: var(--color-crema);
    padding: var(--campo-py) var(--campo-px);
    font-size: var(--font-campo);
    border-radius: var(--campo-radius);
    transition: border-color var(--ease-fast);
    outline: none;
}
.campo::placeholder { color: rgba(252,249,246,0.2); }
.campo:focus { border-color: var(--color-verde); }
.campo-select option { background: var(--color-tierra-dark); }
.campo-label {
    display: block;
    color: rgba(252,249,246,0.5);
    font-size: var(--font-campo-label);
    text-transform: uppercase;
    letter-spacing: var(--letter-campo-label);
    margin-bottom: 0.375rem;
}
/* Asunto destacado (cargado desde "Consultar por …") */
.form-asunto {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 0.5rem;
    border-left: 0.1875rem solid var(--color-verde);
    background: rgba(206,220,0,0.08);
    border-radius: 0 0.375rem 0.375rem 0;
}
.form-asunto-label {
    font-size: var(--font-campo-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-campo-label);
    color: var(--color-verde);
    flex-shrink: 0;
}
.form-asunto-texto {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-crema);
}

/* Form de contacto: paddings apenas más chicos (para no sumar tanto alto con el
   nuevo textarea de mensaje) */
.form-contacto .campo { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.form-contacto .campo-label { margin-bottom: 0.25rem; }
.form-contacto .boton-enviar-contacto { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.campo-textarea { resize: vertical; min-height: 3.25rem; line-height: 1.4; }
/* Aviso de resultado del envío (ok en verde, error en rojo) */
.form-contacto-aviso {
    font-size: var(--font-sm);
    line-height: 1.5;
    text-align: center;
    color: var(--color-verde);
}
.form-contacto-aviso[data-error] { color: #ff9d8a; }
.form-contacto-aviso[hidden] { display: none; }

.filtro-select {
    border: 0.0625rem solid rgba(29,27,22,0.12);
    background: var(--color-crema);
    padding: var(--filtro-py) var(--filtro-px);
    font-size: var(--font-filtro);
    border-radius: var(--boton-radius);
    color: rgba(29,27,22,0.6);
    cursor: pointer;
    transition: border-color var(--ease-fast);
    outline: none;
}
.filtro-select:hover,
.filtro-select:focus { border-color: var(--color-tierra); }


/* ============================================
   TABS (Nosotros)
   ============================================ */
.tab-bar {
    display: flex;
    border-bottom: 0.0625rem solid rgba(252,249,246,0.1);
    margin-bottom: 3rem;
}
.tab-btn {
    padding: 0 1em 1em;
    font-size: var(--font-tab);
    font-weight: 700;
    letter-spacing: var(--letter-tab);
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 0.125rem solid transparent;
    color: rgba(252,249,246,0.35);
    cursor: pointer;
    transition: color var(--ease-fast), border-color var(--ease-fast);
}
.tab-btn:hover { color: rgba(252,249,246,0.7); }
.tab-btn.tab-activo {
    color: var(--color-crema);
    border-bottom-color: var(--color-verde);
}
/* Light-background tabs */
.tab-bar-claro { border-bottom-color: rgba(29,27,22,0.08); }
.tab-btn-claro {
    color: rgba(29,27,22,0.25);
    font-size: var(--font-titulo-card);
    letter-spacing: 0.05em;
}
.tab-btn-claro:hover { color: rgba(29,27,22,0.5); }
.tab-btn-claro.tab-activo {
    color: var(--color-tierra);
    border-bottom-color: var(--color-tierra);
}
.tab-panel { display: none; }
.tab-panel.tab-visible { display: block; }

/* Tab content layout: 60% texto / 40% icono, icono centrado en su columna */
.tab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 64rem) {
    .tab-grid {
        grid-template-columns: 3fr 2fr;
        gap: 5rem;
    }
}
.tab-icono-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    scale:1.25;
}
.tab-icono-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    perspective: 500px;
}
.tab-icono {
    width: 100%;
    max-width: 16rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.tab-icono-3d {
    /* La rotación y opacidad las maneja JS íntegramente vía rAF */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
}

/* Animación de entrada de elementos en cada tab */
.tab-anim {
    opacity: 0;
    transform: translateY(0.75rem);
}
.tab-panel.tab-visible .tab-anim {
    animation: tab-anim-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--tab-anim-delay, 0ms);
}
@keyframes tab-anim-in {
    to { opacity: 1; transform: translateY(0); }
}


/* ============================================
   TIMELINE
   ============================================ */
/* Full-width wrapper — rompe el contenedor */
.timeline-wrap {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* 5 columnas en desktop, 3 en mobile con wrap */
.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 1rem;
    width: 100%;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 1.5em; /* centro vertical de los dots */
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(29, 27, 22, 0.0) 0%, rgba(29, 27, 22, 0.1) 50%, transparent 100%);
    background-size: 220px 100%;
    animation: tl-line-scroll 4s linear infinite;
}
@keyframes tl-line-scroll {
    to { background-position-x: -220px; }
}
.tl-evento {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Dot wrap: contiene 1 o 2 imágenes */
.tl-dot-wrap {
    position: relative;
    width: 3em;
    height: 3em;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.tl-dot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

/* Doble: dos imágenes en stack diagonal */
.tl-dot-doble {
    width: 4em;
    height: 3em;
}
.tl-dot-doble .tl-dot-img {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
}
.tl-dot-doble .tl-dot-img:first-child {
    top: 0;
    left: 0;
    z-index: 2;
}
.tl-dot-doble .tl-dot-img:last-child {
    bottom: 0;
    right: 0;
    z-index: 1;
}

/* Año — compacto */
.tl-anio {
    color: var(--color-tierra);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    /* margin-bottom: 0.25rem; */
}

/* Descripción — legible */
.tl-desc {
    color: rgba(29,27,22,0.55);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ---- Intro animation coreografiada ---- */
.tl-evento .tl-dot-wrap,
.tl-evento .tl-anio {
    opacity: 0;
    transform: scale(0.6) translateY(0.5rem);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tl-evento .tl-desc {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Escalonar: dot+año primero, luego desc */
.tl-evento.tl-visible .tl-dot-wrap,
.tl-evento.tl-visible .tl-anio {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: calc(var(--tl-i, 0) * 180ms);
}
.tl-evento.tl-visible .tl-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tl-i, 0) * 180ms + 200ms);
}

/* Línea por fila generada por JS (mobile) */
.tl-linea {
    position: absolute;
    height: 2px;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(29,27,22,0.0) 0%,
        rgba(29,27,22,0.2) 50%,
        transparent 100%
    );
    background-size: 220px 100%;
    animation: tl-line-scroll 4s linear infinite;
    z-index: 0;
}

/* Mobile: 3 columnas, timeline wraps */
@media (max-width: 700px) {
    .seccion-hero .contenedor .parrafo-lead {
    line-height: 1.2;
    margin: 0 0 1em;
}
.prod-card-volanta {
    font-size: 90%;
    letter-spacing: 0.05em;
}
    .timeline {
        grid-template-columns: repeat(3, 1fr);
    }
    /* En mobile, ::before se oculta — JS crea .tl-linea por fila */
    .timeline::before {
        display: none;
    }
    .tl-dot-wrap { width: 3rem; height: 3rem; }
    .tl-dot-doble { width: 3.5rem; height: 3rem; }
    .tl-dot-doble .tl-dot-img { width: 2.1rem; height: 2.1rem; }
}


/* ============================================
   NUTRIENT BADGES
   ============================================ */
.nutriente-badge {
    width: var(--badge-size);
    height: var(--badge-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-badge);
    font-weight: 700;
    flex-shrink: 0;
    border-radius: 0.25rem;
}
.nutriente-badge-macro { background: var(--color-tierra); color: var(--color-crema); }
.nutriente-badge-micro { background: rgba(29,27,22,0.08); color: var(--color-oscuro); }

/* Composition grid */
.composicion-item {
    background: rgba(29,27,22,0.04);
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--card-radius-sm);
}
.composicion-valor {
    font-weight: 700;
    font-size: var(--font-xl);
    color: var(--color-tierra);
}


/* ============================================
   BAR CHART
   ============================================ */
/* El alto declarado (--barra-zona) es el de la ZONA DE BARRAS, no el del bloque
   entero: cada ítem es una grilla de 2 filas (barra arriba, leyenda abajo). Así
   la base de todas las barras queda a la misma altura y una leyenda de 2+ líneas
   empuja hacia ABAJO en vez de subir su barra (que es lo que pasaba con
   align-items:flex-end sobre el flex). El JS deriva el techo de las barras del
   clientHeight del chart menos la leyenda más alta => sigue dando --barra-zona. */
.barra-chart {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    --barra-zona: 4.5rem;
    height: auto;
}
.barra-chart-centrada { justify-content: center; }
.barra-item {
    display: grid;
    grid-template-rows: var(--barra-zona) auto;
    align-items: end;
    justify-items: center;
}
.barra {
    width: 2.5rem;
    height: 0;
    border-radius: 0.1875rem 0.1875rem 0 0;
    transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.barra-control  { background: rgba(29,27,22,0.15); }
.barra-dosis-1  { background: var(--color-tierra); }
.barra-dosis-2  { background: var(--color-verde); }

/* ============================================
   ENSAYOS — sidebar layout
   ============================================ */
.ensayos-layout {
    display: flex;
    gap: 3.5rem;
    align-items: flex-start;
}
.ensayos-sidebar {
    width: 18rem;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--nav-height) + 2.5rem);
}
.ensayos-resultados { flex: 1; min-width: 0; }
.ensayos-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ensayos-sidebar-titulo {
    font-size: var(--font-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(29,27,22,0.4);
}
.filtro-bloque { margin-bottom: 1.25rem; }
.filtro-sidebar-label {
    display: block;
    font-size: var(--font-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(29,27,22,0.45);
    margin-bottom: 0.375rem;
}
.filtro-sidebar-select { width: 100%; }
.btn-limpiar-filtros {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-tierra);
    opacity: 0.7;
    transition: opacity var(--ease-fast);
}
.btn-limpiar-filtros:hover { opacity: 1; text-decoration: underline; }
.titulo-grupo-ensayo {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.625rem;
}
/* Primera tarjeta de un cultivo nuevo: arranca en columna 1 (salto de fila) y
   se separa un poco de las tarjetas del cultivo anterior. */
.ensayo-celda--nuevo-grupo {grid-column-start: 1;/* margin-top: 2rem; */}
.acciones-ensayo { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; margin-top: 0.75rem; }
.acciones-ensayo .enlace-ver {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.enlace-ver-sutil { color: rgba(29,27,22,0.4); border-color: rgba(29,27,22,0.2); }

/* Tarjeta de ensayo — compacta, soporta hasta 5 barras */
.tarjeta-ensayo { padding: 1.25rem 1.25rem; }
.tarjeta-ensayo .titulo-ensayo { font-size: 0.8125rem; line-height: 1.35; }
.tarjeta-ensayo .barra-chart { gap: 0.4rem; --barra-zona: 3.75rem; }
.tarjeta-ensayo .barra { width: 1.75rem; }
.tarjeta-ensayo .barra-item p { font-size: 0.625rem; text-align: center; line-height: 1.15; }

/* Bloque CTA del producto filtrado — al pie del sidebar, separado de "Limpiar filtros" */
.ensayo-producto-cta {
    position: relative;
    display: block;
    margin-top: 2.5rem;
    min-height: 9rem;
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}
.ensayo-producto-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(29,27,22,0.35) 0%, rgba(29,27,22,0.85) 100%);
}
.ensayo-producto-cta-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.125rem;
    height: 100%;
    justify-content: flex-end;
    min-height: 9rem;
}
.ensayo-producto-cta-volanta {
    font-size: var(--font-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-verde);
}
.ensayo-producto-cta-nombre {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-crema);
    line-height: 1.2;
}
.ensayo-producto-cta-link {
    margin-top: 0.375rem;
    font-size: var(--font-boton);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(252,249,246,0.75);
    transition: color var(--ease-fast);
}
.ensayo-producto-cta:hover .ensayo-producto-cta-link { color: var(--color-crema); }
.ensayos-vacio {
    font-size: var(--font-sm);
    color: rgba(29,27,22,0.45);
    padding: 3rem 0;
    text-align: center;
}
@media (max-width: 1023px) {
    .ensayos-sidebar { width: 14rem; }
}
@media (max-width: 767px) {
    .ensayos-layout { flex-direction: column; gap: 2rem; }
    .ensayos-sidebar { width: 100%; position: static; }
}


/* ============================================
   SPECIAL COMPONENTS
   ============================================ */

/* Volanta hero hidden */
.volanta-hero { display: none; }

/* Stretched-link cards — ::after posicionado relativo a .tarjeta-producto (que ya tiene position:relative) */
.tarjeta-producto .enlace-ver::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Imagen decorativa de producto */
.tarjeta-deco-img {
    position: absolute;
    right: -20%;
    top: 50%;
    transform: translateY(-50%);
    height: 80%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.9;
    transition: right var(--ease-base), opacity var(--ease-base);
    z-index: -1;
}
.tarjeta-producto:hover .tarjeta-deco-img {
    right: -15%;
    /* opacity: 0.3; */
}

.tarjeta-articulo { position: relative; }
.tarjeta-articulo-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Marquee galería */
.marquee-galeria {
    overflow: hidden;
    width: 100%;
    margin-top: 0;
}
.marquee-track {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    will-change: transform;
}
.marquee-item {
    height: 16rem;
    width: auto;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
}
.marquee-item img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}
/* Algunas, esparcidas, en proporción cuadrada (recorta con cover) */
.marquee-item-cuadrada { aspect-ratio: 1 / 1; }
.marquee-item-cuadrada img { width: 100%; }

/* ============================================
   #NOSOTROS — layout editorial (rediseño)
   ============================================ */
/* --- Cabecera: título (izq) + manifiesto verde flotante (der) + ticker --- */
.nosotros-cabecera { position: relative; }
.nosotros-intro { position: relative; z-index: 2; }
@media (min-width: 64rem) {
    .nosotros-intro-texto { max-width: 60%; }
}
.nosotros-intro-bajada {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(29,27,22,0.62);
    margin-top: 1.5rem;
    max-width: 40rem;
}

/* Panel verde flotante con el manifiesto (la caja va en el inner; el outer
   posiciona y recibe el parallax leve para no pisar la animación de entrada) */
.nosotros-manifiesto-flotante-inner {
    background: var(--color-verde);
    color: var(--color-oscuro);
    border-radius: 0.75rem;
    padding: 3.5rem 3rem;
}
/* Volanta "MANIFIESTO" arriba, centrada, en blanco */
.nosotros-manifiesto-volanta {
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}
/* Comilla decorativa */
.nosotros-manifiesto-comilla {
    display: none;
    text-align: center;
    font-size: 4rem;
    line-height: 0.6;
    font-weight: 700;
    color: #fff;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}
.nosotros-manifiesto-flotante-texto {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.5;
    font-weight: 200;
    text-align: center;
    text-wrap-style: pretty;
}
.nosotros-manifiesto-flotante-texto:before,.nosotros-manifiesto-flotante-texto:after {
    content:"«";color:white;
}
.nosotros-manifiesto-flotante-texto:after {
    content:"»";
}
.nosotros-manifiesto-flotante-texto strong { font-weight: 700; }
@media (min-width: 64rem) {
    /* flota a la derecha, en el blanco del titular, pisando ~media altura del ticker */
    .nosotros-manifiesto-flotante {
        position: absolute;
        z-index: 5;
        bottom: 22rem;   /* borde inferior ~en la mitad del ticker (~28rem de alto) */
        right: max(var(--contenedor-px), calc((100vw - var(--contenedor-max)) / 2 + var(--contenedor-px)));
        width: min(20rem, 38vw);
        will-change: transform;
    }
}
@media (max-width: 63.999rem) {
    /* en mobile fluye entre el título y el ticker (el outer no afecta layout
       ni recibe el parallax) */
    .nosotros-manifiesto-flotante { display: contents; }
    .nosotros-manifiesto-flotante-inner { margin: 2rem var(--contenedor-px) 2.5rem; }
}

/* --- Nuestro nombre (centrado) --- */
.nosotros-nombre { max-width: 52rem; }
.nosotros-lead-centro {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(29,27,22,0.62);
    margin-top: 1.5rem;
}
.nosotros-lead-centro strong { color: var(--color-oscuro); font-weight: 600; }

/* --- Visión / Propósito: foto (bordes sup. redondeados) + panel con tabs --- */
.nosotros-vp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (min-width: 48rem) {
    .nosotros-vp-grid {grid-template-columns: 1fr 1fr;gap: 2.5rem;min-height: 25rem;}
}
.nosotros-vp-foto {
    position: relative;
    overflow: hidden;
    min-height: 22rem;
}
/* En mobile el contenedor toma la proporción 16:9 de a.png → cover no la corta */
@media (max-width: 47.999rem) {
    .nosotros-vp-foto { min-height: 0; aspect-ratio: 16 / 9; }
}
.nosotros-vp-foto-bg {
    position: absolute;
    inset: 0;                 /* imagen plana, ocupa el área completa (sin parallax) */
    background-size: cover;
    background-position: center;
}
.nosotros-vp-panel {
    background: var(--color-crema-suave);
    border-radius: 0.75rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.nosotros-vp-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(29,27,22,0.1);
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: space-around;
}
.nosotros-vp-texto {
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 300;
    color: rgba(29,27,22,0.62);
}
.nosotros-vp-texto + .nosotros-vp-texto { margin-top: 1rem; }
.nosotros-vp-texto strong { color: var(--color-oscuro); font-weight: 600; }

/* --- Historia: ken burns full-bleed a la derecha + contenido en caja --- */
.nosotros-historia {
    position: relative;
    overflow: hidden;
    padding-top: var(--seccion-py);
    padding-bottom: var(--seccion-py);
}
.nosotros-historia-kb {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 40%;
    z-index: 0;
    overflow: hidden;
}
.nosotros-kb-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    /* SÓLO la opacidad va por transición (fundido). El zoom es una animación
       unidireccional (abajo) que el JS aplica/reinicia al activar; así la
       imagen saliente sigue ampliando mientras se funde y nunca se achica. */
    transition: opacity 1.8s ease;
}
.nosotros-kb-img.is-active { opacity: 1; }
/* Zoom one-way; el JS la asigna inline con `forwards` para que no resetee la
   escala al quitar .is-active (sólo se reinicia al reactivar la imagen). */
@keyframes nosotros-kb-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
/* Funde el borde izquierdo del ken burns con el crema */
.nosotros-historia-kb-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-crema) 0%, rgba(252,249,246,0) 20%);
}
.nosotros-historia-inner { position: relative; z-index: 1; }
/* Salto de línea que sólo aplica en mobile (ver bloque RESPONSIVE) */
.br-solo-mobile { display: none; }
@media (min-width: 64rem) {
    .nosotros-historia-titulo {max-width: 75%;}   /* desborda un poco sobre la foto */
    .nosotros-historia-inner .nosotros-parrafo,
    .nosotros-historia-inner .nosotros-hitos { max-width: 46%; }   /* en caja, fuera de la foto */
}
@media (max-width: 63.999rem) {
    /* mobile: ken burns como banner arriba; contenido en flujo normal */
    .nosotros-historia-kb { position: relative; left: 0; height: 20rem; margin-bottom: 2rem; }
    .nosotros-historia-kb-fade { display: none; }
}

/* Tipografía unificada del bloque */
.nosotros-volanta {
    font-size: var(--font-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-tierra);
    margin-bottom: 0.85rem;
}
.nosotros-parrafo {
    font-size: 1.0625rem;
    line-height: 1.7;
    font-weight: 300;
    color: rgba(29,27,22,0.62);
    margin: 1.1rem 0;
}
.nosotros-parrafo strong { color: var(--color-oscuro); font-weight: 600; }

/* Hitos (ex línea de tiempo) — grilla de tarjetas, conservando imágenes */
.nosotros-hitos {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 30rem) {
    .nosotros-hitos { grid-template-columns: repeat(3, 1fr); }
}
.nosotros-hito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    border: 0.0625rem solid rgba(29,27,22,0.1);
    border-radius: 0.75rem;
}
.nosotros-hito-imgs { display: inline-flex; }
.nosotros-hito-imgs img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.nosotros-hito-imgs img + img { margin-left: -0.45rem; }
.nosotros-hito-anio { font-weight: 800; font-size: 1.0625rem; color: var(--color-tierra); }
.nosotros-hito-label { font-weight: 500; font-size: 0.9375rem; color: rgba(29,27,22,0.7); }

/* Valores — tipografía unificada, iconos preservados */
.nosotros-valores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 48rem) {
    .nosotros-valores-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Valores centrados (cada uno en su columna), tanto en escritorio como mobile */
.nosotros-valor { text-align: center; }
.nosotros-valor-icono { width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; }
.nosotros-valor-titulo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-oscuro);
    margin-bottom: 0.6rem;
}
.nosotros-valor .nosotros-parrafo { margin-bottom: 0; }

/* Hero video */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #140b07d6 0%, rgb(98 59 42 / 30%) 40%, rgb(98 59 42 / 8%) 100%);
}

/* Trama texture */
.trama::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--trama-opacity);
    background-image: repeating-linear-gradient(
        -45deg,
        #623B2A 0, #623B2A 0.0625rem,
        transparent 0, transparent 50%
    );
    background-size: var(--trama-size) var(--trama-size);
    pointer-events: none;
}

/* Manifiesto per-line text reveal */
.manifiesto-linea {
    font-weight: 600;
    font-style: normal;
    line-height: 1.25;
    margin: 0;
    background: linear-gradient(
        to right,
        rgba(252,249,246,1) 50%,
        rgba(252,249,246,0.3) 50%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.manifiesto-linea.visible {
    background-position: 0 0;
}

/* Subscription block */
.suscripcion {border-radius: 1.5rem !important;overflow: hidden;background: var(--color-tierra);}
/* En mobile el input y el botón van en filas distintas (aplica a _cultivando y _articulo) */
@media (max-width: 767px) {
    .form-suscripcion { flex-direction: column; }
}

/* "Trabajá con nosotros" — fondo con foto (sin parallax). Tamaños alineados
   con el zócalo "Suscribite" de _cultivando (más chico que antes). */
.suscripcion-trabaja.suscripcion {
    background-image: url('/img/teambg.jpg');
    background-size: cover, cover;
    background-position: 0% 70%;
    background-repeat: no-repeat, no-repeat;
    padding: 3.25rem;
}
.suscripcion-trabaja .titulo-suscripcion { font-size: 1.6rem; margin-bottom: 0.5rem; }
.suscripcion-trabaja .bajada-suscripcion { font-size: 0.875rem; max-width: 30rem; }
.suscripcion-trabaja .boton-trabaja { font-size: var(--font-boton); padding: var(--boton-py) var(--boton-px); }
/* En mobile: centrar todo y dar más peso al párrafo */
@media (max-width: 63.999rem) {
    .suscripcion-trabaja { text-align: center; }
    .suscripcion-trabaja .bajada-suscripcion {font-weight: 400;margin-inline: auto;color: white;}
    .suscripcion-trabaja > div:last-child { justify-content: center; }
}


/* ============================================
   FOOTER
   ============================================ */
.footer-nuevo {
    background: var(--color-tierra-dark);
    color: var(--color-crema);
    border-top: 0.0625rem solid rgba(252,249,246,0.05);
}
.footer-link {
    color: rgba(252,249,246,0.4);
    font-size: var(--font-parrafo-sm);
    font-weight: 300;
    text-decoration: none;
    transition: color var(--ease-fast);
}
.footer-link:hover { color: var(--color-crema); }
.footer-link-verde:hover { color: var(--color-verde); }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
}
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand .footer-descripcion,
.footer-brand .footer-direccion { margin-left: auto; margin-right: auto; }
.footer-redes-iconos { justify-content: center; }
@media (min-width: 64rem) {
    .footer-grid {
        grid-template-columns: 1fr 2fr;
        align-items: start;
        text-align: left;
    }
    .footer-brand { align-items: flex-start; }
    .footer-brand .footer-descripcion,
    .footer-brand .footer-direccion { margin-left: 0; margin-right: 0; }
    .footer-redes-iconos { justify-content: flex-start; }
}
.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 40rem) {
    .footer-nav-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
    .footer-nav-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
/* En mobile se ocultan las columnas de sitemap (Nosotros/Productos/Estrategias/Cultivando) */
@media (max-width: 47.9375rem) {
    .footer-nav-grid { display: none; }
}
.footer-bottom { text-align: center; }
@media (min-width: 48rem) {
    .footer-bottom { text-align: left; }
}
.footer-titulo-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--ease-fast);
}
.footer-titulo-link:hover { color: var(--color-verde); }
.footer-descripcion { color: rgba(252,249,246,0.5); }
.footer-tagline { font-size: 1rem; letter-spacing: 0.01em; }
.footer-tagline-bold { font-weight: 700; color: rgba(252,249,246,0.55); }
.footer-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(252,249,246,0.06);
    color: rgba(252,249,246,0.6);
    transition: background var(--ease-fast), color var(--ease-fast);
}
.footer-icono:hover {
    background: var(--color-verde);
    color: var(--color-tierra-dark);
}
.footer-idiomas { gap: 0.25rem; }
.footer-idioma {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: transparent;
    border: 0;
    color: rgba(252,249,246,0.35);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color var(--ease-fast), background var(--ease-fast);
}
.footer-idioma:hover { color: rgba(252,249,246,0.7); }
.footer-idioma-activo {
    color: var(--color-verde);
    background: rgba(206,220,0,0.08);
}
.footer-bandera { width: 1.05rem; height: 1.05rem; object-fit: contain; display: block; }
.footer-idioma-codigo { line-height: 1; }

/* Ocultar barra de Google Translate */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}

/* Badge "¡Nuevo!" en tarjeta destacada */
.badge-nuevo {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    background: var(--color-verde);
    color: var(--color-tierra-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    text-transform: uppercase;
}


/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.animar {
    opacity: 0;
    transform: translateY(1.875rem);
    transition: opacity var(--ease-enter), transform var(--ease-enter);
}
.animar.visible { opacity: 1; transform: translateY(0); }

.animar-izq {
    opacity: 0;
    transform: translateX(-2.5rem);
    transition: opacity var(--ease-enter), transform var(--ease-enter);
}
.animar-izq.visible { opacity: 1; transform: translateX(0); }

.animar-der {
    opacity: 0;
    transform: translateX(2.5rem);
    transition: opacity var(--ease-enter), transform var(--ease-enter);
}
.animar-der.visible { opacity: 1; transform: translateX(0); }

.animar-escala {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--ease-enter), transform var(--ease-enter);
}
.animar-escala.visible { opacity: 1; transform: scale(1); }

/* Stagger text characters */
.stagger-word {
    display: inline-block;
    white-space: nowrap;
}
.stagger-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.25rem);
    filter: blur(4px);
    transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
.stagger-char.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-char-space {display: inline-block;width: 0.15em;}


/* ============================================
   PRODUCT CATALOG CARDS
   ============================================ */
.card-catalogo {
    background: white;
    border: 0.0625rem solid rgba(29,27,22,0.08);
    border-radius: 1em;
    overflow: hidden;
    cursor: pointer;
}
.card-catalogo-img-wrap {
    width: 100%;
    height: 11rem;
    overflow: hidden;
    background: #f0ece7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease-base);
}
.card-catalogo-img {
    width: 90%;
    height: 80%;
    object-fit: contain;
    /* padding: 1rem; */
    transition: transform var(--ease-base);
}
.card-catalogo:hover .card-catalogo-img { transform: scale(1.06); }
.card-catalogo:hover .card-catalogo-img-wrap {
    background: var(--prod-color);
}
.card-catalogo-body { padding: 1.25rem; }
.card-catalogo-hover-content {
    /* Always visible */
}
.card-catalogo-hover-content .enlace-ver {
    transition: color var(--ease-fast), border-color var(--ease-fast);
}
.card-catalogo:hover .card-catalogo-hover-content .enlace-ver {
    color: var(--color-oscuro);
    border-bottom: 0.0625rem solid var(--color-oscuro);
}

/* Producto detail */
.producto-detalle-img {
    max-height: 22rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.producto-donut { width: 5.5rem; height: 5.5rem; }

/* Dosage table */
.tabla-dosis-wrap { overflow: hidden; }
.tabla-dosis { border-collapse: collapse; width: 100%; font-size: var(--font-sm); }
/* Nota editable al pie de la tabla de dosis (admin → "Nota al pie de la tabla") */
.tabla-dosis-nota {
    margin: 1rem 0 0;
    max-width: 42rem;
    text-align: left;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: rgba(29,27,22,0.5);
}
.tabla-dosis-nota p,
.tabla-dosis-nota ul,
.tabla-dosis-nota ol { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 0.5rem; }
.tabla-dosis-nota ul { list-style: disc; padding-left: 1.25rem; }
.tabla-dosis-nota ol { list-style: decimal; padding-left: 1.5rem; }
.tabla-dosis-nota li { margin-bottom: 0.25rem; }
.tabla-dosis-nota > :last-child { margin-bottom: 0; }
.tabla-dosis th {
    padding: 0.75rem 0;
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(29,27,22,0.45);
    text-align: left;
    background: transparent;
    border-bottom: 0.0625rem solid rgba(29,27,22,0.07);
}
.tabla-dosis td {
    padding: 0.875rem 0;
    color: rgba(29,27,22,0.65);
    font-weight: 300;
    border-bottom: 0.0625rem solid rgba(29,27,22,0.06);
    vertical-align: middle;
}
.tabla-dosis tr:last-child td { border-bottom: none; }
.tabla-cultivo-cell { display: flex; align-items: center; gap: 0.75rem; }
.tabla-cultivo-icono {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Nutrient requirements */
.nutriente-fila {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.4s ease calc(var(--ni, 0) * 75ms),
                transform 0.4s ease calc(var(--ni, 0) * 75ms);
}
.nutriente-fila.visible {
    opacity: 1;
    transform: translateY(0);
}
.nutriente-data {
    flex: 1;
    min-width: 0;
}
.nutriente-fila-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nutriente-barra-track {
    flex: 1;
    height: 0.2rem;
    background: rgba(29,27,22,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.nutriente-barra-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
}
.nutriente-dosis {
    font-size: var(--font-sm);
    color: rgba(29,27,22,0.45);
    white-space: nowrap;
    min-width: 5rem;
    text-align: right;
}
.nutriente-badge-micro { background: var(--color-verde); color: var(--color-oscuro); }


/* ============================================
   SCROLL-TO-TOP
   ============================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 45;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-tierra);
    color: var(--color-crema);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    pointer-events: none;
}
.scroll-top-btn:hover { background: var(--color-tierra-dark); }
.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    :root {
        --contenedor-px:   1rem;
        --seccion-py:      4rem;
        --seccion-py-sm:   3rem;
        --stack-height:    16.25rem;   /* 260px */
        --section-separator: 20vh;
        --card-px:         1.25rem;
        --card-py:         1.25rem;
        --card-px-sm:      1rem;
        --card-py-sm:      1rem;
    }
    /* .timeline responsive movido a su bloque propio */
    .tab-btn  { padding: var(--tab-py) 1rem; }
    .estrategia-item { top: 5rem; }
    .estrategia-card {
        min-height: 20rem;
        border-radius: 1.5em;
    }
    .estrategia-logo { height: 3em; }
    .estrategia-texto { font-size: 1rem; }

    /* #NOSOTROS — ticker: fotos más chicas (las alturas inline se pisan acá) */
    .marquee-track { gap: 0.5rem; }
    .marquee-item { height: 11rem !important; }

    /* #NOSOTROS — saltos de línea sólo-mobile de los titulares */
    .br-solo-mobile { display: inline; }

    /* #NOSOTROS — achica apenas el espacio entre secciones */
    .seccion-nosotros .pt-24 { padding-top: 4.5rem; }
    .seccion-nosotros .pt-16 { padding-top: 3rem; }
    .seccion-nosotros .pb-16 { padding-bottom: 3rem; }
    .seccion-nosotros .pb-20 { padding-bottom: 3.5rem; }
    .seccion-nosotros .pb-24 { padding-bottom: 4.5rem; }

    /* HOME — menos aire blanco entre las cifras y "Cultivando conocimientos" */
    .seccion-home-cultivando.mt-32 { margin-top: 3rem; }
    .seccion-home-cultivando.py-24 { padding-top: 3rem; }

    /* Evita scroll horizontal en mobile: la sección de estrategias es overflow:visible
       (por el sticky), así que el translateX de los reveals se desbordaba fuera del
       viewport. En mobile los reveals entran sólo en vertical (sin desplazamiento en X). */
    .animar-izq, .animar-der { transform: translateY(1.5rem); }
}


/* ============================================
   FAMILIAS INTRO — DESCARTADO
   Conservado como comentario para referencia futura.
   ============================================ */
/*
.familias-stage { ... }
.familias-canvas, .familias-bg-img { ... }
.familias-canvas { ... }
.familias-bg-img { ... }
.familias-stage.familias-revealed .familias-bg-img { ... }
.familias-stage.tiene-activo .familias-bg-img,
.familias-stage.tiene-activo .familias-canvas { ... }
.familias-titulos { ... }
.familias-sombras { ... }
.familia-sombra { ... }
@keyframes familia-sombra-entrada { ... }
.familia-sombra.visible { ... }
.familia-sombra-1 … -6 { ... }
.familia-sombra.familia-sombra-elevada { ... }
.familias-productos { ... }
.familia-item { ... }
.familia-img { ... }
.familia-info { ... }
.familia-titulo { ... }
.familia-volanta { ... }
.familia-cta { ... }
--- Archivo completo del CSS de familias en commit anterior ---
*/


/* ============================================
   GRILLA DE PRODUCTOS (reemplazo de familias)
   ============================================ */

/* Colores de resalte estandarizados por familia.
   Se reusan en #inicio (hover de tarjetas) y en #productos (tarjeta encendida
   + paleta de la grilla de productos). Editar acá cambia ambos lugares. */
/* --prod-color: color de fondo/hover de la familia (tinte de tarjeta).
   --fam-color : color PRINCIPAL de la familia (botones de producto).
   TODO marca: confirmar/ajustar los hex de --fam-color con la paleta oficial. */
.fam-wayra { --prod-color: #b7c400; --fam-color: #7f4786; }
.fam-alpa  { --prod-color: #b7c400; --fam-color: #453028; }
.fam-micro { --prod-color: #b7c400; --fam-color: #d89822; }
.fam-wanla { --prod-color: #b7c400; --fam-color: #ce4e27; }
.fam-safi  { --prod-color: #b7c400; --fam-color: #186ea9; }
.fam-bio   { --prod-color: #b7c400; --fam-color: #4f9742; }

.grilla-familias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 0 0;
    border-radius: var(--card-radius);
    background: var(--color-crema-suave);
    border: 1px solid rgba(29,27,22,0.06);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-height: min(26rem, 36vw);
    isolation: isolate;  /* contiene los z-index internos */
    transition: background 0.2s ease-out;
    /* background: var(--prod-color); */
}

/* Fondo con color + trama, visible solo en hover */
.prod-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    /* background-color: var(--prod-color, #888); */
    background-image: url('/img/trama.svg');
    background-size: 100px auto;
    background-repeat: repeat;
    /* Scroll vertical infinito de la trama */
    animation: prod-trama-scroll 8s linear infinite;
    /* animation-play-state: paused; */
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes prod-trama-scroll {
    to { background-position-y: -158px; }
}

.prod-card:hover {
    background: var(--prod-color);
}

.prod-card:hover .prod-card-bg,
.prod-card:focus-visible .prod-card-bg {
    opacity: 0.2;
    animation-play-state: running;
}

/* Volanta (categoría) — visible en reposo, oculta en hover */
.prod-card-volanta {
    position: absolute;
    z-index: 2;
    top: 1.75em;
    /* font-size: var(--font-volanta-card, 0.6875rem); */
    font-weight: 700;
    letter-spacing: var(--letter-volanta-card, 0.2em);
    text-transform: uppercase;
    color: var(--color-tierra);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    align-self: flex-start;
    margin-bottom: auto;
    width: 100%;
    text-align: center;
}
.prod-card:hover .prod-card-volanta,
.prod-card:focus-visible .prod-card-volanta {
    opacity: 0;
    transform: translateY(-0.5rem);
}

/* CTA — oculto en reposo, aparece en hover */
.prod-card-cta {
    position: relative;
    z-index: 2;
    /* font-size: var(--font-boton, 0.6875rem); */
    font-weight: 700;
    letter-spacing: var(--letter-boton, 0.15em);
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.4s 0.06s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s 0.06s cubic-bezier(0.22, 1, 0.36, 1);
    align-self: flex-start;
    position: absolute;
    top: 1.5em;
    left: 0;
    right: 0;
    text-align: center;
}
.prod-card:hover .prod-card-cta,
.prod-card:focus-visible .prod-card-cta {
    opacity: 1;
    transform: translateY(0);
}

/* Imagen del producto */
.prod-card-img {
    position: relative;
    z-index: 1;
    width: 60%;
    /* max-width: 14rem; */
    height: auto;
    display: block;
    margin: 0 auto;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.prod-card:hover .prod-card-img,
.prod-card:focus-visible .prod-card-img {
    transform: scale(1.1);
}

/* Hover out: transiciones de salida coordinadas */
.prod-card:not(:hover) .prod-card-bg {
    transition: opacity 0.55s 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-card:not(:hover) .prod-card-cta {
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-card:not(:hover) .prod-card-volanta {
    transition: opacity 0.35s 0.12s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-card:not(:hover) .prod-card-img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Intro animation para las tarjetas de producto ---- */
.grilla-familias {
    perspective: 1200px;
}
.prod-card-intro {
    opacity: 0;
    transform: scale(0.88) rotateX(8deg) translateY(2.5rem);
    transform-origin: 50% 100%;
}
.prod-card-intro.prod-visible {
    opacity: 1;
    transform: scale(1) rotateX(0deg) translateY(0);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--prod-i, 0) * 100ms);
}
/* La imagen y la volanta arrancan con su propia micro-animación escalonada */
.prod-card-intro .prod-card-img {
    opacity: 0;
    transform: scale(0.92) translateY(1rem);
}
.prod-card-intro.prod-visible .prod-card-img {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--prod-i, 0) * 100ms + 150ms);
}
.prod-card-intro .prod-card-volanta {
    opacity: 0;
    transform: translateY(0.5rem);
}
.prod-card-intro.prod-visible .prod-card-volanta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--prod-i, 0) * 100ms + 250ms);
}

@media (max-width: 768px) {
    .grilla-familias {
        grid-template-columns: repeat(2, 1fr);
    }
    .prod-card {font-size:70%;height: 50vw;}
}


/* ============================================
   #PRODUCTOS — Selector de mercado ARG / UY
   ============================================ */
.mercado-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* gap: 0.25rem; */
    padding: 0;
    /* background: rgba(29,27,22,0.04); */
    /* border: 1px solid rgba(29,27,22,0.08); */
    /* border-radius: 999px; */
}
.mercado-opcion {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1em 0.7em;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--font-boton);
    font-weight: 700;
    letter-spacing: var(--letter-boton);
    text-transform: uppercase;
    color: rgba(29,27,22,0.5);
    transition: color var(--ease-base);
}
.mercado-opcion.mercado-activo { color: var(--color-crema); }
.mercado-bandera {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* Pill deslizante — posición/ancho seteados por JS */
.mercado-pill {
    position: absolute;
    z-index: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    width: 0;
    background: var(--color-verde-hover);
    border-radius: 999px;
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), width 0.45s cubic-bezier(0.34,1.56,0.64,1);
}


/* ============================================
   #PRODUCTOS — Grilla de familias (encendido)
   ============================================ */
.grilla-familias-sel {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3x2 en desktop */
    gap: 0.75rem;
}
.familia-sel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(29,27,22,0.08);
    border-radius: 1em;
    cursor: pointer;
    text-align: center;
    transition: transform var(--ease-base), box-shadow var(--ease-base),
                background var(--ease-base), border-color var(--ease-base),
                opacity 0.35s ease;
}
.familia-sel:hover { transform: translateY(-0.25rem); box-shadow: var(--card-shadow-hover); }
.familia-sel-img {
    width: 60%;
    height: 10em;
    object-fit: contain;
    transition: transform var(--ease-base);
}
.familia-sel:hover .familia-sel-img { transform: scale(1.06); }
.familia-sel-info { display: flex; flex-direction: column; gap: 0.1rem; }
.familia-sel-volanta { margin: 0; font-size: 0.58rem; transition: color var(--ease-base); }
.familia-sel-nombre {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-oscuro);
    transition: color var(--ease-base);
}
/* Estado encendido: usa el color estandarizado de la familia (.fam-{slug}) */
.familia-sel.familia-encendida {
    background: var(--prod-color);
    border-color: var(--prod-color);
    box-shadow: 0 0.5rem 1.5rem rgba(29,27,22,0.18);
    transform: translateY(-0.25rem);
}
.familia-sel.familia-encendida .familia-sel-volanta,
.familia-sel.familia-encendida .familia-sel-nombre { color: #fff; }
/* Las demás se atenúan cuando hay una encendida */
.familia-sel.familia-apagada { opacity: 0.5; }

/* No disponible en el mercado actual — animación lightweight + salida del layout */
.mercado-fuera { opacity: 0 !important; transform: scale(0.9) !important; pointer-events: none; }
.mercado-none { display: none !important; }


/* ============================================
   #PRODUCTOS — Detalle de familia
   ============================================ */
.seccion-productos-grilla { padding-top: 1rem; padding-bottom: var(--seccion-py); }
.seccion-productos-grilla[hidden] { display: none; }
.familia-detalle-titulo { line-height: 0.9; }
.seccion-productos-grilla.detalle-animando { animation: detalle-in 0.6s cubic-bezier(0.16,1,0.3,1); }
@keyframes detalle-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================
   #PRODUCTOS — Tarjeta de producto (diseño nuevo)
   ============================================ */
.card-producto-nueva {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 20em;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(29,27,22,0.08);
    border-radius: 1em;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.55s cubic-bezier(0.22,1,0.36,1);
}
.card-producto-nueva:hover { background: var(--prod-color); }
.cpn-bg {
    position: absolute; inset: 0; z-index: 0; opacity: 0;
    background-image: url('/img/trama.svg');
    background-size: 100px auto;
    background-repeat: repeat;
    animation: prod-trama-scroll 8s linear infinite;
    transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1);
}
.card-producto-nueva:hover .cpn-bg { opacity: 0.18; }
.cpn-familia {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-size: 0.58rem;
    transition: color 0.2s ease;
}
.card-producto-nueva:hover .cpn-familia {color: rgb(255 255 255 / 0%);}
.cpn-media {
    position: absolute;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 3.5em;
    left: 0;
    width: 100%;
}
.cpn-img {
    width: 50%;
    height: auto;
    max-height: 12em;
    object-fit: contain;
    transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
    will-change: transform;
}
.card-producto-nueva:hover .cpn-img {transform: translateY(-40%);}
.cpn-info {position: absolute;z-index: 2;text-align: center;bottom: 1.5em;left: 1em;right: 1em;transition: all 0.55s cubic-bezier(0.22,1,0.36,1);}
.cpn-nombre {
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-oscuro);
    transition: all 0.55s cubic-bezier(0.22,1,0.36,1);
}
.card-producto-nueva:hover .cpn-nombre { color: #fff; }
.cpn-hover {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.55s cubic-bezier(0.22,1,0.36,1);
}
.card-producto-nueva:hover .cpn-hover {max-height: 7rem;opacity: 1;}
.cpn-sinopsis {
    color: rgba(255,255,255,0.9);
    font-weight: 300; font-size: 0.78rem; line-height: 1.45;
    margin: 0.5rem 0 0.75rem;
}
.cpn-cta {
    display: inline-block; color: #fff;
    font-weight: 700; font-size: var(--font-boton);
    letter-spacing: var(--letter-boton); text-transform: uppercase;
}

@media (max-width: 600px) {
    .grilla-familias-sel { grid-template-columns: repeat(2, 1fr); }
    .familia-sel-img { height: 3.5rem; }
}

/* Tarjeta de producto en mobile (grilla a 2 columnas, <768px) */
@media (max-width: 767px) {
    .card-producto-nueva { min-height: 14em; }
    .card-producto-nueva:hover .cpn-img { transform: translateY(-100%); }
    .cpn-sinopsis { line-height: 1; }
}


/* ============================================
   #CULTIVANDO — Grilla de artículos (1º en 2x2)
   --------------------------------------------
   La tarjeta de noticia BASE (pequeña) se controla íntegramente en el
   bloque CARDS → `.tarjeta-articulo` (imagen, body, hover de título, etc.).
   Las variantes (doble/cuádruple = `.art-2x2`/`.tarjeta-articulo-destacada`)
   sólo pisan acá los mínimos selectores/atributos que cambian respecto de la base.
   ============================================ */
a.tarjeta-articulo { color: inherit; text-decoration: none; }
.grilla-articulos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5rem;
}

/* Variante BASE: preview oculta. Sólo la destacada la muestra. */
.preview-articulo { display: none; }

/* --- Override mínimo: tarjeta destacada (ocupa 2x2) --- */
.art-2x2 { grid-column: span 2; grid-row: span 2; }
.tarjeta-articulo-destacada .preview-articulo {display: block;font-size: 110%;}
.tarjeta-articulo-destacada .tarjeta-articulo-img {height: 15em !important;}
.tarjeta-articulo-destacada .titulo-articulo-destacada {
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.15;
}

@media (max-width: 900px) {
    /* Alto dinámico: cada tarjeta ocupa lo que necesita (sin espacio blanco vacío) */
    .grilla-articulos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .grilla-articulos .art-2x2 { grid-column: span 2; grid-row: span 1; }
    /* Unifica: la destacada sólo se diferencia por imagen y título un poco más grandes */
    .tarjeta-articulo-destacada .tarjeta-articulo-img { height: 12rem !important; }
    .tarjeta-articulo-destacada .preview-articulo { display: none; }
}
@media (max-width: 560px) {
    .grilla-articulos { grid-template-columns: 1fr; }
    .grilla-articulos .art-2x2 { grid-column: span 1; }
}


/* ============================================
   #ARTICULO — Vista de artículo ampliado
   ============================================ */
.contenedor-articulo { max-width: 56rem; }
/* Pisa el `py-48` (12rem) de Tailwind sólo abajo: el bloque de suscripción ya
   trae su propio mt-20 y quedaba demasiado aire antes del contacto/footer. */
.seccion.seccion-articulo-contenido { padding-bottom: 5rem; }
.articulo-head { text-align: center; margin-bottom: 2.5rem; }
.titulo-articulo-detalle {
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.05;
    margin: 0.5rem 0 1.25rem;
}
.articulo-meta {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 0.6rem;
    color: rgba(29,27,22,0.5);
    font-size: var(--font-sm);
}
.articulo-meta-autor {font-weight: 600;/* color: var(--color-tierra); */}
.articulo-meta-sep { opacity: 0.5; }
.articulo-figura { margin: 0 0 2.5rem; border-radius: 1.5em; overflow: hidden; }
.articulo-figura img {
    width: 100%; height: auto; max-height: 28rem;
    object-fit: cover; display: block;
}
.articulo-cuerpo {
    font-size: 85%;
    line-height: 1.8;
    color: rgba(29,27,22,0.78);
    font-weight: 300;
}
.articulo-cuerpo p { margin-bottom: 1.4rem; }
.articulo-cuerpo b,
.articulo-cuerpo strong { font-weight: 700; color: var(--color-oscuro); }
.articulo-cuerpo i,
.articulo-cuerpo em { font-style: italic; }
.articulo-cuerpo u { text-decoration: underline; }

/* Encabezados del texto enriquecido (TinyMCE: Heading 1–6) */
.articulo-cuerpo h1,
.articulo-cuerpo h2,
.articulo-cuerpo h3,
.articulo-cuerpo h4,
.articulo-cuerpo h5,
.articulo-cuerpo h6 {
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-oscuro);
    margin: 2.5rem 0 1rem;
}
.articulo-cuerpo h1 { font-size: 185%; }
.articulo-cuerpo h2 { font-size: 150%; }
.articulo-cuerpo h3 { font-size: 125%; }
.articulo-cuerpo h4 { font-size: 110%; }
.articulo-cuerpo h5,
.articulo-cuerpo h6 { font-size: 100%; font-weight: 700; }
.articulo-cuerpo :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }

/* Listas */
.articulo-cuerpo ul,
.articulo-cuerpo ol { margin: 0 0 1.4rem; padding-left: 1.5rem; }
.articulo-cuerpo ul { list-style: disc; }
.articulo-cuerpo ol { list-style: decimal; }
.articulo-cuerpo li { margin-bottom: 0.4rem; }
.articulo-cuerpo li > ul,
.articulo-cuerpo li > ol { margin: 0.4rem 0 0; }

/* Enlaces */
.articulo-cuerpo a {
    color: var(--color-tierra);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--ease-fast);
}
.articulo-cuerpo a:hover { color: var(--color-verde-hover); }

/* Cita */
.articulo-cuerpo blockquote {
    margin: 1.8rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 0.1875rem solid var(--color-verde);
    color: var(--color-oscuro);
    font-style: italic;
}

/* Imágenes embebidas */
.articulo-cuerpo img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1rem 0; }
.articulo-relacionados {
    margin-top: 4rem; padding-top: 3rem;
    border-top: 1px solid rgba(29,27,22,0.08);
}
.articulo-relacionados-titulo {
    margin-bottom: 2rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}


/* ============================================
   #CULTIVOS — Tarjetas de estrategia en grilla 2x2 fija
   (mismo diseño que #inicio, sin sticky/scroll)
   ============================================ */
.grilla-estrategias-cultivos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.estrategia-card-sm {
    max-width: 100%;
    margin: 0;
    min-height: 15rem;
    padding: 2em 1.75em;
}
.estrategia-card-sm .estrategia-logo { height: 3em; margin-bottom: 0.75rem; }
.estrategia-card-sm .estrategia-texto { font-size: 0.95rem; margin-bottom: 1rem; }
@media (max-width: 600px) {
    .grilla-estrategias-cultivos { grid-template-columns: 1fr; }
}


/* ============================================
   #PRODUCTO — Hero con parallax + grilla 2x2
   ============================================ */
/* ============================================
   HEADERS DE SECCIÓN — alturas estándar + contenido al pie
   (deja aire arriba para el navbar flotante)
   - home (#inicio): 100vh
   - #producto: 90vh
   - resto de headers: 50vh desktop / 90vh mobile
   ============================================ */
.header-seccion {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 66vh;
    overflow: hidden;
}
/* El hijo flex (.contenedor) tiene margin:0 auto y se encogería a su contenido
   (centrándose). Forzamos ancho completo para que su contenido quede a la izq. */
.header-seccion > *,
.producto-hero > .producto-hero-inner { width: 100%; }
/* Contenido del header por encima del fondo parallax + overlay */
.header-seccion > .contenedor { position: relative; z-index: 2; }

/* Fondo parallax reutilizable para headers oscuros (estrategias, sabiomaíz, …) */
.header-parallax-bg {
    position: absolute;
    left: 0; right: 0; top: -15%;
    height: 130%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    z-index: 0;
}
.header-parallax-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top,
        rgba(29,27,22,0.92) 0%,
        rgba(29,27,22,0.7) 55%,
        rgba(29,27,22,0.5) 100%);
}
@media (max-width: 47.9375rem) {
    .header-seccion { min-height: 90vh; }
    /* En mobile: sin parallax (el JS setea transform inline → lo pisamos con !important),
       imagen fija ocupando todo el header y anclada ~30% a la derecha del centro
       para que se vea más de la parte derecha de la foto. */
    .header-parallax-bg,
    .producto-hero-bg {
        top: 0;
        height: 100%;
        transform: none !important;
        background-position: 80% center;
    }
}

.producto-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-crema);
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.producto-hero-bg {
    position: absolute;
    left: 0; right: 0; top: -15%;
    height: 130%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    z-index: 0;
}
/* Fondo "video atado al scroll" (canvas sprite-sheet scrubbeado) — header alternativo */
.producto-hero-scrub-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
.producto-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(29,27,22,0.7) 0%,
        rgba(29,27,22,0.5) 45%,
        rgba(29,27,22,0.2) 100%);
}
/* Hero oscuro → la volanta va en verde (resto de colores claros más abajo) */
.producto-hero-info .volanta { color: var(--color-verde); }
.producto-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 7rem;
    padding-bottom: 3rem;
}
.producto-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    align-items: end;
}
@media (min-width: 64rem) {
    .producto-hero-grid { grid-template-columns: 3fr 2fr; gap: 4rem; }
}
.producto-hero-titulo {
    display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap;
    margin: 0.5rem 0 1.5rem;
}
.producto-nombre {
    font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.85;
    color: var(--color-crema);
}
.producto-variante {
    font-weight: 300; color: rgba(252,249,246,0.55);
    font-size: clamp(1.5rem, 3.5vw, 2.75rem); line-height: 1;
}
.producto-hero-parrafo {
    color: rgba(252,249,246,0.8); line-height: 1.7;
    margin-bottom: 1.25rem;
    font-size: var(--font-parrafo); font-weight: 300;
    max-width: 38rem;
}
.producto-hero-parrafo strong { color: var(--color-crema); font-weight: 600; }
.producto-hero-descargas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.producto-hero-img-wrap { display: flex; justify-content: center; }
.producto-hero-img {
    width: 100%;
    max-width: 50vw;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    filter: drop-shadow(0 1rem 2rem rgba(29,27,22,0.18));
}

/* Dos columnas: izquierda = Beneficios + Composición + Presentación apilados;
   derecha = Dosis sugerida sola (su tabla suele ser bastante más alta que los
   otros 3 módulos). Ambas columnas igualan alto por flex stretch, sin JS:
   si Dosis es más alta, los 3 de la izquierda se estiran para alcanzarla; si
   la pila izquierda es más alta, Dosis se estira. En mobile se apila todo. */
.producto-grid-modulos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.producto-modulos-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .producto-grid-modulos { flex-direction: row; align-items: stretch; }
    .producto-modulos-col-izq { flex: 1 1 0; }
    .producto-modulos-col-der { flex: 1 1 0; }
    /* Las dos columnas ya quedan del mismo alto por el stretch de arriba, pero
       eso estira la COLUMNA, no las tarjetas de adentro: sin este flex-grow,
       Dosis (única hija de su columna) conservaba su alto natural y quedaba
       corta. Aplica a ambos lados: los 3 de la izquierda reparten el sobrante
       cuando manda Dosis, y Dosis llena su columna cuando manda la izquierda. */
    .producto-modulos-col > .producto-modulo { flex: 1 1 auto; }
}
.producto-modulo {
    background: #fff;
    border: 1px solid rgba(29,27,22,0.08);
    border-radius: 1.25em;
    padding: 2rem;
    min-width: 0; /* evita desbordes del contenido en flex */
    display: flex;
    flex-direction: column;
}
@media (max-width: 767px) {
    /* CTA al pie: centrado en mobile (botón familia + acciones).
       Con `.seccion-producto` para ganarle en especificidad a justify-between/end de Tailwind. */
    .seccion-producto .producto-cta-pie { justify-content: center; }
    .seccion-producto .producto-cta-acciones { justify-content: center; width: 100%; }
    /* Módulos informativos más compactos en mobile */
    .producto-modulo { padding: 1.4rem; }
    .beneficio-item { font-size: 0.9rem; }
    /* Dosis: padding horizontal entre columnas + line-height más ajustado */
    .tabla-dosis { font-size: 0.8rem; line-height: 1.2; }
    .tabla-dosis th,
    .tabla-dosis td { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-right: 0.85rem; }
    .tabla-dosis th:last-child,
    .tabla-dosis td:last-child { padding-right: 0; }
}

/* Composición — grilla de donuts */
.composicion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    justify-items: center;
}
/* Más de 6 anillos → 4 por fila (con donuts un poco más chicos) */
.composicion-grid-4col {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.composicion-grid-4col .producto-donut { width: 4.25rem; height: 4.25rem; }
.composicion-donut-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}

/* Composición — barras horizontales (layout vigente; reemplaza los anillos).
   <6 elementos → 2 por fila; ≥6 → 3 por fila. */
.composicion-barras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.75rem;
}
.composicion-barras-3col { grid-template-columns: repeat(3, 1fr); }
.composicion-barra-item { min-width: 0; }
.composicion-barra-label {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(29,27,22,0.6);
    margin: 0 0 0.4rem;
}
.composicion-barra-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.composicion-barra {
    flex: 1;              /* track de ancho fijo dentro de la celda */
    min-width: 0;
    height: 1em;
    background: rgba(29,27,22,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.composicion-barra-fill {
    display: block;
    height: 100%;
    background: var(--color-tierra);
    border-radius: inherit;
}
.composicion-barra-pct {
    flex-shrink: 0;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-tierra);
}
/* En pantallas muy angostas, siempre 2 columnas (evita que se apriete/desborde) */
@media (max-width: 480px) {
    .composicion-barras,
    .composicion-barras-3col { grid-template-columns: repeat(2, 1fr); }
}

/* Presentación — estática (máx. 2 ítems); iconos negros mostrados en gris */
.presentacion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;       /* centra los iconos verticalmente */
    justify-content: center;
    flex: 1;                   /* ocupa el alto sobrante del módulo */
    margin: 0;
}
/* Módulo de Presentación: menos aire arriba y abajo que el resto (los iconos
   ya traen su propio alto y quedaba demasiado alto el bloque). */
.producto-modulo-presentacion { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.presentacion-item {
    flex: 0 0 auto; width: 8rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    text-align: center;
}
.presentacion-img {height: 8rem;width: auto;object-fit: contain;opacity: 0.6;}
.presentacion-label {
    font-size: 0.9375rem;   /* igual que el texto de los demás módulos (beneficios) */
    font-weight: 400;
    color: rgba(29,27,22,0.7);
}

/* Beneficios — lista compacta (antes el espacio entre bullets lo daba el
   `space-y-4` de Tailwind = 1rem, demasiado aire). */
[data-beneficios] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
/* Stagger de entrada */
.beneficio-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(29,27,22,0.7);
    font-weight: 300;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
/* Bullet centrado con la PRIMERA línea del texto: el margen superior es la
   mitad del espacio sobrante de la caja de línea (line-height 1.65 - bullet).
   Al ser em, se recalcula solo si cambia el font-size del ítem (p.ej. mobile).
   El `span:first-child` cubre además el markup viejo del single-page, que trae
   el bullet con clases Tailwind (le gana en especificidad al `mt-1.5`). */
.beneficio-item > .beneficio-bullet,
.beneficio-item > span:first-child {
    width: 0.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-tierra);
    margin-top: calc((1.65em - 0.375rem) / 2);
}
.beneficio-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SABIOMAÍZ — sección propia
   ============================================ */

/* Hero oscuro — stack vertical, alineado izq */
.sabiomaiz-hero-logo {
    display: block;
    width: auto;
    height: 5em;
    object-fit: contain;
    opacity: 0.9;
    margin: 1.25rem 0 1.5rem;
}
@media (max-width: 767px) {
    .sabiomaiz-hero-logo { height: 6rem; }
}
.sabiomaiz-hero-titulo { font-size: calc(var(--font-titulo-modulo) * 0.8); }

/* Stats: siembra · rinde · ciclo */
.sabiomaiz-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
}
.sabiomaiz-stat {
    flex: 0 0 auto;
    text-align: left;
    padding: 0 2.75rem;
}
.sabiomaiz-stat:first-child { padding-left: 0; }
.sabiomaiz-stat + .sabiomaiz-stat {
    border-left: 0.0625rem solid rgba(29,27,22,0.08);
}
.sabiomaiz-stat-label {
    font-size: var(--font-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(29,27,22,0.4);
    margin-bottom: 0.625rem;
}
.sabiomaiz-stat-valor {
    font-size: 150%;
    font-weight: 600;
    color: var(--color-oscuro);
    line-height: 1;
}
@media (max-width: 639px) {
    .sabiomaiz-stats { flex-direction: column; gap: 1.5rem; }
    .sabiomaiz-stat { text-align: left; padding: 0; }
}

/* Etapas logo + grilla */
.sabiomaiz-etapas-header { display: flex; align-items: center; gap: 1rem; }
.sabiomaiz-etapas-logo { height: 3.75rem; width: auto; }
.grilla-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}
.etapa-codigo {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-tierra);
    margin-bottom: 0.375rem;
}

/* ============================================
   CIERRE DE SECCIÓN (#cultivo) — amanecer + productos en perspectiva
   Reemplaza el viejo CTA oscuro (.seccion-sabiomaiz-cta).
   ============================================ */
.seccion-sabiomaiz-cierre {
    position: relative;
    overflow: hidden;
    background: #fff;                 /* base blanca mientras carga la imagen */
    padding-top: 0rem;
    min-height: 27rem;
}

/* Amanecer: la imagen ya degrada a blanco arriba/izq y trae el amanecer abajo-der.
   Anclada abajo y movida por el parallax (sale desde abajo). Sin overlay ni fade. */
.cierre-amanecer {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;                       /* anclado al fondo: el parallax nunca deja franja blanca abajo */
    height: 130%;                    /* overhang hacia arriba para el recorrido (acotado) del parallax */
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    opacity: 0.6;                    /* atenúa el fondo (queda como overlay blanco sobre la base) */
    z-index: 0;
    pointer-events: none;
}

.cierre-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);  /* texto izq · productos der (~57%) */
    align-items: end;
    gap: 2rem;
    min-height: inherit;
}
/* Sin productos: una sola columna, texto (titulo/bajada/boton) centrado */
.cierre-inner--solo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
.cierre-inner--solo .cierre-texto {
    max-width: 40rem;
    text-align: center;
}

/* Texto: todo alineado a la izquierda, centrado vertical */
.cierre-texto {
    align-self: center;
    padding: 1rem 0 2rem;
    max-width: 28rem;
}
.cierre-titulo {
    color: var(--color-tierra);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.cierre-bajada {
    color: rgba(29, 27, 22, 0.72);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}
.cierre-boton { display: inline-flex; }

/* Productos: fila en perspectiva anclada abajo, crecen hacia la derecha, se solapan.
   Grandes y bajados: cortan un poco por debajo del fondo del div (overflow:hidden). */
.cierre-productos {
    align-self: center;              /* centrado vertical: ya no cortan sobre el bottom */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 2600px;
    perspective-origin: right bottom;
    padding-bottom: 0;
    width: 120%;
}
.cierre-prod {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: calc(13rem + var(--ci) * 0.9rem);   /* apenas más chicos que antes */
    margin-left: calc(var(--cn) * -2rem + 1rem); /* solape más suave → algo más de espacio entre ellos */
    transform-origin: bottom center;
    z-index: var(--ci);                            /* el de la derecha por encima (estático) */
    /* estado oculto: entra desde la izquierda, recedido en perspectiva */
    opacity: 0;
    transform: translateY(1.5rem) translateX(-26px) rotateY(30deg) scale(0.82);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--ci) * 110ms);     /* stagger izq → der */
    will-change: opacity, transform;
}
.cierre-prod:first-child { margin-left: 0; }
.cierre-prod img {
    display: block;
    width: 100%;
    height: auto;
}

/* Revelado al llegar al fondo de la sección (clase agregada por JS); quedan anclados
   estáticos y bajados (translateY) para cortar bajo el borde inferior del div. */
.seccion-sabiomaiz-cierre.cierre-visible .cierre-prod {
    opacity: 1;
    transform: translateY(0) rotateY(15deg) scale(1);   /* sin bajada: no cortan abajo */
}

/* Tablet / móvil: texto y botón centrados arriba, productos abajo */
@media (max-width: 900px) {
    /* padding-bottom: separa el botón del pie (footer) */
    .seccion-sabiomaiz-cierre { padding-top: 2.5rem; padding-bottom: 2.5rem; min-height: 0; }
    .cierre-inner {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.5rem;                 /* poco espacio entre los productos (arriba) y el título */
    }
    .cierre-texto { align-self: stretch; padding: 0 0 0.5rem; max-width: none; text-align: center; }
    .cierre-productos {
        order: -1;                   /* mobile: productos arriba de todo, antes del texto */
        width: 100%;                 /* anula el 120% de desktop: no desborda el viewport */
        max-width: 100%;
        justify-content: center;
        perspective-origin: center bottom;
        padding-bottom: 0;
    }
    /* Tamaños en vw (escalan con la pantalla) y solape calibrado para que ENTREN
       hasta 6 productos sin desbordar a la derecha; con menos quedan más anchos y centrados. */
    .cierre-prod {
        width: calc(27vw + var(--ci) * 2vw);       /* más grandes en mobile */
        margin-left: calc(var(--cn) * -3.6vw);     /* más solape → 6 productos no desbordan */
    }
}

/* Reduce motion: sin animación de entrada (queda en su posición final) */
@media (prefers-reduced-motion: reduce) {
    .cierre-prod { opacity: 1; transform: translateY(0) rotateY(15deg); transition: none; }
}

/* Páginas que ocultan el bloque de Contacto local (el nav lleva a inicio#contacto).
   Reusable: la página setea @section('body_clase','pagina-sin-contacto'). */
.pagina-sin-contacto #contacto { display: none !important; }
/* La regla global :has(+ #contacto) anula el padding inferior de la última
   sección crema (para pegar con Contacto); si Contacto está oculto, lo restauramos. */
.pagina-sin-contacto .seccion:has(+ #contacto) > .seccion-crema:last-child,
.pagina-sin-contacto .seccion:has(+ #contacto) > .seccion-suave:last-child { padding-bottom: var(--seccion-py) !important; }


/* ============================================
   #CONTACTO — Ajustes (datos, checkbox, trama)
   ============================================ */

/* Contacto diferido (cultivando/artículo): oculto hasta suscribirse al newsletter
   o tocar "Contacto" en el nav. JS agrega .contacto-abierto al <body>. */
.contacto-diferido #contacto { display: none; }
.contacto-diferido.contacto-abierto #contacto { display: block; }

/* Trama animada scrolleando suavemente hacia arriba (igual que .prod-card-bg) */
.seccion-contacto-contenido { position: relative; overflow: hidden; }
.seccion-contacto-contenido::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/img/trama.svg');
    background-size: 100px auto;
    background-repeat: repeat;
    /* opacity: 0.12; */
    animation: prod-trama-scroll 12s linear infinite;
    pointer-events: none;
}
.seccion-contacto-contenido > .contenedor { position: relative; z-index: 1; }
/* En mobile (1 columna) achica la distancia entre los datos de contacto y el form */
@media (max-width: 1023px) {
    .seccion-contacto-contenido > .contenedor { gap: 2rem; }
}

/* Datos de contacto: icono verde, hover verde con línea que crece desde la izquierda */
.datos-contacto .dato-icono { color: var(--color-verde); }
.datos-contacto > div {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 0.45rem;
    transition: color var(--ease-base);
}
.datos-contacto > div::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--color-verde);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.datos-contacto > div:hover { color: var(--color-verde); }
.datos-contacto > div:hover .dato-icono,
.datos-contacto > div:hover a { color: var(--color-verde); }
.datos-contacto > div:hover::after { transform: scaleX(1); }

/* Checkbox "Quiero recibir información" — estilizado y centrado */
.campo-checkbox { gap: 0.625rem; }
.campo-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--color-tierra-light);
    border-radius: 0.35rem;
    background: var(--color-tierra);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease-fast), border-color var(--ease-fast);
}
.campo-checkbox input[type="checkbox"]:hover { border-color: var(--color-verde); }
.campo-checkbox input[type="checkbox"]:checked {
    background: var(--color-verde);
    border-color: var(--color-verde);
}
.campo-checkbox input[type="checkbox"]:checked::after {
    content: '';
    width: 0.3rem;
    height: 0.55rem;
    border: solid var(--color-oscuro);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.campo-checkbox label { user-select: none; }


/* ============================================
   #PRODUCTOS — Header con selector ARG/UY al pie derecho
   ============================================ */
.seccion-productos-header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.seccion-productos-header-texto { flex: 1 1 auto; }
/* El selector en el header oscuro: opciones inactivas en crema tenue */
.mercado-selector-header { flex: 0 0 auto; align-self: flex-end; }
/* Leyenda temporal en lugar del selector (mientras se muestra sólo ARG) */
.mercado-leyenda {
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0;
    color: rgba(252, 249, 246, 0.5);
    font-size: 0.8125rem;
    font-style: italic;
}
.mercado-selector-header .mercado-opcion { color: rgba(252, 249, 246, 0.5); }
.mercado-selector-header .mercado-opcion.mercado-activo { color: var(--color-oscuro); }

/* Listado "todos los productos" (sin familia seleccionada) */
.productos-todos[hidden] { display: none; }
.productos-todos-grupo:first-child .familia-detalle-head { margin-top: 0; }
/* Aire arriba para el scroll programático fallback (reduce-motion, sin Lenis) */
#familia-detalle, #productos-todos {/* scroll-margin-top: 140px; */}
#productos-todos { margin-top:4rem; }

/* ============================================
   #CULTIVANDO — Aire arriba y abajo de la sección
   --------------------------------------------
   Cultivando no tiene hero oscuro: el contenido arranca bajo el nav fijo.
   Además, la regla global `:has(+ #contacto)` anula el padding inferior del
   último bloque crema (para que pegue con Contacto); acá lo restauramos para
   que la sección respire antes del footer.
   ============================================ */
.seccion-cultivando-contenido.seccion-crema:last-child { padding-bottom: 8rem !important; }

@media (max-width: 640px) {
    .seccion-productos-header-inner { align-items: flex-start; }
    .mercado-selector-header { align-self: flex-start; }
    .mercado-leyenda { align-self: flex-start; }
}


/* ============================================
   #ENSAYOS — Ampliación / informe del ensayo (full-width)
   --------------------------------------------
   Panel oculto que se abre bajo la grilla. Layout dinámico:
   la lista de variables y las barras las rellena el JS.
   ============================================ */
.ensayo-informe {
    margin-top: 4rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1),
                transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ensayo-informe[hidden] { display: none; }
.ensayo-informe.abierto { opacity: 1; transform: translateY(0); }

.ensayo-informe-inner {
    position: relative;
    max-width: var(--contenedor-max);
    margin: 0 auto;
    padding: 3rem var(--contenedor-px) 2.5rem;
}

/* Botón cerrar */
.ensayo-informe-cerrar {
    position: absolute;
    top: 1rem;
    right: var(--contenedor-px);
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(29,27,22,0.15);
    border-radius: 999px;
    background: #fff;
    color: var(--color-oscuro);
    cursor: pointer;
    z-index: 5;
    transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
    display: none;
}
.ensayo-informe-cerrar:hover {
    background: var(--color-tierra);
    color: #fff;
    border-color: var(--color-tierra);
}

/* Head: título (izq) + logo Amauta (der) */
.ensayo-informe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-right: 3.5rem;
}
.ensayo-informe-titulo {
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-tierra);
}
.ensayo-informe-logo { height: 2rem; width: auto; flex-shrink: 0; }

/* Cuerpo: panel marrón (izq) + foto flotante + chart (der) */
.ensayo-informe-cuerpo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    gap: 2rem;
}

/* Panel marrón con bordes derechos muy redondeados */
.ensayo-informe-panel {
    background: var(--color-tierra);
    color: var(--color-crema);
    border-radius: 0 999px 999px 0;
    padding: 2.5rem 7rem 2.5rem 2.5rem;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.ensayo-informe-vars { width: 100%; list-style: none; margin: 0; padding: 0; }
.ei-var {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(252,249,246,0.18);
}
.ei-var:last-child { border-bottom: 0; }
.ei-var-label {
    flex: 0 0 42%;
    font-weight: 700;
    color: #cdd75e; /* khaki/verde apagado, como la referencia */
}
.ei-var-valor { color: var(--color-crema); font-weight: 300; }

/* Foto del producto flotando sobre el extremo derecho del panel */
.ensayo-informe-producto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(7rem, 12vw, 11rem);
    height: auto;
    filter: drop-shadow(0 0.75rem 1.5rem rgba(29,27,22,0.3));
    z-index: 3;
    pointer-events: none;
}

/* Chart de barras (hasta ~6).
   Mismo criterio que .barra-chart: --ei-zona es el alto de la zona de barras y
   la leyenda cuelga en una fila propia debajo, así una leyenda de 2+ líneas no
   levanta su barra y todas comparten la misma base. */
.ensayo-informe-chart {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    /* gap: 0.75rem; */
    --ei-zona: 18rem;
    height: auto;
    padding-left: 6.5rem; /* aire para la foto flotante */
}
.ei-barra-item {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-rows: var(--ei-zona) auto;
    align-items: end;
}
.ei-barra {
    position: relative;
    width: 100%;
    max-width: 4rem;
    height: 0;
    justify-self: center;
    border-radius: 0.25rem 0.25rem 0 0;
    transition: height 0.7s cubic-bezier(0.16,1,0.3,1);
}
.ei-barra-control { background: #f3dcb0; }       /* control: tono crema/durazno */
.ei-barra-dosis   { background: var(--color-verde); }
.ei-barra-valor {
    position: absolute;
    top: 0.6rem;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-oscuro);
    white-space: nowrap;
}
.ei-barra-label {
    padding: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
    color: var(--color-oscuro);
    opacity: 0.7;
    border-top: 1px solid rgba(29,27,22,0.1);
    width: 100%;
}

/* Observaciones */
.ensayo-informe-obs {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    align-items: baseline;
    /* border-top: 1px solid rgba(29,27,22,0.1); */
    padding-top: 1.5rem;
}
.ensayo-informe-obs-label { flex-shrink: 0; font-weight: 700; color: var(--color-tierra); }
.ensayo-informe-obs-texto { color: var(--color-oscuro); opacity: 0.7; font-weight: 300; line-height: 1.6; }

/* Full-bleed del panel a la izquierda en desktop grande (como la referencia) */
@media (min-width: 1200px) {
    .ensayo-informe-panel {
        margin-left: calc((var(--contenedor-max) - 100vw) / 2 - var(--contenedor-px));
        padding-left: calc((100vw - var(--contenedor-max)) / 2 + var(--contenedor-px) + 2.5rem);
    }
}

/* Mobile: toda la ampliación en una tarjeta blanca (en positivo, sin franja marrón) */
@media (max-width: 800px) {
    .ensayo-informe { margin-top: 2.5rem; }
    /* Tarjeta separada del fondo: blanca, bordes redondeados, apenas de la pantalla */
    .ensayo-informe-inner {
        background: #fff;
        border: 1px solid rgba(29,27,22,0.08);
        border-radius: 1.25rem;
        box-shadow: 0 0.5rem 1.5rem rgba(29,27,22,0.05);
        margin: 0 var(--contenedor-px);
        padding: 1.75rem 1.25rem 2rem;
        overflow: hidden;
    }

    .ensayo-informe-cuerpo { grid-template-columns: 1fr; gap: 1.25rem; }

    /* Panel ya no es marrón ni a sangre: queda dentro de la tarjeta, en positivo */
    .ensayo-informe-panel {
        margin: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        color: var(--color-oscuro);
    }
    /* Datos más pequeños + en positivo */
    .ei-var { font-size: 0.8rem; padding: 0.5rem 0; gap: 1rem; border-bottom-color: rgba(29,27,22,0.1); }
    .ei-var-label { flex-basis: 50%; color: var(--color-tierra); }
    .ei-var-valor { color: var(--color-oscuro); }

    /* Foto del producto: debajo del título, arriba del panel/variables */
    .ensayo-informe-producto {
        position: static;
        order: -1;
        transform: none;
        width: 8rem;
        margin: 0 auto;
        display: block;
    }

    /* Barras con margen lateral simétrico */
    .ensayo-informe-chart { padding-left: 0; --ei-zona: 13rem; min-width: 0; }
    /* Con demasiadas barras (>4) no entran: scroll horizontal en vez de desbordar el bloque */
    .ensayo-informe-chart:has(.ei-barra-item:nth-child(5)) {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-bottom: 0.5rem;   /* aire para la barra de scroll */
    }
    .ensayo-informe-chart:has(.ei-barra-item:nth-child(5)) .ei-barra-item {
        flex: 0 0 4.5rem;
    }

    .ensayo-informe-head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.75rem;
        padding-right: 0;
    }

    /* Observaciones apiladas: el título arriba y el texto debajo (no al lado) */
    .ensayo-informe-obs {
        flex-direction: column;
        gap: 0.35rem;
        margin-top: 1.75rem;
        padding-top: 1.25rem;
    }

    /* Menos espacio entre la ampliación y el footer */
    .seccion.seccion-ensayos-contenido { padding-bottom: 3rem; }
}