/* v6 / manifiesto-texto v2 (2026-10-21): el manifiesto con el formato del reporte de Oatly ("A Report on the Future of Taste").
   FASE 1 TAL CUAL: las reglas de Oatly van verbatim con el prefijo #sec-manifiesto-texto (clases originales dentro), tomadas de
   referencias/oatly/future-of-taste/mirror/partes/reglas.css (hoja de origen 295e37a263e0da3b.css salvo que se diga otra) y en el
   mismo orden que en su hoja (cuando dos reglas empatan en especificidad, manda el orden). Lo que Oatly pone en linea o por JS
   (bordes, 75vw, columna del sello, K de los gutters, el papel del body) va aqui como reglas .ot-* al final del bloque, con nota.
   Spec medida del original: referencias/oatly/future-of-taste/SPEC-reporte.md. Version anterior: section.papel.css (no se construye).

   DESVIACIONES del "tal cual", con el porque:
   1. rem -> var(--ot-rem). Oatly pone html { font-size: 16px } y 14px en <= 767; en esta pagina el html es de 16 px para todos los
      modulos y no se toca, asi que cada "N rem" de Oatly va como calc(N * var(--ot-rem)) con --ot-rem 16px / 14px en <= 767.
      Los numeros son los mismos: gutter 41.35 a 1440 y 14 a 390, titulo 158.74 y 77, cuerpo 17.47 y 14 (ver SPEC-reporte.md, s2).
   2. El papel va en esta seccion, no en el body (el body de la pagina lo comparten los demas modulos): mismas declaraciones
      (seamless-paper.png, center center, 50 %, repeat, sobre #fff). background-size 50 % del ancho de la seccion = 720 px a 1440.
   3. Titulo: la clase xxl de Oatly no trae mayusculas ni acentos compactos. "EL IMPERATIVO ANALÓGICO" en mayusculas por CSS; con la
      interlinea .74 de Oatly el acento de la Ó (0.833 em) invade el renglon de arriba (0.093 em = 14.8 px a 1440), y la via de Oatly
      para acentos (clase -umlauts, font-feature-settings "c2sc") cambia la Ó por una versalita 17 % mas baja (cuerpo 553 contra 664
      unidades, medido en la fuente): se ve como falta. Asi que .ot-con-acento sube la interlinea a .88 (hueco del acento 0.047 em =
      7.5 px a 1440, 3.6 a 390); el titulo mide 279.4 de alto a 1440 (Oatly 234.9) y 203.3 a 390 (170.9).
   4. Las fuentes se declaran como "ot-<nombre> Local" (fuentes de Oatly, solo para maqueta local) desde assets/v6/fonts/.
   5. Las reglas .StoryblokImage_* (placeholder borroso del cargador de Next) no se copian: no son diseño.
   6. (Fase 4, 2026-10-21) Fuera los huecos del globo y de la marca de Oatly (no hay equivalente; dejaban 181 px de hoja vacia sobre
      la etiqueta): en su lugar el hero abre con un gutter entero (82.7 px a 1440, 56 a 390), el mismo aire que lleva por abajo.
   7. (Fase 4) El margen izquierdo de Oatly (sidemargin.svg) NO es un margen rayado: es un solo trazado con el texto en ingles
      "NOTHING TO BE WRITTEN IN THIS MARGIN". Fuera: el div .ot-margen queda sin imagen (abajo, con la linea para volver a ponerlo
      o cambiarlo por uno en español, BORRADOR a proponer).
   8. (Fase 4) La firma h6.ot-firma, vacia, va plegada (display:none) y el parrafo que sigue recupera su margen normal: el hueco de
      73.6 px del "(BY ...)" de Oatly se veia como agujero. Con texto dentro, el h6 vuelve a medir y espaciar como en Oatly.
   9. (Fase 4) El sello lleva una tinta mas oscura que el rojo de Oatly, #d4181f en vez de #ed1c24: sus letras son texto chico
      (cap de 6 px a 1440) y el rojo de Oatly da 3.9:1 sobre la hoja; #d4181f da 4.75:1 (regla de la casa: 4.5:1 en texto chico).
      El titulo sigue en #ed1c24 (texto grande, 3.9:1 >= 3:1). Y el martillo flotado lleva position:relative + z-index:1 para que
      ninguna transformacion residual del parrafo (GSAP) lo tape al raton.
   Lo que se conserva de la version anterior: el velo negro de entrada (::before, --velo-n), la foto del martillo con su cinta
   (flotada a la derecha dentro del parrafo: entre el texto y los bordes de la columna solo quedan 40.5 px a 1440) y la regla del
   velo del CTA, ahora al color medio de la hoja de Oatly (#f2f2f2 por PIL). */

