/* ================================================
   SOLYAL — Importación y distribución
   Estética: stickers, colores plenos, tipografía redondeada
   ================================================ */

/* ------------------------------------------------------------------
   TIPOGRAFÍA DE IDENTIDAD — Coolvetica (Typodermic)
   Actualmente el sitio usa DM Sans (Google Fonts, libre para web).
   Para activar Coolvetica:
     1. Confirmar la licencia web comercial (la versión gratuita es
        solo de uso personal; alojarla vía @font-face es redistribución).
     2. Convertir los .otf a .woff2 y subirlos a assets/fonts/.
     3. Descomentar el bloque y anteponer "Coolvetica" en --font.

   OJO con los pesos: el pack solo trae UN ancho normal (Coolvetica Rg,
   peso 400). "Coolvetica Hv Comp" es peso 850 pero extra-condensada
   (~45% del ancho) — es otra tipografía, NO una negrita: no mapearla
   a font-weight:700. El rango `font-weight: 400 700` sobre el archivo
   Regular evita que el navegador genere una falsa negrita sintética.

@font-face {
  font-family: "Coolvetica";
  src: url("assets/fonts/coolvetica-rg.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica";
  src: url("assets/fonts/coolvetica-rg-it.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
------------------------------------------------------------------ */

:root {
  --orange:        #EF4E23;
  --orange-bright: #FF5A1E;
  --red:           #F23B0A;
  --yellow:        #FBB71D;
  --yellow-deep:   #F4A300;
  --cream:         #FAE0AB;
  --purple:        #BC5FF0;
  --purple-deep:   #9B3FD4;
  --cyan:          #54C5E8;
  --dark:          #1B1B1B;
  --ink:           #2A1206;
  --white:         #FFFFFF;

  --shadow-card:   0 18px 40px -18px rgba(0,0,0,.45);
  --radius:        22px;
  --maxw:          1240px;
  --header-h:      88px;

  --font: "DM Sans", "Trebuchet MS", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--dark);
  background: var(--yellow);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-radius: 999px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(.97); }

.btn--solid {
  background: var(--orange-bright);
  color: var(--white);
  padding: 14px 26px;
  box-shadow: 0 8px 20px -6px rgba(239,78,35,.7);
}
.btn--solid:hover { background: #ff6a33; transform: translateY(-2px); }

.btn--dark {
  background: var(--dark);
  color: var(--white);
  padding: 14px 26px;
}
.btn--dark:hover { background: #000; transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  padding: 11px 22px;
  font-size: .82rem;
}
.btn--ghost:hover { background: var(--white); color: var(--orange); }

.btn--small { padding: 11px 18px; font-size: .78rem; background: var(--white); color: var(--orange); }
.btn--small:hover { background: var(--yellow); color: var(--ink); }

.btn--lg { padding: 20px 38px; font-size: 1.05rem; }

/* ============== HEADER ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--orange);
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; }
.logo-img { height: 46px; width: auto; display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: flex-end;
}
.main-nav > a {
  color: var(--white);
  font-weight: 500;
  font-size: .98rem;
  position: relative;
  padding: 6px 0;
}
.main-nav > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--white);
  border-radius: 3px;
  transition: width .2s ease;
}
.main-nav > a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: 10px; }

.lang-toggle {
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  letter-spacing: .5px;
}
.lang-toggle .lang-off { opacity: .5; }
.lang-toggle.en .lang-on { opacity: .5; }
.lang-toggle.en .lang-off { opacity: 1; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span {
  width: 26px; height: 3px;
  background: var(--white);
  border-radius: 3px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============== HERO ============== */
.hero {
  background: var(--yellow);
  position: relative;
  padding: 70px 32px 80px;
  overflow: hidden;
}
.hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

/* El wrapper acompaña el ancho del titular; los sellos se posicionan
   respecto de él (no del hero completo), así la separación con el texto
   se mantiene constante en cualquier ancho de pantalla. */
.hero-title-wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto 38px;
}
.hero-title { margin: 0; }
.hero-title-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1960 / 580;   /* reserva el espacio: evita salto de layout (CLS) */
}
/* El arte EN ("Behind every brand, a story") parte en dos líneas y es más
   alto que el ES: con el ratio del ES se veria achatado. */
.hero-title-img--en { aspect-ratio: 1234 / 415; }

/* word stickers */
.word {
  display: inline-block;
  font-weight: 700;
  border-radius: 14px;
  padding: 6px 20px 10px;
  line-height: 1;
  letter-spacing: -.5px;
}
.word--white { background: var(--white); color: var(--orange); }
.word--cyan  { background: var(--cyan);  color: var(--white); }
.word--yellow{ background: var(--yellow);color: var(--ink);   }

.shadow-purple-sm { box-shadow: 6px 7px 0 var(--purple); }

.hero-text {
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
}

.hero-cta { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* hero stickers (sellos) — arte oficial en PNG.
   El arte YA viene rotado, por eso no se aplica transform: rotate(). */
.hero-decor {
  position: absolute;
  pointer-events: none;
  /* Sin drop-shadow: el arte ya trae su propio contorno tipo sticker y la
     sombra ensuciaba el hueco entre el contorno y el cuerpo del octógono. */
}
.hero-decor img { width: 100%; height: auto; }

/* Los sellos van a la altura de la línea inferior del titular ("una
   historia."), que empieza al 46% del alto y deja ~15% de aire a cada lado
   (la línea de arriba, en cambio, ocupa el ancho completo).
   Medidas en % del titular: escalan con él y la separación no cambia. */
.sticker-tongue { width: 17%; left: -8%;  top: 44%; }   /* ratio .94 → alto 18% */
.sticker-peace  { width: 19%; right: -9%; top: 46%; }   /* ratio 1.29 → alto 15% */

/* En EN el titular parte en dos lineas distintas: la linea inferior arranca al
   49% (contra 46% del ES) y es mas angosta (deja 23% de aire a cada lado,
   contra 15%). Los sellos bajan para acompanarla y se meten un poco mas hacia
   adentro, que ahora hay lugar. La clase la pone el toggle en el wrapper: se
   evita :has() para no depender de soporte de selector. */
.hero-title-wrap--en .sticker-tongue { left: -5%;  top: 47%; }
.hero-title-wrap--en .sticker-peace  { right: -6%; top: 49%; }

/* En pantallas medianas ya no hay margen fuera del titular: los sellos se
   apoyan en el hueco lateral de la línea inferior, sin salirse del hero. */
@media (max-width: 1180px) {
  .sticker-tongue { width: 14%; left: -1%;  top: 52%; }
  .sticker-peace  { width: 16%; right: -2%; top: 50%; }
  .hero-title-wrap--en .sticker-tongue { left: 1%;  top: 55%; }
  .hero-title-wrap--en .sticker-peace  { right: 0%; top: 53%; }
}

/* ============== STATS ============== */
.stats { background: var(--red); padding: 44px 32px; }
.stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
}
.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 16px;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 12%;
  height: 76%;
  width: 2px;
  background: rgba(255,255,255,.28);
}
.stat-icon { color: var(--white); width: 52px; height: 52px; margin-bottom: 10px; }
.stat-icon svg { width: 100%; height: 100%; }
.stat-num {
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--yellow);
  line-height: 1;
}
.stat-label {
  margin-top: 8px;
  color: var(--white);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.2;
}

/* ============== SECTION HEADINGS ============== */
.eyebrow {
  text-align: center;
  color: var(--orange);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: none;
  margin-bottom: 18px;
}
.section-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  color: var(--orange);
  line-height: 1.12;
  letter-spacing: -1px;
}
.section-title--center { text-align: center; }
.section-title--light { color: var(--white); }
.section-title .word--hl {
  padding: 2px 16px 7px;
  font-size: .92em;
  vertical-align: -.06em;
}
.word--hl-orange { color: var(--orange) !important; }

/* ============== PORTFOLIO ============== */
.portfolio { background: var(--cream); padding: 84px 0 96px; }
.portfolio .section-title { margin-bottom: 48px; }

