/* Transicion entre paginas: el navegador funde la vista vieja con la nueva.
   Donde no esta soportada, el JS hace un desvanecido equivalente. */
@view-transition{ navigation:auto }

/* ===========================================================
   Pelleriti Priore — recreación
   =========================================================== */
:root{
  --black:#040404;
  --cream:#FFF4DB;
  --brown:#8F6B46;
  /* el marron de marca da 4.13:1 sobre el negro del sitio: no llega a AA
     para texto. Este tono, de la misma familia, da 5.06-5.54 en los tres
     fondos oscuros que usamos. El marron original se queda para iconos y
     filetes, que solo necesitan 3:1. */
  --brown-claro:#A37E55;
  /* El hermano oscuro, para el tramo CLARO de /fundadores. --brown da 4.39:1
     sobre el crema #F7F4EF y no llega a AA para texto normal; este da 4.69:1
     y pasa. Uno para cada fondo: sobre negro el dorado se aclara, sobre crema
     se oscurece. */
  --brown-tinta:#896743;
  --muted:rgba(255,244,219,.6);   /* secundario del footer: legible sin competir */
  --serif:Georgia, "Times New Roman", serif;
  --body:"Baskervville", Georgia, serif;
  --ui:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --gutter:50px;

  /* Ritmo de las animaciones. La curva arranca con cuerpo y se asienta
     despacio al final, que es lo que da la sensacion de calma. */
  --curva:cubic-bezier(.22,1,.36,1);
  --t-corta:.5s;    /* hover, opacidades chicas */
  --t-media:.85s;   /* cambios de estado del menu */
  --t-larga:1.25s;  /* entradas de contenido */
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip y no hidden. hidden convierte a html y body en
   contenedores de scroll, y eso anula position:sticky en toda la pagina
   (el lateral del formulario de registro deja de engancharse). clip
   recorta igual sin crear ese contenedor. La linea hidden queda antes
   como respaldo para navegadores sin clip. */
/* El fondo del HTML es el del LIENZO: lo que se ve al rebotar el scroll por
   arriba o por abajo. Sin esto el lienzo hereda el del body, que en las 18
   paginas con .tema-claro es el crema #F7F4EF, y al pasarse del final en el
   movil aparecia una banda clara debajo del pie negro. En negro cuadra por
   los dos lados: la barra de arriba y el pie son negros en todas las paginas. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;background:var(--black)}

/* ritmo del fundido entre paginas */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.9s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
/* Respaldo para navegadores sin transicion ENTRE DOCUMENTOS. Va bajo
   .sin-vista, que pone js/main.js: sin esa condicion el fundido corria tambien
   donde el navegador ya hace la transicion nativa, y se veian los dos
   encimados -medido al entrar y al salir del portal-. */
html.sin-vista body{animation:entradaPagina 1s cubic-bezier(.22,1,.36,1) both}
/* animation:none: la entrada usa fill-mode both y su fotograma final
   -opacity:1- gana desde el origen de las animaciones a esta declaracion. Sin
   esto la pagina no se desvanecia nunca: se quedaba quieta y saltaba. */
body.saliendo{animation:none;opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
@keyframes entradaPagina{from{opacity:0}to{opacity:1}}
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:21px var(--gutter) 20px;   /* -30% de aire arriba */
  transition:background-color var(--t-media) var(--curva), padding var(--t-media) var(--curva), border-color var(--t-media) var(--curva);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(4,4,4,.88);
  backdrop-filter:blur(8px);
  padding-top:16px;padding-bottom:14px;
  border-bottom-color:rgba(143,107,70,.5);
}
.nav__links{display:flex;align-items:center;gap:35px}
.nav__links--right{justify-content:flex-end;gap:30px}
.nav__links a{
  font-family:var(--ui);
  font-size:10px;
  font-weight:500;
  letter-spacing:.15em;
  line-height:2;
  color:var(--cream);
  white-space:nowrap;
  opacity:.9;
  transition:opacity var(--t-corta) var(--curva);
}
.nav__links a:hover{opacity:1}
.nav__links a.is-current{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav__logo{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:132px;height:56px;
}
.nav__logo-full,
.nav__logo-mark{
  position:absolute;top:50%;left:50%;
  transition:opacity var(--t-media) var(--curva), transform var(--t-media) var(--curva);
}
.nav__logo-full{width:132px;height:56px;object-fit:contain;transform:translate(-50%,-50%)}
/* al hacer scroll se oculta el nombre y queda solo el monograma */
.nav__logo-mark{width:38px;height:auto;opacity:0;transform:translate(-50%,-50%) scale(.85)}
.nav.is-stuck .nav__logo-full{opacity:0;transform:translate(-50%,-50%) scale(.94)}
.nav.is-stuck .nav__logo-mark{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* el boton y el selector de idioma comparten exactamente el mismo alto */
.btn-pill,
.lang__face{
  display:inline-flex;align-items:center;justify-content:center;
  height:33px;
  padding:0 15px;
  line-height:1 !important;
  border:1px solid var(--cream);
}
.btn-pill{
  border-radius:45px;
  transition:background-color var(--t-corta) var(--curva),color var(--t-corta) var(--curva);
}
.btn-pill:hover{background:var(--cream);color:var(--black)}

/* language picker */
.lang{position:relative;display:inline-flex}
.lang select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.lang__face{
  gap:5px;
  border-radius:30px;
  font-family:var(--ui);font-size:10px;letter-spacing:.05em;color:var(--cream);
  pointer-events:none;
}

/* burger */
.burger{
  display:none;
  width:44px;height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.burger span{display:block;width:26px;height:1px;background:var(--cream);transition:transform var(--t-media) var(--curva),opacity var(--t-corta) var(--curva)}
.burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* mobile menu */
.mobilemenu{
  position:fixed;inset:0;z-index:45;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  /* la zona util arranca debajo de la barra: asi el bloque queda centrado
     con el mismo aire arriba y abajo, y no desplazado por el menu */
  padding:var(--nav-h,84px) 20px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-media) var(--curva),transform var(--t-media) var(--curva),visibility var(--t-media);
}
.mobilemenu.is-open{opacity:1;visibility:visible;transform:none}

/* --- menu desplegado en mobile --- */
.mobilemenu__links{
  display:flex;flex-direction:column;align-items:center;
  /* El menu se diseno con SEIS enlaces; con Novedades son siete y el tramo
     crecio 65px. A 4.4vh el hueco llegaba a 36px y la lista media 419px: en
     un telefono corto (667px de alto) el bloque no entraba y la tarjeta de
     tienda se cortaba. Con 2.7vh queda en 22px a 812 de alto y en 18px a
     667, y entra con aire en los dos. */
  gap:clamp(13px,2.7vh,22px);
}
.mobilemenu__links a{
  font-family:var(--serif);          /* serif, como los titulos */
  font-size:clamp(19px,5.4vw,24px);  /* escala con el ancho del telefono */
  line-height:1.05;
  letter-spacing:0;
  text-transform:none;               /* capitalizado, no todo en mayusculas */
  color:var(--cream);
  /* 31px de alto (21 de linea + 5 y 5): por encima del minimo de 24px que
     pide WCAG 2.2 para un objetivo tactil, y el hueco de 20px entre uno y
     otro los separa de sobra. Mas padding vertical se comia la compactacion
     que se gana bajando el gap. */
  padding:5px 12px;
}
.mobilemenu__links a.is-current{
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-thickness:1px;
}

/* bloque de tienda: encerrado en un recuadro de solo trazo */
.mobilemenu__store{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;
  margin-top:clamp(22px,3.6vh,34px);
  width:min(100%,348px);
  padding:22px 22px 20px;
  border:1.5px solid rgba(143,107,70,.5);   /* trazo base, algo mas grueso */
  border-radius:10px;
  position:relative;
  isolation:isolate;
  box-shadow:0 0 22px rgba(212,175,125,.10);  /* halo apenas perceptible */
}

/* Brillo que recorre el trazo: un degradado conico que gira, enmascarado para
   que solo se vea sobre el borde. El angulo se anima con @property; si el
   navegador no lo soporta, queda el reflejo quieto y el trazo se ve igual. */
@property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false }

.mobilemenu__store::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    transparent 232deg,
    rgba(212,175,125,.55) 286deg,
    rgba(255,244,219,.95) 312deg,
    rgba(212,175,125,.55) 338deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:giroNeon 11s linear infinite;
  pointer-events:none;
}
@keyframes giroNeon{ to{ --giro:360deg } }
@media (prefers-reduced-motion:reduce){
  /* sin cruce entre paginas: el cambio ocurre, pero de una vez */
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
  .mobilemenu__store::before{animation:none}
}
.mobilemenu__eyebrow{
  margin:0;
  font-family:var(--ui);font-size:14px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--brown);
}
.mobilemenu__desc{
  margin:0;max-width:252px;
  font-family:var(--ui);font-size:13.5px;font-weight:300;line-height:1.5;
  color:var(--cream);
}
.btn-solid{
  display:flex;align-items:center;justify-content:center;
  width:auto;padding:14px 34px;margin-top:6px;
  border-radius:999px;
  background:var(--cream);color:var(--black);
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:0;text-transform:uppercase;line-height:1;
  transition:opacity var(--t-corta) var(--curva);
}
.btn-solid:hover{opacity:.85}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  /* Alto del banner segun el ancho de pantalla. Se llama asi y no --foto
     porque NO sigue la proporcion del archivo: la foto es 1920x924 (el
     original mide 9590x4614, misma proporcion) y respetarla daria 693px a
     1440 de ancho y 924px a 1920, que se comen la pantalla entera.
     background-size:cover recorta la diferencia arriba y abajo, que es donde
     la foto tiene aire de sobra.
     La proporcion EXACTA de la foto es .4811 (1/2.0785); con ese numero no se
     recortaba nada. Con .46 la franja baja un 4.4% y recorta unos 30px a 1440
     (se ve el 95.6% del alto). Es el mismo sobrante de siempre: bajar la
     franja y ver mas foto salen del mismo lugar.
     Los numeros de antes -2000x992, .496, 52px, 92%- venian de un banner que
     ya no existe y no cerraban con ningun archivo del proyecto.
     Los pisos -580 y 455- quedan como estaban; abajo de ~1170px de ancho
     mandan ellos y ahi la foto vuelve a recortarse un poco. */
  --alto-banner:calc(100vw * .46);
  /* 720px como el original; si la pantalla es mas ancha que la foto, crece con ella */
  height:max(580px, var(--alto-banner));
  display:flex;align-items:center;
  /* Con align-items:center, la diferencia entre los dos paddings es lo que
     desplaza el bloque: queda a (arriba - abajo) / 2 del centro de la franja.
     150 y 50 lo bajan 50px. Centrado matematico quedaba muy alto de ojo -la
     masa visual del bloque esta arriba, en el titulo-; el original de Framer
     lo tenia 77px abajo del centro, que era demasiado. Esto queda en el medio.
     Los 150 de arriba ademas garantizan que nunca se meta debajo de la barra
     del menu, que mide 97px. */
  padding:150px 0 50px;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  /* la foto llena el alto completo y llega hasta arriba: sin banda negra.
     A cambio se recorta algo de los costados, que es donde hay mas margen. */
  /* La foto (1920x924 = 2.0785) es un poco mas alta que la franja (2.1739), asi
     que cover recorta 30px a 1440 y 40px a 1920: se ve el 95.6% del alto. El
     "100%" manda ese recorte al borde de ARRIBA, que es donde hay cielo de
     sobra; si fuera al centro se comeria los pies de los dos y el camino.
     Ojo con un detalle nuevo: esta foto es mas apaisada que la anterior, asi
     que alrededor de 1200px de ancho la franja y la foto miden casi igual
     (580 contra 577) y cover pasa a escalar por el ALTO. Ahi aparecen unos
     6px de sobrante lateral que antes eran exactamente 0; los reparte el
     "center" del eje horizontal y no se nota. Arriba de ~1210px vuelve a
     mandar el ancho y el sobrante lateral es 0 otra vez. */
  /* DOS RESOLUCIONES. El archivo de 1920 alcanza para una pantalla normal;
     el de 3840 es el que necesita una Retina, porque a 1920 de ancho y 2x el
     navegador pide 3840 pixeles reales. Con una sola copia de 2000px la foto
     se estiraba 1.44x a 1440 y 1.92x a 1920, y por eso se veia blanda aunque
     el archivo estuviera bien: no era la compresion, era la ampliacion.
     El url() suelto de la primera linea es el respaldo para los navegadores
     que no entienden image-set. */
  /* FOTO CON LA CORRECCION DE COLOR DEL CLIENTE, en las tres densidades.
     El archivo que mando mide 2000px de ancho: servirlo tal cual dejaba la
     pantalla Retina ampliando 1.44x y se veia blando -el cliente lo noto-.
     En vez de pedirle la exportacion grande, se TRASLADO su correccion a los
     archivos originales de 1920 / 3840 / 5760, que si tienen el detalle:
       1. se comprobo que es la misma foto y el mismo encuadre
          (correlacion de bordes 0.865)
       2. se saco una curva por canal comparando su archivo con el viejo
       3. se valido aplicandola al viejo: el residuo baja de 7.6 a 2.7 sobre
          255, o sea ~1%, asi que el ajuste era global y se reproduce
       4. se aplico esa curva a los tres originales, con la calidad subida
          hasta igualar el peso de los archivos que reemplazan, para no
          meter blandura por compresion
     El resultado queda a 2.9/255 de media del archivo del cliente. */
  background:#040404 url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-v2.webp?v=382") center 100%/cover no-repeat;
  background-image:image-set(
    url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-v2.webp?v=382") 1x,
    url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-v2-2x.webp?v=382") 2x);
}
/* TERCERA RESOLUCION, para pantallas anchas con Retina.
   image-set elige por DENSIDAD de pantalla, no por ancho de ventana. En un
   display 2x con la ventana mas ancha que 1920 CSS px el navegador necesita
   mas de 3840 pixeles reales, pero igual agarra el archivo "2x" de 3840 y lo
   AMPLIA. Un Studio Display o un iMac 27" 5K -2560 CSS px a 2x- pide 5120 y
   recibia 3840 estirados 1.33x: la foto se veia blanda aunque el archivo
   estuviera perfecto. No era compresion, era ampliacion, igual que cuando
   habia una sola copia de 2000px.
   Arriba de 1920 se promueve todo un escalon: el slot 1x pasa a ser el de
   3840 y el 2x el de 5760. Asi ninguna pantalla comun amplia nunca:
       1440 @1x -> usa 1920, reduce 1.33x
       1512 @2x -> usa 3840, reduce 1.27x
       1728 @2x -> usa 3840, reduce 1.11x
       1920 @2x -> usa 3840, exacto
       2560 @2x -> usa 5760, reduce 1.12x
   El archivo de 5760 (667 KB) solo se baja en ese ultimo caso. */
/* TERCERA RESOLUCION, para pantallas anchas con Retina. image-set elige por
   DENSIDAD, no por ancho de ventana, asi que el 5760 solo se baja ahi. */
@media (min-width:1921px){
  .hero__bg{
    background-image:image-set(
      url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-v2-2x.webp?v=382") 1x,
      url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-v2-3x.webp?v=382") 2x);
  }
}

/* VELO. Reescrito con los pixeles de la foto medidos, no a ojo.
   Se muestreo la foto renderizada a 1440 debajo de cada bloque de texto y se
   calculo el contraste de la crema #FFF4DB contra cada zona SIN velo.
   OJO: estos numeros se RECALCULARON al cambiar la foto el 26/09. Con la
   anterior el nav izquierdo pasaba solo (4.82:1) y no necesitaba velo; la
   foto nueva es mas clara arriba de los DOS lados y ahora los dos lo piden:
       nav izquierda  brillo 107  1.39:1  -> pide .473 de alfa
       nav derecha    brillo 201  1.00:1  -> pide .563 de alfa
   Por eso la franja de arriba subio de .52 a .64 y de 115px a 130px: con las
   paradas viejas daba .524 a la altura del texto del menu y se quedaba corta.
   Si se vuelve a cambiar la foto del banner HAY QUE REHACER esta medicion:
   el velo esta calibrado contra pixeles concretos, no contra una idea.
       titulo 53px    rgb(130,135,129)  3.35:1  -> pasa (texto grande, umbral 3:1)
       bajada 16px    rgb(145,146,133)  2.89:1  -> NO pasa (umbral 4.5:1)
       firmas         rgb( 83, 79, 51)  7.58:1  -> ya pasa solo
   O sea: el velo solo tiene DOS trabajos, la bajada de 16px a la izquierda y
   los enlaces de la derecha del menu. Todo lo demas se estaba oscureciendo
   sin necesidad, y era justo el centro-derecha de la foto -el rostro en las
   nubes, la copa y los dos fundadores- donde mas se notaba.

   - ARRIBA: la franja baja de 180px a 115px. A la altura del texto del menu
     (y=49) deja .52, que sube el nav de la derecha de 1.47 a ~5.2:1. A los
     115px ya vale 0, asi que de ahi para abajo la foto queda intacta.
     Esta franja no se puede sacar: sin ella COMPRAR y RECURSOS quedan en
     1.47:1 sobre el cielo, que es ilegible.
   - IZQUIERDA: es una ELIPSE, no una recta. Una rampa lineal comprimida caia
     .54 en 60px -9 milesimas de alfa por pixel- y a esa pendiente el ojo ve
     el corte como una linea vertical. Esta cae a 1.8 milesimas/px, cinco
     veces mas suave, con meseta plana sobre el texto y cola larga hacia
     afuera: no hay un punto donde "termine".
     LO QUE NO SE PUDO: que ademas no toque la zona del rostro. Medido, el
     texto necesita .47 de velo y llega hasta x=497; la zona limpia empieza en
     x=576. Son 79px para caer de .47 a 0 = 5.9 milesimas/px, o sea otra vez
     una linea. Las dos cosas juntas no existen mientras el texto siga donde
     esta y mida lo que mide. Esta elipse es el mejor reparto: deja .25 en
     x=576, .22 en x=594, .06 en x=700 y 0 desde x=800.
     (viejo comentario) muere en el 40% (x=576 a 1440) en vez del 68% (x=979), asi
     que de ahi a la derecha -el rostro en las nubes, la copa y los dos
     fundadores- la foto no tiene NADA encima: el velo vale 0.000 exacto en
     x=576 y en x=700.
     La forma de la rampa NO se eligio a ojo. Se calculo, pixel por pixel
     debajo del titulo y de la bajada, el alfa minimo que cada uno necesita
     para llegar a su umbral, y lo que salio es una meseta: el texto pide
     entre .45 y .48 desde x=220 hasta x=440, y recien afloja a .36 cerca de
     x=500. Por eso la rampa se mantiene plana en .54 hasta el 34% y recien
     ahi cae, con tres paradas seguidas para que el codo no se vea.
     Una primera version caia desde el 16% y dejaba el titulo en 1.71:1 y la
     bajada en 2.43:1. El promedio de la zona daba bien; el PEOR PIXEL, que
     es el que manda, daba mal. Peor caso ahora: titulo 4.17:1 (umbral 3) y
     bajada 5.73:1 (umbral 4.5).
   - ABAJO: sin cambios. Funde la foto contra el negro del cuerpo y no llega
     a las firmas (los 46px estan medidos en 810, 1024, 1199, 1200, 1280,
     1440 y 1920; el caso justo es escritorio a 1200, con 55px libres). */
.hero::after{
  content:"";position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(4,4,4,.70) 0%,  rgba(4,4,4,.64) 48%,
      rgba(4,4,4,.44) 62%, rgba(4,4,4,.18) 82%,
      rgba(4,4,4,0) 100%) top left / 100% 130px no-repeat,
    linear-gradient(0deg,
      rgba(4,4,4,.62) 0%, rgba(4,4,4,.28) 45%,
      rgba(4,4,4,0) 100%) bottom left / 100% 46px no-repeat,
    radial-gradient(ellipse 680px 105% at 120px 45%,
      rgba(4,4,4,.66) 0%,   rgba(4,4,4,.66) 25%,
      rgba(4,4,4,.591) 40%, rgba(4,4,4,.428) 55%,
      rgba(4,4,4,.232) 70%, rgba(4,4,4,.069) 85%,
      rgba(4,4,4,0) 100%);
}

