/* ===========================================================
   ECOPLAST SRL — sistema visual
   Colores medidos del logo actual (Instagram, oct 2026).
   El verde de marca da 2,32:1 sobre blanco: NO se usa para
   texto sobre claro. Sobre la tinta da 5,81:1 y ahí sí brilla.
   Por eso el inicio es oscuro: es lo que el color permite.
   =========================================================== */

:root{
  /* --- marca --- */
  --verde:      #3BC33B;   /* sólo sobre fondo oscuro (5,81:1 sobre --tinta) */
  /* 4,51:1 sobre el gris de sección (#F3F7F4) y 5,0:1 sobre blanco.
     El #298829 anterior pasaba sobre blanco pero fallaba sobre el gris
     por poco: 4,18. Medido con contrast.py, no estimado. */
  --verde-txt:  #278227;
  --verde-med:  #33AA33;   /* títulos grandes y bordes sobre blanco — 3,03:1 */
  --tinta:      #043531;   /* texto sobre blanco — 13,47:1 */

  /* --- superficies --- */
  --noche:      #0C2C20;   /* medido: las 3 referencias usan verde oscuro, no negro */
  --noche-2:    #143D2E;
  --papel:      #FFFFFF;
  --papel-2:    #F3F7F4;
  --linea:      #DCE6E0;
  --linea-osc:  rgba(59,195,59,.22);

  /* --- texto --- */
  --txt:        #0C2320;
  --txt-2:      #4A615C;
  --txt-noche:  #EAF4EE;
  --txt-noche-2:#9FBDB2;

  /* --- ritmo --- */
  --seccion:    clamp(72px, 9vw, 118px);
  --radio:      10px;   /* medido: las referencias usan 4-8px, no 18 */
  --radio-sm:   6px;
  /* 1180 dejaba el sitio angosto en pantallas grandes: en la MacBook de
     1512 sobraban 166 px por lado. A 1340 quedan 86, y el contenido
     aprovecha la pantalla sin que las líneas de texto se estiren: los
     párrafos tienen su propio tope en ch, no en píxeles. */
  --ancho:      1340px;
  --gutter:     clamp(20px, 5vw, 44px);

  /* --- tipografía (laboratorio-tipografia, opción D, 16/10/2026) ---
     Títulos en Space Grotesk y texto en Inter, servidas desde el sitio: desde
     Google frenarían el primer dibujado. El "respaldo" es Arial ajustada a
     las medidas de cada una: mientras la fuente llega, el texto ocupa el
     mismo lugar y la página no salta. */
  --sans: "Inter", "Inter respaldo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --titulos: "Space Grotesk", "Space Grotesk respaldo", var(--sans);
}

/* EL SITIO AL 95 %, como el zoom de Chrome (pedido de Tomás, 26/10/2026).
   `zoom` achica todo lo que está en px, pero a diferencia del zoom del
   navegador también achica lo que se mide contra la pantalla: con .95, la
   escena fija del recorrido pasaba de 754 a 716 px y dejaba una franja
   abajo, y la rueda se encogía. MEDIDO. Por eso cada regla que llena la
   pantalla (vh, vw) se divide por --z: así vuelve a ocupar lo mismo que
   ocuparía con el zoom de Chrome. Las tipografías con vw no se compensan:
   en escritorio ya están en su tope en px, que el zoom achica igual que
   Chrome. Desde 1024 px: en el celular Chrome no hace zoom y achicar la
   letra ahí la vuelve más difícil de leer. */
:root{ --z:1 }
@media (min-width:1024px){
  :root{ --z:.95 }
  html{ zoom:var(--z) }
}

/* Variables: Inter de 400 a 700 en un solo archivo; Space Grotesk sólo en 700,
   que es su peso más alto (el 800 del laboratorio se dibujaba igual). Sólo el
   juego latino: alcanza para el castellano y pesa la cuarta parte. Licencia
   SIL Open Font, que permite servirlas desde acá. */
@font-face{font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/inter-latin.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url(../fonts/space-grotesk-700-latin.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Medido sobre los archivos con fontTools, contra Arial y Arial Negrita, con
   una muestra de los textos del sitio. */
@font-face{font-family:"Inter respaldo"; src:local("Arial"), local("ArialMT");
  size-adjust:107.08%; ascent-override:90.47%; descent-override:22.53%; line-gap-override:0%}
@font-face{font-family:"Space Grotesk respaldo"; font-weight:700; src:local("Arial Bold"), local("Arial-BoldMT");
  size-adjust:100.6%; ascent-override:97.81%; descent-override:29.02%; line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
/* Cualquier regla con display: (.pc{display:grid}, .capa{display:flex}…) le
   gana a [hidden] por orden o especificidad, y el elemento sigue ocupando
   lugar. Pasó dos veces. Se cierra acá, de una vez. */
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papel); color:var(--txt);
  font-family:var(--sans); font-size:16.5px; line-height:1.5; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--verde-txt)}
/* títulos 700 · apretado −0,045 · interlineado 1,06 (laboratorio, opción D) */
h1,h2,h3{margin:0; font-family:var(--titulos); line-height:1.06; letter-spacing:-.045em; font-weight:700;
  text-wrap:balance}  /* ningún título termina en una palabra sola */
p{margin:0 0 1em; text-wrap:pretty}  /* evita viudas al final del párrafo */

.env{max-width:var(--ancho); margin:0 auto; padding:0 var(--gutter)}
.saltar{position:absolute; left:-9999px; min-height:44px;
  display:flex; align-items:center; padding:12px 18px}
.saltar:focus{left:12px; top:12px; z-index:999; background:var(--verde-txt); color:#fff;
  padding:12px 18px; border-radius:var(--radio-sm); min-height:44px;
  display:flex; align-items:center}

/* ===================== ENCABEZADO: PÍLDORA FLOTANTE =====================
   La barra no toca los bordes: flota con aire alrededor y se apoya sobre el
   hero. Al bajar se encoge y se opaca. El contenido del hero lleva el espacio
   que la píldora ocupa, porque es fija y no empuja nada.                   */
/* El menú no se achica con el 95 % (pedido de Tomás): el zoom de un hijo se
   multiplica con el de la página, así que 1/--z lo deja en tamaño real. */
.cab{zoom:calc(1 / var(--z)); position:fixed; top:0; left:0; right:0; z-index:80; padding:14px var(--gutter);
  transition:padding .25s ease; pointer-events:none}
.cab__in{pointer-events:auto; max-width:var(--ancho); margin:0 auto; height:66px;
  display:flex; align-items:center; gap:22px; padding:0 10px 0 22px;
  background:rgba(12,44,32,.52); border:1px solid rgba(255,255,255,.14);
  border-radius:100px; backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.9);
  transition:height .25s ease, background .25s ease, box-shadow .25s ease}
.cab.bajo{padding-top:9px}
.cab.bajo .cab__in{height:58px; background:rgba(7,30,21,.76);
  box-shadow:0 16px 38px -24px rgba(0,0,0,.95)}

.marca{display:flex; align-items:center; text-decoration:none; margin-right:auto; min-height:44px; flex:none}
.marca img{height:27px; width:auto; transition:height .25s ease}
.cab.bajo .marca img{height:23px}
.visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
.pie__logo{height:62px; width:auto; margin-bottom:14px}
picture{display:contents}
picture source{display:none}  /* ver gotchas: display:contents rompe <source> */

.nav{display:flex; gap:2px}
.nav a{color:var(--txt-noche-2); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:9px 13px; border-radius:100px; transition:color .2s, background .2s;
  min-height:44px; display:flex; align-items:center; white-space:nowrap}