/* 18 marcas: 6 por fila = 3 filas exactas, sin renglón huérfano */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.brand-card {
  border-radius: var(--radius);
  padding: 20px 14px 18px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.brand-card:hover { transform: translateY(-7px) rotate(-1.5deg); box-shadow: var(--shadow-card); }
/* plato blanco: garantiza contraste de cualquier logo sobre los fondos de color */
/* contenedor del logo: sin fondo, el contraste lo da el tema de la tarjeta */
.brand-logo-plate {
  width: 100%;
  height: 84px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* logos cuadrados/circulares: sin esto quedan visualmente más chicos que los apaisados */
.brand-logo--tall { max-height: 128%; }
.brand-card h3 {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.brand-cat {
  font-weight: 500;
  font-size: .86rem;
  margin: 9px 0 auto;
  opacity: .9;
  overflow-wrap: anywhere;
}
.flag-pill {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 11px;
  white-space: nowrap;
  border-radius: 999px;
  border: 2px solid currentColor;
}
.flag-pill img {
  width: 18px; height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

/* brand themes */
.theme-yellow { background: var(--yellow); }
.theme-yellow h3 { color: var(--orange); }
.theme-yellow .brand-cat { color: #9a5410; }

.theme-red { background: var(--orange); }
.theme-red h3 { color: var(--ink); }
.theme-red .brand-cat { color: rgba(255,255,255,.92); }
.theme-red h3.t-yellow { color: var(--yellow); }

.theme-purple { background: var(--purple); }
.theme-purple h3 { color: var(--white); }
.theme-purple .brand-cat { color: rgba(255,255,255,.9); }

.theme-orange { background: var(--orange-bright); }
.theme-orange h3 { color: var(--white); }
.theme-orange .brand-cat { color: rgba(255,255,255,.9); }

.theme-cyan { background: var(--cyan); }
.theme-cyan h3 { color: #0c3a4a; }
.theme-cyan .brand-cat { color: #0c3a4a; opacity: .8; }
.theme-cyan h3.t-white { color: var(--white); }

/* ============== WHY US ============== */
.why { background: var(--yellow); padding: 80px 0 96px; }
.why .section-title { margin-bottom: 64px; }

/* La card 1 va a lo ancho arriba y las otras 3 en una fila debajo: su texto es
   mucho mas largo que el resto y en 4 columnas iguales desbalanceaba la grilla. */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  /* El gap vertical es mayor que el horizontal: los .num-badge sobresalen 30px
     hacia arriba y con un gap parejo se montaban sobre la card de arriba. */
  gap: 40px 26px;
}

.value-card {
  background: var(--white);
  border-radius: 26px;
  padding: 56px 26px 34px;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* A lo ancho el parrafo tendria lineas de ~1100px: icono+titulo en una columna
   angosta a la izquierda y el texto al lado. Va despues de .value-card para
   que el display:grid le gane al display:flex de la base. */
.value-card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: 44px;
  align-items: start;
  padding: 46px 34px 38px;
}
.value-card--wide .value-icon { grid-column: 1; margin-bottom: 14px; }
.value-card--wide h3 { grid-column: 1; margin-bottom: 0; }
.value-card--wide p { grid-column: 2; grid-row: 1 / span 2; flex: none; }
/* La tarjeta es ancha: el badge centrado quedaria lejos del icono. */
.value-card--wide .num-badge { left: 62px; transform: none; }
.num-badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 62px;
  background: var(--white);
  color: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.9rem;
  box-shadow: 8px 9px 0 var(--purple);
}
.value-icon { display: block; color: var(--orange); width: 60px; height: 60px; margin-bottom: 18px; }
.value-icon svg { width: 100%; height: 100%; }
.value-card h3 {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.15;
  margin-bottom: 14px;
}
.value-card--wide h3 { font-size: 1.75rem; }
.value-card p {
  font-weight: 500;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--dark);
  flex: 1;
}

/* ============== CONFÍAN EN NOSOTROS (cinta de clientes) ============== */
/* Fondo blanco por el mismo motivo que .press: los logos de retail son
   multicolor y sobre blanco no necesitan plato de fondo. Además corta entre el
   amarillo de .why y el crema de .region, que si no quedarían pegados. */
.clients { background: var(--white); padding: 72px 0 80px; }
.clients .section-title { margin-bottom: 40px; }

/* La máscara difumina los dos extremos: sin ella los logos aparecen y
   desaparecen de golpe contra el borde y la cinta se vuelve invasiva. */
.clients-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Capa de arrastre. Va separada del track porque la animación usa el
   translateX del track y el arrastre usa el de acá: así se suman sin que
   mover la cinta con el dedo obligue a pausar y recalcular la animación.
   touch-action:pan-y deja pasar el scroll vertical de la página — el
   horizontal lo maneja script.js con pointer events, igual que .fslider-track.
   Sin JS esta capa no hace nada, así que la cinta sigue andando igual. */
.clients-drag {
  touch-action: pan-y;
  cursor: grab;
}
.clients-drag.is-grabbing {
  cursor: grabbing;
  /* Mientras se arrastra no queremos que el navegador seleccione los alt de
     los logos ni muestre el fantasma de arrastre de la imagen. */
  user-select: none;
  -webkit-user-select: none;
}
.clients-drag img { -webkit-user-drag: none; user-select: none; }

.clients-track {
  --cl-gap: 56px;

  display: flex;
  gap: 0;              /* el hueco entre las dos filas lo pone su padding-right */
  width: max-content;
  animation: clientsScroll 60s linear infinite;
  will-change: transform;
}

/* Pausa al hover y también al tab: un logo en movimiento no se puede mirar, y
   con :focus-within la cinta se queda quieta al navegar con teclado. */
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state: paused; }

/* -50% es exactamente una fila SOLO si cada fila mide 27 items + 27 gaps: de
   eso se encarga el padding-right de .clients-row, que agrega el gap que le
   falta al último item. Sin eso el ciclo salta medio gap en cada vuelta. */
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.clients-row {
  list-style: none;
  margin: 0;
  padding: 0 var(--cl-gap) 0 0;
  display: flex;
  align-items: center;
  gap: var(--cl-gap);
  flex: 0 0 auto;
}

.client-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* alto fijo: reserva la banda antes de que bajen los logos (CLS 0), mismo
     criterio que .brand-logo-plate y .press-item */
  min-height: 82px;
  flex: 0 0 auto;
  opacity: .8;         /* reposo apagado: la banda acompaña, no compite */
  transition: opacity .18s ease, transform .18s ease;
}
.client-item:hover { opacity: 1; transform: translateY(-3px); }

.client-logo {
  /* 46px se mide contra el titulo de la seccion, que ronda los 50px: mas
     abajo los logos leian como una nota al pie del titulo. */
  max-height: 46px;
  max-width: 172px;
  width: auto;
  height: auto;
  /* contain y nunca cover: los logos vienen en proporciones dispares (Universo
     Binario es 10:1, Starbucks es 1:1) */
  object-fit: contain;
}
/* Logos cuadrados o circulares: sin esto leen mucho más chicos que los
   apaisados (mismo problema y misma solución que .brand-logo--tall y
   .press-logo--tall). */
.client-logo--tall { max-height: 64px; }
/* Y el caso opuesto: un wordmark muy apaisado topa contra el max-width y queda
   con 14px de alto, ilegible. Se le deja más ancho. */
.client-logo--wide { max-width: 260px; }

/* Cuando todavía no hay archivo del logo, o cuando el archivo da 404 y lo
   reemplaza script.js */
.client-wordmark {
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}

/* ============== REGIÓN / 3 PAÍSES ============== */
.region { background: var(--cream); padding: 84px 0 96px; }
.region .section-title { margin-bottom: 22px; }

.region-lead {
  max-width: 720px;
  margin: 0 auto 54px;
  text-align: center;
  color: rgba(42,18,6,.78);
  font-size: 1.14rem;
  line-height: 1.6;
}
.region-lead strong { color: var(--ink); font-weight: 700; }

.region-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

/* ---- mapa ---- */
.region-map {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 460px;
}
.region-map img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 38px rgba(42,18,6,.28));
}

