/* v6 / oat-indice: indice de "Cosas que hacemos" con la base de oatly.com/things-we-do (CSS del espejo en referencias/oatly, 2026-11-11).
   Del original, tal cual: contenedor de 12 de 14 columnas ((100vw - gutter) / 14), gutter clamp(1rem .. 3.15rem), espaciadores .35/1/1.5/2 vw
   desde 768 px; barra de categorias centrada en Margo 16 px MAYUSCULAS, relleno .3125rem 8px .2rem, 24 px entre pestañas (8 en celular),
   la activa y el hover con fondo de color; destacado con imagen 16:9 a todo el ancho y debajo titulo (Toni, clamp 3..6rem / .833) a la
   izquierda y resumen + meta a la derecha; despues una tarjeta grande de 8 columnas (titulo clamp 2.125..4.25rem / .778) con columna
   derecha de 4 (titulos clamp 1.75..2.125rem / .94); imagenes con el borde rasgado arriba y abajo (mascaras SVG del original) y
   scale(1.015) al pasar el cursor; meta "categoria • fecha" en 14 px MAYUSCULAS.
   Casa: hueso #F3F3EF por blanco, tinta #131901 por negro, amarillo #FFD36A por el crema de la pestaña activa. La barra de categorias
   NO se desliza de lado como en el original: en celular se parte en renglones (regla de Emilio). En celular la columna derecha va a
   dos por renglon, como el original. */