/* con seis enlaces la píldora se queda sin aire antes de los 1180 */
@media (max-width:1120px){ .nav a{font-size:13.5px; padding:9px 10px} }
@media (max-width:1000px){ .cab__in{gap:12px} .nav a{padding:9px 8px} }
.nav a:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav a[aria-current]{color:#fff; background:rgba(255,255,255,.1)}
.cab .wa{display:inline-flex; align-items:center; gap:8px; background:var(--verde);
  color:#04231C; font-weight:600; font-size:14.5px; text-decoration:none;
  padding:0 17px; height:46px; border-radius:100px; transition:filter .2s; flex:none}
.cab .wa:hover{filter:brightness(1.08)}
.cab .wa svg{width:18px; height:18px; flex:none}
.hamb{display:none; width:46px; height:46px; border:0; background:none; cursor:pointer;
  align-items:center; justify-content:center; border-radius:50%; flex:none}
.hamb span{display:block; width:20px; height:2px; background:var(--txt-noche); position:relative;
  transition:background .14s ease}
.hamb span::before,.hamb span::after{content:''; position:absolute; left:0; width:20px;
  height:2px; background:var(--txt-noche); border-radius:2px;
  transition:top .2s ease, transform .22s cubic-bezier(.2,.8,.25,1) .04s}
.hamb span::before{top:-6px} .hamb span::after{top:6px}
/* Abierto es una cruz: la barra del medio se apaga y las otras dos se juntan
   en el centro y recién ahí giran. Primero el viaje, después el cruce. */
.hamb[aria-expanded="true"] span{background:transparent}
.hamb[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.hamb[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ===================== INICIO ===================== */
.hero{position:relative; background:var(--noche); color:var(--txt-noche);
  padding:calc(var(--seccion) + 70px) 0 42px; overflow:hidden; isolation:isolate;
  /* la pantalla entera: con 86vh asomaba el borde de la sección siguiente.
     svh es la altura sin la barra del navegador, que en mobile aparece y desaparece. */
  min-height:calc(100vh / var(--z)); min-height:calc(100svh / var(--z));
  display:flex; flex-direction:column; justify-content:center}
.hero::after{content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 55% at 72% 38%, rgba(59,195,59,.17), transparent 68%)}
.hero__in{max-width:var(--ancho)}
/* El hero es flex en columna y .env trae margin:0 auto. Dentro de un flex eso
   hace que el bloque ENCOJA y se centre: medía 749px con 266 de margen a cada
   lado. El texto estaba alineado a la izquierda de su caja, pero la caja en el
   medio de la pantalla. Con width:100% el bloque ocupa el ancho y el titular
   arranca en el margen, que es lo que se pedía. */
.hero > .env{width:100%}
.hero__sello{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verde);
  border:1px solid var(--linea-osc); border-radius:100px; padding:8px 15px; margin-bottom:26px}
/* Inicio "Editorial" (laboratorio-inicio, opción B · velo 0,98 · titular ×1,1):
   el titular manda, casi un afiche; la bajada se acorta y los números van en
   una franja con divisiones. */
/* El tope de 12vh es para pantallas bajas: a 1280×800 el titular de 118 px
   dejaba los botones cortados en el borde. Con el tope baja a 96 px ahí; en
   una pantalla de 900 px de alto o más queda en el tamaño elegido. */
.hero h1{font-size:min(calc(clamp(46px, 8.4vw, 112px) * 1.1), calc(9.8vh / var(--z))); color:#fff; margin-bottom:16px;
  line-height:.96; max-width:12ch}
/* El corte después de "El plástico" existe sólo en el celular: en pantalla
   grande el titular entra en dos líneas y ese salto sobra. */
.hero h1 br.q3{display:none}
.hero h1 em{font-style:normal; color:var(--verde)}
.hero__baj{font-size:clamp(17px,2vw,20px); color:var(--txt-noche-2); max-width:40ch; margin-bottom:26px}
.hero__cta{display:flex; flex-wrap:wrap; gap:13px}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:16px;
  text-decoration:none; padding:15px 26px; border-radius:100px; min-height:52px; transition:.2s}
.btn svg{width:20px; height:20px; flex:none}
.btn--p{background:var(--verde); color:#04231C}
.btn--p:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn--s{border:1px solid rgba(255,255,255,.26); color:var(--txt-noche)}
.btn--s:hover{background:rgba(255,255,255,.08)}
.hero__datos{display:flex; gap:0; margin-top:74px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.18); flex-wrap:wrap}
.dato{padding-inline:clamp(10px,2.4vw,34px); border-left:1px solid rgba(255,255,255,.16)}
.dato:first-child{padding-left:0; border-left:0}
.dato b{display:block; font-family:var(--titulos); font-size:clamp(17px,3.6vw,46px); color:var(--verde); letter-spacing:-.045em; line-height:1.06}
.dato span{font-size:13.5px; color:var(--txt-noche-2); display:block; margin-top:6px}

/* planeta del inicio */
.planeta{width:100%; max-width:430px; margin-inline:auto; aspect-ratio:1; position:relative}
.planeta__mundo{position:absolute; inset:0; width:100%; height:100%}
.planeta__aros{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.planeta__halo{position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle, rgba(59,195,59,.26), transparent 66%); filter:blur(18px); z-index:-1}
.gira{transform-origin:50% 50%; animation:gira 26s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .gira{animation:none} }

/* ===================== EL RECORRIDO (scroll) ===================== */
/* El recorrido va EN CLARO: el oscuro quedó para la entrada y el pie. Todo lo
   que sigue tenía el color escrito para fondo oscuro y se rehízo acá. */
.ciclo{background:var(--papel-2); color:var(--txt); position:relative}
.ciclo::before{content:''; position:absolute; inset:0;
  background:radial-gradient(70% 40% at 50% 0%, rgba(59,195,59,.09), transparent 62%)}
.ciclo__cab{padding-block:var(--seccion) 14px; position:relative;
  display:flex; align-items:center; gap:clamp(20px,3.5vw,44px)}
.ciclo__cab h2{font-size:clamp(31px,4.2vw,50px); color:var(--tinta); margin-bottom:14px}
/* MEDIDO: --verde-med da 2,80:1 sobre --papel-2, por debajo del 3:1 que pide
   hasta un título grande. Va --verde-txt, el verde para texto sobre claro. */
.ciclo__cab h2 em{font-style:normal; color:var(--verde-txt)}
.ciclo__cab p{color:var(--txt-2); max-width:58ch; font-size:17.5px; margin:0}

.escena{position:relative}
.escena__fijo{position:sticky; top:72px; height:calc(100vh / var(--z) - 72px); min-height:540px; overflow:hidden}
/* El dibujo vive en la columna derecha y las tarjetas en la izquierda:
   centrado se montaban una encima del otro. */
/* El globo de la marca gira muy por detrás para que el fondo no quede vacío
   (opción 1 del laboratorio). Va debajo de todo: la tarjeta de texto es opaca
   y queda por encima, así que no toca la lectura. El giro sobre su eje lo
   resuelve globo.js; sin ese archivo queda el SVG quieto. */
.escena__mundo{position:absolute; z-index:0; pointer-events:none; height:auto;
  width:min(96%,900px); right:-6%; top:50%; translate:0 -50%; opacity:.13}
.escena__cols{position:relative; z-index:1; height:100%; display:grid;
  grid-template-columns:.66fr 1.34fr; align-items:center}
/* La rueda ocupa su columna entera y se apoya en el borde derecho: así crece
   hacia la derecha, donde hay lugar, y no se acerca a la tarjeta de texto.
   El tope de 94vh es para que el cuadrado no se salga de la escena fija. */
.escena__art{grid-column:2; justify-self:end; width:min(calc(92vh / var(--z)), calc(62vw / var(--z))); aspect-ratio:1;
  /* se apoya cerca del borde de la pantalla, no del contenedor: el lugar libre
     está ahí, y así la rueda crece sin acercarse a la tarjeta de texto.
     El margen vuelve a cero solo cuando la pantalla deja de tener sobrante. */
  margin-right:min(0px, calc((var(--ancho) - 100vw / var(--z))/2 + 24px));
  position:relative}
/* En tablets la rueda se achica: con 62vw la foto arrancaba tan a la
   izquierda que la tarjeta del paso le pasaba por encima. MEDIDO: -68 px en
   900x700 y -73 en 1024x768. Despejado para dejar unos 40 px de aire: la
   rueda no puede pasar del 47 % del ancho en ese tramo. Desde 1180 vuelve
   la regla general, que ya deja 73 px o más. */
@media (min-width:761px) and (max-width:1179px){
  .escena__art{width:min(calc(92vh / var(--z)), calc(47vw / var(--z)))}
}
/* RUEDA DE PASOS (opción E3 del laboratorio).
   La activa va centrada y entera; las vecinas orbitan adentro del cuadro,
   veladas y con el ícono de su paso encima: anticipan el que viene y
   resumen el que pasó. El radio está calculado para que nada se salga:
   la vecina queda a 55% del centro y mide 42%: 55 + 21 = 76% de su
   propio ancho, que entra en el cuadro. Medido, no estimado. */
.escena__f{position:absolute; left:16%; top:16%; width:68%; height:68%; margin:0;
  border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea);
  box-shadow:0 28px 58px -34px rgba(4,53,49,.55);
  transition:transform .82s cubic-bezier(.2,.8,.25,1), opacity .82s ease}
.escena__f img{width:100%; height:100%; object-fit:cover; display:block}
.escena__f .velo{position:absolute; inset:0; display:grid; place-items:center;
  /* Sobre claro el velo va HACIA EL PAPEL, no hacia el negro: velando oscuro,
     las fotas dormidas quedaban sucias contra el fondo en vez de apagarse. */
  background:rgba(243,247,244,.86); opacity:0; transition:opacity .5s ease}
.escena__f .velo svg{width:44%; height:44%; color:var(--verde-txt)}
.escena__f:not(.act) .velo{opacity:1}

/* Los pasos pasan POR ENCIMA del dibujo fijo: se los sube el alto
   exacto de la escena fija. Sin esto quedan debajo y el dibujo
   nunca coincide con el texto que lo explica. */
