/* ==========================================================================
   Formato alto · móvil y tablet en vertical
   html[data-formato="alto"] lo pone TC.medir() cuando la ventana es más alta que ancha.
   Artboard 390 × 844 (px de artboard; en un móvil k ≈ 1, en una tablet vertical se amplía y se centra).
   Las posiciones de cada pieza van en el HTML (data-alto); aquí, lo que cambia de estilo.
   El lenguaje de motion es el mismo: aquí solo cambian tamaños y composición.
   ========================================================================== */

/* piezas que solo existen en un formato */
.solo-alto{display:none !important}
html[data-formato="alto"] .solo-ancho{display:none !important}
html[data-formato="alto"] .solo-alto{display:revert !important}

html[data-formato="alto"]{
  /* ---- escala tipográfica móvil (px de artboard 390) ---- */
  --t-dxxl:44px; --t-dxl:34px; --t-cifra:112px; --t-tl:28px; --t-tm:22px; --t-ts:18px; --t-cl:16px; --t-cm:15px; --t-cs:13px;
}
html[data-formato="alto"] .dxxl{font-size:var(--t-dxxl);line-height:.92}
html[data-formato="alto"] .dxl{font-size:var(--t-dxl);line-height:.94}
html[data-formato="alto"] .cifra{font-size:var(--t-cifra)}
html[data-formato="alto"] .tl{font-size:var(--t-tl);line-height:1}
html[data-formato="alto"] .tm{font-size:var(--t-tm);line-height:1.08}
html[data-formato="alto"] .ts{font-size:var(--t-ts)}
html[data-formato="alto"] .cl{font-size:var(--t-cl)}
html[data-formato="alto"] .cm{font-size:var(--t-cm)}
html[data-formato="alto"] .cs{font-size:var(--t-cs)}
html[data-formato="alto"] .ets{font-size:var(--t-cs)}

/* ---- componentes ---- */
html[data-formato="alto"] .box{padding:24px;gap:14px}
html[data-formato="alto"] .hbox{padding:10px 16px 9px}
html[data-formato="alto"] .flecha{transform:rotate(90deg) scale(.6)}      /* la flecha apunta hacia abajo, más corta: del bloque al texto */

/* ---- nav: logo, botón corto y menú ---- */
html[data-formato="alto"] .nav{width:390px;height:64px}
html[data-formato="alto"] .nlogo{left:20px;top:12px;width:100px;height:38px}
html[data-formato="alto"] .nav .nl{display:none}
html[data-formato="alto"] .ncta{left:212px;top:10px;width:104px}
html[data-formato="alto"] .nav.compacta .nlogo,html[data-formato="alto"] .nav.compacta .ncta{transform:none}
.nmenu{all:unset;position:absolute;left:326px;top:10px;width:44px;height:44px;cursor:pointer;color:var(--nt)}
.nmenu i{position:absolute;left:12px;width:20px;height:1.5px;background:currentColor;transition:transform var(--t-media) var(--e-expo)}
.nmenu i:first-child{top:17px}
.nmenu i:last-child{top:26px}
.nmenu[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.nmenu[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.nmenu:focus-visible{outline:1px solid var(--c-acento);outline-offset:2px;border-radius:4px}
/* con el menú abierto la nav va en tinta clara sobre el oscuro del menú, esté donde esté */
html.menu-abierto .nav{--nt:var(--c-ink);--nb:var(--c-blanco);--nbt:var(--c-tinta)}
html.menu-abierto .nav .nlogo img{filter:none}
html.menu-abierto .nav.oculta{transform:none}

/* menú a pantalla completa (px reales, fuera del artboard) */
.menu{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--c-invert);color:var(--c-ink);overflow:auto;
      padding:calc(96px * var(--k)) calc(20px * var(--k)) calc(32px * var(--k));display:flex;flex-direction:column;gap:calc(32px * var(--k))}
.menu[hidden]{display:none}
.menu-caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-caps button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:10px 0;width:100%;border-bottom:1px solid var(--c-linea)}
.menu-caps .n{font:500 calc(13px * var(--k))/1 var(--f-ui);color:var(--c-acento);min-width:2ch}
.menu-caps .t{font:700 calc(26px * var(--k))/1.05 var(--f-display);letter-spacing:-.01em;color:var(--c-ink-3)}   /* legible (7.8:1); el activo en ink */
.menu-caps button[aria-current] .t{color:var(--c-ink)}
.menu-caps button:focus-visible{outline:1px solid var(--c-acento);outline-offset:4px}
.menu-links{display:flex;flex-direction:column;gap:12px}
.menu-links a{font:500 calc(15px * var(--k))/1.2 var(--f-ui);color:var(--c-ink-2);text-decoration:none}
.menu .wpill{position:relative;width:auto;align-self:flex-start;padding:0 22px}