.hero__inner{position:relative;z-index:2;padding:0 var(--gutter);max-width:820px}
.hero__title{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(37px,4.4vw,53px);
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--cream);
  animation:rise 1.9s .25s var(--curva) both;
}
.hero__lead{
  max-width:406px;margin:0;
  font-size:16px;line-height:1.3;color:var(--cream);
  animation:rise 1.9s .6s var(--curva) both;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.signatures{display:flex;align-items:center;gap:10px;margin-top:26px;height:50px}
.sign{height:38px;width:auto;opacity:0;animation:fadeIn 4s both}
.sign--a{animation-delay:1s}
.sign--b{height:35px;animation-delay:1.5s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- LEGADO ---------- */
.legacy{
  /* separacion amplia: el parallax corre las fotos hasta 60px hacia el texto,
     asi que la distancia base tiene que absorber ese desplazamiento */
  display:flex;align-items:center;justify-content:center;gap:84px;
  padding:120px var(--gutter);
  flex-wrap:wrap;
}
.legacy__media{display:flex;align-items:flex-end;gap:0;will-change:transform}
.legacy__img{margin:0;overflow:hidden}
.legacy__img picture{display:block;width:100%;height:100%}
.legacy__img img{width:100%;height:100%;object-fit:cover}
/* la foto del vinedo es vertical: anclada abajo, Miguel y Marcelo quedan centrados */
.legacy__img--wide img{object-position:center bottom}
/* la botella: el recuadro adopta la proporcion exacta de la foto, asi entra
   completa (toma abierta) y sin franjas negras entre una imagen y la otra.
   Si se cambia la foto hay que cambiar estos dos numeros: son los del archivo.
   Hoy son los de vino-supremo-malbec-piedras-luz-dorada.webp; la del 1853
   sobre la cepa era 966/1620 y el recuadro salia mas ancho. */
.legacy__img--tall{width:auto;aspect-ratio:731 / 1300}
.legacy__img--tall img{object-fit:cover;object-position:center}
.legacy__img--tall{height:502px}
.legacy__img--wide{width:480px;height:502px}
.legacy__copy{max-width:336px}
.legacy__copy p{
  margin:0;
  font-style:italic;
  font-size:17px;      /* el original usa 17px hasta 1699px y 20px de ahi en adelante */
  line-height:1.2;
  color:rgba(255,244,219,.4);
}
/* Apunta a la LETRA y no a cualquier span descendiente. Con el selector
   abierto, un <span> del propio texto -por ejemplo el tramo dorado de la
   declaracion- se volvia inline-block y dejaba de poder empezar en el
   renglon en curso: partia la frase donde no correspondia. */
.reveal .reveal__letra{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px)}
/* el envoltorio de palabra solo existe para que no se parta al final de linea */
.reveal .reveal__palabra{white-space:nowrap}
.reveal.is-in .reveal__letra{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity var(--t-larga) var(--curva), filter var(--t-larga) var(--curva), transform var(--t-larga) var(--curva);
}

/* Entrada de bloque, hermana del efecto de escritura. Existe porque la
   escritura letra por letra solo funciona en frases cortas: sobre los seis
   parrafos de /historia serian mas de mil letras animadas, que no se lee
   como un detalle sino como ruido. Aca entra el parrafo entero. */
/* Va colgado de .js -que pone el <head> en una linea- y no suelto: el efecto
   de escritura se apaga solo sin JS, porque las letras las crea el propio JS
   y sin el el texto sale entero. Este no: oculta un elemento que YA esta en
   el HTML, asi que sin la guarda un JS bloqueado dejaba el articulo en blanco. */
/* LAS IMAGENES DIFERIDAS ENTRAN CON UN FUNDIDO.
   Solo las de loading="lazy": las del encabezado llevan fetchpriority="high",
   son el LCP de su pagina y atenuarlas empeoraria la metrica.

   La guarda es @media (scripting: enabled) y NO la clase .js. Esa clase solo
   la ponen las 14 paginas que usan el sistema de animaciones -el <script>
   inline va unicamente donde hay data-aparece o data-reveal-, asi que en
   /vinos, /trade o la portada la regla no habria llegado nunca. Comprobado.
   Si el navegador no entiende la consulta, no esconde nada: no hay fundido,
   pero tampoco imagenes invisibles.

   Las que ya estaban en cache llevan ademas .foto-ya, que apaga la
   transicion: si no, cada recarga meteria medio segundo de espera en
   imagenes que ya estaban listas. */
@media (scripting: enabled){
  img[loading="lazy"]:not(.foto-lista){opacity:0}
  img[loading="lazy"].foto-lista{
    opacity:1;
    transition:opacity .55s var(--curva);
  }
  img[loading="lazy"].foto-ya{transition:none}
}

.js .aparece{opacity:0;transform:translateY(16px)}
.aparece.is-in{
  opacity:1;transform:none;
  transition:opacity var(--t-larga) var(--curva), transform var(--t-larga) var(--curva);
}

/* ---------- FOOTER ---------- */
/* recorta el footer mientras sube: evita que el translate genere scroll extra */
/* fondo propio: en la pagina de vinos el body es blanco y el footer
   quedaba sin color al heredarlo */
.footer-wrap{overflow:hidden;background:var(--black)}
.footer{
  background:var(--black);
  color:var(--cream);          /* no hereda del body: en vinos el body es negro */
  display:flex;align-items:flex-start;gap:40px;
  will-change:transform,opacity; /* el JS lo sube al entrar en pantalla */
  padding:34px var(--gutter) 30px;
  border-top:1px solid var(--brown);
}
.footer__brand{display:flex;align-items:center;gap:10px;flex:1}
.footer__mark{width:34px;height:auto;object-fit:contain}
.footer__name{
  margin:0;font-family:var(--serif);font-size:26px;text-transform:uppercase;color:var(--cream);
}
.footer__right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.footer__social{display:flex;align-items:center;gap:20px}
.footer__follow{font-family:var(--serif);font-size:19px;letter-spacing:-.07em}
.footer__social nav{display:flex;gap:20px}
.footer__social a{font-family:var(--ui);font-size:12px;font-weight:300;color:var(--cream);opacity:.9}
.footer__social a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.footer__info{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;text-align:right}
.footer__info p{margin:0;font-family:var(--ui);font-size:12px;font-weight:300;line-height:1.5;color:var(--muted)}
/* los dos correos iban pegados por un simple espacio de texto */
.footer__mails{display:flex;flex-wrap:wrap;gap:4px 18px}
.footer__info a{color:var(--muted)}
.footer__info a:hover{color:var(--cream)}

/* ---------- RESPONSIVE ---------- */
@media (min-width:1700px){
  :root{--gutter:68px}
  .legacy__copy p{font-size:20px}
}

@media (max-width:1199px){
  :root{--gutter:30px}
  .nav__links{gap:22px}
  .nav__links a{font-size:8px}
  .nav__logo,
  .nav__logo-full{width:100px;height:42px}   /* por clase: no pisa la regla de mobile */
  .legacy__img--tall{height:455px}
  .legacy__img--wide{width:340px;height:455px}
  .legacy__copy{max-width:233px}
}

@media (max-width:809px){
  :root{--gutter:20px;--nav-h:84px}
  /* menu mobile: selector de idioma a la izquierda, logo centrado, hamburguesa a la derecha */
  .nav{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 12px;height:var(--nav-h);
    transition:height var(--t-media) var(--curva), background-color var(--t-media) var(--curva);
    background:transparent;          /* va montado sobre el banner */
    border-bottom:none;
  }
  .nav__links--left{display:none}
  /* display:contents disuelve el contenedor: el selector ES pasa a ser hijo directo
     del menu y se puede ubicar en la primera columna */
  .nav__links--right{display:contents}
  .nav__links--right > a{display:none}       /* oculta AREA COMERCIAL y COMPRAR ARGENTINA */
  .lang{order:0;justify-self:start}
  .nav__logo{order:1;justify-self:center;width:152px;height:68px;transition:height var(--t-media) var(--curva)}
  .nav__logo-full{width:152px;height:68px}
  .nav__logo-mark{width:40px}
  .burger{display:flex;order:2;justify-self:end}
  /* al hacer scroll queda solo el monograma y la barra se compacta un poco.
     En mobile mantiene el negro solido y el borde igual que arriba: lo unico
     que cambia es el alto y el logo, para que la transicion no se note brusca. */
  .nav.is-stuck{
    height:70px;
    padding:0 12px;
    background:rgba(4,4,4,.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(143,107,70,.5);
  }
  .nav.is-stuck .nav__logo{height:46px}
  /* con el menu desplegado se oculta el nombre y queda solo el monograma */
  .nav.menu-abierto .nav__logo-full{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  .nav.menu-abierto .nav__logo-mark{opacity:1;transform:translate(-50%,-50%) scale(1)}

  /* hero mobile: la foto arranca debajo del menu y el texto va montado sobre
     su tramo final, como en el sitio original */
  .hero{
    position:relative;
    display:block;
    aspect-ratio:auto;
    height:auto;
    padding:0 0 34px;
    /* Proporcion del banner mobile. El archivo es 5029x6496 (1.2917); el
       anterior era 646x1019 (1.5774), mas alto y angosto.
       El .92 recorta un 8% de CIELO VACIO de arriba. Medido sobre la foto:
       el rostro ocupa del 20% al 52% del alto y los dos fundadores del 47%
       al 79%; arriba del pelo hay 18% de cielo que no aporta nada. Sacando
       ese 15%, los dos suben 73px y entran mas arriba en la pantalla. */
    --foto-mobile:calc(100vw * 6496 / 5029 * .85);
  }
  .hero__bg{
    position:absolute;
    top:0;left:0;right:0;                      /* arranca arriba: el menu va encima */
    height:var(--foto-mobile);
    aspect-ratio:auto;
    /* TRES densidades, no una. El archivo anterior media 646px de ancho: en
       cualquier telefono actual -375 CSS px a 2x son 750 pixeles reales- ya
       se estaba AMPLIANDO, y por eso se veia blando. Aca el 3x es el que mas
       importa, porque los telefonos de gama alta son 3x, no 2x. */
    background-image:url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-mobile.webp?v=271");
    background-image:image-set(
      url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-mobile.webp?v=271") 1x,
      url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-mobile-2x.webp?v=271") 2x,
      url("../img/banner-pelleriti-priore-fundadores-vinedo-rostro-cielo-mobile-3x.webp?v=271") 3x);
    /* "bottom": como la caja es mas baja que la proporcion del archivo, cover
       recorta 39px. Anclando abajo, ese recorte sale del TECHO -el cielo
       vacio- y no de los pies. Es lo que sube a los dos. */
    background-position:center bottom;
    background-size:cover;
    z-index:0;
    /* La foto se desvanece hacia abajo para que el texto se lea encima, pero
       el desvanecido arrancaba en el 46%, que es JUSTO ARRIBA DE SUS CABEZAS
       (ellos van del 47% al 79%). A la altura de sus pies la foto quedaba al
       22% de opacidad y por eso se los tragaba el negro. Ahora arranca en el
       80%, por debajo de sus pies: los dos quedan enteros y
       opacos, y el fundido pasa a ocupar solo el tramo de camino que sigue. */
    -webkit-mask-image:linear-gradient(#000 80%,transparent 100%);
    mask-image:linear-gradient(#000 80%,transparent 100%);
  }
  /* degradado negro arriba: le da contraste al menu sobre la foto */
  /* en mobile el texto no va a la izquierda sino montado sobre el tramo final
     de la foto, que ya se desvanece con una mascara: alcanza la franja de
     arriba. Hay que soltar el borde inferior, porque en escritorio el ::after
     cubre todo el alto. */
  /* UN SOLO DEGRADADO, arriba, y es una ELIPSE — no una franja.
     Antes era un rectangulo de 180px con paradas rectas (.78 / .72 al 50% /
     .36 al 78% / 0) y se leia como lo que era: una caja con degradado pegada
     arriba de la foto. El ojo no detecta un borde por lo empinada que sea la
     caida sino por el SALTO DE PENDIENTE: esas paradas cambiaban la
     inclinacion de golpe dos veces, y ahi aparecia el corte.
     Aca la caida es un smoothstep (3r^2-2r^3), que llega a cero CON PENDIENTE
     CERO: no tiene donde terminar, se desvanece. Y al ser elipse no hay
     ninguna linea horizontal: baja mas en el centro, donde esta el logotipo,
     y menos en los costados.

     Las tres cajas del menu, medidas en el render a 375 y con los pixeles
     reales de la foto detras:
         pastilla ES   y hasta  39   1.09:1 sin velo   pide .530
         logotipo      y hasta  52   1.00:1 sin velo   pide .566
         hamburguesa   y hasta  36   1.11:1 sin velo   pide .526
     El elemento mas bajo termina en y=52 y las cabezas de los dos fundadores
     estan en y=155: hay 103px para caer, no 55 como parecia. Con ry=165 la
     elipse vale .011 a la altura de sus cabezas y 0 exacto desde y=165, asi
     que NO LOS TOCA. El rostro tampoco: a y=140 ya esta en .088.

     El pico .66 no es a ojo: es el minimo que satisface las tres cajas. La
     que manda es la pastilla ES, que por estar en la esquina queda mas lejos
     del centro de la elipse (r=.49) y por eso exige mas pico que el logotipo. */
  .hero::after{
    display:block;inset:0 0 auto 0;height:260px;
    background:radial-gradient(ellipse 115% 165px at 50% 0%,
      rgba(4,4,4,.66) 0%,   rgba(4,4,4,.66) 35%,
      rgba(4,4,4,.615) 45%, rgba(4,4,4,.511) 55%,
      rgba(4,4,4,.368) 65%, rgba(4,4,4,.218) 75%,
      rgba(4,4,4,.089) 85%, rgba(4,4,4,.011) 95%,
      rgba(4,4,4,0) 100%);
  }
  .hero__inner{
    position:relative;z-index:2;
    max-width:none;
    /* .73 y no .58. Con .58 el titulo arrancaba a la altura del PECHO de los
       dos y se les montaba encima, y cualquier velo que lo hiciera legible
       les pegaba a ellos: medido, con .58 el titulo no pasa de 2.99:1 salvo
       que se los desvanezca.
       Con .73 arranca a la altura de las BOTAS -10px por encima de los pies-
       y ahi el fondo es tierra oscura, asi que el titulo da 3.20:1 sin ningun
       velo encima de ellos.
       El numero salio de optimizar por ALTURA, no a ojo: probadas todas las
       combinaciones de recorte (0-16%), posicion del texto (55-85%) y arranque
       de mascara (60-94%) que cumplen contraste Y los dejan opacos, esta es la
       que da el hero mas bajo. Hero: 626px contra 607 originales, +19px.
       Una version anterior usaba .88 y daba 718px: demasiado largo. */
    padding:calc(var(--foto-mobile) * .73) var(--gutter) 0;
  }
  .hero__title{font-size:37px;letter-spacing:.08em;line-height:1.1;margin-bottom:16px}
  .hero__lead{font-size:15px;max-width:342px}

  /* medidas del original en mobile: vinedo 313x434 y botella 167x434 (franja recortada) */
  .legacy{flex-direction:column;align-items:flex-start;gap:20px;padding:40px 0 88px;width:100%}
  /* corridas hacia la izquierda: el vinedo sangra por el borde y el aire
     queda del lado derecho, como en la referencia */
  .legacy__media{padding-left:0;gap:0;margin-left:-80px}
  .legacy__img--wide{order:1;width:313px;height:434px}
  .legacy__img--tall{order:2;width:167px;height:434px;aspect-ratio:auto}
  .legacy__img--tall img{object-fit:cover;object-position:center}
  .legacy__copy{width:100%;padding:0 20px;max-width:none}
  .legacy__copy p{font-size:17px;max-width:336px}

  .footer{flex-direction:column;align-items:stretch;gap:24px;padding:20px var(--gutter) 24px}
  .footer__right{align-items:flex-start;order:0}
  .footer__brand{order:1;gap:5px}
  .footer__name{font-size:22px}
  .footer__info{justify-content:flex-start;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  body{opacity:1 !important}
  .reveal span{opacity:1;filter:none;transform:none}
  .js .aparece{opacity:1;transform:none}
  /* el filete nace en scaleX(0) y lo despliega una transicion: sin esto, al
     apagar las transiciones se quedaria invisible para siempre */
  .red-dato__filete{transform:none !important}
  /* las imagenes diferidas no deben quedarse en opacity:0 si el JS tarda */
  img[loading="lazy"]{opacity:1 !important}
}

/* ===========================================================
   PÁGINA VINOS — tema claro
   =========================================================== */
/* El crema de la casa, no blanco puro: es el mismo #F7F4EF que usan
   /novedades, el portafolio de /red-negocios y el tramo de biografias de
   /fundadores. Lo heredan las 7 subpaginas del area y tambien /vinos, que
   era la unica pagina clara que quedaba en blanco 100%. */
.tema-claro{background:#F7F4EF;color:var(--black)}

/* sobre fondo claro el menú va siempre en negro sólido */
.tema-claro .nav,
.tema-claro .nav.is-stuck{
  background:var(--black);
  backdrop-filter:none;
  border-bottom:1px solid var(--brown);
}

.vinos{
  display:flex;align-items:center;justify-content:center;
  gap:75px;                      /* separación entre colecciones */
  min-height:745px;
  padding:130px var(--gutter) 70px;   /* deja lugar al menú fijo */
  flex-wrap:wrap;
}

.coleccion{display:flex;flex-direction:column;align-items:center}

.coleccion__titulo{
  display:flex;flex-direction:column;align-items:center;
  gap:6.4px;padding-bottom:36px;text-align:center; /* -20% entre titulo y subtitulo */
}
.coleccion__titulo h2{
  margin:0;
  font-family:"Bentham","Bentham Placeholder",Georgia,serif;
  font-weight:400;font-size:23px;letter-spacing:.09em;line-height:19px;
  text-transform:uppercase;color:var(--black);
}
.coleccion__titulo p{
  margin:0;
  font-family:var(--ui);font-weight:200;font-size:14px;line-height:1.1;
  color:var(--black);
}

.coleccion__vinos{display:flex;align-items:flex-end;gap:0}

.vino{
  --foto:116px;
  /* el ancho lo fija la foto, nunca el nombre: "Selected Parcel" medía
     122px y ensanchaba su columna, dejando los huecos disparejos. */
  width:var(--foto);flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;text-decoration:none;
}
.vino__foto{position:relative;display:block;width:var(--foto);height:293px;transition:transform var(--t-media) var(--curva)}

/* ---------- medalla de puntaje en la grilla ----------
   Misma pieza que en la ficha de producto, pero en gris porque /vinos va
   sobre blanco y en negro pesaba demasiado: siete medallones a 20.5:1
   competian con las botellas. Vive DENTRO de .vino__foto: a la altura del
   cuello el vidrio ocupa menos de un tercio del ancho de la caja y el resto
   es transparente, asi que la medalla cae sobre el fondo de la pagina sin
   invadir la botella vecina en ningun tamaño.
   Los grises estan elegidos por contraste, no a ojo. Los numeros son
   sobre el crema #F7F4EF, que es el fondo desde que /vinos dejo el blanco:
     texto  #ACACAC = 2.07:1   (sobre blanco puro daba 2.27)
     trazo  #C7C7C7 = 1.54:1   (sobre blanco puro daba 1.69)
   Ninguno de los dos llega a los minimos de WCAG (4.5:1 para la palabra, que
   mide 4.6px; 3:1 para el numero, que a 32px cuenta como texto grande; 3:1
   para el aro). Es una decision tomada a conciencia y pedida tres veces: el
   puntaje acompaña y no debe competir con las botellas. Si alguna vez hay que
   recuperar contraste sin oscurecerlo, la salida es agrandar la palabra en
   lugar de subirle el gris. */
.vino__puntos{
  position:absolute;
  right:-12px;top:calc(17% - 23px);
  /* misma mecanica que .ficha__puntos: una sola medida manda y todo lo de
     adentro se deriva con LAS MISMAS proporciones. Las siete medallas del
     sitio tienen que leerse como una familia, y hasta ahora no lo eran: la
     chica llevaba la palabra un 10.6% mas gorda y el hueco contra la cifra
     un 19% mas abierto que la de la ficha, que es la que quedo aprobada.
     Por eso el numero se veia despegado del texto. */
  --aro:46px;
  width:var(--aro);height:var(--aro);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid #C7C7C7;
  border-radius:999px;
  pointer-events:none;
}
.vino__puntos-num{
  font-family:var(--body);font-weight:400;
  /* mismo motivo que en .ficha__puntos-num: sin esto el 6 de "96" se monta
     sobre el 9, porque en Baskervville el 6 asciende y el 9 desciende */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
  /* line-height .72 y no 1. Las cifras de caja alta NO descienden, asi que
     con line-height:1 la caja quedaba ~10px mas abajo que la tinta y ese aire
     fantasma abria el hueco contra la palabra "Puntos". Con las cifras de
     estilo antiguo no pasaba: el 9 y el 5 colgaban y llenaban la caja.
     .72 es la altura de mayuscula de Baskervville: la caja abraza el dibujo
     y el hueco vuelve a ser el que se ve. */
  font-size:calc(var(--aro) * .69863);line-height:.72;letter-spacing:.01em;
  margin-top:0;
  color:#ACACAC;
}
.vino__puntos-txt{
  font-family:var(--ui);font-weight:500;
  font-size:calc(var(--aro) * .09041);letter-spacing:.2em;text-transform:uppercase;
  /* .0274 es el hueco de la ficha. Antes eran 1.5px sobre 46 = .0326, un 19%
     mas: eso era lo que despegaba la palabra de la cifra. */
  margin-top:calc(var(--aro) * .0274);
  padding-left:.2em;            /* compensa el tracking del ultimo caracter */
  color:#ACACAC;              /* todo el medallon en gris raton */
}
/* absoluto para que NO aporte alto: con height:100% contra un padre de
   altura automatica el img caia a su tamaño intrinseco, estiraba la caja
   y anulaba el aspect-ratio. Por eso cada botella media distinto segun su
   foto (Hostage, la mas ancha, quedaba 83px mas baja que el resto). */
.vino__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vino:hover .vino__foto{transform:translateY(-8px)}

.vino__nombre{
  display:flex;flex-direction:column;align-items:center;
  padding-top:15px;text-align:center;
  /* el nombre no corta: si es mas ancho que la columna se desborda unos
     pocos px sobre el hueco, centrado. Cortarlo desalineaba las etiquetas
     ("Selected Parcel" quedaba en dos lineas y las demas en una). */
  white-space:nowrap;
}
.vino__linea1{
  font-family:var(--serif);font-size:12px;letter-spacing:.06em;line-height:20px;
  /* --brown-tinta y no --brown: al pasar el fondo de #fff al crema #F7F4EF,
     --brown cayo de 4.82:1 a 4.39 y dejo de pasar AA para este cuerpo de
     12px. --brown-tinta da 4.69:1 sobre el crema. */
  text-transform:uppercase;color:var(--brown-tinta);
}
.vino__linea2{
  font-family:var(--serif);font-size:9px;letter-spacing:.06em;line-height:10px;
  text-transform:uppercase;color:var(--black);
}

@media (max-width:1199px){
  .vinos{gap:0;padding:120px var(--gutter) 60px}
  .coleccion__titulo h2{font-size:18px}
  .coleccion__titulo p{font-size:13px}
  .vino{--foto:80px}
  .vino__foto{height:202px}
}

@media (max-width:809px){
  .vinos{
    flex-direction:column;align-items:center;
    gap:55px;min-height:0;
    padding:calc(var(--nav-h) + 74px) 0 45px;
  }
  .coleccion{width:100%}
  .coleccion__titulo{padding-bottom:34px;gap:2px}   /* titulo y bajada mas juntos */
  .coleccion__titulo h2{font-size:25px;letter-spacing:.01em;line-height:25px}
  .coleccion__titulo p{font-size:13px;line-height:15px}
  /* botellas algo mas grandes y con aire entre columnas; escalan con el ancho
     para que "SELECTED PARCEL" no desborde en telefonos angostos */
  .coleccion__vinos{gap:clamp(6px,2.5vw,14px)}
  .vino{--foto:clamp(96px,27vw,116px)}
  .vino__foto{height:auto;aspect-ratio:32 / 100}
  .vino__puntos{top:calc(17% - 23px);right:-11px}
  .vino__linea1{font-size:12px}
  .vino__linea2{font-size:11px}
  .vino__linea1,
  .vino__linea2{white-space:nowrap}   /* nombre y variedad, cada uno en una linea */
}

/* ===========================================================
   TABLET (810–1199px) — adaptación propia del rango
   El layout de escritorio no entra a este ancho y el de mobile
   queda desaprovechado, así que este tramo tiene su propia versión.
   =========================================================== */
@media (min-width:810px) and (max-width:1199px){
  :root{--gutter:40px}

  /* --- menú híbrido: hamburguesa a la izquierda, logo al centro,
         comprar + idioma a la derecha. Los cinco enlaces pasan al
         desplegable, que a este ancho no entran en línea. --- */
  :root{--nav-h:82px}
  .nav{
    /* laterales iguales: asi el logo queda centrado en la pantalla y no
       en su columna, que es lo que pasa con columnas de distinto ancho */
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:16px var(--gutter);
    height:var(--nav-h);
  }
  .nav__links--left{display:none}
  /* En la barra de tablet no queda NINGUN enlace: solo el selector de idioma,
     que es un div y no un <a>. Antes sobrevivia el boton COMPRAR, y era una
     repeticion: el desplegable ya trae "Comprar" apuntando al mismo
     comprar-argentina.html. Con la hamburguesa a la izquierda y el logo
     centrado, un unico boton suelto a la derecha desbalanceaba la barra.
     Comprobado que no se pierde acceso: el destino sigue estando en el menu. */
  .nav__links--right > a{display:none}

  .burger{display:flex;order:0;justify-self:start}
  .nav__logo{order:1;justify-self:center}
  .nav__links--right{order:2;justify-self:end;gap:16px}

  .nav__links a{font-size:10px}
  .nav__logo,
  .nav__logo-full{width:120px;height:52px}

  /* con el desplegable abierto queda solo el monograma, como en mobile */
  .nav.menu-abierto .nav__logo-full{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  .nav.menu-abierto .nav__logo-mark{opacity:1;transform:translate(-50%,-50%) scale(1)}

  /* --- hero: menos recorte lateral que con el alto de escritorio --- */
  .hero{height:max(455px, calc(100vw * .46));padding:118px 0 54px}
  .hero__title{font-size:44px}
  .hero__lead{font-size:15px;max-width:380px}
  /* VELO DE TABLET. Reescrito midiendo los pixeles de la foto, no a ojo.
     El problema que resuelve: la elipse anterior tenia un pico de .84 y un
     radio fijo de 690px, y a 810-900 de ancho eso le caia ENCIMA a los dos
     fundadores. Medido sobre la caja que ocupan -del 54% al 69% del ancho,
     del 43% al 92% del alto-: .397 de alfa media y .608 de maxima a 810.
     Quedaban tapados.
     Los .84 nunca hicieron falta. Se calculo, pixel por pixel, cuanta alfa
     necesita CADA punto debajo del texto para llegar a 3:1 el titulo (44px,
     texto grande) y 4.5:1 la bajada (15px): el peor punto de todo el rango
     pide .524. El pico estaba un 60% por encima de lo necesario y ese
     sobrante era justamente el que ensuciaba la foto.
     Ahora:
       - pico .67, el minimo que sostiene el contraste en todo el rango con
         este radio. El caso mas exigente es 810: ahi cover escala por el
         ALTO y recorta 115px de lado, asi que los pixeles debajo del texto
         no son los mismos que a 1044 y hubo que medirlos aparte.
       - meseta hasta el 65% del radio y recien despues la caida, en vez de
         empezar a bajar en el 25%. Asi el texto tiene su tinta sin que el
         velo tenga que ser ancho.
       - radio 490px FIJO, centro 24px. Fijo y no porcentual a proposito: en
         porcentaje la elipse crece con la pantalla y vuelve a alcanzar a los
         fundadores en el extremo ancho del rango. Con 490px cubre el 63% del
         ancho a 810 -donde el texto ocupa media pantalla- y solo el 43% a
         1199, que es justo lo que hace falta.
         OJO: la version con min(61%, 520px), que seria lo natural, NO sirve.
         Este motor RECHAZA min() como radio de un radial-gradient y tira la
         declaracion entera: el background-image queda vacio, gana la regla
         de escritorio y tablet se queda sin su velo. Comprobado leyendo el
         valor computado. calc(), % y px si pasan.
       - el desvanecido mide 172px: es un fundido, no un borde. Los tramos
         del 65 al 100% aproximan una curva suave (smoothstep), que no tiene
         el codo que se ve cuando la caida es recta.
     Verificado en 810, 830, 900, 1000, 1044, 1100 y 1199, con estos mismos
     tramos de color y no con la curva ideal:
       titulo nunca baja de 3.23:1 (umbral 3, porque 44px es texto grande)
       bajada nunca baja de 4.97:1 (umbral 4.5)
       fundadores: CERO de alfa desde 1000px; a 810 pasa de .394 de media y
       .606 de maxima a .040 y .273 */
  .hero::after{
    background-size:100% 150px, 100% 30px, 100% 100%;
    background-image:
      linear-gradient(180deg,
        rgba(4,4,4,.70) 0%,  rgba(4,4,4,.64) 48%,
        rgba(4,4,4,.44) 62%, rgba(4,4,4,.18) 82%,
        rgba(4,4,4,0) 100%),
      linear-gradient(0deg,
        rgba(4,4,4,.62) 0%, rgba(4,4,4,.28) 45%,
        rgba(4,4,4,0) 100%),
      radial-gradient(ellipse 490px 105% at 24px 46%,
        rgba(4,4,4,.67) 0%,   rgba(4,4,4,.67) 65%,
        rgba(4,4,4,.633) 70%, rgba(4,4,4,.537) 75%,
        rgba(4,4,4,.406) 80%, rgba(4,4,4,.264) 85%,
        rgba(4,4,4,.133) 90%, rgba(4,4,4,.037) 95%,
        rgba(4,4,4,0) 100%);
  }

  /* --- legado: en columna. Lado a lado no entra sin achicar
         las fotos a un tamaño que las desluce --- */
  /* Habia TRES bordes distintos en la misma pantalla: el gutter en 40, las
     fotos en 52 -sus 730px centrados en los 754 disponibles- y el parrafo en
     137, porque su max-width de 560 se centraba por su cuenta. El que rompia
     era el parrafo: 85px corrido respecto de las fotos que tiene encima.
     Se arregla igualando el ANCHO DE CAJA del texto al de las fotos, no
     alineando todo al gutter. Probado al ras de la izquierda y es peor: a
     1024 las fotos quedan varadas con 254px de vacio a la derecha. Asi las
     dos piezas forman una banda centrada y comparten borde.
     --banda es la suma de las dos fotos; si cambian de tamaño, cambia aca. */
  /* EN TABLET VA EN FILA, no apilado. Apilado, las dos fotos a 520 de alto se
     comian la pantalla entera y el texto quedaba debajo del pliegue: habia que
     desplazarse para enterarse de que la seccion decia algo. En fila, con las
     fotos mas chicas, la frase se lee al lado de la imagen y la seccion entra
     de una vez.

     Las medidas van en clamp y no fijas porque esta banda cubre de 810 a 1199,
     que son 390px de diferencia: con un ancho fijo, o sobraba sitio arriba o
     no entraba abajo. El alto manda, y el ancho de la botella sale solo de su
     proporcion 731/1300. */
  .legacy{
    flex-direction:row;align-items:center;justify-content:center;
    gap:clamp(28px, 4vw, 56px);
    padding:clamp(64px, 8vw, 96px) var(--gutter);
  }
  .legacy__media{gap:0;justify-content:center;flex:0 0 auto}
  .legacy__img--wide{width:clamp(240px, 30vw, 360px);height:clamp(330px, 42vw, 440px)}
  .legacy__img--tall{height:clamp(330px, 42vw, 440px)}   /* el ancho, por proporcion */
  .legacy__copy{flex:1 1 220px;width:auto;max-width:300px;padding:0}
  .legacy__copy p{font-size:clamp(16px, 1.9vw, 19px);max-width:none}

  /* --- vinos: una colección por fila, con botellas más grandes --- */
  .vinos{
    flex-direction:column;align-items:center;
    gap:64px;min-height:0;
    padding:150px var(--gutter) 80px;
  }
  .coleccion__titulo h2{font-size:22px}
  .coleccion__titulo p{font-size:14px}
  .coleccion__vinos{gap:20px}
  .vino{--foto:124px}
  .vino__foto{height:auto;aspect-ratio:32 / 100}
  /* aca la botella llena la caja y el cuello llega mas a la derecha:
     la medalla se achica para no pisarlo. La palabra caeria por debajo
     de 4px, ilegible, asi que queda solo el numero. */
  .vino__puntos{top:calc(17% - 23px);right:-10px}
  .vino__linea1{font-size:12px}
  .vino__linea2{font-size:10px}

  /* --- footer: dos columnas siguen entrando, con menos aire --- */
  .footer{gap:24px;padding:30px var(--gutter) 26px}
  .footer__name{font-size:23px}
}

/* ===========================================================
   FICHA DE VINO — plantilla de página de producto
   Texto a la izquierda, botella a la derecha. Sobre fondo negro.
   Medidas tomadas del sitio original; las migas de pan y la
   categoría son propias de esta versión.
   =========================================================== */
.ficha{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:100vh;
  padding-top:97px;          /* alto de la barra fija en escritorio */
  overflow:hidden;
}

.ficha__info{
  width:64%;
  /* La sangria crece con la pantalla para mantener acotada la distancia hasta
     la botella. Con un valor fijo, todo el sobrante se acumulaba entre las dos
     columnas: la formula deja ~240px de separacion entre 1300 y 1600px.
     Los topes evitan que se pegue al borde en pantallas chicas ni se vaya
     demasiado al centro en las muy anchas. */
  padding:40px 0 40px clamp(160px, calc(64vw - 700px), 340px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}

/* cada bloque entra con un retraso distinto: el ojo los lee en orden */
.ficha__info > *{animation:rise 1.7s var(--curva) both}
.ficha__migas  {animation-delay:.20s}
.ficha__titulo {animation-delay:.38s}
.ficha__categoria{animation-delay:.56s}
.ficha__texto  {animation-delay:.74s}

/* ---- migas de pan ---- */
.ficha__migas{margin:0 0 18px}
.migas__ruta{
  display:flex;flex-wrap:wrap;align-items:center;
  margin:0;padding:0;list-style:none;
}
.migas__ruta li{display:flex;align-items:center}
/* separador: un trazo fino, más sobrio que una barra.
   Va como ::after del elemento ANTERIOR y no como ::before del siguiente.
   Con ::before, al partirse la ruta en dos renglones -pasa en movil, donde
   "Inicio - Comprar Argentina - Registro comercial" no entra- el trazo caia
   al principio del segundo renglon y quedaba un guion suelto colgando a la
   izquierda. Como ::after se queda al final del primero, que se lee como
   continuacion. */
.migas__ruta li:not(:last-child)::after{
  content:"";display:block;
  width:16px;height:1px;margin:0 12px;
  background:rgba(255,244,219,.26);
}
.migas__ruta a,
.migas__ruta span{
  font-family:var(--ui);font-size:10px;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  color:rgba(255,244,219,.45);
  transition:color var(--t-corta) var(--curva);
}
.migas__ruta a:hover{color:var(--cream)}
.migas__ruta [aria-current]{color:rgba(255,244,219,.9)}

/* versión corta: sólo en mobile, donde la ruta completa no entra.
   Va como píldora trazada, igual que COMPRAR ARGENTINA y el selector de
   idioma, para que se lea como botón y no como un texto más. */
.migas__volver{
  display:none;align-items:center;gap:10px;
  height:36px;padding:0 18px;
  border:1px solid rgba(255,244,219,.32);
  border-radius:45px;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  color:rgba(255,244,219,.8);
  transition:color var(--t-corta) var(--curva),
             border-color var(--t-corta) var(--curva),
             background-color var(--t-corta) var(--curva);
}
.migas__volver svg{overflow:visible;transition:transform var(--t-media) var(--curva)}
.migas__volver:hover,
.migas__volver:active{
  color:var(--black);background:var(--cream);border-color:var(--cream);
}
.migas__volver:hover svg{transform:translateX(-4px)}

/* ---- categoría / colección ---- */
.ficha__categoria{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  margin:16px 0 0;
}
.ficha__coleccion{
  display:inline-flex;align-items:center;
  height:27px;padding:0 15px;
  border:1px solid rgba(143,107,70,.9);border-radius:45px;
  font-family:var(--ui);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;line-height:1;
  color:#C0925F;
  transition:background-color var(--t-corta) var(--curva),color var(--t-corta) var(--curva);
}
.ficha__coleccion:hover{background:var(--brown);color:var(--cream)}
.ficha__lema{
  font-family:var(--body);font-style:italic;font-size:14px;line-height:1;
  color:rgba(255,244,219,.42);
}

/* ---- título ---- */
.ficha__titulo{margin:0}
.ficha__titulo h1{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:33px;line-height:.94;letter-spacing:.03em;   /* -20% */
  text-transform:uppercase;color:var(--cream);
}
.ficha__gama{
  /* era un <p> y ahora es un <span> dentro del h1, por SEO: sin esto se
     pondria en linea con el nombre y perderia su renglon */
  display:block;
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:25px;line-height:1.28;letter-spacing:.03em;
  text-transform:uppercase;color:#b8b8b8;
}

/* ---- descripción ---- */
.ficha__texto{max-width:469px;padding-top:14px}
.ficha__texto p{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.38;
  /* Alineado a la IZQUIERDA, no justificado. Medido en la columna real de la
     ficha, el justificado estiraba los espacios entre palabras hasta 3 veces
     su ancho natural: en el peor renglon repartia 45.3px entre 7 huecos, o
     sea 9.7px de hueco donde lo normal son 3.2px. Eso son los "rios" del
     texto justificado, y a este cuerpo se ven.
     No es un problema solo de tablet: medido en 834, 1024 y 1440, el
     estiramiento maximo da 3.01, 3.61 y 2.84. La convencion tipografica
     admite hasta ~1.5. Se corrige en los tres anchos porque dejar escritorio
     justificado y tablet no seria peor que el defecto. */
  text-align:left;color:#bfbfbf;
}
.ficha__texto p + p{margin-top:10px}

/* ---- botella ---- */
/* No va centrada en su columna: en el original el eje de la botella cae a
   129,5px del borde izquierdo de la columna, o sea pegada al texto, con el
   aire del lado derecho. El padding = 129,5 - (ancho pintado / 2). */
/* ---------- saltar al vino anterior / siguiente ----------
   Jerarquia deliberadamente baja: el rotulo va en versalitas chicas y el
   nombre del vino en la serif de la casa, sin caja ni boton. Lo unico que
   se mueve es la flecha al pasar el cursor. */
.ficha__saltos{
  /* align-self:stretch: .ficha__info es flex column con align-items:flex-start,
     asi que sin esto el bloque encogia al contenido y su ancho variaba entre
     250 y 409px segun lo largos que fueran los nombres vecinos. */
  align-self:stretch;width:100%;max-width:469px;   /* igual que .ficha__texto */
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  margin-top:38px;padding-top:22px;
  border-top:1px solid rgba(163,126,85,.26);
  animation:rise 2.2s .55s var(--curva) both;
}
.ficha__salto{
  display:flex;align-items:center;gap:12px;
  max-width:46%;
  color:var(--muted);text-decoration:none;
  transition:color var(--t-corta) var(--curva);
}
.ficha__salto--sig{flex-direction:row-reverse;text-align:right}
.ficha__salto:hover{color:var(--cream)}
.ficha__salto svg{
  width:19px;height:19px;flex:none;
  transition:transform var(--t-media) var(--curva);
}
.ficha__salto--ant:hover svg{transform:translateX(-5px)}
.ficha__salto--sig:hover svg{transform:translateX(5px)}
.ficha__salto-rot{
  display:block;margin-bottom:5px;
  font-family:var(--ui);font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brown-claro);
}
.ficha__salto-nom{
  display:block;
  font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.15;
  letter-spacing:.04em;text-transform:uppercase;color:inherit;
}
.ficha__salto:focus-visible{outline:2px solid var(--brown-claro);outline-offset:6px;border-radius:4px}

.ficha__producto{
  position:relative;
  flex:1;align-self:stretch;
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:9px;
}
/* Luz de fondo detras de la botella. Es lo unico que despega el vidrio
   oscuro del negro de la pagina. Va muy baja a proposito: al centro
   apenas rgba(212,175,125,.13), y se apaga del todo antes del borde.
   El movimiento es un vaiven largo de 26s, casi imperceptible. */
.ficha__producto::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(620px,118%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(212,175,125,.13) 0%,
    rgba(212,175,125,.07) 32%,
    rgba(143,107,70,.035) 55%,
    transparent 72%);
  animation:respiraLuz 26s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes respiraLuz{
  from{transform:translate(-50%,-50%) scale(.92)}
  to  {transform:translate(-46%,-54%) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .ficha__producto::before{animation:none}
}
/* ---------- medalla de puntaje ----------
   Calcada del SVG de referencia: un unico tono calido para aro, numero y
   palabra, sin relleno, y el numero ocupando casi la mitad del diametro.
   El .9 de opacidad del SVG va en el color y no en el elemento, porque la
   animacion `rise` termina en opacity:1 y pisaria cualquier opacity propia.
   Proporciones del original (lienzo 106): aro 2.3% del diametro,
   numero 48%, palabra 11%. */
.ficha__puntos{
  position:absolute;
  /* la botella va centrada y mide 617px: su tope esta en 50% - 308px.
     +48px baja la medalla hasta el cuello. En horizontal se monta sobre
     el borde derecho de la botella, como pidio la marca. */
  top:calc(50% - 240px);left:146px;
  z-index:2;margin:0;
  /* UNA sola medida manda. Todo lo de adentro -la cifra, la palabra, la
     leyenda de Supremo, el grosor del trazo y el empujon optico- se deriva de
     --aro por proporcion, asi que cambiar el breakpoint es cambiar UN numero.
     Antes cada @media repetia a mano el font-size y el margen de cada pieza y
     era cuestion de tiempo que se desincronizaran: de hecho pasó, y por eso
     en mobile y tablet la medalla se veia como en escritorio ANTES del
     arreglo de las cifras de caja alta. */
  --aro:73px;
  width:var(--aro);height:var(--aro);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  border:calc(var(--aro) * .0226) solid rgba(189,169,138,.9);   /* 2.26% del diametro */
  border-radius:999px;
  color:rgba(189,169,138,.9);
  animation:rise 2.2s .75s var(--curva) both;
  pointer-events:none;
}

/* Un reflejo tenue que recorre el aro, como el estampado metalico de una
   etiqueta al girar la botella. Mismo recurso que la tarjeta del menu movil
   y la caja de /comprar-argentina, pero a menos de la mitad de intensidad y
   en 19s (los otros van a 11s) para que no laten sincronizados. */
.ficha__puntos::before{
  content:"";
  position:absolute;
  inset:calc(var(--aro) * -.0226);
  border-radius:inherit;
  padding:1.65px;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    transparent 250deg,
    rgba(212,175,125,.26) 296deg,
    rgba(255,244,219,.48) 318deg,
    rgba(212,175,125,.26) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:giroNeon 19s linear infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .ficha__puntos::before{animation:none}
}
.ficha__puntos-num{
  font-family:var(--body);       /* Baskervville: el alto contraste del SVG */
  font-weight:400;
  /* 54px dan 37px de tinta = 48% del diametro, la proporcion del SVG.
     Hay que medir la TINTA y no el font-size: la caja de linea engaña. */
  /* Baskervville trae cifras de estilo antiguo: el 9 y el 5 DESCIENDEN bajo
     la linea base. Medido a 54px, su tinta baja 12.1px y se sale 4.1px de
     la caja de linea, por eso se montaba sobre la palabra. El margen
     negativo sube el bloque para que el dibujo quede centrado en el aro:
     la caja de linea esta descentrada respecto de la tinta.
     Verificado: 17.9px de aire arriba, 2.9px de hueco, 11px abajo: el
     numero va bajo y pegado a la palabra, con el aire arriba. */
  /* CIFRAS DE CAJA ALTA. Medido en Baskervville a 60px, sus cifras de estilo
     antiguo tienen alturas distintas entre si:
         9 sube 27.2 y BAJA 13.4     5 sube 27.9 y BAJA 13.4
         6 SUBE 40.0 y baja  0.7
     O sea que el 9 y el 5 cuelgan bajo la linea base y el 6 se estira hacia
     arriba. Mientras los puntajes eran todos 95 eso no se notaba -las dos
     cifras colgaban igual- y el margin-top negativo de abajo estaba calibrado
     para ese caso. Al aparecer los 96, el 6 quedaba 12.8px mas alto que el 9.
     lining-nums pide las cifras de caja alta, que se apoyan todas en la linea
     base y miden lo mismo: 95, 96 y cualquier otro numero quedan parejos sin
     compensar nada por caso. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
  /* mismo ajuste que en .vino__puntos-num: la caja se ajusta a la altura de
     mayuscula para que no quede aire fantasma debajo de la cifra */
  font-size:calc(var(--aro) * .69863);line-height:.72;letter-spacing:.01em;
  margin-top:0;
  color:inherit;
}
.ficha__puntos-txt{
  font-family:var(--ui);font-weight:500;
  font-size:calc(var(--aro) * .09041);letter-spacing:.24em;text-transform:uppercase;
  color:inherit;
  /* 2px y no 7. Los 7 compensaban la descendente del 9 y del 5, que con las
     cifras de caja alta ya no existe: la caja del numero abraza el dibujo,
     asi que ese margen habia quedado como aire puro entre la cifra y la
     palabra. 2px sobre un aro de 73 son 2.7%, la misma proporcion que en el
     medallon chico de /vinos. */
  margin-top:calc(var(--aro) * .0274);
  padding-left:.26em;            /* compensa el tracking del ultimo caracter */
}

.ficha__botella{
  position:relative;z-index:1;   /* por delante de la luz */
  width:auto;height:617px;
  max-height:calc(100vh - 190px);   /* en pantallas bajas no se sale */
  object-fit:contain;
  animation:rise 2.2s .3s var(--curva) both;
}

/* ---------- ficha · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  /* Texto y botella se tratan como un conjunto centrado con una separacion
     fija. Con columnas de ancho porcentual todo el sobrante se juntaba en el
     medio: el texto quedaba pegado al borde y la botella lejisimos. */
  .ficha{
    padding:var(--nav-h) var(--gutter) 0;
    justify-content:center;
    gap:clamp(50px, 7vw, 90px);
  }
  .ficha__info{
    width:clamp(370px, 48vw, 500px);
    flex:none;
    padding:40px 0;
  }
  .ficha__titulo h1{font-size:30px;line-height:.94}
  .ficha__gama{font-size:24px;line-height:1.28}
  .ficha__saltos{margin-top:30px;padding-top:18px;gap:20px;max-width:none}
  .ficha__salto-nom{font-size:14px}
  /* en tablet el contenedor abraza la botella (no hay columna sobrante),
     asi que la medalla se ancla al costado con un solapamiento chico */
  .ficha__puntos{--aro:65px;top:calc(50% - 228px);left:132px}
  .ficha__texto{max-width:none}     /* el ancho lo fija la columna */
  .ficha__producto{flex:none;align-self:center;padding-left:0}
  /* la botella crece con el alto de pantalla: en iPad vertical sobraba sitio
     y se veia chica; en apaisado se achica sola para no salirse */
  .ficha__botella{height:clamp(470px, 66vh, 610px);max-height:calc(100vh - 190px)}
}

/* ---------- ficha · mobile ---------- */
@media (max-width:809px){
  .ficha{
    --borde-ficha:28px;          /* margen lateral propio, mas ancho que el general */
    flex-direction:column;align-items:stretch;
    gap:0;min-height:0;
    padding-top:calc(var(--nav-h) + 62px);
  }
  /* la botella va primero, como portada */
  .ficha__producto{order:0;flex:none;align-self:auto;height:526px;
                   justify-content:center;padding-left:0}
  .ficha__botella{height:452px;max-height:calc(100% - 40px)}

  .ficha__info{
    order:1;width:100%;
    padding:20px var(--borde-ficha) 46px;
    justify-content:flex-start;
  }
  /* El boton de volver va en la franja libre bajo la barra, por encima de la
     botella (antes montaba 11px sobre el vidrio). Va posicionado sobre la ficha entera
     -no dentro de la columna de texto- porque en el HTML las migas vienen
     despues de la foto; asi se mueve sin reordenar el marcado. */
  .ficha{position:relative}
  .ficha__migas{
    position:absolute;
    top:calc(var(--nav-h) + 40px);
    left:var(--borde-ficha);        /* a plomo con el titulo y la pildora de abajo */
    margin:0;
    z-index:3;
    display:flex;justify-content:flex-start;
  }
  .migas__ruta{display:none}
  .migas__volver{display:inline-flex}
  .ficha__categoria{margin:12px 0 0;gap:12px}
  .ficha__titulo h1{font-size:30px;line-height:.94}
  .ficha__gama{font-size:23px;line-height:1.3}
  .ficha__saltos{margin-top:56px;padding-top:20px;gap:14px;max-width:none}
  .ficha__salto{gap:9px;max-width:47%}
  .ficha__salto svg{width:16px;height:16px}
  .ficha__salto-rot{font-size:8px;letter-spacing:.18em;margin-bottom:4px}
  .ficha__salto-nom{font-size:12.5px}
  /* pegada al cuello, como en escritorio: montaba 44px a la derecha y a
     solo 6% de altura. Ahora 17% y apoyada sobre el borde de la botella. */
  /* +30%: 54 -> 70px. El horizontal NO puede ir en % del viewport: la botella
     mide siempre lo mismo en px, asi que un right:18% la dejaba pegada a 375px
     y a 37px de distancia a 502px. Tampoco puede anclarse al ancho del archivo:
     eso es el ancho del CUERPO, y la medalla va a la altura del HOMBRO. Hostage
     es de hombro caido -cuerpo ancho, cuello angosto- y con ese criterio le
     quedaba flotando a 28px mientras en las otras seis apoyaba.
     --cuello es donde termina el vidrio a ESTA altura, medido sobre el canal
     alfa del webp por tools/medir-cuellos.py. Asi los 7 apoyan igual en
     cualquier ancho. Si cambian las fotos o este top, correr ese script. */
  .ficha__puntos{--aro:70px;top:19.2%;
                 left:calc(50% + (452px * var(--cuello, .0938)) + 1px);right:auto}
  .ficha__texto{max-width:none;padding-top:12px}
  .ficha__texto p{line-height:1.25}   /* menos aire entre renglones */
}

/* las anclas de colección no quedan tapadas por la barra fija */
.coleccion{scroll-margin-top:120px}
@media (max-width:809px){ .coleccion{scroll-margin-top:calc(var(--nav-h) + 24px)} }

/* Reemplaza el bloque FUNDADORES de css/styles.css (líneas ~1132-1247).
   El token nuevo va con los demás, en :root. */

/* El dorado de marca da 4.39:1 sobre el crema #F7F4EF: no llega a AA para
   texto normal. Este, de la misma familia, da 4.69:1. Es el hermano oscuro
   de --brown-claro (5.54:1 sobre negro): uno para cada hoja del díptico. */

/* ===========================================================
   FUNDADORES — EL DÍPTICO
   Tramo negro: el díptico abierto, una costura dorada al medio y
   el retrato como broche. Tramo crema: las dos vidas en espejo.
   =========================================================== */
.fundadores{background:#F7F4EF}

/* ---------- 1. el díptico abierto ---------- */
.fundadores-hero{
  position:relative;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;
  gap:48px;
  padding:calc(97px + 64px) var(--gutter) 84px;
}
/* LA COSTURA. Nace bajo el título y baja hasta el borde del tramo; el
   retrato, opaco, la interrumpe. Se apaga en las dos puntas para no
   terminar en un corte seco. NO hace falta overflow:hidden en ningún
   lado -todo cae dentro de la caja-, y así no se pone en riesgo el
   position:sticky de más abajo. */
.fundadores-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;margin-left:-.5px;width:1px;top:172px;bottom:0;
  background:linear-gradient(180deg,
    rgba(143,107,70,0) 0%,  rgba(143,107,70,.55) 12%,
    rgba(143,107,70,.55) 74%, rgba(143,107,70,0) 100%);
}
.fundadores-hero__cabecera{position:relative;z-index:1;text-align:center}
.fundadores-hero__volanta{
  margin:0 0 18px;
  font-family:var(--ui);font-size:10px;font-weight:500;line-height:1;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--brown-claro);            /* 5.54:1 sobre negro */
}
.fundadores-hero__titulo{
  margin:0;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:clamp(34px,3.6vw,46px);line-height:.96;letter-spacing:.012em;
  text-transform:uppercase;color:var(--cream);
}

/* 1fr auto 1fr y NO minmax(0,320px): con minmax cada pista se dimensiona
   al contenido, las dos reseñas tienen largos distintos y la costura
   dejaría de caer sobre el eje del retrato. Con 1fr las pistas son
   idénticas por construcción. El ancho del texto lo limita .fundador. */
.fundadores-duo{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:start;
  column-gap:clamp(34px,4vw,62px);
  width:100%;max-width:1180px;
}
.fundadores-duo__foto{grid-column:2;margin:0;align-self:center}
.fundadores-duo__foto img{display:block;width:380px;height:571px;object-fit:cover}

/* el pie: la costura, interrumpida por la foto, reaparece entre los dos
   nombres. Es lo que contesta de una vez quién es quién. */
.fundadores-duo__pie{
  display:grid;grid-template-columns:1fr 1fr;margin-top:16px;
  font-family:var(--ui);font-size:9.5px;font-weight:500;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brown-claro);
}
.fundadores-duo__pie span:first-child{
  text-align:right;padding-right:11px;
  border-right:1px solid rgba(143,107,70,.55);
}
.fundadores-duo__pie span:last-child{padding-left:12px}

.fundador{display:flex;flex-direction:column;gap:12px;max-width:330px;padding-top:54px}
.fundador--marcelo{grid-column:1;justify-self:end;  text-align:right;align-items:flex-end}
.fundador--miguel {grid-column:3;justify-self:start;text-align:left; align-items:flex-start}

/* tinta crema sobre transparente: sobre el negro va tal cual */
.fundador__firma{display:block;width:auto;height:38px;opacity:.92;margin-bottom:6px}

.fundador__nombre{
  position:relative;margin:0;
  font-family:var(--ui);font-size:17px;font-weight:600;line-height:1.3;
  letter-spacing:.005em;color:var(--cream);
}
/* el filete que apunta al retrato, invertido en cada hoja. 16+10=26px
   contra un gap mínimo de 34px: no se monta sobre la foto nunca. */
.fundador__nombre::after{
  content:"";position:absolute;top:.62em;width:16px;height:1px;background:var(--brown);
}
.fundador--marcelo .fundador__nombre::after{left:100%;margin-left:10px}
.fundador--miguel  .fundador__nombre::after{right:100%;margin-right:10px}

.fundador__rol{
  display:block;margin-top:7px;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brown-claro);
}
.fundador__bio{
  margin:0;
  font-family:var(--body);font-size:16px;line-height:1.55;
  color:rgba(255,244,219,.72);          /* 9.62:1 sobre #040404 */
  text-align:inherit;                   /* se acabó el justify */
}

/* ---------- 2. las dos vidas, en espejo ---------- */
/* la misma sombra hacia arriba de .hist-panel: las dos páginas riman */
.fundadores-detalle{
  position:relative;z-index:1;
  background:#F7F4EF;color:var(--black);
  display:flex;justify-content:center;
  padding:96px var(--gutter) 104px;
  box-shadow:
    0 -2px   4.3px rgba(0,0,0,.20),
    0 -3.7px 8.2px rgba(0,0,0,.23),
    0 -11px  25px  rgba(0,0,0,.30),
    0 -41px  90px  rgba(0,0,0,.48);
}
/* la filigrana de los Andes, con la misma máscara de .recursos::before.
   Es un background: no desborda su caja, así que no necesita
   overflow:hidden y el sticky de abajo sigue vivo. */
.fundadores-detalle::before{
  content:"";position:absolute;inset:0 0 auto 0;height:440px;pointer-events:none;
  background:url("../img/filigrana-andes-pelleriti-priore.webp?v=271") center top/cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(#000 24%,transparent 100%);
          mask-image:linear-gradient(#000 24%,transparent 100%);
}
.fundadores-detalle__inner{
  position:relative;z-index:1;
  width:min(1180px,100%);
  display:flex;flex-direction:column;gap:110px;
}

.fundador-largo{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,580px);
  column-gap:clamp(48px,6vw,96px);
  justify-content:center;align-items:start;
}
.fundador-largo--miguel{grid-template-columns:minmax(0,580px) minmax(0,300px)}
.fundador-largo--miguel .fundador-largo__rail{grid-column:2;grid-row:1;align-items:flex-end;text-align:right}
.fundador-largo--miguel .fundador-largo__texto{grid-column:1;grid-row:1}

/* align-self:start es obligatorio: con stretch el item ocupa toda la fila
   y el sticky se queda sin recorrido. */
.fundador-largo__rail{
  position:sticky;top:calc(97px + 34px);align-self:start;
  display:flex;flex-direction:column;align-items:flex-start;
}
.rail__filete{display:block;width:46px;height:1px;background:var(--brown-tinta);margin-bottom:24px}

/* la firma teñida: mask no recorta un <img>, tiñe un <span>. El alfa del
   trazo hace de plantilla y el color sale exacto. Va en un @supports para
   que sin soporte no quede un rectángulo marrón sino nada. */
.rail__firma{display:block;width:118px;height:66px}
.fundador-largo--miguel .rail__firma{width:163px}
@supports ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .rail__firma{
    background-color:var(--brown-tinta);
    -webkit-mask:url("../img/firma-marcelo-pelleriti.png") left center/contain no-repeat;
            mask:url("../img/firma-marcelo-pelleriti.png") left center/contain no-repeat;
  }
  .fundador-largo--miguel .rail__firma{
    -webkit-mask-image:url("../img/firma-miguel-priore.png");
            mask-image:url("../img/firma-miguel-priore.png");
  }
  .fundador-largo--miguel .rail__firma{
    -webkit-mask-position:right center;mask-position:right center;
  }
}

/* se va el subrayado de 2px; entra el engrosado a mano de /historia */
.fundador-largo h2{
  margin:18px 0 0;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:34px;line-height:1.08;letter-spacing:-.015em;
  color:var(--black);text-decoration:none;
  -webkit-text-stroke:.011em currentColor;
}
.rail__rol{
  margin:11px 0 0;
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--brown-tinta);             /* 4.69:1 sobre el crema */
}

.hitos{
  list-style:none;margin:28px 0 0;padding:0;width:100%;
  display:flex;flex-direction:column;
  border-top:1px solid rgba(137,103,67,.32);
}
.hitos li{
  display:flex;flex-direction:column;gap:4px;padding:13px 0;
  border-bottom:1px solid rgba(137,103,67,.32);
}
.hitos b{
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:29px;line-height:1;letter-spacing:.01em;color:var(--brown-tinta);
}
.hitos span{
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.35;
  color:rgba(4,4,4,.62);                /* 5.80:1 sobre el crema */
}

.fundador-largo__texto{display:flex;flex-direction:column;gap:1.15em}
.fundador-largo__texto p{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.62;
  letter-spacing:-.005em;color:var(--black);
  text-align:left;                      /* se va el justify */
  text-wrap:pretty;
}
/* la entradilla: la serif de la marca abre cada voz */
.fundador-largo__texto p:first-child{
  font-family:var(--body);font-weight:400;font-size:21px;line-height:1.5;
  letter-spacing:0;color:#241D17;
}
/* los golpes: párrafos de menos de 160 caracteres, marcados por el generador */
.fundador-largo__texto p.golpe{
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:26px;line-height:1.25;letter-spacing:0;
  color:var(--brown-tinta);margin-block:.3em 0;text-wrap:balance;
}
.fundador-largo__texto strong{font-weight:500}
/* resaltador bajo para las cifras que quedan dentro de la prosa */
.fundador-largo__texto .cifra{
  font-weight:500;box-shadow:inset 0 -.32em 0 rgba(137,103,67,.16);
}

/* ---------- entradas (cuelgan de .js, como el resto del sitio) ---------- */
.js .fundador-largo__rail{opacity:0;transform:translateX(-22px)}
.js .fundador-largo--miguel .fundador-largo__rail{transform:translateX(22px)}
/* EL RESET TIENE QUE PESAR MAS QUE LAS DOS REGLAS DE ARRIBA.
   La de Miguel es `.js .fundador-largo--miguel .fundador-largo__rail`, que
   pesa (0,3,0). Un `.fundador-largo__rail.is-in` pesa (0,2,0) y PIERDE: su
   rail se quedaba corrido 22px a la derecha para siempre, en todos los
   anchos. El de Marcelo no fallaba porque su regla de entrada pesa (0,2,0),
   empata con el reset y gana el que va despues en el archivo.
   Por eso el selector de Miguel se repite aca con el .is-in agregado: (0,4,0). */
.js .fundador-largo__rail.is-in,
.js .fundador-largo--miguel .fundador-largo__rail.is-in{
  opacity:1;transform:none;
  transition:opacity var(--t-larga) var(--curva), transform var(--t-larga) var(--curva);
}
.js .fundador-largo__rail .hitos li{opacity:0;transform:translateY(10px)}
.fundador-largo__rail.is-in .hitos li{
  opacity:1;transform:none;
  transition:opacity .9s var(--curva), transform .9s var(--curva);
}
.fundador-largo__rail.is-in .hitos li:nth-child(2){transition-delay:.12s}
.fundador-largo__rail.is-in .hitos li:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .fundador-largo__rail,
  .js .fundador-largo__rail .hitos li{opacity:1;transform:none}
}

/* ---------- fundadores · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .fundadores-hero{padding:calc(var(--nav-h) + 54px) var(--gutter) 60px;gap:38px}
  .fundadores-hero::before{display:none}      /* la costura baja entre las reseñas */
  .fundadores-duo{grid-template-columns:1fr 1fr;column-gap:0;row-gap:38px;max-width:760px}
  .fundadores-duo__foto{grid-column:1 / -1;grid-row:1;justify-self:center}
  .fundadores-duo__foto img{width:336px;height:505px}
  .fundadores-duo__pie{width:336px;margin-inline:auto}
  .fundador{max-width:none;padding-top:0}
  .fundador--marcelo{grid-column:1;grid-row:2;justify-self:stretch;padding-right:32px}
  .fundador--miguel {grid-column:2;grid-row:2;justify-self:stretch;padding-left:32px;
                     border-left:1px solid rgba(143,107,70,.38)}
  .fundador__nombre::after{display:none}

  .fundadores-detalle{padding:74px var(--gutter) 80px}
  .fundadores-detalle__inner{gap:86px}
  .fundador-largo        {grid-template-columns:minmax(0,236px) minmax(0,560px);column-gap:44px}
  .fundador-largo--miguel{grid-template-columns:minmax(0,560px) minmax(0,236px)}
  .rail__firma{width:98px;height:55px}
  .fundador-largo--miguel .rail__firma{width:136px}
  .fundador-largo h2{font-size:31px}
  .fundador-largo__texto p{font-size:16px;line-height:1.6}
  .fundador-largo__texto p:first-child{font-size:20px}
}

/* ---------- fundadores · mobile: el pliegue gira ---------- */
@media (max-width:809px){
  .fundadores-hero{--borde-fund:24px;padding:calc(var(--nav-h) + 40px) var(--borde-fund) 52px;gap:28px}
  .fundadores-hero::before{display:none}
  /* UN SOLO EJE. En escritorio el titulo va centrado porque preside un
     diptico simetrico; aca abajo el diptico se deshizo y los dos fundadores
     cuelgan de una linea vertical a la izquierda, asi que un titulo centrado
     deja la seccion con dos ejes peleando. Se alinea a la izquierda, contra
     el mismo borde del que arranca esa linea. */
  .fundadores-hero__cabecera{text-align:left;align-self:stretch}
  /* El cuerpo lo fija la linea mas larga -"DOS MENDOCINOS."- contra el ancho
     mas angosto. Medido en el navegador con las metricas reales de
     Baskervville: a 320px de pantalla quedan 272px utiles y esa linea mide
     262px a 26px de cuerpo y 272px a 27px, o sea justo en el limite. De ahi
     el minimo de 26. El tope de 32 es el punto en que, a 375px, todavia
     sobran 6px. NADA de max-width en ch: con 15ch la linea se partia en tres
     renglones, que es peor que el problema que venia a resolver. */
  .fundadores-hero__titulo{font-size:clamp(26px,7.6vw,32px);line-height:1.06}

  /* la costura deja de ser un pliegue entre dos hojas y pasa a ser el lomo
     de una secuencia: los dos cuelgan de la misma línea, uno tras otro. */
  .fundadores-duo{
    display:block;max-width:none;
    padding-left:26px;border-left:1px solid rgba(143,107,70,.38);
  }
  /* el retrato sale del lomo y va a sangre: es el único momento en vertical
     en que los dos vuelven a estar juntos en un mismo plano. Sin 100vw: con
     la suma exacta no hay desborde ni aunque haya barra de scroll. */
  /* EL MISMO AIRE DE LOS DOS LADOS. Antes tenia 0 arriba y 28 abajo, asi que
     la foto chocaba contra el final de la resena de Marcelo y despues dejaba
     un hueco antes de la de Miguel: la de Miguel parecia tener mas margen.
     Los 34px son el mismo gap que usa la rejilla en escritorio. */
  .fundadores-duo__foto{
    margin:34px 0 34px calc((26px + var(--borde-fund)) * -1);
    width:calc(100% + 26px + var(--borde-fund) * 2);
  }
  .fundadores-duo__foto img{width:100%;height:auto;aspect-ratio:760 / 1142}
  .fundadores-duo__pie{margin:14px var(--borde-fund) 0}

  .fundador{max-width:none;padding-top:0;text-align:left;align-items:flex-start}
  .fundador__firma{height:34px}
  /* el diente que engancha cada uno al lomo */
  .fundador--marcelo .fundador__nombre::after,
  .fundador--miguel  .fundador__nombre::after{
    left:auto;right:100%;margin-left:0;margin-right:9px;width:17px;
  }
  .fundador__bio{font-size:15px;line-height:1.55}

  /* UN SOLO VALOR DE AIRE. Habia tres: 48px antes de Marcelo, 60 entre los
     dos y 56 despues de Miguel. Como el hueco de entrada al tramo y el que
     separa a los dos hombres caen uno arriba del otro al scrollear, los 12px
     de diferencia se leen como que el bloque de Miguel arranca con mas
     margen que el de Marcelo. Los tres pasan a 56. */
  .fundadores-detalle{padding:56px 24px}
  .fundadores-detalle__inner{gap:56px}
  /* se acaba el espejo: es secuencia */
  .fundador-largo,
  .fundador-largo--miguel{display:block}
  .fundador-largo__rail,
  .fundador-largo--miguel .fundador-largo__rail{
    position:static;align-items:flex-start;text-align:left;margin-bottom:28px;
  }
  .rail__firma{width:89px;height:50px}
  .fundador-largo--miguel .rail__firma{width:124px}
  @supports ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
    .fundador-largo--miguel .rail__firma{-webkit-mask-position:left center;mask-position:left center}
  }
  .fundador-largo h2{font-size:29px;margin-top:16px}
  .hitos b{font-size:25px}
  .fundador-largo__texto{gap:1.1em}
  .fundador-largo__texto p{font-size:16px;line-height:1.6}
  .fundador-largo__texto p:first-child{font-size:19px;line-height:1.48}
  .fundador-largo__texto p.golpe{font-size:22px}
}

/* ---------- buscador de recursos (solo /trade) ----------
   Vive DENTRO de .recursos a proposito: --rec-ficha, --rec-suave, --rec-borde
   y compania se declaran en .recursos{} y no en :root. Una regla escrita
   fuera del tramo se computa sin valor y la declaracion se cae entera: es lo
   mismo que le paso a .red-form con --reg-borde, que dejo los campos sin
   borde hasta que se le puso color propio.

   El bloque nace apagado y lo prende el JS, no el hook .js del <html>. La
   diferencia importa: si el indice no parsea, el campo no aparece. Un
   buscador que no filtra es peor que no tener buscador. */
/* Al ancho completo del riel, a plomo con la rejilla de tarjetas de abajo.
   Probe acotarlo a 560px con el argumento de que un input largo se lee como
   una franja y no como un campo; al verlo, el corte dejaba la cabecera
   desbalanceada contra la rejilla de 1100 y se descarto. El peso visual que
   le faltaba se resuelve con el borde y el foco, no angostandolo. */
.rec-busca{display:none;margin:0 0 var(--rec-e5)}
/* (0,2,0) contra (0,1,0): gana sin !important. Contar los pesos es la
   diferencia entre que esto ande y que no ande. */
.rec-busca.is-lista{display:block}

/* al estandar del tramo: 10px con .24em y en el oro, igual que
   .recursos__eyebrow y .recursos__label. Estaba un escalon por debajo. */
.rec-busca__label{
  display:block;margin:0 0 9px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rec-acento);
}