.pasos{position:relative; z-index:2; margin-top:calc(-100vh / var(--z) + 72px)}
.paso{min-height:calc(78vh / var(--z)); display:flex; align-items:center; padding:0 0 calc(10vh / var(--z))}
.paso__caja{max-width:min(430px, 40%); background:rgba(233,243,236,.95);
  backdrop-filter:blur(10px); border:1px solid var(--linea);
  border-radius:var(--radio); padding:30px 32px;
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .56s cubic-bezier(.2,.8,.25,1)}
.paso.on .paso__caja{opacity:1; transform:none}
.paso.fue .paso__caja{opacity:0; transform:translateY(-16px)}
.paso__foto{display:none; margin:0 0 20px; aspect-ratio:3/2; border-radius:var(--radio);
  overflow:hidden; border:1px solid var(--linea); box-shadow:0 20px 44px -32px rgba(4,53,49,.5)}
.paso__foto img{width:100%; height:100%; object-fit:cover; display:block}
.paso__n{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:var(--verde); color:#04231C; font-weight:600; font-size:16px;
  margin-bottom:17px}
.paso h3{font-size:clamp(23px,2.6vw,30px); color:var(--tinta); margin-bottom:11px}
.paso p{color:var(--txt-2); margin:0; font-size:16.5px}
/* La tarjeta crece con la pantalla, igual que la rueda.
   Antes tenía un tope fijo de 430 px mientras la rueda escala con vh y vw:
   en pantallas grandes la tarjeta quedaba chica y lejos. MEDIDO, el hueco
   entre tarjeta y foto iba de 129 a 333 px según la pantalla, y en la
   MacBook de 1512 pasó de 166 a 246 cuando el sitio se ensanchó a 1340.
   El ancho sale de despejar ese hueco: la rueda se apoya en vw - 68, mide
   min(92vh,62vw) y la foto activa arranca en el 16 % de ella; la tarjeta
   arranca en el borde del contenedor. Despejado para un hueco de 120 px:
     ancho = 50vw + 438px - .84 * min(92vh, 62vw)
   MEDIDO: 120 px en 1440x900, 1512x826 y 1920x1080; 114 en 1280x800.
   Por debajo de 1280 queda la regla de antes: ahí la foto arranca tan a la
   izquierda que la tarjeta no entra, y eso se resuelve achicando la rueda,
   no estirando esto. */
@media (min-width:1280px){
  .paso__caja{max-width:none; padding:36px 40px;
    width:clamp(430px, calc(50vw / var(--z) + 438px - .84 * min(92vh / var(--z), 62vw / var(--z))), 640px)}
  .paso h3{font-size:clamp(28px, 2.2vw, 34px)}
  .paso p{font-size:17.5px; line-height:1.6}
}
.ciclo__pie{text-align:center; padding-block:26px var(--seccion); position:relative}

/* ===================== SECCIONES CLARAS ===================== */
.sec{padding:var(--seccion) 0}
.sec--gris{background:var(--papel-2)}
.sec__cab{max-width:62ch; margin-bottom:46px}
.sec__cab.cen{margin-inline:auto; text-align:center}
/* Cabecera con la acción al costado: el texto a la izquierda, como el hero y
   el recorrido, y el enlace al catálogo a la derecha. Esta sección era la
   única centrada del inicio y cortaba el eje de la página. Con flex-wrap, en
   pantalla angosta el botón cae solo debajo del texto. */
.sec__cab--fila{max-width:none; display:flex; align-items:flex-end;
  justify-content:space-between; gap:20px 32px; flex-wrap:wrap}
.sec__cab--fila .sec__cab__txt{max-width:62ch}
.sec__cab--fila .btn{flex:none}
.volanta{display:block; font-size:13px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--verde-txt); margin-bottom:15px}
.sec h2{font-size:clamp(28px,3.4vw,40px);
  margin-bottom:17px}
.sec__cab p{color:var(--txt-2); font-size:17.5px; margin:0}

/* productos */
.prods{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
/* las cuatro fichas entran en una fila o van de a dos: nunca una sola colgada abajo */
@media (max-width:1179px){ .prods{grid-template-columns:repeat(2,1fr)} }
/* En el celular las cuatro fichas se deslizan de a una en vez de apilarse:
   la siguiente asoma por el borde para que se vea que hay más. Se desliza
   sin guion, con el enganche del navegador. */
@media (max-width:620px){
  .prods{display:flex; overflow-x:auto; gap:14px;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .prods::-webkit-scrollbar{display:none}
  .prod{flex:0 0 84%; scroll-snap-align:start}
  /* La aparición al entrar mira la pantalla, no el carrusel: las fichas 3 y 4
     quedaban en cero y se deslizaba hacia el vacío. Acá entran visibles. */
  .anima .prods .ap{opacity:1; transform:none; transition:none}
}
.prod{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:0 0 26px; display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .22s, transform .22s, box-shadow .22s}
/* En una pantalla táctil el :hover se queda pegado en la ficha que tocaste
   al deslizar: quedaba una sola con marco verde, sin razón. Es para punteros.
   En el carrusel el marco lo lleva la ficha en la que estás parado. */
@media (hover:hover){
  .prod:hover{border-color:var(--verde-med); transform:translateY(-3px);
    box-shadow:0 20px 44px -30px rgba(4,53,49,.45)}
}
.prod--eje{border-color:var(--verde-med)}
.prod__ico{width:52px; height:52px; border-radius:13px; background:#E7F6E9;
  display:grid; place-items:center; margin-bottom:19px}
.prod__ico svg{width:27px; height:27px; stroke:var(--verde-txt); fill:none; stroke-width:1.7}
.prod h3{font-size:20px; margin:0 26px 9px}
.prod p{color:var(--txt-2); font-size:15.5px; margin:0 26px 15px}
.prod ul{list-style:none; margin:0 26px 18px; padding:0; font-size:14.5px; color:var(--txt-2)}
.prod li{padding-left:19px; position:relative; margin-bottom:7px}
.prod li::before{content:''; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--verde-med)}
.prod__wa{margin:auto 26px 0; align-self:flex-start}

/* compra de material */
/* La bajada entra en dos líneas: con la columna de antes caía una tercera
   con "lo coordinamos" sola. El bloque del número no necesitaba tanto ancho. */
.compra{background:var(--noche); color:var(--txt-noche); border-radius:var(--radio);
  padding:clamp(34px,5vw,58px); display:grid; grid-template-columns:1.48fr .52fr;
  gap:36px; align-items:center; position:relative; overflow:hidden}
.compra::after{content:''; position:absolute; inset:0;
  background:radial-gradient(52% 70% at 88% 50%, rgba(59,195,59,.19), transparent 70%)}
.compra>*{position:relative; z-index:1}
.compra h2{color:#fff; font-size:clamp(27px,3.3vw,40px); margin-bottom:15px}
.compra h2 em{font-style:normal; color:var(--verde)}
.compra p{color:var(--txt-noche-2); margin-bottom:0; max-width:none; text-wrap:balance}
.compra__kg{text-align:center}
.compra__kg b{display:block; font-family:var(--titulos); font-size:clamp(44px,6vw,66px); color:var(--verde);
  letter-spacing:-.045em; line-height:1.06}
.compra__kg span{font-size:14.5px; color:var(--txt-noche-2)}

/* pie */
.pie{background:var(--noche); color:var(--txt-noche-2); padding:var(--seccion) 0 30px;
  border-top:1px solid var(--linea-osc)}
.pie__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:46px}
.pie h3{color:#fff; font-size:15px; margin:0 0 17px}
.pie a{color:var(--txt-noche-2); text-decoration:none; display:inline-flex; align-items:center;
  min-height:44px; font-size:15.5px}
.pie a:hover{color:var(--verde)}
.pie ul{list-style:none; margin:0; padding:0}
/* un teléfono no se parte a la mitad: en el pie compacto quedaba "454-" / "1265" */
.sin-corte{white-space:nowrap}
.pie__bar{border-top:1px solid var(--linea-osc); padding-top:24px; display:flex;
  justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:13.5px}
.pie__bar a{font-size:13.5px}
.firma{display:inline-flex; align-items:center; gap:8px; min-height:44px}
.firma img{height:17px; width:auto; opacity:.85}

/* ===================== MOBILE ===================== */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr; gap:38px}
  .planeta{max-width:320px; order:-1}
  .compra{grid-template-columns:1fr; text-align:center}
  .compra p{margin-inline:auto}
  .pie__top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* 56 px entre secciones en el celular (laboratorio-largo, opción E) */
  :root{--seccion:56px}
  body{font-size:16px}
  /* Pie compacto (opción E): repetía casi lo mismo que la sección de
     contacto. Logo y frase en una fila; contacto y dirección lado a lado. */
  .pie{padding-top:44px}
  .pie__top{grid-template-columns:1fr 1fr; gap:24px 18px; margin-bottom:26px}
  .pie__top > div:first-child{grid-column:1/-1; display:flex; align-items:center; gap:16px}
  .pie__logo{height:46px; margin:0}
  .pie__top > div:first-child p{margin:0; font-size:14px !important}  /* le gana al style del HTML */
  .pie h3{margin-bottom:8px}
  .pie a{font-size:14px; min-height:44px}
  .pie__bar{justify-content:center; text-align:center; padding-top:16px; gap:10px}

  /* ---- el inicio en una pantalla angosta ----
     Entra más aire sacándole tamaño a cada pieza, no espacio entre ellas:
     el titular baja a tres líneas cortas, los dos botones comparten renglón
     y los cuatro números se achican hasta entrar en una sola fila. */
  .hero__sello{font-size:12px; padding:7px 13px; margin-bottom:20px}
  .hero h1{font-size:calc(clamp(36px,10.6vw,46px) * 1.1); margin-bottom:17px}
  .hero h1 br.q3{display:inline}
  .hero__baj{font-size:16.5px; margin-bottom:26px}
  .hero__cta{gap:10px; flex-wrap:nowrap}
  .hero__cta .btn{padding:14px 17px; font-size:15px; min-height:50px; white-space:nowrap}
  .sellos{margin-top:20px; gap:8px}
  .sellos li{padding:5px 13px 5px 7px; font-size:11.5px}
  .hero__datos{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    align-items:start; margin-top:30px; padding-top:18px}
  .dato{padding-inline:7px}
  .dato b{font-size:15.5px}
  .dato span{font-size:10.5px; line-height:1.28; margin-top:5px}
}

