/* ============================================================================
   GRUPO SALUTE — vinos premium y productos gourmet
   Identidad tomada de la presentación institucional: bordó #472931, dorado
   #D09B59, crema y el patrón de chevrones. Serif de alto contraste para el
   discurso, sans geométrica para todo lo funcional.
   ============================================================================ */

:root {
  --radio:        10px;
  --bordo:        #472931;
  --bordo-osc:    #321D23;
  --bordo-claro:  #5E3A42;
  --dorado:       #D09B59;   /* acento sobre bordó */
  --dorado-claro: #E2B57C;
  --dorado-osc:   #8A5A1E;   /* acento sobre crema, con contraste AA */
  --crema:        #FAF7F3;
  --arena:        #F2EAE1;
  --blanco:       #FFFFFF;
  --tinta:        #241A1C;
  --tinta-suave:  #55464A;
  --tinta-tenue:  #6A585C;
  --borde:        #E5DBD0;
  --borde-osc:    rgba(250,247,243,.16);

  --ancho:  1260px;
  --trans:  .35s cubic-bezier(.4,0,.2,1);
  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Trama de chevrones de la papelería, en dorado clarísimo */
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23D09B59' stroke-width='1.1' opacity='.16'%3E%3Cpath d='M-10 52 42 0l52 52M-10 74 42 22l52 52M-10 96 42 44l52 52'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.16; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.rotulo {
  font-size: .66rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--dorado-osc); margin-bottom: 16px;
}
.oscuro .rotulo, .rotulo.claro { color: var(--dorado); }
.titulo { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 18px; }
.entrada { color: var(--tinta-suave); max-width: 60ch; }
.oscuro .entrada { color: rgba(250,247,243,.76); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 15px 32px; text-decoration: none;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--bordo); color: var(--bordo); background: transparent;
  transition: all var(--trans); text-align: center;
}
.btn:hover { background: var(--bordo); color: var(--crema); }
.btn.lleno { background: var(--bordo); color: var(--crema); }
.btn.lleno:hover { background: var(--bordo-claro); border-color: var(--bordo-claro); }
.btn.oro { background: var(--dorado); border-color: var(--dorado); color: var(--bordo-osc); }
.btn.oro:hover { background: var(--dorado-claro); border-color: var(--dorado-claro); }
.oscuro .btn { border-color: var(--dorado); color: var(--dorado); }
.oscuro .btn:hover { background: var(--dorado); color: var(--bordo-osc); }
/* .oscuro .btn tiene la misma especificidad que .btn.oro y gana por orden:
   el botón dorado se vuelve a declarar acá para que no quede oro sobre oro. */
.btn.oro, .oscuro .btn.oro, .llamada-caja .btn.oro, .nav .btn.oro {
  background: var(--dorado); border-color: var(--dorado); color: var(--bordo-osc);
}
.btn.oro:hover, .oscuro .btn.oro:hover, .llamada-caja .btn.oro:hover, .nav .btn.oro:hover {
  background: var(--dorado-claro); border-color: var(--dorado-claro); color: var(--bordo-osc);
}

/* ---------- Header ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60; background: var(--bordo); color: var(--crema);
  border-bottom: 1px solid rgba(208,155,89,.28);
}
.cabecera-int { display: flex; align-items: center; gap: 16px; height: 78px; }
.marca { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.marca img { height: 34px; width: auto; }
.marca span {
  font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(250,247,243,.7); padding-top: 3px; white-space: nowrap;
}
.nav { display: none; align-items: center; gap: 0; margin-left: auto; }
.nav > a {
  padding: 10px 13px; font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(250,247,243,.76); text-decoration: none;
  transition: color var(--trans);
}
.nav > a:hover, .nav > a.activo { color: var(--dorado); }
.nav .btn { padding: 11px 20px; margin-left: 8px; border-color: var(--dorado); color: var(--dorado); }
.nav .btn:hover { background: var(--dorado); color: var(--bordo-osc); }
.nav .btn.oro { background: var(--dorado); color: var(--bordo-osc); }

/* Selector de idioma */
.idioma { display: flex; align-items: center; gap: 2px; margin-left: 14px; padding-left: 14px;
          border-left: 1px solid rgba(250,247,243,.22); }
