/* ==========================================================================
   VitroNutri — Nuevo aspecto (3 de octubre de 2026)

   Se carga después de styles.css y solo cambia la APARIENCIA.
   No mueve nada de sitio: textos, fotos y bloques siguen donde estaban.
   Se respetan los verdes de VitroNutri, el logotipo «N» (sigue con Inter)
   y el icono del juego Atrapa la comida.
   ========================================================================== */

:root{
  --font:'Plus Jakarta Sans','Jakarta Fallback',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --grad:linear-gradient(135deg,var(--green-500),var(--green-700)); /* el degradado del logotipo */
  --grad-hover:linear-gradient(135deg,#46B584,var(--green-700));
  --card-shadow:0 1px 2px rgba(23,63,50,.05),0 12px 32px -10px rgba(23,63,50,.14);
  --card-shadow-hover:0 2px 4px rgba(23,63,50,.06),0 24px 46px -14px rgba(23,63,50,.24);
  --grad-border:linear-gradient(150deg,rgba(63,169,122,.55),rgba(23,63,50,.07) 45%,rgba(23,63,50,.07));
  --grid-lines:linear-gradient(rgba(23,63,50,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,63,50,.045) 1px,transparent 1px);
  --check-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E");
}

/* Letra de reserva con las medidas de Plus Jakarta Sans (el texto no salta al cargar) */
@font-face{
  font-family:'Jakarta Fallback';
  src:local('Arial'),local('Helvetica');
  size-adjust:104.5%;ascent-override:99.3%;descent-override:21.2%;line-gap-override:0%;
}

/* ---------- Tipografía ---------- */
body{font-family:var(--font);font-optical-sizing:auto}
.brand,.foot-brand,.logo{font-family:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;letter-spacing:0}
h1{letter-spacing:-.04em}
h1 span{
  background:linear-gradient(90deg,var(--green-700),var(--green-500));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-bottom:.06em;
}
h2{font-weight:800;letter-spacing:-.032em}
.feat h3,.pillar h3{font-weight:700}

/* ---------- Barra superior ---------- */
header.nav{
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:rgba(23,63,50,.07);
  box-shadow:0 8px 24px -18px rgba(23,63,50,.35);
}
nav.links a{font-weight:600;color:#2A3B35}
nav.links a.active,
nav.links a[aria-current="page"]{background:#fff;color:var(--green-700);box-shadow:inset 0 0 0 1.5px rgba(46,125,91,.35)}
.btn-appstore,nav.links a.btn-appstore{
  background:var(--grad);
  box-shadow:0 6px 16px -4px rgba(46,125,91,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-appstore:hover,nav.links a.btn-appstore:hover{background:var(--grad-hover)}
.btn-appstore::before{background:#C9F2DD;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.menu-toggle{border-color:rgba(23,63,50,.12);box-shadow:0 4px 12px -8px rgba(23,63,50,.4)}
@media (max-width:860px){
  .js .nav.has-menu.is-open .links{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}

/* ---------- Fondos de portada: mismo verde, con una trama muy fina ---------- */
.hero,.page-head,.final-band,.show-stage{position:relative;isolation:isolate}
.hero::before,.page-head::before,.final-band::before,.show-stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grid-lines);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 25%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 75% 70% at 70% 25%,#000 30%,transparent 75%);
}
.hero-stage::before{-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 25%,transparent 75%)}
.show-stage::before{background-size:32px 32px}

/* ---------- Botones ---------- */
.btn{font-weight:700}
.btn-primary{
  background:var(--grad);
  box-shadow:0 10px 22px -8px rgba(46,125,91,.65),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{background:var(--grad-hover);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(46,125,91,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ghost{background:rgba(255,255,255,.92);border:1.5px solid rgba(23,63,50,.14)}
.btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(23,63,50,.3)}
.btn-soon{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(46,125,91,.35)}

/* ---------- Etiquetas ---------- */
.badge{background:#fff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(46,125,91,.22),0 4px 12px -6px rgba(23,63,50,.25)}
.badge .dot{background:var(--grad);box-shadow:0 0 0 3px rgba(63,169,122,.18)}
.tag-soon{background:var(--grad);color:#fff}
.platforms .ico{color:#fff;background:var(--grad);border-radius:50%;padding:3px;width:20px;height:20px;stroke-width:2.6}
.platforms li.soon .ico{color:var(--green-700);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(46,125,91,.35)}

/* ---------- Iconos: mismo estilo que el logotipo ---------- */
.feat-ico{
  background:var(--grad);border:0;color:#fff;
  box-shadow:0 8px 18px -6px rgba(46,125,91,.55),inset 0 1px 0 rgba(255,255,255,.25);
}
.feat-ico .ico{stroke-width:1.9}
.pillar .feat-ico{background:var(--grad)}
.privacy-ico{background:var(--grad);box-shadow:0 12px 24px -8px rgba(46,125,91,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.steps .step-num{background:var(--grad);box-shadow:0 8px 18px -6px rgba(46,125,91,.55)}
.checks .ico,.privacy-points .ico{
  color:#fff;background:var(--grad);border-radius:50%;padding:3px;stroke-width:2.6;
}
.privacy-points li:nth-child(n+2) .ico{stroke-width:2.2}

/* ---------- Tarjetas: borde con degradado verde ---------- */
.feat{border-top:0;padding-top:26px;position:relative}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green-500),rgba(63,169,122,.08))}
.pillar,.contact-card,.skins li,.summary-box,.cta-panel,.game-card{
  border:1px solid transparent;
  box-shadow:var(--card-shadow);
}
.pillar{background:linear-gradient(180deg,#fff,var(--green-50)) padding-box,var(--grad-border) border-box}
.contact-card{background:linear-gradient(#fff,#fff) padding-box,var(--grad-border) border-box}
.skins li{background:linear-gradient(180deg,var(--green-50),#fff 55%) padding-box,var(--grad-border) border-box;transition:transform .25s ease,box-shadow .25s ease}
.skins li:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.summary-box{background:linear-gradient(180deg,var(--green-50),#fff) padding-box,var(--grad-border) border-box}
.cta-panel{background:linear-gradient(135deg,var(--green-50),var(--green-100)) padding-box,var(--grad-border) border-box;position:relative;overflow:hidden;isolation:isolate}
.cta-panel::after,.game-card::after{
  content:"";position:absolute;z-index:-1;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,169,122,.22),transparent 70%);pointer-events:none;
}
.game-card{background:linear-gradient(135deg,var(--green-50),var(--green-100)) padding-box,var(--grad-border) border-box;position:relative;overflow:hidden;isolation:isolate}
.game-card img{box-shadow:0 2px 4px rgba(23,63,50,.12),0 24px 44px -12px rgba(23,63,50,.45)}
.game-list li::before{background:var(--grad) var(--check-white) center/11px no-repeat}
.help-link{background:linear-gradient(135deg,var(--green-50),#fff) padding-box,var(--grad-border) border-box;border:1px solid transparent;box-shadow:var(--card-shadow)}

/* ---------- Cifras ---------- */
.facts-list{border-top:0;border-bottom:0;position:relative}
.facts-list::before,.facts-list::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,169,122,.55),transparent);
}
.facts-list::before{top:0}
.facts-list::after{bottom:0}
.facts-list b{
  background:linear-gradient(90deg,var(--green-900),var(--green-700));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- Dispositivos: halo verde detrás para dar profundidad ---------- */
.devices::before,.game-art::before,.stage-inner::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:6%;right:6%;top:14%;bottom:2%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,169,122,.42),rgba(63,169,122,.12) 60%,transparent);
  filter:blur(20px);
}
.stage-inner::before{left:-20%;right:-20%;top:5%;bottom:20%}
.dev-ipad{z-index:1}
.stage-inner > .mphone{z-index:1}
.game-art .game-phone{position:relative;z-index:1}
.game-art img{z-index:2}
.dev-frame{
  box-shadow:
    inset 0 0 0 .1em rgba(255,255,255,.1),
    0 .2em .4em rgba(23,63,50,.2),
    0 3em 6em -1.2em rgba(23,63,50,.45);
}
.show-stage{border:1px solid transparent;background:var(--hero-bg) padding-box,var(--grad-border) border-box;box-shadow:var(--card-shadow)}

/* ---------- Privacidad ---------- */
.privacy-band{
  background:
    radial-gradient(700px 260px at 10% 0%,rgba(63,169,122,.14),transparent 60%),
    var(--green-50);
}

/* ---------- Soporte ---------- */
.faq summary{font-weight:700}
.faq summary::after{
  width:34px;height:34px;
  background:var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;
}
.faq details[open] summary::after{transform:rotate(180deg);background-color:var(--green-100)}
.faq details[open] summary{color:var(--green-700)}

/* ---------- Textos legales ---------- */
.doc h2 .num{
  display:inline-grid;place-items:center;min-width:1.65em;height:1.65em;padding:0 .3em;
  border-radius:.55em;background:var(--grad);color:#fff;font-size:.78em;
  box-shadow:0 6px 12px -6px rgba(46,125,91,.6);align-self:center;
}
.doc-toc a.is-current{border-left-color:var(--green-500)}
.doc-toc a.is-current span{opacity:1}
.toc-inline{background:#fff;box-shadow:var(--card-shadow)}
.note-important{box-shadow:0 8px 20px -14px rgba(217,117,4,.6)}

/* ---------- Pie ---------- */
footer{
  position:relative;
  background:radial-gradient(800px 300px at 85% 0%,rgba(63,169,122,.18),transparent 60%),var(--green-900);
}
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,224,184,.55),transparent);
}
.foot h5,.foot-title{font-weight:700}

/* ---------- Web del juego ---------- */
.game-sub{background:rgba(243,250,246,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gname img{box-shadow:0 4px 10px -3px rgba(23,63,50,.35)}
.game-sub nav a{font-weight:600}
.game-sub nav a.active,.game-sub nav a[aria-current="page"]{background:var(--grad);box-shadow:0 6px 14px -6px rgba(46,125,91,.6)}
.game-art img{box-shadow:0 2px 4px rgba(23,63,50,.12),0 24px 44px -12px rgba(23,63,50,.5)}
.world{
  overflow:hidden;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 28px -18px rgba(0,0,0,.5);
  transition:transform .25s ease;
}
.world:hover{transform:translateY(-4px) rotate(-.4deg)}
.world::after{
  content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);pointer-events:none;
}
.world b{font-weight:800}
.shots figcaption{font-weight:700}
.cta-icon{box-shadow:0 2px 4px rgba(23,63,50,.12),0 18px 34px -10px rgba(23,63,50,.45)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Iconos de la tarjeta de contacto en blanco (antes salían oscuros) */
.contact-list .feat-ico{color:#fff}

/* ==========================================================================
   Apple Watch de la portada (dibujo más detallado)
   Todo en "em": se adapta al tamaño de cada bloque.
   ========================================================================== */
.aw{position:relative;width:10.4em;filter:drop-shadow(0 1.6em 1.8em rgba(23,63,50,.35))}

/* Correa deportiva */
.aw-band{
  position:relative;width:6.5em;height:3.6em;margin:0 auto;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.12) 22%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.12) 78%,rgba(0,0,0,.18)),
    var(--green-500);
}
.aw-band--top{border-radius:2.2em 2.2em .5em .5em;margin-bottom:-.5em;box-shadow:inset 0 .35em .5em -.2em rgba(255,255,255,.35)}
.aw-band--bottom{
  border-radius:.5em .5em 2.2em 2.2em;margin-top:-.5em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding-top:.6em;
  box-shadow:inset 0 -.35em .5em -.2em rgba(0,0,0,.18);
}
.aw-band--bottom i{width:.42em;height:.42em;border-radius:50%;background:#24704F;box-shadow:inset 0 .08em .1em rgba(0,0,0,.45),0 .05em 0 rgba(255,255,255,.3)}

/* Caja */
.aw-case{
  position:relative;z-index:1;height:12.4em;padding:.6em;border-radius:3em;
  background:linear-gradient(150deg,#3C6E5C 0%,#1E4B3B 22%,#163C2F 55%,#0E2B21 80%,#244F40 100%);
  box-shadow:
    inset 0 0 0 .07em rgba(255,255,255,.22),
    inset 0 .18em .25em rgba(255,255,255,.14),
    inset 0 -.25em .45em rgba(0,0,0,.45);
}
/* Corona digital y botón lateral */
.aw-crown{
  position:absolute;right:-.5em;top:3.1em;width:.62em;height:1.9em;border-radius:.22em;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 .09em,rgba(0,0,0,.25) .09em .2em),
    linear-gradient(90deg,#2A5B49,#3F7562 60%,#1C4134);
  box-shadow:0 .08em .15em rgba(0,0,0,.35);
}
.aw-crown::after{content:"";position:absolute;left:-.14em;top:.2em;bottom:.2em;width:.16em;border-radius:.08em;background:#173F32}
.aw-side{position:absolute;right:-.24em;top:5.9em;width:.3em;height:2.8em;border-radius:.16em;background:linear-gradient(90deg,#1C4134,#2F6150)}

/* Pantalla */
.aw-screen{
  position:relative;height:100%;border-radius:2.45em;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#08130F 0%,#000 70%);
  box-shadow:inset 0 0 0 .14em #000,inset 0 0 0 .2em rgba(255,255,255,.05);
  display:flex;flex-direction:column;align-items:center;padding:.85em .9em .7em;
}
.aw-status{width:100%;display:flex;justify-content:space-between;align-items:baseline;padding:0 .25em;line-height:1}
.aw-app{font-size:.72em;font-weight:800;color:#8BE0B8;letter-spacing:-.01em}
.aw-time{font-size:.72em;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.aw-dial{position:relative;width:5.9em;height:5.9em;margin-top:.35em}
.aw-ring{position:absolute;inset:0;width:100%;height:100%;display:block}
.aw-track{fill:none;stroke:rgba(139,224,184,.16);stroke-width:9}
.aw-arc{fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 1.5px rgba(95,211,155,.6))}
.aw-value{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em}
.aw-drop{width:.85em;height:.85em;fill:#8BE0B8}
.aw-value b{font-size:1.55em;font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.aw-value small{font-size:.55em;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:0}
.aw-drops{display:flex;gap:.28em;margin-top:.55em}
.aw-drops i{width:.48em;height:.48em;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:rgba(255,255,255,.16)}
.aw-drops i.on{background:linear-gradient(135deg,#8BE0B8,#3FA97A)}
.aw-label{margin:.45em 0 0!important;font-size:.62em;font-weight:600;color:rgba(255,255,255,.7);line-height:1.2}

/* Reflejo del cristal */
.aw-glare{
  position:absolute;inset:.6em;border-radius:2.45em;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 28%,rgba(255,255,255,0) 45%);
}

/* El nuevo reloj ocupa el sitio del anterior */
.dev-watch,.mwatch{width:10.4em}

/* En el bloque «Agua y actividad» la correa sigue hasta el borde, como en una foto de producto */
.stage-inner--watch .aw-band{height:12em}
.stage-inner--watch .aw-band--top{border-radius:.6em .6em .5em .5em}
.stage-inner--watch .aw-band--bottom{border-radius:.5em .5em .6em .6em;justify-content:flex-start;padding-top:2.2em;gap:.75em}

/* ==========================================================================
   iPhone Duo de la portada: dos pantallas unidas por una bisagra.
   Todo en "em": escala con el resto de dispositivos de .devices.
   ========================================================================== */
.dev-duo{
  left:16.8em;bottom:0;z-index:2;
  width:15.6em;height:12.2em;padding:.55em;border-radius:1.6em;
  display:flex;align-items:stretch;
}
.dev-duo{animation-delay:.28s}
/* Cámara en el marco superior de la pantalla derecha */
.dev-duo::after{
  content:"";position:absolute;top:.17em;left:76%;width:.24em;height:.24em;border-radius:50%;
  background:#050C09;box-shadow:inset 0 0 0 .05em #2F5A4A;
}

/* Bisagra central: recorre todo el alto del dispositivo */
.duo-hinge{
  flex:none;position:relative;z-index:2;width:.8em;margin:-.55em 0;
  background:linear-gradient(90deg,#08120E 0%,#2E5646 38%,#3D6E5A 50%,#2E5646 62%,#08120E 100%);
  box-shadow:0 0 .35em rgba(0,0,0,.45);
}
.duo-hinge::before,.duo-hinge::after{
  content:"";position:absolute;left:.1em;right:.1em;height:.32em;border-radius:.16em;
  background:rgba(0,0,0,.35);box-shadow:0 .05em 0 rgba(255,255,255,.14);
}
.duo-hinge::before{top:1.7em}
.duo-hinge::after{bottom:1.7em}

/* Pantallas */
.duo-scr{
  flex:1;min-width:0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fff 40%,var(--green-50) 100%);
  padding:.6em .55em .6em;display:flex;flex-direction:column;gap:.4em;
}
.duo-scr--l{border-radius:1em .3em .3em 1em}
.duo-scr--r{border-radius:.3em 1em 1em .3em}
.duo-scr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);
}
.duo-scr--l::before,.duo-scr--r::before{
  content:"";position:absolute;top:0;bottom:0;width:.9em;pointer-events:none;z-index:1;
}
.duo-scr--l::before{right:0;background:linear-gradient(90deg,rgba(23,63,50,0),rgba(23,63,50,.14))}
.duo-scr--r::before{left:0;background:linear-gradient(270deg,rgba(23,63,50,0),rgba(23,63,50,.14))}

.duo-sbar{display:flex;justify-content:space-between;align-items:center;font-size:.55em;font-weight:650;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.duo-sbar--r{justify-content:flex-end}
.duo-batt{display:block;width:1.9em;height:.9em;border:.12em solid var(--ink);border-radius:.3em;padding:.1em;opacity:.85}
.duo-batt::before{content:"";display:block;height:100%;width:78%;background:var(--ink);border-radius:.12em}

/* Pantalla izquierda: resultado de un escaneo */
.duo-kicker{font-size:.5em;font-weight:600;color:var(--green-700);margin-top:.25em!important}
.duo-prod{display:flex;align-items:center;gap:.4em;margin-top:-.1em}
.duo-img{
  width:1.6em;height:1.6em;border-radius:.5em;flex:none;
  background:#F5EBDD;border:.07em solid #EADBC4;display:grid;place-items:center;
}
.duo-img svg{width:1em;height:1em;display:block}
.duo-name{font-size:.6em;font-weight:750;color:var(--green-900);letter-spacing:-.01em;line-height:1.15}
.duo-sub{font-size:.48em;color:var(--muted);margin-top:.15em!important}
.duo-ns{
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:#fff;border:.07em solid var(--line);border-radius:.55em;padding:.4em .35em;
}
.duo-ns span{height:1.05em;display:grid;place-items:center;font-size:.5em;line-height:1;font-weight:800;color:#fff;opacity:.45}
.duo-ns span:first-child{border-radius:.5em 0 0 .5em}
.duo-ns span:last-child{border-radius:0 .5em .5em 0}
.duo-ns .a{background:#038141}
.duo-ns .b{background:#85BB2F}
.duo-ns .c{background:#FECB02}
.duo-ns .d{background:#EE8100}
.duo-ns .e{background:#E63E11}
.duo-ns .on{opacity:1;position:relative;z-index:1;border-radius:.4em!important;transform:scale(1.35);box-shadow:0 0 0 .12em #fff,0 .15em .3em rgba(0,0,0,.18)}
.duo-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.35em}
.duo-tiles div{min-width:0;background:#fff;border:.07em solid var(--line);border-radius:.55em;padding:.35em .4em .4em}
.duo-tiles span{display:block;font-size:.46em;font-weight:600;color:var(--muted);line-height:1.2}
.duo-tiles b{display:block;white-space:nowrap;font-size:.88em;font-weight:800;color:var(--green-900);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.duo-tiles small{font-size:.46em;font-weight:600;color:var(--muted);letter-spacing:0}

/* Pantalla derecha: lista de la compra */
.duo-title{font-size:.66em;font-weight:750;color:var(--green-900);letter-spacing:-.015em;line-height:1.1;margin-top:.1em!important}
.duo-count{font-size:.5em;font-weight:600;color:var(--muted);margin-top:-.25em!important}
.duo-prog{height:.32em;border-radius:.2em;background:var(--green-100);overflow:hidden}
.duo-prog i{display:block;height:100%;width:60%;border-radius:.2em;background:linear-gradient(90deg,#3FA97A,#2E7D5B)}
.duo-list{background:#fff;border:.07em solid var(--line);border-radius:.55em;padding:.1em .45em}
.duo-item{
  display:flex;align-items:center;gap:.4em;
  font-size:.58em;font-weight:600;color:var(--text);line-height:1.1;padding:.42em 0;
  border-top:.1em solid var(--line);
}
.duo-item:first-child{border-top:0}
.duo-item i{
  position:relative;flex:none;width:1.15em;height:1.15em;border-radius:50%;
  border:.13em solid #C5D6CE;background:#fff;
}
.duo-item.done{color:var(--muted)}
.duo-item.done i{background:var(--green-700);border-color:var(--green-700)}
.duo-item.done i::after{
  content:"";position:absolute;left:.3em;top:.12em;width:.28em;height:.5em;
  border:solid #fff;border-width:0 .13em .13em 0;transform:rotate(45deg);
}

/* ==========================================================================
   Logotipo nuevo (15 de octubre de 2026)
   El mismo dibujo que el icono de la app: la N dentro del visor del escáner.
   Se pinta con assets/logo-vitronutri.svg. La letra «N» sigue en el HTML
   (oculta para los lectores de pantalla), pero ya no se ve.
   Para volver al logotipo anterior basta con borrar este bloque.
   ========================================================================== */
.logo,
.logo.logo-xl{
  background:#173F32 url("logo-vitronutri.svg") center/cover no-repeat;
  color:transparent;font-size:0;line-height:0;overflow:hidden;
}
.logo{box-shadow:0 6px 14px rgba(23,63,50,.32)}
.logo.logo-xl{box-shadow:0 14px 30px rgba(23,63,50,.35)}
/* En el pie (verde oscuro) un borde fino para que el logotipo no se pierda */
.foot-brand .logo{box-shadow:0 0 0 1px rgba(139,224,184,.45),0 6px 14px rgba(0,0,0,.25)}