/* ---- la planta: texto y foto ---- */
.planta-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:center}
.planta-foto{margin:0; border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3}
.planta-foto img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:860px){
  .planta-grid{grid-template-columns:1fr}
  /* en vertical el panorama muestra sólo el centro: se recorta más alto */
  .planta-foto{aspect-ratio:3/2}
}

/* ---- foto de la ficha de producto ---- */
.prod__foto{margin:0 0 20px; aspect-ratio:16/10; overflow:hidden; background:var(--papel-2)}
.prod__foto img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease}
@media (hover:hover){ .prod:hover .prod__foto img{transform:scale(1.04)} }

/* ===================== CATÁLOGO ===================== */
/* La píldora es fija y no empuja nada: cada página le deja su lugar.
   Sin esto, la volanta quedaba debajo del encabezado. */
/* Compacta (26/10): Tomás quiere ver lo de abajo al abrir. Arriba alcanza con
   el alto del menú fijo (66) y aire: el colchón de --seccion + 54 eran 172 px. */
.cat-cab{background:var(--noche); color:var(--txt-noche); padding:calc(66px + clamp(28px, 3.4vw, 44px)) 0 28px;
  position:relative; overflow:hidden}
.cat-cab::after{content:''; position:absolute; inset:0;
  background:radial-gradient(58% 70% at 82% 20%, rgba(59,195,59,.15), transparent 70%)}