.idioma a {
  padding: 5px 8px; font-size: .64rem; font-weight: 600; letter-spacing: .1em;
  text-decoration: none; color: rgba(250,247,243,.6); transition: color var(--trans);
}
.idioma a:hover { color: var(--crema); }
.idioma a[aria-current="true"] { color: var(--dorado); }

.menu-btn { display: grid; gap: 5px; margin-left: auto; padding: 8px; }
.menu-btn span { display: block; width: 24px; height: 1.5px; background: var(--crema); }
.nav-movil { display: none; background: var(--bordo); padding: 6px 0 24px; }
.nav-movil.abierto { display: block; }
.nav-movil a {
  display: block; padding: 14px 4px; color: rgba(250,247,243,.9); text-decoration: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(250,247,243,.12);
}
.nav-movil .acciones { display: grid; gap: 10px; margin-top: 18px; }
.nav-movil .acciones a { border-bottom: none; }
.nav-movil .idiomas { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px;
                      border-top: 1px solid rgba(250,247,243,.12); }
.nav-movil .idiomas a { border: 1px solid rgba(250,247,243,.3); padding: 9px 20px; text-align: center; flex: 1; }
.nav-movil .idiomas a[aria-current="true"] { border-color: var(--dorado); color: var(--dorado); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: calc(100vh - 78px); overflow: hidden;
  display: grid; place-items: center; text-align: center; padding: 70px 26px 90px;
  background: var(--bordo-osc);
}
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .56;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(50,29,35,.72) 0%, rgba(50,29,35,.42) 70%, transparent 100%),
              linear-gradient(180deg, rgba(50,29,35,.7) 0%, rgba(50,29,35,.3) 45%, rgba(50,29,35,.94) 100%);
}
.hero-int { position: relative; z-index: 1; display: grid; justify-items: center; }
.hero-logo { width: clamp(230px, 40vw, 380px); margin-bottom: 30px; }
.hero h1 {
  color: var(--crema); font-size: clamp(1.9rem, 5vw, 3.3rem); max-width: 17ch; margin-bottom: 20px;
}
.hero .lugar {
  font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dorado); margin: 6px 0 22px;
}
.hero .bajada { color: rgba(250,247,243,.8); max-width: 54ch; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Sólo el botón de contorno: el .oro ya trae su propio color y si no se excluye
   queda dorado sobre dorado. */
.hero-ctas .btn:not(.oro) { border-color: var(--dorado); color: var(--dorado); }
.hero-ctas .btn:not(.oro):hover { background: var(--dorado); color: var(--bordo-osc); }

/* ---------- Qué vendemos, apenas se entra ---------- */
.rubros-grid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
/* Las cinco verticales arrancan bloque nuevo: necesitan aire y una línea que separe */
.separador-qv {
  margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--borde);
}
.rubro img {
  width: 100%; aspect-ratio: 5/3; object-fit: cover; border-radius: var(--radio);
  margin-bottom: 18px;
}
.rubro h2 { font-family: var(--serif); font-size: clamp(1.35rem,3vw,1.7rem); margin-bottom: 8px; }
.rubro p { font-size: .96rem; color: var(--tinta-suave); margin: 0; }

/* ---------- Franja de 3 caminos ---------- */
.caminos { background: var(--crema); border-bottom: 1px solid var(--borde); }
.caminos-grid { display: grid; grid-template-columns: 1fr; }
.camino {
  position: relative; display: grid; align-content: start; gap: 10px; border-radius: var(--radio);
  padding: clamp(34px, 4.6vw, 52px) clamp(24px, 3vw, 40px);
  text-decoration: none; border-bottom: 1px solid var(--borde);
  transition: background var(--trans);
}
.camino:hover { background: var(--arena); }
.camino::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--dorado); transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans);
}
.camino:hover::before { transform: scaleX(1); }
.camino .num { font-size: .64rem; font-weight: 600; letter-spacing: .24em; color: var(--dorado-osc); }
.camino h2 { font-family: var(--sans); font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; }
/* La palabra que identifica al visitante, en dorado: es lo que tiene que saltar */
.camino h2 b { color: var(--dorado-osc); font-weight: 700; }
.camino p { color: var(--tinta-suave); font-size: .96rem; margin: 0; max-width: 34ch; }
.camino .ir {
  margin-top: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bordo);
}
.camino .ir::after { content: " →"; transition: margin var(--trans); }
.camino:hover .ir::after { margin-left: 6px; }

