/* Agrobiológicos del Pacífico. Sistema visual del sitio.
   Colores y tipografía de la ficha técnica del logotipo. Concepto: cuenca del Pacífico.
   Marino es escenario y tinta; verde es biología y acción; lima es señal sobre marino; celeste es océano y rutas. */
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --marino:#012742;--verde:#20802B;--lima:#83BD1D;--celeste:#7FC0E7;
  --bg:#FFFFFF;--surface:#F3F7F9;--surface-2:#E4EDF2;--tinte:#EBF5FB;
  --ink:#012742;--muted:#465A68;--line:#D5DEE2;--field-line:#7A8C97;
  --accent:#20802B;--btn-bg:#012742;--btn-fg:#FFFFFF;--focus:#20802B;--tag-bg:#FFF3D1;--tag-fg:#6A4B00;--seg-3:#7FC0E7;
  --r-1:6px;--r-2:12px;--r-3:24px;--wrap:1320px;
  --sh-1:0 1px 2px rgba(1,39,66,.06),0 2px 8px rgba(1,39,66,.05);--sh-2:0 2px 4px rgba(1,39,66,.06),0 14px 32px -10px rgba(1,39,66,.2);
  --dur-1:90ms;--dur-2:160ms;--dur-3:240ms;--dur-4:420ms;--dur-5:640ms;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-ui:cubic-bezier(.2,0,0,1);
  /* Escala de espaciado vertical: relleno de sección, cierre marino, cabecera de sección → contenido,
     cabecera de página interior (arriba) y entradilla → contenido */
  --sp-sec:clamp(40px,31px + 2.3vw,64px);--sp-sec-c:clamp(32px,25px + 1.9vw,52px);--sp-head:clamp(20px,15px + 1.2vw,32px);
  --sp-hero-t:clamp(28px,18px + 2.6vw,56px);--sp-hero-b:clamp(24px,18px + 1.5vw,40px);
  --font:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}

:root:lang(zh){--font:Figtree,"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif}
/* Chino: sin el espaciado negativo ni el interlineado apretado pensados para Figtree, y con rótulos algo mayores */
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) .display,:lang(zh) .sim-t,:lang(zh) .fila-t,:lang(zh) .foot-lema,:lang(zh) .vidrio-t b,:lang(zh) .carro-cab h2,:lang(zh) .stat-v{letter-spacing:0}
:lang(zh) h1,:lang(zh) h2{line-height:1.25}
:lang(zh) .escena .display{line-height:1.18;letter-spacing:.01em}
:lang(zh) .escena .display .acc{display:block}
:lang(zh) .paralelo,:lang(zh) .mini,:lang(zh) .insignia,:lang(zh) .sello,:lang(zh) .pase dt,:lang(zh) .tabla thead th,:lang(zh) .foot h2,:lang(zh) .foot-orillas,:lang(zh) .lista-grupo-t{letter-spacing:.06em;font-size:.875rem}
:lang(zh) body{line-height:1.75}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
h1,h2,h3{font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.5rem + 3vw,3.75rem);line-height:1.04;letter-spacing:-.028em}
.display{font-size:clamp(2.5rem,1rem + 3.9vw,4.5rem);line-height:1;letter-spacing:-.034em}
h2{font-size:clamp(1.875rem,1.3rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.022em}
.h2-sub{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);line-height:1.15;letter-spacing:-.015em}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);line-height:1.2;letter-spacing:-.012em;font-weight:600}
p{max-width:60ch}
/* Énfasis: una palabra en negrita por titular, como en el logotipo */
.acc{font-weight:700}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px var(--bg)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:max(clamp(20px,4vw,48px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,4vw,48px),env(safe-area-inset-right,0px))}
.section{padding-block:var(--sp-sec)}
.tinte{background:var(--tinte)}
/* Dos secciones seguidas con el mismo fondo comparten un solo relleno */
.tinte + .tinte,.section:not(.tinte) + .section:not(.tinte){padding-top:0}
.stack{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.lead{font-size:clamp(1.1rem,1.03rem + .35vw,1.3rem);color:var(--muted);line-height:1.5}
.note{font-size:.92rem;color:var(--muted)}
.mini{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);line-height:1.5}
/* Rótulo de paralelo: número, nombre y un filete que prolonga los paralelos del globo */
.paralelo{display:flex;align-items:center;gap:12px;max-width:none;font:600 .8125rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.paralelo span{color:var(--accent);font-variant-numeric:tabular-nums}
.paralelo::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px clamp(24px,4vw,64px);align-items:end;margin-bottom:var(--sp-head)}
.sec-head>.paralelo,.sec-head>div{grid-column:1/-1}
.sec-head>.lead{justify-self:end}
.sec-head>h2:last-child,.sec-head>h2:has(+div){grid-column:1/-1;max-width:20ch}
@media (max-width:900px){.sec-head{grid-template-columns:minmax(0,1fr)}.sec-head>.lead{justify-self:start}}
.skip{position:absolute;left:12px;top:-60px;background:var(--btn-bg);color:var(--btn-fg);padding:10px 16px;border-radius:var(--r-1);z-index:60}
.skip:focus{top:12px}

/* Botones: responden con la pulsación y con la flecha, no con un salto */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;font:600 1rem/1.2 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform var(--dur-1) var(--ease-ui),background-color var(--dur-2) var(--ease-ui),border-color var(--dur-2) var(--ease-ui)}
.btn:active{transform:scale(.975)}
.btn-p{background:var(--btn-bg);color:var(--btn-fg)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--field-line)}
fieldset:disabled .btn{opacity:.5;cursor:not-allowed}
.arrow{width:18px;height:18px;flex:none;transition:transform var(--dur-3) var(--ease-out)}
.arrow.atras{transform:rotate(180deg)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1.5px solid transparent;padding-block:4px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (hover:hover) and (pointer:fine){
  .btn-s:hover{border-color:var(--ink)}
  .btn-p:hover{filter:brightness(1.08)}
  .escena .btn-s:hover,.cierre .btn-s:hover{border-color:#fff;background-color:rgba(255,255,255,.08)}
  .globo-pausa:hover{opacity:1;background-color:rgba(1,39,66,.8)}
  .chip:hover{border-color:var(--ink)}
  .btn:hover .arrow,.link:hover .arrow,a:hover>.arrow:not(.atras){transform:translateX(4px)}
  .link:hover{border-color:currentColor}
  .crumb:hover .arrow{transform:rotate(180deg) translateX(4px)}
}

/* Marca de pendiente y barra de borrador */
.tag{display:inline-block;justify-self:start;align-self:start;width:fit-content;max-width:100%;font-size:.74rem;font-weight:600;line-height:1.3;letter-spacing:.01em;padding:3px 9px;border-radius:var(--r-1);background:var(--tag-bg);color:var(--tag-fg);white-space:normal}
.pend{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;padding:clamp(20px,3vw,32px);border:1.5px dashed var(--field-line);border-radius:var(--r-2);color:var(--muted)}
.pend h3,.pend-t{color:var(--ink);font-size:1.3rem;line-height:1.2;font-weight:600}

/* Encabezado: píldora de cristal que flota sobre la página */
:root{--head-h:92px;--glass:rgba(255,255,255,.82);--glass-line:rgba(1,39,66,.12);--glass-sh:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -18px rgba(1,39,66,.45)}

.site-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:40;margin-block:10px;padding-left:max(clamp(10px,2.2vw,32px),env(safe-area-inset-left,0px));padding-right:max(clamp(10px,2.2vw,32px),env(safe-area-inset-right,0px));pointer-events:none}
.head-in{pointer-events:auto;display:flex;align-items:center;gap:20px;min-height:72px;max-width:calc(var(--wrap) + 56px);margin-inline:auto;padding-inline:clamp(16px,2.2vw,30px) clamp(10px,1.2vw,14px);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--glass-line);box-shadow:var(--glass-sh)}
.logo{display:block;flex:none;line-height:0}
.logo img{height:44px;width:auto}
.logo .pos-r{display:none}