.cat-cab>*{position:relative; z-index:1}
.cat-cab .volanta{color:var(--verde)}
.cat-cab h1{font-size:clamp(30px,3.8vw,44px); color:#fff; margin-bottom:10px}
.cat-baj{color:var(--txt-noche-2); max-width:62ch; font-size:17px; margin-bottom:22px}

.buscador{position:relative; max-width:560px}
.buscador svg{position:absolute; left:17px; top:50%; transform:translateY(-50%); width:19px; height:19px;
  fill:none; stroke:var(--txt-noche-2); stroke-width:2; stroke-linecap:round; pointer-events:none}
.buscador input{width:100%; min-height:54px; padding:15px 48px 15px 48px; font:inherit; font-size:16px;
  color:#fff; background:rgba(255,255,255,.07); border:1px solid var(--linea-osc);
  border-radius:100px; outline:none; transition:border-color .2s, background .2s}
/* El <input type="search"> trae su propia cruz, azulada y fuera de la paleta:
   se saca, porque al lado está la nuestra. */
.buscador input::-webkit-search-cancel-button,
.buscador input::-webkit-search-decoration{-webkit-appearance:none; appearance:none; display:none}
.buscador input::placeholder{color:#7FA094}
.buscador input:focus{border-color:var(--verde); background:rgba(255,255,255,.1)}
.buscador button{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.12);
  color:#fff; font-size:21px; line-height:1; cursor:pointer}

.cat-busca{display:flex; align-items:stretch; gap:14px; margin-bottom:16px}
.cat-busca .buscador{flex:1 1 auto}
.cat-busca .vista{flex:none; margin-left:auto}

/* Los filtros se estiran parejo hasta el borde derecho, que es donde termina
   el selector de vista: cada uno crece lo mismo sobre su ancho de texto. */
.filtros{display:flex; flex-wrap:wrap; gap:9px}
.filtro{font:inherit; font-size:14.5px; font-weight:500; color:var(--txt-noche-2);
  background:transparent; border:1px solid var(--linea-osc); border-radius:100px;
  padding:9px 11px; min-height:44px; cursor:pointer; transition:.18s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  /* El nombre de la categoría NO se parte en dos renglones: un botón con el
     texto cortado hace crecer el alto de toda la fila. Si no entran todos,
     que se vaya el último a la fila de abajo, que es lo que flex-wrap hace. */
  white-space:nowrap;
  /* Crecen parejo hasta llenar la fila. El tope existe por la fila que queda
     incompleta: MEDIDO, sin él los dos últimos pasaban de 126 y 119 px a 405 y
     398. Subido a 260 porque "Lámina termocontraíble" pide 237 en una línea.
     El relleno lateral bajó de 14 a 11: MEDIDO, con 14 los seis sumaban 1091
     sobre 1092 de contenedor —entraban por un píxel—; con 11 sobran 37. */
  flex:1 1 auto; max-width:260px}
.filtro span{font-size:12px; opacity:.6; font-variant-numeric:tabular-nums}
.filtro:hover{color:#fff; border-color:rgba(255,255,255,.3)}
.filtro.on{background:var(--verde); border-color:var(--verde); color:#04231C; font-weight:600}
.filtro.on span{opacity:.75}
.cuenta{margin:0; font-size:14px; color:var(--txt-noche-2)}

/* ---- cómo ver el listado ----
   Cuadrícula (lo de siempre) o lista. Va en la misma línea que la cuenta de
   resultados, no entre los filtros: filtrar y mirar son dos cosas distintas. */
.vista{display:inline-flex; gap:3px; flex:none; padding:3px;
  border:1px solid var(--linea-osc); border-radius:100px}
.vista button{font:inherit; font-size:14px; font-weight:500; color:var(--txt-noche-2);
  background:none; border:0; border-radius:100px; min-height:38px; height:100%;
  padding:0 16px; cursor:pointer; display:inline-flex; align-items:center;
  gap:7px; transition:.18s}
.vista button:hover{color:#fff}
.vista button svg{width:15px; height:15px; flex:none}
.vista button[aria-pressed="true"]{background:var(--verde); color:#04231C; font-weight:600}

/* ---- ficha de producto (opción E2 del laboratorio) ----
   Tres partes fijas: cabecera, foto y pie. El panel de datos sube SÓLO sobre
   la foto, así el nombre nunca se pierde y la ficha no cambia de alto: las
   vecinas no se mueven y la fila no se desalinea. */
.pcs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding:var(--seccion) 0 0}
.pc{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; height:452px; display:grid; grid-template-rows:auto 1fr auto;
  transition:border-color .2s, box-shadow .2s}
.pc:hover{border-color:var(--verde-med); box-shadow:0 18px 40px -32px rgba(4,53,49,.5)}

.pc__cab{padding:18px 22px 14px}
.pc__cat{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--verde-txt); display:block; margin-bottom:7px}
.pc__t{font-family:var(--titulos); font-weight:700; font-size:17.5px; margin:0 0 6px; line-height:1.06; letter-spacing:-.045em}
.pc__med{font-size:14.5px; color:var(--txt-2); margin:0}
.pc__med b{color:var(--txt); font-weight:600}

.pc__media{position:relative; overflow:hidden; background:var(--papel-2)}
.pc__media img{width:100%; height:100%; object-fit:cover; display:block}
.pc__media::after{content:''; position:absolute; inset:0; background:rgba(8,32,24,.5);
  opacity:0; transition:opacity .4s ease}
.pc.abierta .pc__media::after{opacity:1}

/* deja asomar casi un tercio de la foto: no se pierde de vista el producto */
.pc__panel{position:absolute; left:0; right:0; top:28%; bottom:0; z-index:2;
  background:var(--papel); padding:14px 22px; transform:translateY(100%);
  transition:transform .46s cubic-bezier(.2,.8,.25,1)}
.pc.abierta .pc__panel{transform:translateY(0)}
.pc__panel dl{margin:0; display:grid; font-size:13.5px}
.pc__panel dl>div{display:flex; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--linea); padding:7px 0}
.pc__panel dl>div:first-child{border-top:1px solid var(--linea)}
.pc__panel dl>div:last-child{border-bottom:0}
.pc__panel dt{color:var(--txt-2); margin:0; white-space:nowrap}
.pc__panel dd{margin:0; font-weight:500; text-align:right; white-space:nowrap}

/* SIN FOTO (Residuo, hasta que lleguen las reales): el lugar de la imagen
   quedaba como un bloque gris vacío. Ahí van los datos, a la vista y sin
   "Ver más", apilados: renglones como "Rollo de 30 unidades · Bulto de 50
   rollos · Pallet de 54 bultos" no entran en una línea con su título al
   lado, y con nowrap se salían de la tarjeta. */
.pc__media--sinfoto{background:none}
.pc__media--sinfoto::after{display:none}
.pc__media--sinfoto .pc__panel{position:static; transform:none; padding:2px 18px 8px}
.pc__media--sinfoto .pc__panel dl>div{display:block; padding:9px 0}
.pc__media--sinfoto .pc__panel dl>div:first-child{border-top:0}
.pc__media--sinfoto .pc__panel dd{white-space:normal; text-align:left; margin-top:2px; line-height:1.4}
.pc:has(.pc__media--sinfoto) .pc__mas{display:none}
/* el alto fijo de 452 no alcanza para cuatro renglones apilados: el mínimo
   quedaba tapado por el pie. Crece; la grilla iguala las de una misma fila. */
.pc:has(.pc__media--sinfoto){height:auto; min-height:452px}

.pc__pie{display:flex; gap:10px; align-items:center; padding:14px 18px;
  border-top:1px solid var(--linea)}
.pc__mas{font:inherit; font-size:14px; font-weight:600; color:var(--verde-txt);
  background:none; border:0; cursor:pointer; min-height:44px; padding:0 4px;
  display:flex; align-items:center; gap:6px; white-space:nowrap}
.pc__mas::after{content:'+'; font-size:18px; line-height:1}
.pc.abierta .pc__mas::after{content:'−'}
/* El verde oficial de WhatsApp con letra blanca no pasa contraste:
   tinte suave y letra en #0B7D3E, que da 5,23:1. */
/* el mismo botón para la ficha del catálogo y para la tarjeta de la home */
.pc__wa, .prod__wa{display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 15px; border-radius:100px; text-decoration:none;
  font-size:14px; font-weight:600; white-space:nowrap;
  background:#E7F6EC; color:#0B7D3E; border:1px solid #BFE5CC; transition:filter .2s}
.pc__wa{margin-left:auto}
.pc__wa:hover, .prod__wa:hover{filter:brightness(.97)}
.pc__wa svg, .prod__wa svg{width:17px; height:17px; flex:none}

@media (max-width:980px){ .pcs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .pcs{grid-template-columns:1fr; gap:16px; padding-top:34px}
  .pc{height:auto; min-height:420px}
}

/* "Cargar más": sólo en mobile, donde 38 fichas eran 22 pantallas de scroll.
   En desktop entran de a tres por fila y no molesta verlas todas. */
.mas-wrap{text-align:center; padding:34px 0 0}
.mas-cuenta{margin:14px 0 0; font-size:14px; color:var(--txt-2)}
@media (min-width:621px){ .mas-wrap{display:none !important} }

.vacio{text-align:center; padding:70px 0 var(--seccion)}
.vacio p{color:var(--txt-2); margin-bottom:20px; font-size:17px}
#listado{padding-bottom:var(--seccion)}

@media (max-width:620px){
  .pcs{grid-template-columns:1fr; gap:14px; padding-top:34px}
  .filtros{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter); scrollbar-width:none}
  .filtros::-webkit-scrollbar{display:none}
  .filtro{flex:none; scroll-snap-align:start}
  .cat-busca{flex-wrap:wrap; gap:12px}
  .cat-busca .buscador{flex:1 1 100%; max-width:none}
  /* a lo ancho, como la barra: alineado a la derecha quedaba colgado */
  .cat-busca .vista{width:100%; margin-left:0; height:48px}
  .cat-busca .vista button{flex:1 1 50%; justify-content:center}
}

/* ---- el listado como lista ----
   La ficha deja de ser una caja y pasa a ser una fila. El nombre ya trae la
   medida ("Bolsa camiseta 30x40 cm"), así que esconder la línea de medida no
   pierde nada. Va después de los @media de .pcs: si fuera antes, lo pisarían. */
.pcs--lista{display:block}
.pcs--lista .pc{height:auto; min-height:0; display:flex; align-items:center; gap:18px;
  border:0; border-bottom:1px solid var(--linea); border-radius:0;
  padding:10px 2px; box-shadow:none; overflow:visible}
.pcs--lista .pc:hover{background:var(--papel-2); border-color:var(--linea)}
.pcs--lista .pc__cab{padding:0; flex:1 1 auto; min-width:0;
  display:flex; align-items:baseline; gap:6px 13px; flex-wrap:wrap}
.pcs--lista .pc__t{font-size:clamp(19px,2.3vw,29px); margin:0}
.pcs--lista .pc__cat{margin:0; order:2}
.pcs--lista .pc__med{display:none}
.pcs--lista .pc__panel{display:none}
.pcs--lista .pc__pie{border:0; padding:0; flex:none}
.pcs--lista .pc__mas{display:none}
/* la foto aparece al pasar por encima: no roba lugar mientras barrés la lista */
.pcs--lista .pc__media{order:-1; flex:none; width:0; opacity:0; aspect-ratio:3/2;
  border-radius:var(--radio-sm); background:none;
  transition:width .45s cubic-bezier(.2,.8,.25,1), opacity .3s ease}
.pcs--lista .pc:hover .pc__media{width:210px; opacity:1}
.pcs--lista .pc__media::after{display:none}

/* Sin "pasar por encima" —celular y tablet— la foto no puede esconderse
   detrás de un gesto que no existe: va siempre, chica y al principio. */
@media (hover:none), (max-width:620px){
  .pcs--lista .pc__media{width:72px; opacity:1; transition:none}
  /* Al tocar, el navegador dispara :hover igual, y esa regla pesa más que la
     de arriba: la foto se agrandaba sola. Acá no hay nada que revelar, la
     foto ya está puesta. */
  .pcs--lista .pc:hover .pc__media{width:72px}
  .pcs--lista .pc__t{font-size:17px}
  .pcs--lista .pc{gap:12px; padding:9px 2px}
  /* La categoría ya está arriba, en los filtros: acá sólo robaba líneas. */
  .pcs--lista .pc__cat{display:none}
  /* El botón entero no entra con el nombre al lado: queda el ícono. El texto
     sigue en el HTML, así que un lector de pantalla lo lee igual. */
  .pcs--lista .pc__wa{font-size:0; padding:0; width:44px; justify-content:center}
  .pcs--lista .pc__wa svg{width:19px; height:19px}
}
@media (prefers-reduced-motion:reduce){
  .pcs--lista .pc__media{transition:none}
}

/* ===================== HERO CON FOTO ===================== */
.hero__foto{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero__foto img{width:100%; height:100%; object-fit:cover; display:block}
/* El velo define el contraste real del titular: medido sobre el tono
   resultante, no sobre la foto. */
.hero__velo{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,32,24,.98) 0%, rgba(8,32,24,.91) 42%, rgba(8,32,24,.64) 100%)}

.ciclo__mundo{width:clamp(78px,11vw,132px); height:auto; margin:0; flex:none; opacity:.95}
/* El mundo de la cabecera gira con el scroll y el del fondo gira solo: las dos
   cosas las hace globo.js, que cambia el <img> por un lienzo y vuelve a
   proyectar los puntos en cada cuadro. Un planeta no gira como una rueda. */
/* El inicio ocupa la pantalla entera y todo se apoya abajo: el sobrante va
   arriba, entre la píldora y el titular, no partido en el medio del bloque.
   Antes el hero crecía más que la pantalla y ocupar 100svh no cambiaba nada. */
@media (max-width:760px){
  .hero{min-height:100vh; min-height:100svh; justify-content:flex-end;
    padding-top:calc(var(--seccion) + 6px); padding-bottom:30px}
}

/* El enlace activo se marca con una línea, no sólo con color. */
.nav a{position:relative}
.nav a::after{content:''; position:absolute; left:13px; right:13px; bottom:7px; height:2px;
  background:var(--verde); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current]::after{transform:scaleX(1)}

/* ===================== PRECARGA ===================== */
/* El CSS la anima y la retira; el JS sólo decide si mostrarla.
   Si el JS falla, el peor caso es verla de más, nunca quedar encerrado. */
.precarga{position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  background:var(--noche);
  animation:precarga-salir 340ms cubic-bezier(.4,0,.2,1) 1400ms forwards}
.precarga::after{content:''; position:absolute; inset:0;
  background:radial-gradient(48% 48% at 50% 46%, rgba(59,195,59,.18), transparent 70%)}
@keyframes precarga-salir{ to{ opacity:0; scale:1.08; visibility:hidden } }
.sin-precarga .precarga{display:none}
@media (prefers-reduced-motion:reduce){ .precarga{display:none} }

.pre__art{position:relative; z-index:1; width:min(52vw,230px); aspect-ratio:1}
.pre__art svg{width:100%; height:100%; overflow:visible}

/* las tres flechas se dibujan una tras otra: el ciclo se arma delante tuyo */
.pre__fl{stroke-dasharray:var(--l); stroke-dashoffset:var(--l);
  animation:pre-trazo 420ms cubic-bezier(.3,0,.2,1) forwards}
.pre__fl:nth-of-type(1){animation-delay:60ms}
.pre__fl:nth-of-type(2){animation-delay:240ms}
.pre__fl:nth-of-type(3){animation-delay:420ms}
@keyframes pre-trazo{ to{ stroke-dashoffset:0 } }

.pre__punta{opacity:0; animation:pre-punta 200ms ease-out forwards}
.pre__punta:nth-of-type(1){animation-delay:430ms}
.pre__punta:nth-of-type(2){animation-delay:610ms}
.pre__punta:nth-of-type(3){animation-delay:790ms}
@keyframes pre-punta{ from{opacity:0; scale:.5} to{opacity:1; scale:1} }

/* el mundo aparece en el centro una vez cerrado el ciclo, y el conjunto gira */
.pre__mundo{opacity:0; transform-origin:50% 50%;
  animation:pre-mundo 420ms cubic-bezier(.2,.8,.3,1) 620ms forwards}
@keyframes pre-mundo{ from{opacity:0; scale:.55} to{opacity:1; scale:1} }
.pre__giro{transform-origin:50% 50%; animation:gira 9s linear 900ms infinite}

/* "Reciclamos" va ARRIBA del símbolo y el logo horizontal abajo: se lee la
   palabra, gira el símbolo y recién al final aparece la marca. */
.pre__pie{position:absolute; left:0; right:0; top:-44px; text-align:center;
  font-size:12.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--verde); opacity:0; animation:pre-pie 340ms ease-out 560ms forwards}
@keyframes pre-pie{ to{ opacity:.95 } }
/* El mismo archivo que el encabezado, que ya se pide con prioridad alta: así
   no agrega una descarga en el momento en que el visitante está esperando. */
.pre__logo{position:absolute; left:50%; bottom:-66px; translate:-50% 0;
  width:min(64%,152px); height:auto; opacity:0;
  animation:pre-pie 380ms ease-out 840ms forwards}

/* La pausa la pone el JS. Si no corre, nada queda pausado. */
.espera .precarga, .espera .precarga *{animation-play-state:paused}

/* ===================== LA ENTRADA DEL INICIO =====================
   .intro la pone el guion de la cabecera ANTES del primer pintado: si
   escondiera desde sitio.js habría un parpadeo. .entra la suelta cuando la
   precarga empieza a irse, y las piezas suben una atrás de la otra mientras
   el telón se desvanece. Sin guion no se agrega ninguna de las dos y el
   inicio se ve entero, quieto. */
/* .01 y no 0. El navegador no cuenta como pintado un texto en opacidad cero,
   y con la precarga la entrada espera 1,4 s: Google veía el titular recién
   al final. Medido con Lighthouse y la red frenada de verdad (devtools):
   en 0, LCP 4,6 s y 80 puntos; en .01, LCP 2,2 s y 96. Ni la precarga sola
   ni la entrada sola lo causaban: era la combinación. A la vista no cambia
   nada, porque durante esa espera el inicio está tapado por la precarga. */
.intro .hero__sello, .intro .hero h1, .intro .hero__baj,
.intro .hero__cta, .intro .sellos, .intro .hero__datos{
  opacity:.01; transform:translateY(22px)}
.intro .hero__foto img{scale:1.07}
.intro.entra .hero__sello, .intro.entra .hero h1, .intro.entra .hero__baj,
.intro.entra .hero__cta, .intro.entra .sellos, .intro.entra .hero__datos{
  opacity:1; transform:none;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .82s cubic-bezier(.22,.61,.36,1)}
/* la foto se acomoda sola, más lenta que el texto: da profundidad sin ruido */
.intro.entra .hero__foto img{scale:1; transition:scale 1.9s cubic-bezier(.22,.61,.36,1)}
.intro.entra .hero h1{transition-delay:.09s}
.intro.entra .hero__baj{transition-delay:.19s}
.intro.entra .hero__cta{transition-delay:.28s}
.intro.entra .sellos{transition-delay:.36s}
.intro.entra .hero__datos{transition-delay:.44s}
@media (prefers-reduced-motion:reduce){
  .intro .hero__sello, .intro .hero h1, .intro .hero__baj, .intro .hero__cta,
  .intro .sellos, .intro .hero__datos{opacity:1; transform:none; transition:none}
  .intro .hero__foto img{scale:1}
}

@media (max-width:760px){
  .ciclo__cab{flex-direction:column; align-items:flex-start; gap:18px}
  .escena__art{width:min(62vh,360px)}

  /* ---- el recorrido en mobile: una tira vertical ----
     La rueda fija no entra en una pantalla angosta: la tarjeta de texto ocupa
     todo el ancho y es opaca, así que tapaba la foto. Acá cada paso trae su
     propia foto en el HTML y todo sube junto: pasa la imagen, pasa el texto.
     Antes el guion mudaba las fotos después de cargar y eso movía la página:
     CLS 0,26 medido con Lighthouse. Con la foto ya en su lugar no se mueve
     nada, y sin guion se ve igual. La rueda queda oculta: sus fotos son
     lazy y no se descargan. */
  .escena__fijo{display:none}
  .pasos{margin-top:0; padding-bottom:10px}
  .paso{min-height:0; display:block; padding:0 0 18px}
  /* Compacto (laboratorio-largo, opción E): el número va al lado del título
     y no arriba, y la foto pasa a 16:9. El recorrido bajó de 2,97 a 2,39
     pantallas. Cada paso es UNA TARJETA: sin caja, la foto y su texto quedaban
     sueltos sobre el fondo y no se veía dónde terminaba uno y empezaba el otro.
     Va blanca con borde, como las fichas del catálogo: el verde claro que usa
     en escritorio no se despegaría del fondo verdoso de la sección. */
  .paso__caja{max-width:none; padding:0 16px 18px; background:var(--papel);
    border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
    box-shadow:0 14px 34px -28px rgba(4,53,49,.5);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:1; transform:none;
    display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center}
  .paso.fue .paso__caja{opacity:1; transform:none}
  /* los márgenes negativos sacan la foto del relleno: va a sangre y las
     esquinas de arriba las recorta el overflow de la tarjeta */
  .paso__foto{display:block; grid-column:1/-1; aspect-ratio:16/9;
    margin:0 -16px 16px; border:0; border-radius:0}
  .paso__n{margin:0; width:32px; height:32px; font-size:14.5px}
  .paso h3{margin:0; font-size:21px}
  .paso p{grid-column:1/-1; margin-top:9px; font-size:15.5px}
}

/* ===================== CONTACTO ===================== */
/* Tres tarjetas desde el 26/10: el correo salió porque ningún dominio de
   Ecoplast tiene servidor de correo y el mail rebotaba. Si vuelve, son cuatro. */
.contactos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
/* mismo criterio que las fichas de productos: cuatro o dos, nunca una colgada */
/* en dos columnas WhatsApp va a lo ancho: si no, la tercera queda sola */
@media (max-width:1179px){ .contactos{grid-template-columns:repeat(2,1fr)} .contactos > .vc:first-child{grid-column:1/-1} }
.vc{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px 24px; text-decoration:none; color:var(--txt); display:flex;
  flex-direction:column; min-height:170px; transition:border-color .2s, transform .2s, box-shadow .2s}
@media (hover:hover){
  .vc:hover{border-color:var(--verde-med); transform:translateY(-3px);
    box-shadow:0 20px 44px -32px rgba(4,53,49,.5)}
}
.vc__ico{width:46px; height:46px; border-radius:12px; background:#E7F6E9; color:var(--verde-txt);
  display:grid; place-items:center; margin-bottom:18px}
.vc__ico svg{width:23px; height:23px}
.vc__t{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-2); margin-bottom:7px}
.vc__d{font-size:17px; font-weight:600; letter-spacing:-.018em; margin-bottom:5px}
/* El correo corta sólo en el <wbr> que lleva después de la arroba:
   con overflow-wrap:anywhere partía en "...ecoplastsrl.co / m.ar". */