/* ---------- fuentes de Oatly (solo maqueta local; referencias/oatly/future-of-taste/mirror/fonts/LEEME.md). Misma declaracion que
   la suya: Toni solo en otf; Margo con woff primero (el que carga Chrome) y woff2 despues; font-display block. ---------- */
@font-face{font-family:"ot-Toni Noveau Pro Local";src:url("../../assets/v6/fonts/ToniNoveauPro-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"ot-Margo Pro Regular Local";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:block}

/* ---------- 1. Tokens de :root de Oatly, en la seccion (rem -> --ot-rem; familias -> las locales) ---------- */
#sec-manifiesto-texto {
  --ot-rem: 16px;
  --gutter: clamp(calc(1 * var(--ot-rem)), calc(1 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (3.15 - 1) / 57), calc(3.15 * var(--ot-rem)));
  --grid-col: calc((100vw - var(--gutter, 0px) - var(--scrollbar-width, 0px)) / 14);
  --spacer-1: calc(0.25 * var(--ot-rem)); --spacer-2: calc(0.5 * var(--ot-rem)); --spacer-3: calc(0.75 * var(--ot-rem)); --spacer-4: calc(1 * var(--ot-rem));
  --line-height-regular: 1.3;
  --font-paragraph-margo-pro-regular-s: clamp(calc(1 * var(--ot-rem)), calc(1 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (1.125 - 1) / 57), calc(1.125 * var(--ot-rem)))/1.2 "ot-Margo Pro Regular Local", sans-serif;
  --font-paragraph-margo-pro-regular-m: clamp(calc(1.125 * var(--ot-rem)), calc(1.125 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (1.25 - 1.125) / 57), calc(1.25 * var(--ot-rem)))/1.2 "ot-Margo Pro Regular Local", sans-serif;
  --font-heading-toni-noveau-pro-xl: normal normal clamp(calc(4.25 * var(--ot-rem)), calc(4.25 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (9 - 4.25) / 57), calc(9 * var(--ot-rem)))/0.778 "ot-Toni Noveau Pro Local", sans-serif;
  --font-heading-toni-noveau-pro-xxl: normal normal clamp(calc(5.5 * var(--ot-rem)), calc(5.5 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (11.5 - 5.5) / 57), calc(11.5 * var(--ot-rem)))/0.74 "ot-Toni Noveau Pro Local", sans-serif;
  --font-heading-margo-pro-regular-m: normal normal clamp(calc(1.125 * var(--ot-rem)), calc(1.125 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (1.5 - 1.125) / 57), calc(1.5 * var(--ot-rem)))/1 "ot-Margo Pro Regular Local", sans-serif;
  --max-width: 1680px; --max-width-xl: calc(var(--grid-col) * 12); --max-width-full: unset;
}
@media (max-width: 767px) { #sec-manifiesto-texto { --ot-rem: 14px; } }   /* Oatly: :root { --font-base-regular: 14 !important } */
@media (min-width: 768px) { #sec-manifiesto-texto { --spacer-1: 0.35vw; --spacer-2: 1vw; --spacer-3: 1.5vw; --spacer-4: 2vw; --max-width-xl: calc(var(--grid-col) * 10); } }

/* ---------- 2. Base: el reset y el body de Oatly, aplicados a la seccion (+ el papel que su JS pone en el body) y el velo negro de entrada ---------- */
/* reset de Oatly (295e37a263e0da3b.css, byte 77361): *,:after,:before { box-sizing:border-box;overflow-wrap:break-word }. Sin el, el
   padding de las columnas se suma al 85 % + 12 % y la fila del sello se parte en dos (el sello caia al centro). */
#sec-manifiesto-texto,#sec-manifiesto-texto *,#sec-manifiesto-texto :after,#sec-manifiesto-texto :before { box-sizing:border-box;overflow-wrap:break-word }
#sec-manifiesto-texto { position: relative; isolation: isolate; --velo-n: .45; --velo-n-max: clamp(260px, 62vh, 640px);
  background-color: #fff; background-image: url("../../assets/v6/manifiesto/seamless-paper.png"); background-position: center center; background-size: 50%; background-repeat: repeat;
  color: #000; display: flex; flex-direction: column; font-family: "ot-Margo Pro Regular Local", sans-serif; font-size: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height: var(--line-height-regular, 1.3); -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* velo negro que se levanta al entrar (de la version anterior): arriba es del negro del bloque de WHP para que empalme sin linea y lo
   que cambia con el scroll es su ALTURA (--velo-n de 1 a 0 en section.js). z 2: encima de las secciones de Oatly (contextos propios). */
#sec-manifiesto-texto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--velo-n) * var(--velo-n-max)); z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,.97) 12%, rgba(10,10,10,.86) 28%, rgba(10,10,10,.62) 48%, rgba(10,10,10,.34) 68%, rgba(10,10,10,.12) 86%, rgba(10,10,10,0) 100%); }

/* ---------- 3. Layout de Oatly (verbatim): seccion, fondo, contenido widthXl, columnas, gutter, imagen ---------- */
#sec-manifiesto-texto .LayoutPageSectionColumns_LayoutPageSectionColumns__Xnozz { align-items:center;container-type:inline-size;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:var(--max-width,1680px);position:relative;row-gap:var(--spacer-4,1rem);width:100% }
#sec-manifiesto-texto .LayoutPageSectionColumns_LayoutPageSectionColumns__Xnozz.LayoutPageSectionColumns_widthFull__au1zj { max-width:var(--max-width-full,unset);padding-left:0;padding-right:0;width:100% }
#sec-manifiesto-texto .LayoutPageSectionContent_LayoutPageSectionContent__uvfNo { align-items:center;container-type:inline-size;display:flex;flex-direction:column;margin:0 auto;max-width:var(--max-width,1680px);padding:0 calc(var(--gutter, 1.0625rem)/2);position:relative;width:100% }
#sec-manifiesto-texto .LayoutPageSectionContent_LayoutPageSectionContent__uvfNo.LayoutPageSectionContent_widthXl__wZmBi { max-width:var(--max-width-xl,calc(var(--grid-col, 7.1428571429vw) * 12)) }
#sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M { container-type:inline-size;display:flex;flex-direction:column;padding:0 calc(var(--gutter, 1.0625rem)/2);width:100% }
#sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ { width:100% }
@media (min-width: 768px) { #sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ { width:50% } }
#sec-manifiesto-texto .LayoutPage-gutter { padding:calc(var(--gutter)/2) }
#sec-manifiesto-texto .LayoutPageImage_LayoutPageImageWrapper__oB2_2 { display:block;overflow:hidden;width:100% }   /* 7c792ea478ed0f9e.css */
#sec-manifiesto-texto .LayoutPageImage_LayoutPageImageWrapper__oB2_2.LayoutPageImage_horizontalAlignCenter__mEeJF { margin-left:auto;margin-right:auto }
#sec-manifiesto-texto .LayoutPageImage_LayoutPageImageWrapper__oB2_2.LayoutPageImage_verticalAlignCenter__zRpdX { margin-top:auto;margin-bottom:auto }
#sec-manifiesto-texto .LayoutPageSection_SectionBackground__LQ3jT { inset:0;overflow:hidden;position:absolute;z-index:-1 }   /* feb0deb343f5f1bd.css */
#sec-manifiesto-texto .LayoutPageSection_Section__cJEV_ { align-items:center;container-type:inline-size;display:flex;flex-direction:column;isolation:isolate;padding:var(--gutter) 0;position:relative;width:100% }
#sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.LayoutPageSection_noPadding__oHR0G { padding:0 }
@media (-webkit-min-device-pixel-ratio: 2) { #sec-manifiesto-texto .LayoutPageSection_Section__cJEV_ { background-size:100px } }

/* ---------- 4. Rich text de Oatly (verbatim, solo la rama .u-richTextNoMargin que es la que usa la pagina; orden de su hoja) ---------- */
#sec-manifiesto-texto .u-richTextNoMargin h1,#sec-manifiesto-texto .u-richTextNoMargin h2,#sec-manifiesto-texto .u-richTextNoMargin h3,#sec-manifiesto-texto .u-richTextNoMargin h4,#sec-manifiesto-texto .u-richTextNoMargin h5,#sec-manifiesto-texto .u-richTextNoMargin h6 { page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;font:inherit }
#sec-manifiesto-texto .u-richTextNoMargin h1:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]),#sec-manifiesto-texto .u-richTextNoMargin h2:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]),#sec-manifiesto-texto .u-richTextNoMargin h3:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]),#sec-manifiesto-texto .u-richTextNoMargin h4:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]),#sec-manifiesto-texto .u-richTextNoMargin h5:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]),#sec-manifiesto-texto .u-richTextNoMargin h6:not([class^=h-bjorn-serif-],[class^=h-toni-noveau-pro-],[class^=h-tinny-serif-pro-]) { text-transform:uppercase }
#sec-manifiesto-texto .u-richTextNoMargin p { font:var(--font-paragraph-margo-pro-regular-m,1.25rem/1.4 Margo Pro Regular,sans-serif);margin:calc(.4 * var(--ot-rem)) 0 calc(.5 * var(--ot-rem)) }
@media (min-width: 768px) { #sec-manifiesto-texto .u-richTextNoMargin p { margin:calc(1.5 * var(--ot-rem)) 0 } }
#sec-manifiesto-texto .u-richTextNoMargin h1+*,#sec-manifiesto-texto .u-richTextNoMargin h2+*,#sec-manifiesto-texto .u-richTextNoMargin h3+*,#sec-manifiesto-texto .u-richTextNoMargin h4+*,#sec-manifiesto-texto .u-richTextNoMargin h5+*,#sec-manifiesto-texto .u-richTextNoMargin h6+* { margin-top:0 }
#sec-manifiesto-texto .u-richTextNoMargin .h-margo-pro-regular-m { font:var(--font-heading-margo-pro-regular-m,normal normal 1.5rem/1 Margo Pro Regular,sans-serif) }
#sec-manifiesto-texto .u-richTextNoMargin .h-toni-noveau-pro-xxl { font:var(--font-heading-toni-noveau-pro-xxl,normal normal 11.5rem/.74 Toni Noveau Pro,sans-serif) }
#sec-manifiesto-texto .u-richTextNoMargin .h-toni-noveau-pro-xl-umlauts { font:var(--font-heading-toni-noveau-pro-xl,normal normal 9rem/.778 Toni Noveau Pro,sans-serif);font-feature-settings:"c2sc";text-transform:uppercase }
#sec-manifiesto-texto .u-richTextNoMargin .p-margo-pro-regular-m { font:var(--font-paragraph-margo-pro-regular-m,1.25rem/1.4 Margo Pro Regular,sans-serif) }
/* margenes de los encabezados m/l/xl/xxl (la lista larga de Oatly, solo las clases que usa esta seccion) */
#sec-manifiesto-texto .u-richTextNoMargin .h-margo-pro-regular-m,#sec-manifiesto-texto .u-richTextNoMargin .h-toni-noveau-pro-xl-umlauts,#sec-manifiesto-texto .u-richTextNoMargin .h-toni-noveau-pro-xxl { margin:var(--spacer-2,.5rem) 0 }
#sec-manifiesto-texto .u-richTextNoMargin .p-magda-pro-s { font:var(--font-paragraph-margo-pro-regular-s,1.125rem/1.33 Margo Pro Regular,sans-serif) }   /* alias de Margo s (no existe "Magda") */
#sec-manifiesto-texto .u-richTextNoMargin>:first-child { margin-top:0 }
#sec-manifiesto-texto .u-richTextNoMargin>:last-child { margin-bottom:0 }
#sec-manifiesto-texto .RichText_LayoutPageRichText__9QBU4 { width:100% }   /* 3c2142ea802f9ce8.css / 76e198437d74d5b9.css, cargadas despues de la base */
@media (max-width: 768px) { #sec-manifiesto-texto .RichText_LayoutPageRichText__9QBU4 p { margin-bottom:calc(1.875 * var(--ot-rem)) } }

/* ---------- 5. Lo que Oatly pone en linea o por JS (medidas en SPEC-reporte.md, s1 y s11) ---------- */
/* hero section#reset: border-color:#000000;border-width:0 0 1px 0;border-style:solid. Arriba, el aire que en Oatly da el padding-top
   de main (--oatly-content-margin-top menos el header fijo: gutter/2 + 2px; en celular gutter/2). */
#sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.ot-reset { border-color:#000000;border-width:0 0 1px 0;border-style:solid; padding-top: calc(var(--gutter) / 2 + 2px); }
/* (fase 4) sin los huecos del globo y de la marca: el hero abre con un .ot-gutter-1 (abajo) */
/* gutters: padding:calc(var(--gutter) * K) calc(var(--gutter) / 2); K = 0.125, 0.5 y 1 (en el hero, en celular, 0.125, 1.5 y 2) */
#sec-manifiesto-texto .LayoutPage-gutter.ot-gutter-0125 { padding:calc(var(--gutter) * 0.125) calc(var(--gutter) / 2) }
#sec-manifiesto-texto .LayoutPage-gutter.ot-gutter-05 { padding:calc(var(--gutter) * 0.5) calc(var(--gutter) / 2) }
#sec-manifiesto-texto .LayoutPage-gutter.ot-gutter-1 { padding:calc(var(--gutter) * 1) calc(var(--gutter) / 2) }
/* seccion exterior del prologo: border-bottom 1px; su fondo absoluto (.ot-margen, inset 0, z -1) va VACIO desde la fase 4: en Oatly
   lleva sidemargin.svg (no-repeat, left center, 25 %), que no es un margen rayado sino el texto en ingles "NOTHING TO BE WRITTEN IN
   THIS MARGIN" como trazado (referencias/oatly/future-of-taste/mirror/img/sidemargin.svg). Si Emilio quiere un margen en español
   (BORRADOR a proponer), se dibuja un svg del mismo tamaño (360 x 196) y se pone aqui:
   background-image:url("../../assets/v6/manifiesto/<margen-es>.svg");background-repeat:no-repeat;background-position:left center;background-size:25% */
#sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.ot-exterior { border-color:#000000;border-width:0 0 1px 0;border-style:solid }
#sec-manifiesto-texto .LayoutPageSection_SectionBackground__LQ3jT.ot-margen { background:none }
/* section#prologue: width:75vw (90vw en celular, por JS); bordes 0 1px 0 1px #000 */
#sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.ot-prologue { width:75vw;border-color:#000000;border-width:0 1px 0 1px;border-style:solid }
/* columnas del sello: la vacia width:85 %; la del sello width:12 % (20 % en celular) y margin-top:calc(var(--gutter) * -2) */
#sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ.ot-col-aire { width:85% }
#sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ.ot-col-sello { width:12%;margin-top:calc(var(--gutter) * -2) }
/* la imagen del sello con la caja cuadrada de next/image (los span en linea de Oatly) */
#sec-manifiesto-texto .ot-img-caja { box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative }
#sec-manifiesto-texto .ot-img-cuadro { box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100% }
#sec-manifiesto-texto .ot-img-caja img { position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100% }
@media (max-width: 767px) {
  #sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.ot-reset { padding-top: calc(var(--gutter) / 2); }
  #sec-manifiesto-texto .ot-reset .LayoutPage-gutter.ot-gutter-05 { padding:calc(var(--gutter) * 1.5) calc(var(--gutter) / 2) }
  #sec-manifiesto-texto .ot-reset .LayoutPage-gutter.ot-gutter-1 { padding:calc(var(--gutter) * 2) calc(var(--gutter) / 2) }
  #sec-manifiesto-texto .LayoutPageSection_Section__cJEV_.ot-prologue { width:90vw }
  #sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ.ot-col-aire { width:80% }   /* medido en Oatly a 390: 279.2 px de 349 = 80 % (su JS lo pone junto con el 20 % del sello; si no, la fila se parte y el sello cae al centro) */
  #sec-manifiesto-texto .SectionColumn_SectionColumn__ewl5M.SectionColumn_columns2__aYmuJ.ot-col-sello { width:20% }
}

/* ---------- 6. Propio: titulo con acento (desviacion 3) y firma plegada (desviacion 8) ---------- */
#sec-manifiesto-texto .u-richTextNoMargin .h-toni-noveau-pro-xxl.ot-con-acento { line-height: .88; text-transform: uppercase; }
/* h6.ot-firma: el "(BY ...)" de Oatly. Vacia va plegada y el parrafo que sigue recupera el margen normal de parrafo (la regla h6+* de
   Oatly se lo quitaba): 24 px desde 768, 5.6 en celular. Con texto dentro, el h6 mide y espacia como en Oatly (44.8 px + 14.4 y 14.4). */
#sec-manifiesto-texto .u-richTextNoMargin .ot-firma:empty { display: none; }
#sec-manifiesto-texto .u-richTextNoMargin .ot-firma:empty + p { margin-top: calc(.4 * var(--ot-rem)); }
@media (min-width: 768px) { #sec-manifiesto-texto .u-richTextNoMargin .ot-firma:empty + p { margin-top: calc(1.5 * var(--ot-rem)); } }

/* ---------- 7. Martillo de Enoch con su cinta (de la version anterior; Emilio, 2026-10-20: "pegada con tape como las de la parte
   roja"). Celular: en flujo, a la derecha, arriba del parrafo de los luditas. Desde 768: flotada a la derecha dentro del parrafo
   (entre el texto de 957.7 px y cada borde de la columna de Oatly solo sobran 40.5 px a 1440: al margen no cabe). ---------- */
#sec-manifiesto-texto .mt-luditas { position: relative; }
#sec-manifiesto-texto .mt-luditas::after { content: ""; display: block; clear: both; }
#sec-manifiesto-texto .mt-martillo { position: relative; z-index: 1; margin: 0 0 28px auto; width: 48%; max-width: 240px; }   /* z 1: por encima del parrafo aunque GSAP le deje un transform (fase 4) */
#sec-manifiesto-texto .mt-martillo-foto { position: relative; transform: rotate(2.5deg); }
#sec-manifiesto-texto .mt-martillo-foto img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 26px -10px rgba(0,0,0,.22); }
#sec-manifiesto-texto .mt-martillo-foto::before { content: ""; position: absolute; left: 16%; top: -4.5%; width: 62%; height: 10.5%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(222,220,215,.9) 0%, rgba(214,212,207,.86) 55%, rgba(206,204,199,.9) 100%);
  clip-path: polygon(0.0% 0.0%, 0.0% 0.0%, 3.2% 11.1%, 0.0% 22.2%, 3.2% 33.3%, 0.0% 44.4%, 3.2% 55.6%, 0.0% 66.7%, 3.2% 77.8%, 0.0% 88.9%, 3.2% 100.0%, 100.0% 100.0%, 96.8% 100.0%, 100.0% 88.9%, 96.8% 77.8%, 100.0% 66.7%, 96.8% 55.6%, 100.0% 44.4%, 96.8% 33.3%, 100.0% 22.2%, 96.8% 11.1%, 100.0% 0.0%); transform: rotate(-3.5deg); mix-blend-mode: multiply; }
@media (min-width: 768px) {
  #sec-manifiesto-texto .mt-martillo { float: right; width: 28%; max-width: 210px; margin: 6px 0 16px 32px; }
}

/* el CTA que sigue a la hoja entra con un velo del color del papel (variable --velo-e-rgb en neutomni-cta/section.css; blanco por
   defecto): color medio de seamless-paper.png de Oatly medido con PIL, #f2f2f2 (241.8, 241.6, 241.9) */
body:has(#sec-manifiesto-texto) #sec-neutomni-cta { --velo-e-rgb: 242 242 242; }

/* ------------------------------------------------------------------ cita (Emilio, 2026-10-21: "te late si usamos esa forma de cita para el
   texto de No estamos en contra de la publicidad..."). Tal cual las citas del reporte de Oatly (medidas en vivo): caja RichText con 96 px
   de aire a los lados (8 px en celular; en Oatly lo cambia su JS en el estilo en linea, aqui va por CSS), un separador xl con espacio
   duro, la cita en Margo xl (clamp de 1.5 a 2 rem, interlinea 1.2: 29.9 px a 1440 y 21 px a 390) centrada y en el rojo de Oatly, la
   etiqueta de lugar (en Oatly "LONDON"; aqui prevista y vacia, plegada con :empty) y un separador s. En celular la cita queda a 21 px,
   abajo de los 24 px de texto grande, y el rojo de Oatly da 3.9:1 sobre la hoja: ahi va el rojo del sello #d4181f (4.75:1). */
#sec-manifiesto-texto { --font-paragraph-margo-pro-regular-xl: clamp(calc(1.5 * var(--ot-rem)), calc(1.5 * var(--ot-rem) + (100vw - 48 * var(--ot-rem)) * (2 - 1.5) / 57), calc(2 * var(--ot-rem)))/1.2 "ot-Margo Pro Regular Local", sans-serif; }
#sec-manifiesto-texto .u-richTextNoMargin .p-margo-pro-regular-xl { font: var(--font-paragraph-margo-pro-regular-xl, 2rem/1.25 Margo Pro Regular, sans-serif) }
#sec-manifiesto-texto .u-richTextNoMargin .p-margo-pro-regular-s { font: var(--font-paragraph-margo-pro-regular-s, 1.125rem/1.33 Margo Pro Regular, sans-serif) }
#sec-manifiesto-texto .ot-cita { padding-right: 96px; padding-left: 96px; }
#sec-manifiesto-texto .ot-cita-texto { color: #ed1c24; }
#sec-manifiesto-texto .ot-cita-de:empty { display: none; }
@media (max-width: 767px) {
  #sec-manifiesto-texto .ot-cita { padding-right: 8px; padding-left: 8px; }
  #sec-manifiesto-texto .ot-cita-texto { color: #d4181f; }
}