/* La caja entera es lo que la persona lee como "el campo": la lupa y la
   crucecita estan adentro, asi que el foco se dibuja aca y no sobre el
   <input> pelado, que esta 14px mas adentro. */
/* EL TRAZO. Aca habia `border:1px solid var(--rec-campo)` y --rec-campo NO
   ESTA DEFINIDA EN NINGUN LADO: como border es un shorthand, la declaracion
   entera se invalidaba y border-style volvia a none. El campo no tenia borde,
   solo la sombra al 4%, que sobre blanco no se ve. Por eso no destacaba.

   Va en --brown-tinta, que da 5.14:1 sobre el blanco del campo: pasa de
   sobra el 3:1 que pide WCAG 1.4.11 para el limite de un componente. Es un
   escalon mas fuerte que el de las tarjetas -rgba(143,107,70,.38), 1.66:1-
   y eso es a proposito: la tarjeta es una superficie para mirar y el campo
   es el unico lugar de la pagina donde hay que escribir. */
.rec-busca__campo{
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--rec-ficha);
  border:1.5px solid var(--brown-tinta);border-radius:6px;
  box-shadow:var(--rec-sombra);
  transition:border-color var(--t-corta) var(--curva),box-shadow var(--t-corta) var(--curva);
}
/* el hover oscurece; con el reposo ya en --brown-tinta, ir al acento
   #7A5733 sigue siendo un escalon hacia abajo (6.48:1) */
.rec-busca__campo:hover{border-color:var(--rec-acento)}
.rec-busca__campo:focus-within{
  border-color:var(--rec-acento);
  outline:2px solid var(--rec-acento);outline-offset:2px;
}
.rec-busca__lupa{flex:none;display:grid;place-items:center;color:var(--rec-acento)}
.rec-busca__lupa svg{width:17px;height:17px}