.vc__d--mail{font-size:15.5px; word-break:normal; overflow-wrap:normal}
.vc__m{font-size:14px; color:var(--txt-2); margin-top:auto}
/* WhatsApp es el canal principal: se distingue, pero el verde oficial no pasa
   contraste con letra blanca, así que el tinte va suave y la letra oscura. */
.vc--wa{background:#E7F6EC; border-color:#BFE5CC}
.vc--wa .vc__ico{background:#0B7D3E; color:#fff}
/* Va después de las reglas de .vc: con la misma especificidad gana la última.
   Contacto compacto en el celular (opción E): WhatsApp a lo ancho y con su
   color, teléfono y correo lado a lado, la planta a lo ancho. En 2×2 el
   número de WhatsApp se cortaba en dos líneas. */
@media (max-width:760px){
  .contactos{grid-template-columns:1fr 1fr; gap:10px}
  .vc{min-height:0; padding:15px 14px}
  .vc__ico{width:36px; height:36px; border-radius:10px; margin-bottom:10px}
  .vc__ico svg{width:19px; height:19px}
  .vc__t{font-size:11px; margin-bottom:3px}
  .vc__d{font-size:14.5px; line-height:1.3}
  .vc__m{font-size:12.5px; margin-top:5px}
  .contactos > .vc:first-child{grid-column:1/-1; display:grid;
    grid-template-columns:auto 1fr; column-gap:14px; align-items:center}
  .contactos > .vc:first-child .vc__ico{grid-row:1 / span 3; margin:0}
}

/* ---- encabezado en mobile ---- */
@media (max-width:760px){
  /* la píldora llega más cerca del borde: adentro, el WhatsApp dejaba de ser
     un botón y parecía un recorte */
  .cab{padding:10px 10px}
  .cab__in{height:58px; padding:0 7px 0 15px; gap:8px}
  .cab.bajo .cab__in{height:54px}
  .marca img{height:23px}
  .cab.bajo .marca img{height:21px}
  .cab .wa{height:46px; min-width:46px; padding:0 14px; justify-content:center}
}
/* Con seis enlaces la píldora no tiene lugar por debajo de 980: medido, a
   768 el logo se encogía hasta 0 de ancho y a 901 todavía desbordaba. Ahí
   entra la hamburguesa, en el mismo corte que usa el resto de la hoja. */
@media (max-width:980px){
  .nav{display:none}
  .hamb{display:flex}
  .cab .wa span{display:none}
  body.menu-abierto{overflow:hidden}
}
/* El panel del menú NO puede vivir dentro de la píldora: su backdrop-filter
   crea un bloque contenedor y el position:fixed se resuelve contra ella, no
   contra la pantalla. Medido: el panel daba 333x68 en vez de ocupar todo.
   El guion lo muda al <body> al abrirlo y lo devuelve al cerrar. */
/* El panel baja de la píldora y se queda prendido de ella: no es otra
   pantalla, es el mismo encabezado abierto. Dónde termina la píldora se lo
   pasa el guion en --cab, porque cambia de alto al bajar. */
.nav.abierta{position:fixed; top:var(--cab,68px); left:10px; right:10px; z-index:70;
  display:flex; flex-direction:column; gap:1px; padding:9px;
  background:rgba(7,30,21,.97); border:1px solid rgba(255,255,255,.1);
  border-radius:24px; box-shadow:0 30px 62px -30px rgba(0,0,0,.95);
  /* se desenrolla desde arriba, como si saliera de abajo de la píldora */
  animation:menu-baja .3s cubic-bezier(.2,.9,.25,1)}
/* El velo es un elemento propio que vive siempre en la página, apagado.
   Siendo un ::before del panel nacía junto con el panel y el navegador lo
   pintaba un cuadro más tarde: se veía la mancha negra llegando después.
   Acá ya está compuesto y sólo cambia de opacidad, al mismo tiempo que el
   panel. Mismo criterio que el menú de Servicios Pedrín. */
.menu-velo{position:fixed; inset:0; z-index:60; background:rgba(4,18,13,.58);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .22s ease}
body.menu-abierto .menu-velo{opacity:1; pointer-events:auto}
.nav.abierta a{font-size:17px; font-weight:600; color:#fff; padding:13px 16px;
  border-radius:15px; width:100%; min-height:52px;
  animation:menu-renglon .32s cubic-bezier(.2,.8,.25,1) backwards}
/* los renglones llegan atrás del panel, uno tras otro */
.nav.abierta a:nth-child(1){animation-delay:.08s}
.nav.abierta a:nth-child(2){animation-delay:.12s}
.nav.abierta a:nth-child(3){animation-delay:.16s}
.nav.abierta a:nth-child(4){animation-delay:.20s}
.nav.abierta a:nth-child(5){animation-delay:.24s}
.nav.abierta a:nth-child(6){animation-delay:.28s}
.nav.abierta a + a{border-top:1px solid rgba(255,255,255,.07)}
.nav.abierta a:hover{background:none}
.nav.abierta a::after{display:none}
@keyframes menu-baja{
  from{opacity:.4; transform:translateY(-10px); clip-path:inset(0 0 88% 0 round 24px)}
  to{opacity:1; transform:none; clip-path:inset(0 0 0 0 round 24px)}}
@keyframes menu-renglon{from{opacity:0; transform:translateY(-9px)} to{opacity:1; transform:none}}

/* La sección en la que estás, marcada también en el panel abierto. */
.nav.abierta a[aria-current]{color:var(--verde); background:rgba(59,195,59,.11)}

/* ===================== APARECER AL ENTRAR =====================
   Los textos y las tarjetas suben un poco al asomar. La clase .anima la pone
   el guion: si no corre, nada queda invisible. */
.anima .ap{opacity:0; transform:translateY(52px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),
             transform 1s cubic-bezier(.22,.61,.36,1)}
.anima .ap.visto{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .anima .ap{opacity:1; transform:none; transition:none}
  .nav.abierta, .nav.abierta a{animation:none}
  .menu-velo{transition:none}
}

/* ---- sellos de material en el hero ----
   El triángulo de Möbius con el código de resina: 4 para el polietileno de
   baja densidad y 2 para el de alta, que son los dos que entran a la planta. */
.sellos{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:20px 0 0; padding:0}
.sellos li{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--linea-osc);
  border-radius:100px; padding:6px 16px 6px 8px; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-noche-2)}
