.productos-page em{font-style:normal;color:#a74713;}
.productos-page figure{margin:0;}
.productos-page h1,.productos-page h2{text-wrap:balance;}
.productos-page h2{font-size:clamp(38px,4.4vw,65px);}
.product-section{padding:95px 6%;max-width:1600px;margin:auto;}
.product-welcome{display:grid;grid-template-columns:1fr 1fr;min-height:570px;max-width:1600px;margin:auto;align-items:center;background:#f4f1e9;position:relative;overflow:hidden;}
/* El lienzo de la lluvia cubre toda la portada, detrás del texto; el texto deja pasar el mouse salvo en sus enlaces. */
.product-welcome>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:0;}
.product-welcome-copy{padding:48px 8% 55px 12%;position:relative;z-index:1;pointer-events:none;}
.product-welcome-copy a{pointer-events:auto;}
.product-welcome h1{font-size:clamp(42px,4.4vw,66px);line-height:1.1;letter-spacing:-.025em;}
.product-welcome-copy>p{max-width:400px;margin:25px 0 30px;font-size:17px;}
.hero-secondary{display:block;font-size:13px;margin-top:24px;width:fit-content;text-decoration:underline;text-underline-offset:6px;}
/* Portada: lluvia de huevos y Pía con física (Matter.js). Sin JS o con movimiento reducido, se ve la foto. */
.product-drop{position:relative;height:100%;min-height:570px;z-index:1;pointer-events:none;}
.product-drop .drop-more,.product-drop .drop-caption{pointer-events:auto;}
.drop-fallback{width:100%;height:100%;min-height:570px;object-fit:contain;padding:40px 6% 40px 2%;filter:drop-shadow(0 22px 22px #61340822);}
.js-lluvia .drop-fallback{display:none;}
.drop-more{position:absolute;left:25px;bottom:23px;z-index:2;border:0;cursor:pointer;display:inline-flex;gap:14px;align-items:center;border-radius:999px;padding:12px 20px;background:var(--olive);color:var(--cream);font-weight:700;font-size:13px;box-shadow:0 8px 18px #2d654430;transition:transform .2s,background .2s;}
.drop-more:hover{transform:translateY(-3px);background:#2a3d1a;}
.drop-more:focus-visible{outline:3px solid #b34308;outline-offset:3px;}
.drop-more span{font-size:18px;line-height:1;}
/* La leyenda es también el botón de "volver a empezar": reinicia la lluvia con Pía y los huevos iniciales */
.drop-caption{position:absolute;bottom:23px;right:25px;z-index:2;border:0;background:#fff9ecde;color:var(--brown);padding:10px 15px;font-size:10px;letter-spacing:.13em;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s,transform .2s;}
.js-lluvia .drop-caption{pointer-events:auto;}
.drop-caption:hover{background:#fff9ec;transform:translateY(-2px);}
.drop-caption:focus-visible{outline:3px solid #b34308;outline-offset:3px;}
.drop-caption:active{transform:translateY(0) scale(.98);}
.product-jumps{display:grid;grid-template-columns:repeat(4,1fr);padding:0 6%;background:#2d6544;color:#fff9ec;}
.product-jumps a{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:23px 20px;border-right:1px solid #fff9ec30;gap:15px;}
.product-jumps a:first-child{padding-left:0;}
.product-jumps a:last-child{border:0;}
.product-jumps span{font-size:10px;color:#c8dbac;}
.catalog-heading{display:flex;gap:55px;justify-content:space-between;align-items:flex-end;margin-bottom:38px;}
.catalog-heading>p{max-width:405px;font-size:16px;}
.catalog-filter{border:0;padding:0;margin:0 0 32px;display:flex;gap:12px;flex-wrap:wrap;}
.catalog-filter legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.catalog-filter input{position:absolute;width:1px;height:1px;clip-path:inset(50%);}
.catalog-filter label{padding:11px 20px;border:1px solid #2d654440;border-radius:30px;font-size:14px;color:#2d6544;font-weight:600;cursor:pointer;transition:background .2s;}
.catalog-filter label span{margin-left:10px;font-size:11px;}
.catalog-filter input:checked+label{background:#2d6544;color:#fff9ec;border-color:#2d6544;}
.catalog-filter input:focus-visible+label{outline:3px solid #a74713;outline-offset:4px;}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 27px;}
.catalog:has(#filter-carton:checked) .catalog-item:not(.group-carton),
.catalog:has(#filter-pet:checked) .catalog-item:not(.group-pet){display:none;}
.catalog-item{min-width:0;}
/* Fotos de producto recortadas (sin fondo, luz emparejada) sobre un fondo uniforme y una sombra suave */
.catalog-image{position:relative;overflow:hidden;background:#f4f1e9;border-radius:16px;height:255px;padding:6%;}
.catalog-image img{width:100%;height:100%;object-fit:contain;transition:transform .35s;filter:drop-shadow(0 14px 14px #61340826);}
.catalog-item:hover .catalog-image img{transform:scale(1.04);}
.quantity{position:absolute;top:14px;left:14px;font-size:11px;background:#fff9ec;padding:6px 10px;border-radius:20px;color:#2d6544;}
.catalog-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 8px;}
.catalog-title h3{font-size:29px;}
.catalog-title>span{font-size:11px;color:#2d6544;}
.classification{font-size:13px;display:flex;gap:14px;}
.classification strong{font-weight:700;}
.product-details{border-top:1px solid #61340825;border-bottom:1px solid #61340825;margin-top:17px;}
.product-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:12px 0;font-size:13px;font-weight:600;}
.product-details summary::-webkit-details-marker{display:none;}
.product-details[open] summary>span{transform:rotate(45deg);}
.product-details>div{padding:2px 0 18px;}
.product-details p{font-size:13px;margin-bottom:13px;}
.product-details .text-link{font-size:12px;gap:12px;}
.card-fresh{font-size:11px;display:flex;gap:10px;justify-content:space-between;padding-top:13px;color:#2d6544;}
/* De la granja a tu mesa: escena fija (sticky) mientras se hace scroll. La línea horizontal se pinta,
   el huevo avanza, se enciende el paso, cambia su texto y la foto que cubre ese tramo del recorrido. */
.journey-scroll{--progreso:0;}
.js-recorrido .journey-scroll{height:280vh;}
.js-recorrido .journey-stage{position:sticky;top:100px;}
.journey-stage .catalog-heading{margin-bottom:40px;}
.journey-line{list-style:none;margin:0;padding:0 0 26px;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
.journey-track{position:absolute;left:7px;right:7px;top:6px;height:3px;border-radius:3px;background:#61340822;}
.journey-fill{position:absolute;left:0;top:0;height:100%;width:calc(var(--progreso) * 100%);background:var(--green);border-radius:3px;}
.journey-egg{
  position:absolute;left:calc(var(--progreso) * 100%);top:50%;width:20px;height:26px;transform:translate(-50%,-50%) rotate(90deg);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:radial-gradient(circle at 36% 28%,#fbe3c6 0,#e9b98a 45%,#c98b58 100%);
  box-shadow:0 4px 10px #61340840;
}
.journey-step{position:relative;padding-top:26px;}
.journey-step:before{content:'';position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--green);border:3px solid var(--green);transition:background .3s,border-color .3s;}
.js-recorrido .journey-step:before{background:#fff9ec;border-color:#61340840;}
.js-recorrido .journey-step.is-on:before{background:var(--green);border-color:var(--green);}
.journey-step span{font-size:11px;font-weight:700;letter-spacing:.12em;color:#a74713;}
.journey-step h3{font-family:Raleway,sans-serif;font-weight:700;font-size:13px;line-height:1.4;margin-top:6px;transition:color .3s;}
.js-recorrido .journey-step h3{color:#61340866;}
.js-recorrido .journey-step.is-on h3{color:#613408;}
.journey-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:5%;align-items:center;margin-top:34px;}
.journey-texts{list-style:none;margin:0;padding:0;display:grid;}
.journey-texts li{grid-area:1/1;transition:opacity .4s,transform .4s;}
.js-recorrido .journey-texts li{opacity:0;transform:translateY(10px);pointer-events:none;}
.js-recorrido .journey-texts li.is-on{opacity:1;transform:none;pointer-events:auto;}
.journey-texts span{display:block;font-family:Kardia,Arial,sans-serif;font-size:clamp(24px,2.4vw,34px);line-height:1.1;color:#613408;margin-bottom:14px;}
.journey-texts p{font-size:16px;max-width:420px;}
.journey-texts .text-link{margin-top:20px;font-size:13px;}
.journey-photos{display:grid;}
.journey-photos figure{grid-area:1/1;margin:0;transition:opacity .6s,transform .6s;}
.js-recorrido .journey-photos figure{opacity:0;transform:scale(.97);}
.js-recorrido .journey-photos figure.is-on{opacity:1;transform:none;}
.journey-photos img{width:100%;height:min(360px,38vh);object-fit:cover;border-radius:14px;}
.journey-photos figcaption{font-size:12px;margin-top:10px;}
/* Sin JS: lista completa y las tres fotos en fila */
html:not(.js-recorrido) .journey-texts{gap:22px;}
html:not(.js-recorrido) .journey-texts li{grid-area:auto;}
html:not(.js-recorrido) .journey-photos{gap:16px;}
html:not(.js-recorrido) .journey-photos figure{grid-area:auto;}
html:not(.js-recorrido) .journey-photos img{height:200px;}
.journey>.text-link{margin-top:35px;}
.js-recorrido .journey>.text-link{margin-top:0;}
/* El empaque también cuenta: pestañas Cartón/PET + ciclo de 4 pasos que se recorre solo */
.packaging{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:6%;background:#f0ecdf;padding:80px 6%;scroll-margin-top:100px;}
.packaging-copy>p{margin:25px 0;font-size:16px;max-width:460px;}
.packaging-kpi{display:flex;align-items:baseline;gap:14px;max-width:460px;padding:18px 0;border-top:1px solid #61340830;border-bottom:1px solid #61340830;}
.packaging-kpi strong{font-family:Kardia,Arial,sans-serif;font-weight:400;font-size:56px;line-height:1;color:#a74713;}
.packaging-kpi span{font-size:14px;line-height:1.4;color:#2d6544;}
.material-tabs{display:inline-flex;gap:6px;margin:26px 0 18px;padding:6px;border-radius:999px;background:#fff9ec;}
.material-tabs button{border:0;background:transparent;border-radius:999px;padding:11px 26px;font-weight:700;font-size:15px;color:#2d6544;cursor:pointer;transition:background .25s,color .25s;}
.material-tabs button[aria-selected="true"]{background:#2d6544;color:#fff9ec;}
.material-tabs button:focus-visible{outline:3px solid #b34308;outline-offset:3px;}
.packaging-home{display:flex;gap:12px;align-items:flex-start;max-width:460px;font-size:14px;margin-bottom:22px;}
.bin{flex:none;width:22px;height:26px;margin-top:2px;border-radius:3px 3px 6px 6px;background:#fff;border:2px solid #61340860;position:relative;}
.bin:before{content:'';position:absolute;left:-4px;right:-4px;top:-5px;height:5px;border-radius:2px;background:#61340860;}
.packaging .text-link{font-size:13px;}

.packaging-cycle{display:grid;gap:30px;}
.cycle-ring{
  position:relative;width:min(340px,70%);aspect-ratio:1;margin:auto;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--green) calc(var(--avance,.25) * 1turn),#e2dccb 0);
  transition:--avance .6s;
}
.cycle-ring:before{content:'';position:absolute;inset:14px;border-radius:50%;background:#f0ecdf;}
.cycle-img{position:absolute;width:88%;height:auto;opacity:0;transition:opacity .45s,transform .45s;transform:scale(.94);filter:drop-shadow(0 18px 20px #61340828);}
.cycle-img.is-on{opacity:1;transform:none;}
.cycle-badge{position:absolute;z-index:2;top:-4%;right:-8%;width:30%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#fff9ec;box-shadow:0 0 0 5px var(--green),0 14px 24px #2d654433;}
.cycle-badge img{width:66%;height:auto;animation:recicla 14s linear infinite;}
@keyframes recicla{to{transform:rotate(1turn);}}
.cycle-steps[hidden]{display:none;}
.cycle-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cycle-steps li{padding:16px 14px 14px;border-radius:16px;background:#fff9ec80;border:2px solid transparent;transition:background .3s,border-color .3s,transform .3s;cursor:pointer;}
.cycle-steps li.is-active{background:#fff9ec;border-color:var(--green);transform:translateY(-4px);}
.cycle-steps li span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#a74713;margin-bottom:6px;}
.cycle-steps h3{font-size:17px;font-family:Raleway,Arial,sans-serif;font-weight:700;line-height:1.25;color:#613408;}
.cycle-steps p{font-size:13px;margin-top:6px;line-height:1.45;}
@property --avance{syntax:'<number>';inherits:false;initial-value:.25;}
.product-fresh{display:grid;grid-template-columns:1.1fr 1fr;padding:80px 6%;gap:6%;align-items:center;background:#e1edc9;overflow:hidden;}
.product-fresh h2{color:#2d6544;}
.product-fresh>div>p{max-width:450px;margin:25px 0;}
.fresh-instructions{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#2d6544;margin:25px 0;}
.fresh-visual{position:relative;min-height:390px;}
.fresh-code{width:85%;position:absolute;top:0;right:-8%;transform:rotate(7deg);}
.product-pia{width:46%;position:absolute;left:0;bottom:0;}
.product-pia img{width:100%;max-height:310px;object-fit:contain;object-position:bottom;}
.product-ending{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;}
.product-ending p{max-width:410px;margin:25px 0;}
.product-ending figure img{width:100%;height:350px;object-fit:cover;border-radius:16px;}

@media (max-width:1000px){
  /* Tablet en vertical: el módulo de empaques se apila y los cuatro pasos usan todo el ancho */
  .packaging{grid-template-columns:1fr;gap:40px;}
  .packaging-copy>p,.packaging-kpi,.packaging-home{max-width:none;}
  .cycle-steps{grid-template-columns:repeat(4,minmax(0,1fr));}
  .cycle-steps li{min-width:0;}
  .product-welcome h1{font-size:43px;}
  .product-welcome-copy{padding-left:10%;padding-right:6%;}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .catalog-heading>p{max-width:340px;}
  .product-jumps a{font-size:11px;padding:20px 12px;}
  .product-fresh{gap:3%;}
  .fresh-visual{min-height:320px;}
  .product-pia{width:50%;}
  /* En la columna angosta del lienzo los dos botones no caben en la misma línea: la leyenda sube. */
  .drop-more{left:18px;bottom:18px;padding:11px 16px;font-size:12px;}
  .drop-caption{right:18px;bottom:auto;top:18px;}
}
@media (max-width:700px){
  .product-section{padding:60px 6%;}
  .product-welcome{grid-template-columns:1fr;}
  .product-welcome-copy{padding:38px 6% 32px;}
  .product-welcome h1{font-size:44px;max-width:500px;}
  .product-welcome h1 br:nth-child(2){display:none;}
  .product-drop,.drop-fallback{min-height:360px;}
  .drop-fallback{padding:0 6% 30px;}
  .drop-more{left:18px;bottom:18px;padding:11px 16px;font-size:12px;}
  .drop-caption{right:18px;bottom:auto;top:18px;}
  .product-jumps{grid-template-columns:1fr 1fr;padding:0 6%;}
  .product-jumps a{border-bottom:1px solid #fff9ec30;padding:17px 10px!important;}
  .product-jumps a:nth-child(even){border-right:0;}
  .catalog-heading{display:block;}
  .catalog-heading>p{max-width:none;margin-top:22px;}
  .catalog-filter{gap:8px;}
  .catalog-filter label{font-size:12px;padding:10px 14px;}
  .catalog-grid{gap:30px 17px;}
  .catalog-image{height:190px;}
  .catalog-title h3{font-size:25px;}
  .catalog-title>span{display:none;}
  .classification{font-size:11px;gap:7px;}
  .card-fresh{font-size:10px;line-height:1.7;}
  .quantity{font-size:9px;top:9px;left:9px;}
  .packaging,.product-fresh,.product-ending{grid-template-columns:1fr;padding:55px 6%;gap:35px;}
  .js-recorrido .journey-stage{top:90px;}
  .js-recorrido .journey-scroll{height:240vh;}
  .journey-line{gap:6px;padding-bottom:16px;}
  .journey-step{padding-top:22px;}
  .journey-step h3{display:none;}  /* el título grande del paso ya va debajo */
  .journey-step span{font-size:10px;}
  .journey-detail{grid-template-columns:1fr;}
  .journey-photos img{height:min(190px,24vh);}
  .journey-photos figcaption{font-size:11px;margin-top:6px;}
  .journey-stage .catalog-heading{margin-bottom:14px;}
  .journey-stage .catalog-heading h2{font-size:34px;}
  .journey-stage .catalog-heading .eyebrow{font-size:10px;margin-bottom:10px;}
  .journey-stage .catalog-heading>p{display:none;}
  .journey-detail{margin-top:22px;gap:12px;}
  .journey-texts span{font-size:21px;margin-bottom:6px;}
  .journey-texts p{font-size:13px;line-height:1.5;}
  .packaging-cycle{gap:22px;}
  .cycle-steps{grid-template-columns:1fr 1fr;gap:10px;}
  .cycle-steps li{padding:13px 12px;}
  .cycle-steps h3{font-size:15px;}
  .packaging-kpi strong{font-size:46px;}
  .fresh-visual{min-height:330px;max-width:480px;width:100%;margin:auto;}
  .fresh-code{right:0;width:76%;}
  .product-pia{width:42%;}
  .product-ending figure img{height:300px;}
}
@media (max-width:390px){
  .catalog-grid{grid-template-columns:1fr;}
  .catalog-image{height:240px;}
  .product-welcome h1{font-size:38px;}
  .product-fresh h2{font-size:38px;}
  .fresh-visual{min-height:275px;}
}
@media (prefers-reduced-motion:reduce){
  .journey-step:before,.journey-step h3,.journey-texts li,.journey-photos figure{transition:none;}
  .cycle-ring,.cycle-img,.cycle-steps li{transition:none;}
  .cycle-badge img{animation:none;}
  .catalog-image img,.catalog-filter label{transition:none;}
  .catalog-item:hover .catalog-image img{transform:none;}
}