.rec-busca__input{
  flex:1 1 auto;min-width:0;
  padding:13px 0;border:0;background:transparent;color:var(--rec-tinta);
  font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.4;
}
.rec-busca__input:focus{outline:none}          /* el anillo lo pone la caja */
/* Firefox le mete opacidad propia al placeholder y lo baja del ratio medido */
.rec-busca__input::placeholder{color:var(--rec-suave);opacity:1}
/* WebKit dibuja su propia crucecita: con la nuestra al lado quedarian dos */
.rec-busca__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.rec-busca__limpiar{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  padding:0;border:0;border-radius:999px;background:transparent;
  color:var(--rec-suave);cursor:pointer;
  transition:color var(--t-corta) var(--curva),background-color var(--t-corta) var(--curva);
}
.rec-busca__limpiar:hover{color:var(--rec-tinta);background:var(--rec-hover)}
.rec-busca__limpiar:focus-visible{outline:2px solid var(--rec-acento);outline-offset:2px}
.rec-busca__limpiar svg{width:13px;height:13px}

/* mas corta y mas apagada: el placeholder ya da los ejemplos, asi que
   repetirlos abajo era decir dos veces lo mismo y sumaba un renglon */
.rec-busca__ayuda{
  margin:7px 0 0;
  font-family:var(--ui);font-weight:300;font-size:11.5px;line-height:1.45;color:var(--rec-suave);
}

/* ---------- resultados ----------
   El conteo reusa .recursos__label y cae donde estaba "Categorias", asi la
   lista arranca a la misma altura a la que arrancaba la rejilla y nada se
   corre al tipear. */
.rec-busca__conteo{margin-bottom:var(--rec-e3)}
.rec-res{display:flex;flex-direction:column;gap:var(--rec-e2)}

/* Mismo lenguaje que .rec-item pero mas bajo: el resultado es un atajo, no
   la ficha del recurso. Sin icono propio a proposito: el rotulo de la
   derecha dice a que pagina cae, que es lo que hace falta para decidir el
   clic; un icono repetido no aporta nada. */
.rec-res__item{
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  background:var(--rec-ficha);border:1px solid var(--rec-borde);border-radius:6px;
  box-shadow:var(--rec-sombra);color:var(--rec-tinta);text-decoration:none;
  transition:border-color var(--t-corta) var(--curva),box-shadow var(--t-corta) var(--curva),
             background-color var(--t-corta) var(--curva);
}
.rec-res__item:hover{
  border-color:var(--rec-tinta);background:var(--rec-hover);box-shadow:var(--rec-sombra-fila);
}
.rec-res__texto{flex:1 1 auto;min-width:0}
.rec-res__titulo{
  display:block;
  font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.2;
  letter-spacing:.04em;text-transform:uppercase;color:var(--rec-tinta);
}
.rec-res__meta{
  display:block;margin-top:5px;
  font-family:var(--ui);font-weight:300;font-size:12px;line-height:1.45;color:var(--rec-suave);
}
/* los tres archivos de un vino: sin esto, buscar "etiqueta" devuelve siete
   nombres de vino y no se entiende por que matchearon */
.rec-res__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.rec-res__chips:empty{display:none}
.rec-res__chip{
  padding:2px 8px;border-radius:999px;
  background:var(--rec-hover);color:var(--rec-acento);
  font-family:var(--ui);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.rec-res__donde{
  flex:none;
  font-family:var(--ui);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rec-acento);white-space:nowrap;
}
.rec-res__flecha{
  flex:none;color:var(--rec-suave);
  transition:transform var(--t-corta) var(--curva),color var(--t-corta) var(--curva);
}
.rec-res__item:hover .rec-res__flecha{color:var(--rec-tinta);transform:translateX(4px)}
.rec-res__flecha svg{width:16px;height:16px;display:block}

/* ---------- sin resultados ---------- */
.rec-vacio{
  padding:28px 24px;text-align:center;
  /* mismo bug que el campo: --rec-campo no existe y el punteado no se
     dibujaba. Va en --rec-borde, que es el trazo de las tarjetas. */
  background:var(--rec-ficha);border:1px dashed var(--rec-borde);border-radius:6px;
}
.rec-vacio__titulo{
  margin:0 0 8px;
  font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rec-tinta);
}
.rec-vacio__texto{
  margin:0 auto 18px;max-width:430px;
  font-family:var(--ui);font-weight:300;font-size:13px;line-height:1.55;color:var(--rec-suave);
}
/* En el resto del tramo .rec-btn es un <a>; aca es un <button> para que el
   interceptor de transicion de pagina -que engancha a[href] y navega a los
   520ms- ni lo mire. */
.rec-vacio__volver{cursor:pointer}
.rec-vacio__volver:focus-visible{outline:2px solid var(--rec-acento);outline-offset:3px}

/* El atributo hidden lo pisa CUALQUIER display de autor: .rec-cats trae
   display:grid (0,1,0) y se seguia viendo con hidden puesto. Este selector
   pesa (0,2,0) -una clase y un atributo- y gana sin !important. Sin esta
   linea el buscador parece andar y la rejilla nunca se va. */
.recursos [hidden]{display:none}

/* ---------- destino de un enlace del buscador ----------
   El nav es fijo y taparia la fila. En escritorio mide 97px literales:
   --nav-h solo existe dentro de las media queries, aca no se puede usar. */
.rec-acc[id],
.rec-item[id]{scroll-margin-top:calc(97px + 28px)}
/* que se vea cual es la fila a la que te trajo el buscador */
.rec-acc:target,
.rec-item:target{border-color:var(--rec-acento);box-shadow:var(--rec-sombra-alta)}

/* ===========================================================
   CENTRO DE RECURSOS (área comercial y prensa)
   Tramo claro con la filigrana de los Andes. Cada categoría
   es una página propia, no una vista de JavaScript.
   =========================================================== */
.recursos{
  /* fichas de color del tramo. Todos pasan AA (>=4.5:1) sobre los tres
     fondos que convivan aca: #fff, #F7F4EF y el #F3ECD8 del hover. */
  --rec-tinta:#1a1a1a;     /* titulos                    */
  --rec-suave:#6B6459;     /* metadatos y migas          */
  --rec-lead:#4a4a4a;      /* bajada de la cabecera      */
  --rec-acento:#7A5733;    /* volantas, conteos          */
  --rec-borde:rgba(143,107,70,.38);
  /* superficies. Estan como fichas para poder dar vuelta el tramo
     entero a fondo negro sin tocar ninguna otra regla. */
  --rec-fondo:#F7F4EF;                     /* el tramo                 */
  --rec-ficha:#fff;                        /* tarjetas y filas         */
  --rec-hover:#F3ECD8;                     /* tarjeta y summary activos*/
  --rec-anidado:#FAF6EE;                   /* cuerpo del acordeon      */
  --rec-anidado-hover:rgba(255,255,255,.55);
  --rec-filete:rgba(143,107,70,.26);       /* separadores internos     */
  --rec-filete-suave:rgba(143,107,70,.18);
  --rec-migas-sep:rgba(26,26,26,.28);
  --rec-pend:rgba(107,100,89,.55);         /* borde del boton inerte   */
  --rec-sombra:0 1px 2px rgba(26,26,26,.04);
  --rec-sombra-alta:0 8px 22px rgba(26,26,26,.08);
  --rec-sombra-fila:0 4px 14px rgba(26,26,26,.05);
  --rec-sombra-acc:0 10px 28px rgba(26,26,26,.07);

  /* escala de espaciado vertical. Un hueco = un escalon, siempre el mismo
     en las 8 paginas. Antes convivian 46 y 52px para el MISMO salto entre
     grupos, y el aire antes de "Volver" valia 64px en /trade/vinos y 110px
     en las otras seis. */
  --rec-e2:12px;   /* entre filas de una lista        */
  --rec-e3:20px;   /* rotulo de grupo -> su lista     */
  --rec-e4:48px;   /* entre grupos                    */
  --rec-e5:40px;   /* cabecera -> primer bloque       */
  --rec-e6:96px;   /* ultimo bloque -> volver         */

  position:relative;overflow:hidden;
  background:var(--rec-fondo);color:var(--rec-tinta);
  /* 104px de aire bajo el nav era el mas generoso del sitio: /novedades
     abre con 76 y la ficha de vino con 56. Con 76 el titulo cae a la misma
     altura al saltar de /novedades a /trade, y el pliegue ya muestra
     tarjetas en vez de solo cabecera. El literal 97px es a proposito:
     --nav-h solo existe dentro de las media queries. */
  padding:calc(97px + 76px) var(--gutter) 112px;
}
.recursos::before{
  content:"";position:absolute;inset:0 0 auto 0;height:600px;
  background:url("../img/filigrana-andes-pelleriti-priore.webp?v=271") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 100%);
  mask-image:linear-gradient(#000 40%,transparent 100%);
  pointer-events:none;
}
.recursos__inner{position:relative;width:min(1100px,100%);margin:0 auto}

/* ---------- cabecera de pagina ----------
   Ritmo 32/12/24: la ruta se despega, la volanta se pega a su titulo
   (son una unidad) y el titulo respira antes de la bajada. Antes los
   tres huecos median casi lo mismo y los cuatro niveles se leian como
   un solo bloque. Escala tomada del resto del sitio:
   volanta = .ficha__coleccion, titulo = .ficha__titulo h1,
   bajada = .ficha__texto p. */
/* La ruta abre la pagina, a plomo con la volanta y el titulo. Antes iba
   arriba a la derecha y quedaba a 830px del titulo, flotando sobre la
   filigrana sin relacion con nada. Sigue PRIMERA en el DOM, que ya era lo
   correcto para el orden de lectura y de tabulado. */
.recursos__cab{
  display:flex;align-items:flex-start;justify-content:space-between;
  /* envuelve para que las migas, que ahora van primeras y a todo el ancho,
     se lleven su propia fila en vez de empujar a la volanta al costado.
     El gap de fila es 0: la separacion la pone el margin de .ficha__migas,
     que asi se puede ajustar sin tocar el de las columnas. */
  flex-wrap:wrap;gap:0 48px;
  margin:0 0 var(--rec-e5);
}
.recursos__cab-texto{flex:1 1 auto;min-width:0}
/* flex-basis 100% para que se lleve su propia fila; order -1 para que salga
   primera aunque el margen la separe del resto. */
.recursos__cab .ficha__migas{order:-1;flex:0 0 100%;margin:0 0 20px;padding-top:0}
.recursos__cab .migas__ruta{justify-content:flex-start}
.recursos__lead{margin-bottom:0}
/* La volanta del sitio es una sola pieza: Outfit 600 a 10px con tracking
   ancho, en el marron. Estaba a 9.5/.22 y quedaba un escalon por debajo de
   .nov__volanta y .red-prensa__mes sin que nada lo justificara. */
.recursos__eyebrow{
  margin:0 0 10px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rec-acento);
}
/* Georgia es el display del lado NEGRO (.ficha__titulo h1). En los paneles
   crema el sitio usa Baskervville: .nov__titular, .art__titulo,
   .red-portafolio__titulo y .red-prensa__titulo son todos var(--body) 400,
   versalita, con tracking. Al pasar este tramo a crema el titulo tiene que
   ir ahi tambien, y con cuerpo de display: a 31px se leia como un h2.
   El peso queda en 400 porque Baskervville NO trae otro archivo: pedir 500
   o 600 dispara la negrita sintetica. */
.recursos__titulo{
  margin:0 0 20px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(28px,3.1vw,40px);line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--rec-tinta);
}
/* 1.38 venia de .ficha__texto, que es texto sobre negro y por eso va
   apretado. Sobre crema el sitio afloja: .nov__lead va 1.7 y .art__bajada
   1.6. Si hace falta dejar la cabecera plana en alto, esta linea es la que
   vuelve a 1.45 y devuelve ~5px. */
.recursos__lead{
  margin:0;max-width:560px;
  font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.6;color:var(--rec-lead);
}
/* mismo rotulo que .recursos__eyebrow: es la misma jerarquia. Pasa del gris
   al marron porque en este sitio la volanta SIEMPRE es marron
   (.nov__fuente, .red-familia__titulo, .art__meta), y ademas gana contraste:
   5.33:1 -> 5.91:1 sobre el crema. */
.recursos__label{
  display:flex;align-items:center;gap:12px;margin:0 0 var(--rec-e3);
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rec-acento);
}
/* el filete del sitio va mas bajo que .38: .nov usa .16 y .red-prensa .22.
   --rec-filete (.26) ya existe dentro de .recursos y es el valor correcto. */
.recursos__label::after{content:"";flex:1 1 auto;height:1px;background:var(--rec-filete)}

/* ---------- migas sobre fondo claro ----------
   Antes iban al 50% de negro (3.1:1, por debajo de AA) y todos los
   escalones pesaban igual. Ahora el actual destaca sobre los previos. */
/* las migas pesaban 300 y se perdian; suben a 500 como el resto de la
   interfaz del tramo, y el escalon actual manda sobre los previos */
/* mismo cuerpo y tracking que las volantas del tramo, para que la cabecera
   tenga una sola voz chica en vez de dos parecidas pero distintas */
.recursos .migas__ruta a,
.recursos .migas__ruta span{font-size:10px;font-weight:600;letter-spacing:.2em}
.recursos .migas__ruta a{color:var(--rec-suave)}
.recursos .migas__ruta a:hover{color:var(--rec-tinta)}
.recursos .migas__ruta [aria-current]{color:var(--rec-tinta);font-weight:500}
.recursos .migas__ruta li:not(:last-child)::after{background:var(--rec-migas-sep)}

/* ---------- rejilla de categorias ----------
   flex-start (no space-between): las descripciones envuelven en distinto
   numero de lineas segun el ancho, y asi los titulos quedan siempre
   alineados entre tarjetas de la misma fila. */
/* minmax(0,1fr) y no 1fr: 1fr es minmax(auto,1fr), y el min-content de
   RECONOCIMIENTOS ensanchaba su columna (184px contra 123px en telefono) */
.rec-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rec-cat{
  display:flex;flex-direction:column;justify-content:flex-start;gap:22px;
  /* El padding HORIZONTAL no se toca: los 24px dejan la caja de texto en
     212px, que es lo que hace que la descripcion mas larga (67 caracteres)
     parta en 2 lineas justas. Tocarlo cambia el reflujo y el alto deja de
     ser predecible. Lo vertical si: 26+26 de padding para 128px de
     contenido era casi un tercio de la tarjeta en aire.
     min-height baja a 130 porque 158 se volvia el piso y anulaba el recorte;
     a 130 solo actua cuando TODA la fila tiene descripcion de una linea. */
  min-height:130px;padding:18px 24px;
  background:var(--rec-ficha);border:1px solid var(--rec-borde);border-radius:6px;
  box-shadow:var(--rec-sombra);
  color:var(--rec-tinta);text-decoration:none;
  transition:border-color var(--t-corta) var(--curva),box-shadow var(--t-corta) var(--curva),
             transform var(--t-corta) var(--curva),background-color var(--t-corta) var(--curva);
}
.rec-cat:hover{
  border-color:var(--rec-tinta);background:var(--rec-hover);
  box-shadow:var(--rec-sombra-alta);transform:translateY(-2px);
}
.rec-cat__top{display:flex;align-items:center;justify-content:space-between;flex:none}
.rec-cat__texto{flex:1 1 auto}
/* .rec-cat__top no tiene alto propio: mide lo que mide este aro (la flecha
   son 18px y nunca manda). Bajarlo de 38 a 32 saca 6px limpios del alto de
   la tarjeta sin tocar ningun texto. El svg acompaña para que el aire
   interior del aro siga siendo el mismo (7px por lado). */
.rec-cat__icono{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--rec-borde);border-radius:999px;color:var(--rec-acento);
}
.rec-cat__icono svg{width:18px;height:18px}
.rec-cat__flecha{color:var(--rec-suave);transition:transform var(--t-corta) var(--curva),color var(--t-corta) var(--curva)}
.rec-cat:hover .rec-cat__flecha{color:var(--rec-tinta);transform:translateX(4px)}
.rec-cat__flecha svg{width:18px;height:18px;display:block}
/* Baskervville en vez de Georgia, por lo mismo que el titulo de pagina: es
   la serif de los paneles crema. Mismo cuerpo, mismo line-height, asi que
   NO cambia ni un px de alto: es un cambio de voz, no de caja. */
.rec-cat__nombre{
  display:block;margin:0 0 6px;
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;
}
/* 1.45 no es un valor nuevo: es el que ya usaba esta misma clase en el
   bloque de mobile. Ahora vale en los tres anchos y son 2.6px menos en las
   dos lineas de la descripcion mas larga. */
.rec-cat__desc{
  display:block;margin:0;
  font-family:var(--ui);font-weight:300;font-size:13px;line-height:1.45;color:var(--rec-suave);
}

/* ---------- titulos de grupo ----------
   Mismo Bentham que los titulos de coleccion en /vinos. El conteo evita
   que el encabezado sea solo una palabra suelta y dice que hay debajo. */
.rec-grupo{margin-bottom:var(--rec-e4)}
/* :last-of-type, no :last-child: el ultimo hijo de .recursos__inner es
   el enlace "Volver", asi que con :last-child el margen nunca se anulaba
   y se sumaba a los 96px del enlace. */
.rec-grupo:last-of-type{margin-bottom:0}
.rec-grupo__titulo,
.rec-coleccion{
  display:flex;align-items:baseline;gap:14px;margin:0 0 var(--rec-e3);
  font-family:"Bentham","Bentham Placeholder",Georgia,serif;font-weight:400;
  font-size:23px;line-height:1.1;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rec-tinta);
}
/* Mismo peso y tracking que .recursos__eyebrow y .nov__fuente: es el mismo
   nivel de rotulo. Outfit 600 existe como archivo, no hay negrita sintetica. */
.rec-conteo{
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rec-acento);
  white-space:nowrap;
}
.rec-lista{display:flex;flex-direction:column;gap:var(--rec-e2)}
/* las colecciones van una tras otra sin contenedor propio:
   sin esto el titulo siguiente queda pegado a la ultima ficha */
.rec-lista + .rec-coleccion{margin-top:var(--rec-e4)}

/* ===========================================================
   LA FILA: un unico componente
   La cabecera del acordeon (un vino) y la fila suelta (un documento)
   son el mismo escalon de jerarquia, asi que comparten caja, sangria,
   tipografia y alto. Antes el acordeon media 128px con titulo Georgia
   de 25px y la fila 77px con titulo Outfit de 12px: el mismo nivel
   se veia al doble de tamaño segun la pagina.
   =========================================================== */
.rec-item,
.rec-acc > summary{
  display:flex;align-items:center;gap:16px;
  padding:20px 20px 20px 22px;
}
/* blanco sobre crema son 1.06:1 y el borde 1.5:1: la ficha apenas se
   despegaba del fondo. Una sombra muy baja la define sin oscurecer lineas. */
.rec-item{
  background:var(--rec-ficha);border:1px solid var(--rec-borde);border-radius:6px;
  box-shadow:var(--rec-sombra);
  transition:border-color var(--t-corta) var(--curva),box-shadow var(--t-corta) var(--curva);
}
.rec-item:hover{border-color:var(--rec-tinta);box-shadow:var(--rec-sombra-fila)}

/* La botella es 1:4: el hueco mantiene el ancho del icono (30px) para que
   la sangria del texto siga siendo 69px como en las otras seis paginas, y
   crece solo hacia abajo. object-fit:contain la encaja sin deformarla. */
/* Este es el px que mas pesa de todo el tramo. El acordeon cerrado mide
   126px y NO es por el padding (ya esta en 14): es esta foto de 96px contra
   43px de contenido real. A 72px el acordeon cae a 102 y son 168px menos en
   /trade/vinos, la pagina mas larga del area.
   El width se queda en 30px a proposito: de el sale la sangria del nombre
   del vino. Con object-fit:contain la botella se acomoda dentro (pinta
   22.5x72) y sigue centrada, no se deforma. */
.rec-acc__foto{
  flex:none;width:30px;height:72px;
  object-fit:contain;object-position:center;
}
.rec-acc > summary{padding-top:14px;padding-bottom:14px;align-items:center}

.rec-item__icono{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  color:var(--rec-acento);
}
.rec-item__icono svg{width:22px;height:22px;display:block}

.rec-item__cuerpo{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.rec-item__texto,
.rec-acc__info{flex:1 1 auto;min-width:130px}

/* un solo estilo de titulo de fila en las 7 paginas */
/* Baskervville, igual que el titulo de pagina y el nombre de tarjeta: un
   solo display para todo el tramo. Cuerpo y line-height intactos, asi que
   el cambio de familia no mueve el alto. */
.rec-item__titulo,
.rec-acc__nombre{
  margin:0 0 4px;
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.15;
  letter-spacing:.04em;text-transform:uppercase;color:var(--rec-tinta);
}
/* 1.4 y no 1.5: es un renglon suelto de 12px, no un parrafo. Son 1.2px por
   fila y ademas junta el metadato con su titulo, que es lo que se busca. */
.rec-item__meta,
.rec-acc__meta{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:12px;line-height:1.4;
  letter-spacing:0;text-transform:none;color:var(--rec-suave);
}
.rec-item__archivos{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- botones ---------- */
.rec-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--rec-tinta);background:transparent;color:var(--rec-tinta);
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-corta) var(--curva),color var(--t-corta) var(--curva);
}
.rec-btn:hover{background:var(--rec-tinta);color:var(--cream)}
.rec-btn svg{width:11px;height:11px}
/* archivo todavia no cargado: se distingue por el borde punteado, no por
   destenir el texto (antes quedaba en 2.73:1, ilegible) */
.rec-btn--pendiente{
  border-style:dashed;border-color:var(--rec-pend);
  color:var(--rec-suave);cursor:default;
}
.rec-btn--pendiente:hover{background:transparent;color:var(--rec-suave)}

/* ---------- acordeon de vinos ---------- */
.rec-acc{
  background:var(--rec-ficha);border:1px solid var(--rec-borde);border-radius:6px;overflow:hidden;
  box-shadow:var(--rec-sombra);
  transition:border-color var(--t-corta) var(--curva),box-shadow var(--t-corta) var(--curva);
}
.rec-acc[open]{border-color:var(--rec-tinta);box-shadow:var(--rec-sombra-acc)}
.rec-acc > summary{
  list-style:none;cursor:pointer;
  transition:background-color var(--t-corta) var(--curva);
}
.rec-acc > summary::-webkit-details-marker{display:none}
.rec-acc > summary::marker{content:""}
.rec-acc > summary:hover{background:var(--rec-hover)}
.rec-chev{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--rec-borde);border-radius:999px;color:var(--rec-suave);
  transition:transform var(--t-media) var(--curva),border-color var(--t-corta) var(--curva),
             background-color var(--t-corta) var(--curva),color var(--t-corta) var(--curva);
}
.rec-acc[open] .rec-chev{transform:rotate(180deg);border-color:var(--rec-tinta);background:var(--rec-hover);color:var(--rec-tinta)}
.rec-chev svg{width:13px;height:13px}

/* ---------- segundo nivel: los archivos de un vino ----------
   Son hijos de una fila, no pares suyos: bajan un escalon de tamaño
   para que al abrir el acordeon se lea la pertenencia. */
/* padding-left 22 + borde 1 + padding 11 + icono 22 + gap 12 = 68px:
   el nombre del archivo cae exactamente bajo el nombre del vino */
/* Los archivos van a sangre dentro del acordeon, sin ficha propia: asi
   heredan los mismos ejes que la cabecera (icono a 22px, borde derecho a
   21px) en vez de quedar 15px adentro y dentar los dos rieles.
   El tinte anterior, #FCFBF8, daba 1.03:1 contra el blanco: invisible. */
.rec-acc__cuerpo{
  padding:0;display:flex;flex-direction:column;gap:0;background:var(--rec-anidado);
}
.rec-acc__cuerpo::before{
  content:"";display:block;height:1px;background:var(--rec-filete);margin:0;
}
.rec-acc__cuerpo .rec-item{
  padding:13px 20px 13px 22px;gap:12px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
.rec-acc__cuerpo .rec-item + .rec-item{border-top:1px solid var(--rec-filete-suave)}
.rec-acc__cuerpo .rec-item:hover{box-shadow:none;background:var(--rec-anidado-hover)}
.rec-acc__cuerpo .rec-item__icono{width:22px;height:22px}
.rec-acc__cuerpo .rec-item__icono svg{width:17px;height:17px}
.rec-acc__cuerpo .rec-item__titulo{
  margin:0 0 3px;
  font-family:var(--ui);font-weight:500;font-size:11.5px;line-height:1.3;
  letter-spacing:.16em;
}
.rec-acc__cuerpo .rec-item__meta{font-size:11.5px}
.rec-acc__cuerpo .rec-btn{padding:7px 13px}

/* ---------- distintivos ----------
   Van en la MISMA linea que el metadato. Apilados encima del titulo
   le sumaban 28px de alto solo a la fila que llevaba distintivo y
   rompian la uniformidad del listado. */
.rec-acc__pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec-badges{display:flex;gap:6px;flex-wrap:wrap}
.rec-badge{
  display:inline-block;padding:1px 9px;border-radius:999px;
  background:#f5e6e6;color:#6b1a1a;border:1px solid #e0c4c4;
  font-family:var(--ui);font-size:10px;font-weight:500;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;
}
.rec-badge--cult{background:#eaf1e0;color:#3d5a2e;border-color:#c9d9b8}
.rec-badge--pinnacle{background:#f5eccc;color:#7a5a1a;border-color:#dcc893}
.rec-badge--nuevo{background:var(--rec-tinta);color:var(--cream);border-color:var(--rec-tinta)}

/* ---------- foco de teclado ----------
   El sitio no declara ninguno. Aca hace falta: el tramo es una lista larga
   de enlaces y acordeones que se recorre con Tab. Va acotado a .recursos
   para no cambiar el resto del sitio sin pedirlo. */
.recursos a:focus-visible,
.recursos summary:focus-visible{
  outline:2px solid var(--rec-acento);
  outline-offset:3px;
  border-radius:6px;
}
/* .rec-acc recorta con overflow:hidden para redondear el acordeon abierto,
   lo que se comia el anillo de su propio summary: se dibuja hacia adentro */
.rec-acc > summary:focus-visible{outline-offset:-3px}

/* ---------- volver al indice ---------- */
.rec-volver{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--rec-e6);
  font-family:var(--ui);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rec-suave);
  transition:color var(--t-corta) var(--curva);
}
/* los iconos se generan sin width/height: sin esto el svg se estira
   y aplasta el texto del enlace */
.recursos svg{flex:none}
.rec-volver svg{width:18px;height:18px;overflow:visible;transition:transform var(--t-media) var(--curva)}
.rec-volver:hover{color:var(--rec-tinta)}
.rec-volver:hover svg{transform:translateX(-4px)}

/* ---------- recursos · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .recursos{padding:calc(var(--nav-h) + 62px) var(--gutter) 92px;
    --rec-e3:18px; --rec-e4:40px; --rec-e5:34px; --rec-e6:68px;}
  .rec-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  /* 3 columnas = 3 filas para 7 tarjetas, asi que cada px vale el triple */
  .rec-cat{min-height:126px;padding:16px 20px;gap:12px}
  .rec-cat__icono{width:32px;height:32px}
  .rec-cat__icono svg{width:18px;height:18px}
}

/* ---------- recursos · mobile ---------- */
@media (max-width:809px){
  .recursos{padding:calc(var(--nav-h) + 44px) 28px 72px;
    --rec-e2:10px; --rec-e3:14px; --rec-e4:34px; --rec-e5:28px; --rec-e6:52px;}
  .recursos::before{height:380px}
  .recursos__eyebrow{margin-bottom:8px}
  .recursos__titulo{margin-bottom:16px}
  .recursos__label{margin-bottom:18px}
  .rec-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* En telefono el alto lo manda el reflujo de la descripcion (4 lineas a
     153px de columna), no el padding: por eso aca se saca menos que en
     escritorio. AREA TACTIL: la tarjeta mas chica posible -descripcion de
     una linea- da 108.5px y el min-height la deja en 112. Lejos de los 44
     que es el piso; el objetivo de toque nunca esta en riesgo. */
  .rec-cat{min-height:112px;padding:14px 16px;gap:12px}
  .rec-cat__icono{width:28px;height:28px}
  .rec-cat__icono svg{width:15px;height:15px}
  .rec-cat__nombre{margin-bottom:5px}
  .rec-cat__flecha svg{width:15px;height:15px}
  .rec-cat__nombre{font-size:14px;letter-spacing:.05em;margin-bottom:6px}
  .rec-cat__desc{font-size:12px;line-height:1.45}
  .rec-grupo__titulo,.rec-coleccion{font-size:19px;gap:10px}
  .rec-conteo{font-size:9px}
  /* En mobile la fila NO envuelve por fuera: si lo hace, la que tiene tres
     botones manda el icono a su propia linea (159px de alto, titulo a 15px)
     y la que tiene uno no (74px, titulo a 57px). El icono queda siempre al
     lado y es el cuerpo el que apila titulo / metadato / botones, asi todas
     las filas miden y sangran igual. */
  .rec-item,.rec-acc > summary{padding:13px 14px;gap:12px}
  .rec-acc > summary{padding-top:12px;padding-bottom:12px}
  /* misma logica que en escritorio: el alto del acordeon cerrado es la foto */
  .rec-acc__foto{height:60px}
  .rec-item__cuerpo{flex-direction:column;align-items:flex-start;gap:12px}
  .rec-item__archivos{justify-content:flex-start}

  /* En mobile la ficha de vino saca las migas del flujo (position:absolute,
     top fijo) porque ahi las reemplaza su boton "volver a vinos". El selector
     es global y el area comercial lo heredaba: la ruta aterrizaba ENCIMA de
     la bajada y ademas sin su left (--borde-ficha solo existe en .ficha).
     Aca se devuelven al flujo, arriba de todo, como en escritorio. */
  .recursos__cab{flex-direction:column;gap:0}
  .recursos__cab .ficha__migas{order:-1;padding-top:0}
  .recursos__cab .migas__ruta{justify-content:flex-start}
  .recursos .ficha__migas{
    position:static;top:auto;left:auto;z-index:auto;
    display:flex;margin:0 0 24px;
  }
  .recursos .migas__ruta{display:flex;flex-wrap:wrap;row-gap:4px}
  .rec-item__titulo,.rec-acc__nombre{font-size:15px;margin-bottom:4px}
  .rec-btn{padding:8px 13px}
  .rec-acc__cuerpo .rec-item{padding:13px 14px}
}