/* pines */
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-pin-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--orange-bright);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 0 rgba(239,78,35,.55);
  animation: pinPulse 2.6s ease-out infinite;
}
.map-pin:nth-of-type(2) .map-pin-dot { animation-delay: .55s; }
.map-pin:nth-of-type(3) .map-pin-dot { animation-delay: 1.1s; }

/* Las etiquetas se apartan un poco del punto para no tapar los países.
   --sep controla cuánto se alejan. */
.map-pin { --sep: 20px; }
.map-pin--right { --sep: 20px; }   /* Montevideo, hacia la derecha */
.map-pin--left  { --sep: 20px; }   /* Buenos Aires, hacia la izquierda */

.map-pin--left  .map-pin-tag,
.map-pin--right .map-pin-tag {
  position: absolute;
  bottom: 50%;
}
.map-pin--left  .map-pin-tag { right: calc(50% + var(--sep)); }
.map-pin--right .map-pin-tag { left:  calc(50% + var(--sep)); }

/* Asunción no compite con nadie: su tarjeta va arriba del punto. */
.map-pin:not(.map-pin--left):not(.map-pin--right) .map-pin-tag {
  position: absolute;
  bottom: calc(50% + var(--sep));
  left: 50%;
  transform: translateX(-50%);
}

@keyframes pinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,30,.6); }
  70%  { box-shadow: 0 0 0 15px rgba(255,90,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,30,0); }
}

.map-pin-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 13px 8px;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  white-space: nowrap;
  line-height: 1.15;
  box-shadow: 0 8px 18px -8px rgba(42,18,6,.5);
}
.map-pin-tag b { font-size: .93rem; font-weight: 700; }
.map-pin-tag i {
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  color: var(--orange);
}

/* ---- columna derecha ---- */
.region-side { display: grid; gap: 18px; }

.region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 6px;
}
.region-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
}
.lg-swatch {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  flex: none;
}
.lg-swatch--uy { background: var(--cyan); }
.lg-swatch--ar { background: var(--yellow); }
.lg-swatch--py { background: var(--purple); }

.region-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding: 22px 24px 24px;
  border-radius: var(--radius);
  background: var(--white);
}
.region-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--orange-bright);
  color: var(--white);
}
.region-icon svg { width: 27px; height: 27px; }
.region-card h3 {
  align-self: center;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 700;
}
.region-card ul { display: grid; gap: 7px; margin-top: 4px; }
.region-card ul li {
  position: relative;
  padding-left: 17px;
  color: rgba(42,18,6,.75);
  font-size: .97rem;
  line-height: 1.45;
}
.region-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============== OFFERS ============== */
.offers { background: var(--dark); padding: 80px 0 96px; }
.offers .section-title { margin-bottom: 56px; }

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* La card es un <a> al form de contacto: hereda color y saca el subrayado
   para que el link no se note como texto de link. */
.product-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.product-card:hover { transform: translateY(-6px); }
.product-card:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}
.product-img {
  background: var(--purple);
  height: 168px;
  position: relative;
  background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%);
}
.discount-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 50px; height: 50px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);
}
.product-body { padding: 16px 18px 20px; }
.product-brand {
  color: var(--purple-deep);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.product-name {
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.2;
  margin: 7px 0 6px;
  color: var(--dark);
}
.product-meta {
  font-size: .82rem;
  color: #8a8a8a;
  font-weight: 500;
  margin-bottom: 10px;
}
.product-price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.price-now { font-weight: 700; font-size: 1.7rem; color: var(--dark); }
.price-old {
  font-size: 1rem;
  color: #b0b0b0;
  text-decoration: line-through;
  font-weight: 500;
}
.expiry-badge {
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .6px;
  padding: 7px 13px;
  border-radius: 999px;
}

/* ============== PRODUCTOS DESTACADOS (slider) ============== */
/* Slider hecho a mano, sin librerías. La ventana recorta y el track se
   desplaza con translateX; el JS sólo escribe el transform y las clases de
   estado.

   No reusa .product-card/.product-img de OFFERS a propósito: esas tienen
   height y background fijos que el catálogo ya tuvo que sobrescribir cinco
   veces (ver los overrides de .catalogo más abajo), y un tercer contexto lo
   haría inmantenible. De ahí el prefijo propio .fcard. */
.featured { background: var(--orange); padding: 80px 0 96px; }
.featured .section-title { margin-bottom: 48px; }
/* El .eyebrow global es naranja: sobre esta sección quedaría invisible. */
.featured .eyebrow { color: var(--white); }

/* El padding lateral reserva el carril de las flechas: sin él se montarían
   sobre las tarjetas de los extremos y taparían parte del producto. */
.fslider {
  position: relative;
  padding: 0 68px;
}

/* Recorta los slides que quedan fuera de la ventana. Las flechas viven fuera
   de este contenedor para que el overflow no las corte. */
.fslider-window { overflow: hidden; }

.fslider-track {
  /* --fs-visibles es la ÚNICA fuente de verdad de cuántos slides se ven: el
     CSS la cambia por breakpoint y el JS la lee con getComputedStyle. Así no
     hay aritmética de anchos duplicada ni breakpoints hardcodeados en dos
     lugares. */
  --fs-visibles: 4;
  --fs-gap: 22px;              /* mismo gap que .offer-grid */

  display: flex;
  gap: var(--fs-gap);
  list-style: none;
  transition: transform .5s ease;   /* speed: 500 del slider de referencia */
  will-change: transform;
  /* pan-y deja pasar el scroll vertical de la página: el arrastre horizontal
     lo maneja el JS con pointer events. */
  touch-action: pan-y;
  /* Arrastrar con el mouse seleccionaría los nombres de las tarjetas. */
  user-select: none;
  -webkit-user-select: none;
}

/* El acomodo a la tarjeta más cercana al soltar la mano. Más corto y con
   salida desacelerada: los 500 ms del paso de flecha, para un movimiento que
   casi siempre es de menos de media tarjeta, se sienten como si el slider
   costara moverlo. */
.fslider-track.is-settling { transition: transform .42s cubic-bezier(.22, .61, .36, 1); }

/* El JS la agrega para los saltos instantáneos del loop y para que el track
   siga al dedo sin la transición. Va última: si por un frame conviven las dos,
   gana no animar. */
.fslider-track.is-jumping { transition: none; }

/* Afordancia del arrastre. Tiene que ir también sobre .fcard porque las
   tarjetas son <a> y el cursor:pointer del link le ganaría al del track. Sólo
   con .is-arrastrable: si todos los productos entran en pantalla no hay nada
   que arrastrar y la manito mentiría. */
.fslider.is-arrastrable .fslider-track,
.fslider.is-arrastrable .fcard { cursor: grab; }
.fslider.is-grabbing .fslider-track,
.fslider.is-grabbing .fcard { cursor: grabbing; }

.fslider-slide {
  /* flex: 0 0 <ancho> — ni crece ni se encoge: el ancho lo manda el cálculo.
     Para V visibles y gap G: (100% - (V-1)*G) / V */
  flex: 0 0 calc((100% - (var(--fs-visibles) - 1) * var(--fs-gap)) / var(--fs-visibles));
  min-width: 0;   /* sin esto, un nombre largo infla el slide y descuadra todo */
  display: flex;  /* que la tarjeta ocupe todo el alto del slide */
}

/* ---- Producto ---- */
/* Sin tarjeta: la foto va suelta sobre el fondo de la sección y el nombre
   debajo, como en el slider de referencia. Es un <a> para que todo el bloque
   —foto y texto— sea clickeable. */
.fcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: var(--white);
  transition: transform .18s ease;
}
.fcard:hover { transform: translateY(-6px); }

/* overflow:hidden acá y no en .fcard: es lo que recorta el zoom de la imagen
   sin cortar el texto de abajo. */
