/* ==========================================================================
   La Chilota — Landing page
   Los tamaños se escriben en "px de diseño" multiplicados por --u:
   escritorio = lienzo de 1920px, móvil = lienzo de 402px (igual que en Figma).
   ========================================================================== */

:root {
  --tan: #CE9253;
  --amarillo: #F4D27B;
  --naranja: #E36B37;
  --rojo: #DE4523;
  --tinto: #912115;
  --tinto-oscuro: #3A0F0A;
  --crema: #F2C96D;
  --carbon: #1D1D1D;
  --negro: #000;

  --f-display: 'Spicy Rice', 'Ranchers', Georgia, serif;
  --f-titulo: 'Ranchers', 'Spicy Rice', Georgia, serif;
  --f-cond: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --f-texto: 'Cairo', 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-boton: 'Outfit', 'Cairo', Helvetica, Arial, sans-serif;

  --u: min(1px, calc(100vw / 1920));
  --lienzo: calc(1920 * var(--u));
  --suave: cubic-bezier(.22, .8, .24, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-texto);
  background: var(--carbon);
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-movil, .solo-movil-inline { display: none; }

/* Bloques que posicionan elementos absolutos en su interior */
.grano { position: relative; }

/* Textura granulada sobre cada bloque.
   El ruido es un SVG, así que se dibuja a la resolución real de la pantalla. */
.grano::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 1 1 0 -1  1 1 1 0 -1  1 1 1 0 -1  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  mix-blend-mode: soft-light;
  opacity: .5;
  pointer-events: none;
}
/* En escritorio los dos bloques de cifras comparten fondo: un solo grano */
.cifras__bloque--foto::after { content: none; }