/* ===========================================================
   CENTRO DE RECURSOS · POR QUE NO HAY VARIANTE OSCURA
   Aca vivia un .tema-oscuro que daba vuelta el area entera a negro. Se
   fue: el lado descargable es el unico tramo del sitio donde uno se queda
   leyendo y comparando, y ahi el papel de la casa (#F7F4EF) rinde mas que
   el negro, que ademas era la ultima isla oscura del recorrido. Las 8
   paginas del area van con .tema-claro, igual que /vinos, y los valores
   por defecto de .recursos{} YA son los claros: no hace falta ninguna
   regla de color extra.
   Quedo huerfana img/filigrana-andes-pelleriti-priore-oscuro.webp (103 KB):
   era el unico archivo que la usaba.
   =========================================================== */

/* ===========================================================
   ACCESO A LA TIENDA (/comprar-argentina)
   Puerta de entrada del boton "Comprar Argentina". Dos columnas en
   escritorio: registro a la izquierda, portal de clientes a la derecha.
   Se apilan por debajo de 900px.
   =========================================================== */
.acceso{
  --acc-borde:rgba(143,107,70,.38);
  display:flex;align-items:center;justify-content:center;
  padding:calc(97px + 72px) var(--gutter) 96px;
  background:var(--black);
}
.acceso__caja{
  position:relative;
  width:min(940px,100%);
  /* el panel de ingreso puede necesitar mas alto que las dos columnas:
     js/ingreso.js le fija un min-height y la caja crece con la subida */
  transition:min-height .62s var(--curva);
  display:grid;grid-template-columns:1.12fr .88fr;
  border:1px solid var(--acc-borde);border-radius:10px;
  background:#0A0908;
  overflow:hidden;
}
/* Mismo reflejo giratorio que la tarjeta de tienda del menu movil: un
   conic-gradient enmascarado para que solo se vea sobre el trazo. Va en
   inset:0 y no en -1.5px porque la caja recorta con overflow:hidden.
   Si el navegador no anima @property, el reflejo queda quieto y el borde
   se sigue viendo igual. */
.acceso__caja::before,
.ingreso__caja::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    transparent 232deg,
    rgba(212,175,125,.55) 286deg,
    rgba(255,244,219,.95) 312deg,
    rgba(212,175,125,.55) 338deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:giroNeon 11s linear infinite;
  pointer-events:none;
  z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .acceso__caja::before,
  .ingreso__caja::before{animation:none}
}
.acceso__col{padding:52px 48px}
/* el filete que separa las dos columnas */
.acceso__col--portal{
  border-left:1px solid var(--acc-borde);
  background:rgba(143,107,70,.30);
  /* el bloque se centra contra la columna de registro, que es mas alta:
     con margin-top:auto el boton quedaba a 136px de su texto, a la deriva */
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}

/* --- tipografia: misma escala que el resto del sitio --- */
.acceso__eyebrow,
.ingreso__eyebrow{
  margin:0 0 14px;
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brown-claro);
}
.acceso__titulo,
.ingreso__titulo{
  margin:0 0 14px;
  font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.04;
  letter-spacing:.03em;text-transform:uppercase;color:var(--cream);
}
.acceso__lead,
.ingreso__lead{
  margin:0 0 30px;max-width:34ch;
  font-family:var(--ui);font-weight:300;font-size:14px;line-height:1.5;
  color:var(--muted);
}

/* --- las dos vias de registro --- */
.acceso__opciones{display:flex;flex-direction:column;gap:12px}
.acceso__opcion{
  display:flex;align-items:center;gap:18px;
  padding:20px 20px 20px 22px;border-radius:8px;
  border:1px solid var(--acc-borde);background:transparent;
  color:var(--cream);text-decoration:none;
  transition:border-color var(--t-corta) var(--curva),background-color var(--t-corta) var(--curva),
             transform var(--t-corta) var(--curva);
}
/* la via de comercio es la principal, como en el boceto */
.acceso__opcion--destacada{
  background:rgba(143,107,70,.17);
  border-color:rgba(143,107,70,.72);
}
.acceso__opcion:hover{
  border-color:var(--cream);background:rgba(255,244,219,.07);transform:translateY(-2px);
}
.acceso__icono{
  flex:none;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--acc-borde);border-radius:999px;color:var(--brown);
}
.acceso__icono svg{width:20px;height:20px}
.acceso__texto{flex:1 1 auto;min-width:0}
.acceso__nombre{
  display:block;margin-bottom:5px;
  font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.15;
  letter-spacing:.05em;text-transform:uppercase;color:var(--cream);
}
.acceso__desc{
  display:block;
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.45;
  color:var(--muted);
}
.acceso__flecha{flex:none;color:var(--muted);transition:transform var(--t-corta) var(--curva),color var(--t-corta) var(--curva)}
.acceso__flecha svg{width:18px;height:18px;display:block}
.acceso__opcion:hover .acceso__flecha{color:var(--cream);transform:translateX(4px)}

/* --- portal de clientes --- */
/* sobre el panel con color el marron de marca cae a 3.05:1: en esa
   columna la volanta usa un tono mas claro de la misma familia (5.69:1) */
.acceso__col--portal .acceso__eyebrow{color:#C29A6A}

.acceso__entrar{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  background:var(--cream);color:var(--black);
  font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;text-decoration:none;
  transition:opacity var(--t-corta) var(--curva);
}
.acceso__entrar:hover{opacity:.86}
.acceso__entrar-icono svg{width:15px;height:15px;display:block}
.acceso__entrar:hover .acceso__entrar-icono{transform:translateX(3px)}
.acceso__entrar-icono{transition:transform var(--t-corta) var(--curva)}

.acceso a:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:8px}

/* ---------- acceso · tablet ---------- */
@media (min-width:900px) and (max-width:1199px){
  .acceso{padding:calc(var(--nav-h) + 60px) var(--gutter) 80px}
  .acceso__col{padding:42px 36px}
  .acceso__titulo{font-size:25px}
}

/* ---------- acceso · apilado ---------- */
@media (max-width:899px){
  .acceso{padding:calc(var(--nav-h) + 48px) 28px 72px;align-items:flex-start}
  .acceso__caja{grid-template-columns:1fr;width:min(520px,100%)}
  .acceso__col{padding:34px 26px}
  /* apilado el filete pasa a ser horizontal */
  .acceso__col--portal{border-left:0;border-top:1px solid var(--acc-borde)}
  .acceso__titulo{font-size:24px}
  .acceso__lead{margin-bottom:24px;max-width:none}
  .acceso__opcion{padding:16px 16px 16px 18px;gap:14px}
  .acceso__icono{width:38px;height:38px}
  .acceso__nombre{font-size:15px}
  .acceso__col--portal{justify-content:flex-start}
  .acceso__entrar{width:100%;justify-content:center}
}

/* ===========================================================
   FILOSOFIA (/filosofia)
   Cuatro tiempos: la frase de apertura, la banda de fotos del oficio,
   la declaracion en serif y el desarrollo con la foto de los fundadores.
   =========================================================== */
.filosofia{
  position:relative;
  background:var(--black);
  /* 97px es el alto de la barra en escritorio. Va literal, no var(--nav-h),
     porque ese token solo esta definido dentro de los @media de tablet y
     mobile: en escritorio la variable no existe, el calc queda invalido y el
     padding se cae a cero. El resto del sitio (.ficha, .acceso) hace lo mismo. */
  padding:calc(97px + 74px) 0 78px;
  overflow-x:clip;   /* la banda desborda a proposito; clip no rompe el sticky */
}

/* ---- luz de fondo ----
   Dos focos calidos muy bajos que derivan y respiran en ciclos largos y
   distintos entre si, para que nunca vuelvan a la misma posicion relativa.
   Van en un elemento propio y no en un ::before porque el fondo negro de
   .filosofia taparia un pseudo con z-index negativo.

   La luz cuelga de .filo-escena -que envuelve la banda- y no de la seccion
   entera: asi queda centrada sobre las fotos por geometria, sin depender de
   cuanto ocupe el texto de arriba, que cambia con el ancho. El propio
   overflow:hidden contiene el desborde lateral de los focos; el alto de la
   caja es holgado para que los degradados se apaguen solos antes del borde
   y no se vea un corte. */
.filo-escena{position:relative;z-index:1}
.filo-luz{
  position:absolute;z-index:0;
  left:0;right:0;top:50%;
  height:min(860px, 300%);
  transform:translateY(-50%);
  overflow:hidden;pointer-events:none;
}
.filo-luz__foco{position:absolute;left:50%;top:50%;border-radius:50%;will-change:transform}
.filo-luz__foco--a{
  width:min(1400px,150%);aspect-ratio:2 / 1;
  background:radial-gradient(closest-side,
    rgba(212,175,125,.17) 0%, rgba(184,140,92,.075) 42%, transparent 72%);
  animation:derivaLuzA 41s ease-in-out infinite alternate;
}
.filo-luz__foco--b{
  width:min(1050px,120%);aspect-ratio:1.6 / 1;
  background:radial-gradient(closest-side,
    rgba(143,107,70,.13) 0%, rgba(143,107,70,.05) 45%, transparent 72%);
  animation:derivaLuzB 57s ease-in-out infinite alternate;
}
@keyframes derivaLuzA{
  from{transform:translate(-56%,-55%) scale(.92)}
  to  {transform:translate(-44%,-45%) scale(1.10)}
}
@keyframes derivaLuzB{
  from{transform:translate(-45%,-44%) scale(1.06)}
  to  {transform:translate(-57%,-56%) scale(.94)}
}
@media (prefers-reduced-motion:reduce){
  .filo-luz__foco{animation:none;transform:translate(-50%,-50%)}
}

/* ---- particulas ----
   Polvo en suspension: puntos diminutos que suben en diagonal y se encienden
   y apagan en el camino. Son degradados radiales y no circulos con blur,
   para que el borde salga suave sin montar un filtro por particula. Solo
   animan opacidad y transform, asi que van por el compositor. */
.filo-particulas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.filo-particulas span{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,244,219,.75), rgba(255,244,219,0));
  opacity:0;
  animation:particula var(--dur) linear var(--retardo) infinite;
}
@keyframes particula{
  0%  {opacity:0;          transform:translate3d(0,0,0)}
  16% {opacity:var(--op)}
  78% {opacity:var(--op)}
  100%{opacity:0;          transform:translate3d(var(--dx),var(--dy),0)}
}
@media (prefers-reduced-motion:reduce){
  /* quietas se leen como suciedad en la pantalla: mejor no ponerlas */
  .filo-particulas{display:none}
}

/* el contenido va por encima de la luz */
.filo-apertura,.filo-pacto,.filo-cierre{position:relative;z-index:1}

/* ---- 1. apertura ---- */
.filo-apertura{padding:0 var(--gutter) 58px}
.filo-apertura__texto{
  width:min(635px,100%);margin:0 auto;
  text-align:center;
}
.filo-apertura__texto p{
  margin:0;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:18px;line-height:1.4;
  /* el mismo gris suave del texto bajo el banner del home. Va en .5 y no en
     el .4 de alla porque aca es la entrada de la pagina y tiene que leerse:
     .5 da 4.93:1 sobre el negro, .4 se quedaba en 3.5:1 */
  color:rgba(255,244,219,.5);
}
/* las frases que el original marca: suben a crema pleno y contrastan contra
   el gris de alrededor */
.filo-apertura__texto strong{font-weight:700;color:var(--cream)}

/* ---- 2. la banda ----
   El lienzo mide 1200px y cada foto se coloca con --x/--y sobre el, como en
   una mesa de luz. La pista se centra y la banda recorta: es una composicion
   fija recortada, no un carrusel. El alto no depende del contenido para que
   los desfasajes verticales no muevan el resto de la pagina.

   overflow:clip y no auto: la banda ya no se arrastra de costado en ningun
   tamaño. Por eso tampoco lleva tabindex ni aro de foco -existian solo para
   poder desplazarla con el teclado- y sin scroll serian una parada muerta
   en el tabulador. */
.filo-banda{
  --alto-banda:281px;
  --lienzo:1200px;
  position:relative;z-index:1;
  height:var(--alto-banda);
  margin:0 0 62px;
  overflow:clip;
}
/* Centrado con left+margin negativo y NO con margin:0 auto. El lienzo es a
   proposito mas ancho que la pantalla, y cuando un bloque desborda a su
   contenedor los margenes auto se resuelven a cero: la pista quedaba pegada
   a la izquierda y en el telefono se veian las cuatro primeras fotos en vez
   de las del centro. Medido: desfase de 341px a 390px de ancho.
   Se evita transform:translateX(-50%) para no crear un bloque contenedor
   nuevo: los marcos son absolutos y el acordeon los lee con offsetLeft. */
.filo-banda__pista{
  position:absolute;top:0;
  left:50%;margin-left:calc(var(--lienzo) / -2);
  width:var(--lienzo);height:100%;
}
/* Tres capas, una por transform, porque cada una anima el suyo y con un solo
   elemento el ultimo pisaba a los otros:
     marco -> el acordeon que js/main.js calcula al scrollear (--abanico)
     velo  -> la entrada escalonada al cargar la pagina
     foto  -> el vaiven continuo, que es CSS puro */
.filo-banda__marco{
  position:absolute;
  left:var(--x);top:calc(50% + var(--y));
  width:var(--w);height:var(--h);
  transform:translate3d(var(--abanico,0px),-50%,0);
  will-change:transform;
}
.filo-banda__velo{
  display:block;width:100%;height:100%;
  animation:entradaFoto 1.5s var(--curva) var(--entrada,0s) both;
}
.filo-banda__foto{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* linear sobre una muestra de seno, y NO ease-in-out con alternate: con
     aquello la foto se frenaba varios segundos en cada extremo y la mitad de
     la serie parecia clavada. Asi ninguna deja de moverse nunca. */
  animation:flotar var(--dur,20s) linear var(--retardo,0s) infinite;
}
@keyframes entradaFoto{
  from{opacity:0;transform:translate3d(0,18px,0) scale(1.05)}
  to  {opacity:1;transform:none}
}
/* vaiven armonico: los pasos son sen(0°,45°,90°...360°) por la amplitud */
@keyframes flotar{
  0%   {transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(calc(var(--amp,7px) *  .707),0,0)}
  25%  {transform:translate3d(var(--amp,7px),0,0)}
  37.5%{transform:translate3d(calc(var(--amp,7px) *  .707),0,0)}
  50%  {transform:translate3d(0,0,0)}
  62.5%{transform:translate3d(calc(var(--amp,7px) * -.707),0,0)}
  75%  {transform:translate3d(calc(var(--amp,7px) * -1),0,0)}
  87.5%{transform:translate3d(calc(var(--amp,7px) * -.707),0,0)}
  100% {transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .filo-banda__foto,.filo-banda__velo{animation:none}
  .filo-banda__velo{opacity:1;transform:none}
  .filo-banda__marco{transform:translate3d(0,-50%,0)}
}

/* ---- 3. declaracion y desarrollo ---- */
.filo-pacto{
  padding:0 var(--gutter) 70px;
  display:flex;flex-direction:column;align-items:center;gap:34px;
}
.filo-pacto__titulo{
  width:min(518px,100%);margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:30px;line-height:1.14;letter-spacing:.04em;
  text-transform:uppercase;text-align:center;color:var(--cream);
}
.filo-pacto__cuerpo{
  width:min(475px,100%);
  display:flex;flex-direction:column;gap:25px;
  opacity:.9;
}
.filo-pacto__cuerpo p{
  margin:0;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:17px;line-height:1.4;text-align:center;color:var(--cream);
}
/* El dorado de la marca, igual que en el original. A 30px la declaracion es
   texto grande y 4.26:1 le alcanza; en los enfasis del cuerpo, que van a
   17px, la negrita compensa el contraste mas bajo. */
.filo-oro{color:var(--brown)}
.filo-pacto__cuerpo strong{font-weight:700;color:var(--brown)}

/* ---- 4. cierre ---- */
.filo-cierre{
  margin:0;
  width:min(1028px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  aspect-ratio:1995 / 1241;   /* la proporcion de la foto: asi no se recorta */
}
.filo-cierre img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Entra sola al llegar a ella, con el mismo pulso que el resto pero mas
   larga y con un resto de escala: es la foto grande del cierre y llega
   despues de todo lo demas. Cuelga de .js -como el resto de las entradas-
   para que sin JS se vea, que es como tiene que fallar. */
.js .filo-cierre{opacity:0;transform:translateY(26px) scale(1.025)}
.filo-cierre.is-in{
  opacity:1;transform:none;
  transition:opacity 1.5s var(--curva), transform 1.6s var(--curva);
}
@media (prefers-reduced-motion:reduce){
  .js .filo-cierre{opacity:1;transform:none}
}

/* ---------- filosofia . tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .filosofia{padding:calc(var(--nav-h) + 58px) 0 62px}
  .filo-apertura{padding-bottom:50px}
  .filo-cierre{width:min(768px,calc(100% - var(--gutter) * 2))}
}

/* ---------- filosofia . mobile ---------- */
@media (max-width:809px){
  .filosofia{--borde-filo:28px;padding:calc(var(--nav-h) + 40px) 0 48px}
  .filo-apertura{padding:0 var(--borde-filo) 38px}
  .filo-apertura__texto p{font-size:15px}
  /* El lienzo sigue siendo mucho mas ancho que la pantalla -la serie no se
     encoge hasta ser ilegible- pero ya no se arrastra: se recorta centrada.
     1073px no es un numero redondo cualquiera: es el doble del centro de la
     foto de los fundadores dentro del lienzo movil (536.5px), y centrar la
     pista en ese ancho deja esa foto exactamente en el medio de la pantalla
     sea cual sea el ancho del telefono. */
  .filo-banda{--alto-banda:248px;--lienzo:1073px;margin-bottom:44px}
  .filo-banda__marco{left:calc(var(--x) * .9);width:calc(var(--w) * .86);height:calc(var(--h) * .86)}
  .filo-pacto{padding:0 var(--borde-filo) 46px;gap:26px}
  .filo-pacto__titulo{font-size:24px}
  .filo-pacto__cuerpo{gap:20px}
  .filo-pacto__cuerpo p{font-size:15px}
  .filo-cierre{width:calc(100% - var(--borde-filo) * 2)}
}

/* ===========================================================
   HISTORIA
   Toda la pagina cuelga de una sola idea estructural: el banner queda
   clavado arriba y el panel crema sube por encima y lo tapa. El resto
   -relato y composicion de fotos- se apoya en eso.
   =========================================================== */
.historia{position:relative}

/* ---- 1. el banner clavado ----
   sticky y no fixed: asi sigue ocupando sus 538px en el flujo y el panel
   arranca justo debajo, sin compensaciones a mano. El nav flota encima
   (z-50) y a los 40px de scroll se pinta de negro solo -.nav.is-stuck-,
   que es lo que lo salva cuando el panel crema le pasa por detras. */
.hist-banner{
  position:sticky;top:0;z-index:1;
  height:538px;
  display:flex;align-items:center;justify-content:center;
  overflow:clip;
  background:var(--black);   /* mientras la foto carga */
}
.hist-banner__foto{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:right center;
}
/* La foto baja un 15% parejo, para que el titulo en crema despegue del cielo.
   Va como velo negro y no como filter:brightness(.85): el resultado sobre el
   pixel es el mismo -c x 0.85- pero el velo no crea una capa de filtro sobre
   una imagen a pantalla completa. z-index 0 como la foto (pinta despues por
   orden de arbol) y el titulo, que va en 1, queda encima. */
.hist-banner::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:rgba(0,0,0,.15);
}
.hist-banner__titulo{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 var(--gutter);
  text-align:center;color:var(--cream);
}
.hist-banner__volanta{
  margin:0;
  font-family:var(--ui);font-weight:300;
  font-size:14px;letter-spacing:.13em;line-height:1.2;
  text-transform:uppercase;
}
/* las cuatro lineas son UNA frase: van como <span> dentro de un solo <p>
   para que el lector de pantalla la lea seguida. El <p> hace de columna. */
.hist-banner__frase{margin:0;display:flex;flex-direction:column;gap:10px}
.hist-banner__linea{
  display:block;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:50px;line-height:.9;
}
/* la linea que lleva el peso de la frase */
.hist-banner__linea--fuerte{font-weight:500;text-transform:uppercase}
/* las dos ultimas cierran mas juntas, igual que en el original */
.hist-banner__linea--junta{line-height:.8}

/* ---- 2. el panel que sube ----
   z-index 2 y sombra hacia ARRIBA: es lo que hace que se lea como una hoja
   que se despega del banner y no como otra seccion apilada. La sombra se
   pinta sobre el banner justamente porque el panel esta por encima. */
.hist-panel{
  position:relative;z-index:2;
  background:#F7F4EF;
  color:var(--black);
  box-shadow:
    0 -2px   4.3px rgba(0,0,0,.20),
    0 -3.7px 8.2px rgba(0,0,0,.23),
    0 -11px  25px  rgba(0,0,0,.30),
    0 -41px  90px  rgba(0,0,0,.48);
}

/* ---- 3. el relato ---- */
.hist-relato{padding:60px var(--gutter) 0}
.hist-relato__caja{
  width:min(680px,100%);margin:0 auto;
  display:flex;flex-direction:column;gap:15px;
}
.hist-relato__titulo{
  margin:0;
  font-family:var(--body);font-style:italic;font-weight:500;
  font-size:40px;line-height:1.7;letter-spacing:-.02em;
  /* Engrosado a mano. Baskervville solo trae el peso 400 -no hay archivo de
     500 ni de 600-, asi que font-weight:500 el navegador lo resuelve contra
     el mismo archivo y no cambia nada; y subir a 600 dispara la negrita
     sintetica, que a 40px queda demasiado pesada para una serif en cursiva.
     El filete da el control fino que el peso no da.
     Va en em y no en px para que el grosor optico se mantenga cuando el
     titulo baja a 34px en tablet y a 30px en mobile. */
  -webkit-text-stroke:.011em currentColor;
}
/* el original separa los parrafos con una linea vacia entera: 1.4em es
   exactamente esa altura de renglon */
.hist-relato__texto{display:flex;flex-direction:column;gap:1.4em}
.hist-relato__texto p{
  margin:0;
  font-family:var(--ui);font-weight:300;
  font-size:16px;line-height:1.4;letter-spacing:-.02em;
}
/* los enfasis del original no son negrita plena: es un peso mas */
.hist-relato__texto strong{font-weight:500}

/* ---- 4. la composicion de fotos ----
   Las dos fotos se colocan en PORCENTAJES sobre un escenario de proporcion
   fija, no en pixeles. Asi la composicion -el solape entre una y otra, que
   es lo unico que importa aca- se mantiene identica a cualquier ancho, sin
   un breakpoint por cada tamaño intermedio. */
.hist-fotos{padding:0 var(--gutter);display:flex;justify-content:center}
.hist-fotos__escena{
  position:relative;
  width:min(914px,100%);
  aspect-ratio:914 / 463;
}
.hist-fotos__ancha,
.hist-fotos__retrato{position:absolute;margin:0}
.hist-fotos__ancha{left:10.18%;top:15.01%;width:66.85%;height:69.98%}
.hist-fotos__retrato{
  left:69.69%;top:22.94%;width:24.51%;height:51.19%;
  filter:drop-shadow(-4px 8px 3px rgba(0,0,0,.25));
  will-change:transform;
}
.hist-fotos img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- historia . tablet ---------- */
/* La composicion de escritorio todavia entra y se lee bien, asi que no se
   cambia de maqueta: solo baja de escala. */
@media (min-width:810px) and (max-width:1199px){
  .hist-banner{height:496px}
  .hist-banner__titulo,
  .hist-banner__frase{gap:8px}
  .hist-banner__linea{font-size:44px}
  .hist-relato{padding-top:50px}
  .hist-relato__caja{width:min(620px,100%)}
  .hist-relato__titulo{font-size:34px}
  .hist-fotos__escena{width:min(760px,100%)}
}

/* ---------- historia . mobile ---------- */
@media (max-width:809px){
  .hist-banner{height:523px}
  /* en el original las lineas van pegadas y el bloque baja 30px */
  .hist-banner__titulo{gap:0;padding-top:30px}
  .hist-banner__frase{gap:0}
  .hist-banner__volanta{line-height:1.8}
  /* Fluido y no 44px fijos. La frase son cuatro renglones y tiene que
     seguir siendo cuatro: la linea larga -DOS HOMBRES, en versalita- mide
     7.63px de ancho por cada px de cuerpo, asi que a 45px pide 343 y en un
     telefono de 375 solo quedan 335 y se partia en dos. El calculo deja el
     6% de margen sobre ese limite, y si aun asi no entrara -por ejemplo con
     la tipografia de respaldo, mas ancha- se parte, que es como tiene que
     fallar: partir se lee, desbordar no.
       375px -> 42px    390px -> 44px    320px -> 35px */
  .hist-banner__linea{font-size:clamp(28px, calc(12.3vw - 3.9px), 45px)}
  .hist-relato{padding:25px var(--gutter) 0}
  .hist-relato__caja{gap:10px}
  .hist-relato__titulo{font-size:30px;line-height:1.5}
  .hist-fotos{padding:0 var(--gutter) 25px}
  /* el escenario cambia de proporcion: las fotos se acercan y el retrato
     se apoya contra el borde derecho */
  .hist-fotos__escena{aspect-ratio:344 / 229}
  .hist-fotos__ancha{left:.73%;top:5.24%;width:88.66%;height:89.96%}
  .hist-fotos__retrato{
    left:71.80%;top:21.40%;width:27.62%;height:59.39%;
    filter:drop-shadow(-2.3px 4.6px 3px rgba(0,0,0,.25));
  }
}

/* ===========================================================
   INICIAR SESION
   Vive en dos lados con el mismo markup (tools/bloque_ingreso.py):
   la pagina /iniciar-sesion y el panel que sube en /comprar-argentina.
   Deliberadamente corto: volanta, titulo, aviso de una linea, dos campos
   y el boton. Hoy es una SIMULACION, no hay backend: el formulario no
   tiene action y sus campos no tienen name, de modo que ni un envio
   nativo -si fallara el JS- puede mandar la clave a ningun lado.
   =========================================================== */

/* etiqueta presente para el lector de pantalla, invisible en pantalla.
   clip-path solo no alcanza: Safari necesita el alto/ancho de 1px. */
.oculto{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.ingreso{
  display:flex;align-items:center;justify-content:center;
  padding:calc(97px + 72px) var(--gutter) 96px;
  background:var(--black);
}
.ingreso__caja{
  position:relative;
  width:min(392px,100%);
  text-align:center;
  padding:44px 40px 34px;
  border:1px solid rgba(143,107,70,.38);border-radius:10px;
  background:#0A0908;
  overflow:hidden;
}

/* el aviso: una sola linea con el escudo, no una caja aparte */
.ingreso__nota{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 20px;
  font-family:var(--ui);font-weight:400;font-size:12px;line-height:1.45;
  letter-spacing:.01em;color:#C0A486;
}
.ingreso__nota-icono{flex:none;line-height:0;padding-top:1px;color:var(--brown-claro)}
.ingreso__nota-icono svg{width:15px;height:15px;display:block}

/* el form va desnudo: la caja que lo contiene ya es la tarjeta */
.ingreso__form{
  padding:0;border:0;background:transparent;
  display:flex;flex-direction:column;gap:11px;
}
.ingreso__form .form__enviar{width:100%;margin-top:7px}
/* el centrado es de los bloques: dentro de un campo el texto se sigue
   leyendo y editando desde la izquierda, como en cualquier formulario */
.ingreso__form .form__control{text-align:left}

/* los dos enlaces de ayuda van centrados bajo el boton, como en los
   formularios de acceso que la gente ya tiene aprendidos */
.ingreso__olvide{
  align-self:center;margin-top:4px;
  font-family:var(--ui);font-weight:300;font-size:12px;line-height:1;
  color:var(--muted);text-decoration:none;
}
.ingreso__olvide:hover{color:var(--cream)}

/* respuesta al intento de ingreso. Arranca oculta y se muestra con la
   clase; el aria-live la lee al cambiar el texto. */
.ingreso__estado{
  display:none;order:9;margin:14px 0 0;padding:12px 14px;
  border:1px solid rgba(163,126,85,.5);border-radius:8px;
  background:rgba(143,107,70,.14);
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.45;
  color:var(--cream);
}
.ingreso__estado.is-visible{display:block}
/* el rojo va apagado: sobre negro uno saturado grita y rompe el tono */
.ingreso__estado--no{border-color:rgba(180,90,90,.5);background:rgba(180,90,90,.12)}

.ingreso__pie{
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid rgba(143,107,70,.28);
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.5;
  text-align:center;color:var(--muted);
}
.ingreso__pie a{color:var(--cream);text-decoration:none}
.ingreso__pie a:hover{text-decoration:underline;text-underline-offset:3px}
.ingreso a:focus-visible,
.ingreso__olvide:focus-visible,
.ingreso__pie a:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:4px}

/* ---------- iniciar sesion . tablet ---------- */
@media (min-width:900px) and (max-width:1199px){
  .ingreso{padding:calc(var(--nav-h) + 60px) var(--gutter) 80px}
  .ingreso__titulo{font-size:25px}
}

/* ---------- iniciar sesion . mobile ---------- */
@media (max-width:899px){
  .ingreso{padding:calc(var(--nav-h) + 48px) 28px 72px;align-items:flex-start}
  .ingreso__caja{padding:34px 26px 28px}
  .ingreso__titulo{font-size:24px}
}

/* ===========================================================
   PANEL DE INGRESO dentro de /comprar-argentina
   Al tocar "Iniciar sesion" el panel tapa la caja entera -las dos columnas,
   con sus botones y opciones- en vez de cambiar de pagina. Entra desde la
   derecha en escritorio y sube en mobile, que es de donde viene el gesto. Es
   una mejora progresiva: el enlace apunta igual a /iniciar-sesion, y si
   no hay JS navega ahi. Ver js/ingreso.js.
   =========================================================== */
.acceso__panel{
  position:absolute;inset:0;z-index:1;   /* debajo del ::before del neon, que es z-index:2 */
  display:flex;flex-direction:column;justify-content:center;
  padding:30px 48px;
  text-align:center;
  background:#0A0908;                    /* opaco: tapa de verdad lo de atras */
  overflow-y:auto;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform .62s var(--curva), visibility 0s linear .62s;
}
.acceso__caja.is-ingresando .acceso__panel{
  transform:translateY(0);
  visibility:visible;
  transition:transform .62s var(--curva), visibility 0s;
}
/* los bloques aparecen escalonados detras del panel, para que se lea que
   es la misma superficie y no una pantalla nueva */
.acceso__panel-item{opacity:0}
.acceso__caja.is-ingresando .acceso__panel-item{
  animation:rise .85s var(--curva) both;
}
.acceso__caja.is-ingresando .ingreso__eyebrow{animation-delay:.16s}
.acceso__caja.is-ingresando .ingreso__titulo{animation-delay:.22s}
.acceso__caja.is-ingresando .ingreso__nota  {animation-delay:.28s}
.acceso__caja.is-ingresando .ingreso__form  {animation-delay:.34s}
.acceso__caja.is-ingresando .ingreso__pie   {animation-delay:.40s}

/* volver a las opciones */
.acceso__volver{
  position:absolute;top:18px;left:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  transition:color var(--t-corta) var(--curva);
}
.acceso__volver svg{width:15px;height:15px;transition:transform var(--t-media) var(--curva)}
.acceso__volver:hover{color:var(--cream)}
.acceso__volver:hover svg{transform:translateX(-4px)}
.acceso__volver:focus-visible{outline:2px solid var(--brown);outline-offset:2px}

/* el bloque se acota y se centra dentro de su columna */
.acceso__panel .ingreso__form,
.acceso__panel .ingreso__pie,
.acceso__panel .ingreso__nota{max-width:330px;margin-left:auto;margin-right:auto}

/* ---------- escritorio y tablet: dos columnas, entrada lateral ----------
   El panel es tan ancho como la caja (940px): en una sola columna el login
   quedaba como una tira angosta con medio panel vacio a cada lado. Se parte
   igual que la caja de atras -titulo a la izquierda, formulario a la
   derecha- y entra desde la derecha en vez de subir, que es de donde viene
   el gesto: el boton "Iniciar sesion" esta en la columna derecha. */
@media (min-width:900px){
  .acceso__panel{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    /* Las dos filas miden lo mismo y el bloque de la izquierda se apoya
       contra la linea que las separa: la cabecera termina ahi (align-self:end)
       y el pie empieza ahi (align-self:start). Asi los dos quedan pegados y
       centrados como una sola pieza. Con filas "auto" el sobrante de la
       columna del formulario -que es mas alta y abarca las dos- se repartia
       entre ellas y abria un hueco muerto de ~150px en el medio. */
    grid-template-rows:1fr 1fr;
    align-items:center;
    padding:44px 48px;
    transform:translateX(100%);
  }
  .acceso__caja.is-ingresando .acceso__panel{transform:translateX(0)}
  /* Izquierda: titulo y, debajo, el "no tenes cuenta". El pie es hijo directo
     del panel -no de la columna- justamente para poder mandarlo de un lado al
     otro por breakpoint sin duplicarlo en el HTML: en mobile el panel es flex
     en columna y cae ultimo, que es su orden natural. */
  .acceso__panel-col--cab{
    grid-column:1;grid-row:1;align-self:end;
    padding-right:44px;
  }
  .acceso__panel .ingreso__pie{
    grid-column:1;grid-row:2;align-self:start;
    padding-right:44px;margin-top:26px;
  }
  /* Derecha: el formulario, ocupando las dos filas, con el filete que
     separa las columnas igual que en la caja de atras */
  .acceso__panel-col--form{
    grid-column:2;grid-row:1 / span 2;
    border-left:1px solid rgba(143,107,70,.28);
    padding-left:44px;
  }
  .acceso__panel .ingreso__titulo{margin-bottom:16px}
  .acceso__panel .ingreso__nota{margin-bottom:0}
  .acceso__panel .ingreso__form,
  .acceso__panel .ingreso__pie{max-width:none}
}

@media (max-width:899px){
  .acceso__panel{padding:52px 26px 30px}
  .acceso__panel .ingreso__form,
  .acceso__panel .ingreso__pie,
  .acceso__panel .ingreso__nota{max-width:none}
  .acceso__volver{top:12px;left:12px}
}

/* ===========================================================
   REGISTRO DE MEMBRESIA (/registro-membresia)
   Formulario al que lleva /comprar-argentina. Conserva el action y los
   name de campo del original (Zoho), solo cambia la piel.
   =========================================================== */
.registro{
  --reg-borde:rgba(143,107,70,.38);
  position:relative;
  background:var(--black);
  padding:calc(97px + 84px) var(--gutter) 110px;
}
.registro__inner{width:min(1120px,100%);margin:0 auto}

/* la ruta va a la derecha, igual que en el area comercial */
.registro .ficha__migas{margin:0 0 32px;display:flex}
.registro .migas__ruta{justify-content:flex-end}
.registro .migas__ruta a,
.registro .migas__ruta span{font-weight:500;letter-spacing:.16em}
.registro .migas__ruta a{color:var(--muted)}
.registro .migas__ruta a:hover{color:var(--cream)}
.registro .migas__ruta [aria-current]{color:var(--cream)}

.registro__cab{margin-bottom:48px}
.registro__eyebrow{
  margin:0 0 12px;
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brown-claro);
}
.registro__titulo{
  margin:0 0 24px;
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.5vw,31px);
  line-height:.96;letter-spacing:.03em;text-transform:uppercase;color:var(--cream);
}
.registro__lead{
  margin:0 0 14px;max-width:62ch;
  font-family:var(--ui);font-weight:300;font-size:14px;line-height:1.6;color:var(--muted);
}
.registro__lead:last-child{margin-bottom:0}