/* El símbolo de reciclado sale del gráfico de Ecoplast ("La leyenda de los
   plásticos que reciclamos"), recortado y sin su número: allá ocupa el 11 %
   del ícono y a este tamaño serían 5 px ilegibles. El número va encima,
   centrado en el hueco del triángulo (51 % y 52 % del ícono, MEDIDO sobre
   el original), en el verde del gráfico. */
.sellos__ico{position:relative; flex:none; width:40px; height:38px}
.sellos__ico img{display:block; width:100%; height:100%}
.sellos__ico b{position:absolute; left:51.4%; top:51.6%; translate:-50% -50%;
  font-family:var(--titulos); font-weight:700; font-size:14px; line-height:1;
  letter-spacing:0; color:var(--verde)}
/* En el celular, más chico. Va DESPUÉS de la regla general: con la misma
   especificidad, la que está antes pierde, y así el ícono viejo nunca se
   achicaba en el celular. */
@media (max-width:760px){
  .sellos__ico{width:34px; height:32px}
  .sellos__ico b{font-size:12px}
}
.sellos abbr{text-decoration:none; border:0}

/* ============================================================
   CONFIGURADOR DE BOLSAS A MEDIDA
   El dibujo viene de bolsa.js con el viewBox en centímetros
   reales, así que acá los trazos también van en cm: 0,45 es
   un trazo fino sobre una bolsa de 40 cm de ancho.
   ============================================================ */

.cfg-svg{ width:100%; height:auto; display:block; overflow:visible }

.cfg-piso{ stroke:var(--linea); stroke-width:.5; stroke-linecap:round }

/* La silueta es una vara de medir, no un personaje: plana, de un solo
   tono y bien por detrás de la bolsa. */
.cfg-silueta{ fill:var(--linea); opacity:.85 }

/* El plástico, de izquierda a derecha: el brillo de la cara y la sombra
   del pliegue. Sin este degradado la bolsa es blanca sobre blanco y se ve
   el contorno nada más. */