/* ---------- Barra de cifras ---------- */
.cifras { background: var(--bordo); color: var(--crema); }
.cifras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px;
               padding: clamp(40px, 5vw, 58px) 0; text-align: center; }
.cifra .n { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 2.9rem); color: var(--dorado); line-height: 1; }
.cifra .q { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
            color: rgba(250,247,243,.72); margin-top: 10px; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(62px, 8vw, 104px) 0; }
.seccion.crema { background: var(--crema); }
.seccion.arena { background: var(--arena); }
.seccion.oscuro { background: var(--bordo); color: var(--crema); }
.seccion.oscuro .titulo { color: var(--crema); }
.trama { position: relative; }
.trama::before {
  content: ""; position: absolute; inset: 0; background-image: var(--trama);
  pointer-events: none; opacity: .5;
}
.trama > * { position: relative; z-index: 1; }

.dos-col { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.dos-col img { width: 100%; border-radius: var(--radio); }

/* ---------- Mapa de mercados ---------- */
/* En pantallas chicas el mapamundi se pixela al reducirse: le damos ancho
   mínimo y scroll propio, para que se lea nítido sin romper el ancho del body. */
.mapa-envoltorio {
  position: relative; margin-top: 42px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
/* Las etiquetas de los pines son absolutas y se escapaban del contenedor,
   empujando el ancho de toda la página en pantallas chicas. */
.seccion.oscuro { overflow-x: clip; }
.mapa-lienzo { position: relative; width: 100%; min-width: 680px; }
@media (max-width: 600px) {
  /* En un teléfono el mapa entero se ve diminuto: se muestra más grande y se desliza */
  .mapa-lienzo { min-width: 900px; }
  .mapa-envoltorio::after {
    content: "← deslizá para ver todos los mercados →";
    display: block; text-align: center; padding: 12px 0 0;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(250,247,243,.5);
  }
}
.mapa-lienzo > img { width: 100%; opacity: .55; }
.mapa-envoltorio::-webkit-scrollbar { height: 6px; }
.mapa-envoltorio::-webkit-scrollbar-thumb { background: rgba(208,155,89,.4); border-radius: 3px; }
.pin {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--dorado);
  box-shadow: 0 0 0 0 rgba(208,155,89,.7);
  animation: latido 2.8s ease-out infinite;
}
.pin.casa { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--crema); animation-delay: 0s; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(208,155,89,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(208,155,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(208,155,89,0); }
}
.pin span {
  position: absolute; left: 50%; top: -10px; transform: translate(-50%,-100%);
  font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema); white-space: nowrap; opacity: 0; transition: opacity var(--trans);
  background: rgba(50,29,35,.9); padding: 4px 9px; border: 1px solid rgba(208,155,89,.5);
}
.pin:hover span, .pin.casa span { opacity: 1; }
.mercados-lista {
  display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 32px; justify-content: center;
}
.mercados-lista li {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,247,243,.82); border: 1px solid rgba(208,155,89,.42); padding: 8px 15px;
}
.mercados-lista li.casa { background: var(--dorado); color: var(--bordo-osc); border-color: var(--dorado); }

/* ---------- Cobertura nacional ---------- */
.cobertura { display: grid; grid-template-columns: 1fr; gap: 38px; align-items: center; }
.cobertura-mapa {
  position: relative; background: var(--bordo); padding: 26px 20px; border-radius: var(--radio);
  justify-self: center; width: 100%; max-width: 320px;
}
.cobertura-mapa > img { width: 100%; height: auto; opacity: .9; }
.cobertura-mapa .pin { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.cobertura-mapa .pin.casa { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.provincias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.provincias li {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); border: 1px solid var(--borde); background: var(--blanco);
  padding: 7px 12px;
}

/* ---------- Marcas ---------- */
.marcas-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 46px; }
.marca-card {
  position: relative; overflow: hidden; background: var(--bordo-osc); min-height: 420px;
  border-radius: var(--radio); border: 1px solid rgba(208,155,89,.22);
  display: grid; align-content: end; text-decoration: none; color: var(--crema);
}
.marca-card > img.fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .48; transition: opacity var(--trans), transform 1.2s ease;
}
.marca-card:hover > img.fondo { opacity: .62; transform: scale(1.05); }
.marca-card .capa {
  position: relative; z-index: 1; padding: 34px 28px 30px;
  background: linear-gradient(to top, rgba(35,20,24,.96) 34%, rgba(35,20,24,0) 100%);
}
.marca-card .emblema { height: 72px; width: auto; margin-bottom: 18px; }
.marca-card .claim {
  font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 10px;
}
.marca-card p { font-size: .94rem; color: rgba(250,247,243,.8); margin: 0 0 16px; }
.marca-card .ir { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--crema); }
.marca-card .ir::after { content: " →"; }