.fcard-media {
  overflow: hidden;
  height: 200px;
  flex: 0 0 auto;
}
.fcard-img {
  width: 100%;
  height: 100%;
  display: block;
  /* Sin esto el navegador arranca su propio arrastre con la foto (el JS también
     lo cancela; esto es el cinturón de seguridad, igual que en la cinta). */
  -webkit-user-drag: none;
  /* contain y no cover: las fotos de Odoo vienen en proporciones variadas y
     cover recortaría el producto (mismo criterio que el catálogo). */
  object-fit: contain;
  transition: transform .4s ease;
}
/* El zoom al hover del original (elementor-animation-grow). */
.fcard:hover .fcard-img { transform: scale(1.08); }

/* Si el producto no tiene imagen en Odoo el endpoint da 404 y el JS cae acá.
   Sin tarjeta no hay placeholder que rellenar, así que se reserva el hueco con
   un óvalo translúcido: mantiene la grilla alineada sin inventar una caja. */
.fcard--sin-imagen .fcard-media {
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
}

.fcard-body {
  padding: 18px 8px 0;
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fcard-name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Sobre el naranja de la sección: blanco al 80% en vez de naranja, que sería
   invisible. Es la jerarquía secundaria del nombre. */
.fcard-cat {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

/* ---- Flechas ---- */
/* Mismo lenguaje visual que las del carrusel de testimonios (.t-arrow), pero
   clase propia: estas viven sobre fondo oscuro y su posición depende de la
   ventana del slider. */
.fslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--dark);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.fslider-arrow svg { width: 24px; height: 24px; }
/* El JS las esconde con [hidden] cuando todos los productos entran en pantalla;
   sin esta regla el display:grid de arriba le gana al display:none del atributo
   y las flechas quedan visibles sin hacer nada. */
.fslider-arrow[hidden] { display: none; }
/* Hover a oscuro y no a amarillo (como las flechas de testimonios): sobre el
   naranja de la sección el amarillo casi no se distingue del fondo. */
.fslider-arrow:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-50%) scale(1.1);
}
.fslider-arrow:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; }
/* Centradas en el carril que reserva el padding de .fslider. */
.fslider-prev { left: 4px; }
.fslider-next { right: 4px; }

.featured-cta { text-align: center; margin-top: 48px; }

/* ============== ROLES / PORTAL ============== */
.roles { background: var(--orange); padding: 80px 0 96px; }
.roles .section-title { margin-bottom: 56px; }

/* 5 canales en grilla de 6 columnas (2 por card, 3 por fila): la ultima fila
   queda con 2 cards -> se corren para quedar centradas bajo la fila de arriba
   en vez de pegadas a la izquierda. Mismo patron que .conditions-factors. */
.role-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.role-grid .role-card { grid-column: span 2; }
.role-grid .role-card:nth-child(4):nth-last-child(2) { grid-column: 2 / 4; }
.role-grid .role-card:nth-child(5):nth-last-child(1) { grid-column: 4 / 6; }
/* No usamos .btn--small: pinta fondo blanco y sobre la tarjeta blanca el boton
   desaparece. Mantenemos el naranja de .btn--solid y lo achicamos aca. */
.role-cta {
  align-self: flex-start;
  padding: 12px 20px;
  font-size: .78rem;
}
.role-card {
  background: var(--white);
  border-radius: 20px;
  padding: 30px 26px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.note-badge {
  width: 46px; height: 46px;
  background: var(--yellow);
  color: var(--orange);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px 6px 6px 0;
  margin-bottom: 22px;
  position: relative;
  box-shadow: 4px 5px 0 rgba(0,0,0,.12);
}
.note-badge::after {
  content: "";
  position: absolute;
  bottom: -10px; left: 0;
  border: 5px solid transparent;
  border-top-color: var(--yellow-deep);
  border-right-color: var(--yellow-deep);
}
.role-card h3 {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  margin-bottom: 12px;
}
.role-card p {
  color: var(--orange-bright);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.45;
  margin-bottom: 22px;
  flex: 1;
}
.conditions-link {
  color: var(--dark);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.conditions-link::after {
  content: "→";
  transition: transform .18s ease;
}
.conditions-link:hover::after { transform: translateX(5px); }

/* ============== TESTIMONIALS ============== */
.testimonials {
  background: var(--purple);
  padding: 96px 90px;
  position: relative;
  text-align: center;
}
.testimonial-inner { max-width: 900px; margin: 0 auto; }
.t-quote {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.22;
  letter-spacing: -.5px;
  margin-bottom: 40px;
  transition: opacity .25s ease;
}
.t-name {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}
.t-role {
  color: rgba(255,255,255,.92);
  font-weight: 500;
  font-size: 1.1rem;
  margin-top: 4px;
}
.t-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.t-arrow svg { width: 24px; height: 24px; }
.t-arrow:hover { transform: translateY(-50%) scale(1.1); background: var(--yellow); }
.t-prev { left: 28px; }
.t-next { right: 28px; }

.t-dots {
  display: flex;
  gap: 4px;               /* separacion entre areas tocables */
  justify-content: center;
  margin-top: 30px;       /* compensa el padding vertical de los botones */
}
.t-dots button {
  /* 11px visibles dentro de un area tocable de 24x24 */
  width: 24px; height: 24px;
  box-sizing: border-box;
  padding: 0;
  border: 6.5px solid transparent;
  background: rgba(255,255,255,.4);
  background-clip: content-box;
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
/* El activo se agranda achicando el borde transparente, no con scale(): asi el
   area tocable sigue midiendo 24px y no se superpone con la del vecino. */
.t-dots button.active { background: var(--white); background-clip: content-box; border-width: 5px; }

/* ============== PRENSA / EN LOS MEDIOS ============== */
/* Fondo blanco y no cream: casi todos los wordmarks de prensa son de un solo
   color oscuro y sobre cream o naranja habría que ponerle un plato blanco a
   cada uno. Blanco no se usa como fondo de sección en ninguna otra parte, así
   que además ayuda a que la barra lea como banda neutral de "salimos en". */
.press { background: var(--white); padding: 76px 0 88px; }
.press .section-title { margin-bottom: 44px; }

/* flex y no grid: con repeat(5, 1fr) cinco logos de proporciones muy distintas
   (El Observador es 10:1, Old Boys es 2:1) quedan aplastados o diminutos. */
.press-bar {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 30px;
}
.press-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* alto fijo: reserva el hueco antes de que baje el logo (CLS 0), mismo
     criterio que .brand-logo-plate */
  min-height: 84px;
  padding: 10px 18px;
  border-radius: 16px;
  opacity: .84;
  transition: opacity .18s ease, transform .18s ease;
}
.press-item:hover { opacity: 1; transform: translateY(-3px); }
.press-item:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  opacity: 1;
}
.press-logo {
  max-width: 200px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* logos casi cuadrados: sin esto leen mucho más chicos que los apaisados
   (mismo problema y misma solución que .brand-logo--tall) */
.press-logo--tall { max-height: 56px; }
/* Fallback cuando el medio no tiene logo en press-data.js, o cuando el archivo
   da 404 y script.js lo reemplaza */
.press-wordmark {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}
.press-cta { text-align: center; margin-top: 40px; }

/* ---- /prensa.html (render en templates.js) ---- */
.press-page { background: var(--cream); padding: 76px 0 96px; }
.press-group { margin-top: 48px; }
/* Al entrar por un ancla (#medio-<slug>) desde la barra de la home, el grupo
   queda con aire arriba en vez de pegado abajo del header.
   scroll-margin-top gana sobre el scroll-padding-top: var(--header-h) que
   html tiene global para las anclas de la nav, y solo acá.
   Offset fijo y no centrado real del bloque: los grupos van de ~190px
   (Forbes, 1 nota) a ~580px (InfoNegocios, 4) y en mobile hasta ~720px, así
   que centrar el bloque entero dejaría a cada medio en una altura distinta
   —y a los altos con el logo cortado arriba—. Con offset fijo los cinco caen
   igual.
   Ojo con el número: scroll-margin-top se mide desde el borde del <section>,
   que arranca ~88px arriba del logo (el margin-top de .press-group más el
   padding del título). O sea que 22vh deja el logo a ~30% de la pantalla,
   no a 22%. Medido con CDP: ~30% en 1280x860, 1440x760 y 390x780.
   El max() evita que en una pantalla baja el offset caiga por debajo del
   header fijo y el logo termine tapado. */
.press-group[id] { scroll-margin-top: max(22vh, calc(var(--header-h) + 24px)); }
.press-group-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(0,0,0,.12);
}
.press-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.press-note-link {
  display: block;
  background: var(--white);
  border-radius: 18px;
  padding: 20px 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.press-note-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.press-note-link:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}
.press-note-date {
  display: block;
  font-weight: 500;
  font-size: .8rem;
  color: var(--dark);
  opacity: .65;
}
.press-note-title {
  display: block;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 6px 0 12px;
}
.press-note-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--orange);
}
/* ↗ y no la → del blog: la flecha diagonal avisa que el link sale del sitio */
.press-note-cta::after { content: "↗"; transition: transform .18s ease; }
.press-note-link:hover .press-note-cta::after { transform: translate(3px, -3px); }