.vidrio {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-boton);
  font-weight: 500;
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1;
  color: #fff;
  border-radius: calc(5 * var(--u));
  white-space: nowrap;
  transition: transform .25s var(--suave), box-shadow .25s var(--suave), background-color .25s;
}
.btn--rojo { background: var(--rojo); }
.btn--negro { background: var(--negro); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); }
.btn--rojo:hover { background: #F0502B; }
.btn--negro:hover { background: #2a2a2a; }
.btn:active { transform: translateY(0) scale(.97); }

.titulo-seccion {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(50 * var(--u));
  line-height: calc(46 * var(--u));
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--crema);
}
.titulo-seccion--grande { font-size: calc(64 * var(--u)); line-height: calc(60 * var(--u)); }

/* Aparición al hacer scroll (solo con JS activo) */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.js .revelar.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: var(--tan);
  color: #111;
  text-align: center;
  overflow: hidden;
}
.hero__marco {
  position: relative;
  width: var(--lienzo);
  height: calc(1080 * var(--u));
  margin-inline: auto;
  padding-top: calc(156 * var(--u));
}
.hero__chile {
  position: absolute;
  top: calc(228 * var(--u));
  width: calc(197 * var(--u));
  animation: flotar 6s ease-in-out infinite;
}
.hero__chile--izq { left: calc(225 * var(--u)); --giro: scaleX(-1); transform: scaleX(-1); }
.hero__chile--der { right: calc(170 * var(--u)); --giro: scaleX(1); animation-delay: -3s; }
@keyframes flotar {
  0%, 100% { transform: var(--giro) translateY(0) rotate(0deg); }
  50% { transform: var(--giro) translateY(calc(-14 * var(--u))) rotate(2.2deg); }
}
.hero__logo { width: calc(648 * var(--u)); margin-inline: auto; }
.hero__titulo {
  margin-top: calc(66 * var(--u));
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: calc(70 * var(--u));
  line-height: calc(64 * var(--u));
  text-transform: uppercase;
}
.hero__sub {
  margin-top: calc(24 * var(--u));
  font-family: var(--f-cond);
  font-size: calc(27 * var(--u));
  line-height: calc(28 * var(--u));
  text-transform: uppercase;
}
.hero__desc {
  width: calc(800 * var(--u));
  margin: calc(22 * var(--u)) auto 0;
  font-family: var(--f-cond);
  font-size: calc(22.5 * var(--u));
  line-height: calc(30 * var(--u));
  text-transform: uppercase;
}
.hero__desc::before {
  content: "";
  display: block;
  width: calc(768 * var(--u));
  margin: 0 auto calc(16 * var(--u));
  border-top: max(1.5px, calc(2 * var(--u))) dotted rgba(17, 17, 17, .75);
}
.hero__desc em { color: var(--rojo); }
.hero__acciones {
  display: flex;
  justify-content: center;
  gap: calc(46 * var(--u));
  margin-top: calc(50 * var(--u));
}
.hero__acciones .btn { width: calc(156 * var(--u)); height: calc(46 * var(--u)); min-width: 118px; min-height: 34px; }
.hero__lema {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(976 * var(--u));
  font-family: var(--f-display);
  font-size: calc(40 * var(--u));
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* ==========================================================================
   SOMOS / INTENSOS
   ========================================================================== */
.somos {
  --somos-fondo: var(--amarillo);
  --chilito: #D5622E;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(1080 * var(--u));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.somos[data-tema="naranja"] { --somos-fondo: var(--naranja); --chilito: #E9C263; }
.somos[data-tema="rojo"] { --somos-fondo: var(--rojo); --chilito: #E9C263; }

.somos__lado {
  background: var(--somos-fondo);
  transition: background-color .5s var(--suave);
  overflow: hidden;
}
.somos__escena {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(960 * var(--u));
  height: 100%;
  transform: translateX(-50%);
}
.somos__frasco {
  position: absolute;
  left: calc(252 * var(--u));
  top: calc(216 * var(--u));
  width: calc(415 * var(--u));
  aspect-ratio: 900 / 1304;
  transition: transform .7s var(--suave);
}
.somos__frasco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.92) rotate(-4deg);
  transition: opacity .45s var(--suave), transform .55s var(--suave);
}
.somos__frasco img.is-activa { opacity: 1; transform: none; }

.chilito {
  position: absolute;
  fill: var(--chilito);
  transition: fill .5s var(--suave), transform .8s var(--suave);
}
.chilito--1 { left: calc(226 * var(--u)); top: calc(112 * var(--u)); width: calc(156 * var(--u)); height: calc(72 * var(--u)); --r: rotate(14deg); }
.chilito--2 { left: calc(28 * var(--u)); top: calc(326 * var(--u)); width: calc(150 * var(--u)); height: calc(69 * var(--u)); --r: rotate(12deg); }
.chilito--3 { left: calc(636 * var(--u)); top: calc(286 * var(--u)); width: calc(220 * var(--u)); height: calc(101 * var(--u)); --r: rotate(58deg); }
.chilito--4 { left: calc(708 * var(--u)); top: calc(660 * var(--u)); width: calc(140 * var(--u)); height: calc(64 * var(--u)); --r: rotate(-22deg); }
.chilito--5 { left: calc(340 * var(--u)); top: calc(838 * var(--u)); width: calc(258 * var(--u)); height: calc(119 * var(--u)); --r: rotate(-6deg); }
.chilito { transform: var(--r); }

@media (hover: hover) {
  .somos:hover .somos__frasco { transform: scale(1.04) rotate(-2deg); }
  .somos:hover .chilito--1 { transform: translate(calc(-14 * var(--u)), calc(-18 * var(--u))) var(--r) rotate(-8deg); }
  .somos:hover .chilito--2 { transform: translate(calc(-20 * var(--u)), calc(6 * var(--u))) var(--r) rotate(-10deg); }
  .somos:hover .chilito--3 { transform: translate(calc(22 * var(--u)), calc(-12 * var(--u))) var(--r) rotate(10deg); }
  .somos:hover .chilito--4 { transform: translate(calc(20 * var(--u)), calc(12 * var(--u))) var(--r) rotate(12deg); }
  .somos:hover .chilito--5 { transform: translate(0, calc(20 * var(--u))) var(--r) rotate(-6deg); }
}

.somos__foto { overflow: hidden; background: #3b2a12; }
.somos__foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .5s var(--suave), transform 1.2s var(--suave);
}
.somos__foto > img.is-activa { opacity: 1; transform: scale(1); }

.somos__palabras {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}
.palabra {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-display);
  font-size: calc(260 * var(--u));
  line-height: 1.045;
  letter-spacing: .09em;
  text-indent: .09em;
  text-transform: uppercase;
  color: var(--crema);
  text-shadow: 0 calc(6 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .18);
  pointer-events: none;
}
.palabra--intensos { font-size: calc(236 * var(--u)); line-height: 1.18; }
.palabra span {
  display: block;
  opacity: 0;
  transform: translateY(38%) rotate(3deg);
  transition: opacity .3s var(--suave), transform .45s var(--suave);
}
.palabra.is-activa span { opacity: 1; transform: none; }
.palabra.is-activa span:nth-child(2) { transition-delay: .06s; }
.palabra.is-activa span:nth-child(3) { transition-delay: .12s; }

/* ==========================================================================
   PRODUCTOS
   ========================================================================== */