/* --- aviso de contacto --- */
.aviso{
  display:flex;align-items:flex-start;gap:14px;
  margin:0 0 26px;padding:16px 20px;
  border:1px solid rgba(163,126,85,.45);border-radius:8px;
  background:rgba(143,107,70,.12);
}
.aviso__icono{flex:none;color:var(--brown-claro);line-height:0;padding-top:1px}
.aviso__icono svg{width:18px;height:18px;display:block}
.aviso__texto{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:13.5px;line-height:1.5;
  color:var(--cream);
}
.aviso__tel{
  font-weight:500;color:var(--cream);white-space:nowrap;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,244,219,.45);
  transition:text-decoration-color var(--t-corta) var(--curva);
}
.aviso__tel:hover{text-decoration-color:var(--cream)}

/* --- el formulario --- */
.form{
  padding:40px;border:1px solid var(--reg-borde);border-radius:10px;background:#0A0908;
}
.form__rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.form__campo{margin:0;display:flex;flex-direction:column;gap:8px}
.form__campo--ancho{grid-column:1 / -1}
.form__etiqueta{
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brown-claro);
}
.form__obl{
  margin-left:5px;border:0;text-decoration:none;
  color:#C29A6A;  /* 5.69:1 sobre la caja: el marron de marca no llega */
}
.form__control{
  width:100%;padding:13px 15px;
  border:1px solid var(--reg-borde);border-radius:6px;
  background:rgba(255,244,219,.04);color:var(--cream);
  font-family:var(--ui);font-weight:300;font-size:14.5px;line-height:1.4;
  transition:border-color var(--t-corta) var(--curva),background-color var(--t-corta) var(--curva);
}
.form__control::placeholder{color:rgba(255,244,219,.4)}
.form__control:hover{border-color:rgba(143,107,70,.6)}
.form__control:focus{
  outline:none;
  border-color:var(--cream);background:rgba(255,244,219,.07);
}
.form__control--area{resize:vertical;min-height:120px}
/* el navegador marca en rojo recien despues de intentar enviar */
.form__control:user-invalid{border-color:#B45A5A}
/* --- secciones del formulario largo --- */
.form__seccion{margin:0 0 38px;padding:0;border:0;min-width:0}
.form__seccion:last-of-type{margin-bottom:0}
.form__leyenda{
  display:flex;align-items:center;gap:12px;
  width:100%;margin:0 0 22px;padding:0 0 14px;
  border-bottom:1px solid rgba(143,107,70,.28);
  font-family:"Bentham","Bentham Placeholder",Georgia,serif;font-weight:400;
  font-size:19px;line-height:1.1;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cream);
}
.form__paso{
  flex:none;width:24px;height:24px;display:grid;place-items:center;
  border:1px solid rgba(163,126,85,.6);border-radius:999px;
  font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:0;
  color:var(--brown-claro);
}

/* --- ayuda debajo del campo --- */
.form__ayuda{
  font-family:var(--ui);font-weight:300;font-size:11.5px;line-height:1.45;
  color:var(--muted);
}

/* --- desplegables: se les saca el aspecto del sistema y se les pone
       la flecha de la casa, para que midan igual que los inputs --- */
.form__control--select{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A37E55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
.form__control--select option{background:#12100E;color:var(--cream)}
/* mientras no se elige nada el texto va atenuado, como un placeholder */
.form__control--select:has(option[value=""]:checked){color:rgba(255,244,219,.45)}

/* --- celular partido en codigo + numero --- */
.form__tel{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px}

.form__nota{
  margin:22px 0 0;
  font-family:var(--ui);font-weight:300;font-size:12px;color:var(--muted);
}
.form__enviar{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:26px;padding:16px 38px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cream);color:var(--black);
  font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:opacity var(--t-corta) var(--curva);
}
.form__enviar:hover{opacity:.86}
.form__control:focus-visible,
.form__enviar:focus-visible,
.registro a:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

.registro__volver{color:var(--muted)}
.registro__volver:hover{color:var(--cream)}

/* ---------- dos columnas: texto fijo a la izquierda, formulario a la derecha
   Debajo de 1000px se apila y el lateral deja de ser fijo. ---------- */
@media (min-width:1000px){
  .registro__inner{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
    gap:64px;
    align-items:start;      /* sin esto el lateral se estira y sticky no engancha */
  }
  .registro .ficha__migas{grid-column:1 / -1}
  .registro__lateral{
    position:sticky;
    top:calc(97px + 44px);  /* despeja la barra fija */
  }
  .registro__cab{margin-bottom:26px}
  .registro__lead{font-size:13.5px}
  .aviso{margin-bottom:24px}
  .registro__volver{margin-top:0}
}

/* ---------- registro · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .registro{padding:calc(var(--nav-h) + 68px) var(--gutter) 90px}
  .form{padding:34px}
}

/* ---------- registro · mobile ---------- */
@media (max-width:809px){
  .registro{padding:calc(var(--nav-h) + 48px) 28px 76px}
  .registro .ficha__migas{
    position:static;top:auto;left:auto;z-index:auto;margin:0 0 24px;
  }
  .registro .migas__ruta{display:flex;flex-wrap:wrap;row-gap:4px;justify-content:flex-start}
  .registro__cab{margin-bottom:34px}
  .registro__lead{font-size:13.5px}
  .aviso{padding:14px 16px;gap:11px}
  .aviso__texto{font-size:13px}
  .form{padding:24px 20px}
  .form__rejilla{grid-template-columns:1fr;gap:18px}
  .form__seccion{margin-bottom:30px}
  .form__leyenda{font-size:17px;margin-bottom:18px}
  .form__enviar{width:100%}
}

/* ===========================================================
   PIE ANCLADO
   Con poco contenido (p. ej. trade/prensa) el documento no
   llegaba al alto de la ventana y debajo del footer asomaba el
   fondo del body, blanco en las paginas .tema-claro. El <main>
   absorbe el sobrante para que el tramo de contenido y el pie
   cubran siempre la pantalla completa.
   OJO 1: nada de margin-top:auto en .footer-wrap — los margenes
   auto se comen el espacio libre ANTES que flex-grow, y el
   hueco blanco reaparece entre el main y el pie.
   OJO 2: no darle background a <html>. Sin fondo propio, el del
   body se propaga al lienzo, y esa propagacion NO depende de la
   opacidad del body. Como body arranca en opacity:0 por la
   animacion entradaPagina (1s), ponerle fondo a html corta la
   propagacion y las 9 paginas .tema-claro abren con un fogonazo
   negro a pantalla completa mientras el body hace el fundido.
   =========================================================== */
body{
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;
}
body > main{flex:1 0 auto}
body > section,
body > .footer-wrap{flex:0 0 auto}

/* ===========================================================
   RED DE NEGOCIOS (/red-negocios-arg-2025)
   Landing privada de socios. La pagina alterna negro y crema, y ese
   alternado ES la estructura: cada panel claro corta el negro y separa
   un tramo del siguiente sin necesidad de filetes.

   Todo lo que se ve aca cuelga de .red, asi que las clases genericas
   (.form, .red-volanta) no se pisan con las del registro comercial.
   =========================================================== */
.red{
  --red-borde:rgba(143,107,70,.38);
  --red-crema:#F7F4EF;
  --red-tinta:#241D17;      /* 14.9:1 sobre el crema */
  --acc-borde:var(--red-borde);
  background:var(--black);
}

/* --- 1 · banner --------------------------------------------------------
   El nav flota sobre la foto a proposito, asi que la seccion no lleva
   padding-top: el degradado de arriba es el que despeja el menu. */
.red-hero{
  position:relative;
  min-height:max(600px, calc(100vw * .5518));  /* 1214/2200 = proporcion real */
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--gutter) clamp(56px, 9vh, 104px);
  overflow:hidden;
}
.red-hero__foto{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* dos degradados: arriba para el menu, abajo para que el texto apoye */
.red-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,4,4,.62) 0%, rgba(4,4,4,.30) 34%,
      rgba(4,4,4,0) 100%) top left / 100% 190px no-repeat,
    linear-gradient(0deg, rgba(4,4,4,.88) 0%, rgba(4,4,4,.68) 24%,
      rgba(4,4,4,.38) 50%, rgba(4,4,4,.10) 76%,
      rgba(4,4,4,0) 100%) bottom left / 100% 78% no-repeat;
}
.red-hero__caja{position:relative;z-index:2;text-align:center;max-width:760px}
.red-hero__volanta{
  margin:0 0 14px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brown-claro);
}
.red-hero__frase{margin:0;display:flex;flex-direction:column;font-weight:400}
.red-hero__linea{
  display:block;
  font-family:var(--body);color:var(--cream);
  line-height:1.02;letter-spacing:.01em;
}
.red-hero__linea--serif{
  font-style:italic;font-size:clamp(34px, 4.1vw, 58px);
}
.red-hero__linea--fuerte{
  font-size:clamp(42px, 5.2vw, 74px);text-transform:uppercase;letter-spacing:.02em;
}

/* --- 2 · bajada y sellos de prensa ------------------------------------ */
.red-intro{
  padding:clamp(48px, 7vw, 78px) var(--gutter) clamp(52px, 7vw, 86px);
  text-align:center;
}
.red-intro__bajada{
  margin:0 auto;max-width:74ch;
  font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.75;
  color:var(--muted);
}
.red-intro__sellos{margin:clamp(34px, 5vw, 54px) 0 0;line-height:0}
.red-intro__sellos-img{
  /* margin-inline:auto y no text-align:center en el padre: el reset de la
     linea 58 pone img{display:block}, asi que la imagen es un bloque y
     text-align no la mueve. Sin esto queda pegada a la izquierda. */
  width:min(100%, 685px);height:auto;margin-inline:auto;opacity:.82;
}

/* --- 3 · quienes somos ------------------------------------------------- */
/* --- 3 · quienes somos --------------------------------------------------
   DOS PANELES A TODO LO ANCHO, como en el diseno:
     izquierda  degradado que arranca en el NEGRO de la seccion de arriba y
                termina en #A69480, con la linea de tiempo y sus puntos;
     derecha    panel claro #FEFCF6 con la foto, sin esquinas redondeadas.
   El gutter ya no va en la seccion sino DENTRO de cada panel: si fuera en la
   seccion, los paneles no llegarian al borde y se veria el negro por detras. */
.red-nosotros{
  /* Movil primero: UNA columna. La regla de dos columnas vive en el
     @media (min-width:810px) de mas abajo, junto al resto de la pagina.
     Ponerlas aqui dejaba la seccion a dos columnas tambien en el movil. */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  width:100%;margin:0;padding:0;
}

/* El arranque en negro NO es decorativo: es lo que hace que el panel se una
   con la seccion de arriba sin una linea de corte; y el #A69480 del final
   entrega la pagina a la seccion clara que viene despues.

   LAS PARADAS ESTAN CALCULADAS, NO PUESTAS A OJO. El problema es que el
   texto va en crema sobre un fondo que se va aclarando: crema sobre #A69480
   da 2.68:1, menos del 4.5 que se exige. Con el degradado repartido a partes
   iguales, el tercer bloque caia sobre la parte clara y quedaba en 3.78:1.
   La solucion son dos cosas a la vez:
     - el pie del panel crece (padding-bottom de 150 a 310px) para que el
       tramo calido quepa POR DEBAJO del ultimo bloque, no detras de el;
     - las paradas se corren hacia abajo, de forma que a la altura donde
       acaba el texto -79% del panel- el fondo sigue siendo oscuro.
   Medido sobre los pixeles del degradado y con el 82% de opacidad del
   parrafo ya compuesto, el peor caso queda en 5.51:1 a 390 y 834px,
   6.35:1 a 1024 y 7.51:1 a 1440. Si se tocan estas paradas hay que volver
   a medir: el margen no es grande. */
.red-nosotros__relato{
  /* Las tres medidas de las que dependen la linea de tiempo y sus puntos se
     declaran AQUI una sola vez, y tanto la linea como los puntos se calculan
     a partir de ellas. Antes cada uno llevaba su propio clamp ajustado a
     mano y no coincidian: a 1440 el punto caia 18.8px a la derecha de la
     linea. Con tres clamps independientes no hay forma de que coincidan en
     todos los anchos; con uno solo, coinciden siempre. */
  --pad-izq:clamp(64px, 7vw, 104px);   /* sangria del texto en el panel  */
  --linea-x:clamp(30px, 3.4vw, 52px);  /* la linea, desde el borde izq.   */
  --punto:19px;                        /* diametro de los puntos          */
  --pad-arriba:clamp(70px, 9vw, 120px);

  position:relative;
  display:flex;flex-direction:column;
  gap:clamp(56px, 8vw, 132px);
  padding:var(--pad-arriba) clamp(40px, 5vw, 86px)
          clamp(200px, 22vw, 310px) var(--pad-izq);
  background:linear-gradient(180deg,
    #040404 0%, #0D0B09 32%, #1F1B16 58%,
    #3A332B 76%, #61574A 87%, #8B7C6A 94%, #A69480 100%);
}

/* La linea de tiempo. Va de punto a punto, no hasta el borde: termina en el
   ultimo, que es donde termina el relato. */
.red-nosotros__relato::before{
  content:"";position:absolute;
  left:var(--linea-x);
  /* arranca en el CENTRO del primer punto, no en un valor aparte: el primer
     bloque empieza en el padding de arriba y el punto 2px por debajo */
  top:calc(var(--pad-arriba) + 2px + var(--punto) / 2);
  bottom:clamp(206px, 22.6vw, 320px);
  width:1px;
  background:linear-gradient(180deg,
    rgba(255,244,219,.42) 0%, rgba(255,244,219,.30) 60%, rgba(36,29,23,.28) 100%);
}
.red-nosotros__bloque{position:relative;margin:0}
/* el punto de cada bloque, montado sobre la linea */
.red-nosotros__bloque::before{
  content:"";position:absolute;
  /* El bloque empieza donde acaba la sangria del panel, asi que para que el
     CENTRO del punto caiga sobre el centro de la linea hay que descontar esa
     sangria y medio punto. El .5px es el medio pixel de la propia linea. */
  left:calc(var(--linea-x) + .5px - var(--pad-izq) - var(--punto) / 2);
  top:2px;
  width:var(--punto);height:var(--punto);border-radius:999px;
  background:var(--cream);
  box-shadow:0 0 0 6px rgba(4,4,4,.55);
}

.red-nosotros__figura{
  margin:0;
  background:#FEFCF6;
  display:flex;align-items:flex-start;justify-content:center;
  /* EL MISMO HUECO EN LOS CUATRO LADOS. Antes eran dos valores distintos
     -78px arriba y 57.6 a los lados a 1440-, y ademas la foto llevaba un
     tope propio, asi que el aire lateral no lo decidia este padding sino la
     resta. Con un solo valor y la foto a width:100%, los tres huecos que
     se ven -arriba, izquierda y derecha- son iguales por construccion en
     cualquier ancho, sin numeros que cuadren solo a 1440. */
  padding:clamp(28px, 4vw, 64px);
}
.red-nosotros__foto{
  /* La foto llena lo que le deja el padding del panel, y es ese padding
     quien decide su tamano. Asi el hueco de arriba y los dos de los lados
     son siempre el mismo. */
  display:block;width:100%;height:auto;
  border-radius:0;            /* el diseno la quiere a canto vivo */
}

.red-volanta{
  margin:0 0 20px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brown-claro);
}
/* el punto dorado del original, hecho con ::before para no meter un <span> */
.red-volanta--punto{display:flex;align-items:center;gap:12px}
.red-volanta--punto::before{
  content:"";flex:none;width:6px;height:6px;border-radius:999px;
  background:var(--brown-claro);
}
/* 16px y no 14.5. Dos motivos, y el segundo es el que manda:
   - a 14.5 sobre una columna de 585px el texto se leia chico para una landing
     cuyo unico trabajo es que alguien la lea entera;
   - el efecto de la foto fija necesita que la columna de texto sea ALTA. Con
     14.5 los tres bloques median 766px juntos, la foto 470, y quedaban 296px
     de recorrido: la foto se despegaba enseguida y el efecto casi no se veia.
     Medido. Subir el cuerpo y la interlinea suma renglones y por lo tanto
     recorrido, sin inventar espacio vacio. */
.red-nosotros__parrafo{
  /* 46ch y no 56. El "ch" crece con el cuerpo: al subir de 14.5 a 16px los
     56ch pasaron a medir mas que la columna, la caja se ensancho en vez de
     ganar renglones y el recorrido subio de 296 a 420, poco. Con 46ch la
     medida de lectura queda en ~480px -dentro del rango comodo de 45 a 75
     caracteres- y cada bloque suma renglones, que es lo que le da recorrido
     a la foto fija. */
  margin:0;max-width:46ch;
  font-family:var(--ui);font-weight:300;font-size:16px;line-height:1.85;
  color:var(--muted);
}
/* LA FOTO SE QUEDA FIJA mientras los tres bloques pasan por al lado.

   El sticky va en la FOTO, no en el <figure>. El figure se estira a toda la
   fila a proposito, porque es quien pinta el panel claro: con align-items en
   start solo llegaba hasta donde llegaba la foto y quedaban 540px de negro
   por debajo -medido-. Y un sticky sobre un elemento que ya mide lo mismo
   que su contenedor no se despega nunca: se ve exactamente igual que sin
   sticky, y es un fallo silencioso. Estirado el panel, quien tiene recorrido
   por delante es la imagen.

   El top va con 97px literal y no con var(--nav-h): --nav-h se declara DENTRO
   de los @media de tablet y mobile, asi que en escritorio no existe, y un
   top:calc(var(--nav-h) + 34px) invalido deja el sticky sin desplazamiento
   de referencia. Se le pone igual el fallback por si alguna vez se mueve a
   :root. Mismo criterio que .fundador-largo__rail. */
.red-nosotros__foto{position:sticky;top:calc(var(--nav-h, 97px) + 34px)}

/* COLORES DE ESTA SECCION, tomados del sitio original.
   Alla la volanta y el parrafo van los dos en claro sobre el negro; nuestra
   version tenia la volanta en marron claro y el parrafo en --muted, un gris
   al 60% pensado para el pie de pagina. Medido en produccion: los dos son
   texto claro, y la jerarquia la hacen el cuerpo y el peso -la volanta en
   600 versalita con tracking, el parrafo en 300-, no el color.
   Se usa --cream y no el blanco puro del original: es el blanco de ESTE
   sitio, y meter #FFFFFF al lado del crema de la barra y el pie se notaria.
   El parrafo va al 82%: a plena intensidad, ocho renglones de 16px sobre
   negro cansan; al 82 sigue dando 14:1 de contraste, muy por encima del 4.5
   que se exige. */
.red-nosotros .red-volanta{color:var(--cream)}
/* el punto dejo de ser de la volanta: ahora es del bloque y va sobre la
   linea de tiempo, asi que el de la volanta se apaga en esta seccion */
.red-nosotros .red-volanta--punto::before{display:none}
.red-nosotros .red-volanta--punto{display:block}
.red-nosotros__parrafo{color:rgba(255,244,219,.82)}

/* --- 4 · portafolio (panel crema) --------------------------------------
   El panel sube sobre el negro con la misma sombra hacia arriba que usa
   .hist-panel, para que las dos paginas rimen al pasar de una a otra. */
.red-portafolio{
  position:relative;
  background:var(--red-crema);
  padding:clamp(56px, 7vw, 92px) var(--gutter) clamp(60px, 8vw, 104px);
}
.red-portafolio__titulo{
  margin:0 0 clamp(38px, 5vw, 66px);
  text-align:center;
  font-family:var(--body);font-weight:400;
  font-size:clamp(30px, 4vw, 54px);line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-tinta);
}
/* TRES colecciones, las mismas que /vinos. El hueco es menor que antes
   porque antes eran dos columnas y ahora son tres: cada una tiene que alojar
   tres botellas de 116px fijos -348px- y con el hueco viejo de 72px la
   columna se quedaba en 345px a 1440 y las botellas desbordaban. */
.red-portafolio__familias{
  display:grid;gap:clamp(30px, 3vw, 46px);
  width:min(1180px, 100%);margin:0 auto;
}
.red-familia{margin:0}
.red-familia__titulo{
  margin:0 0 22px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#8A6C48;  /* 4.6:1 sobre crema */
}
/* Las fichas se maquetan con las MISMAS clases que /vinos (.vino, .vino__foto,
   .vino__puntos, .vino__nombre): el usuario pidio que se vean igual, asi que
   no se copian los estilos, se reusa la pieza. Aca solo se centra la fila
   dentro de su columna y se apaga el levante del hover, porque en esta
   pagina las fichas no enlazan a ningun lado.
   La medalla ya esta pensada para fondo claro -gris #ACACAC sobre blanco, una
   decision de contraste tomada a conciencia en /vinos- y el crema de este
   panel (#F7F4EF) esta a un pelo del blanco, asi que se ve igual. */
/* Esta seccion reusa las piezas de /vinos, pero NO puede heredar SU medida.
   Alla el @media de hasta 1199px agranda la botella a 124px y abre 20px de
   hueco, porque /vinos pone una coleccion por fila y le sobra ancho. Aqui las
   tres conviven en columnas: con esos valores tres botellas median 412px en
   una columna de 362 y se salian por los lados -medido a 834px-.
   El 32% hace que la botella no dependa del ancho de pantalla sino del de SU
   columna, que es lo que de verdad la limita; el tope de 116px evita que la
   botella de Pinnacle se agrande cuando su columna va a todo lo ancho. */
.red-familia__vinos{justify-content:center;margin-bottom:26px;gap:0}
/* La botella PIDE 116px y encoge solo si su columna no da para tres.
   Se hace con flex y no metiendo un porcentaje en --foto: un porcentaje
   dentro de una custom property se resuelve DONDE SE USA, no donde se
   declara. Con --foto:min(116px,32%) el 32% daba bien en .vino -32% de la
   columna- pero .vino__foto lo heredaba y ahi era 32% de .vino: la caja se
   quedaba en 37px de ancho, la botella se dibujaba a 37x156 y la medalla
   se iba flotando por encima del cuello. Medido a 1920. */
.red-familia__vinos .vino{flex:0 1 116px;width:auto;min-width:0}
.red-familia__vinos .vino__foto{width:100%}
.vino--sin-enlace{cursor:default}
.vino--sin-enlace:hover .vino__foto{transform:none}
.red-familia__sub{
  margin:0 0 12px;
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red-tinta);
}
.red-familia__texto{
  margin:0 0 20px;max-width:62ch;
  font-family:var(--ui);font-weight:300;font-size:13.5px;line-height:1.7;
  color:rgba(36,29,23,.78);
}
.red-tags{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.red-tags__clave,
.red-tags__item{
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:7px 13px;border-radius:3px;
}
.red-tags__clave{background:var(--red-tinta);color:var(--red-crema)}
.red-tags__item{
  color:rgba(36,29,23,.72);border:1px solid rgba(36,29,23,.22);
}

/* --- 5 · beneficios ----------------------------------------------------- */
.red-beneficios{
  width:min(1180px, 100%);margin:0 auto;
  padding:clamp(66px, 9vw, 116px) var(--gutter);
}
.red-beneficios__cab{
  display:grid;gap:clamp(20px, 3vw, 52px);align-items:center;
  margin-bottom:clamp(38px, 5vw, 62px);
}
.red-beneficios__titulo{margin:0;display:flex;flex-direction:column}
.red-beneficios__titulo-a,
.red-beneficios__titulo-b{
  font-family:var(--body);font-weight:400;color:var(--cream);line-height:1.04;
}
.red-beneficios__titulo-a{font-style:italic;font-size:clamp(28px, 3.3vw, 44px)}
.red-beneficios__titulo-b{
  font-size:clamp(30px, 3.6vw, 48px);text-transform:uppercase;letter-spacing:.04em;
}
.red-beneficios__lead{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:14px;line-height:1.75;
  color:var(--muted);
}

.red-tarjetas{
  list-style:none;margin:0 0 clamp(48px, 6vw, 80px);padding:0;
  display:grid;gap:clamp(12px, 1.6vw, 20px);
}
.red-tarjeta{
  position:relative;overflow:hidden;border-radius:8px;
  min-height:300px;display:flex;align-items:flex-end;
  background:#0B0907;
}
.red-tarjeta__foto{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
/* las fotos de origen ya traen su propio desvanecido en el alfa; este
   degradado es solo para que el texto tenga piso firme */
.red-tarjeta::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(4,4,4,.88) 0%, rgba(4,4,4,.52) 38%,
    rgba(4,4,4,.12) 72%, rgba(4,4,4,0) 100%);
}
.red-tarjeta__cuerpo{position:relative;z-index:2;padding:22px 22px 24px}
.red-tarjeta__titulo{
  margin:0 0 8px;
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
}
.red-tarjeta__texto{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.6;
  color:rgba(255,244,219,.74);
}

/* --- la banda de datos que cierra beneficios -----------------------------
   La referencia los ponia sueltos sobre el mismo negro de la seccion y la
   banda no se leia como una pieza. Aca es un PANEL con color propio: un
   degradado calido en diagonal que a 1.10:1 por un lado y 1.31:1 por el otro
   se despega del negro de la pagina sin encenderse, mas un filo dorado.
   Es ademas la transicion hacia /prensa, que viene en crema.

   El oro de la casa -#A37E55- da 4.22:1 sobre el extremo claro del panel y
   no llega al 4.5 que se exige, asi que las cifras y las lineas van en crema
   y el dorado se queda en los filetes y el borde, que son decoracion. */