.nav{margin-inline:auto}
.nav>ul{display:flex;align-items:center;gap:2px}
.nav li{position:relative;display:flex;align-items:center}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.97rem;color:var(--ink);transition:color var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.nav a svg{width:18px;height:18px;flex:none}
.nav>ul>li>a[aria-current="page"]{font-weight:600;border-radius:0;box-shadow:inset 0 -3px 0 var(--accent)}
.nav .nav-cta{display:none}
.nav .nav-cta a{justify-content:center;background:var(--btn-bg);color:var(--btn-fg);font-weight:600}
/* Submenús: se abren con el cursor o con su botón; cerrados no reciben foco */
.con-sub>a{padding-right:6px}
.sub-btn{display:grid;place-items:center;width:30px;height:38px;margin-left:-4px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.sub-btn svg{width:16px;height:16px;transition:transform var(--dur-3) var(--ease-out)}
.sub{position:absolute;top:calc(100% + 16px);left:-6px;z-index:2;display:grid;gap:2px;min-width:236px;padding:8px;border-radius:20px;background:var(--bg);border:1px solid var(--line);box-shadow:0 2px 4px rgba(1,39,66,.06),0 22px 44px -18px rgba(1,39,66,.4);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--dur-2) var(--ease-ui),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
.sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.sub li{display:block}
.sub a{padding:10px 12px;border-radius:12px;font-size:.95rem;white-space:nowrap}
.sub li:last-child a{color:var(--accent);font-weight:600}
.con-sub.abierto>.sub{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.con-sub.abierto .sub-btn svg{transform:rotate(180deg)}
.head-tools{display:flex;align-items:center;gap:10px}
/* Selector de idioma */
.idioma{position:relative;flex:none}
.idioma-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px 0 13px;border-radius:999px;border:1px solid var(--glass-line);background:var(--surface);color:var(--ink);font:600 .9rem/1 var(--font);letter-spacing:.02em;cursor:pointer;transition:border-color var(--dur-2) var(--ease-ui)}
.idioma-btn svg{width:18px;height:18px;flex:none}
.idioma-btn svg:last-child{width:15px;height:15px;color:var(--muted);transition:transform var(--dur-3) var(--ease-out)}
.idioma.abierto .idioma-btn svg:last-child{transform:rotate(180deg)}
.idioma-menu{position:absolute;top:calc(100% + 14px);right:0;z-index:2;display:grid;gap:2px;min-width:170px;padding:8px;border-radius:20px;background:var(--bg);border:1px solid var(--line);box-shadow:0 2px 4px rgba(1,39,66,.06),0 22px 44px -18px rgba(1,39,66,.4);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--dur-2) var(--ease-ui),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
.idioma.abierto .idioma-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.idioma-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink)}
.idioma-menu a[aria-current="true"]{font-weight:700;color:var(--accent)}
.idioma-menu a[aria-current="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.nav .nav-idiomas{display:none}
/* En teléfono el selector pasa al menú desplegado */
@media (max-width:480px){
  .idioma{display:none}
  .nav .nav-idiomas{display:block;margin-top:10px;padding:12px 14px 4px;border-top:1px solid var(--line)}
  .nav-idiomas ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:6px}
  .nav-idiomas li{display:block}
  .nav .nav-idiomas a{padding:11px 12px;font-size:1rem;border-radius:12px}
  .nav .nav-idiomas a[aria-current="true"]{font-weight:700;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:transparent;border:1.5px solid var(--line);color:var(--ink);cursor:pointer;transition:transform var(--dur-1) var(--ease-ui),border-color var(--dur-2) var(--ease-ui)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.menu-btn path{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2)}
.menu-btn[aria-expanded="true"] .m1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .m2{opacity:0}
.menu-btn[aria-expanded="true"] .m3{transform:translateY(-5px) rotate(-45deg)}
.head-cta{min-height:50px;padding:7px 8px 7px 20px;gap:10px;font-size:.96rem;white-space:nowrap}
.head-cta>svg{width:19px;height:19px;flex:none}
.cta-fl{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lima);color:var(--marino)}

.menu-btn{display:none}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{background:var(--surface)}
  .nav>ul>li>a[aria-current="page"]:hover{background:transparent}
  .nav .nav-cta a:hover{background:var(--btn-bg)}
  .icon-btn:hover,.idioma-btn:hover{border-color:var(--ink)}
  .idioma-menu a:hover{background:var(--surface)}
  .sub-btn:hover{color:var(--ink)}
  .con-sub:not(.sin-hover):hover>.sub{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .con-sub:not(.sin-hover):hover .sub-btn svg{transform:rotate(180deg)}
}
@media (max-width:1279px){
  :root{--head-h:76px}
  .site-head{margin-block:8px;top:calc(env(safe-area-inset-top,0px) + 8px)}
  .head-in{gap:8px;min-height:60px;padding-inline:16px 8px}
  .logo{margin-right:auto}.logo img{height:36px}
  .menu-btn{display:grid;order:2}
  .head-tools{order:1}
  .head-cta{display:none}
  .nav{display:none;position:absolute;top:calc(100% + 8px);left:10px;right:10px;background:var(--bg);border:1px solid var(--line);border-radius:24px;box-shadow:0 22px 44px -18px rgba(1,39,66,.5);padding:10px;margin:0;max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto}
  .nav.open{display:block;animation:baja var(--dur-3) var(--ease-out)}
  .nav>ul{flex-direction:column;align-items:stretch}
  .nav li{display:block}
  .nav a{padding:14px;font-size:1.08rem;border-radius:14px}
  .nav>ul>li>a[aria-current="page"]{border-radius:14px;box-shadow:inset 3px 0 0 var(--accent)}
  .sub-btn,.sub{display:none}
  .nav .nav-cta{display:block;margin-top:8px}
}
@keyframes baja{from{opacity:0;transform:translateY(-8px)}}

/* Por debajo de 226 px de ancho se usa el logotipo de divisor reforzado para mantener 1 px. Falta su versión negativa. */
@media (max-width:384px){
  .logo .pos{display:none}.logo .pos-r{display:block}
  
}

@media (max-width:359px){.head-in{gap:6px;padding-inline:12px 6px}.logo img{height:33px}.head-tools{gap:6px}.paralelo{letter-spacing:.08em}}

/* Escena de portada: atmósfera marina, follaje, globo con órbitas, barra de envío y franja de Bio.
   Abajo solo queda la ola más 16 px: la ola ya hace de respiro hacia la primera sección. */