.productos {
  min-height: calc(1080 * var(--u));
  padding: calc(44 * var(--u)) 0 calc(58 * var(--u));
  background: linear-gradient(180deg, var(--tinto) 0%, #84201A 38%, var(--tinto-oscuro) 100%);
  color: var(--crema);
  overflow: hidden;
}
.carrusel {
  position: relative;
  width: var(--lienzo);
  margin: calc(35 * var(--u)) auto 0;
  outline-offset: -6px;
}
.carrusel__pista {
  display: grid;
  width: calc(1428 * var(--u));
  margin-inline: auto;
}

.flecha {
  position: absolute;
  top: calc(350 * var(--u));
  z-index: 6;
  display: grid;
  place-items: center;
  width: calc(53 * var(--u));
  height: calc(53 * var(--u));
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background: #E8744B;
  color: #4a140c;
  transition: transform .25s var(--suave), background-color .25s, box-shadow .25s;
}
.flecha svg { width: 52%; height: 52%; }
.flecha--prev { left: calc(112 * var(--u)); }
.flecha--prev svg { transform: scaleX(-1); }
.flecha--next { right: calc(116 * var(--u)); }
.flecha:hover { background: var(--crema); box-shadow: 0 0 0 calc(8 * var(--u)) rgba(242, 201, 109, .18); }
.flecha--prev:hover { transform: translateX(calc(-6 * var(--u))); }
.flecha--next:hover { transform: translateX(calc(6 * var(--u))); }
.flecha:active { transform: scale(.9); }

.producto {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: calc(549 * var(--u)) 1fr;
  grid-template-rows: auto auto auto 1fr;
  column-gap: calc(53 * var(--u));
  min-height: calc(897 * var(--u));
  padding: calc(60 * var(--u)) calc(67 * var(--u)) calc(36 * var(--u)) calc(75 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(120 * var(--u))) scale(.97);
  transition: opacity .5s var(--suave), transform .65s var(--suave), visibility 0s linear .65s;
}
.producto.is-activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--suave), transform .65s var(--suave), visibility 0s;
}
.producto.sale-izq { transform: translateX(calc(-120 * var(--u))) scale(.97); }
.producto.sale-der { transform: translateX(calc(120 * var(--u))) scale(.97); }
.producto.entra-izq { transform: translateX(calc(-120 * var(--u))) scale(.97); transition: none; }
.producto.entra-der { transform: translateX(calc(120 * var(--u))) scale(.97); transition: none; }

.producto__foto {
  position: relative;
  grid-column: 1;
  width: calc(549 * var(--u));
  height: calc(547 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .28);
  transition: transform .5s var(--suave), box-shadow .5s var(--suave);
}
.producto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .55s var(--suave), transform 1.2s var(--suave);
}
.producto__img { object-position: 50% 62%; }
.producto__tex { opacity: 0; transform: scale(1.12); }
.producto__foto.ver-textura .producto__tex { opacity: 1; transform: scale(1); }
.producto__foto.ver-textura .producto__img { transform: scale(1.06); }
.producto__foto.ver-textura { transform: translateY(calc(-6 * var(--u))) rotate(-.6deg); box-shadow: 0 calc(28 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .38); }