/* ============== CONTACT ============== */
.contact { background: var(--cream); padding: 88px 0 96px; }

.contact-form {
  max-width: 860px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

/* El `display` de .contact-form, .field y .field-group son reglas de autor y le
   ganan al `display:none` que el navegador aplica por el atributo [hidden], así
   que sin esto un elemento con `hidden` se seguiría viendo. Lo usa el alta de
   cliente en dos lados: para alternar entre los campos de empresa y los de
   consumidor final, y para tapar el formulario entero cuando muestra la
   confirmación (ver script.js). */
.contact-form[hidden],
.contact-form [hidden] { display: none !important; }

/* Los campos de empresa del alta de cliente van agrupados en un <fieldset>
   para poder ocultarlos y deshabilitarlos de una sola vez cuando el
   prospecto marca "soy consumidor final" (ver script.js). El fieldset es
   hijo directo del grid del formulario, así que replica su layout. */
.field-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  border: 0;
  margin: 0;
  padding: 0;
  /* Los navegadores le imponen min-width:min-content a los fieldset, y sin
     esto el grupo desborda el grid en pantallas angostas. */
  min-inline-size: 0;
}

/* Checkbox de tipo de cliente. Es una opción secundaria —la mayoría de las
   altas son de empresa—, así que va sin fondo ni caja: sobre el crema de la
   sección, para que no compita con los campos blancos del formulario ni se
   lea como un bloque más. Solo la casilla se pinta al marcarse. */
.check-card {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  align-self: start;
  padding: 2px 0;
  font-weight: 600;
  font-size: .95rem;
  color: rgba(42,18,6,.78);
  transition: color .15s ease;
}
.check-card:hover { color: var(--ink); }
.check-card:hover .check-box { border-color: rgba(42,18,6,.42); }

/* El input real se oculta pero sigue en el árbol de accesibilidad y recibe el
   foco: el estado se pinta en .check-box vía :checked / :focus-visible.
   No se usa display:none, que lo sacaría de la navegación por teclado. */
.contact-form .check-card input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  opacity: 0;
  pointer-events: none;
}
.check-box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid rgba(42,18,6,.28);
  border-radius: 7px;
  background: var(--white);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.check-box svg { width: 14px; height: 14px; }
.check-text { line-height: 1.3; }

/* Marcado: se pinta solo la casilla, sin tocar el resto. Se usa el selector
   hermano y no :has(), igual que en el hero, para no depender del soporte del
   selector. La clase --on la pone el mismo JS que oculta los campos de
   empresa, y sirve para resaltar apenas el texto. */
.check-card input:checked + .check-box {
  background: var(--orange-bright);
  border-color: var(--orange-bright);
  color: var(--white);
}
.check-card--on { color: var(--ink); }

/* Navegación por teclado: el input está visualmente oculto, así que el anillo
   de foco se dibuja sobre la casilla. */
.check-card--focus .check-box {
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 4px rgba(255,90,30,.18);
}

/* Visible para lectores de pantalla, no en pantalla. Lo usa el <legend> del
   grupo de campos de empresa: da contexto de grupo a quien navega con
   lector, que el título visual de la sección no aporta programáticamente. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  font-family: var(--font);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid rgba(42,18,6,.18);
  border-radius: 16px;
  padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form textarea {
  border-radius: 18px;
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}
.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1206' stroke-width='2.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: 18px;
  padding-right: 44px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: none;
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 4px rgba(255,90,30,.16);
}
.contact-form .field-error {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(242,59,10,.14);
}

/* ---- Confirmación del alta ----
   Reemplaza al formulario cuando el alta sale bien. Es el momento de mayor
   atención de la persona, así que ocupa el mismo lugar en vez de ser una línea
   de texto bajo el botón. Sigue el lenguaje de las tarjetas del sitio: fondo
   blanco, radio generoso y sombra dura offset. */
.signup-done {
  max-width: 860px;
  margin: 40px auto 0;
  background: var(--white);
  border-radius: 26px;
  padding: 48px 34px 40px;
  text-align: center;
  box-shadow: 8px 9px 0 var(--purple);
}
.signup-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--orange-bright);
  color: var(--white);
}
.signup-done-icon svg { width: 32px; height: 32px; }
.signup-done-title {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 14px;
}
.signup-done-lead {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dark);
  max-width: 46ch;
  margin: 0 auto;
}
/* El correo al que se mandó: es el dato que permite darse cuenta de un tipeo.
   El break-word evita que un mail largo desborde la tarjeta en mobile. */
.signup-done-mail {
  margin: 10px auto 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.signup-done-hint {
  margin: 22px auto 0;
  max-width: 44ch;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(42,18,6,.66);
}
.signup-done-foot {
  margin: 26px auto 0;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(42,18,6,.66);
}
.signup-done-foot a {
  color: var(--orange);
  font-weight: 700;
  white-space: nowrap;
}
/* Salida para quien se equivocó de correo: vuelve al formulario, que sigue en
   el DOM con sus campos intactos. Es un <button>, no un link: no navega. */
.signup-done-again {
  margin-top: 22px;
  background: none;
  border: 0;
  padding: 4px;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  color: rgba(42,18,6,.6);
  text-decoration: underline;
  cursor: pointer;
}
.signup-done-again:hover { color: var(--orange); }

/* honeypot: fuera de pantalla, invisible para personas */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
}
.contact-submit[disabled] { opacity: .65; cursor: progress; }

.form-status {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.5;
}
.form-status:empty { display: none; }
.form-status.ok  { color: #1F7A46; }
.form-status.err { color: var(--red); }

/* ============== MAPA / UBICACIÓN ============== */
.map-section { background: var(--yellow); padding: 72px 0 80px; text-align: center; }
.map-title { margin-bottom: 28px; }

.map-frame {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.map-frame iframe { width: 100%; height: 100%; display: block; }

.map-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font);
  font-weight: 600;
  font-size: .95rem;
  color: var(--purple-deep);
  text-decoration: none;
  transition: color .15s ease;
}
.map-link:hover,
.map-link:focus-visible { color: var(--orange); }

/* ============== FOOTER ============== */
.site-footer { background: var(--dark); color: var(--white); padding: 64px 32px 28px; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 40px;
}
.logo-img--footer { height: 58px; }
.footer-desc {
  margin-top: 22px;
  font-weight: 500;
  font-size: .94rem;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  max-width: 340px;
}
.footer-desc strong { color: var(--orange-bright); font-weight: 700; }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
  color: var(--orange-bright);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-col a, .footer-static {
  color: rgba(255,255,255,.78);
  font-weight: 500;
  font-size: .95rem;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--white); }

.socials { display: flex; gap: 14px; margin-top: 10px; }
.socials a {
  width: 40px; height: 40px;
  border: 2px solid var(--cyan);
  border-radius: 10px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.socials a svg { width: 20px; height: 20px; }
.socials a:hover { background: var(--cyan); color: var(--dark); }

.footer-bottom {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
}
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.55); transition: color .15s ease; }
.footer-legal a:hover { color: var(--white); }