/* ---------- Proceso: del viñedo a la botella ---------- */
.pasos { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 46px; counter-reset: paso; }
.paso { display: grid; gap: 16px; }
.paso img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radio); }
.paso .n {
  font-family: var(--serif); font-size: 1.5rem; color: var(--dorado-osc); line-height: 1;
}
.oscuro .paso .n { color: var(--dorado); }
.paso h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 700; margin: 6px 0 6px; }
.paso p { font-size: .94rem; color: var(--tinta-suave); margin: 0; }
.oscuro .paso p { color: rgba(250,247,243,.74); }

/* ---------- Verticales de negocio ---------- */
.verticales { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 44px;
              background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.vertical { background: var(--blanco); padding: clamp(28px,3vw,38px) clamp(24px,2.6vw,32px);
            transition: background var(--trans); }
.vertical:hover { background: var(--crema); }
.vertical .n {
  font-family: var(--serif); font-size: 1.15rem; color: var(--dorado-osc); line-height: 1;
  margin-bottom: 14px;
}
.vertical h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 700; margin-bottom: 10px; }
.vertical p { font-size: .94rem; color: var(--tinta-suave); margin: 0; }
.vertical.consulta { background: var(--arena); text-decoration: none; display: block; }
.vertical.consulta:hover { background: var(--durazno, #F5E3DA); }
.vertical.consulta .n { color: var(--bordo); }
.vertical.consulta .ir {
  margin-top: 14px; font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bordo);
}
.vertical.consulta .ir::after { content: " →"; transition: margin var(--trans); }
.vertical.consulta:hover .ir::after { margin-left: 6px; }

/* ---------- Respaldo: pertenencias y certificaciones ----------
   Los logos de Wines of Argentina y ProMendoza son de terceros: van a color,
   sin recolorear ni deformar, y por eso la franja es clara. */
.respaldo { background: var(--crema); padding: clamp(44px,6vw,68px) 0; border-bottom: 1px solid var(--borde); }
.sellos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sello {
  display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 148px;
  border: 1px solid var(--borde); background: var(--blanco);
  padding: 24px 20px; text-align: center; border-radius: var(--radio);
}
.sello img { height: 58px; width: auto; }
.sello .t { font-family: var(--serif); font-size: 1.2rem; color: var(--tinta); line-height: 1.25; }
.sello .p {
  font-size: .56rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-tenue); max-width: 22ch;
}
.tira-medallas { width: 100%; max-width: 880px; margin: 36px auto 0; height: auto; }

/* ---------- Puntajes ---------- */
.puntajes { text-align: center; }
.puntajes .entrada { margin-left: auto; margin-right: auto; }
.panel-puntajes {
  margin: 34px auto 0; max-width: 940px; background: var(--crema);
  padding: clamp(18px, 3vw, 34px); border: 1px solid rgba(208,155,89,.3);
}
.panel-puntajes img { width: 100%; }
.medallas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.medalla {
  border: 1px solid rgba(208,155,89,.5); padding: 16px 22px; min-width: 118px;
}
.medalla .p { font-family: var(--serif); font-size: 2rem; color: var(--dorado); line-height: 1; }
.medalla .q { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
              color: rgba(250,247,243,.7); margin-top: 8px; }