.insignia,
.gramaje { position: absolute; z-index: 2; top: calc(30 * var(--u)); }
.insignia {
  left: calc(30 * var(--u));
  min-width: calc(140 * var(--u));
  padding: calc(3 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u));
  border-radius: 99px;
  background: #E8703A;
  color: var(--amarillo);
  font-size: max(10px, calc(20 * var(--u)));
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.insignia--nuevo { background: #4FAE6B; color: #fff; }
.gramaje {
  right: calc(34 * var(--u));
  font-family: var(--f-cond);
  font-size: max(11px, calc(28 * var(--u)));
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--amarillo);
  transition: color .4s;
}
.producto__foto--clara .gramaje { color: #C98A2B; }
.producto__foto--clara.ver-textura .gramaje { color: var(--amarillo); }

.producto__nombre {
  grid-column: 1;
  margin-top: calc(25 * var(--u));
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.producto__lema {
  grid-column: 1;
  margin: calc(12 * var(--u)) calc(-40 * var(--u)) 0;
  font-family: var(--f-cond);
  font-size: calc(27.5 * var(--u));
  line-height: 1.14;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  color: var(--amarillo);
}
/* Título/lema alternos (se cruzan al ver la textura) */
.producto__nombre:has(.cara),
.producto__lema:has(.cara) { display: grid; }
.cara { grid-area: 1 / 1; transition: opacity .4s var(--suave), transform .5s var(--suave); }
.cara--b { opacity: 0; transform: translateY(40%); }
.producto.is-textura .cara--a { opacity: 0; transform: translateY(-40%); }
.producto.is-textura .cara--b { opacity: 1; transform: none; }

.producto__pie {
  grid-column: 1;
  align-self: end;
  display: flex;
  justify-content: space-between;
  width: calc(578 * var(--u));
  margin: calc(24 * var(--u)) 0 0 calc(-29 * var(--u));
}
.intensidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  width: calc(314 * var(--u));
  height: calc(72 * var(--u));
  border: 1px solid var(--crema);
  border-radius: 99px;
  font-size: max(11px, calc(28 * var(--u)));
  color: var(--amarillo);
}
.intensidad span { margin-right: calc(2 * var(--u)); }
.intensidad i {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: 1px solid var(--crema);
  border-radius: 50%;
}
.intensidad i.on { background: var(--amarillo); border-color: var(--amarillo); }
.producto.is-activa .intensidad i.on { animation: latido .6s var(--suave) .35s backwards; }
.producto.is-activa .intensidad i.on:nth-of-type(2) { animation-delay: .47s; }
.producto.is-activa .intensidad i.on:nth-of-type(3) { animation-delay: .59s; }
@keyframes latido { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }

.producto__pie .btn {
  width: calc(218 * var(--u));
  height: calc(72 * var(--u));
  border-radius: calc(7 * var(--u));
  font-size: max(11px, calc(23 * var(--u)));
}

.producto__texto {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(6 * var(--u));
  text-align: center;
}
.producto__chile { width: calc(106 * var(--u)); height: calc(49 * var(--u)); fill: var(--crema); transform: rotate(-8deg); }
.producto__gancho {
  margin-top: calc(22 * var(--u));
  max-width: calc(690 * var(--u));
  font-size: max(13px, calc(32 * var(--u)));
  font-weight: 700;
  line-height: 1.22;
  color: var(--crema);
}
.producto__desc {
  margin-top: calc(14 * var(--u));
  max-width: calc(644 * var(--u));
  font-size: max(12px, calc(27.5 * var(--u)));
  line-height: 1.4;
  color: var(--crema);
}
.producto__desc .con-aire { margin-top: 1.4em; }
.producto__desc .mayus { text-transform: uppercase; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.nosotros { background: #E36F46; color: var(--crema); overflow: hidden; }
.nosotros__marco {
  position: relative;
  width: var(--lienzo);
  height: calc(1080 * var(--u));
  margin-inline: auto;
}
.nosotros__col { position: absolute; text-align: center; }
.nosotros__col--foto { left: calc(252 * var(--u)); top: calc(162 * var(--u)); width: calc(580 * var(--u)); }
.nosotros__img {
  width: calc(564 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
  transition: transform .8s var(--suave), filter .8s;
}
.nosotros__img:hover { transform: scale(1.04) rotate(-1.5deg); filter: saturate(1.15); }
.nosotros__col--texto { left: calc(1008 * var(--u)); top: calc(152 * var(--u)); width: calc(792 * var(--u)); }
.nosotros__chile { width: calc(112 * var(--u)); height: calc(52 * var(--u)); margin-inline: auto; fill: var(--crema); transform: rotate(-8deg); }
.nosotros__marca {
  margin-top: calc(36 * var(--u));
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(65 * var(--u));
  line-height: calc(58 * var(--u));
  letter-spacing: .1em;
}
.nosotros__p1 { margin-top: calc(24 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(44 * var(--u)); }
.nosotros__p1 strong { color: #FFF3D6; }
.nosotros__p2 { margin-top: calc(4 * var(--u)); font-size: max(12px, calc(33 * var(--u))); line-height: 1.14; }

/* ==========================================================================
   BANNER
   ========================================================================== */
.banner {
  display: grid;
  place-items: center;
  height: calc(1080 * var(--u));
  overflow: hidden;
  background: #3a1206;
}
.banner__fondo {
  position: absolute;
  inset: 0;
  background: url("../assets/img/tex-arandano.webp") 50% 42% / cover;
  filter: saturate(1.1) brightness(.92);
  animation: respirar 22s ease-in-out infinite alternate;
}
@keyframes respirar { from { transform: scale(1.02); } to { transform: scale(1.14) rotate(.6deg); } }
.banner__logo {
  position: relative;
  z-index: 2;
  width: calc(696 * var(--u));
  filter: drop-shadow(0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .45));
}

/* ==========================================================================
   CIFRAS
   ========================================================================== */
.cifras {
  position: relative;
  height: calc(1080 * var(--u));
  background: #C93A1F url("../assets/img/chile-fondo-rojo.webp") 50% 50% / cover;
  color: var(--crema);
  overflow: hidden;
}
.cifras__bloque { position: absolute; inset: 0; }
.cifras__bloque--foto { pointer-events: none; }
.cifras__marco { position: relative; width: var(--lienzo); height: 100%; margin-inline: auto; }
.cifras__panel {
  position: absolute;
  left: calc(187 * var(--u));
  top: calc(67 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: calc(471 * var(--u));
  height: calc(941 * var(--u));
  padding: calc(52 * var(--u)) calc(20 * var(--u));
  border-radius: calc(18 * var(--u));
  text-align: center;
}
.cifras__panel li { transition: transform .4s var(--suave); }
.cifras__panel li:hover { transform: scale(1.07); }
.cifra {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(62 * var(--u));
  line-height: 1.1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.cifras__panel span {
  display: block;
  font-size: max(12px, calc(36 * var(--u)));
  line-height: 1.33;
  text-transform: uppercase;
}
.cifras__panel span.minus { text-transform: none; }
.cifras__logo { position: absolute; left: calc(1260 * var(--u)); top: calc(144 * var(--u)); width: calc(415 * var(--u)); }
.cifras__mapa {
  position: absolute;
  left: calc(1188 * var(--u));
  top: calc(451 * var(--u));
  width: calc(593 * var(--u));
  aspect-ratio: 924 / 627;
  background: var(--amarillo);
  -webkit-mask: url("../assets/img/mexico-contorno.png") center / contain no-repeat;
  mask: url("../assets/img/mexico-contorno.png") center / contain no-repeat;
}

/* ==========================================================================
   DE MÉXICO PARA EL MUNDO
   ========================================================================== */
.mundo {
  min-height: calc(1080 * var(--u));
  padding: calc(40 * var(--u)) 0 calc(120 * var(--u));
  background:
    linear-gradient(rgba(92, 28, 8, .58), rgba(70, 20, 6, .66)),
    url("../assets/img/tex-clasica.webp") 50% 30% / 140% auto;
  text-align: center;
  overflow: hidden;
}
.mundo__marco { width: var(--lienzo); margin-inline: auto; }
.mundo__mx {
  width: calc(120 * var(--u));
  aspect-ratio: 400 / 272;
  margin-inline: auto;
  background: var(--crema);
  -webkit-mask: url("../assets/img/mexico-silueta.png") center / contain no-repeat;
  mask: url("../assets/img/mexico-silueta.png") center / contain no-repeat;
}
.mundo__titulo {
  margin-top: calc(38 * var(--u));
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(65 * var(--u));
  line-height: calc(64 * var(--u));
  letter-spacing: .1em;
  color: #FFF4E6;
}
.mundo__panel {
  width: calc(1834 * var(--u));
  margin: calc(34 * var(--u)) auto 0;
  padding: calc(62 * var(--u)) calc(38 * var(--u)) calc(56 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, .06);
}
.mundo__globo { width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin-inline: auto; color: var(--crema); }
.paises {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(43 * var(--u));
  margin-top: calc(50 * var(--u));
}
.pais {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(190 * var(--u));
  border: 1px solid rgba(242, 201, 109, .75);
  border-radius: calc(18 * var(--u));
  transition: transform .4s var(--suave), background-color .4s, border-color .4s, box-shadow .4s;
}
.pais b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(62 * var(--u));
  line-height: 1.05;
  letter-spacing: .1em;
  text-indent: .1em;
  color: #FFF4E6;
  transition: color .4s;
}
.pais span { font-size: max(11px, calc(29 * var(--u))); line-height: 1.25; color: #fff; }
.pais:hover {
  transform: translateY(calc(-12 * var(--u)));
  background: rgba(242, 201, 109, .16);
  border-color: var(--amarillo);
  box-shadow: 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .3);
}
.pais:hover b { color: var(--amarillo); }
.mundo__texto {
  max-width: calc(1500 * var(--u));
  margin: calc(26 * var(--u)) auto 0;
  font-size: max(12px, calc(25.5 * var(--u)));
  line-height: 1.57;
  color: #fff;
}

/* ==========================================================================
   DISTRIBUIDORES
   ========================================================================== */
.distribuidores {
  display: grid;
  grid-template-columns: minmax(0, calc(50% - 26 * var(--u))) 1fr;
  min-height: calc(1080 * var(--u));
  background: var(--negro);
}
.distribuidores__lista {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(25 * var(--u));
  width: calc(934 * var(--u));
  margin-left: auto;
  padding: calc(60 * var(--u)) calc(142 * var(--u)) calc(75 * var(--u)) calc(137 * var(--u));
}
.distribuidores__titulo--movil { display: none; }
.distribuidores__foto {
  background: #5a2a10 url("../assets/img/distribuidores.webp") 30% 50% / cover;
  overflow: hidden;
}
.distribuidores__titulo {
  position: absolute;
  z-index: 2;
  left: calc(103 * var(--u));
  top: calc(46 * var(--u));
  font-size: calc(52 * var(--u));
  letter-spacing: .1em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

.contacto {
  position: relative;
  padding: calc(46 * var(--u)) calc(40 * var(--u)) calc(38 * var(--u)) calc(65 * var(--u));
  border: 1px solid rgba(242, 201, 109, .7);
  border-radius: calc(22 * var(--u));
  transition: transform .4s var(--suave), border-color .4s, background-color .4s, box-shadow .4s;
}
.contacto:hover {
  transform: translateX(calc(14 * var(--u)));
  border-color: var(--amarillo);
  background: rgba(242, 201, 109, .06);
  box-shadow: calc(-10 * var(--u)) 0 0 0 var(--rojo);
}
.contacto__chile {
  position: absolute;
  right: calc(30 * var(--u));
  top: calc(40 * var(--u));
  width: calc(88 * var(--u));
  height: calc(40 * var(--u));
  fill: var(--crema);
  transform: rotate(-8deg);
  transition: transform .5s var(--suave), fill .4s;
}
.contacto:hover .contacto__chile { transform: rotate(-24deg) scale(1.15); fill: var(--rojo); }
.contacto__region {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(50 * var(--u));
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFF4E6;
}
.contacto__nombre { margin-top: calc(22 * var(--u)); font-size: max(13px, calc(31 * var(--u))); line-height: 1.2; color: var(--crema); }
.contacto__rol { margin-top: 0; font-size: max(10px, calc(22 * var(--u))); line-height: 1.3; color: #8b8b8b; }
.contacto__dato {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: fit-content;
  margin-top: calc(6 * var(--u));
  font-size: max(11px, calc(26 * var(--u)));
  line-height: 1.3;
  color: #fff;
  transition: color .25s;
}
.contacto__rol + .contacto__dato { margin-top: calc(20 * var(--u)); }
.contacto__dato svg { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 12px; min-height: 12px; color: #E8703A; }
.contacto__dato:hover { color: var(--amarillo); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie { background: var(--carbon); }
.pie__marco {
  display: flex;
  align-items: center;
  width: var(--lienzo);
  height: calc(470 * var(--u));
  margin-inline: auto;
  padding-left: calc(235 * var(--u));
}
.pie__marca { width: calc(276 * var(--u)); text-align: center; }
.pie__marca img { width: 100%; }
.pie__copy { margin-top: calc(50 * var(--u)); padding-left: calc(120 * var(--u)); font-size: max(10px, calc(28 * var(--u))); line-height: 1; color: #F7E7BE; white-space: nowrap; }
.pie__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(324 * var(--u));
  margin-left: calc(103 * var(--u));
  padding-left: calc(86 * var(--u));
  border-left: 1px solid rgba(242, 201, 109, .55);
}
.pie__titulo {
  font-family: var(--f-display);
  font-size: calc(65 * var(--u));
  line-height: calc(64 * var(--u));
  letter-spacing: .1em;
  color: #FFF4E6;
}
.pie__lema { margin-top: calc(14 * var(--u)); font-size: max(13px, calc(36 * var(--u))); line-height: 1.3; color: var(--crema); }
.pie__dato {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  width: fit-content;
  margin-top: calc(10 * var(--u));
  font-size: max(11px, calc(28 * var(--u)));
  line-height: 1.35;
  color: #fff;
  transition: color .25s;
}
.pie__lema + .pie__dato { margin-top: calc(22 * var(--u)); }
a.pie__dato:hover { color: var(--amarillo); }
.pie__dato svg { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 12px; min-height: 12px; color: #E8703A; }
.pie__dato svg.relleno { fill: #E8703A; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.pie__iconos { display: flex; gap: calc(10 * var(--u)); }
.pie__red { position: relative; display: block; border-radius: 22%; transition: transform .25s var(--suave); }
.pie__red::after { content: ""; position: absolute; inset: -9px; } /* área táctil más amplia */
.pie__red svg.relleno { transition: fill .25s; }
.pie__red:hover { transform: translateY(-3px) scale(1.12); }
.pie__red:hover svg.relleno { fill: var(--amarillo); }

/* ==========================================================================
   MÓVIL (lienzo de 402px)
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --u: min(1.45px, calc(100vw / 402));
    --lienzo: calc(402 * var(--u));
  }
  .solo-movil { display: inline; }
  .solo-movil-inline { display: inline; }

  .btn { font-size: calc(17 * var(--u)); border-radius: calc(4 * var(--u)); }
  .titulo-seccion,
  .titulo-seccion--grande { font-size: calc(28 * var(--u)); }

  /* HERO */
  .hero__marco { height: auto; padding: calc(150 * var(--u)) 0 calc(143 * var(--u)); }
  .hero__chile { top: calc(172 * var(--u)); width: calc(41 * var(--u)); }
  .hero__chile--izq { left: calc(35 * var(--u)); }
  .hero__chile--der { right: calc(40 * var(--u)); }
  .hero__logo { width: calc(213 * var(--u)); }
  .hero__titulo { margin-top: calc(95 * var(--u)); font-size: calc(40 * var(--u)); }
  .hero__sub { margin-top: calc(10 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.5; }
  .hero__desc {
    width: calc(338 * var(--u));
    margin-top: calc(12 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.28;
  }
  .hero__desc::before { width: calc(298 * var(--u)); margin-bottom: calc(12 * var(--u)); }
  .hero__acciones { flex-direction: column; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(40 * var(--u)); }
  .hero__acciones .btn { width: calc(203 * var(--u)); height: calc(47 * var(--u)); }
  .hero__lema { display: none; }

  /* SOMOS */
  .somos { grid-template-columns: 1fr; height: auto; }
  .somos__lado { height: calc(436 * var(--u)); }
  .somos__escena { width: var(--lienzo); }
  .somos__frasco { left: calc(110 * var(--u)); top: calc(89 * var(--u)); width: calc(182 * var(--u)); }
  .chilito--1 { left: calc(108 * var(--u)); top: calc(40 * var(--u)); width: calc(68 * var(--u)); height: calc(31 * var(--u)); }
  .chilito--2 { left: calc(44 * var(--u)); top: calc(134 * var(--u)); width: calc(64 * var(--u)); height: calc(30 * var(--u)); }
  .chilito--3 { left: calc(280 * var(--u)); top: calc(112 * var(--u)); width: calc(100 * var(--u)); height: calc(46 * var(--u)); }
  .chilito--4 { left: calc(318 * var(--u)); top: calc(278 * var(--u)); width: calc(58 * var(--u)); height: calc(27 * var(--u)); }
  .chilito--5 { left: calc(156 * var(--u)); top: calc(356 * var(--u)); width: calc(114 * var(--u)); height: calc(53 * var(--u)); }
  .somos__foto { height: calc(437 * var(--u)); }
  .palabra { font-size: calc(128 * var(--u)); line-height: 1.1; }
  .palabra--intensos { font-size: calc(104 * var(--u)); line-height: 1.13; }

  /* PRODUCTOS */
  .productos { min-height: 0; padding: calc(31 * var(--u)) 0 calc(27 * var(--u)); }
  .carrusel { margin-top: calc(24 * var(--u)); }
  .carrusel__pista { width: calc(374 * var(--u)); }
  .flecha { top: calc(397 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 0; min-height: 0; }
  .flecha::before { content: ""; position: absolute; inset: calc(-12 * var(--u)); }
  .flecha--prev { left: calc(30 * var(--u)); }
  .flecha--next { right: calc(24 * var(--u)); }
  .flecha:hover { box-shadow: none; }

  .producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: calc(22 * var(--u)) calc(17 * var(--u)) calc(14 * var(--u));
    border-radius: calc(26 * var(--u));
    transform: translateX(calc(50 * var(--u)));
  }
  .producto.sale-izq, .producto.entra-izq { transform: translateX(calc(-50 * var(--u))); }
  .producto.sale-der, .producto.entra-der { transform: translateX(calc(50 * var(--u))); }
  .producto__foto { width: calc(340 * var(--u)); height: calc(340 * var(--u)); border-radius: calc(20 * var(--u)); }
  .insignia, .gramaje { top: calc(18 * var(--u)); }
  .insignia { left: calc(20 * var(--u)); min-width: calc(98 * var(--u)); padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)); font-size: calc(15 * var(--u)); }
  .gramaje { right: calc(28 * var(--u)); font-size: calc(18 * var(--u)); }
  .producto__nombre { margin-top: calc(31 * var(--u)); max-width: calc(290 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: .03em; }
  .producto[data-producto="chimichurri"] .producto__nombre { font-size: calc(24 * var(--u)); line-height: 1.25; }
  .producto__lema { margin: calc(14 * var(--u)) 0 0; font-size: calc(15 * var(--u)); white-space: normal; }
  .producto__texto {
    display: block;
    width: 100%;
    max-height: calc(172 * var(--u));
    margin-top: calc(10 * var(--u));
    padding: 0 calc(10 * var(--u));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 201, 109, .6) transparent;
    -webkit-mask: linear-gradient(#000 80%, transparent);
    mask: linear-gradient(#000 80%, transparent);
  }
  .producto__texto::-webkit-scrollbar { width: 3px; }
  .producto__texto::-webkit-scrollbar-thumb { background: rgba(242, 201, 109, .6); border-radius: 3px; }
  .producto__chile { display: none; }
  .producto__gancho { margin-top: 0; max-width: none; font-size: calc(14 * var(--u)); line-height: 1.3; }
  .producto__desc { max-width: none; margin-top: calc(10 * var(--u)); padding-bottom: calc(34 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.43; }
  .producto__pie { flex-direction: column; align-items: center; align-self: center; gap: calc(16 * var(--u)); width: auto; margin: auto 0 0; padding-top: calc(22 * var(--u)); }
  .intensidad { gap: calc(16 * var(--u)); width: calc(215 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); }
  .intensidad i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .producto__pie .btn { width: calc(203 * var(--u)); height: calc(47 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(17 * var(--u)); }

  /* NOSOTROS */
  .nosotros__marco { height: auto; padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(78 * var(--u)); }
  .nosotros__col { position: static; width: auto; }
  .nosotros__img { width: calc(216 * var(--u)); margin-top: calc(22 * var(--u)); }
  .nosotros__chile { width: calc(60 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(30 * var(--u)); }
  .nosotros__marca { margin-top: calc(16 * var(--u)); font-size: calc(38 * var(--u)); }
  .nosotros__p1 { margin-top: calc(12 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.42; }
  .nosotros__p2 { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.47; }

  /* BANNER */
  .banner { height: calc(874 * var(--u)); }
  .banner__fondo { background-position: 40% 50%; }
  .banner__logo { width: calc(264 * var(--u)); }

  /* CIFRAS */
  .cifras { height: auto; background: none; }
  .cifras__bloque { position: relative; inset: auto; }
  .cifras__bloque--foto::after { content: ""; }
  .cifras__bloque--panel { height: calc(873 * var(--u)); background: linear-gradient(180deg, #E5512B 0%, #B93A22 55%, #6F1C10 100%); }
  .cifras__bloque--foto { height: calc(875 * var(--u)); background: #D8421F url("../assets/img/chile-fondo-rojo.webp") 54% 46% / auto 126%; }
  .cifras__panel { left: calc(11 * var(--u)); top: calc(58 * var(--u)); width: calc(380 * var(--u)); height: calc(757 * var(--u)); padding: calc(70 * var(--u)) calc(16 * var(--u)) calc(60 * var(--u)); border-radius: calc(26 * var(--u)); }
  .cifra { font-size: calc(44 * var(--u)); }
  .cifras__panel span { font-size: calc(24 * var(--u)); line-height: 1.42; }
  .cifras__panel span.minus { text-transform: uppercase; }
  .cifras__logo { left: calc(62 * var(--u)); top: calc(197 * var(--u)); width: calc(262 * var(--u)); }
  .cifras__mapa { left: calc(30 * var(--u)); top: calc(382 * var(--u)); width: calc(342 * var(--u)); }

  /* MUNDO */
  .mundo { min-height: 0; padding: calc(40 * var(--u)) 0 calc(73 * var(--u)); background-position: 0 0, 30% 0; background-size: auto, cover; }
  .mundo__mx { width: calc(60 * var(--u)); }
  .mundo__titulo { margin-top: calc(18 * var(--u)); font-size: calc(36 * var(--u)); }
  .mundo__titulo { color: var(--crema); }
  .mundo__panel { width: calc(376 * var(--u)); margin-top: calc(50 * var(--u)); padding: calc(52 * var(--u)) calc(36 * var(--u)) calc(56 * var(--u)); border-radius: calc(26 * var(--u)); }
  .mundo__globo { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
  .paises { grid-template-columns: 1fr; gap: calc(38 * var(--u)); width: calc(258 * var(--u)); margin: calc(28 * var(--u)) auto 0; }
  .pais { height: calc(187 * var(--u)); border-radius: calc(22 * var(--u)); }
  .pais b { font-size: calc(56 * var(--u)); }
  .pais span { font-size: calc(26 * var(--u)); }
  .mundo__texto { max-width: none; margin-top: calc(48 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.48; }

  /* DISTRIBUIDORES */
  .distribuidores { display: block; min-height: 0; }
  .distribuidores__foto { display: none; }
  .distribuidores__titulo--movil { display: block; position: static; margin-bottom: calc(10 * var(--u)); font-size: calc(30 * var(--u)); text-shadow: none; }
  .distribuidores__lista { gap: calc(26 * var(--u)); width: var(--lienzo); margin-inline: auto; padding: calc(44 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u)); }
  .contacto { padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)) calc(38 * var(--u)); border-radius: calc(22 * var(--u)); }
  .contacto:hover { transform: none; box-shadow: none; }
  .contacto__chile { display: none; }
  .contacto__region { font-size: calc(32 * var(--u)); }
  .contacto__nombre { margin-top: calc(16 * var(--u)); font-size: calc(22 * var(--u)); }
  .contacto__rol { margin-top: calc(2 * var(--u)); padding-left: calc(3 * var(--u)); font-size: calc(15 * var(--u)); }
  .contacto__dato { gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); padding-left: calc(4 * var(--u)); font-size: calc(15 * var(--u)); }
  .contacto__rol + .contacto__dato { margin-top: calc(16 * var(--u)); }
  .contacto__dato svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

  /* FOOTER */
  .pie__marco { flex-direction: column; height: auto; padding: calc(182 * var(--u)) calc(20 * var(--u)) calc(150 * var(--u)); }
  .pie__marca { display: contents; }
  .pie__marca img { width: calc(118 * var(--u)); }
  .pie__copy { order: 3; margin-top: calc(40 * var(--u)); padding-left: 0; font-size: calc(13 * var(--u)); opacity: .7; }
  .pie__info { align-items: center; height: auto; margin: calc(34 * var(--u)) 0 0; padding: 0; border: 0; text-align: center; }
  .pie__titulo { font-size: calc(28 * var(--u)); line-height: 1.43; letter-spacing: .14em; }
  .pie__punto { display: none; }
  .pie__lema { margin-top: calc(24 * var(--u)); font-size: calc(26 * var(--u)); }
  .pie__dato { flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); }
  .pie__lema + .pie__dato { margin-top: calc(10 * var(--u)); }
  .pie__dato svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .pie__dato svg.relleno { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .pie__redes { margin-top: calc(14 * var(--u)); }
  .pie__iconos { flex-direction: row-reverse; gap: calc(6 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}