/* ============== AVISO DE COOKIES ============== */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 620px;
  margin: 0 auto;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner-text { font-weight: 500; font-size: .92rem; line-height: 1.5; margin-bottom: 16px; }
.cookie-banner-text a { color: var(--orange-bright); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.map-frame--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--cream);
  text-align: center;
  padding: 24px;
}
.map-frame--placeholder p { font-weight: 500; font-size: .95rem; color: var(--dark); max-width: 380px; }

/* ============== WHATSAPP FLOTANTE ============== */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float svg { width: 34px; height: 34px; }
.wa-float:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.55);
}
.wa-float:active { transform: scale(.95); }

/* ============== PAGE HERO (páginas internas) ============== */
.page-hero { background: var(--orange); padding: 64px 0 56px; text-align: center; }
.page-hero .eyebrow { color: var(--yellow); }
.page-hero .section-title { color: var(--white); }
.page-hero .page-lead {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255,255,255,.94);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.55;
}

/* ============== 404 ============== */
.error-code {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--white);
  margin-bottom: 8px;
}
.error-links { text-align: center; }
.error-links-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ============== CÓMO COMPRAR ============== */
.buy-modes { background: var(--yellow); padding: 76px 0 88px; }
.buy-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.buy-mode-card {
  background: var(--white);
  border-radius: 26px;
  padding: 34px 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.buy-mode-emoji { display: block; color: var(--orange); width: 48px; height: 48px; margin-bottom: 16px; }
.buy-mode-emoji svg { width: 100%; height: 100%; }
.buy-mode-card h3 { color: var(--orange); font-weight: 700; font-size: 1.35rem; line-height: 1.15; margin-bottom: 12px; }
.buy-mode-card p { font-weight: 500; font-size: .98rem; line-height: 1.5; color: var(--dark); margin-bottom: 20px; flex: 1; }
/* Los CTA quedan al pie y no se estiran al ancho de la tarjeta. */
.buy-mode-cta { align-self: flex-start; }
.buy-mode-tag {
  display: inline-block;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: var(--cream);
  border-radius: 999px;
  padding: 8px 14px;
  line-height: 1.4;
}

.coverage { background: var(--cream); padding: 80px 0 88px; }
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.coverage-card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px 26px;
}
.coverage-card h3 { color: var(--orange); font-weight: 700; font-size: 1.2rem; margin-bottom: 12px; }
.coverage-card ul { display: flex; flex-direction: column; gap: 8px; }
.coverage-card li {
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--dark);
  padding-left: 18px;
  position: relative;
}
.coverage-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--orange-bright);
  font-weight: 700;
}

/* ============== MAPA DEPARTAMENTOS ============== */
.uy-map-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}
.uy-map-wrap {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.uy-map-svg { width: 100%; height: auto; display: block; }
.uy-map-svg path {
  stroke: var(--white);
  stroke-width: 2.5;
  cursor: pointer;
  fill: var(--cyan);
  transition: fill .15s ease, opacity .15s ease;
  outline: none;
}
.uy-map-svg path:hover,
.uy-map-svg path:focus-visible { opacity: .78; }
.uy-map-svg path.is-active {
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
  paint-order: fill stroke;
}

.uy-map-side { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.uy-map-panel {
  background: var(--white);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.18);
  min-height: 140px;
}
.uy-map-panel-hint {
  font-weight: 500;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--dark);
  opacity: .75;
}
.uy-map-panel-title {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.uy-map-panel-text {
  font-weight: 500;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--dark);
  margin-bottom: 16px;
}

/* ============== CONDICIONES ============== */
.conditions-section { background: var(--yellow); padding: 76px 0 88px; }
.conditions-factors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 158px));
  justify-content: center;
  gap: 24px;
  margin: 44px 0 0;
}
.conditions-factors .role-card { grid-column: span 2; }
/* 5 cards en grilla de 6 columnas (2 por card, 3 por fila): la última fila
   queda con 2 cards -> se corren para quedar centradas bajo la fila de
   arriba en vez de pegadas a la izquierda. */
.conditions-factors .role-card:nth-child(4):nth-last-child(2) { grid-column: 2 / 4; }
.conditions-factors .role-card:nth-child(5):nth-last-child(1) { grid-column: 4 / 6; }
.conditions-factors .role-card p { color: var(--dark); }
.conditions-consistent {
  max-width: 820px;
  margin: 56px auto 0;
  background: var(--white);
  border-radius: 26px;
  padding: 36px 38px;
  text-align: center;
}
.conditions-consistent h3 { color: var(--orange); font-weight: 700; font-size: 1.4rem; margin-bottom: 14px; }
.conditions-consistent p { font-weight: 500; font-size: 1.02rem; line-height: 1.55; color: var(--dark); }
.conditions-cta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ============== FAQ ============== */
.faq-section { background: var(--cream); padding: 76px 0 96px; }
.faq-groups { max-width: 880px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 40px; }
.faq-group-title {
  color: var(--orange);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border-radius: 16px;
  padding: 4px 24px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.18);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--orange-bright);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p {
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--dark);
  padding: 0 0 20px;
}

/* ============== BLOG ============== */
.blog-posts { background: var(--yellow); padding: 76px 0 96px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}
.blog-card {
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.blog-card-img {
  height: 160px;
  background: var(--purple);
  background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%);
}
.blog-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card-cat {
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 10px;
}
.blog-card h3 { color: var(--ink); font-weight: 700; font-size: 1.18rem; line-height: 1.25; margin-bottom: 10px; }
.blog-card p { font-weight: 500; font-size: .92rem; line-height: 1.45; color: var(--dark); flex: 1; margin-bottom: 14px; }
.blog-card-link { font-weight: 700; font-size: .82rem; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; }
.blog-card-link::after { content: "→"; transition: transform .18s ease; }
.blog-card:hover .blog-card-link::after { transform: translateX(5px); }

/* Sin posts publicados: una tarjeta centrada en lugar de la grilla. */
.blog-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 40px 44px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 8px 9px 0 var(--purple);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
}
.blog-empty-title {
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 12px;
}
.blog-empty-text {
  color: var(--dark);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 400px;
  margin-bottom: 28px;
}
@media (max-width: 720px) {
  .blog-empty { padding: 40px 24px 36px; }
  .blog-empty .btn--lg { padding: 18px 28px; font-size: .95rem; white-space: normal; }
}

/* ============== BLOG POST ============== */
.post-hero { background: var(--orange); padding: 56px 0 40px; }
.post-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.post-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: rgba(255,255,255,.85); font-weight: 600; font-size: .85rem; margin-bottom: 18px; }
.post-cat-pill { background: var(--white); color: var(--orange); border-radius: 999px; padding: 5px 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: .74rem; }
.post-title { color: var(--white); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.15; }
.post-featured-img {
  height: 320px;
  border-radius: var(--radius);
  background: var(--purple);
  background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,.28), transparent 60%);
  margin: 32px auto 0;
  max-width: 760px;
  box-shadow: var(--shadow-card);
}
.post-body { background: var(--cream); padding: 56px 0 80px; }
.post-body-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.post-body-inner p { font-weight: 500; font-size: 1.05rem; line-height: 1.7; color: var(--dark); margin-bottom: 22px; }
.post-body-inner h2 { color: var(--orange); font-weight: 700; font-size: 1.5rem; margin: 36px 0 16px; }
.post-share { display: flex; gap: 12px; margin: 40px 0; flex-wrap: wrap; }
.post-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--ink);
  border-radius: 999px; padding: 10px 18px;
  font-weight: 600; font-size: .85rem;
  border: 2px solid rgba(42,18,6,.14);
  transition: transform .15s ease, background .15s ease;
}
.post-share-btn:hover { transform: translateY(-2px); background: var(--yellow); }
.post-share-btn svg { width: 16px; height: 16px; }
.post-cta-box {
  background: var(--white);
  border-radius: 22px;
  padding: 30px 32px;
  text-align: center;
  margin: 40px 0;
  box-shadow: var(--shadow-card);
}
.post-cta-box p { font-weight: 600; font-size: 1.05rem; margin-bottom: 18px; color: var(--ink); }
.post-related { margin-top: 48px; }
.post-related h3 { color: var(--orange); font-weight: 700; font-size: 1.25rem; margin-bottom: 18px; }
.post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-related-card {
  background: var(--white);
  border-radius: 16px;
  padding: 18px 18px 20px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.4;
  transition: transform .15s ease;
}
.post-related-card:hover { transform: translateY(-3px); color: var(--orange); }