.escena{position:relative;isolation:isolate;margin-top:calc(-1*var(--head-h));padding-top:var(--head-h);padding-bottom:calc(clamp(44px,6.4vw,96px) + 16px);color:#fff;overflow:hidden;overflow:clip;background:
  radial-gradient(64% 58% at 80% 30%,rgba(64,150,214,.62) 0,rgba(64,150,214,0) 64%),
  radial-gradient(50% 44% at 6% 0%,rgba(46,120,184,.55) 0,rgba(46,120,184,0) 72%),
  radial-gradient(70% 46% at 60% 100%,rgba(24,112,60,.5) 0,rgba(24,112,60,0) 72%),
  linear-gradient(180deg,#05213C 0,#012742 44%,#02322F 100%)}
.escena-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Rayos de luz y destello, arriba a la derecha */
.escena-fondo::before{content:"";position:absolute;right:-12%;top:-34%;width:78%;height:150%;background:conic-gradient(from 196deg at 86% 12%,rgba(255,255,255,0) 0deg,rgba(196,228,255,.2) 7deg,rgba(255,255,255,0) 15deg,rgba(196,228,255,.12) 24deg,rgba(255,255,255,0) 33deg,rgba(196,228,255,.16) 42deg,rgba(255,255,255,0) 52deg,rgba(255,255,255,0) 360deg);filter:blur(16px)}
.escena-fondo::after{content:"";position:absolute;right:3%;top:44px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7) 0,rgba(200,230,255,.3) 16%,rgba(200,230,255,0) 62%)}
.escena-arriba{position:relative}
/* Follaje por capas. --px y --py (de -1 a 1) los pone app.js con el cursor: cada capa se desplaza según su profundidad y cada hoja se inclina */
.follaje{position:absolute;left:0;right:0;bottom:clamp(-270px,-16vw,-150px);height:clamp(340px,42vw,600px);pointer-events:none;--px:0;--py:0}
/* El follaje se funde con el fondo por abajo con un velo fijo: una máscara obligaría a repintar todas las capas en cada cuadro */
.follaje::after{content:"";position:absolute;inset:auto 0 -48px 0;height:calc(36% + 48px);background:linear-gradient(180deg,rgba(1,44,58,0),rgba(1,44,58,.9) 60%,rgba(1,44,58,0))}
.f-capa{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f-medio{filter:blur(5px);translate:calc(var(--px)*-7px) calc(var(--py)*-3px);transition:translate 900ms var(--ease-out);will-change:transform}
.f-frente{position:absolute;right:0;bottom:0;height:100%;aspect-ratio:1440/460;translate:calc(var(--px)*-12px) calc(var(--py)*-5px);transition:translate 700ms var(--ease-out)}
.f-cerca{filter:blur(11px);translate:calc(var(--px)*-22px) calc(var(--py)*-8px);transition:translate 1100ms var(--ease-out);will-change:transform}
.hoja{position:absolute;aspect-ratio:184/112;background:url(hoja-1.svg) center/100% 100% no-repeat;translate:0 -55.36%;transform-origin:0 55.36%;rotate:calc(var(--g) + var(--px)*var(--k,1)*1.7deg);transition:rotate 900ms var(--ease-out);will-change:transform}
.hoja.h2{background-image:url(hoja-2.svg)}
.escena-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding-block:clamp(6px,1vw,14px) 0}
.escena-t{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,24px);justify-items:start}
.insignia{display:inline-flex;align-items:center;gap:10px;max-width:none;padding:7px 16px 7px 8px;border-radius:999px;border:1.5px solid rgba(131,189,29,.9);background:rgba(131,189,29,.1);color:#A5DB3C;font:600 .8rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase}
.insignia svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--lima);color:var(--marino)}
.escena .display{font-size:clamp(2.5rem,.8rem + 3.6vw,4.2rem);font-weight:600;line-height:.98;letter-spacing:-.036em;text-shadow:0 2px 34px rgba(1,18,36,.45)}
.escena .display .acc{color:#93CF21}
.escena .lead{max-width:44ch;font-size:clamp(1.1rem,1rem + .45vw,1.36rem)}
.escena .paralelo,.cierre .paralelo{color:#C5D6E0}
.escena .paralelo span{color:var(--lima)}
.escena .paralelo::after{background:rgba(127,192,231,.28)}
.escena .lead,.cierre .lead{color:#DCE9F1}
.escena .btn-p,.cierre .btn-p,.panel-marino .btn-p{background:var(--lima);color:var(--marino)}
.escena .btn-p{background:linear-gradient(180deg,#9AD427,#7DB81A);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 34px -14px rgba(131,189,29,.85)}
.escena .btn-s,.cierre .btn-s{color:#fff;border-color:rgba(255,255,255,.5)}
.escena .btn-s{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.escena .actions .btn{min-height:56px;padding-inline:30px;font-size:1.04rem}
.escena :focus-visible,.cierre :focus-visible,.foot :focus-visible,.panel-marino :focus-visible{outline-color:var(--lima);box-shadow:0 0 0 6px var(--marino)}
.orillas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.94rem}
.orillas li{display:grid;gap:2px;min-width:0}
.orillas span{font-size:.8rem;color:#C5D6E0}
/* Globo: esfera, resplandor y dos órbitas. La mitad trasera de cada órbita queda detrás de la esfera. */
.globo-caja{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:118%;margin:-34px -9% 0;max-width:max(320px,min(470px,calc(100svh - 470px)));justify-self:center}
.globo-esfera{position:relative;grid-area:1/1}
.globo-esfera::before{content:"";position:absolute;inset:-9%;border-radius:50%;background:radial-gradient(circle,rgba(130,200,250,.5) 0,rgba(130,200,250,.2) 44%,rgba(130,200,250,0) 68%)}
.globo{position:relative;aspect-ratio:1;width:100%;scroll-margin-top:calc(var(--head-h) + 8px - 104px)}
.globo-gl{border-radius:50%}
.orbita{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity var(--dur-4) var(--ease-ui)}
.orbita-f{z-index:1}
.orbita .luz{stroke-dasharray:46 954}
.globo-caja.lupa .orbita{opacity:0}
.globo-fijo,.globo canvas{position:absolute;inset:0;width:100%;height:100%}
.globo canvas{touch-action:pan-y;cursor:grab}
.globo.agarrado canvas{cursor:grabbing}
.globo.vivo .globo-fijo{visibility:hidden}
/* Pausa: un botón redondo y discreto en la esquina del globo. Detiene el giro, las órbitas y las hojas. */
.globo-pausa{position:absolute;left:5%;bottom:5%;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(1,39,66,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:opacity var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.globo-pausa:focus-visible,.globo-pausa[data-pausado]{opacity:1}
.globo-pausa svg{width:15px;height:15px}
.globo-pausa .i-sigue,.globo-pausa[data-pausado] .i-pausa{display:none}
.globo-pausa[data-pausado] .i-sigue{display:block}
.escena-foto{border-radius:var(--r-3);overflow:hidden;aspect-ratio:5/5.2}
.escena-foto img{width:100%;height:100%;object-fit:cover}
/* Barra del simulador de envío */
.escena-sim{position:relative;z-index:1;margin-top:clamp(6px,.8vw,12px)}
.sim{display:grid;grid-template-columns:minmax(260px,.6fr) minmax(0,1.4fr);gap:14px clamp(18px,2.2vw,30px);align-items:center;padding:clamp(16px,1.6vw,22px) clamp(16px,2vw,26px);border-radius:30px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(196,228,255,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 28px 56px -30px rgba(0,10,26,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.sim-cab{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);padding-right:clamp(18px,2.2vw,30px);border-right:1px solid rgba(196,228,255,.3)}
.sim-ico{flex:none;width:clamp(40px,3.4vw,56px);color:#A9DCFF}
.sim-ico svg{width:100%;height:auto;stroke-width:1.1}
.sim-t{font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff}
.sim-cab>div{min-width:0}
/* En teléfono el origen deja de ser un campo y pasa al título */
.sim-t-c{display:none}
.sim-out{max-width:34ch;margin-top:6px;font-size:.92rem;font-weight:500;line-height:1.4;color:#fff}
.sim-out:empty{margin:0}
.sim-pista{max-width:34ch;margin-top:6px;font-size:.92rem;line-height:1.4;color:#D3E3EE}
.sim-out:not(:empty)+.sim-pista{display:none}
.sim-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch}
.campo{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;min-height:66px;padding:9px 12px;border-radius:18px;background:rgba(1,39,66,.6);border:1px solid rgba(196,228,255,.32);cursor:pointer;transition:border-color var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.campo>svg{grid-row:1/3;width:26px;height:26px;color:#fff}
.campo-l{grid-column:2;font-size:.84rem;line-height:1.25;color:#D3E3EE}
.campo-fijo{cursor:default}
.campo-fijo b{grid-column:2;font:600 1rem/1.35 var(--font);color:#fff}
.campo select{grid-column:2;-webkit-appearance:none;appearance:none;width:100%;min-width:0;margin:0;padding:1px 22px 1px 0;border:0;border-radius:4px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/16px;color:#fff;font:600 1rem/1.35 var(--font);text-overflow:ellipsis;cursor:pointer}
.campo select:focus-visible{outline:0;box-shadow:none}
.campo:focus-within{outline:3px solid var(--lima);outline-offset:2px}
.campo option{background:#012742;color:#fff}
.sim .btn-p{min-height:66px;padding-inline:clamp(18px,1.8vw,30px);font-size:1.02rem;white-space:nowrap}
.sim.en-ruta .btn .arrow{animation:late 900ms var(--ease-out) infinite}
@keyframes late{50%{transform:translateX(6px)}}
.sim-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:8px;border-top:1px solid rgba(196,228,255,.22)}
.sim-pie .sim-geo{order:2}
.sim-geo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid rgba(196,228,255,.45);background:transparent;color:#fff;font:500 .92rem var(--font);white-space:nowrap;cursor:pointer}
.sim-geo svg{width:18px;height:18px;flex:none}
.sim-geo[aria-disabled="true"]{opacity:.6;cursor:progress}
/* La nota legal va plegada: una línea que se abre al pulsarla */
.sim-det{flex:1 1 320px;order:1;min-width:0;font-size:.8rem;line-height:1.4;color:#C3D4DF}
.sim-det summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:6px;cursor:pointer;list-style:none;font-weight:500;color:#D3E3EE;border-radius:8px}
.sim-det summary::-webkit-details-marker{display:none}
.sim-det summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-3) var(--ease-out)}
.sim-det[open] summary::after{margin-top:3px;transform:rotate(225deg)}
.sim-nota{max-width:none;padding-bottom:6px;color:#C3D4DF}
/* Franja de Bio: retrato, una línea de presentación y cuatro accesos de cristal. Son enlaces reales; src/bio.js los
   intercepta para abrir el chat con esa intención. */
.bio-franja{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(14px,1.6vw,22px)}
.bio-cara{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#0B3550;box-shadow:0 0 0 2px rgba(147,207,33,.85),0 6px 16px -6px rgba(0,10,26,.8)}
.bio-hola{display:flex;align-items:center;gap:12px;min-width:0}
.bio-hola p{max-width:none;font-size:1rem;line-height:1.35;font-weight:500;color:#fff;text-shadow:0 1px 12px rgba(1,18,36,.6)}
.bio-accesos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.bio-accesos a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;height:100%;min-height:60px;padding:8px 12px 8px 14px;border-radius:20px;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(1,39,66,.66),rgba(1,39,66,.54));border:1px solid rgba(196,228,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.bio-accesos a:active{transform:scale(.985)}
.bio-accesos b{font-size:.98rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.bio-acc-i{width:28px;color:#A5DB3C}
.bio-acc-i svg{width:100%;height:auto;stroke-width:1.5}
.bio-acc-f{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.bio-acc-f .arrow{width:14px;height:14px}
/* Curva hacia la página */
.ola{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:clamp(44px,6.4vw,96px);pointer-events:none}
.ola path{fill:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .bio-accesos a:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.7);background-color:rgba(255,255,255,.1)}
  .sim-det summary:hover{color:#fff}
  .campo:hover{border-color:rgba(255,255,255,.6);background-color:rgba(1,39,66,.72)}
  .sim-geo:hover{border-color:#fff;background-color:rgba(255,255,255,.08)}
}
@media (min-width:901px) and (max-height:760px){.escena .display{font-size:clamp(2.4rem,.9rem + 3.2vw,3.7rem)}.escena-t{gap:14px}.escena .actions .btn{min-height:50px}.escena .lead{max-width:56ch;font-size:1.1rem}.vidrios a{min-height:88px;padding-block:12px}}
@media (max-width:1240px){.sim{grid-template-columns:minmax(0,1fr)}.sim-cab{padding-right:0;border-right:0}.sim-out,.sim-pista{max-width:none}}
@media (max-width:1100px){.bio-accesos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .escena-in{grid-template-columns:minmax(0,1fr);padding-top:22px}
  .globo-caja{width:100%;margin:0;max-width:min(440px,max(220px,calc(100svh - var(--head-h) - 20px)))}
  .follaje{height:300px;bottom:-90px}
  .escena-fondo::after{width:170px;height:170px;top:64px}
}
/* Simulador compacto: el origen (siempre México) va en el título; destino y tipo de carga, en dos columnas */
@media (max-width:760px){
  .sim{gap:12px;padding:14px;border-radius:24px}
  .sim-cab{gap:12px}.sim-ico{width:34px}
  .sim-t{font-size:1.25rem}.sim-t-l,.sim-pista{display:none}.sim-t-c{display:inline}
  .sim-campos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sim-campos .campo-fijo{display:none}
  .sim-campos .btn{grid-column:1/-1;min-height:52px}
  .campo{min-height:60px;padding:8px 12px;border-radius:16px}
  .sim-pie{gap:4px 12px;padding-top:8px}
  .sim-geo{flex:1 1 auto;justify-content:center}
  .sim-det{flex:1 1 100%;order:3}
}
@media (max-width:640px){
  .orillas{display:none}
  .escena .actions{width:100%}.escena .actions .btn{flex:1 1 auto;min-height:50px;padding-inline:22px}
  .globo-caja{max-width:300px}
  .bio-accesos a{grid-template-columns:minmax(0,1fr) auto;min-height:64px;padding:8px 10px 8px 14px;border-radius:18px}
  .bio-acc-i{display:none}
  .bio-accesos b{font-size:.92rem}
  .bio-acc-f{width:24px;height:24px;border-width:1px}
  .bio-hola p{font-size:.95rem}
}
@media (max-width:420px){.campo{grid-template-columns:minmax(0,1fr)}.campo>svg{display:none}.campo-l,.campo select,.campo .lista,.campo-fijo b{grid-column:1}}
/* Cifras: tira compacta bajo el héroe, solo cuando hay datos con fuente y fecha */
.cifras-tira{padding-block:20px;border-bottom:1px solid var(--line)}
.cifras-tira .nums{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 24px}
.cifras-tira .nums>div{border-top:0;padding-top:0;gap:2px}
.cifras-tira .stat-v{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.escena + .section{padding-top:clamp(20px,2.4vw,36px)}
/* Cabecera de página interior: el relleno de abajo lo pone la sección que sigue */
.page-hero{padding-block:var(--sp-hero-t) 0}
.page-hero + .section{padding-top:var(--sp-hero-b)}
.page-hero:has(+ .tinte),.page-hero:has(+ .cierre){padding-bottom:var(--sp-hero-b)}
.page-hero + .tinte{padding-top:var(--sp-sec)}
.page-hero:last-child{padding-bottom:var(--sp-sec)}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:420px}
.hero-stats>div{display:grid;gap:2px;min-width:0}
.stat-v{font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-l{color:var(--muted);font-size:.93rem;line-height:1.35}

/* Dos oficios: lo propio en sólido, lo distribuido en contorno */
.oficios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.oficio{display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,36px);border-radius:var(--r-3);border:1.5px solid var(--field-line)}
.oficio-fab{background:var(--surface);border-color:transparent}
.tinte .oficio-fab{background:var(--bg)}
.oficio p{color:var(--muted)}
.sello{display:inline-block;width:fit-content;font:600 .78rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-1);border:1.5px solid transparent}
.sello-fab{background:var(--verde);color:#fff}
.sello-dis{border-color:currentColor}
@media (max-width:640px){.oficios{grid-template-columns:minmax(0,1fr)}}
/* Nuestras soluciones: titular a la izquierda y los productos destacados a la derecha */
.soluciones{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.sol-cab{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start}
.sol-cab .paralelo{width:100%}
.sol-cab h2{font-size:clamp(1.9rem,1.3rem + 1.9vw,2.9rem)}
.sol-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px)}
/* Tarjeta destacada: el enlace a la ficha arriba y el botón del pedido abajo, fuera del enlace */
.sol{display:grid;grid-template-rows:1fr auto;gap:12px;padding:10px 10px 12px;border-radius:26px;background:var(--surface);box-shadow:var(--sh-1);min-width:0}
.sol-a{display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0;text-decoration:none;color:inherit;border-radius:18px}
.sol-pie .btn-add{background:var(--bg)}
.sol-e{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--tinte)}
.cat-chips,.cultivo-chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-chips{grid-column:1/-1}
.cat-chips a,.cultivo-chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--field-line);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.cultivo-chips a{border-color:rgba(255,255,255,.5);color:#fff}
.sol-t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-inline:8px;min-width:0}
.sol h3{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);font-weight:700;letter-spacing:-.012em;line-height:1.15}
.sol-de{font-size:.88rem;line-height:1.3;color:var(--muted)}
.sol-ir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:2px;font-size:.92rem;font-weight:600;color:var(--accent)}
.sol-ir .arrow{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.sol-a:hover .sol-ir .arrow{transform:translateX(4px)}.cat-chips a:hover{border-color:var(--ink)}.cultivo-chips a:hover{border-color:#fff;background-color:rgba(255,255,255,.08)}}
@media (max-width:1100px){.soluciones{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.sol-lista{grid-template-columns:repeat(2,minmax(0,1fr))}.sol-e{aspect-ratio:1}.sol{padding:8px 8px 10px;border-radius:22px}.sol-t{padding-inline:4px}.sol-pie .btn-add{padding-inline:8px;font-size:.9rem}}
@media (max-width:640px){.sol-cab .lead{display:none}.sol-cab{gap:14px}}
/* Envase ilustrativo en 3D */
.envase{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.envase canvas{position:absolute;inset:0;width:100%;height:100%}
.envase[data-giro="arrastre"] canvas{touch-action:pan-y;cursor:grab}
.envase-fijo{width:64px;height:64px;opacity:.5}
.envase.vivo .envase-fijo{visibility:hidden}
/* Las fotos de envase tienen fondo blanco: se funden con el mismo fondo que los envases ilustrativos */
.envase-foto{position:absolute;inset:0;background:var(--tinte);border-radius:inherit;overflow:hidden}
.tinte .envase-foto{background:var(--surface-2)}
.escenario .envase-foto{background:transparent}
.envase-foto img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--dur-4) var(--ease-out)}
.tilt.on{transition:transform 80ms linear}

/* Cultivos: tablero de etapas. La cinta se reserva para las etapas. */
.carril{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,9fr) auto;column-gap:24px;align-items:start;padding:22px 4px;border-top:1px solid var(--line);text-decoration:none}
.carril:last-child{border-bottom:1px solid var(--line)}
.carril h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);font-weight:500}
.tramos{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}
.tramos li{font-size:.8125rem;line-height:1.3;color:var(--muted);min-width:0}
.tramos li::before{content:"";display:block;height:6px;margin-bottom:8px;border-radius:3px;background:var(--verde);background:color-mix(in oklab,var(--verde),var(--lima) calc(var(--t)*100%));transform-origin:left;transition:height var(--dur-2) var(--ease-ui)}
.carril-m{display:inline-flex;gap:8px;align-items:center;font-size:.9rem;font-weight:600;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.carril:hover .tramos li::before{height:10px}.carril:hover h3{color:var(--accent)}}
@media (max-width:760px){.carril{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}.tramos{grid-column:1/-1;grid-row:2}.tramos span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.tramos li::before{height:8px;margin:0}}

/* Línea de etapas */
.t-step{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(14px,3vw,40px);padding-block:24px;border-top:1px solid var(--line)}
.t-step:last-child{border-bottom:1px solid var(--line)}
.t-num{font-weight:600;color:var(--accent);font-size:.92rem;letter-spacing:.04em}
.t-body{display:grid;gap:8px;min-width:0}
.t-body p{color:var(--muted)}
.t-slot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.95rem;font-weight:500}
@media (max-width:620px){.t-step{grid-template-columns:minmax(0,1fr);gap:6px}}
.cultivo-nota{margin-top:18px}
/* Cultivo con uno o dos productos relacionados: van en una columna lateral junto a las etapas, no en una sección aparte */
.cultivo-duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.rel-lado{position:sticky;top:calc(var(--head-h) + 16px);display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.rel-lado .prod-a{grid-template-rows:none;grid-template-columns:minmax(96px,34%) minmax(0,1fr)}
.rel-lado .prod-img{aspect-ratio:auto;min-height:132px}
@media (max-width:900px){.cultivo-duo{grid-template-columns:minmax(0,1fr)}.rel-lado{position:static}}

/* Etiqueta a la vista: composición */

.sci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.sci{grid-template-columns:minmax(0,1fr)}}
.sci-1{grid-template-columns:minmax(0,1fr)}
@media (min-width:861px){.sci-1 .criterios{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:12px}}
.comp{background:var(--surface);border-radius:var(--r-3);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;color:var(--ink)}

.comp [data-view]{display:grid;gap:14px}
.stackbar{display:flex;height:36px;border-radius:var(--r-1);overflow:hidden;gap:2px}
.seg.s0,.sw.s0{background:var(--verde)}
.seg.s1,.sw.s1{background:var(--lima)}
.seg.s2,.sw.s2{background:var(--seg-3)}
.legend li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:10px;border-top:1px solid var(--line);font-size:.97rem}
.legend b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.sw{width:14px;height:14px;border-radius:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:44px;padding:8px 14px;border-radius:var(--r-1);border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:500 .88rem var(--font);cursor:pointer;transition:transform var(--dur-1) var(--ease-ui)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.criterios{display:grid;gap:18px;counter-reset:c}
.criterios li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;align-content:start;counter-increment:c}
.criterios li::before{content:"0" counter(c);grid-row:1/3;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:3px}
.criterios p{grid-column:2}
/* Sin panel de composición al lado, los tres criterios van a lo ancho */
.criterios-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
@media (max-width:760px){.criterios-3{grid-template-columns:minmax(0,1fr)}}
/* Pasos del pedido de mayoreo */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);width:100%;counter-reset:p}
.pasos li{display:grid;gap:4px;align-content:start;counter-increment:p;min-width:0}
.pasos li::before{content:"0" counter(p);font-weight:600;font-size:.94rem;color:var(--accent);font-variant-numeric:tabular-nums}
.pasos h3{font-size:1.08rem}
.pasos p{font-size:.93rem;line-height:1.45}
@media (max-width:640px){.pasos{grid-template-columns:minmax(0,1fr);gap:12px}.pasos li{grid-template-columns:32px minmax(0,1fr);gap:0 8px}.pasos li::before{grid-row:1/3;padding-top:2px}.pasos p{grid-column:2}}

/* Paneles y cierre */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px}
.duo>:only-child{grid-column:1/-1}
.panel{display:grid;gap:14px;align-content:start;justify-items:start;padding:clamp(24px,4vw,48px);border-radius:var(--r-3);background:var(--bg);box-shadow:var(--sh-1)}
.panel p{color:var(--muted)}
.panel-marino{background:var(--marino);color:#fff;box-shadow:none}
.panel-marino p,.panel-marino .mini{color:#C5D6E0}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}}
.cierre{background:var(--marino);color:#fff;padding-block:var(--sp-sec-c)}
.cierre-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.cierre-in>div{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.cierre-in>.cierre-acc{gap:10px}
.cierre-acc .btn{width:100%}
@media (max-width:700px){.cierre-in{grid-template-columns:minmax(0,1fr);justify-items:start}.cierre-in>.cierre-acc{width:100%;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.nums>div{border-top:2px solid var(--accent);padding-top:16px;display:grid;gap:6px}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.voice{border:1px solid var(--line);border-radius:var(--r-2);padding:24px;display:grid;gap:14px;min-width:0}
.manif{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.manif blockquote{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.55;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.firma{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.96rem}
.firma img{width:64px;height:64px;border-radius:50%;object-fit:cover}
@media (max-width:800px){.manif{grid-template-columns:minmax(0,1fr)}}
.paises{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.paises li{display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r-2);background:var(--bg);box-shadow:var(--sh-1);border-top:3px solid var(--celeste)}
.paises li:first-child{border-top-color:var(--lima)}
.paises p{color:var(--muted);font-size:.96rem}

/* Catálogo */
.shop{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
/* Sin filtros que mostrar no hay barra lateral: la rejilla ocupa todo el ancho */
.shop-sola{grid-template-columns:minmax(0,1fr)}
.shop-sola .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.shop-sola .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.shop-sola .prod-grid{grid-template-columns:minmax(0,1fr)}}
.filters-box{position:sticky;top:96px}
.filters-box summary{display:none}
.filters{display:grid;gap:24px}
.filters fieldset{display:grid;gap:8px}
.filters legend{font-weight:600;margin-bottom:6px}
.filters label{display:flex;gap:10px;align-items:center;font-size:.97rem;color:var(--muted);cursor:pointer;min-height:32px}
.filters label:has(input:checked){color:var(--ink);font-weight:600}
.filters input{accent-color:var(--verde);width:18px;height:18px}
.count{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:400}
@media (max-width:860px){
  .shop{grid-template-columns:minmax(0,1fr)}
  .filters-box{position:static;border:1px solid var(--line);border-radius:var(--r-2)}
  .filters-box summary{display:block;padding:12px 16px;font-weight:600;cursor:pointer;min-height:46px}
  .filters{padding:4px 16px 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}
}
.shop-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:18px}
.shop-head select,.field input,.field select,.field textarea{min-height:48px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--field-line);background:var(--bg);color:var(--ink);font:400 1rem var(--font)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.prod{border-radius:var(--r-2);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;background:var(--bg);min-width:0;border:1px solid var(--line);transition:border-color var(--dur-2) var(--ease-ui),box-shadow var(--dur-3) var(--ease-ui),transform var(--dur-1) var(--ease-ui)}
.prod:active{transform:scale(.985)}
.prod[hidden]{display:none}
.prod-img{position:relative;aspect-ratio:1/1.05;background:var(--tinte)}
.tinte .prod-img{background:var(--surface-2)}
.prod-img .tag{position:absolute;left:10px;top:10px;z-index:1}
.prod-body{padding:18px;display:grid;gap:8px;align-content:start;justify-items:start}
.prod-body p{font-size:.93rem;color:var(--muted)}
.prod-cat{min-height:1.32rem;font-size:.82rem;font-weight:600;color:var(--accent)}
.prod-marca{font-size:.9rem}
.prod-pres{font-size:.85rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.prod:hover{border-color:var(--ink);box-shadow:var(--sh-2)}}
/* Ficha */
.page-hero .ficha-top{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.ficha-t{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ficha-marca{font-size:1.2rem;color:var(--muted);margin-top:-8px}
.ficha-sellos{display:flex;flex-wrap:wrap;gap:8px}
.escenario{position:relative;aspect-ratio:1/1.08;border-radius:var(--r-3);background:radial-gradient(90% 70% at 50% 40%,var(--bg),var(--tinte));border:1px solid var(--line)}
.escenario-n{position:absolute;left:0;right:0;bottom:12px;text-align:center;max-width:none;font-size:.8rem;color:var(--muted);padding-inline:12px}
.escenario .envase{bottom:60px}
@media (max-width:860px){.page-hero .ficha-top{grid-template-columns:minmax(0,1fr)}.escenario{max-width:420px;width:100%;justify-self:center;aspect-ratio:1/1.2}}
.pases{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pase{display:grid;gap:6px;align-content:start;padding:18px;border-radius:var(--r-2);border:1.5px solid var(--verde)}
.pase dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.pase dd{font-weight:600}
.pase[data-estado="pend"]{border:1.5px dashed var(--field-line);background:var(--tag-bg)}
.pase[data-estado="pend"] dt,.pase[data-estado="pend"] dd{color:var(--tag-fg)}
@media (max-width:440px){.pases{grid-template-columns:minmax(0,1fr)}}
.pases:has(>:only-child){grid-template-columns:minmax(0,360px)}
.uso{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.uso{grid-template-columns:minmax(0,1fr)}}
.tabla{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.35}
.tabla caption{text-align:left;padding-bottom:10px}
.tabla th,.tabla td{text-align:left;padding:10px 12px 10px 0;border-top:1px solid var(--line);vertical-align:top}
.tabla thead th{border-top:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.tabla tbody th{font-weight:600}
.tabla td{color:var(--muted);font-variant-numeric:tabular-nums}
.uso-l{display:grid;gap:26px}
.uso-l ul{list-style:disc;margin:10px 0 0;padding-left:1.15em;display:grid;gap:6px;color:var(--muted)}
/* Ficha: la lista de datos a la izquierda; a la derecha, el pasaporte y la composición. Sin nada a la derecha, una columna. */
.spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.spec-lado{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.spec-sola{grid-template-columns:minmax(0,1fr)}
.spec-sola .spec-list,.spec-ident{max-width:720px}
.spec-list>div:last-child{border-bottom:1px solid var(--line)}
@media (max-width:860px){.spec{grid-template-columns:minmax(0,1fr)}}
.spec-list>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding-block:13px;border-top:1px solid var(--line)}
.spec-list dt{font-weight:600}.spec-list dd{color:var(--muted)}
@media (max-width:480px){.spec-list>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.crumb{display:inline-flex;gap:8px;align-items:center;font-size:.94rem;font-weight:500;color:var(--muted);text-decoration:none;width:fit-content}

/* Formularios */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.form-grid:has(>:only-child){grid-template-columns:minmax(0,680px)}
form[data-wa]{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:var(--surface);padding:clamp(20px,3vw,32px);border-radius:var(--r-3);min-width:0}
.form-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:600;font-size:.95rem}
.field label .note{font-weight:400}
.field input,.field select,.field textarea{width:100%;transition:border-color var(--dur-2) var(--ease-ui)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:110px;resize:vertical}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:.92rem;color:var(--muted);align-items:start}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--verde)}
.status{font-size:.95rem;font-weight:500}
.status:empty{display:none}
.status[data-estado="error"]{color:#A32116}
.status[data-estado="ok"]{color:var(--verde)}
form[aria-busy="true"] .btn{opacity:.6;cursor:progress}
.channels{display:grid;gap:12px}
.channels>div{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.channels>div:last-child{padding-bottom:0;border-bottom:0}

/* Contacto en dos columnas: cabecera y formulario a la izquierda; a la derecha, fija al desplazar, Bio y los atajos */
.contacto{padding-top:var(--sp-hero-t)}
.contacto-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.contacto-izq{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.contacto-izq form{margin-top:10px}
.contacto-lado{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* Fija al desplazar solo si la pantalla es lo bastante alta para que la columna quepa entera */
@media (min-width:901px) and (min-height:900px){.contacto-lado{position:sticky;top:calc(var(--head-h) + 16px)}}
.bio-tarjeta{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:clamp(20px,2.2vw,28px);border-radius:var(--r-3);background:var(--marino);color:#fff}
.bio-cab{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.bio-cab .bio-cara{width:64px;height:64px}
.bio-tarjeta h2{font-size:1.45rem;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.bio-tarjeta p{max-width:none;font-size:.97rem;line-height:1.45;color:#DCE9F1}
.bio-lista{display:grid;gap:8px}
.bio-lista a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px 10px 16px;border-radius:14px;border:1px solid rgba(196,228,255,.3);background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.97rem;line-height:1.25;text-decoration:none;transition:border-color var(--dur-2) var(--ease-ui),background-color var(--dur-2) var(--ease-ui)}
.bio-lista .arrow{color:var(--lima)}
.bio-tarjeta .bio-aviso{font-size:.82rem;color:#C3D4DF}
.lado-bloque{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:clamp(18px,2vw,24px);border-radius:var(--r-3);background:var(--surface)}
.lado-bloque h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lado-tips ul{display:grid;gap:6px;font-size:.95rem;color:var(--muted)}
.lado-tips li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.lado-tips li::before{content:"";width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--verde)}
.lado-enlaces a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding-block:8px;border-top:1px solid var(--line);font-weight:600;font-size:.97rem;text-decoration:none}
.lado-enlaces .arrow{color:var(--accent)}
/* Tira de Bio: solo en teléfono, encima del formulario, en lugar de la tarjeta */
.bio-tira{display:none;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:68px;margin-top:4px;padding:10px 16px 10px 12px;border-radius:20px;background:var(--marino);color:#fff;text-decoration:none}
.bio-tira .bio-cara{width:44px;height:44px}
.bio-tira-t{display:grid;gap:1px;min-width:0;line-height:1.3}
.bio-tira-t span{font-size:.86rem;color:#C3D4DF}
.bio-tira .arrow{color:var(--lima)}
/* Tarjeta pequeña de Bio (Distribuidores) */
.bio-mini{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px 14px;align-items:center;margin-top:8px;padding:clamp(16px,2vw,22px);border-radius:var(--r-3);background:var(--tinte)}
.bio-mini-t{display:grid;gap:2px;min-width:0}
.bio-mini h3{font-size:1.1rem}
.bio-mini .btn{grid-column:1/-1;justify-self:start;background:var(--bg)}
.bio-tarjeta :focus-visible,.bio-tira:focus-visible{outline-color:var(--lima);box-shadow:0 0 0 6px var(--marino)}
@media (hover:hover) and (pointer:fine){.bio-lista a:hover{border-color:rgba(255,255,255,.65);background-color:rgba(255,255,255,.14)}.lado-enlaces a:hover{color:var(--accent)}}
@media (max-width:900px){
  .contacto-grid{grid-template-columns:minmax(0,1fr)}
  .contacto-lado .bio-tarjeta,.lado-tips{display:none}
  .bio-tira{display:grid}
}
@media (max-width:420px){.bio-mini .btn{justify-self:stretch}}

/* Pie */
.foot{background:#011B2E;color:#D7E2E9;padding-block:clamp(32px,24px + 1.7vw,48px) 28px}
.foot a{color:#fff;text-decoration:none}
.foot-trai{margin-top:16px;max-width:none;text-align:center;font-size:.82rem;letter-spacing:.02em;color:#A9BDC9}
.foot-trai b{font-weight:600;color:#fff}
[data-panel]{-webkit-user-select:none;user-select:none}
.foot-lema{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.15;letter-spacing:-.018em;font-weight:500;color:#fff;max-width:none}
.foot-lema b{font-weight:700;color:var(--lima)}
.foot-orillas{margin-top:14px;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#A9BDC9;max-width:none}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;margin-top:clamp(22px,3vw,36px);padding-top:28px;border-top:1px solid #1C3F56}
/* Sin datos de contacto no se pinta esa columna y la rejilla queda en tres */
.foot-grid-3{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.foot-logo,.foot-logo-print{width:100%;max-width:237px;height:auto}
.foot-logo-print{display:none}
.foot h2{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#A9BDC9;margin-bottom:14px;line-height:1.4}
.foot ul{display:grid;gap:9px;font-size:.97rem}
@media (pointer:coarse){.foot ul{gap:0}.foot ul a{display:inline-flex;align-items:center;min-height:44px}}
.foot-legal{margin-top:28px;padding-top:20px;border-top:1px solid #1C3F56;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.88rem}
.foot .tag,.escena .tag,.cierre .tag,.panel-marino .tag,.m0 .tag{background:#FFF3D1;color:#6A4B00}
@media (hover:hover) and (pointer:fine){.foot a:hover{text-decoration:underline}}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:600px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:861px){.foot-grid-3{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
@media (min-width:601px) and (max-width:860px){.foot-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* El único botón flotante es el lanzador de Bio (src/bio.js), que marca <html class="con-bio"> cuando está listo:
   el pie y el desplazamiento por anclas le dejan sitio. */
html.con-bio{scroll-padding-bottom:96px}
html.con-bio .foot-legal{padding-right:84px}
@media (max-width:620px){html.con-bio .foot{padding-bottom:90px}}
.prose{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.prose>*{max-width:72ch}
.prose h2{font-size:1.5rem;margin-top:12px;font-weight:600}
.lista-p{display:grid;gap:8px;list-style:disc;padding-left:22px}
[hidden]{display:none!important}
/* Tema oscuro: las piezas marinas se separan del fondo con una superficie más clara y un filete lima */

/* Movimiento: el estado base es el final. Solo transform y opacity. */
@media screen and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .orbita .luz{animation:orbita 15s linear infinite}
  .orbita .luz1{animation-duration:21s;animation-direction:reverse}
  .globo-caja.pausado .orbita .luz,.globo-caja.fuera .orbita .luz{animation-play-state:paused}
  /* Brisa: cada hoja oscila sobre su base con su propio ritmo; las capas desenfocadas se mecen enteras */
  .hoja{animation:brisa var(--t,6s) ease-in-out var(--r,0s) infinite alternate}
  .f-medio{animation:vaiven 9s ease-in-out -2s infinite alternate}
  .f-cerca{animation:vaiven 12s ease-in-out -5s infinite alternate-reverse}
  .escena.pausado .hoja,.escena.pausado .f-capa,.follaje.fuera .hoja,.follaje.fuera .f-capa{animation-play-state:paused}
  @supports (animation-timeline:view()){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .tramos li::before{animation:crece linear both;animation-timeline:view();animation-range:entry calc(10% + var(--i)*9%) entry calc(60% + var(--i)*9%)}
    .stackbar{animation:barra linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
  }
}
@keyframes orbita{to{stroke-dashoffset:-1000}}
@keyframes brisa{from{transform:rotate(calc(var(--a,2deg)*-1))}to{transform:rotate(var(--a,2deg))}}
@keyframes vaiven{from{transform:translateX(-5px) rotate(-.35deg)}to{transform:translateX(6px) rotate(.45deg)}}
@keyframes rv{from{opacity:0;transform:translateY(20px)}}
@keyframes crece{from{transform:scaleX(0)}}
@keyframes barra{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.tilt{transform:none!important}}
@media (forced-colors:active){
  .chip[aria-pressed="true"],.seg-r input:checked+span{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .seg,.sw,.tramos li::before{background:CanvasText;forced-color-adjust:none;border:1px solid Canvas}
  .logo .neg,.foot-logo{forced-color-adjust:none;background:#012742}
  .logo .pos,.logo .pos-r{forced-color-adjust:none;background:#fff}
}
@media print{
  
  .site-head,.escena-sim,.globo-pausa,.bio-franja,.bio-tira,.bio-mini,.contacto-lado .bio-tarjeta,.escena-fondo,.follaje,.ola,.orbita{display:none}
  .escena{margin-top:0;padding-block:0}
  .rv,.tramos li::before,.stackbar{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .escena,.cierre,.panel-marino,.marca.m0,.foot{background:#fff!important;color:#012742!important}
  .escena *,.cierre *,.panel-marino *,.marca.m0 *,.foot *{color:#012742!important}
  .btn-p,.escena .btn-p,.cierre .btn-p{background:#fff;color:#012742;border-color:#012742}
  .seg,.sw,.tag,.tramos li::before,.globo-fijo{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .globo.vivo .globo-fijo{visibility:visible}.globo canvas{display:none}
  .prod,.comp,.panel,.legend li,.t-step,.pend,form,.pase,.marca,.oficio{break-inside:avoid}
  h2,h3{break-after:avoid}
  .foot-logo{display:none}.foot-logo-print{display:block}
}

/* Pedido de mayoreo: botones de tarjeta, formulario de la ficha y panel lateral */
.prod{grid-template-rows:1fr auto}
.prod-a{display:grid;grid-template-rows:auto 1fr;min-width:0;text-decoration:none;color:inherit}
.prod-pie{padding:0 18px 18px}
.btn-add{width:100%;min-height:46px;padding:10px 16px;font-size:.95rem}
.carro-btn{position:relative}
.carro-n{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--lima);color:var(--marino);font:700 .72rem/20px var(--font);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.pedir[data-retirado]{display:none}
[data-ficha-estado] button.link{border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;margin-right:12px;text-decoration:underline}
.ficha-aviso,.carro-retirado{padding:12px 16px;border-radius:var(--r-2);background:var(--tinte);border:1px solid var(--line);font-size:.94rem}
.carro-retirado{margin-bottom:12px}
.pedir{display:grid;gap:14px;padding:clamp(16px,2vw,22px);border-radius:var(--r-3);background:var(--tinte);border:1px solid var(--line);max-width:520px}
.pedir-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.pedir .field{gap:6px}
.pedir .field select{border-radius:999px;padding-inline:16px}
.pedir-l{font-weight:600;font-size:.94rem}
.pedir .btn{justify-self:start}
@media (max-width:520px){.pedir-c{grid-template-columns:minmax(0,1fr)}.pedir .btn{justify-self:stretch}}
/* Cantidad: teclear, uno a uno o de diez en diez */
.cant{display:inline-flex;align-items:stretch;height:48px;border:1.5px solid var(--field-line);border-radius:999px;background:var(--bg);overflow:hidden}
.cant-b,.cant-x{border:0;background:transparent;color:var(--ink);font:600 1.15rem/1 var(--font);cursor:pointer;min-width:44px;padding:0 6px}
.cant-x{font-size:.86rem;border-left:1.5px solid var(--line);padding-inline:12px;color:var(--accent)}
.cant-i{width:76px;border:0;border-inline:1.5px solid var(--line);background:transparent;color:var(--ink);font:600 1.05rem var(--font);text-align:center;-moz-appearance:textfield;appearance:textfield;padding:0 4px}
.field .cant-i{width:76px;min-height:0;padding:0 4px;border:0;border-inline:1.5px solid var(--line);border-radius:0;background:transparent;font:600 1.05rem var(--font)}
.cant-i::-webkit-outer-spin-button,.cant-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cant :focus-visible{outline-offset:-3px;box-shadow:none;border-radius:999px}
dialog.carro{position:fixed;inset:0 0 0 auto;width:min(500px,100vw);max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink);box-shadow:-24px 0 70px -20px rgba(1,39,66,.55)}
dialog.carro[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog.carro::backdrop{background:rgba(1,24,42,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.carro-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(18px,4vw,26px) 16px;border-bottom:1px solid var(--line)}
.carro-cab h2{font-size:1.6rem;font-weight:600;letter-spacing:-.02em}
.carro-cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:18px clamp(18px,4vw,26px) 24px}
.carro-vacio{display:grid;gap:14px;justify-items:start;padding-block:24px;color:var(--muted)}
.carro-lista{display:grid;gap:12px}
.carro-item{display:grid;gap:10px;padding:14px 16px;border-radius:var(--r-3);border:1px solid var(--line);background:var(--surface)}
.carro-item-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.carro-item-n{font-weight:700;font-size:1.08rem;line-height:1.25;text-decoration:none}
.carro-quita{flex:none;width:36px;height:36px;margin:-6px -8px 0 0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 1.5rem/1 var(--font);cursor:pointer}
.carro-item-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.carro-sel{flex:1 1 130px;min-width:0;min-height:48px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--field-line);background:var(--bg);color:var(--ink);font:500 1rem var(--font)}
.carro-item-p{max-width:none;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.carro-item-p:empty{display:none}
.carro-resumen{display:grid;gap:8px;justify-items:start;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.carro-total{font-weight:600;color:var(--ink)}
.carro form{display:grid;gap:14px}
.carro form[hidden],.carro-vacio[hidden],.carro-pie[hidden]{display:none}
.carro .field{display:grid;gap:6px}
.carro .field label{font-weight:600;font-size:.94rem}
.carro .field input,.carro .field select,.carro .field textarea{width:100%;border-radius:14px}
.carro .field textarea{min-height:92px;resize:vertical}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.carro-error{max-width:none;font-weight:600;color:#A32116}
.carro-error:empty{display:none}
.carro-copia{width:100%;min-height:150px;border-radius:14px;border:1.5px solid var(--field-line);padding:12px;font:400 1rem/1.45 var(--font)}
.carro-listo{display:grid;gap:14px;justify-items:start;padding-block:20px}
.carro-listo h3{font-size:1.5rem}
.carro-folio{padding:10px 16px;border-radius:14px;background:var(--tinte);font-variant-numeric:tabular-nums}
.carro-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(18px,4vw,26px) calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg)}
.carro-pie .link{border:0;background:transparent;cursor:pointer;font:600 .98rem var(--font);color:var(--muted)}
.carro-pie .btn{flex:1 1 auto;max-width:300px;margin-left:auto}
.carro-pie .btn:disabled{opacity:.5;cursor:not-allowed}
.carro-pie .btn[aria-disabled="true"]{opacity:.6;cursor:progress}
/* Teléfono en horizontal: cabecera y pie más bajos. Con muy poca altura (ampliación del 400 %), un único desplazamiento */
@media (max-height:480px){.carro-cab{padding-block:10px 8px}.carro-cab .mini{display:none}.carro-cab h2{font-size:1.25rem}.carro-cab .icon-btn{width:40px;height:40px}.carro-pie{padding-block:8px calc(8px + env(safe-area-inset-bottom,0px))}.carro-pie .btn{min-height:44px}}
@media (max-height:320px){dialog.carro[open]{display:block;overflow-y:auto}.carro-cuerpo{overflow:visible}}
@media screen and (prefers-reduced-motion:no-preference){dialog.carro[open]{animation:carro-entra var(--dur-4) var(--ease-out)}dialog.carro[open]::backdrop{animation:carro-velo var(--dur-3) linear}}
@keyframes carro-entra{from{transform:translateX(40px);opacity:0}}
@keyframes carro-velo{from{opacity:0}}
@media (hover:hover) and (pointer:fine){.carro-quita:hover{background:var(--surface-2);color:var(--ink)}.cant-b:hover,.cant-x:hover{background:var(--surface)}.carro-item-n:hover{text-decoration:underline}}
@media print{dialog.carro,.prod-pie,.pedir,.carro-btn{display:none!important}}

/* Listas desplegables con diseño propio (src/lista.js). El select nativo sigue debajo, oculto a la vista. */
.lista{position:relative;min-width:0}
.lista-nativa{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.lista-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--field-line);background:var(--bg);color:var(--ink);font:500 1rem/1.3 var(--font);text-align:left;cursor:pointer;transition:border-color var(--dur-2) var(--ease-ui),box-shadow var(--dur-2) var(--ease-ui)}
.lista-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-btn svg{flex:none;width:16px;height:16px;color:var(--muted);transition:transform var(--dur-3) var(--ease-out)}
.lista.abierta .lista-btn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(32,128,43,.16)}
.lista.abierta .lista-btn svg{transform:rotate(180deg)}
/* En la barra del simulador el botón toma el aspecto del campo de cristal */
.campo .lista{grid-column:2}
.campo .lista-btn{min-height:0;padding:1px 0;border:0;border-radius:4px;background:transparent;color:#fff;font:600 1rem/1.35 var(--font);box-shadow:none}
.campo .lista-btn svg{color:#fff}
.campo .lista.abierta .lista-btn{box-shadow:none}
.campo .lista-btn:focus-visible{outline:0;box-shadow:none}
.campo:has(.lista.abierta){border-color:var(--lima);background-color:rgba(1,39,66,.72)}
.lista--carro-sel{flex:1 1 130px}
.carro .lista-btn,.pedir .lista-btn{border-radius:999px;padding-inline:16px}
.shop-head .lista{min-width:200px}
/* Panel de opciones */
.lista-pop{position:fixed;z-index:80;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;color:var(--marino);border:1px solid var(--line);box-shadow:0 2px 6px rgba(1,39,66,.08),0 28px 60px -20px rgba(1,39,66,.55);font:400 1rem/1.3 var(--font)}
.lista-pop[hidden]{display:none}
.lista-busca{flex:none;display:flex;align-items:center;gap:8px;height:44px;margin:10px 10px 4px;padding:0 14px;border-radius:999px;background:var(--surface);border:1.5px solid transparent}
.lista-busca:focus-within{border-color:var(--verde);background:#fff}
.lista-busca svg{flex:none;width:18px;height:18px;color:var(--muted)}
.lista-busca input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:inherit;font:400 1rem var(--font);outline:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.lista-busca input::-webkit-search-cancel-button{-webkit-appearance:none}
.lista-ops{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 10px}
.lista-ops ul{display:grid;gap:1px}
.lista-grupo-t{display:block;position:sticky;top:-6px;z-index:1;margin:0 -8px;padding:12px 20px 6px;background:#fff;font:600 .72rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lista-op{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:8px 12px;border-radius:12px;font-weight:500;cursor:pointer}
.lista-op[hidden],.lista-grupo[hidden]{display:none}
.lista-op.activa{background:var(--tinte);box-shadow:inset 0 0 0 2px var(--verde)}
.lista-op[aria-selected="true"]{font-weight:700;color:var(--verde)}
.lista-op[aria-selected="true"]::after{content:"";flex:none;width:15px;height:8px;margin:-4px 2px 0 0;border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.lista-op[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.lista-vacio{flex:none;max-width:none;padding:10px 20px 18px;color:var(--muted);font-size:.95rem}
.lista-vacio[hidden]{display:none}
@media screen and (prefers-reduced-motion:no-preference){.lista-pop:not([hidden]){animation:lista-abre var(--dur-3) var(--ease-out)}.lista-pop.arriba:not([hidden]){animation-name:lista-abre-arriba}}
@keyframes lista-abre{from{opacity:0;transform:translateY(-6px)}}
@keyframes lista-abre-arriba{from{opacity:0;transform:translateY(6px)}}
@media print{.lista-pop{display:none!important}}
/* En táctil se usa el selector nativo: se le da la misma flecha y el mismo borde que a las listas propias */
@media (pointer:coarse){
  .carro-sel,.carro .field select,.pedir .field select,.shop-head select,form[data-wa] .field select{-webkit-appearance:none;appearance:none;padding-right:42px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012742' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
  .shop-head select{border-radius:999px;padding-left:16px}
}

/* Barra de desplazamiento con los colores de la marca: fina, redondeada, del verde al marino; lima al pasar el cursor.
   En los paneles interiores (listas, pedido, menú) es más discreta. Firefox usa las propiedades estándar. */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#2E6F5A #EDF3F6}
  .lista-ops,.carro-cuerpo,.nav{scrollbar-width:thin;scrollbar-color:#A9BECB transparent}
}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#EDF3F6}
::-webkit-scrollbar-thumb{min-height:56px;border:3px solid #EDF3F6;border-radius:999px;background:linear-gradient(180deg,#20802B,#012742)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#83BD1D,#20802B)}
::-webkit-scrollbar-thumb:active{background:#012742}
::-webkit-scrollbar-corner{background:transparent}
.lista-ops::-webkit-scrollbar,.carro-cuerpo::-webkit-scrollbar,.nav::-webkit-scrollbar{width:11px}
.lista-ops::-webkit-scrollbar-track,.carro-cuerpo::-webkit-scrollbar-track,.nav::-webkit-scrollbar-track{background:transparent;margin-block:8px}
.lista-ops::-webkit-scrollbar-thumb,.carro-cuerpo::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{min-height:40px;border:3px solid #fff;background:#B4C7D3}
.lista-ops::-webkit-scrollbar-thumb:hover,.carro-cuerpo::-webkit-scrollbar-thumb:hover,.nav::-webkit-scrollbar-thumb:hover{background:#20802B}
@media (forced-colors:active){::-webkit-scrollbar-thumb{background:ButtonText;border-color:Canvas}}