@font-face{font-family:"oi-Toni";src:url("../../assets/v6/fonts/ToniNoveauPro-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"oi-Margo";src:url("../../assets/v6/fonts/MargoPro-Regular.woff") format("woff"),url("../../assets/v6/fonts/MargoPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

#sec-oat-indice{
  --oi-tinta:var(--sys-tinta,#131901);--oi-fondo:var(--sys-hueso,#F3F3EF);--oi-activo:var(--sys-amarillo,#FFD36A);
  --oi-gutter:clamp(1rem, calc(1rem + (100vw - 48rem) * (3.15 - 1) / 57), 3.15rem);
  --oi-col:calc((100vw - var(--oi-gutter)) / 14);--oi-col-6:calc((100vw - var(--oi-gutter)) / 6);
  --oi-s1:.25rem;--oi-s2:.5rem;--oi-s3:.75rem;--oi-s4:1rem;
  font-family:"oi-Margo",Arial,sans-serif;color:var(--oi-tinta);background:var(--oi-fondo);overflow-x:clip;
}
@media (min-width:768px){#sec-oat-indice{--oi-s1:.35vw;--oi-s2:1vw;--oi-s3:1.5vw;--oi-s4:2vw}}
@media (min-width:1680px){#sec-oat-indice{--oi-col:calc((1680px - var(--oi-gutter)) / 14);--oi-s1:.65rem;--oi-s2:1.05rem;--oi-s3:1.575rem;--oi-s4:2.1rem}}
#sec-oat-indice *{box-sizing:border-box}
#sec-oat-indice a{color:inherit;text-decoration:none}
#sec-oat-indice .oi-hoja{padding:clamp(88px, 9vw, 132px) 0 calc(var(--oi-gutter) * 3)}
#sec-oat-indice .oi-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* nombre de la seccion: en el original va en la miga del encabezado ("← THINGS WE DO"); aqui, renglon chico sobre la barra */
#sec-oat-indice .oi-miga{width:calc(var(--oi-col-6) * 6);margin:0 auto;padding:0 calc(var(--oi-gutter) / 2) var(--oi-gutter);font-size:1rem;line-height:1.25;text-transform:uppercase}
#sec-oat-indice .oi-miga a{display:inline-flex;align-items:center;gap:8px}
#sec-oat-indice .oi-miga i{font-style:normal}
#sec-oat-indice .oi-miga a:hover span{border-bottom:.125rem solid}
#sec-oat-indice .oi-miga span{border-bottom:.125rem solid transparent}

/* barra de categorias */
#sec-oat-indice .oi-nav{padding-bottom:var(--oi-s1);position:relative;z-index:1;text-transform:uppercase}
#sec-oat-indice .oi-nav ul{list-style:none;margin:0;padding:0 calc(var(--oi-gutter) / 2);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#sec-oat-indice .oi-nav li{font-size:1rem;line-height:1.25;padding:0;margin:0}
#sec-oat-indice .oi-nav a{display:block;padding:.3125rem 8px .2rem;cursor:pointer}
#sec-oat-indice .oi-nav a:hover,#sec-oat-indice .oi-nav a[aria-current="page"]{background-color:var(--oi-activo)}
#sec-oat-indice .oi-nav a:focus-visible,#sec-oat-indice .oi-card:focus-visible{outline:2px solid var(--oi-tinta);outline-offset:2px}

/* tarjeta */
#sec-oat-indice .oi-card{display:block;overflow:hidden;width:100%}
#sec-oat-indice .oi-img{position:relative;margin:-.3rem 0;transition:transform .25s ease;aspect-ratio:16 / 9;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 preserveAspectRatio=%22none%22 width=%221440%22 height=%228%22 viewBox=%220 0 1440 8%22%3E %3Cpath d=%22M528.457 3.945c-28.311.02-55.333 2.797-84.644 2.424-26.056-.398-52.112-.399-78.168-.797-40.82-.398-80.771 2.787-122.46 2.389-19.107 0-39.084-.399-59.06-.399-40.82-.398-81.64-.396-123.328-.794C40.82 6.37 20.844 6.368 0 5.97V8h1188.307c-38.175.023-75.689-2.402-113.957-2.03-26.05.399-52.11.4-78.162.798-30.399.398-59.928-2.787-90.327-2.39-55.585.399-112.038.398-167.623.796h-36.476c-55.585-.398-111.17-.397-167.623-1.194-1.9-.024-3.795-.036-5.682-.035zM1188.307 8H1440V5.97c-19.98.399-40.82.4-61.66.798-40.82.398-82.51.396-123.33.795-19.11 0-39.09.398-59.06.398-2.552.025-5.098.037-7.643.039z%22 fill=%22%23fff%22/%3E %3C/svg%3E"),linear-gradient(0deg,#fff,#fff),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 preserveAspectRatio=%22none%22 width=%221440%22 height=%228%22 viewBox=%220 0 1440 8%22%3E %3Cpath d=%22M0 0v2.03c20.844-.399 40.821-.4 60.797-.798C102.486.834 143.305.836 184.125.438c19.976 0 39.953-.399 59.06-.399 41.689-.398 81.64 2.787 122.46 2.389 26.056-.398 52.112-.4 78.168-.797 31.266-.398 59.927 2.787 90.326 2.389 56.453-.797 112.038-.796 167.623-1.194h36.476c55.585.398 112.038.397 167.623.795 30.4.398 59.928-2.787 90.327-2.389 26.052.398 52.112.4 78.162.797 38.268.373 75.782-2.052 113.957-2.029H0zm1188.307 0c2.545.002 5.091.014 7.642.04 19.97 0 39.95.398 59.06.398 40.82.398 82.51.396 123.33.794 20.84.398 41.681.4 61.661.797V0h-251.693z%22 fill=%22%23fff%22/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 preserveAspectRatio=%22none%22 width=%221440%22 height=%228%22 viewBox=%220 0 1440 8%22%3E %3Cpath d=%22M528.457 3.945c-28.311.02-55.333 2.797-84.644 2.424-26.056-.398-52.112-.399-78.168-.797-40.82-.398-80.771 2.787-122.46 2.389-19.107 0-39.084-.399-59.06-.399-40.82-.398-81.64-.396-123.328-.794C40.82 6.37 20.844 6.368 0 5.97V8h1188.307c-38.175.023-75.689-2.402-113.957-2.03-26.05.399-52.11.4-78.162.798-30.399.398-59.928-2.787-90.327-2.39-55.585.399-112.038.398-167.623.796h-36.476c-55.585-.398-111.17-.397-167.623-1.194-1.9-.024-3.795-.036-5.682-.035zM1188.307 8H1440V5.97c-19.98.399-40.82.4-61.66.798-40.82.398-82.51.396-123.33.795-19.11 0-39.09.398-59.06.398-2.552.025-5.098.037-7.643.039z%22 fill=%22%23fff%22/%3E %3C/svg%3E"),linear-gradient(0deg,#fff,#fff),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 preserveAspectRatio=%22none%22 width=%221440%22 height=%228%22 viewBox=%220 0 1440 8%22%3E %3Cpath d=%22M0 0v2.03c20.844-.399 40.821-.4 60.797-.798C102.486.834 143.305.836 184.125.438c19.976 0 39.953-.399 59.06-.399 41.689-.398 81.64 2.787 122.46 2.389 26.056-.398 52.112-.4 78.168-.797 31.266-.398 59.927 2.787 90.326 2.389 56.453-.797 112.038-.796 167.623-1.194h36.476c55.585.398 112.038.397 167.623.795 30.4.398 59.928-2.787 90.327-2.389 26.052.398 52.112.4 78.162.797 38.268.373 75.782-2.052 113.957-2.029H0zm1188.307 0c2.545.002 5.091.014 7.642.04 19.97 0 39.95.398 59.06.398 40.82.398 82.51.396 123.33.794 20.84.398 41.681.4 61.661.797V0h-251.693z%22 fill=%22%23fff%22/%3E %3C/svg%3E");
  -webkit-mask-position:center top,center center,center bottom;mask-position:center top,center center,center bottom;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:auto .5rem,100% calc(100% - .9rem),auto .5rem;mask-size:auto .5rem,100% calc(100% - .9rem),auto .5rem}
#sec-oat-indice .oi-img img,#sec-oat-indice .oi-img video{display:block;width:100%;height:100%;object-fit:cover}
/* portadas en video (objeto sobre negro): el fondo oscuro evita el destello hueso mientras carga el poster */
#sec-oat-indice .oi-img--video{background:#0b0b0b}
#sec-oat-indice .oi-card:hover .oi-img{transform:scale(1.015)}
#sec-oat-indice .oi-texto{padding-top:var(--oi-s2)}
#sec-oat-indice .oi-titulo{font-family:"oi-Toni","oi-Margo",sans-serif;font-weight:400;text-transform:uppercase;margin:0;overflow-wrap:anywhere;
  font-size:clamp(1.75rem, calc(1.75rem + (100vw - 48rem) * (2.125 - 1.75) / 57), 2.125rem);line-height:.94}
#sec-oat-indice .oi-resumen{font-size:clamp(1rem, calc(1rem + (100vw - 48rem) * (1.125 - 1) / 57), 1.125rem);line-height:1.2;padding:var(--oi-s1) 0}
#sec-oat-indice .oi-meta{font-size:.875rem;line-height:1.2;padding-top:var(--oi-s1);text-transform:uppercase}

/* destacado */
#sec-oat-indice .oi-destacado{padding:var(--oi-gutter) 0}
#sec-oat-indice .oi-destacado>div{margin:0 auto;padding:0 calc(var(--oi-gutter) / 2);width:calc(var(--oi-col-6) * 6)}
#sec-oat-indice .oi-destacado .oi-texto{padding-top:var(--oi-s3)}
#sec-oat-indice .oi-destacado .oi-titulo{font-size:clamp(3rem, calc(3rem + (100vw - 48rem) * (6 - 3) / 57), 6rem);line-height:.833}
#sec-oat-indice .oi-destacado .oi-resumen,#sec-oat-indice .oi-grande .oi-resumen{font-size:clamp(1.125rem, calc(1.125rem + (100vw - 48rem) * (1.25 - 1.125) / 57), 1.25rem)}

/* tarjeta grande + columna derecha */
#sec-oat-indice .oi-pegado{padding:var(--oi-gutter) 0}
#sec-oat-indice .oi-pegado>div{display:flex;flex-wrap:wrap;margin:0 auto;width:calc(var(--oi-col-6) * 6)}
#sec-oat-indice .oi-grande{width:100%;padding:0 calc(var(--oi-gutter) / 2);margin-bottom:calc(var(--oi-gutter) * 2)}
#sec-oat-indice .oi-grande .oi-texto{padding-top:var(--oi-s3)}
#sec-oat-indice .oi-grande .oi-titulo{font-size:clamp(2.125rem, calc(2.125rem + (100vw - 48rem) * (4.25 - 2.125) / 57), 4.25rem);line-height:.778}
#sec-oat-indice .oi-lado{width:100%;padding:0 calc(var(--oi-gutter) / 2);display:flex;flex-flow:wrap;justify-content:space-between;align-items:baseline}
#sec-oat-indice .oi-lado .oi-card{width:48%}
#sec-oat-indice .oi-lado .oi-card:not(:last-child){margin-bottom:calc(var(--oi-gutter) * 2)}
#sec-oat-indice .oi-grande:empty,#sec-oat-indice .oi-lado:empty{display:none}
#sec-oat-indice [hidden]{display:none!important}
#sec-oat-indice .oi-vacio{width:calc(var(--oi-col-6) * 6);margin:0 auto;padding:calc(var(--oi-gutter) * 2) calc(var(--oi-gutter) / 2);text-align:center;font-size:1.125rem;line-height:1.2}

@media (min-width:768px){
  #sec-oat-indice .oi-miga,#sec-oat-indice .oi-destacado>div,#sec-oat-indice .oi-pegado>div,#sec-oat-indice .oi-vacio{width:calc(var(--oi-col) * 12)}
  #sec-oat-indice .oi-nav ul{gap:24px}
  #sec-oat-indice .oi-destacado .oi-texto{display:grid;gap:var(--oi-s4);grid-auto-columns:minmax(0, 1fr);grid-auto-flow:column}
  #sec-oat-indice .oi-grande{width:calc(var(--oi-col) * 8);margin-bottom:0}
  /* como el original (StickySection): la grande se queda pegada mientras corre la columna derecha */
  #sec-oat-indice .oi-grande{align-self:flex-start;position:sticky;top:var(--oi-gutter)}
  #sec-oat-indice .oi-lado{width:calc(var(--oi-col) * 4);display:block}
  #sec-oat-indice .oi-lado .oi-card{width:100%}
  #sec-oat-indice .oi-lado .oi-card:not(:last-child){margin-bottom:var(--oi-gutter)}
  /* una sola tarjeta despues del destacado: no se queda con el hueco de la columna derecha */
  #sec-oat-indice .oi-pegado.oi-sin-lado .oi-grande{width:calc(var(--oi-col) * 12)}
}
@media (prefers-reduced-motion:reduce){#sec-oat-indice .oi-img{transition:none}#sec-oat-indice .oi-card:hover .oi-img{transform:none}}