/* ============== REVEAL ANIMATION ============== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in { opacity: 1; transform: none; }


/* ============== CATÁLOGO ============== */
/* La grilla y las tarjetas reusan .offer-grid / .product-card (ver arriba).
   Acá va sólo lo propio de esta página: el paginador y los estados. */
/* Con el catálogo vacío (Odoo caído o sin productos) la página queda más
   corta que la ventana y asomaba el amarillo del body debajo del footer.
   Con body en columna y el main creciendo, el footer siempre cierra abajo. */
body.page-catalogo { display: flex; flex-direction: column; min-height: 100vh; }
body.page-catalogo main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.page-catalogo .catalogo { flex: 1 0 auto; }

.catalogo { background: var(--cream); padding: 64px 0 88px; }

/* En .offers las tarjetas van sobre fondo oscuro; acá el fondo es claro, así
   que necesitan un borde suave para no fundirse con la crema. */
.catalogo .product-card { box-shadow: 0 10px 26px -18px rgba(0,0,0,.4); }

/* Odoo devuelve fotos de proporciones variadas: contain las encaja sin
   deformarlas, sobre el mismo violeta que usa el placeholder. */
.catalogo .product-img {
  width: 100%;
  object-fit: contain;
  background-color: var(--white);
  background-image: none;
  display: block;
}
.catalogo .product-card--sin-imagen .product-img { background: var(--purple); }

/* La tarjeta del catálogo es sólo imagen + nombre (sin marca ni precio),
   así que el nombre centrado equilibra mejor que alineado a la izquierda. */
.catalogo .product-body { text-align: center; }
.catalogo .product-name { margin-bottom: 0; }

.catalogo-status { text-align: center; margin-bottom: 22px; }
.catalogo-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--ink);
  font-weight: 500;
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.pager:empty { margin-top: 0; }
/* El paginador pasó de <button> a <a>: un botón no es rastreable, así que las
   páginas 2 en adelante no existían para Google. Los dos selectores conviven
   porque el HTML renderizado en el servidor y el que arma script.js comparten
   estilo — y porque un script.js viejo cacheado puede seguir emitiendo botones
   hasta una hora después de un deploy. */
.pager button,
.pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 2.5px solid var(--orange);
  border-radius: 999px;
  background: var(--white);
  color: var(--orange);
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.pager button:hover:not(:disabled):not(.is-current),
.pager a:hover:not(.is-current) {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  transform: translateY(-2px);
}
.pager button.is-current,
.pager a.is-current {
  background: var(--orange);
  color: var(--white);
  cursor: default;
}
.pager button:disabled { opacity: .4; cursor: not-allowed; }
/* :disabled no aplica a <a>, así que mientras carga una página se apaga el
   paginador entero en vez de cada enlace. */
.pager.is-loading { opacity: .45; pointer-events: none; }
.pager .pager-gap {
  color: var(--ink);
  opacity: .5;
  font-weight: 700;
  padding: 0 2px;
}

/* ============== RESPONSIVE ============== */
/* 6 col solo en pantalla grande; debajo bajamos a 4 para no achicar las tarjetas */
@media (max-width: 1180px) {
  .brand-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (max-width: 1080px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .fslider-track { --fs-visibles: 3; }
  /* Las 3 de abajo siguen en una fila; solo se aprieta el gap. Con 2 columnas
     la card 4 quedaba huerfana abajo a la izquierda. */
  .value-grid { gap: 40px 18px; }
  .value-card { padding-left: 22px; padding-right: 22px; }
  .value-card h3 { font-size: 1.24rem; }
  .value-card--wide { grid-template-columns: 1fr; padding-top: 52px; }
  .value-card--wide .value-icon,
  .value-card--wide h3,
  .value-card--wide p { grid-column: 1; }
  .value-card--wide p { grid-row: auto; }
  .value-card--wide h3 { margin-bottom: 14px; }
  /* Una sola columna: el badge vuelve al centro como en las otras cards. */
  .value-card--wide .num-badge { left: 50%; transform: translateX(-50%); }
  /* 4 columnas => 2 cards por fila; la 5a queda sola y centrada. */
  .role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .role-grid .role-card:nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .role-grid .role-card:nth-child(5):nth-last-child(1) { grid-column: 2 / 4; }
  .buy-mode-grid, .coverage-grid,
  .blog-grid, .post-related-grid { grid-template-columns: repeat(2, 1fr); }
  .conditions-factors { grid-template-columns: repeat(4, minmax(0, 158px)); }
  .conditions-factors .role-card { grid-column: span 2; }
  .conditions-factors .role-card:nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .conditions-factors .role-card:nth-child(5):nth-last-child(1) { grid-column: 2 / 4; }
  .uy-map-block { grid-template-columns: 1fr; }
  /* .press-bar no se toca acá a propósito. Achicar los logos en este
     breakpoint los hacía entrar en una fila a 1024 pero no a 1180 ni a 960
     (el ancho de cada tarjeta manda tanto como el del logo), así que al
     redimensionar la barra pasaba de 1 fila a 2, a 1 y otra vez a 2. Se deja
     que wrapee sola: el flex centra cada fila, así que 3+2 se lee como una
     barra igual, y la cantidad de filas solo crece al angostar. */
}

@media (max-width: 960px) {
  :root { --header-h: 76px; }
  .clients { padding: 60px 0 68px; }
  .clients-track { --cl-gap: 44px; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--orange);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 32px 28px;
    transform: translateY(-130%);
    transition: transform .3s ease;
    box-shadow: 0 20px 30px -16px rgba(0,0,0,.55);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav > a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .main-nav > a::after { display: none; }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 18px 0 0;
  }
  .nav-actions .btn { width: 100%; }
  .lang-toggle { align-self: flex-start; padding: 6px 0; }
  .burger { display: flex; }
  .value-grid { grid-template-columns: 1fr; gap: 52px; }
  .value-card { padding-left: 26px; padding-right: 26px; }
  .value-card h3 { font-size: 1.42rem; }
  .value-card--wide { grid-column: auto; }
  .value-card--wide h3 { font-size: 1.42rem; }
  .region-grid { grid-template-columns: 1fr; gap: 44px; }
  .region-map { max-width: 380px; }
  .region-legend { justify-content: center; }
  .value-card { padding-top: 52px; }
}