.cfg-p1{ stop-color:#F4F8F6 }
.cfg-p2{ stop-color:#FFFFFF }
.cfg-p3{ stop-color:#EDF3F0 }
.cfg-p4{ stop-color:#DFE9E4 }

.cfg-cara{ fill:url(#cfgPlas); stroke:#C3D2CB; stroke-width:.45; stroke-linejoin:round }
.cfg-fuelle{ fill:#000; fill-opacity:.05; stroke:none }
.cfg-sello{ fill:#D4E0DA; stroke:#C3D2CB; stroke-width:.3 }
.cfg-pliegue{ stroke:#C3D2CB; stroke-width:.3; stroke-linecap:round; opacity:.8 }

/* El troquel es un agujero. Pintado del color del fondo desaparecía
   contra la cara de la bolsa: lleva el gris de la sombra del interior,
   que es lo que se ve de verdad al mirar una bolsa colgada. */
.cfg-troquel{ fill:#A9BDB4; stroke:#8FA69C; stroke-width:.25 }

/* La cortada es la única de las tres que no es opaca. */
.cfg-bolsa--cristal .cfg-cara{ fill-opacity:.62 }

.cfg-cota line{ stroke:var(--txt-2); stroke-width:.3; opacity:.65 }
.cfg-cota text{ fill:var(--txt-2); font-family:var(--sans); font-size:6px; opacity:.85;
  dominant-baseline:middle }

/* --- la sección --- */
/* La sección a medida va pegada a la cabecera: el --seccion de 118 px de
   arriba dejaba las tarjetas de los modelos fuera de la primera pantalla. */
.cfg-sec{ padding-top:clamp(36px, 4vw, 52px) }
.cfg-sec .volanta{ display:block }
/* Sin tope de ancho: llega hasta donde llegan las tarjetas de abajo, que
   es lo que le permite entrar en dos líneas en vez de cuatro. */
.cfg-baj{ color:var(--txt-2); margin:8px 0 22px }

.cfg-caja{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,3vw,40px);
  align-items:start }

/* El dibujo. El fondo propio lo despega de la página y le da un piso
   donde apoyar. */
.cfg-vista{ background:var(--papel-2); border:1px solid var(--linea);
  border-radius:var(--radio); padding:clamp(14px,2vw,26px) }
.cfg-vista > div{ max-height:calc(62vh / var(--z)); display:flex; justify-content:center }
.cfg-vista svg{ max-height:calc(62vh / var(--z)) }

/* --- las tres tarjetas de tipo ---
   Encabezan la sección y cada una trae dibujada su bolsa: la forma se ve
   antes de elegirla, que es lo que un nombre solo no cuenta. Las tres van
   en la misma medida, así lo único que cambia de una a otra es la forma. */
.cfg-fam{ font-family:var(--titulos); font-weight:700; font-size:17px; color:var(--txt);
  margin:0 0 12px }
.cfg-tarjetas{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 30px }
.cfg-tj{ font:inherit; text-align:left; cursor:pointer; padding:0; overflow:hidden;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  display:flex; flex-direction:column; transition:border-color .16s, box-shadow .16s }
.cfg-tj:hover{ border-color:var(--verde-med) }
.cfg-tj[aria-pressed=true]{ border-color:var(--verde-txt); box-shadow:0 0 0 1px var(--verde-txt) }

.cfg-tj-dib{ display:flex; justify-content:center; align-items:flex-end;
  background:var(--papel-2); padding:16px 10px 0; border-bottom:1px solid var(--linea) }
.cfg-tj[aria-pressed=true] .cfg-tj-dib{ background:#EDF6EE }
.cfg-tj-svg{ width:auto; height:110px; display:block }

.cfg-tj-txt{ display:block; padding:12px 14px 14px }
.cfg-tj-txt b{ display:block; font-family:var(--titulos); font-weight:700; font-size:16px;
  color:var(--txt) }
.cfg-tj-txt i{ display:block; font-style:normal; font-size:13px; color:var(--txt-2);
  margin-top:2px; line-height:1.35 }

@media (max-width:620px){
  .cfg-tarjetas{ gap:8px; margin-bottom:22px }
  .cfg-tj-svg{ height:76px }
  .cfg-tj-txt{ padding:9px 10px 11px }
  .cfg-tj-txt b{ font-size:14px }
  /* En el celular la línea de abajo no entra en una tarjeta de un tercio
     de 375: el nombre y el dibujo ya dicen cuál es cuál. */
  .cfg-tj-txt i{ display:none }
}

.cfg-ctrl{ display:grid; gap:24px }
.cfg-grupo{ display:grid; gap:9px }

.cfg-rot{ font-family:var(--titulos); font-weight:700; font-size:15px; color:var(--txt);
  display:flex; align-items:center; gap:7px }
.cfg-rot i{ font-style:normal; color:var(--txt-2); font-weight:400; font-size:13px }
.cfg-rot input{ width:68px; margin-left:auto; font:inherit; font-size:15px; text-align:right;
  padding:5px 8px; border:1px solid var(--linea); border-radius:var(--radio-sm);
  background:var(--papel); color:var(--txt) }
.cfg-rot input:focus-visible{ outline:2px solid var(--verde-txt); outline-offset:1px }

.cfg-ctrl input[type=range]{ width:100%; accent-color:var(--verde-txt); margin:0 }
.cfg-topes{ display:flex; justify-content:space-between; font-size:12px; color:var(--txt-2) }
.cfg-topes b{ font-weight:400 }
.cfg-ayuda{ font-size:12.5px; color:var(--txt-2); line-height:1.45 }

/* Los tres tipos y los pares de la impresión comparten el mismo botón. */
.cfg-tipos, .cfg-mini{ display:flex; gap:7px; flex-wrap:wrap }
.cfg-tipos button, .cfg-mini button{ font:inherit; cursor:pointer; color:var(--txt);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio-sm);
  padding:9px 15px; transition:border-color .15s, background .15s }
/* Apretados a 11 px: MEDIDO, con 13 los dos grupos sumaban 388 sobre 375 de
   columna y se partían ya en una pantalla de 1000. El min-height es por el
   dedo, no por el dibujo. */
.cfg-mini button{ padding:6px 11px; font-size:14px; min-height:40px }
.cfg-tipos button:hover, .cfg-mini button:hover{ border-color:var(--verde-med) }
.cfg-tipos button[aria-pressed=true], .cfg-mini button[aria-pressed=true]{
  background:var(--verde-txt); border-color:var(--verde-txt); color:#fff }

.cfg-check{ display:flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--titulos); font-weight:700; font-size:15px }
.cfg-check input{ width:17px; height:17px; accent-color:var(--verde-txt); cursor:pointer }
/* Caras y colores van en la misma línea: prender la impresión no tiene
   que empujar media pantalla hacia abajo. Si no entran, flex-wrap los
   acomoda uno debajo del otro, que es como estaban antes. */
/* Sin sangría: MEDIDO, los 26 px que la alineaban bajo el casillero dejaban
   349 útiles para 359 que piden los dos grupos, y se partían. Alineado al
   borde queda además a eje con Tipo de bolsa, Ancho y Alto. Que las opciones
   aparezcan recién al prender el casillero ya dice que dependen de él. */
.cfg-imp{ display:flex; flex-wrap:wrap; gap:11px 16px; margin-top:12px }
.cfg-fila{ display:flex; align-items:center; gap:9px }
.cfg-rot2{ font-size:13.5px; color:var(--txt-2) }

.cfg-cierre{ border-top:1px solid var(--linea); padding-top:20px }
.cfg-medida{ font-family:var(--titulos); font-weight:700; font-size:clamp(26px,3.4vw,34px);
  color:var(--txt); margin:0 }
.cfg-detalle{ color:var(--txt-2); font-size:14px; margin:5px 0 18px; line-height:1.5 }

@media (max-width:860px){
  .cfg-caja{ grid-template-columns:1fr; gap:22px }
  /* En el celular la bolsa más alta tiene que entrar sin scroll: el dibujo
     se limita por el alto de la pantalla, no por el ancho de la columna. */
  .cfg-vista > div, .cfg-vista svg{ max-height:46vh }
}

/* --- las bolsas a medida, dentro de los resultados de búsqueda ---
   No son fichas, así que el buscador no las encontraría nunca: este bloque
   es el que las hace aparecer cuando lo que se busca es una de ellas. */
.amr{ display:flex; align-items:center; gap:clamp(14px,2.5vw,26px); flex-wrap:wrap;
  /* Verde clarísimo y no el gris de siempre: no es una ficha más, es la
     puerta al configurador. Y despegado de la cabecera oscura, que lo
     dejaba pegado al borde como si fuera parte de ella. */
  background:#F1F8F2; border:1px solid rgba(59,195,59,.34); border-radius:var(--radio);
  box-shadow:0 2px 12px rgba(12,44,32,.06);
  padding:clamp(16px,2vw,20px) clamp(16px,2.4vw,24px);
  margin:clamp(26px,4vw,40px) 0 24px }
.amr__dibs{ display:flex; align-items:flex-end; gap:10px; flex:none }
.amr__dibs .cfg-tj-svg{ height:62px }
.amr__txt{ flex:1 1 230px; min-width:0 }
.amr__txt b{ display:block; font-family:var(--titulos); font-weight:700; font-size:16.5px;
  color:var(--txt) }
.amr__txt span{ display:block; font-size:14px; color:var(--txt-2); margin-top:3px;
  line-height:1.45 }
.amr .btn{ flex:none }

@media (max-width:620px){
  .amr{ gap:14px; padding:14px }
  .amr__dibs .cfg-tj-svg{ height:48px }
  .amr .btn{ width:100% }
}

/* --- la bobina del bloque de film (Bolsa.bobina) ---
   Cilindro acostado: el degradado vertical le da volumen. Cristal va casi
   blanco y translúcido; "color" se muestra con el verde de la marca sólo
   para que se note el cambio: el color real lo elige el cliente. */
.cfg-r1{ stop-color:#FFFFFF }
.cfg-r2{ stop-color:#F4F8F6 }
.cfg-r3{ stop-color:#DFE8E3 }
.cfg-r4{ stop-color:#C6D5CD }
.cfg-rollo__cuerpo{ fill:url(#cfgRollo); fill-opacity:.92; stroke:#BCCDC4; stroke-width:.3 }
.cfg-rollo__cara{ fill:#EEF4F1; stroke:#BCCDC4; stroke-width:.3 }
.cfg-rollo__tubo{ fill:#C8A27C }
.cfg-rollo__hueco{ fill:#7E5F42 }
.cfg-rollo--color .cfg-rollo__cuerpo{ fill:#5DB97A; fill-opacity:1; stroke:#3F9A5E }
.cfg-rollo--color .cfg-rollo__cara{ fill:#8FD1A3; stroke:#3F9A5E }
/* el dibujo de la bobina es bajo y los controles altos: centrado, en vez
   de quedar arriba con un hueco abajo */
#afilm .cfg-caja{ align-items:center }
#afilm .cfg-vista{ display:flex; align-items:center; min-height:220px }
#afilm .cfg-vista > div{ width:100% }