/* ---------- Equipo ---------- */
.equipo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; margin-top: 44px; }
.persona { text-align: center; }
.persona img {
  width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  object-position: center 20%; filter: grayscale(1); margin: 0 auto 16px;
  transition: filter var(--trans);
}
.persona:hover img { filter: grayscale(0); }
.persona .nom { font-family: var(--serif); font-size: 1.2rem; }
.persona .rol {
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dorado-osc); margin-top: 6px;
}
.oscuro .persona .rol { color: var(--dorado); }
.persona .bio { font-size: .88rem; color: var(--tinta-suave); margin-top: 12px; }
.oscuro .persona .bio { color: rgba(250,247,243,.7); }

/* ---------- Doble llamada final ---------- */
.llamada-doble { display: grid; grid-template-columns: 1fr; }
.llamada-caja { padding: clamp(46px, 6vw, 78px) clamp(26px, 4vw, 56px); display: grid; align-content: center; }
.llamada-caja.nacional { background: var(--arena); }
.llamada-caja.export { background: var(--bordo); color: var(--crema); }
.llamada-caja h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 14px; }
.llamada-caja p { max-width: 44ch; }
.llamada-caja.nacional p { color: var(--tinta-suave); }
.llamada-caja.export p { color: rgba(250,247,243,.78); }
.llamada-caja .btn { justify-self: start; margin-top: 12px; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em;
               text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 14px 15px; border: 1px solid var(--borde); background: var(--blanco);
  font: inherit; font-size: .98rem; color: var(--tinta); border-radius: 0;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--dorado-osc); }
.dos-campos { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.dato { margin-bottom: 26px; }
.dato h3 { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em;
           text-transform: uppercase; color: var(--dorado-osc); margin-bottom: 6px; }
.dato p, .dato a { font-size: 1rem; color: var(--tinta); text-decoration: none; }
.dato a:hover { color: var(--dorado-osc); }

/* ---------- Caja informativa ---------- */
.caja-info { background: var(--crema); border: 1px solid var(--borde); padding: 26px 24px;
             border-radius: var(--radio); }
.caja-info h3 { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em;
                text-transform: uppercase; color: var(--dorado-osc); margin-bottom: 14px; }
.caja-info ul { display: grid; gap: 12px; }
.caja-info li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--tinta-suave); }
.caja-info li::before { content: "·"; position: absolute; left: 6px; color: var(--dorado-osc);
                        font-size: 1.4rem; line-height: 1; }

/* ---------- Newsletter ---------- */
.news { background: var(--bordo-osc); color: var(--crema); text-align: center;
        padding: clamp(50px,7vw,80px) 26px; }
.news h2 { font-size: clamp(1.4rem,3.2vw,2rem); margin-bottom: 10px; }
.news p { color: rgba(250,247,243,.72); max-width: 46ch; margin: 0 auto 26px; }
.news form { display: grid; gap: 10px; max-width: 440px; margin: 0 auto; }
.news input { padding: 15px 16px; border: 1px solid rgba(250,247,243,.3); background: transparent;
              color: var(--crema); font: inherit; }