.red-datos__entrada{
  margin:clamp(44px, 6vw, 78px) 0 clamp(22px, 3vw, 34px);
  max-width:92ch;
  font-family:var(--ui);font-weight:300;font-size:13.5px;line-height:1.78;
  color:var(--muted);
}
.red-datos{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;
  background:
    linear-gradient(118deg,
      rgba(166,148,128,.13) 0%, rgba(166,148,128,.03) 46%,
      rgba(166,148,128,.10) 78%, rgba(166,148,128,.17) 100%),
    #16120D;
  border:1px solid rgba(189,169,138,.22);
}
.red-dato{
  position:relative;
  padding:clamp(26px, 3.4vw, 42px) clamp(22px, 2.6vw, 34px);
}
/* el separador entre datos. Se desvanece por los extremos para que no
   parezca una tabla: es un filete, no una celda */
.red-dato + .red-dato::before{
  content:"";position:absolute;left:0;
  top:clamp(20px, 2.4vw, 30px);bottom:clamp(20px, 2.4vw, 30px);width:1px;
  background:linear-gradient(180deg,
    rgba(189,169,138,0) 0%, rgba(189,169,138,.30) 42%, rgba(189,169,138,0) 100%);
}
.red-dato__filete{
  display:block;width:30px;height:1px;margin-bottom:clamp(16px, 2vw, 24px);
  background:var(--brown-claro);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--curva) .18s;
}
.red-dato.is-in .red-dato__filete{transform:scaleX(1)}
.red-dato__cifra{
  margin:0;
  font-family:var(--body);font-weight:400;font-size:clamp(34px, 3.9vw, 54px);
  line-height:.96;letter-spacing:.01em;color:var(--cream);
  /* cifras de caja alta: Baskervville trae las de estilo antiguo por defecto
     y "2009" salia con el 9 colgando por debajo de la linea de base */
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.red-dato__linea{
  margin:clamp(12px, 1.6vw, 18px) 0 0;
  font-family:var(--ui);font-weight:300;font-size:12.5px;line-height:1.62;
  color:rgba(255,244,219,.74);
}
/* El escalonado. Cada dato entra por su cuenta -lleva su data-aparece- y el
   retraso lo da el orden, asi que no hace falta JS. */
.js .red-dato:nth-child(2).is-in{transition-delay:.09s}
.js .red-dato:nth-child(3).is-in{transition-delay:.18s}
.js .red-dato:nth-child(4).is-in{transition-delay:.27s}
.js .red-dato:nth-child(2) .red-dato__filete{transition-delay:.27s}
.js .red-dato:nth-child(3) .red-dato__filete{transition-delay:.36s}
.js .red-dato:nth-child(4) .red-dato__filete{transition-delay:.45s}

/* --- 6 · prensa (panel crema) ------------------------------------------
   En el original TODA esta seccion es una imagen: titulares, copetes y
   cuerpo de nota estan rasterizados. Aca los encabezados vuelven a ser
   texto y las tapas quedan como imagen, que es lo que de verdad son. */
.red-prensa{
  background:var(--red-crema);
  padding:clamp(52px, 7vw, 88px) var(--gutter) clamp(58px, 8vw, 100px);
}
.red-prensa__cab{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:18px;width:min(1180px, 100%);margin:0 auto 22px;
}
.red-prensa__mes,
.red-prensa__fecha{
  margin:0;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#8A6C48;
}
.red-prensa__fecha{text-align:right}
.red-prensa__titulo{
  margin:0;
  font-family:var(--body);font-weight:400;font-size:clamp(24px, 3vw, 38px);
  line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--red-tinta);
}
/* el filete con el rotulo encima, que en el original tambien era imagen */
.red-prensa__rotulo{
  position:relative;
  width:min(1180px, 100%);margin:0 auto clamp(30px, 4vw, 48px);
  text-align:center;
}
.red-prensa__rotulo::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:rgba(36,29,23,.22);
}
.red-prensa__rotulo span{
  position:relative;padding:0 16px;background:var(--red-crema);
  font-family:var(--ui);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(36,29,23,.55);
}
.red-prensa__piezas{
  display:grid;gap:clamp(20px, 3vw, 40px);align-items:start;
  width:min(1180px, 100%);margin:0 auto;
}
.red-prensa__pieza{margin:0}
.red-prensa__foto{
  display:block;width:100%;height:auto;border-radius:6px;
}

/* --- 7 · formulario (PANEL CLARO) ---------------------------------------
   En el original este tramo NO es negro. El titulo se mide en rgb(24,24,24) y
   las etiquetas en rgb(51,51,51): si el fondo fuera oscuro no se verian. La
   version anterior lo habia dado vuelta y es la diferencia mas grande que
   tiene la pagina contra el original.

   La foto sigue estando, pero lavada. No alcanza con bajarle la opacidad: los
   negros de la botella siguen siendo negros y, mezclados al 12% con el crema,
   dejan manchas de gris medio donde el texto de ayuda pierde contraste.
   contrast(.55) sube esos negros a gris ANTES de la mezcla, y recien ahi el
   12% es seguro en toda la superficie.

   LA COLA. Debajo del boton el panel se va a negro para empalmar con el
   cierre, y los dos sellos caen adentro de esa cola: por eso el original los
   mide en gris claro y marron, que son colores de fondo oscuro. El degradado
   va anclado AL PIE en px y no en porcentaje, porque el formulario cambia de
   alto segun como corte el texto y un porcentaje correria el borde por encima
   o por debajo del boton. Los numeros salen de la medicion: el boton termina
   a 215px del pie y "Confidencial" arranca a 153px, asi que el corte pasa
   justo entre los dos.

   OJO ESPECIFICIDAD. Todo esto va acotado a .red-form porque .form,
   .form__control, .form__etiqueta y .form__enviar son LAS MISMAS clases de
   /registro-comercio, que es una pagina oscura. Nada de esto se puede
   escribir sin el .red-form adelante. Y por lo mismo, las reglas de movil de
   .form (linea ~2696) pesan 0,1,0 y las de aca 0,2,0: no la pisan. Lo que
   haya que cambiar en movil hay que volver a escribirlo con .red-form
   adelante, en el bloque max-width:809px de mas abajo.
   ------------------------------------------------------------------------ */
.red-form{
  --redf-panel:#F7F4EF;   /* el mismo crema de los otros dos paneles claros */
  --redf-tinta:#181818;   /* medido: titulo y bajada */
  --redf-rotulo:#333;     /* medido: etiquetas */
  /* medido #888, que sobre el crema da 3.2:1 y no llega a AA para 12px. Este
     gris es el mismo tono un escalon mas oscuro: 5.3:1 sobre el crema y 4.5:1
     en la zona mas sucia de la foto, que es el peor caso real. */
  --redf-ayuda:#656565;
  /* medio punto de alfa y no menos: la 1.4.11 pide 3:1 para el borde de un
     campo contra el blanco de adentro, y a .45 da 2.7. */
  --redf-linea:rgba(36,29,23,.5);
  /* medido #E74C3C: sobre el crema da 3.5:1. Mismo rojo un escalon mas
     oscuro, 4.9:1, y se sigue leyendo rojo de "esto es obligatorio". */
  --redf-rojo:#C0392B;
  /* medido #9C8B78: sobre el crema da 3.0:1. Misma familia, 4.7:1. Abajo, en
     la cola negra, vuelve el tono medido tal cual porque ahi da 6.4:1. */
  --redf-oro:#7B6A56;

  position:relative;
  background:var(--redf-panel);
  /* medido a 1440: 109 arriba, 115 abajo, y la seccion entera 1613 de alto */
  padding:clamp(56px, 7.57vw, 109px) var(--gutter) clamp(72px, 7.99vw, 115px);
  /* la seccion de prensa tambien es crema y queda pegada a esta. Sin el filete
     las dos se leen como un unico panel de 2000px. Si se prefiere que corran
     seguidas, se saca esta linea y no se rompe nada mas. */
  border-top:1px solid rgba(36,29,23,.10);
}
.red-form::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/red-negocios-fondo-formulario-botella-copas.webp?v=271")
             center top / cover no-repeat;
  filter:grayscale(1) contrast(.55) brightness(1.15);
  opacity:.12;
}
.red-form::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    var(--black) 0, var(--black) 165px,
    rgba(4,4,4,.72) 188px, rgba(4,4,4,0) 215px);
}
/* medido: el formulario entero mide 640 y arranca en x=400 sobre 1440 */
.red-form__inner{position:relative;z-index:2;width:min(640px, 100%);margin:0 auto}

.red-form__cab{text-align:center;margin-bottom:clamp(30px, 4vw, 46px)}
/* esta volanta NO trackea como las del resto de la pagina: en el original
   "EXPLORA LOS BENEFICIOS" mide 140px para 22 letras a 11px, que es Outfit 700
   con el tracking casi en cero. Si hereda el .26em de .red-volanta se pasa de
   largo y deja de coincidir. */
.red-form__cab .red-volanta{
  margin:0 0 6px;
  font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;line-height:1.45;
  color:var(--redf-oro);
}
.red-form__titulo{
  margin:0;
  /* Baskervville, no Georgia. El original dice Newsreader, que el proyecto no
     tiene; las dos son transicionales y --body es la que el sitio ya usa. */
  font-family:var(--body);font-weight:400;
  font-size:clamp(28px, 2.99vw, 43px);   /* a 1440 da los 43 medidos */
  line-height:1.16;letter-spacing:0;
  color:var(--redf-tinta);
  /* el original marca peso 500 y Baskervville solo trae el 400: el filete es
     lo unico que engrosa de verdad. En em para que el grosor optico aguante
     cuando el titulo baja a 28px en movil. */
  -webkit-text-stroke:.009em currentColor;
}
.red-form__lead{
  margin:0 auto;max-width:474px;   /* medido: la bajada corta en dos renglones */
  font-family:var(--ui);font-weight:200;font-size:14px;line-height:1.7;
  color:var(--redf-tinta);
}

/* El formulario va SIN tarjeta. En el original las columnas miden 310 y la
   caja entera 640, o sea 310 + 20 + 310. Si .form conservara sus 40px de
   padding las columnas darian 270 y no cerraria ninguna medida. */
.red-form .form{padding:0;border:0;border-radius:0;background:none}
.red-form .form__rejilla{grid-template-columns:repeat(2, minmax(0,1fr));gap:20px}
.red-form .form__campo{gap:6px}
/* medido: 14px peso 500 en gris, sin versalita y sin tracking. La etiqueta de
   /registro-comercio es una versalita de 9.5px con .22em: no es la misma. */
.red-form .form__etiqueta{
  font-family:var(--ui);font-size:14px;font-weight:500;
  letter-spacing:0;text-transform:none;line-height:1.2;
  color:var(--redf-rotulo);
}
.red-form .form__obl{color:var(--redf-rojo)}
/* OJO: .form__control trae "border:1px solid var(--reg-borde)" y --reg-borde
   se declara adentro de .registro{}, no en :root. En esta pagina la variable
   no existe, el shorthand queda invalido en tiempo de computo y los campos se
   estaban dibujando SIN BORDE. Por eso el borde de aca se escribe con un
   color propio y no heredando. */
.red-form .form__control{
  padding:11px 14px;
  border:1px solid var(--redf-linea);border-radius:4px;
  background:#FFF;color:var(--redf-tinta);
  font-family:var(--ui);font-weight:400;font-size:14px;line-height:1.4;
}
.red-form .form__control::placeholder{color:rgba(36,29,23,.42)}
.red-form .form__control:hover{border-color:rgba(36,29,23,.7)}
.red-form .form__control:focus{border-color:var(--redf-tinta);background:#FFF}
.red-form .form__control:user-invalid{border-color:var(--redf-rojo)}
.red-form .form__ayuda{
  font-family:var(--ui);font-weight:400;font-size:12px;line-height:1.45;
  color:var(--redf-ayuda);
}
/* Va DESPUES de .red-form .form__control a proposito: las dos reglas pesan
   igual (0,2,0) y el shorthand "background:#FFF" de arriba borra la flecha.
   Gana esta por orden. La flecha venia en marron claro, que sobre blanco no
   se ve: mismo SVG, trazo oscuro. */
.red-form .form__control--select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
.red-form .form__control--select option{background:#FFF;color:var(--redf-tinta)}
.red-form .form__control--select:has(option[value=""]:checked){color:rgba(36,29,23,.45)}
.red-form .form__control--area{min-height:104px}

.red-form .form__seccion{margin:0 0 34px}
.red-form .form__leyenda{
  margin:0 0 20px;padding:0 0 12px;
  border-bottom:1px solid rgba(36,29,23,.18);
  color:var(--redf-tinta);
}
.red-form .form__paso{border-color:rgba(36,29,23,.35);color:var(--redf-oro)}
.red-form .form__nota{margin:18px 0 0;font-size:12px;color:var(--redf-ayuda)}
/* medido: 16px peso 600, texto blanco y los 640 enteros de ancho. El boton de
   /registro-comercio es una pildora crema de 11px en versalita: no es este. */
.red-form .form__enviar{
  width:100%;margin-top:30px;padding:16px 28px;
  background:var(--red-tinta);color:#FFF;
  font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:none;
}

/* Los dos sellos ya caen dentro de la cola negra: por eso van con los colores
   de fondo oscuro que dio la medicion. Y van SIN recuadro — en el original no
   hay caja ni filete divisorio, son dos pares de lineas centrados con 214px
   de paso entre uno y otro. */
.red-form__sellos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:24px;
  margin-top:62px;   /* medido: del pie del boton al tope de "Confidencial" */
  border:0;border-radius:0;background:none;
  text-align:center;
}
.red-form__sello{padding:0}
.red-form__sello + .red-form__sello{border-left:0}
.red-form__sello-clave{
  display:block;margin:0;
  font-family:var(--body);font-style:normal;
  font-size:13px;line-height:1.4;color:#BEBEBE;
  -webkit-text-stroke:.013em currentColor;   /* el "peso 600" del original */
}
.red-form__sello-texto{
  display:block;
  font-family:var(--ui);font-size:14px;
  /* el original marca 800 y el proyecto solo llega a 700. Se declara 700 a
     mano para que el navegador use el archivo que existe y no invente una
     negrita sintetica encima. */
  font-weight:700;
  letter-spacing:0;text-transform:none;line-height:1.45;
  color:#9C8B78;   /* aca si va el tono medido tal cual: sobre negro da 6.4:1 */
}

/* --- 8 · cierre ---------------------------------------------------------- */
.red-cierre{
  /* 27px nomas: la cola negra del formulario ya venia oscura, el cierre
     arranca pegado y el corte entre las dos secciones no se ve */
  padding:clamp(20px, 1.88vw, 27px) var(--gutter) clamp(52px, 7vw, 88px);
  text-align:center;
}
/* medido: blanca, Outfit 400 a 13px y practicamente sin tracking (108px para
   "NO ES SOLO VINO"). No es la volanta dorada y espaciada del resto de la
   pagina: si hereda el .3em se va a 190px y deja de cerrar. */
.red-cierre__volanta{
  margin:0 0 20px;
  font-family:var(--ui);font-size:13px;font-weight:400;
  letter-spacing:.01em;text-transform:uppercase;line-height:1.5;
  color:#FFF;
}
.red-cierre__frase{margin:0;display:flex;flex-direction:column}
/* Las cuatro lineas miden LO MISMO en el original: 54px las cuatro. Lo que
   cambia no es el cuerpo sino el aire — los saltos medidos son 65, 49 y 48,
   o sea interlinea .9 en las tres ultimas y 16px extra despues de la primera.
   Baskervville, no Georgia. */
.red-cierre__linea{
  display:block;
  font-family:var(--body);color:#FFF;
  font-size:clamp(30px, 3.75vw, 54px);   /* a 1440 da los 54 medidos */
  line-height:.9;
}
.red-cierre__linea--primera{font-style:italic;margin-bottom:16px}
.red-cierre__linea--junta{font-style:italic}
/* la linea en versalita, al mismo cuerpo que las cursivas, se lee mas flaca:
   el filete minimo le devuelve el peso sin llamar a la negrita sintetica */
.red-cierre__linea--fuerte{
  text-transform:uppercase;letter-spacing:.01em;
  -webkit-text-stroke:.007em currentColor;
}
/* medido: el par de firmas ocupa 336x62. Con las proporciones de los dos PNG
   (1.78 y 2.47) a 62 de alto suman 264, asi que el hueco que sobra es 72. */
.red-cierre__firmas{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(30px, 5vw, 72px);
  margin:18px 0 0;
}
.red-cierre__firmas img{width:auto;height:clamp(34px, 4.31vw, 62px);opacity:.9}
/* El remate del original es UNA imagen de 912x242: isotipo, las cuatro
   categorias y "Red de negocios". Aca son tres piezas de texto vivo, pero
   ocupan el mismo rectangulo: 52 de isotipo + 56 de aire + 56 del riel + 56
   de aire + 21 del rotulo = 241. */
.red-cierre__isotipo{margin:clamp(34px, 4.8vw, 69px) 0 0;line-height:0}
/* TRAMPA DEL RESET: img{display:block} de la linea 58. Un <img> mas angosto
   que su parrafo queda pegado a la izquierda aunque el padre este centrado —
   el text-align no mueve un bloque. El margin-inline:auto es lo unico que lo
   centra, y hasta ahora este isotipo estaba corrido contra el borde. */
.red-cierre__isotipo img{
  width:auto;height:clamp(38px, 3.6vw, 52px);margin-inline:auto;opacity:.85;
}
.red-cierre__categorias{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 18px;
  width:min(912px, 100%);   /* el ancho de la imagen del original */
  margin:clamp(30px, 3.9vw, 56px) auto 0;padding:17px 0;
  border-top:1px solid var(--red-borde);border-bottom:1px solid var(--red-borde);
}
.red-cierre__categoria{
  font-family:var(--body);font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.3;color:var(--cream);
}
.red-cierre__categoria + .red-cierre__categoria::before{
  content:"//";margin-right:18px;color:var(--brown-claro);
}
.red-cierre__marca{
  margin:clamp(30px, 3.9vw, 56px) 0 0;
  font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.9;
  color:var(--muted);
}

/* ---------- red de negocios · dos columnas desde tablet ---------- */
@media (min-width:810px){
  /* align-items:stretch -el valor por defecto- es lo que hace que los dos
     paneles lleguen los dos al pie de la seccion y sus colores se toquen. */
  .red-nosotros{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  /* En tablet no caben tres: la columna quedaria en 222px y tres botellas
     miden 348. Van dos, y Pinnacle -una sola botella- ocupa el ancho entero
     en la segunda fila en vez de quedarse coja en media. */
  .red-portafolio__familias{grid-template-columns:repeat(2, minmax(0,1fr))}
  .red-familia:last-child{grid-column:1 / -1}
  .red-beneficios__cab{grid-template-columns:minmax(0,.88fr) minmax(0,1fr)}
  .red-tarjetas{grid-template-columns:repeat(4, minmax(0,1fr))}
  .red-datos{grid-template-columns:repeat(2, minmax(0,1fr))}
  .red-prensa__piezas{grid-template-columns:minmax(0,1fr) minmax(0,.46fr)}
}

/* ---------- red de negocios · escritorio ---------- */
/* El panel claro crece: pasa de arrancar al 61.7% del ancho a arrancar al
   51.7%. Solo de 1200 para arriba, y no en el @media de 810: la columna de
   texto se estrecha en la misma medida en que crece el panel, y en tablet
   eso dejaba el parrafo en 31 caracteres por linea a 834px y 39 a 1024
   -medido-, cuando la medida comoda de lectura son 45 a 75. De 1200 en
   adelante el parrafo lo sigue limitando su max-width:46ch y no la columna,
   asi que se queda en 45-46 caracteres y no se mueve nada. */
@media (min-width:1200px){
  .red-nosotros{grid-template-columns:minmax(0,1fr) minmax(0,.936fr)}
  /* los cuatro datos en fila. En tablet van 2x2: a cuatro columnas, "500 Mil"
     no entra en una celda de 1180/4 sin partirse. */
  .red-datos{grid-template-columns:repeat(4, minmax(0,1fr))}
  /* las tres colecciones, cada una en su columna, como en /vinos */
  .red-portafolio__familias{grid-template-columns:repeat(3, minmax(0,1fr))}
  .red-familia:last-child{grid-column:auto}
  /* 23%, no un valor en px: los porcentajes de padding -tambien el de
     arriba- se resuelven contra el ANCHO del contenedor, asi que el hueco
     crece con el panel y los cuatro lados siguen siendo iguales solos.
     El 23% no es arbitrario: en el sitio original la foto mide 350 de un
     panel de 648, el 54%, que es justo lo que deja un hueco del 23% por
     lado. A 1440 la foto queda en 376px. */
  .red-nosotros__figura{padding:23%}
}

/* ---------- red de negocios · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .red-hero{min-height:max(520px, calc(100vw * .5518))}
  .red-tarjeta{min-height:250px}
}

/* ---------- red de negocios · mobile ---------- */
@media (max-width:809px){
  .red-hero{
    min-height:max(480px, calc(100vw * 1.06));
    padding-bottom:clamp(40px, 7vh, 64px);
  }
  .red-hero__foto{object-position:center 38%}
  .red-hero::after{background-size:100% 150px, 100% 64%}
  .red-intro__bajada{font-size:14px}
  .red-nosotros__parrafo{font-size:14px}
  /* la foto primero y el texto despues se lee peor: el texto manda */
  /* en una sola columna la foto no tiene al lado por donde quedarse: vuelve
     a fluir con el resto y se pone primera, como portada del apartado */
  .red-nosotros__figura{order:2}
  .red-nosotros__foto{position:static}
  .red-nosotros__relato{gap:38px}
  .red-tarjeta{min-height:220px}
  .red-tarjeta__cuerpo{padding:18px 18px 20px}
  .red-prensa__cab{grid-template-columns:1fr;text-align:center;gap:8px}
  .red-prensa__fecha{text-align:center}
  /* Estas tres HAY que volver a escribirlas con .red-form adelante. Las de
     .form del bloque de /registro-comercio (linea ~2707) pesan 0,1,0 y las de
     arriba 0,2,0: no las pisan por mas que esten dentro de una media query.
     Sin esto el formulario se queda en dos columnas en el telefono. */
  .red-form .form__rejilla{grid-template-columns:1fr;gap:18px}
  .red-form .form__seccion{margin-bottom:28px}
  .red-form .form__leyenda{font-size:17px;margin-bottom:18px}
  /* los sellos apilados: con 50px de aire el boton sigue quedando por encima
     del arranque del degradado de la cola */
  .red-form__sellos{flex-direction:column;gap:22px;margin-top:50px}
  .red-form__sello + .red-form__sello{border-left:0;border-top:0}
  /* la de .red-cierre__firmas img{height:28px} se puede borrar: el clamp de
     arriba ya baja a 34 y las firmas a 28 quedaban ilegibles */
  .red-cierre__categoria{font-size:13px}
  .red-cierre__categoria + .red-cierre__categoria::before{margin-right:10px}
}

/* ===========================================================
   EL PUENTE — de /registro-comercio a /red-negocios-arg-2025
   Vive en el riel izquierdo del registro comercial, entre el aviso del
   telefono y el enlace Volver.

   Es a proposito lo mas chico que puede ser y seguir diciendo algo: la
   pagina ya pide 17 campos, asi que el riel no puede tener un segundo
   bloque con volanta, titulo y lista compitiendo con el formulario. Queda
   un filete, una linea y el enlace.

   EL ENLACE REUSA .rec-volver, la misma clase del "Volver" de abajo. No es
   una imitacion: es el mismo objeto, asi que comparten tamano, tracking,
   versalita y el gap de 10px, y las dos flechas quedan alineadas en la
   misma columna. Solo se cambian dos cosas.

   POR QUE HAY QUE REDECLARAR EL COLOR: .rec-volver pinta con --rec-suave y
   --rec-tinta, que estan declaradas dentro de la regla .recursos{} y no en
   :root. Aca no existen, la declaracion es invalida en tiempo de computo y
   el color termina heredando. Por eso .puente__ir vuelve a declararlo, igual
   que ya hace .registro__volver. Las dos reglas pesan lo mismo que las de
   .rec-volver (0,1,0) y ganan por venir despues en el archivo.
   =========================================================== */
.puente{
  margin:0 0 18px;padding-top:20px;
  border-top:1px solid rgba(163,126,85,.28);
}
.puente__texto{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:13px;line-height:1.6;
  color:rgba(255,244,219,.72);
}
/* Los dos enlaces en una sola fila, uno en cada extremo. space-between los
   empuja contra los bordes de la columna; el gap solo actua si la columna se
   angosta tanto que se tocarian. Medido: "Volver" ~88px y "Conocer mas"
   ~118px, o sea 206px de los 319 que quedan en un movil de 375. */
.registro__acciones{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  /* el formulario venia pegado a los botones -medido: 0px de separacion-.
     El margen inferior es el que abre ese aire. */
  margin:0 0 clamp(26px, 4vw, 40px);
}
.puente__ir{margin-top:0;color:var(--muted)}
.puente__ir:hover{color:var(--cream)}
/* .recursos svg{flex:none} esta acotado a .recursos y no llega hasta aca */
.puente__ir svg{flex:none}
/* la flecha apunta al otro lado que la de "Volver", y se va al otro lado */
.puente__ir:hover svg{transform:translateX(4px)}

/* ===========================================================
   NOVEDADES — el indice (/novedades) y la nota (/novedades/<slug>)

   Las dos plantillas comparten el mismo panel crema y la misma familia
   tipografica que el resto del sitio; lo que cambia es el ritmo. El indice
   respira ancho: una nota destacada grande y las otras tres en fila. La nota
   hace lo contrario y se angosta a una medida de lectura, porque un texto
   largo a 1120px de ancho no se lee, se escanea.
   =========================================================== */
.nov,
.art{
  --nov-crema:#F7F4EF;
  --nov-tinta:#241D17;                /* 14.9:1 sobre el crema */
  --nov-suave:rgba(36,29,23,.72);
  --nov-oro:#8A6C48;                  /* 4.6:1 sobre el crema */
  --nov-filete:rgba(36,29,23,.16);
  background:var(--nov-crema);
}

/* ---------------------------------------------------------- el indice --- */
.nov{padding:calc(97px + 76px) var(--gutter) clamp(70px, 9vw, 120px)}
.nov__cab{width:min(720px, 100%);margin:0 auto clamp(30px, 4vw, 46px);text-align:center}
.nov__volanta{
  margin:0 0 14px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--nov-oro);
}
.nov__titular{
  margin:0 0 16px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(32px, 4.4vw, 58px);line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--nov-tinta);
}
.nov__lead{
  margin:0 auto;max-width:54ch;
  font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.7;
  color:var(--nov-suave);
}
.nov__sellos{margin:0 auto clamp(44px, 6vw, 72px);line-height:0;text-align:center}
/* el reset de la linea 58 pone img{display:block}: sin margin-inline:auto la
   tira se va al borde izquierdo por mas text-align:center que tenga el padre */
.nov__sellos-img{
  width:min(100%, 685px);height:auto;margin-inline:auto;
  opacity:.5;filter:invert(1);      /* la tira es tinta blanca: sobre crema va dada vuelta */
}

.nov__lista{
  list-style:none;margin:0 auto;padding:0;
  display:grid;gap:clamp(30px, 4vw, 48px);
  width:min(1120px, 100%);
}
.nov__enlace{display:block;color:inherit;text-decoration:none}
.nov__figura{
  margin:0 0 18px;overflow:hidden;border-radius:4px;
  background:rgba(36,29,23,.05);
}
.nov__foto{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--curva);
}
/* el unico movimiento del hover: la foto respira y la flecha avanza. Nada
   de sombras ni de levantar la tarjeta, que es el gesto de otro tipo de sitio */
.nov__enlace:hover .nov__foto{transform:scale(1.03)}
.nov__fuente{
  margin:0 0 10px;
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--nov-oro);
}
.nov__titulo{
  margin:0 0 12px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(20px, 1.9vw, 25px);line-height:1.2;
  letter-spacing:.01em;color:var(--nov-tinta);
}
.nov__copete{
  margin:0 0 16px;
  font-family:var(--ui);font-weight:300;font-size:13.5px;line-height:1.7;
  color:var(--nov-suave);
}
.nov__leer{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--nov-tinta);
  padding-bottom:4px;border-bottom:1px solid var(--nov-filete);
  transition:border-color var(--t-corta) var(--curva);
}
.nov__leer svg{flex:none;width:14px;height:14px;transition:transform var(--t-corta) var(--curva)}
.nov__enlace:hover .nov__leer{border-bottom-color:var(--nov-tinta)}
.nov__enlace:hover .nov__leer svg{transform:translateX(4px)}

/* ------------------------------------------------------------- la nota --- */
.art{padding:calc(97px + 56px) var(--gutter) clamp(70px, 9vw, 110px)}
/* La medida de lectura manda: 660px a 17px son ~72 caracteres por linea, que
   es el rango comodo. La cabecera y la foto se permiten mas ancho que el
   cuerpo, y de ese escalonado sale el aire de la pagina. */
.art__inner{width:min(1040px, 100%);margin:0 auto}
/* La ruta iba pegada a la izquierda del riel de 1040px mientras la volanta,
   el titulo y la bajada van centrados: quedaba colgada de una esquina, sin
   nada a plomo con ella. Se centra sobre el mismo eje que el resto de la
   cabecera. El centrado va en el CONTENEDOR y no en el <ol>: el <ol> ya se
   dimensiona por contenido, asi que lo que hay que mover es el item flex. */
.art__migas{margin:0 0 clamp(30px, 4vw, 48px);display:flex;justify-content:center}
.art .migas__ruta{justify-content:center}
.art .migas__ruta a,
.art .migas__ruta span{font-weight:500;letter-spacing:.16em}
.art .migas__ruta a{color:var(--nov-suave)}
.art .migas__ruta a:hover{color:var(--nov-tinta)}
.art .migas__ruta [aria-current]{color:var(--nov-tinta)}
/* El separador entre migas se heredaba en tinta CREMA -rgba(255,244,219,.26),
   linea 844- porque en el resto del sitio se dibuja sobre negro. Sobre el
   crema de este panel era literalmente invisible, y las tres migas se leian
   como tres textos sueltos en vez de una ruta. Mismo arreglo que ya tiene
   .recursos, y con el mismo alfa .28 para que las dos paginas claras del
   sitio tengan el filete del mismo peso. */
.art .migas__ruta li:not(:last-child)::after{background:rgba(36,29,23,.28)}