@media (max-width: 720px) {
  .section-inner { padding: 0 20px; }
  .clients-track { --cl-gap: 34px; }
  .client-item { min-height: 70px; }
  .client-logo { max-height: 38px; max-width: 136px; }
  .client-logo--tall { max-height: 54px; }
  .client-logo--wide { max-width: 190px; }
  .client-wordmark { font-size: 1.08rem; }
  /* Difuminado mas angosto: al 9% de una pantalla de 390px se come los
     logos de los extremos enteros. */
  .clients-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .hero { padding: 48px 20px 60px; }
  .hero-title { margin-bottom: 26px; }
  .hero-decor { display: none; }
  /* 3 arriba y 2 abajo, en una grilla de 6 columnas. Es grid con
     minmax(0, 1fr) y no flex-basis a propósito: con flex, el ancho mínimo del
     contenido ("+1.5k", "Proveedores") le ganaba al 33%, no entraban tres por
     fila y las cifras quedaban de a dos, amontonadas contra la izquierda. */
  .stats { padding: 40px 20px; }
  .stats-inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 8px; }
  .stat { grid-column: span 2; padding: 6px 4px; }
  .stat:nth-child(n+4) { grid-column: span 3; }
  .stat + .stat::before { display: none; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .catalogo { padding: 46px 0 64px; }
  .pager { gap: 8px; margin-top: 32px; }
  .pager button { min-width: 42px; height: 42px; padding: 0 11px; font-size: .88rem; }
  .brand-card { min-height: 210px; }
  .brand-logo-plate { height: 66px; margin-bottom: 12px; }
  .offer-grid, .role-grid { grid-template-columns: 1fr; }
  /* El catálogo va de a dos, como las marcas de la home: de a uno, cada
     página de 24 productos era un scroll larguísimo de fotos a todo el ancho.
     Tarjeta más compacta para que la foto y el nombre entren en media pantalla. */
  .catalogo .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .catalogo .product-img { height: 130px; }
  .catalogo .product-body { padding: 12px 10px 14px; }
  .catalogo .product-name { font-size: .9rem; }
  .role-grid .role-card,
  .role-grid .role-card:nth-child(4):nth-last-child(2),
  .role-grid .role-card:nth-child(5):nth-last-child(1) { grid-column: auto; }
  .fslider-track { --fs-visibles: 1; }
  /* Carril más angosto y flechas más chicas: en móvil el ancho es escaso y con
     68px por lado la tarjeta quedaría minúscula. */
  .fslider { padding: 0 4px; }
  .fslider-arrow { width: 42px; height: 42px; }
  .fslider-arrow svg { width: 20px; height: 20px; }
  /* Acá sí se montan sobre la tarjeta (no hay lugar para un carril propio),
     pero semitransparentes para no tapar el producto. */
  .fslider-arrow { background: rgba(255,255,255,.9); }
  .fslider-prev { left: 8px; }
  .fslider-next { right: 8px; }
  .featured { padding: 62px 0 72px; }
  .featured-cta { margin-top: 36px; }
  .region { padding: 62px 0 72px; }
  .region-lead { font-size: 1.03rem; margin-bottom: 40px; }
  .region-map { max-width: 300px; }
  .map-pin-tag { padding: 5px 9px 6px; border-radius: 11px; }
  .map-pin-tag b { font-size: .74rem; }
  .map-pin-tag i { font-size: .62rem; }
  .map-pin-dot { width: 11px; height: 11px; border-width: 2.5px; }
  .map-pin, .map-pin--left, .map-pin--right { --sep: 18px; }
  .region-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .region-icon { grid-row: auto; }
  .testimonials { padding: 70px 22px; }
  .t-arrow { width: 44px; height: 44px; }
  .t-prev { left: 10px; }
  .t-next { right: 10px; }
  .t-arrow svg { width: 18px; height: 18px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  /* En celular el footer va centrado entero: logo, descripción, columnas,
     redes y la barra legal. El logo es display:block, así que se centra con
     margin auto y no con text-align. */
  .site-footer { text-align: center; }
  .logo-img--footer { margin: 0 auto; }
  .footer-desc { margin-left: auto; margin-right: auto; }
  .footer-col { align-items: center; }
  /* Con dos columnas, la tercera (Contactos) quedaba sola en la mitad
     izquierda; ocupando las dos queda centrada respecto de la página. */
  .footer-col:last-child { grid-column: 1 / -1; }
  .socials { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; }
  .footer-legal { justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .contact { padding: 64px 0 72px; }
  .contact-form { grid-template-columns: 1fr; gap: 16px; }
  .signup-done { padding: 38px 22px 32px; border-radius: 22px; box-shadow: 5px 6px 0 var(--purple); }
  .signup-done-title { font-size: 1.35rem; }
  /* Sin esto los campos de empresa quedan en dos columnas mientras el resto
     del formulario ya pasó a una. */
  .field-group { grid-template-columns: 1fr; gap: 16px; }
  .contact-submit { width: 100%; }
  .map-section { padding: 56px 0 64px; }
  .map-frame { height: 220px; border-radius: 16px; }
  .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-float svg { width: 30px; height: 30px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; }
  .buy-mode-grid, .coverage-grid, .conditions-factors,
  .blog-grid, .post-related-grid { grid-template-columns: 1fr; }
  .conditions-factors .role-card,
  .conditions-factors .role-card:nth-child(4):nth-last-child(2),
  .conditions-factors .role-card:nth-child(5):nth-last-child(1) { grid-column: auto; }
  .conditions-cta { flex-direction: column; align-items: stretch; }
  .conditions-cta .btn { width: 100%; }
  .btn--lg { white-space: normal; text-align: center; }
  #manageCookiePrefs { width: 100%; }
  .post-featured-img { height: 200px; }
  .post-hero-inner, .post-body-inner { padding: 0 20px; }
  .uy-map-wrap { padding: 14px; }
  .press { padding: 56px 0 64px; }
  .press .section-title { margin-bottom: 30px; }
  .press-bar { gap: 10px 16px; }
  .press-item { min-height: 66px; padding: 8px 10px; }
  .press-logo { max-width: 130px; max-height: 30px; }
  .press-logo--tall { max-height: 44px; }
  .press-cta { margin-top: 30px; }
  .press-page { padding: 56px 0 68px; }
  .press-group { margin-top: 36px; }
  .press-note-link { padding: 18px 20px; }
}

@media (max-width: 480px) {
  /* En un teléfono no entran tres cifras por fila: van de a dos, y la quinta
     queda centrada en su propia fila en vez de sola contra la izquierda. */
  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat:nth-child(n+4) { grid-column: auto; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .map-pin-dot { animation: none; }
  /* El slider salta sin animar y la imagen no hace zoom. El autoplay lo apaga
     script.js con matchMedia: una media query no puede parar un setInterval. */
  .fslider-track, .fslider-track.is-settling { transition: none; }
  .fcard-img, .fcard:hover .fcard-img { transition: none; transform: none; }
  /* Sin animacion la cinta no tiene sentido: se convierte en una barra
     estatica centrada que envuelve, igual que .press-bar. Se oculta la fila
     duplicada, que solo existia para el loop. */
  /* display:block para que la fila deje de ser un flex item de ancho
     max-content y pueda envolver de verdad. */
  .clients-track { animation: none; display: block; width: auto; }
  .clients-row { flex-wrap: wrap; justify-content: center; gap: 18px 40px; padding-right: 0; }
  .clients-row[aria-hidden="true"] { display: none; }
  .clients-drag { cursor: auto; transform: none !important; }
  .clients-marquee { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .client-item { transition: none; }
}

/* ---------- Catálogo: buscador, chips de categoría y texto introductorio ---------- */
/* Todo esto lo renderiza templates.js:renderCatalogoPage(). El buscador es un
   <form method="GET"> de verdad: funciona sin JavaScript, y las URLs que produce
   son las mismas que sirve el servidor. */

.catalogo-buscador {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.catalogo-buscador input[type="search"] {
  flex: 1 1 320px;
  max-width: 460px;
  height: 46px;
  padding: 0 18px;
  border: 2.5px solid var(--orange);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
}
.catalogo-buscador input[type="search"]::placeholder { color: var(--ink); opacity: .45; }
.catalogo-buscador button {
  height: 46px;
  padding: 0 24px;
  border: 2.5px solid var(--orange);
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.catalogo-buscador button:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  transform: translateY(-2px);
}

.catalogo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.catalogo-chip {
  padding: 7px 16px;
  border: 2px solid var(--orange);
  border-radius: 999px;
  color: var(--orange);
  background: var(--white);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.catalogo-chip:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.catalogo-chip.is-current { background: var(--orange); color: var(--white); }
/* El chip activo de una categoría se vuelve a clickear para quitar el filtro, así
   que tiene que responder al hover. Va después de .is-current a propósito: las
   dos reglas tienen la misma especificidad, y sin esto el chip activo era el
   único del grupo que no daba ninguna señal al pasarle el mouse por encima.
   "Todo" activo no lleva esta clase, porque ahí el clic no hace nada. */
.catalogo-chip--quitar:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

@media (max-width: 640px) {
  .catalogo-buscador input[type="search"] { flex-basis: 100%; }
}