.news input::placeholder { color: rgba(250,247,243,.5); }
.news button { padding: 15px 20px; background: var(--dorado); color: var(--bordo-osc);
               font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.news button:hover { background: var(--dorado-claro); }

/* ---------- Footer ---------- */
.pie { background: var(--bordo); color: rgba(250,247,243,.82); padding: clamp(52px,7vw,74px) 0 26px;
       font-size: .96rem; }
.pie-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.pie img.logo { height: 44px; width: auto; margin-bottom: 16px; }
.pie h4 { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em;
          text-transform: uppercase; color: var(--dorado); margin-bottom: 12px; }
.pie a { color: rgba(250,247,243,.88); text-decoration: none; }
.pie a:hover { color: var(--dorado); }
.pie .enlaces { display: grid; gap: 9px; }
.pie .copy { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(250,247,243,.18);
             text-align: center; font-size: .8rem; color: rgba(250,247,243,.7); }

/* ---------- Cabezal de páginas internas ---------- */
.cabezal { position: relative; overflow: hidden; background: var(--bordo); color: var(--crema);
           text-align: center; padding: clamp(56px,8vw,92px) 26px; }
.cabezal::before { content: ""; position: absolute; inset: 0; background-image: var(--trama); opacity: .45; }
.cabezal > * { position: relative; z-index: 1; }
.cabezal h1 { font-size: clamp(2rem,5.4vw,3.2rem); margin-bottom: 16px; }
.cabezal p { color: rgba(250,247,243,.78); max-width: 58ch; margin: 0 auto; }

.gracias { text-align: center; padding: clamp(90px,12vw,150px) 26px; }
.gracias h1 { font-size: clamp(2rem,5vw,3rem); margin-bottom: 16px; }
.gracias p { color: var(--tinta-suave); max-width: 48ch; margin: 0 auto 28px; }

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width: 720px) {
  .caminos-grid { grid-template-columns: repeat(3, 1fr); }
  .camino { border-bottom: none; border-right: 1px solid var(--borde); }
  .camino:last-child { border-right: none; }
  .cifras-grid { grid-template-columns: repeat(5, 1fr); }
  .marcas-grid { grid-template-columns: repeat(2, 1fr); }
  .verticales { grid-template-columns: repeat(3, 1fr); }
  .rubros-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .sellos { grid-template-columns: repeat(4, 1fr); }
  .cobertura { grid-template-columns: 300px 1fr; gap: 64px; }
  .cobertura-mapa { max-width: none; padding: 30px 24px; }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .equipo-grid { grid-template-columns: repeat(5, 1fr); gap: 26px 18px; }
  .dos-campos { grid-template-columns: 1fr 1fr; }
  .llamada-doble { grid-template-columns: 1fr 1fr; }
  .dos-col { grid-template-columns: 1fr 1fr; gap: 60px; }
  .dos-col.invertida > :first-child { order: 2; }
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
}
@media (min-width: 1000px) {
  .nav { display: flex; }
  .menu-btn, .nav-movil { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important;
                           scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--dorado-osc); outline-offset: 3px; }

/* ============================================================================
   LECTURA EN PANTALLAS CHICAS
   Los rótulos espaciados en mayúsculas funcionan a 10 px en un monitor, pero en
   un teléfono quedan ilegibles. Acá abajo ninguno baja de 12 px, y se les afloja
   el interletrado para que no se corten.
   ============================================================================ */
@media (max-width: 600px) {
  .hero .lugar { font-size: .78rem; letter-spacing: .22em; }
  .pin span { font-size: .74rem; letter-spacing: .06em; padding: 5px 10px; }
  .vertical.consulta .ir { font-size: .76rem; }
  .rotulo { font-size: .78rem; letter-spacing: .18em; }
  .marca span { font-size: .76rem; letter-spacing: .18em; }
  .camino .num, .camino .ir { font-size: .74rem; }
  .cifra .q { font-size: .74rem; letter-spacing: .12em; }
  .btn, .nav > a, .nav-movil a { font-size: .76rem; letter-spacing: .13em; }
  .campo label, .dato h3, .caja-info h3, .pie h4 { font-size: .72rem; letter-spacing: .13em; }
  .marca-card .claim, .marca-card .ir { font-size: .74rem; }
  .vertical .n { font-size: 1.3rem; }
  .sello .p { font-size: .78rem; letter-spacing: .08em; max-width: none; }
  .provincias li, .mercados-lista li { font-size: .72rem; letter-spacing: .08em; }
  .persona .rol, .paso .n { font-size: .72rem; }
  .news button { font-size: .76rem; letter-spacing: .13em; }
  .pie .copy { font-size: .84rem; }

  /* Los sellos no entraban en 320 px: una sola columna y sin ancho mínimo */
  .sellos { grid-template-columns: 1fr; }
  .sello { min-height: 0; padding: 20px 18px; }

  /* Mail y teléfono: superficie suficiente para el dedo */
  .dato a, .pie .enlaces a { display: inline-block; padding: 7px 0; }
}

/* En 400 px la grilla de dos columnas ya entra bien */
@media (min-width: 400px) and (max-width: 600px) {
  .sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Menú desplegable: más aire en los laterales ----------
   Heredaba el mismo padding que el resto del sitio y en el desplegable
   el texto quedaba pegado a los bordes. */
.nav-movil { padding-left: 34px; padding-right: 34px; }
.nav-movil a { padding-left: 2px; padding-right: 2px; }
.nav-movil .acciones, .nav-movil .idiomas { padding-left: 2px; padding-right: 2px; }
@media (max-width: 380px) {
  .nav-movil { padding-left: 26px; padding-right: 26px; }
}