.art__cab{width:min(760px, 100%);margin:0 auto clamp(30px, 4vw, 44px);text-align:center}
.art__meta{
  margin:0 0 18px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--nov-oro);
}
.art__titulo{
  margin:0 0 20px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(30px, 4vw, 52px);line-height:1.08;
  letter-spacing:.01em;color:var(--nov-tinta);
  text-wrap:balance;                 /* el titular no deja una palabra sola abajo */
}
.art__bajada{
  margin:0 auto;max-width:48ch;
  font-family:var(--ui);font-weight:200;font-size:clamp(16px, 1.4vw, 19px);
  line-height:1.6;color:var(--nov-tinta);
}
.art__figura{
  margin:0 0 clamp(34px, 5vw, 56px);
  overflow:hidden;border-radius:4px;
}
.art__foto{display:block;width:100%;height:auto}

.art__cuerpo{width:min(660px, 100%);margin:0 auto}
.art__cuerpo p{
  margin:0 0 22px;
  font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.8;
  color:rgba(36,29,23,.86);
  text-wrap:pretty;                  /* mata las viudas al final de cada parrafo */
}
.art__cuerpo p:last-child{margin-bottom:0}
.art__cuerpo strong{font-weight:500;color:var(--nov-tinta)}
/* La cita sale de la medida del cuerpo y se centra: es el unico momento en
   que el texto ocupa mas ancho que el resto, y por eso funciona como respiro.
   Baskervville no tiene mas peso que el 400, asi que el enfasis lo da el
   cuerpo grande y la cursiva, nunca un font-weight que no existe. */
.art__cita{
  margin:clamp(30px, 4vw, 44px) 0;padding:clamp(24px, 3vw, 32px) 0;
  border-top:1px solid var(--nov-filete);
  border-bottom:1px solid var(--nov-filete);
  text-align:center;
}
.art__cita p{
  margin:0;
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:clamp(20px, 2.1vw, 27px);line-height:1.4;
  letter-spacing:.01em;color:var(--nov-tinta);
}

.art__pie{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:min(660px, 100%);margin:clamp(44px, 6vw, 72px) auto 0;
  padding-top:clamp(24px, 3vw, 34px);
  border-top:1px solid var(--nov-filete);
}
/* reusa .rec-volver, igual que el "Volver" del registro: mismo cuerpo y mismo
   tracking. El color hay que redeclararlo porque --rec-suave vive dentro de
   .recursos{} y aca no existe. */
.art__volver{margin-top:0;color:var(--nov-suave);flex:none}
.art__volver:hover{color:var(--nov-tinta)}
.art__volver svg{flex:none}
.art__siguiente{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  text-align:right;min-width:0;
}
.art__siguiente-rotulo{
  font-family:var(--ui);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--nov-oro);
}
.art__siguiente-titulo{
  font-family:var(--body);font-size:15px;line-height:1.25;color:var(--nov-tinta);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-corta) var(--curva);
}
.art__siguiente:hover .art__siguiente-titulo{border-bottom-color:var(--nov-tinta)}

/* ---------- novedades · desde tablet ---------- */
@media (min-width:810px){
  /* la destacada al ancho completo y las otras tres en fila */
  .nov__lista{grid-template-columns:repeat(3, minmax(0,1fr))}
  .nov__item--destacada{grid-column:1 / -1}
  .nov__item--destacada .nov__enlace{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(26px, 3.5vw, 48px);align-items:center;
  }
  .nov__item--destacada .nov__figura{margin:0}
  .nov__item--destacada .nov__titulo{font-size:clamp(26px, 2.8vw, 36px)}
  .nov__item--destacada .nov__copete{font-size:15px}
  /* las tres chicas comparten alto de foto para que la fila quede pareja */
  .nov__item:not(.nov__item--destacada) .nov__figura{aspect-ratio:4 / 3}
  /* un filete separa la destacada de la fila, como en un diario */
  .nov__item--destacada{padding-bottom:clamp(30px, 4vw, 48px);border-bottom:1px solid var(--nov-filete)}
}

/* ---------- novedades · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .nov{padding:calc(var(--nav-h) + 62px) var(--gutter) 90px}
  .art{padding:calc(var(--nav-h) + 48px) var(--gutter) 90px}
}

/* ---------- novedades · mobile ---------- */
@media (max-width:809px){
  .nov{padding:calc(var(--nav-h) + 44px) var(--gutter) 72px}
  .art{padding:calc(var(--nav-h) + 36px) var(--gutter) 72px}
  /* La regla global de mobile (linea ~1135) saca las migas del flujo
     -position:absolute con un top fijo- y ademas esconde la ruta entera,
     porque en la ficha de vino la reemplaza su pildora "volver a vinos".
     La nota NO tiene esa pildora: heredaba el absolute y se quedaba con una
     caja de 0x0 flotando sobre el titulo y CERO migas en pantalla. Se
     devuelven al flujo, igual que hace .recursos en su propio bloque. */
  .art .ficha__migas{
    position:static;top:auto;left:auto;z-index:auto;
    display:flex;justify-content:center;margin:0 0 24px;
  }
  .art .migas__ruta{display:flex;flex-wrap:wrap;justify-content:center;row-gap:4px}
  .nov__lead{font-size:14px}
  .nov__item:not(:last-child){padding-bottom:30px;border-bottom:1px solid var(--nov-filete)}
  .nov__figura{aspect-ratio:16 / 10}
  .art__cuerpo p{font-size:16px;line-height:1.75}
  /* en el telefono los dos enlaces del pie no entran en una linea */
  .art__pie{flex-direction:column;align-items:flex-start;gap:22px}
  .art__siguiente{align-items:flex-start;text-align:left}
}

/* ===========================================================
   CONFIRMACION DE REGISTRO
   /registro-membresia-confirmacion  y  /registro-comercio-confirmacion

   Son las dos paginas a las que Zoho manda al cliente despues de enviar el
   formulario. La url se carga a mano dentro de Zoho, asi que estas paginas
   no dependen de nada del sitio: tienen que sostenerse solas.

   QUE TENIA MAL LA ANTERIOR, medido sobre la captura del cliente:
     - el bloque de texto medía 632x212 en un lienzo de 2000x1114, o sea el
       6% de la pantalla. El 94% era ilustracion lavada sin nada encima y el
       43% superior estaba vacio antes de la primera palabra.
     - no tenia nav, ni pie, ni un solo enlace: el cliente terminaba de
       registrarse y quedaba varado. Sin el nav tampoco parecia del sitio.
     - el texto estaba en tuteo ("tus datos han sido procesados") contra el
       voseo del resto, y "a la brevedad" no dice nada.
     - era UNA sola pagina para los dos formularios, asi que el mensaje tenia
       que ser generico por fuerza.

   Se queda con lo unico que estaba bien -el crema y la filigrana de los
   Andes- y se reconstruye encima. La filigrana ya existe en el proyecto
   (la usan .recursos y .registro), asi que no entra ningun asset nuevo.
   =========================================================== */
.confirma{
  /* Fichas de color del tramo. El oro es #866746 y NO el #8A6C48 que usa
     /novedades: ese da 4.43:1 sobre el crema y no llega al 4.5 que pide el
     texto chico. Este da 4.74:1. */
  --conf-tinta:#241D17;                 /* 15.15:1 sobre el crema */
  --conf-suave:rgba(36,29,23,.72);      /*  4.91:1 */
  --conf-oro:#866746;                   /*  4.74:1 */
  --conf-filete:rgba(36,29,23,.14);
  --conf-borde:rgba(143,107,70,.34);
  --conf-ficha:#fff;
  --conf-sombra:0 1px 2px rgba(26,26,26,.04);
  --conf-sombra-alta:0 10px 26px rgba(26,26,26,.08);

  position:relative;overflow:hidden;
  background:#F7F4EF;color:var(--conf-tinta);
  /* el literal 97px es a proposito: --nav-h solo existe dentro de las
     media queries */
  padding:calc(97px + 64px) var(--gutter) 96px;
}
/* La filigrana va DETRAS del contenido y acotada arriba, no como fondo de
   pagina entera: ahi estaba el error de la version anterior, que la ponia a
   pantalla completa y dejaba el texto flotando en el medio de la nada. */
.confirma::before{
  content:"";position:absolute;inset:0 0 auto 0;height:560px;
  background:url("../img/filigrana-andes-pelleriti-priore.webp?v=271") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 38%,transparent 100%);
  mask-image:linear-gradient(#000 38%,transparent 100%);
  pointer-events:none;
}
.confirma__inner{position:relative;width:min(1100px,100%);margin:0 auto}

/* migas sobre fondo claro: el separador se hereda en tinta CREMA, que sobre
   este fondo es invisible. Mismo arreglo que .recursos y .art. */
.confirma .ficha__migas{margin:0 0 36px;display:flex}
.confirma .migas__ruta a,
.confirma .migas__ruta span{font-size:10px;font-weight:600;letter-spacing:.2em}
.confirma .migas__ruta a{color:var(--conf-suave)}
.confirma .migas__ruta a:hover{color:var(--conf-tinta)}
.confirma .migas__ruta [aria-current]{color:var(--conf-tinta)}
.confirma .migas__ruta li:not(:last-child)::after{background:rgba(36,29,23,.28)}

/* ---------- cabecera ---------- */
.confirma__cab{max-width:700px;margin:0 0 clamp(38px,5vw,56px)}
/* El sello es lo unico que confirma de un vistazo que salio bien. Va chico y
   trazado, no un tilde verde gigante: esto es una bodega, no un checkout. */
.confirma__sello{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin:0 0 22px;
  border:1px solid var(--conf-borde);border-radius:50%;
  background:var(--conf-ficha);box-shadow:var(--conf-sombra);
  color:var(--conf-oro);
}
.confirma__sello svg{width:20px;height:20px;display:block}
.confirma__eyebrow{
  margin:0 0 10px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--conf-oro);
}
/* Baskervville solo trae el peso 400: el enfasis sale del cuerpo y de la
   versalita, nunca de un font-weight que no existe. */
.confirma__titulo{
  margin:0 0 18px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(30px,4vw,50px);line-height:1.02;
  letter-spacing:.04em;text-transform:uppercase;color:var(--conf-tinta);
  text-wrap:balance;
}
.confirma__lead{
  margin:0 0 12px;max-width:58ch;
  font-family:var(--ui);font-weight:300;font-size:15.5px;line-height:1.7;
  color:var(--conf-suave);
  text-wrap:pretty;
}
.confirma__lead:last-child{margin-bottom:0}
.confirma__lead strong{font-weight:500;color:var(--conf-tinta)}

/* ---------- que pasa ahora ----------
   Es el bloque que mata la ansiedad, y el que la pagina anterior no tenia.
   Tres pasos numerados: el cliente acaba de dar sus datos y lo unico que
   quiere saber es quien le escribe y por donde. */
.confirma__rotulo{
  margin:0 0 18px;
  font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--conf-oro);
}
.confirma__pasos{
  list-style:none;margin:0 0 clamp(34px,4.5vw,48px);padding:0;
  display:grid;gap:14px;
}
.confirma__paso{
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
  padding:20px 22px;
  background:var(--conf-ficha);
  border:1px solid var(--conf-borde);border-radius:6px;
  box-shadow:var(--conf-sombra);
}
.confirma__n{
  grid-row:1 / span 2;
  font-family:var(--body);font-size:16px;line-height:1;
  color:var(--conf-oro);padding-top:2px;
}
.confirma__paso-t{
  margin:0 0 5px;
  font-family:var(--ui);font-size:14px;font-weight:500;
  letter-spacing:.01em;color:var(--conf-tinta);
}
.confirma__paso-d{
  margin:0;
  font-family:var(--ui);font-weight:300;font-size:13.5px;line-height:1.6;
  color:var(--conf-suave);
}

/* ---------- el aviso del telefono ----------
   Reusa .aviso, que vive en el tramo OSCURO de /registro: ahi el texto es
   crema y el borde va pensado contra negro. Sobre el crema hay que darlo
   vuelta entero, por eso se redeclara todo y no solo el color. */
.confirma .aviso{
  margin:0 0 clamp(38px,5vw,54px);
  border-color:var(--conf-borde);
  background:rgba(143,107,70,.07);
}
.confirma .aviso__icono{color:var(--conf-oro)}
.confirma .aviso__texto{color:var(--conf-tinta)}
.confirma .aviso__tel{color:var(--conf-oro);border-bottom-color:var(--conf-borde)}
.confirma .aviso__tel:hover{color:var(--conf-tinta)}

/* ---------- salidas ----------
   La pagina anterior era un callejon sin salida: cero enlaces. Estas tres
   tarjetas son la unica razon por la que el cliente sigue en el sitio en
   vez de cerrar la pestana. */
.confirma__salidas{
  padding-top:clamp(28px,3.5vw,38px);
  border-top:1px solid var(--conf-filete);
}
.confirma__enlaces{display:grid;gap:12px}
.confirma__enlace{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  padding:18px 22px;color:inherit;
  background:var(--conf-ficha);
  border:1px solid var(--conf-borde);border-radius:6px;
  box-shadow:var(--conf-sombra);
  transition:transform var(--t-corta) var(--curva),
             box-shadow var(--t-corta) var(--curva),
             border-color var(--t-corta) var(--curva);
}
.confirma__enlace:hover{
  transform:translateY(-2px);
  box-shadow:var(--conf-sombra-alta);
  border-color:rgba(143,107,70,.6);
}
.confirma__enlace-t{
  display:block;margin:0 0 3px;
  font-family:var(--body);font-size:17px;line-height:1.2;color:var(--conf-tinta);
}
.confirma__enlace-d{
  display:block;margin:0;
  font-family:var(--ui);font-weight:300;font-size:13px;line-height:1.5;
  color:var(--conf-suave);
}
.confirma__flecha{flex:none;color:var(--conf-oro);line-height:0}
.confirma__flecha svg{
  width:18px;height:18px;display:block;
  transition:transform var(--t-corta) var(--curva);
}
.confirma__enlace:hover .confirma__flecha svg{transform:translateX(4px)}

/* ---------- confirmacion · desde tablet ---------- */
@media (min-width:810px){
  .confirma__pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .confirma__paso{grid-template-columns:1fr;gap:0}
  .confirma__n{grid-row:auto;margin-bottom:12px}
  .confirma__enlaces{grid-template-columns:repeat(3,minmax(0,1fr))}
  .confirma__enlace{grid-template-columns:1fr;align-items:start;gap:14px}
  .confirma__flecha{margin-top:2px}
}

/* ---------- confirmacion · tablet ---------- */
@media (min-width:810px) and (max-width:1199px){
  .confirma{padding:calc(var(--nav-h) + 54px) var(--gutter) 80px}
  .confirma::before{height:460px}
}

/* ---------- confirmacion · mobile ---------- */
@media (max-width:809px){
  .confirma{padding:calc(var(--nav-h) + 40px) var(--gutter) 68px}
  .confirma::before{height:360px}
  .confirma__cab{margin-bottom:34px}
  .confirma__lead{font-size:14.5px}
  /* la regla global de mobile saca las migas del flujo -position:absolute con
     un top fijo- porque en la ficha de vino las reemplaza su pildora "volver".
     Aca no hay pildora: sin esto la pagina se queda sin migas y con una caja
     de 0x0 flotando. Mismo arreglo que .recursos y .art. */
  .confirma .ficha__migas{
    position:static;top:auto;left:auto;z-index:auto;
    display:flex;margin:0 0 26px;
  }
  .confirma .migas__ruta{display:flex;flex-wrap:wrap;row-gap:4px}
}

/* ===========================================================
   MEDALLA DE TEXTO — Supremo
   Seis vinos llevan un puntaje numerico; Supremo no: en la botella su aro
   dice "Perfection Pursued". Antes eso se resolvia no dibujandole medalla,
   y quedaba como el unico vino sin aro, que se leia como un olvido y no como
   una decision. Ahora lleva el MISMO aro, en el mismo lugar y del mismo
   tamano: lo unico que cambia es que adentro va una leyenda en dos lineas.
   =========================================================== */
.ficha__puntos--texto,
.vino__puntos--texto{
  /* el numero se centra con un margen negativo calculado para la tinta de
     las cifras; el texto no lo necesita, asi que se anula */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
}
.ficha__puntos-linea,
.vino__puntos-linea{
  display:block;
  font-family:var(--ui);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.15;
  text-align:center;
  /* heredaba el color del texto de la pagina y salia casi negro, mientras
     las otras seis medallas van en gris. El aro tiene que leerse como una
     familia: el mismo gris que las cifras. */
  color:#ACACAC;
}
/* en la ficha el aro va sobre fondo oscuro y toma el color del contenedor,
   igual que hace la cifra con "color:inherit" */
.ficha__puntos-linea{color:inherit}
/* La ficha tiene el aro grande: 73px de diametro. "PERFECTION" son diez
   letras con tracking ancho, asi que el cuerpo lo fija la linea mas larga y
   no el gusto: a 8px ocupa 52px, que deja 10px de aire por lado adentro
   del aro. */
.ficha__puntos-linea{font-size:8px}
/* Habia DOS cuerpos a mano, 5.6px arriba de 1200 y 4.8px abajo, con un
   comentario que los justificaba diciendo que el aro medía "de 46 a 56px
   segun el ancho". Eso ya no era cierto: .vino__puntos mide 46 en los tres
   breakpoints. El 5.6 era el fosil de un aro de 56 que ya no existe -5.6/56
   da 10.00% exacto- y sobre el aro real de 46 hacia que "PERFECTION" ocupara
   el 86.6% del diametro y rozara el trazo, mientras en la ficha ocupa 75.1%.
   Ahora sale de --aro con la proporcion de la ficha, uno solo para todos los
   anchos, y el tracking lo pone la regla compartida de la familia (.14em). */
.vino__puntos-linea{font-size:calc(var(--aro) * .10137)}

/* ===========================================================
   MEDALLA — CENTRADO OPTICO
   Medido, el contenido YA estaba centrado en la caja: 14.98px de aire arriba
   y 14.57 abajo, o sea 0.41 de diferencia. Geometricamente no habia nada que
   corregir. Pero el grupo tiene una masa pesada arriba -la cifra a 51px- y
   una linea fina abajo -"PUNTOS" a 6.6px-, y el ojo centra sobre el PESO, no
   sobre el rectangulo. Por eso se leia alto.
   El desplazamiento es optico y va en transform para no mover la caja ni
   recalcular el centrado: 2px sobre un aro de 73, y 1.3 sobre el de 46, que
   es la misma proporcion.
   =========================================================== */
.ficha__puntos-num,
.ficha__puntos-txt,
.ficha__puntos-linea{transform:translateY(calc(var(--aro) * .0274))}
.vino__puntos-num,
.vino__puntos-txt,
.vino__puntos-linea{transform:translateY(calc(var(--aro) * .0274))}

/* ===========================================================
   MEDALLA DE TEXTO — CENTRADO PROPIO
   La de Supremo no es la misma pieza que las de puntaje y no puede heredar
   sus correcciones. Medido en el aro de 73:

   1. VERTICAL. Arrastraba el empujon optico de 2px, que existe porque en las
      otras medallas hay una masa pesada arriba -la cifra a 51px- y una linea
      fina abajo. Aca las DOS lineas pesan lo mismo, asi que el centro optico
      y el geometrico coinciden y ese empujon solo la bajaba de mas:
      28.30 de aire arriba contra 24.30 abajo. Sin el, 26.30 y 26.30.

   2. HORIZONTAL. El letter-spacing agrega su espacio DESPUES de cada letra,
      tambien de la ultima, asi que la caja termina 1.12px mas ancha que la
      tinta por la derecha y el dibujo queda medio pixel corrido a la
      izquierda. La caja medía 0.00 de desvio -estaba centrada- y aun asi se
      veia desalineado: lo que hay que centrar es la TINTA, no la caja.
      El padding-left iguala ese sobrante del lado opuesto.
   =========================================================== */
.ficha__puntos--texto .ficha__puntos-linea,
.vino__puntos--texto .vino__puntos-linea{transform:none}
.ficha__puntos-linea,
.vino__puntos-linea{padding-left:.14em}
/* "PERFECTION" son diez letras con tracking dentro de un aro de 73: a 8px
   ocupaba 59.3, o sea el 81% del diametro, y quedaba pegada al trazo. A 7.4
   baja a ~55 y respira sin perder cuerpo. */
.ficha__puntos-linea{font-size:calc(var(--aro) * .10137)}

/* La leyenda del medallon chico sube de 500 a 600. Outfit trae los seis
   pesos como archivo propio (200, 300, 400, 500, 600 y 700), asi que es
   tinta de verdad y no la negrita sintetica que el navegador dibujaria si
   el peso no existiera: eso engorda el trazo de forma sucia y es el problema
   que ya arrastra Baskervville, que solo tiene el 400.
   Solo el chico: a 5.6px la leyenda pierde cuerpo y necesita mas peso para
   sostenerse. En la ficha va a 7.4px y con 500 se lee bien; subirla ahi la
   haria pesada al lado de la cifra, que no puede acompanar porque Baskervville
   no tiene con que. */
.vino__puntos-linea{font-weight:600}


/* ===========================================================
   RED · QUIENES SOMOS — EL BLOQUE EN LECTURA SE ENCIENDE
   La foto se queda fija al costado; el efecto acompana eso: el bloque que
   esta en la franja de lectura va a intensidad plena y los otros dos se
   apagan. Asi el ojo sabe donde esta sin que nada se mueva, que es lo que
   pide una foto quieta al lado.
   El estado lo pone el js con .esta-en-lectura. Cuelga de .js para que sin
   javascript los tres se vean a plena intensidad y no queden apagados para
   siempre: asi es como tiene que fallar.
   =========================================================== */
/* SE APAGAN LOS HIJOS, NO EL BLOQUE. Es a proposito y costo un error:
   la opacidad del bloque ya la maneja la animacion de entrada
   -.js .aparece{opacity:0} y .aparece.is-in{opacity:1}-, y una regla de
   lectura sobre la MISMA propiedad gana por especificidad y la anula: el
   bloque aparecia al 34% en vez de entrar desde cero. Se veia como si la
   entrada no existiera.
   Apagando los hijos, las dos capas se multiplican sin pisarse: la entrada
   sigue llevando el bloque de 0 a 1, y la lectura lleva su contenido de .4
   a 1 por dentro. */
.js .red-nosotros__bloque > *{
  transition:opacity .55s var(--curva);
}
.js .red-nosotros__bloque:not(.esta-en-lectura) > *{
  opacity:.4;
}
@media (prefers-reduced-motion:reduce){
  .js .red-nosotros__bloque > *{transition:none}
  /* sin movimiento tampoco conviene el parpadeo de intensidad */
  .js .red-nosotros__bloque:not(.esta-en-lectura) > *{opacity:1}
}

/* ===========================================================================
   EL CENTRO DE RECURSOS, CON EL LENGUAJE DEL PORTAL
   ===========================================================================
   Fondo blanco, los tokens del portal y sus tamanos. Las tipografias ya
   coincidian -el tramo usaba var(--body) que es Baskervville y var(--ui) que
   es Outfit, las mismas dos del portal-, asi que lo que cambia es el color,
   las superficies, las medidas y las formas.

   Esto es corto por una razon: el tramo estaba escrito con fichas de color
   sobre .recursos, pensadas para poder darlo vuelta entero sin tocar sus 110
   reglas. Aqui se aprovecha eso: se reasignan las fichas y se ajusta solo la
   tipografia de los cuatro elementos de cabecera.

   Los tokens --t-* salen de css/tokens-portal.css, que cargan tanto el portal
   como estas paginas: una sola copia para los dos. */
.recursos{
  /* texto */
  --rec-tinta:var(--t-tinta);
  --rec-suave:var(--t-suave);
  --rec-lead:var(--t-suave);
  --rec-acento:var(--t-acento);
  --rec-borde:var(--t-borde);
  /* superficies: blanco del portal, y el gris de sus tarjetas para lo que
     antes era crema */
  --rec-fondo:var(--t-fondo);
  --rec-ficha:var(--t-fondo);
  --rec-hover:var(--t-fondo-3);
  --rec-anidado:var(--t-fondo-2);
  --rec-anidado-hover:var(--t-fondo);
  --rec-filete:var(--t-borde);
  --rec-filete-suave:var(--t-borde);
  --rec-migas-sep:var(--t-borde-fuerte);
  --rec-pend:var(--t-borde-fuerte);
  /* El portal no usa sombras: declara la elevacion con UN borde de 1px. Dos a
     la vez -borde fino bajo sombra ancha- es el tic que el propio detector de
     interfaz marca, asi que aqui las sombras se apagan y manda el filete. */
  --rec-sombra:none;
  --rec-sombra-alta:none;
  --rec-sombra-fila:none;
  --rec-sombra-acc:none;
}

/* La filigrana no va: el portal no lleva texturas de fondo, y sobre blanco la
   marca de agua ensucia en vez de dar profundidad. */
.recursos::before{display:none}

/* --- tipografia, a la escala del portal ------------------------------------
   La cabecera del tramo pasa a la del portal: volanta de 11px con el mismo
   espaciado, titulo en Baskervville sin versalitas ni tracking abierto -el
   portal no las usa- y bajada a 16px. */
.recursos__eyebrow,
.recursos__label{
  font-family:var(--t-ui);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-suave);
}
.recursos__titulo{
  font-family:var(--t-display);font-weight:400;
  font-size:clamp(32px, 5vw, 54px);line-height:1.06;
  letter-spacing:0;text-transform:none;color:var(--t-tinta);
}
.recursos__lead{
  font-family:var(--t-ui);font-weight:400;
  font-size:16px;line-height:1.62;color:var(--t-suave);
}

/* titulos de tarjeta y de fila, con la medida de .t-seccion__titulo y
   .t-ficha__nombre del portal */
.rec-cat__nombre{
  font-family:var(--t-display);font-weight:400;
  font-size:clamp(22px, 2.8vw, 32px);line-height:1.1;letter-spacing:0;
  text-transform:none;
}
.rec-item__titulo,
.rec-res__titulo{
  font-family:var(--t-display);font-weight:400;
  font-size:17px;line-height:1.25;letter-spacing:0;text-transform:none;
}
.rec-cat__desc,
.rec-item__meta,
.rec-res__meta,
.rec-busca__ayuda{
  font-family:var(--t-ui);font-size:13.5px;line-height:1.6;color:var(--t-suave);
}

/* --- formas: el radio del tema es 4px, y los controles van en pildora ------ */
.rec-cat,
.rec-item,
.rec-res__item,
.rec-busca__campo,
.rec-grupo{border-radius:4px}

/* los botones de descarga, con la pildora y la mono del portal */
.rec-btn{
  font-family:var(--t-mono);font-size:12px;font-weight:400;
  letter-spacing:-.02em;text-transform:uppercase;
  border-radius:4px;
}

/* La barra del portal, cuando se inyecta en el centro de recursos -------------
   Aqui va FIJA y no pegajosa, al reves que en el portal. Motivo medido: en
   estas paginas el <body> lleva overflow-x:hidden, que obliga a overflow-y:auto
   y convierte al body en contenedor de scroll; un position:sticky dentro se
   pega al body y no a la ventana, asi que la barra se iba hacia arriba al
   desplazarse -medida en top:-72 con la pagina scrolleada 72-.

   El aire que el tramo ya reservaba para la barra publica (97px) alcanza de
   sobra para los 72 de esta, asi que no hay que tocar el relleno. */
html.marco-inyectado .t-barra{position:fixed;top:0;left:0;right:0}

/* ===========================================================================
   PAGINA 404
   ===========================================================================
   Usa el lenguaje del portal -blanco, Baskervville y Outfit- porque es la
   pagina que mas conviene que se sienta de la casa: alguien llego aqui por
   error y hay que devolverlo adentro, no darle un callejon. */
.e404{
  background:var(--t-fondo);color:var(--t-tinta);
  min-height:70vh;display:flex;align-items:center;
  padding:calc(97px + clamp(50px, 8vw, 100px)) var(--gutter) clamp(70px, 10vw, 120px);
}
.e404__inner{width:min(760px, 100%);margin:0 auto}
.e404__codigo{
  margin:0 0 14px;
  font-family:var(--t-ui);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-suave);
}
.e404__titulo{
  margin:0 0 18px;
  font-family:var(--t-display);font-weight:400;
  font-size:clamp(32px, 5vw, 54px);line-height:1.06;color:var(--t-tinta);
}
.e404__texto{
  margin:0 0 clamp(30px, 4vw, 44px);max-width:52ch;
  font-family:var(--t-ui);font-size:16px;line-height:1.62;color:var(--t-suave);
}
.e404__salidas{
  list-style:none;margin:0 0 clamp(30px, 4vw, 44px);padding:0;
  display:grid;gap:12px;
}
.e404__salida a{
  display:flex;flex-direction:column;gap:4px;
  padding:18px 20px;border:1px solid var(--t-borde);border-radius:4px;
  text-decoration:none;
  transition:background-color var(--t-rapida) var(--t-curva),
             border-color var(--t-rapida) var(--t-curva);
}
.e404__salida a:hover{background:var(--t-fondo-3);border-color:var(--t-borde-fuerte)}
.e404__salida-nombre{
  font-family:var(--t-display);font-size:19px;line-height:1.2;color:var(--t-tinta);
}
.e404__salida-desc{
  font-family:var(--t-ui);font-size:13.5px;line-height:1.5;color:var(--t-suave);
}
.e404__ayuda{
  margin:0;font-family:var(--t-ui);font-size:14px;line-height:1.6;color:var(--t-suave);
}
.e404__ayuda a{color:var(--t-tinta);text-decoration:underline;text-underline-offset:3px}

@media (min-width:720px){
  .e404__salidas{grid-template-columns:repeat(3, minmax(0,1fr))}
  .e404__salida a{height:100%}
}

/* ---------------------------------------------------------------------------
   LEGADO ENTRE 1200 Y 1299  ·  el escalon que faltaba
   ---------------------------------------------------------------------------
   Defecto ANTERIOR a la fila de tablet, encontrado al comprobar los bordes:
   de 1200 a 1299 ya manda la regla de escritorio, pero sus medidas no entran
   -762 de fotos mas 84 de hueco mas 336 de texto son 1182, y con los dos
   margenes de 50 hacen falta 1282-, asi que el parrafo se iba debajo de las
   fotos y la seccion pasaba de 742 a 887 de alto. Medido: parte a 1200, 1240
   y 1280, y deja de partir a 1300.

   Aqui se estira un escalon mas la misma solucion que en tablet: las fotos
   algo mas chicas y el texto al lado. De 1300 en adelante vuelven las medidas
   grandes de escritorio, sin tocarlas. */
@media (min-width:1200px) and (max-width:1299px){
  .legacy{gap:48px}
  .legacy__img--wide{width:400px;height:460px}
  .legacy__img--tall{height:460px}
  .legacy__copy{max-width:300px}
}