/* ---- marcador e índice ---- */
html[data-formato="alto"] .indice{display:none}
html[data-formato="alto"] .arriba{right:16px;bottom:16px;width:40px;height:40px}

/* ---------- 01 · portada ---------- */
html[data-formato="alto"] .hencuadre{transform:none}
html[data-formato="alto"] .hfoto img{object-position:66% 50%}            /* los dos productores, centrados en vertical */
/* en alto no cabe bajo el CTA: va en su misma fila, a la derecha, con la flecha al lado del texto */
html[data-formato="alto"] .hscroll{left:auto;right:20px;width:auto;bottom:auto;top:766px;height:44px;flex-direction:row;gap:8px}
html[data-formato="alto"] .flecha--baja{width:10px;height:28px}
html[data-formato="alto"] .hgrad{background:linear-gradient(rgba(var(--rgb-fuerte),.35) 0%,rgba(var(--rgb-fuerte),.05) 30%,rgba(var(--rgb-fuerte),.55) 55%,rgba(var(--rgb-fuerte),.9) 100%)}

/* ---------- 02 · la mano (encuadre móvil validado en la v8) ---------- */
html[data-formato="alto"] .ghost{left:0;top:304px;width:390px;height:auto}
html[data-formato="alto"] .ghost canvas{width:230px;height:87px}
html[data-formato="alto"] .ghost p{width:auto;max-width:330px;margin:22px auto 0;font-size:14px}

/* ---------- 03 ---------- */
html[data-formato="alto"] .xrow{gap:12px}
html[data-formato="alto"] .xrow .split{width:300px !important}
html[data-formato="alto"] .num{gap:12px}
html[data-formato="alto"] .num .dxl{font-size:var(--t-tl);width:320px !important}

/* ---------- 04 ---------- */
html[data-formato="alto"] .tag{font-size:24px}

/* ---------- 05 ---------- */
html[data-formato="alto"] .card05{width:300px;padding:26px 28px 28px}
html[data-formato="alto"] .c5n{height:80px}
html[data-formato="alto"] .c5l{top:52px}

/* ---------- 06 ---------- */
html[data-formato="alto"] #nPepe,html[data-formato="alto"] #rPepe{text-align:center}
html[data-formato="alto"] .tn{text-align:center}
html[data-formato="alto"] .tr{font-size:12px;line-height:1.4}       /* roles largos en columna de 120: más compactos */
html[data-formato="alto"] .revision{left:12px;bottom:12px;max-width:calc(100% - 80px);box-sizing:border-box}   /* rótulo de revisión: deja libre volver arriba */

/* ---------- pie ---------- */
html[data-formato="alto"] .pie{padding:calc(40px * var(--k)) calc(var(--ox) + 20px * var(--k)) calc(32px * var(--k))}
html[data-formato="alto"] .pie-in{flex-direction:column;align-items:flex-start}
html[data-formato="alto"] .pie-legal{flex-direction:column}

/* ---------- 04 · botellas en panel horizontal ----------
   En vertical la foto solo enseña dos o tres botellas: la capa toma el ancho de la foto entera a su alto
   y el scroll la recorre de izquierda a derecha (s04-productores.js) */
html[data-formato="alto"] #capaBot{width:calc(var(--S)/var(--k)*var(--aspect-botellas))}