/* ==========================================================================
   Avera Medicina Privada — Sistema de diseño
   Fuente de verdad: md/avera-design-tokens.md + md/avera-direccion-arte-layout.md
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Celeste — primario */
  --avera-celeste-50:  #F3FAFD;
  --avera-celeste-100: #E3F2FA;
  --avera-celeste-200: #C8E6F5;
  --avera-celeste-300: #A6D6EE;
  --avera-celeste-400: #74BFE5;
  --avera-celeste-500: #39A4DA;
  --avera-celeste-600: #308AB7;
  --avera-celeste-700: #287399;
  --avera-celeste-800: #205C7A;
  --avera-celeste-900: #18455C;

  /* Verde — color principal del sitio (escala fresca y clara).
     600 y 700 se mantienen oscuros: son los únicos que pasan
     contraste AA como fondo de botón y como texto sobre blanco. */
  --avera-verde-50:  #F6FCF3;
  --avera-verde-100: #EBF8E2;
  --avera-verde-200: #D4F0C2;
  --avera-verde-300: #B8E699;
  --avera-verde-400: #98DA6C;
  --avera-verde-500: #79CF40;  /* verde principal de la marca */
  --avera-verde-600: #458220;
  --avera-verde-700: #3A6C1B;
  --avera-verde-800: #2F5716;
  --avera-verde-900: #274713;

  /* Magenta — acento */
  --avera-magenta-50:  #FBF3F8;
  --avera-magenta-100: #F6E3EE;
  --avera-magenta-200: #EEC6DE;
  --avera-magenta-300: #E4A4C9;
  --avera-magenta-400: #D471AC;
  --avera-magenta-500: #C23488;
  --avera-magenta-600: #A32C72;
  --avera-magenta-700: #88245F;
  --avera-magenta-800: #6D1D4C;
  --avera-magenta-900: #511639;

  /* Naranja — apoyo */
  --avera-naranja-50:  #FEF7F2;
  --avera-naranja-100: #FCEDE1;
  --avera-naranja-200: #F9DBC4;
  --avera-naranja-300: #F6C5A0;
  --avera-naranja-400: #F1A56B;
  --avera-naranja-500: #EB7E2B;
  --avera-naranja-600: #C56A24;
  --avera-naranja-700: #A4581E;
  --avera-naranja-800: #844718;
  --avera-naranja-900: #633512;

  /* Amarillo — realce */
  --avera-amarillo-50:  #FFFAF2;
  --avera-amarillo-100: #FEF4E1;
  --avera-amarillo-200: #FDEAC3;
  --avera-amarillo-300: #FCDD9E;
  --avera-amarillo-400: #FBCA68;
  --avera-amarillo-500: #F9B428;
  --avera-amarillo-600: #D19722;
  --avera-amarillo-700: #AE7E1C;
  --avera-amarillo-800: #8B6516;
  --avera-amarillo-900: #694C11;

  /* Neutros */
  --avera-neutro-0:   #FFFFFF;
  --avera-neutro-50:  #F8FAFB;
  --avera-neutro-100: #F1F4F7;
  --avera-neutro-200: #E4E9ED;
  --avera-neutro-300: #CBD3DA;
  --avera-neutro-400: #9AA5B1;
  --avera-neutro-600: #6B7784;
  --avera-neutro-700: #48535E;
  --avera-neutro-900: #14181D;

  /* Semánticos */
  --avera-exito:  #458220;
  --avera-alerta: #A4581E;
  --avera-error:  #B3261E;
  --avera-info:   #287399;

  /* Roles de aplicación */
  --color-texto:            var(--avera-neutro-900);
  --color-texto-secundario: var(--avera-neutro-700);
  --color-texto-terciario:  var(--avera-neutro-600);
  --color-enlace:           var(--avera-verde-700);
  --color-enlace-hover:     var(--avera-verde-900);
  --color-fondo:            var(--avera-neutro-0);
  --color-fondo-alt:        var(--avera-neutro-50);
  --color-borde:            var(--avera-neutro-200);
  --color-foco:             var(--avera-verde-600);

  --btn-primario-bg:        var(--avera-verde-600);
  --btn-primario-bg-hover:  var(--avera-verde-700);
  --btn-primario-texto:     #FFFFFF;
  --btn-secundario-borde:   var(--avera-verde-600);
  --btn-secundario-texto:   var(--avera-verde-700);

  --whatsapp: #25D366;

  /* Tipografía */
  --fuente: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-display: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif;
  --texto-display: clamp(2.125rem, 1.2rem + 4vw, 3.5rem);
  --texto-h1:      clamp(1.875rem, 1.25rem + 2.6vw, 2.625rem);
  --texto-h2:      clamp(1.5625rem, 1.15rem + 1.7vw, 2rem);
  --texto-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --texto-cuerpo:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);

  /* Composición */
  --contenedor: 1200px;
  --sombra-reposo: 0 8px 28px rgb(24 69 92 / 0.08);
  --sombra-hover:  0 20px 50px rgb(24 69 92 / 0.15);
  --radio-tarjeta: 26px;
  --radio-chip: 12px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-cuerpo);
  line-height: 1.7;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}

/* Baloo 2 no tiene cursiva: énfasis con peso, nunca itálica sintetizada */
em, i { font-style: normal; font-weight: 600; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-family: var(--fuente-display); }
h1 { font-size: var(--texto-h1); font-weight: 700; letter-spacing: -0.005em; }
h2 { font-size: var(--texto-h2); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--texto-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.1875rem; font-weight: 600; line-height: 1.4; }

p { margin: 0 0 1em; }

a { color: var(--color-enlace); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--color-enlace-hover); }

ul { padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Visible solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Primer tabulador de la página: salta el navbar y va al contenido. */
.salto-contenido {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radio-chip);
  background: var(--avera-verde-800);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sombra-hover);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.salto-contenido:focus-visible {
  transform: translateY(0);
  outline-offset: 3px;
}

/* El panel móvil abierto congela el fondo (en iOS `overflow: hidden`
   no alcanza: hace falta fijar el body y restaurar el scroll al cerrar). */
body.menu-abierto {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* Nada debe flotar sobre el diálogo del menú ni recibir foco por fuera de él. */
body.menu-abierto .wa-flotante,
body.menu-abierto .faq-flotante,
body.menu-abierto .salto-contenido {
  visibility: hidden;
}

::placeholder { color: var(--avera-neutro-400); opacity: 1; }

.tabular, .tel { font-variant-numeric: tabular-nums; }

/* ---------- 3. Utilidades de texto ---------- */
.display {
  font-family: var(--fuente-display);
  font-size: var(--texto-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--avera-magenta-600);
  margin-bottom: 14px;
}
.eyebrow--celeste { color: var(--avera-verde-700); }

.lead {
  font-size: 1.1875rem;
  color: var(--color-texto-secundario);
  max-width: 45ch;
}

.acento-celeste { color: var(--avera-verde-600); }
.texto-secundario { color: var(--color-texto-secundario); }
.texto-terciario { color: var(--color-texto-terciario); }
.centrado { text-align: center; }

/* ---------- 4. Layout ---------- */
.contenedor {
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: 24px;
}

.seccion { padding-block: 96px; }
.seccion--alt { background: var(--color-fondo-alt); }
.seccion--celeste { background: var(--avera-verde-50); }

.encabezado-seccion { max-width: 640px; margin-bottom: 48px; }
.encabezado-seccion--centrado { margin-inline: auto; text-align: center; }

.num-seccion {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.num-seccion::after { content: ""; flex: 1; height: 1px; background: var(--avera-neutro-200); }

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:active { transform: scale(0.98); }
.btn svg { flex: none; }

.btn--primario { background: var(--btn-primario-bg); color: var(--btn-primario-texto); }
.btn--primario:hover { background: var(--btn-primario-bg-hover); color: #fff; }

.btn--secundario { border-color: var(--btn-secundario-borde); color: var(--btn-secundario-texto); background: transparent; }
.btn--secundario:hover { background: var(--avera-verde-50); color: var(--avera-verde-800); }

.btn--blanco { background: #fff; color: var(--avera-verde-900); }
.btn--blanco:hover { background: var(--avera-verde-100); color: var(--avera-verde-900); }

.btn--contorno-blanco { border-color: #fff; color: #fff; background: transparent; }
.btn--contorno-blanco:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

.btn--chico { min-height: 44px; padding: 10px 22px; font-size: 0.9375rem; }

/* ---------- 6. Navbar ----------
   Única fuente de verdad de la barra: marca + selector de provincia,
   navegación con píldoras y submenús, utilidades (portal + CTA). */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.92);
  border-bottom: 1px solid rgb(220 235 211 / 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  transition: box-shadow 200ms ease;
}
.navbar.con-sombra { box-shadow: 0 10px 32px rgb(47 87 22 / 0.11); }

.navbar__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  transition: min-height 200ms ease;
}

/* Estado compacto al desplazarse: recupera pantalla sin perder la barra. */
.navbar--compacta .navbar__inner { min-height: 60px; }
.navbar--compacta .navbar__logo img { height: 37px; }

.navbar__marca { display: inline-flex; align-items: center; gap: 10px; }
.navbar__logo { display: inline-flex; align-items: center; text-decoration: none; }
.navbar__logo img { height: 44px; width: auto; transition: height 200ms ease; }

/* Chip de sede: abre el selector de provincias. */
.navbar__sede-grupo { position: relative; display: inline-flex; }
.navbar__sede {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 11px;
  border: 1px solid var(--avera-verde-200);
  border-radius: 999px;
  background: var(--avera-verde-50);
  color: var(--avera-verde-800);
  font-family: var(--fuente);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.navbar__sede:hover,
.navbar__sede-grupo.abierto .navbar__sede {
  border-color: var(--avera-verde-500);
  background: var(--avera-verde-100);
  color: var(--avera-verde-900);
}
.navbar__sede svg { flex: none; opacity: 0.75; transition: transform 200ms ease; }
.navbar__sede-grupo.abierto .navbar__sede svg { transform: rotate(180deg); }

/* Navegación pegada a la marca: una sola línea de lectura. */
.navbar__nav { min-width: 0; }
.navbar__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar__item { position: relative; display: flex; align-items: center; }
.navbar__links > .navbar__item > a {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--avera-neutro-700);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.navbar__links > .navbar__item > a:hover {
  background: var(--avera-verde-50);
  color: var(--avera-verde-800);
}
.navbar__links > .navbar__item > a[aria-current="page"] {
  background: var(--avera-verde-100);
  color: var(--avera-verde-900);
  font-weight: 700;
}

/* Disparador del submenú, al lado del enlace de página. */
.navbar__item--con-sub { gap: 1px; }
.navbar__despliegue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--avera-neutro-600);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.navbar__despliegue:hover,
.navbar__item--con-sub.abierto .navbar__despliegue {
  background: var(--avera-verde-50);
  color: var(--avera-verde-800);
}
.navbar__despliegue svg { transition: transform 200ms ease; }
.navbar__item--con-sub.abierto .navbar__despliegue svg { transform: rotate(180deg); }

/* Panel desplegable compartido (submenús y provincias). */
.navbar__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 70;
  min-width: 252px;
  padding: 8px;
  border: 1px solid rgb(220 235 211 / 0.9);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(29 63 13 / 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transform-origin: top left;
  transition: opacity 170ms ease, transform 170ms ease, visibility 170ms;
}
.navbar__item--con-sub.abierto > .navbar__panel,
.navbar__sede-grupo.abierto > .navbar__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.navbar__panel--sede { min-width: 216px; }
.navbar__panel-titulo {
  margin: 8px 12px 8px;
  color: var(--avera-verde-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.navbar__panel-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.navbar__panel-separador { height: 1px; margin: 6px 8px; background: rgb(220 235 211 / 0.9); }
.navbar__panel-enlace {
  display: block;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--avera-neutro-900);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.navbar__panel-enlace:hover { background: var(--avera-verde-50); color: var(--avera-verde-900); }
.navbar__panel-enlace strong { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.navbar__panel-enlace span {
  display: block;
  margin-top: 1px;
  color: var(--color-texto-terciario);
  font-size: 0.8rem;
  line-height: 1.35;
}
.navbar__panel-enlace em {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--avera-amarillo-100);
  color: var(--avera-neutro-700);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.navbar__panel-enlace--actual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--avera-verde-50);
  color: var(--avera-verde-900);
}
.navbar__panel-enlace--actual svg { flex: none; color: var(--avera-verde-600); }

/* Utilidades: acceso de afiliados + CTA de venta, siempre a la derecha. */
.navbar__utilidades {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar__acceso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--avera-verde-200);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  color: var(--avera-verde-800);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.navbar__acceso:hover {
  border-color: var(--avera-verde-500);
  background: var(--avera-verde-50);
  color: var(--avera-verde-900);
}
.navbar__acceso svg { flex: none; }
.navbar__utilidades .btn { min-height: 46px; padding-inline: 22px; }

/* Afiliación siempre a la vista en móvil, sin abrir el menú. */
.navbar__cta-movil {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 15px;
  border-radius: 14px;
  background: var(--btn-primario-bg);
  color: #fff;
  font-family: var(--fuente-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.navbar__cta-movil:hover { background: var(--btn-primario-bg-hover); color: #fff; }
.navbar__cta-movil:active { transform: scale(0.97); }

.navbar__hamburguesa {
  display: none;
  margin-left: 8px;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--avera-neutro-900);
  align-items: center;
  justify-content: center;
}

/* Tres líneas que se pliegan en una cruz al abrir. */
.navbar__hamburguesa-caja {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.navbar__hamburguesa-caja span {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms ease, opacity 150ms ease;
}
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-caja span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-caja span:nth-child(2) { opacity: 0; }
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-caja span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel móvil (por encima de los flotantes de WhatsApp z70 y FAQ z72) */
.nav-movil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}
.nav-movil.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-movil__cerrar {
  align-self: flex-end;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--avera-neutro-900);
}
.nav-movil__links { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.nav-movil__links a {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--avera-neutro-900);
  text-decoration: none;
  padding: 10px 0;
}
.nav-movil__links a:hover { color: var(--avera-verde-700); }
.nav-movil__provincia {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--avera-verde-900);
  text-decoration: none;
}
.nav-movil__provincia-texto { display: grid; }
.nav-movil__cta { margin-top: auto; padding-bottom: 16px; }
.nav-movil__cta .btn { width: 100%; }

/* ---------- 7. Hero editorial ---------- */
.hero { background: var(--avera-verde-50); overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding-block: 72px 56px;
}
.hero__texto .display .acento-celeste { color: var(--avera-verde-600); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.hero__anclas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 18px;
  border-top: 1px solid var(--avera-verde-100);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.hero__anclas a { color: var(--avera-neutro-600); text-decoration: none; text-transform: lowercase; }
.hero__anclas a:hover { color: var(--avera-verde-700); }

/* Fotos del hero: slider de un solo marco con fundido */
.hero__fotos { position: relative; display: flex; justify-content: flex-end; }

.hero-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  transform: perspective(1600px) rotateY(-5deg) rotate(-0.6deg);
}
.hero-slider .carrusel__pista {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgb(46 74 26 / 0.18), 0 8px 20px rgb(0 0 0 / 0.08);
  aspect-ratio: 4 / 5;
  background: var(--avera-neutro-100);
}
.hero-slider .carrusel__slide { transform: none; }
.hero-slider .carrusel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes zoomLento {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.hero-slider .carrusel__slide.activo img { animation: zoomLento 6s ease-out forwards; }
.hero-slider .carrusel__puntos {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  justify-content: center;
  z-index: 2;
}
.hero-slider .carrusel__punto { background: rgb(255 255 255 / 0.55); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.hero-slider .carrusel__punto:hover { background: rgb(255 255 255 / 0.8); }
.hero-slider .carrusel__punto.activo { background: #fff; }

/* ---------- 8. Franja de valores ---------- */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.valor { text-align: center; padding: 8px; }
.valor__icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.valor__icono svg { width: 28px; height: 28px; }
.valor__icono--magenta { background: var(--avera-magenta-100); color: var(--avera-magenta-600); }
.valor__icono--celeste { background: var(--avera-verde-100); color: var(--avera-verde-600); }
.valor__icono--verde  { background: var(--avera-verde-100);  color: var(--avera-verde-600); }
.valor h3 { margin-bottom: 6px; }
.valor p { color: var(--color-texto-secundario); margin: 0; }

/* ---------- 9. Tarjetas de plan ---------- */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: stretch;
}
.plan-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-reposo);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.plan-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-4px); }
.plan-card--superior { border-top: 4px solid var(--avera-naranja-500); }
.plan-card--selecta  { border-top: 4px solid var(--avera-magenta-500); }

.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge--superior { background: var(--avera-naranja-100); color: var(--avera-naranja-900); }
.badge--selecta  { background: var(--avera-magenta-100); color: var(--avera-magenta-700); }
.badge--neutro   { background: var(--avera-neutro-100);  color: var(--avera-neutro-700); }

.plan-card__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.plan-card h3 { margin-bottom: 4px; }
.plan-card__sub { color: var(--color-texto-terciario); font-weight: 500; margin-bottom: 14px; }
.plan-card__pie { margin-top: auto; padding-top: 18px; }

.lista-check { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check svg { flex: none; width: 22px; height: 22px; color: var(--avera-verde-600); margin-top: 3px; }

.enlace-flecha { font-weight: 600; text-decoration: none; }
.enlace-flecha::after { content: " →"; }
.enlace-flecha:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- 10. Estadísticas + historia ---------- */
.stats-historia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.stats { display: grid; gap: 28px; }
.stat__numero {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__numero--celeste { color: var(--avera-verde-700); }
.stat__numero--magenta { color: var(--avera-magenta-600); }
.stat__numero--naranja { color: var(--avera-naranja-600); }
.stat p { margin: 2px 0 0; color: var(--color-texto-secundario); }

/* ---------- 11. Teaser buscador / cartilla ---------- */
.buscador-form { display: flex; gap: 12px; max-width: 640px; }
.buscador-form--centrado { margin-inline: auto; }
.input-busqueda {
  flex: 1;
  min-height: 52px;
  padding: 10px 22px;
  border: 2px solid var(--avera-verde-300);
  border-radius: 999px;
  font-family: var(--fuente);
  font-size: 1rem;
  color: var(--color-texto);
  background: #fff;
}
.input-busqueda:focus-visible { outline-offset: 0; border-color: var(--color-foco); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--centrado { justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: #fff;
  border: 1px solid var(--avera-verde-300);
  border-radius: var(--radio-chip);
  color: var(--avera-verde-800);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--fuente);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.chip:hover { background: var(--avera-verde-50); color: var(--avera-verde-800); }
.chip.activo {
  background: var(--avera-verde-700);
  border-color: var(--avera-verde-700);
  color: #fff;
}

/* Página de cartilla: texto denso a 15px (legibilidad Baloo 2) */
.cartilla-resultados { font-size: 0.9375rem; line-height: 1.6; }
.cartilla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}
.prestador {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: none;
  transition: box-shadow 200ms ease;
}
.prestador:hover { box-shadow: var(--sombra-reposo); }
.prestador h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; }
.prestador__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.prestador__cat {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--avera-neutro-600);
  background: var(--avera-neutro-100);
  border-radius: 999px;
  padding: 3px 10px;
}
.prestador p { margin: 0 0 4px; color: var(--color-texto-secundario); }
.prestador a { color: var(--color-enlace); text-decoration: none; font-weight: 500; }
.prestador a:hover { text-decoration: underline; }
.prestador mark { background: var(--avera-verde-100); color: inherit; border-radius: 3px; padding: 0 2px; }

.cartilla-vacio {
  text-align: center;
  color: var(--color-texto-terciario);
  padding: 48px 24px;
  border: 1px dashed var(--avera-neutro-300);
  border-radius: 16px;
}

.cartilla-contador { color: var(--color-texto-terciario); font-size: 0.9375rem; margin: 18px 0 22px; }

/* ---------- 12. Cómo afiliarte — 3 pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.paso { text-align: center; position: relative; }
.paso__numero {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--avera-amarillo-300);
  color: var(--avera-amarillo-900);
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.paso h3 { margin-bottom: 6px; }
.paso p { color: var(--color-texto-secundario); margin: 0; }
.paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(50% + 48px);
  width: calc(100% - 96px);
  border-top: 2px dashed var(--avera-neutro-300);
}

/* ---------- 13. CTA de cierre ---------- */
.cta-cierre {
  position: relative;
  background: var(--avera-verde-900);
  color: #fff;
  overflow: hidden;
  text-align: center;
  padding-block: 96px;
}
.cta-cierre .display { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem); }
.cta-cierre p { color: var(--avera-verde-200); max-width: 48ch; margin-inline: auto; }
.cta-cierre__contenido { position: relative; z-index: 1; }
.cta-cierre__blobs { position: absolute; inset: 0; pointer-events: none; }

/* ---------- 14. Footer ---------- */
.footer { background: var(--avera-verde-900); color: var(--avera-neutro-100); padding-block: 64px 32px; }
.footer a { color: var(--avera-neutro-100); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__logo-placa {
  display: inline-block;
  background: #fff;
  border-radius: 16px;
  padding: 12px 18px;
}
.footer__logo-placa img { height: 44px; width: auto; }
.footer h4 {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--avera-verde-300);
  margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__legal {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: 22px;
  font-size: 0.8125rem;
  color: var(--avera-verde-300);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.footer__redes { display: flex; gap: 14px; margin-top: 14px; }
.footer__redes a {
  width: 42px;
  height: 42px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer__redes a:hover { background: rgb(255 255 255 / 0.12); }
.footer__redes svg { width: 20px; height: 20px; }

/* ---------- 15. Botón flotante de WhatsApp ---------- */
.wa-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  transition: transform 150ms ease;
}
.wa-flotante:hover { transform: scale(1.06); color: #fff; }
.wa-flotante svg { width: 30px; height: 30px; }

/* ---------- 16. Bloques Quiénes somos ---------- */
.bloque-texto { max-width: 760px; margin-inline: auto; }
.bloque-alt {
  border-radius: var(--radio-tarjeta);
  padding: 40px 44px;
  margin-bottom: 28px;
}
.bloque-alt--neutro { background: var(--avera-neutro-50); }
.bloque-alt--celeste { background: var(--avera-verde-50); }
.bloque-alt h2 { margin-bottom: 12px; }
.bloque-alt :last-child { margin-bottom: 0; }

/* ---------- 17. Tabla comparativa ---------- */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: 16px; }
.tabla-planes { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.tabla-planes th, .tabla-planes td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-borde); }
.tabla-planes thead th { background: var(--avera-neutro-50); font-weight: 600; }
.tabla-planes tbody tr:last-child td { border-bottom: none; }
.tabla-planes .check { color: var(--avera-verde-600); font-weight: 700; }

/* ---------- 18. Mapa / contacto ---------- */
.mapa-marco { border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: var(--sombra-reposo); border: 1px solid var(--color-borde); }
.mapa-marco iframe { display: block; width: 100%; height: 380px; border: 0; }

.contacto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.dato-contacto { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.dato-contacto svg { flex: none; width: 24px; height: 24px; color: var(--avera-verde-600); margin-top: 4px; }
.dato-contacto p { margin: 0; }
.dato-contacto .titulo { font-weight: 600; }

/* ---------- 19. Portada de provincias ---------- */
.portada {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--avera-verde-50);
  position: relative;
  overflow: hidden;
}
.portada__centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.portada__logo { height: 84px; width: auto; margin-bottom: 32px; }
.provincias {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 260px));
  gap: 24px;
  margin-top: 40px;
}
.provincias--sedes { grid-template-columns: repeat(auto-fit, minmax(240px, 290px)); }
.provincia {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-reposo);
  padding: 32px 28px;
  text-decoration: none;
  color: var(--color-texto);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.provincia:hover { box-shadow: var(--sombra-hover); transform: translateY(-4px); color: var(--color-texto); }
.provincia strong { font-size: 1.375rem; font-weight: 700; }
.provincia span { color: var(--color-texto-terciario); font-size: 0.9375rem; }
.provincia .enlace-flecha { margin-top: 10px; color: var(--avera-verde-700); }
.portada__pie {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  font-size: 0.8125rem;
  color: var(--color-texto-terciario);
}
.portada__blobs { position: absolute; inset: 0; pointer-events: none; }

/* ---------- 19b. Fotografía en tarjetas y secciones ---------- */
.plan-card__foto {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 20px;
}
.plan-card__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

.foto-banner {
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  aspect-ratio: 16 / 9;
  margin-bottom: 40px;
}
.foto-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }

.historia__foto {
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  aspect-ratio: 4 / 5;
  max-width: 480px;
}
.historia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stats--fila { display: flex; gap: 36px; margin: 10px 0 22px; }
.stats--fila .stat__numero { font-size: 2.25rem; }

/* ---------- 20. Animaciones de entrada ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.reveal.visible { opacity: 1; transform: none; }

/* Reveal escalonado: los hijos entran en cascada */
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 450ms ease-out, transform 450ms ease-out; }
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 360ms; }

/* ---------- 20b. Coreografía de entrada del hero ---------- */
@keyframes heroSube {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__texto > * { animation: heroSube 600ms ease-out backwards; }
.hero__texto .eyebrow { animation-delay: 80ms; }
.hero__texto .display { animation-delay: 180ms; }
.hero__texto .lead    { animation-delay: 300ms; }
.hero__texto .hero__ctas { animation-delay: 420ms; }

/* La entrada conserva la inclinación del slider (si no, salta al terminar) */
@keyframes sliderEntra {
  from { opacity: 0; transform: perspective(1600px) rotateY(-5deg) rotate(-0.6deg) translateY(26px); }
  to   { opacity: 1; transform: perspective(1600px) rotateY(-5deg) rotate(-0.6deg) translateY(0); }
}
.hero-slider { animation: sliderEntra 700ms 250ms ease-out backwards; }

/* Variante sin inclinación para pantallas chicas */
@keyframes sliderEntraPlano {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 20b-bis. Titular animado del hero ---------- */
.hero__texto .titulo-animado { animation: none; }

.titulo-animado .palabra {
  display: inline-block;
  animation: palabraSube 650ms cubic-bezier(0.22, 0.9, 0.35, 1.12) backwards;
}
.titulo-animado .palabra:nth-child(1) { animation-delay: 150ms; }
.titulo-animado .palabra:nth-child(2) { animation-delay: 260ms; }
.titulo-animado .palabra:nth-child(3) { animation-delay: 370ms; }
.titulo-animado .palabra:nth-child(4) { animation-delay: 480ms; }
.titulo-animado .palabra:nth-child(5) { animation-delay: 590ms; }

@keyframes palabraSube {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* "bienestar": los 5 colores del logo recorriendo la palabra.
   Se usan los stops de cada color que pasan contraste en texto grande. */
.texto-gradiente {
  background: linear-gradient(90deg, #4E9424, #308AB7, #C23488, #C56A24, #AE7E1C, #4E9424);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #4E9424;
  -webkit-text-fill-color: transparent;
  animation: gradienteVivo 12s linear infinite;
}
@keyframes gradienteVivo {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .texto-gradiente { background: none; -webkit-text-fill-color: currentColor; }
}

/* Subrayado que se dibuja solo bajo "bienestar" */
.palabra--bienestar { position: relative; }
.palabra--bienestar .subrayado {
  position: absolute;
  left: 2%;
  bottom: -0.14em;
  width: 96%;
  height: 0.26em;
  overflow: visible;
  pointer-events: none;
}
.palabra--bienestar .subrayado path {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: dibujarTrazo 700ms 1000ms ease-out forwards;
}
@keyframes dibujarTrazo {
  to { stroke-dashoffset: 0; }
}


/* ---------- 20c. Micro-interacciones ---------- */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.enlace-flecha::after { display: inline-block; transition: transform 200ms ease; }
.enlace-flecha:hover::after { transform: translateX(5px); }

@keyframes pulsoWa {
  0%   { box-shadow: 0 4px 16px rgb(0 0 0 / 0.18), 0 0 0 0 rgb(37 211 102 / 0.45); }
  70%  { box-shadow: 0 4px 16px rgb(0 0 0 / 0.18), 0 0 0 14px rgb(37 211 102 / 0); }
  100% { box-shadow: 0 4px 16px rgb(0 0 0 / 0.18), 0 0 0 0 rgb(37 211 102 / 0); }
}
.wa-flotante { animation: pulsoWa 2.8s ease-out infinite; }

@keyframes derivaBlobs {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-24px, 12px, 0) scale(1.05); }
}
.cta-cierre__blobs { animation: derivaBlobs 26s ease-in-out infinite alternate; }

.portada__blobs { animation: derivaBlobs 30s ease-in-out infinite alternate; }
.provincia:hover .enlace-flecha { color: var(--avera-verde-900); }

/* ---------- 20d. Carrusel (misión / visión / compromiso) ---------- */
.banda-esencia {
  background: var(--avera-verde-900);
  color: #fff;
  padding-block: 72px;
  position: relative;
  overflow: hidden;
}
.carrusel { max-width: 820px; margin-inline: auto; text-align: center; position: relative; }
.carrusel__comillas { color: var(--avera-verde-400); margin-bottom: 18px; }
.carrusel__pista { display: grid; }
.carrusel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease, visibility 600ms;
}
.carrusel__slide.activo { opacity: 1; visibility: visible; transform: none; }
.carrusel__etiqueta {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--avera-verde-300);
  margin-bottom: 14px;
}
.carrusel__slide blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.45;
}
.carrusel__controles { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 30px; }
.carrusel__flecha {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, transform 150ms ease;
}
.carrusel__flecha:hover { background: rgb(255 255 255 / 0.12); transform: translateY(-2px); }
.carrusel__puntos { display: flex; gap: 10px; }
.carrusel__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgb(255 255 255 / 0.35);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}
.carrusel__punto:hover { background: rgb(255 255 255 / 0.6); }
.carrusel__punto.activo { background: #fff; transform: scale(1.25); }

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

/* ---------- 21. Responsive ---------- */
@media (max-width: 960px) {
  .seccion { padding-block: 56px; }
  .hero__inner { grid-template-columns: 1fr; padding-block: 48px 40px; gap: 40px; }
  .hero__fotos { justify-content: center; }
  .hero-slider { max-width: 440px; transform: none; animation-name: sliderEntraPlano; }
  .hero__olas { height: 42%; }
  .stats-historia { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .provincias { grid-template-columns: minmax(220px, 320px); }
}

/* Con submenús y utilidades, la barra completa necesita más aire: el modo
   móvil arranca en 960px en lugar de 820px. */
@media (max-width: 960px) {
  .navbar__nav, .navbar__utilidades { display: none; }
  .navbar__cta-movil { display: inline-flex; margin-left: auto; }
  .navbar__hamburguesa { display: inline-flex; }
}

@media (max-width: 1160px) {
  .navbar__links > .navbar__item > a { padding: 8px 10px; font-size: 0.9rem; }
  .navbar__links { gap: 2px; }
  .navbar__acceso { padding: 0 13px; }
  .navbar__acceso span { display: none; }
  .navbar__utilidades .btn { min-height: 44px; padding-inline: 18px; }
  .navbar__inner { gap: 14px; }
}

@media (max-width: 820px) {
  .valores { grid-template-columns: 1fr; gap: 28px; }
  .pasos { grid-template-columns: 1fr; }
  .paso:not(:last-child)::after { display: none; }
}

@media (max-width: 640px) {
  .contenedor { padding-inline: 16px; }
  .stats--fila { gap: 20px; flex-wrap: wrap; }
  .hero__inner { padding-block: 36px 28px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .bloque-alt { padding: 28px 22px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .wa-flotante { bottom: 16px; right: 16px; }
  .buscador-form { flex-direction: column; }
  .buscador-form .btn { width: 100%; }
}

/* ==========================================================================
   22. Fondos de sección — identidad Avera
   Degradados suaves + resplandores de color + cuadrados redondeados de marca
   ========================================================================== */
:root {
  --deco-cuadrados: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Crect x='14' y='26' width='48' height='48' rx='12' fill='%2379CF40'/%3E%3Crect x='70' y='2' width='34' height='34' rx='9' fill='%23EB7E2B'/%3E%3Crect x='38' y='84' width='26' height='26' rx='8' fill='%23C23488'/%3E%3Crect x='2' y='118' width='38' height='38' rx='10' fill='%2339A4DA'/%3E%3Crect x='76' y='52' width='20' height='20' rx='6' fill='%23F9B428'/%3E%3C/svg%3E");
  --linea-marca: linear-gradient(90deg, #79CF40 0%, #39A4DA 28%, #C23488 52%, #EB7E2B 76%, #F9B428 100%);
}

@keyframes derivaSuave {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(14px, -10px) rotate(3deg); }
}

/* Capas: el contenido siempre por encima de la decoración */
.seccion { position: relative; }
.seccion > .contenedor { position: relative; z-index: 1; }
.hero > .contenedor { position: relative; z-index: 1; }

/* Hero: degradado verde suave + ondas orgánicas + trama de puntos */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, #ffffff 0%, #f9fdf6 36%, #ebf8e2 100%);
}
/* Trama de puntos que se desvanece en la esquina superior izquierda */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 280px;
  background-image: radial-gradient(#98DA6C 1.6px, transparent 1.6px);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(132deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(132deg, #000 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
/* Ondas del pie del hero */
.hero__olas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 66%;
  z-index: 0;
  pointer-events: none;
}
/* Acentos verdes propios del hero */
.hero .eyebrow { color: var(--avera-verde-700); }
.hero .btn--secundario { border-color: var(--avera-verde-600); color: var(--avera-verde-700); }
.hero .btn--secundario:hover { background: var(--avera-verde-50); color: var(--avera-verde-800); }
/* Franja blanca al pie del hero, por delante de las ondas */
.hero__pie {
  position: relative;
  z-index: 1;
  background: #ffffff;
}
.hero__anclas { border-top-color: var(--avera-verde-100); }
.hero__anclas a:hover { color: var(--avera-verde-700); }

/* Secciones alternas: degradado + textura de puntos + cuadrados en las esquinas */
.seccion--alt {
  overflow: hidden;
  background:
    radial-gradient(rgb(121 207 64 / 0.16) 1.6px, transparent 1.6px) 0 0 / 24px 24px,
    linear-gradient(180deg, #ffffff 0%, var(--avera-neutro-50) 24%, var(--avera-verde-50) 100%);
}
.seccion--alt::before {
  content: "";
  position: absolute;
  top: -54px;
  right: -62px;
  width: 290px;
  height: 290px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
  animation: derivaSuave 50s ease-in-out infinite alternate;
}
.seccion--alt::after {
  content: "";
  position: absolute;
  bottom: -64px;
  left: -70px;
  width: 250px;
  height: 250px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.22;
  transform: rotate(180deg);
  pointer-events: none;
}

/* Sección celeste (teaser de cartilla): panel flotante redondeado */
.seccion--celeste {
  overflow: hidden;
  width: min(1360px, calc(100% - 32px));
  margin-inline: auto;
  margin-block: 48px;
  border-radius: 44px;
  background: linear-gradient(160deg, var(--avera-verde-100) 0%, var(--avera-verde-50) 52%, var(--avera-amarillo-50) 100%);
}
.seccion--celeste::before {
  content: "";
  position: absolute;
  top: -44px;
  left: -52px;
  width: 250px;
  height: 250px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.38;
  pointer-events: none;
  animation: derivaSuave 55s ease-in-out infinite alternate;
}
.seccion--celeste::after {
  content: "";
  position: absolute;
  bottom: -56px;
  right: -64px;
  width: 300px;
  height: 300px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.38;
  transform: rotate(180deg);
  pointer-events: none;
}

/* Planes: resplandor naranja (Superior) y magenta (Selecta) a cada lado */
#planes {
  overflow: hidden;
  background:
    radial-gradient(640px 420px at 10% 30%, var(--avera-naranja-50) 0%, transparent 62%),
    radial-gradient(640px 420px at 90% 30%, var(--avera-magenta-50) 0%, transparent 62%),
    #ffffff;
}

/* Cómo afiliarte: calidez amarilla + textura de puntos + cuadrados */
#afiliate {
  overflow: hidden;
  background:
    radial-gradient(rgb(249 180 40 / 0.15) 1.6px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, #ffffff 0%, var(--avera-amarillo-50) 100%);
}
#afiliate::before {
  content: "";
  position: absolute;
  bottom: -62px;
  left: -70px;
  width: 270px;
  height: 270px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.3;
  transform: rotate(120deg);
  pointer-events: none;
  animation: derivaSuave 48s ease-in-out infinite alternate;
}

/* Bandas oscuras: paneles flotantes redondeados con resplandores de color */
/* Foto de la Quebrada bajo un degradado verde: el velo mantiene el texto
   blanco legible y deja asomar los cerros. */
.banda-esencia {
  width: min(1360px, calc(100% - 32px));
  margin-inline: auto;
  margin-block: 48px;
  border-radius: 44px;
  background-color: var(--avera-verde-900);
  background-image:
    linear-gradient(135deg, rgb(30 55 14 / 0.95) 0%, rgb(39 71 19 / 0.88) 45%, rgb(69 130 32 / 0.82) 100%),
    url("../images/landscapes/quebrada-salta.jpg");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}
.cta-cierre {
  width: min(1360px, calc(100% - 32px));
  margin: 48px auto 96px;
  border-radius: 44px;
  background:
    radial-gradient(720px 430px at 50% 120%, rgb(152 218 108 / 0.36), transparent 66%),
    radial-gradient(480px 320px at 8% -10%, rgb(249 180 40 / 0.16), transparent 60%),
    var(--avera-verde-900);
}

/* Footer: línea multicolor de marca en el borde superior */
.footer { position: relative; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--linea-marca);
}

/* Bloques de Quiénes somos: tintes con degradado */
.bloque-alt--neutro { background: linear-gradient(135deg, var(--avera-neutro-50) 0%, var(--avera-verde-50) 100%); }
.bloque-alt--celeste { background: linear-gradient(135deg, var(--avera-verde-50) 0%, var(--avera-amarillo-50) 100%); }

/* Portada de provincias: mismo lenguaje de aurora */
.portada {
  background:
    radial-gradient(900px 520px at 6% -8%, var(--avera-verde-200) 0%, transparent 60%),
    radial-gradient(720px 500px at 98% 12%, var(--avera-amarillo-100) 0%, transparent 62%),
    radial-gradient(640px 420px at 88% 96%, var(--avera-magenta-100) 0%, transparent 60%),
    radial-gradient(560px 380px at 6% 92%, var(--avera-verde-100) 0%, transparent 58%),
    linear-gradient(180deg, var(--avera-verde-50) 0%, #ffffff 100%);
}
.portada::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -58px;
  width: 280px;
  height: 280px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.4;
  pointer-events: none;
  animation: derivaSuave 50s ease-in-out infinite alternate;
}
.portada::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -66px;
  width: 320px;
  height: 320px;
  background: var(--deco-cuadrados) no-repeat center / contain;
  opacity: 0.4;
  transform: rotate(180deg);
  pointer-events: none;
}

/* ---------- 23. Banda de descarga de la app ---------- */
.banda-app {
  position: relative;
  width: min(1360px, calc(100% - 32px));
  margin-inline: auto;
  margin-block: 48px;
  border-radius: 44px;
  overflow: hidden;
  color: #fff;
  padding-block: 64px;
  background:
    radial-gradient(760px 560px at 76% 52%, rgb(121 207 64 / 0.42), transparent 64%),
    linear-gradient(115deg, #1C3510 0%, #2F5716 36%, #458220 72%, #55A026 100%);
}
/* Trama de puntos a la izquierda del teléfono */
.banda-app::before {
  content: "";
  position: absolute;
  top: 12%;
  right: 34%;
  width: 190px;
  height: 210px;
  background-image: radial-gradient(rgb(255 255 255 / 0.55) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 78%);
  pointer-events: none;
}
/* Cuadrados redondeados decorativos arriba a la derecha */
.banda-app__cuadros {
  position: absolute;
  top: 26px;
  right: 40px;
  width: 190px;
  height: 170px;
  pointer-events: none;
  animation: derivaSuave 50s ease-in-out infinite alternate;
}

/* Lista de beneficios con ícono en placa */
.banda-app__lista {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.banda-app__lista li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.0625rem;
  color: #fff;
}
.banda-app__icono {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--avera-verde-300);
}
.banda-app__icono svg { width: 22px; height: 22px; }

.banda-app__marca { color: var(--avera-verde-300); }
.banda-app__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.banda-app h2 { color: #fff; }
.banda-app .eyebrow { color: var(--avera-amarillo-300); }
.banda-app__texto p { color: var(--avera-verde-100); max-width: 46ch; }
.banda-app__tiendas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; align-items: center; }
.banda-app__tiendas a { display: inline-block; border-radius: 10px; transition: transform 150ms ease; }
.banda-app__tiendas a:hover { transform: translateY(-3px); }
.banda-app__tiendas img { height: 52px; width: auto; border-radius: 10px; display: block; }
.banda-app__nota { font-size: 0.8125rem; color: var(--avera-verde-200) !important; margin-top: 14px; }
/* El recorte de las manos queda pegado al borde inferior del panel:
   las muñecas "salen" del cuadro y el corte nunca se ve */
.banda-app__telefono {
  position: relative;
  max-width: 400px;
  justify-self: center;
  align-self: end;
  margin-bottom: -64px;
}
/* Resplandor detrás del teléfono */
.banda-app__telefono::before {
  content: "";
  position: absolute;
  inset: 6% -18% 10% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(203 240 178 / 0.55), rgb(203 240 178 / 0) 72%);
  pointer-events: none;
}
.banda-app__telefono img { position: relative; }
.banda-app__telefono img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 26px rgb(0 0 0 / 0.30));
}

@media (max-width: 960px) {
  .banda-app__grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .banda-app__tiendas { justify-content: center; }
  .banda-app__texto p { margin-inline: auto; }
  .banda-app__telefono { max-width: 330px; }
  .banda-app__lista { justify-items: center; }
  .banda-app__lista li { text-align: left; }
  .banda-app::before { display: none; }
  .banda-app__cuadros { width: 120px; height: 108px; top: 16px; right: 18px; opacity: 0.75; }
}
@media (max-width: 640px) {
  .banda-app__telefono { margin-bottom: -44px; }
}

/* En pantallas chicas los paneles ocupan casi todo el ancho */
@media (max-width: 640px) {
  .banda-app {
    width: calc(100% - 20px);
    border-radius: 28px;
    padding-block: 44px;
  }
  .seccion--celeste,
  .banda-esencia,
  .cta-cierre {
    width: calc(100% - 20px);
    border-radius: 28px;
  }
  .cta-cierre { margin-bottom: 56px; }
}

/* En pantallas chicas la decoración se achica y aclara */
@media (max-width: 640px) {
  .hero::before,
  .seccion--alt::before,
  .seccion--alt::after,
  .seccion--celeste::before,
  .seccion--celeste::after,
  #afiliate::before,
  .portada::before,
  .portada::after {
    width: 150px;
    height: 150px;
    opacity: 0.22;
  }
}

/* ========================================================================== 
   24. Renovacion visual 2026
   Jerarquia: celeste institucional, verde de accion y acentos por producto.
   ========================================================================== */

body {
  letter-spacing: -0.006em;
  background: #fff;
}

h1, h2, h3, h4, .display, .stat__numero, .provincia strong {
  letter-spacing: -0.025em;
}

h2 { color: var(--avera-verde-900); }

.eyebrow {
  color: var(--avera-verde-700);
  font-family: var(--fuente);
  font-weight: 800;
  letter-spacing: 0.11em;
}

.eyebrow--celeste,
.acento-celeste { color: var(--avera-verde-700); }

.seccion { padding-block: clamp(68px, 7vw, 104px); }
.seccion--celeste { background: var(--avera-verde-50); }

/* (Los refinamientos del navbar viven consolidados en la sección 6.) */

/* Botones: mas volumen y una lectura clara de primario/secundario. */
.btn {
  min-height: 54px;
  padding-inline: 30px;
  font-weight: 800;
  box-shadow: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
              transform 180ms ease, box-shadow 180ms ease;
}

.btn--primario {
  background: linear-gradient(135deg, var(--avera-verde-600), var(--avera-verde-700));
  box-shadow: 0 10px 24px rgb(69 130 32 / 0.22);
}

.btn--primario:hover {
  background: linear-gradient(135deg, var(--avera-verde-700), var(--avera-verde-800));
  box-shadow: 0 14px 30px rgb(58 108 27 / 0.28);
}

.btn--secundario {
  border-color: var(--avera-celeste-500);
  color: var(--avera-celeste-800);
  background: rgb(255 255 255 / 0.72);
}

.btn--secundario:hover {
  background: var(--avera-celeste-50);
  border-color: var(--avera-celeste-700);
  color: var(--avera-celeste-900);
}

/* Hero: aire editorial, celeste de confianza y una sola firma gestual. */
.hero {
  isolation: isolate;
  background:
    radial-gradient(720px 480px at 86% 18%, rgb(249 180 40 / 0.12), transparent 68%),
    linear-gradient(145deg, #ffffff 0%, var(--avera-verde-50) 52%, var(--avera-verde-100) 100%);
}

.hero::before {
  width: 420px;
  height: 330px;
  background-image: radial-gradient(rgb(121 207 64 / 0.42) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.55;
}

.hero__inner {
  min-height: min(720px, calc(100vh - 116px));
  padding-block: 76px 64px;
  gap: clamp(48px, 7vw, 88px);
}

.hero__texto { max-width: 610px; }
.hero .eyebrow { color: var(--avera-verde-700); }
.hero .display { font-size: clamp(2.65rem, 3.7vw + 1rem, 4.85rem); line-height: 0.98; }
.hero .lead { font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.3rem); }
.hero .btn--secundario { border-color: var(--avera-celeste-500); color: var(--avera-celeste-800); }
.hero .btn--secundario:hover { background: var(--avera-celeste-50); color: var(--avera-celeste-900); }

.texto-gradiente {
  background: linear-gradient(
    90deg,
    var(--avera-verde-600) 0%,
    var(--avera-celeste-600) 26%,
    var(--avera-magenta-600) 51%,
    var(--avera-naranja-600) 76%,
    var(--avera-amarillo-700) 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--avera-celeste-700);
  -webkit-text-fill-color: transparent;
  animation: none;
}

.palabra--bienestar .subrayado path { stroke: var(--avera-amarillo-500); }

.palabra--rotativa {
  white-space: nowrap;
  vertical-align: baseline;
}
.palabra--rotativa .texto-gradiente { display: inline-block; }
.palabra--rotativa.saliendo .texto-gradiente {
  animation: palabraRotativaSale 300ms cubic-bezier(.4, 0, .6, 1) both;
}
.palabra--rotativa.entrando .texto-gradiente {
  animation: palabraRotativaEntra 520ms cubic-bezier(.18, .8, .28, 1.12) both;
}
.palabra--rotativa.saliendo .subrayado {
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity 180ms ease, transform 260ms ease;
}
.palabra--rotativa.entrando .subrayado {
  animation: subrayadoRotativoEntra 520ms 120ms ease-out both;
}

@keyframes palabraRotativaSale {
  to { opacity: 0; transform: translateY(-14px); filter: blur(3px); }
}
@keyframes palabraRotativaEntra {
  from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes subrayadoRotativoEntra {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 1; transform: scaleX(1); }
}

/* ---------- 31. Corrección definitiva de la banda app en mobile ---------- */
@media (max-width: 960px) {
  .banda-app__grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .banda-app__grid > * { min-width: 0; }
  .banda-app__texto { width: 100%; }
  .banda-app__telefono {
    width: min(410px, 88vw);
    max-width: 100%;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .banda-app {
    width: calc(100% - 16px);
    padding-block: 38px 0;
  }
  .banda-app .contenedor { padding-inline: 22px; }
  .banda-app__grid { gap: 24px; text-align: center; }
  .banda-app__texto { display: flex; flex-direction: column; align-items: center; }
  .banda-app h2 {
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(1.75rem, 8.2vw, 2.15rem);
    line-height: 1.12;
  }
  .banda-app .eyebrow {
    max-width: none;
    white-space: normal;
    line-height: 1.4;
  }
  .banda-app__texto > p {
    width: 100%;
    max-width: 34ch;
    margin-inline: auto;
    line-height: 1.55;
  }
  .banda-app__lista {
    width: 100%;
    max-width: 340px;
    margin: 22px auto 26px;
    justify-items: stretch;
  }
  .banda-app__lista li {
    width: 100%;
    text-align: left;
  }
  .banda-app__tiendas {
    width: 100%;
    justify-content: center;
  }
  .banda-app__telefono {
    width: min(330px, 86vw);
    max-width: 100%;
    margin: 0 auto -2px;
  }
}

.hero__olas path:nth-child(1) { fill: var(--avera-verde-100); }
.hero__olas path:nth-child(2) { fill: var(--avera-verde-200); }
.hero__olas path:nth-child(3) { fill: var(--avera-verde-300); }
.hero__olas path:nth-child(4) { fill: var(--avera-verde-400); }

.hero-slider {
  max-width: 500px;
  transform: rotate(1.1deg);
  filter: drop-shadow(0 28px 35px rgb(24 69 92 / 0.16));
}

.hero-slider::before {
  content: "";
  position: absolute;
  inset: -18px 22px 20px -20px;
  z-index: -1;
  border-radius: 34px;
  background: linear-gradient(145deg, var(--avera-amarillo-100), var(--avera-amarillo-300));
  transform: rotate(-4deg);
}

.hero-slider .carrusel__pista {
  border: 8px solid #fff;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgb(24 69 92 / 0.16);
}

@keyframes sliderEntra {
  from { opacity: 0; transform: rotate(1.1deg) translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: rotate(1.1deg) translateY(0) scale(1); }
}

.hero__pie { background: rgb(255 255 255 / 0.9); }
.hero__anclas { border-top-color: var(--avera-verde-100); }
.hero__anclas a { font-weight: 700; }
.hero__anclas a:hover { color: var(--avera-verde-700); }

/* Valores: cada atributo recupera un color propio de la marca. */
.valor {
  padding: 26px 22px;
  border-radius: 24px;
  transition: transform 200ms ease, background-color 200ms ease;
}

.valor:hover { transform: translateY(-4px); background: rgb(255 255 255 / 0.72); }
.valor__icono { width: 68px; height: 68px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); }
.valor__icono--celeste { background: var(--avera-celeste-100); color: var(--avera-celeste-700); }
.valor__icono--verde { background: var(--avera-verde-100); color: var(--avera-verde-700); }

/* Fondos: profundidad suave sin competir con el contenido. */
.seccion--alt {
  background: linear-gradient(180deg, #fff 0%, var(--avera-neutro-50) 52%, var(--avera-verde-50) 100%);
}

.seccion--alt::before,
.seccion--alt::after { opacity: 0.10; animation: none; }

.seccion--celeste {
  border: 1px solid var(--avera-verde-100);
  background:
    radial-gradient(500px 320px at 100% 0%, rgb(249 180 40 / 0.12), transparent 70%),
    linear-gradient(145deg, var(--avera-verde-50), #fff 75%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
}

.seccion--celeste::before,
.seccion--celeste::after { opacity: 0.14; animation: none; }

/* Tarjetas: producto primero, color como senal y no como relleno. */
#planes {
  background:
    radial-gradient(650px 380px at 0% 32%, rgb(235 126 43 / 0.07), transparent 68%),
    radial-gradient(650px 380px at 100% 32%, rgb(194 52 136 / 0.07), transparent 68%),
    #fff;
}

.plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(212 240 194 / 0.82);
  border-top: 0;
  padding: 0 32px 32px;
  box-shadow: var(--sombra-reposo);
  transform: translateZ(0);
}

.plan-card::before {
  content: "";
  height: 5px;
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
}

.plan-card--superior::before { background: linear-gradient(90deg, var(--avera-naranja-400), var(--avera-naranja-600)); }
.plan-card--selecta::before { background: linear-gradient(90deg, var(--avera-magenta-400), var(--avera-magenta-600)); }
.plan-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover); }

.plan-card__foto {
  margin: 0 -32px 24px;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.plan-card__foto img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.plan-card:hover .plan-card__foto img { transform: scale(1.045); }

.lista-check svg { color: var(--avera-verde-700); }
.badge { font-weight: 800; }

/* Formularios y datos vuelven al celeste institucional. */
.input-busqueda { border-color: var(--avera-celeste-300); }
.chip { border-color: var(--avera-celeste-300); color: var(--avera-celeste-800); }
.chip:hover { background: var(--avera-celeste-50); color: var(--avera-celeste-900); }
.prestador mark { background: var(--avera-celeste-100); }
.dato-contacto svg { color: var(--avera-celeste-700); }

/* Bandas oscuras: azul profundo para separar contenido institucional. */
.banda-esencia {
  border: 1px solid rgb(255 255 255 / 0.12);
  background-color: var(--avera-verde-900);
  background-image:
    linear-gradient(135deg, rgb(30 55 14 / 0.96), rgb(39 71 19 / 0.86)),
    url("../images/landscapes/quebrada-salta.jpg");
  box-shadow: 0 28px 70px rgb(24 69 92 / 0.16);
}

.carrusel__comillas { color: var(--avera-amarillo-300); }
.carrusel__etiqueta { color: var(--avera-celeste-200); }

.cta-cierre {
  background:
    radial-gradient(680px 400px at 86% 110%, rgb(121 207 64 / 0.28), transparent 66%),
    radial-gradient(460px 280px at 5% -10%, rgb(249 180 40 / 0.13), transparent 64%),
    linear-gradient(135deg, var(--avera-verde-900), #1c3510);
  box-shadow: 0 28px 70px rgb(24 69 92 / 0.16);
}

.footer { background: #090B0A; }

.banda-app {
  background:
    radial-gradient(700px 520px at 85% 55%, rgb(121 207 64 / 0.30), transparent 66%),
    linear-gradient(120deg, #1c3510 0%, var(--avera-verde-900) 58%, var(--avera-verde-700) 100%);
  border: 1px solid rgb(255 255 255 / 0.10);
  box-shadow: 0 28px 70px rgb(24 69 92 / 0.16);
}

.banda-app__texto p { color: var(--avera-verde-100); }
.banda-app__marca,
.banda-app__icono { color: var(--avera-verde-300); }
.banda-app__nota { color: var(--avera-verde-200) !important; }

/* El dispositivo es el protagonista visual de la banda. */
.banda-app__grid { grid-template-columns: 0.92fr 1.08fr; }
.banda-app__telefono {
  width: min(520px, 112%);
  max-width: none;
  justify-self: end;
}

.bloque-alt--neutro { background: linear-gradient(135deg, var(--avera-neutro-50), var(--avera-verde-50)); }
.bloque-alt--celeste { background: linear-gradient(135deg, var(--avera-verde-50), #fff); }

/* Portada de provincias: tarjetas reconocibles y recorrido de color. */
.portada {
  background:
    radial-gradient(800px 500px at 0% 0%, var(--avera-verde-200), transparent 64%),
    radial-gradient(700px 460px at 100% 8%, var(--avera-amarillo-100), transparent 66%),
    radial-gradient(620px 420px at 88% 100%, var(--avera-magenta-100), transparent 64%),
    linear-gradient(165deg, var(--avera-verde-50), #fff 72%);
}

.portada::before,
.portada::after { opacity: 0.18; animation: none; }
.portada__blobs { opacity: 0.64; animation-duration: 42s; }

.provincia {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border-color: rgb(212 240 194 / 0.88);
  box-shadow: var(--sombra-reposo);
}

.provincia::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--avera-verde-500);
}

.provincia:nth-child(2)::before { background: var(--avera-amarillo-500); }
.provincia:nth-child(3)::before { background: var(--avera-magenta-500); }
.provincias--sedes .provincia:nth-child(2)::before { background: var(--avera-magenta-500); }
.provincia:hover { transform: translateY(-8px); box-shadow: var(--sombra-hover); }
.provincia .enlace-flecha { color: var(--avera-verde-700); }
.provincia:hover .enlace-flecha { color: var(--avera-verde-900); }

@media (max-width: 960px) {
  .hero__inner { min-height: auto; }
  .hero-slider { transform: none; }
  .hero-slider::before { transform: rotate(-2deg); }
  @keyframes sliderEntraPlano {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  .banda-app__telefono {
    width: min(430px, 92vw);
    max-width: none;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .hero__inner { padding-block: 42px 34px; gap: 44px; }
  .hero .display { font-size: clamp(2.45rem, 12vw, 3.45rem); }
  .hero__ctas { display: grid; grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .hero-slider { width: calc(100% - 18px); }
  .hero-slider::before { inset: -12px 10px 12px -12px; }
  .hero-slider .carrusel__pista { border-width: 5px; border-radius: 24px; }
  .plan-card { padding-inline: 22px; padding-bottom: 26px; }
  .plan-card__foto { margin-inline: -22px; }
  .valor { padding-block: 18px; }
  .provincia { min-height: 164px; }
  .portada__centro { padding-inline: 16px; }
  .banda-app__telefono { width: min(370px, 94vw); }
}

/* ---------- 25. Preguntas frecuentes flotantes ---------- */
.faq-flotante {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  z-index: 72;
  font-family: var(--fuente);
}

.faq-flotante__boton {
  min-height: 56px;
  padding: 10px 20px 10px 14px;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--avera-verde-600), var(--avera-verde-800));
  color: #fff;
  box-shadow: 0 12px 30px rgb(24 48 12 / 0.28);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente);
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.faq-flotante__boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgb(24 48 12 / 0.34);
}

.faq-flotante__boton svg { width: 28px; height: 28px; flex: none; }
.faq-flotante.abierto .faq-flotante__boton { opacity: 0; pointer-events: none; transform: translateY(8px); }

.faq-panel {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: min(390px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--avera-verde-100);
  border-radius: 28px;
  background: #fff;
  color: var(--color-texto);
  box-shadow: 0 28px 80px rgb(0 0 0 / 0.24);
  transform-origin: left bottom;
  animation: faqAparece 220ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes faqAparece {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.faq-panel__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 20px;
  color: #fff;
  background:
    radial-gradient(220px 150px at 100% 0%, rgb(249 180 40 / 0.22), transparent 70%),
    linear-gradient(135deg, var(--avera-verde-700), var(--avera-verde-900));
}

.faq-panel__cabecera h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.1;
}

.faq-panel__eyebrow {
  display: block;
  color: var(--avera-verde-200);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.faq-panel__cerrar {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.10);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.faq-panel__cerrar:hover { background: rgb(255 255 255 / 0.20); }
.faq-panel__cerrar svg { width: 20px; height: 20px; }
.faq-panel__lista { padding: 10px 18px 4px; }

.faq-item { border-bottom: 1px solid var(--avera-neutro-200); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > button {
  width: 100%;
  padding: 16px 4px;
  border: 0;
  background: transparent;
  color: var(--avera-neutro-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-family: var(--fuente);
  font-size: 0.96rem;
  font-weight: 800;
  cursor: pointer;
}

.faq-item > button:hover { color: var(--avera-verde-800); }
.faq-item > button svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--avera-verde-700);
  transition: transform 180ms ease;
}
.faq-item > button[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq-item__respuesta { padding: 0 24px 18px 4px; }
.faq-item__respuesta p {
  margin: 0 0 8px;
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
  line-height: 1.55;
}
.faq-item__respuesta a { font-size: 0.88rem; font-weight: 800; text-decoration: none; }
.faq-item__respuesta a:hover { text-decoration: underline; }

.faq-panel__pie {
  margin: 0;
  padding: 14px 22px 18px;
  color: var(--color-texto-terciario);
  background: var(--avera-verde-50);
  font-size: 0.82rem;
  text-align: center;
}
.faq-panel__pie a { font-weight: 800; }

@media (max-width: 640px) {
  .faq-flotante { left: 16px; right: auto; bottom: 16px; }
  .faq-flotante__boton { width: 56px; padding: 0; justify-content: center; }
  .faq-flotante__boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .faq-panel { width: calc(100vw - 32px); border-radius: 24px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* ---------- 26. Experiencia móvil refinada ---------- */
@media (max-width: 960px) {
  .navbar__inner { min-height: 68px; }
  .navbar--compacta .navbar__inner { min-height: 60px; }
  .navbar__hamburguesa {
    width: 46px;
    height: 46px;
    border: 1px solid var(--avera-verde-100);
    border-radius: 14px;
    background: var(--avera-verde-50);
    color: var(--avera-verde-900);
  }

  .navbar__hamburguesa:active { transform: scale(0.96); }

  .nav-movil {
    height: 100dvh;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(360px 260px at 100% 0%, var(--avera-amarillo-100), transparent 72%),
      linear-gradient(180deg, #fff 0%, var(--avera-verde-50) 100%);
    transform: translateX(28px);
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.75,.25,1), visibility 240ms;
  }

  .nav-movil.abierto { transform: translateX(0); }

  .nav-movil__cabecera {
    min-height: 76px;
    padding: 12px 18px;
    border-bottom: 1px solid rgb(212 240 194 / 0.82);
    background: rgb(255 255 255 / 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-movil__logo { display: inline-flex; align-items: center; }
  .nav-movil__logo img { width: auto; height: 42px; }
  .nav-movil__cerrar {
    align-self: auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--avera-neutro-200);
    border-radius: 14px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-movil__intro {
    margin: 24px 22px 5px;
    color: var(--avera-verde-700);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .nav-movil__links {
    margin: 0;
    padding: 8px 16px 12px;
    gap: 5px;
  }

  /* Entrada escalonada: cada ítem llega 35ms después del anterior. */
  .nav-movil__links li,
  .nav-movil__provincia,
  .nav-movil__contacto {
    opacity: 0;
    transform: translateY(14px);
  }
  .nav-movil.abierto .nav-movil__links li,
  .nav-movil.abierto .nav-movil__provincia,
  .nav-movil.abierto .nav-movil__contacto {
    opacity: 1;
    transform: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.75,.25,1);
    transition-delay: calc(50ms + var(--i, 0) * 35ms);
  }
  .nav-movil.abierto .nav-movil__provincia { transition-delay: 240ms; }
  .nav-movil.abierto .nav-movil__contacto { transition-delay: 285ms; }

  .nav-movil__links a {
    position: relative;
    min-height: 58px;
    padding: 14px 48px 14px 16px;
    border-radius: 17px;
    color: var(--avera-neutro-900);
    display: flex;
    align-items: center;
    font-family: var(--fuente-display);
    font-size: clamp(1.28rem, 5.7vw, 1.65rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .nav-movil__links a::after {
    content: "→";
    position: absolute;
    right: 17px;
    color: var(--avera-verde-500);
    font-family: var(--fuente);
    font-size: 1.25rem;
    transition: transform 160ms ease;
  }

  .nav-movil__links a:hover { background: #fff; color: var(--avera-verde-800); }
  .nav-movil__links a:hover::after { transform: translateX(4px); }
  .nav-movil__links a[aria-current="page"] {
    background: var(--avera-verde-100);
    color: var(--avera-verde-900);
    box-shadow: inset 4px 0 0 var(--avera-verde-600);
  }

  .nav-movil__cta {
    margin-top: auto;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--avera-verde-100);
    background: rgb(255 255 255 / 0.72);
  }

  .nav-movil__cta::before {
    content: "Te asesoramos sin costo";
    display: block;
    margin-bottom: 10px;
    color: var(--color-texto-terciario);
    font-size: 0.82rem;
    text-align: center;
  }

  /* Salida hacia el selector de provincias: el sitio es multi-sede. */
  .nav-movil__provincia {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 16px 0;
    padding: 13px 16px;
    border: 1px solid var(--avera-verde-100);
    border-radius: 17px;
    background: rgb(255 255 255 / 0.72);
    color: var(--avera-verde-900);
    text-decoration: none;
  }
  .nav-movil__provincia:hover {
    border-color: var(--avera-verde-200);
    background: #fff;
    color: var(--avera-verde-900);
  }
  .nav-movil__provincia svg { flex: none; color: var(--avera-verde-600); }
  .nav-movil__provincia-texto { display: grid; line-height: 1.25; }
  .nav-movil__provincia-texto strong {
    font-family: var(--fuente-display);
    font-size: 1.02rem;
    font-weight: 700;
  }
  .nav-movil__provincia-texto span {
    color: var(--color-texto-terciario);
    font-size: 0.8rem;
  }
  .nav-movil__provincia-flecha {
    margin-left: auto;
    color: var(--avera-verde-500);
    font-size: 1.15rem;
    transition: transform 160ms ease;
  }
  .nav-movil__provincia:hover .nav-movil__provincia-flecha { transform: translateX(4px); }

  /* Tira de contacto: los cuatro canales a un toque, antes del CTA. */
  .nav-movil__contacto {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 16px 14px;
    padding: 0;
  }
  .nav-movil__contacto a {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 11px 4px 9px;
    border: 1px solid var(--avera-verde-100);
    border-radius: 15px;
    background: rgb(255 255 255 / 0.72);
    color: var(--avera-verde-800);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    /* El body lleva overflow-wrap:anywhere en móvil; acá partiría "WhatsApp". */
    overflow-wrap: normal;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .nav-movil__contacto a:hover {
    border-color: var(--avera-verde-200);
    background: #fff;
    color: var(--avera-verde-900);
  }
  .nav-movil__contacto svg { display: block; }

  /* CTA doble: afiliarse (primario) y portal de afiliados (secundario). */
  .nav-movil__cta { display: grid; gap: 9px; }
  .nav-movil__acceso {
    min-height: 50px;
    background: rgb(255 255 255 / 0.85);
    gap: 9px;
  }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  body { line-height: 1.62; overflow-wrap: anywhere; }
  .contenedor { width: 100%; padding-inline: 18px; }
  .seccion { padding-block: 54px; }
  .encabezado-seccion { margin-bottom: 32px; }
  .encabezado-seccion .texto-secundario { max-width: 52ch; }
  .num-seccion { margin-bottom: 14px; }

  .display { line-height: 1.02; }
  h2 { line-height: 1.16; }
  .lead { line-height: 1.55; }
  .eyebrow { margin-bottom: 10px; }

  .btn {
    width: 100%;
    min-height: 54px;
    padding: 13px 22px;
  }

  /* Primer pantallazo compacto: mensaje, acción e imagen sin scroll excesivo. */
  .hero::before { width: 190px; height: 150px; opacity: 0.38; }
  .hero__inner { padding-block: 38px 46px; gap: 38px; }
  .hero__texto { text-align: left; }
  .hero .display { max-width: 12ch; font-size: clamp(2.35rem, 11.5vw, 3.25rem); }
  .hero .lead { font-size: 1.05rem; }
  .hero__ctas { margin-top: 22px; gap: 11px; }
  .hero__olas { height: 32%; opacity: 0.78; }
  .hero-slider { width: calc(100% - 14px); max-width: 410px; }
  .hero-slider .carrusel__pista { aspect-ratio: 4 / 3; }
  .hero-slider .carrusel__slide img { object-position: center 35%; }
  .hero-slider::before { inset: -10px 8px 12px -10px; border-radius: 26px; }

  /* Valores legibles de un vistazo y sin grandes huecos verticales. */
  .valores { gap: 10px; }
  .valor {
    padding: 18px;
    border: 1px solid var(--avera-verde-100);
    background: rgb(255 255 255 / 0.82);
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    text-align: left;
  }
  .valor__icono { width: 56px; height: 56px; grid-row: span 2; margin: 0; }
  .valor h3 { margin: 2px 0 3px; }
  .valor p { line-height: 1.45; }

  .planes-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .plan-card { min-width: 0; border-radius: 22px; }
  .plan-card:hover { transform: none; }
  .plan-card__foto { aspect-ratio: 16 / 10; }

  .stats-historia { gap: 30px; }
  .historia__foto { width: 100%; max-width: none; aspect-ratio: 4 / 3; }
  .stats--fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stats--fila .stat {
    padding: 13px;
    border: 1px solid var(--avera-verde-100);
    border-radius: 16px;
    background: #fff;
  }
  .stats--fila .stat:last-child { grid-column: 1 / -1; }
  .stats--fila .stat__numero { font-size: 1.9rem; }
  .stats--fila .stat p { font-size: 0.86rem; line-height: 1.35; }

  .seccion--celeste,
  .banda-app,
  .banda-esencia,
  .cta-cierre {
    width: calc(100% - 16px);
    border-radius: 24px;
    margin-block: 30px;
  }

  .banda-app { padding-block: 40px; }
  .banda-app__grid { gap: 24px; }
  .banda-app__lista { justify-items: stretch; gap: 12px; }
  .banda-app__lista li { font-size: 0.96rem; }
  .banda-app__tiendas { gap: 10px; }
  .banda-app__tiendas img { height: 46px; }
  .banda-app__telefono { width: min(340px, 94vw); margin-bottom: -40px; }

  .banda-esencia { padding-block: 48px; }
  .carrusel { padding-inline: 5px; }
  .carrusel__slide blockquote { font-size: 1.15rem; line-height: 1.42; }

  .pasos { gap: 16px; }
  .paso { padding: 20px 18px; }
  .cta-cierre { margin-bottom: 48px; }
  .cta-cierre__contenido { padding-inline: 2px; }

  .buscador-form { gap: 10px; }
  .input-busqueda { width: 100%; min-width: 0; min-height: 54px; }
  .chips { gap: 8px; }
  .chip { min-height: 42px; }
  .prestador { padding: 20px 18px; }

  .bloque-alt { padding: 24px 20px; border-radius: 20px; }
  .tabla-envoltura { border-radius: 14px; }
  .mapa-marco iframe { height: 300px; }
  .contacto-grid { gap: 30px; }

  .footer { padding-block: 48px 28px; }
  .footer__grid { gap: 30px; }
  .footer__legal { align-items: flex-start; text-align: left; }

  .wa-flotante {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
  }
  .faq-flotante {
    left: 16px;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .faq-panel {
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 120px);
  }
}

/* Debajo de 480px el CTA de la barra queda solo con el ícono de WhatsApp
   (con texto, la fila marca + CTA + hamburguesa no entra hasta ~460px). */
@media (max-width: 480px) {
  .navbar__inner { gap: 10px; }
  .navbar__hamburguesa { margin-left: 2px; }
  .navbar__cta-movil { padding: 0 12px; }
  .navbar__cta-movil-texto { display: none; }
}

@media (max-width: 360px) {
  .contenedor { padding-inline: 14px; }
  .hero .display { font-size: 2.25rem; }
  .nav-movil__links a { min-height: 54px; font-size: 1.24rem; }
  .nav-movil__contacto a { font-size: 0.66rem; }
  .nav-movil__intro { margin-top: 18px; }
  .faq-panel { width: calc(100vw - 24px); }
  .plan-card { padding-inline: 18px; }
  .plan-card__foto { margin-inline: -18px; }
}

/* ---------- 27. Correcciones de encuadre ---------- */
/* El SVG se extiende fuera del hero: sus extremos rectos quedan ocultos y
   solamente se ve la curva orgánica. */
.hero__olas {
  left: -6%;
  right: auto;
  width: 112%;
  height: 58%;
}

/* Las tarjetas de la página de detalle no tienen fotografía superior. */
.plan-card--detalle {
  padding-top: 34px;
}

.plan-card--detalle .plan-card__badges {
  position: relative;
  z-index: 3;
}

@media (max-width: 960px) {
  .hero__olas {
    left: -10%;
    width: 120%;
    height: 44%;
  }
  .hero__texto {
    margin-inline: auto;
    text-align: center;
  }
  .hero .display,
  .hero .lead { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
}

@media (max-width: 640px) {
  .hero__olas {
    left: -18%;
    width: 136%;
    height: 30%;
  }
  .hero__texto { margin-inline: 0; text-align: left; }
  .hero .display,
  .hero .lead { margin-inline: 0; }
  .plan-card--detalle { padding-top: 26px; }
}

/* ---------- 28. Hero equilibrado ---------- */
.hero__inner {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "foto texto";
  min-height: 650px;
  gap: clamp(52px, 7vw, 94px);
}

.hero__texto {
  grid-area: texto;
  align-self: center;
}

.hero__fotos {
  grid-area: foto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 26px;
}

.hero-slider {
  width: min(100%, 430px);
  max-width: 430px;
  transform: none;
  filter: drop-shadow(0 28px 38px rgb(47 87 22 / 0.17));
  animation-name: heroFotoEntra;
}

@keyframes heroFotoEntra {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.hero-slider::before {
  inset: -20px -16px 16px -22px;
  border-radius: 50%;
  transform: rotate(-5deg);
  background: linear-gradient(145deg, var(--avera-amarillo-100), var(--avera-amarillo-300));
}

.hero-slider .carrusel__pista {
  aspect-ratio: 1;
  border-width: 9px;
  border-radius: 50%;
}

.hero-slider .carrusel__slide img { object-position: center 32%; }
.hero-slider .carrusel__slide:nth-child(1) img { object-position: 50% 36%; }
.hero-slider .carrusel__slide:nth-child(2) img { object-position: 50% 38%; }
.hero-slider .carrusel__slide:nth-child(3) img { object-position: 50% 42%; }
.hero-slider .carrusel__slide:nth-child(4) img { object-position: 50% 34%; }

.hero-slider .carrusel__slide.activo img {
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(.2,.65,.3,1);
}

.hero__olas {
  height: 42%;
  opacity: 0.7;
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "texto" "foto";
    min-height: auto;
    gap: 42px;
  }
  .hero__fotos { padding: 20px; }
  .hero-slider {
    width: min(390px, calc(100% - 28px));
    animation-name: sliderEntraPlano;
  }
  .hero__olas { height: 35%; }
}

@media (max-width: 640px) {
  .hero__inner { gap: 34px; }
  .hero__fotos { padding: 12px 8px 18px; }
  .hero-slider { width: calc(100% - 20px); max-width: 380px; }
  .hero-slider::before { inset: -10px 8px 12px -10px; border-radius: 26px; transform: rotate(-2deg); }
  .hero-slider .carrusel__pista {
    aspect-ratio: 4 / 3;
    border-width: 5px;
    border-radius: 24px;
  }
  .hero-slider .carrusel__slide:nth-child(1) img { object-position: 50% 37%; }
  .hero-slider .carrusel__slide:nth-child(2) img { object-position: 50% 40%; }
  .hero-slider .carrusel__slide:nth-child(3) img { object-position: 50% 46%; }
  .hero-slider .carrusel__slide:nth-child(4) img { object-position: 50% 36%; }
  .hero__olas { height: 24%; opacity: 0.58; }
}

/* ========================================================================== 
   29. Dirección de arte institucional
   Acabado sobrio, jerarquía consistente y menor carga decorativa.
   ========================================================================== */
:root {
  --superficie-verde: #F7FBF4;
  --borde-verde-suave: #DCEBD3;
  --sombra-reposo: 0 12px 34px rgb(29 63 13 / 0.08);
  --sombra-hover: 0 22px 54px rgb(29 63 13 / 0.14);
}

body { color: #172016; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* (El navbar completo está consolidado en la sección 6; acá solo queda el hero.) */

/* Hero: dos protagonistas claros, foto y propuesta de valor. */
.hero {
  background:
    radial-gradient(560px 400px at 8% 18%, rgb(249 180 40 / 0.09), transparent 70%),
    radial-gradient(680px 440px at 94% 6%, rgb(121 207 64 / 0.10), transparent 72%),
    linear-gradient(150deg, #fff 0%, #fbfdf9 58%, var(--superficie-verde) 100%);
}
.hero::before {
  width: 290px;
  height: 230px;
  opacity: 0.28;
  background-size: 24px 24px;
}
.hero__inner {
  min-height: 660px;
  padding-block: 70px 82px;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(62px, 7vw, 104px);
}
.hero__texto { max-width: 650px; }
.hero .eyebrow { margin-bottom: 16px; font-size: 0.76rem; }
.hero .display {
  max-width: 11.5ch;
  margin-bottom: 22px;
  font-size: clamp(3.15rem, 4.4vw, 4.65rem);
  line-height: 0.98;
}
.hero .lead {
  max-width: 42ch;
  margin-bottom: 0;
  color: #536052;
  font-size: 1.16rem;
}
.hero__ctas { margin-top: 30px; gap: 12px; }
.hero__ctas .btn { min-width: 180px; }

.hero__confianza {
  margin: 25px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--borde-verde-suave);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  color: #52604f;
  font-size: 0.84rem;
  font-weight: 700;
}
.hero__confianza li { display: inline-flex; align-items: center; gap: 7px; }
.hero__confianza span {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--avera-verde-100);
  color: var(--avera-verde-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.hero__fotos { padding: 30px; }
.hero-slider { width: min(100%, 440px); max-width: 440px; }
.hero-slider::before {
  inset: -16px -18px 18px -18px;
  background: var(--avera-amarillo-200);
  opacity: 0.72;
  transform: rotate(-4deg);
}
.hero-slider .carrusel__pista {
  border: 10px solid #fff;
  box-shadow: 0 28px 70px rgb(29 63 13 / 0.16);
}
.hero-slider .carrusel__punto { width: 8px; height: 8px; }

.hero__olas {
  left: -4%;
  width: 108%;
  height: 44%;
  opacity: 1;
}
.hero__olas path.hero__ola--suave { fill: #EDF7E7; }
.hero__olas path.hero__ola--marca { fill: #D7EFC8; opacity: 0.78; }

/* Secciones: superficies limpias y ritmo constante. */
.seccion--alt {
  background: linear-gradient(180deg, #fff, var(--superficie-verde));
}
.seccion--alt::before,
.seccion--alt::after,
.seccion--celeste::before,
.seccion--celeste::after,
#afiliate::before { display: none; }

.encabezado-seccion { max-width: 700px; }
.encabezado-seccion h2 { margin-bottom: 14px; }
.encabezado-seccion .texto-secundario { line-height: 1.68; }
.num-seccion { color: var(--avera-verde-700) !important; font-size: 0.92rem; letter-spacing: 0.08em; }
.num-seccion::after { background: var(--borde-verde-suave); }

.valores { gap: 20px; }
.valor {
  border: 1px solid var(--borde-verde-suave);
  background: #fff;
  box-shadow: 0 8px 28px rgb(29 63 13 / 0.05);
}
.valor:hover { background: #fff; box-shadow: var(--sombra-reposo); }
.valor h3 { color: var(--avera-verde-900); }


/* Planes: estructura uniforme y llamados claros. */
#planes { background: #fff; }
.planes-grid { gap: 28px; }
.plan-card {
  border-color: var(--borde-verde-suave);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgb(29 63 13 / 0.07);
}
.plan-card::before { height: 4px; }
.plan-card:hover { transform: translateY(-6px); }
.plan-card h2,
.plan-card h3 { color: var(--avera-verde-900); }
.plan-card__sub { color: #687367; }
.plan-card__foto { aspect-ratio: 16 / 9; }
.plan-card__foto img { object-position: center 32%; }
.plan-card__pie .enlace-flecha {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: var(--avera-verde-800);
}
.plan-card--detalle { padding-top: 38px; }
.plan-card--detalle .plan-card__badges { margin-bottom: 20px; }

/* Estadísticas e historia con lectura más editorial. */
.stats-historia { gap: clamp(42px, 6vw, 72px); }
.historia__foto { border-radius: 28px; box-shadow: var(--sombra-reposo); }
.stats--fila { gap: 14px; }
.stats--fila .stat {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--borde-verde-suave);
  border-radius: 17px;
  background: #fff;
}
.stats--fila .stat__numero { font-size: 2rem; }
.stats--fila .stat p { font-size: 0.82rem; line-height: 1.35; }

/* Bandas de alto contraste: mismo lenguaje, menos efectos. */
.banda-app,
.banda-esencia,
.cta-cierre {
  border-radius: 36px;
  box-shadow: 0 24px 65px rgb(29 63 13 / 0.13);
}
.banda-app {
  background:
    radial-gradient(620px 440px at 90% 58%, rgb(121 207 64 / 0.22), transparent 68%),
    linear-gradient(120deg, #18330f, #315d1e 70%, #477d29);
}
.banda-app::before { opacity: 0.38; }
.banda-app__cuadros { opacity: 0.45; }
.banda-app__icono { border-radius: 50%; }
.banda-esencia {
  background-image:
    linear-gradient(135deg, rgb(15 31 10 / 0.96), rgb(31 62 20 / 0.87)),
    url("../images/landscapes/quebrada-salta.jpg");
}
.cta-cierre {
  background:
    radial-gradient(620px 350px at 90% 120%, rgb(121 207 64 / 0.24), transparent 68%),
    #142b0e;
}

.seccion--celeste {
  border-color: var(--borde-verde-suave);
  border-radius: 36px;
  background: #f8fcf5;
}
.input-busqueda { border-width: 1.5px; border-color: #BFD8B2; box-shadow: 0 8px 24px rgb(29 63 13 / 0.05); }
.chip { border-color: #C8DFBC; }

#afiliate {
  background: linear-gradient(180deg, #fff, #FFFBF1);
}
.paso__numero { box-shadow: 0 7px 18px rgb(139 101 22 / 0.13); }

.footer { background: #090B0A; }
.footer__grid { gap: 38px; }
.footer h4 { color: #fff; }
.footer a { transition: color 160ms ease, opacity 160ms ease; }

/* Botones y controles con respuesta discreta. */
.btn { letter-spacing: 0; }
.btn--primario { background: var(--avera-verde-700); }
.btn--primario:hover { background: var(--avera-verde-800); }
.wa-flotante { box-shadow: 0 12px 28px rgb(0 0 0 / 0.22); }
.faq-flotante__boton { background: var(--avera-verde-800); }

@media (max-width: 960px) {
  .hero__inner { padding-block: 58px 70px; }
  .hero__texto { max-width: 690px; }
  .hero .display { max-width: 12ch; }
  .hero__olas { height: 30%; }
  .hero__confianza { justify-content: center; }
}

@media (max-width: 640px) {
  .navbar__inner { min-height: 64px; }
  .navbar--compacta .navbar__inner { min-height: 58px; }
  .navbar__logo img { height: 38px; }
  .navbar--compacta .navbar__logo img { height: 34px; }
  .navbar__marca { gap: 7px; }
  .navbar__sede { padding: 4px 6px 4px 8px; font-size: 0.64rem; }
  .navbar__cta-movil { min-height: 44px; padding: 0 13px; font-size: 0.9rem; }
  .navbar__hamburguesa { width: 44px; height: 44px; }
  .hero__inner { padding-block: 42px 52px; }
  .hero .display { margin-bottom: 18px; font-size: clamp(2.42rem, 11.2vw, 3.15rem); }
  .hero .lead { font-size: 1rem; }
  .hero__confianza {
    justify-content: flex-start;
    gap: 9px 14px;
    padding-top: 17px;
  }
  .hero__fotos { padding-inline: 4px; }
  .hero__olas { height: 18%; opacity: 0.75; }
  .valor { box-shadow: none; }
  .plan-card { border-radius: 20px; box-shadow: 0 9px 28px rgb(29 63 13 / 0.07); }
  .plan-card--detalle { padding-top: 28px; }
  .banda-app,
  .banda-esencia,
  .cta-cierre,
  .seccion--celeste { border-radius: 22px; }
  .banda-app__cuadros { display: none; }
  .stats--fila .stat { padding: 14px; }
}

/* ---------- 30. Hero sin ondas: aurora y órbita de marca ---------- */
.hero__olas { display: none; }

.hero {
  border-bottom: 1px solid #E6EEE1;
  background:
    linear-gradient(90deg, rgb(248 252 245 / 0.08) 0%, rgb(255 255 255 / 0.16) 44%, rgb(255 255 255 / 0.46) 76%, rgb(255 255 255 / 0.62) 100%),
    url("../images/backgrounds/hero-texture-small-v2.png?v=3") calc(50% + 20.5vw - 342px) calc(50% + 18px) / calc(100% + 220px) auto no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 590px;
  height: 590px;
  left: -180px;
  top: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(121 207 64 / 0.17) 0%, rgb(121 207 64 / 0.07) 42%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  display: none;
}

@keyframes heroLuzAmbiental {
  from { transform: translate3d(-12px, 5px, 0) scale(0.96); opacity: 0.72; }
  to { transform: translate3d(24px, -12px, 0) scale(1.06); opacity: 1; }
}

.hero::before {
  top: 24px;
  left: auto;
  right: 18px;
  width: 250px;
  height: 200px;
  background-image: radial-gradient(rgb(69 130 32 / 0.25) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
  opacity: 0.36;
}

.hero__fotos { isolation: isolate; }
.hero__fotos::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(470px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 15deg,
    transparent 0deg 36deg,
    rgb(121 207 64 / 0.92) 52deg 96deg,
    transparent 112deg 154deg,
    rgb(57 164 218 / 0.88) 168deg 210deg,
    transparent 224deg 260deg,
    rgb(194 52 136 / 0.86) 274deg 306deg,
    rgb(249 180 40 / 0.92) 318deg 346deg,
    transparent 356deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  filter: drop-shadow(0 0 7px rgb(121 207 64 / 0.18));
  animation: orbitaMarca 26s linear infinite;
  pointer-events: none;
}

.hero__fotos::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: min(500px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.96), rgb(241 244 247 / 0.94));
  box-shadow: 0 24px 46px rgb(28 46 24 / 0.14);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes orbitaMarca { to { transform: rotate(360deg); } }
@keyframes haloRespira {
  from { transform: scale(0.94); opacity: 0.58; }
  to { transform: scale(1.08); opacity: 0.95; }
}

.hero-slider::before {
  background: linear-gradient(145deg, #FFF5D7, #F9D883);
  opacity: 0.58;
  animation: placaFlota 12s ease-in-out infinite alternate;
}

@keyframes placaFlota {
  from { transform: rotate(-4deg) translate3d(0, 0, 0); }
  to { transform: rotate(-2deg) translate3d(5px, -7px, 0); }
}

@media (max-width: 960px) {
  .hero::after { width: 460px; height: 460px; left: 50%; top: auto; bottom: -90px; margin-left: -230px; }
  .hero__fotos::before { width: min(420px, 88%); }
  .hero::before { width: 190px; height: 150px; }
  .hero {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.58) 0%, rgb(255 255 255 / 0.34) 48%, rgb(248 252 245 / 0.18) 100%),
      url("../images/backgrounds/hero-texture-small-v2.png?v=3") center 64% / cover no-repeat;
  }
}

@media (max-width: 640px) {
  .hero::after { width: 330px; height: 330px; left: 50%; right: auto; top: auto; bottom: -55px; margin-left: -165px; opacity: 0.7; }
  .hero::before { right: -20px; width: 140px; height: 120px; opacity: 0.25; }
  .hero__fotos::before,
  .hero__fotos::after { display: none; }
  .hero-slider::before { animation-duration: 14s; }
  .hero {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.66) 0%, rgb(255 255 255 / 0.48) 48%, rgb(248 252 245 / 0.24) 100%),
      url("../images/backgrounds/hero-texture-small-v2.png?v=3") 42% 64% / cover no-repeat;
  }
}

/* Este override debe permanecer al final: evita que la grilla desktop de la
   banda app vuelva a comprimir el contenido en tablet y celular. */
@media (max-width: 960px) {
  .banda-app .banda-app__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .banda-app .banda-app__texto,
  .banda-app .banda-app__telefono { min-width: 0; }
  .banda-app .banda-app__telefono {
    width: min(410px, 88vw);
    max-width: 100%;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .banda-app .banda-app__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    text-align: center;
  }
  .banda-app .banda-app__texto {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .banda-app .banda-app__lista,
  .banda-app .banda-app__tiendas { width: 100%; }
  .banda-app .banda-app__telefono {
    width: min(330px, 86vw);
    margin: 0 auto;
  }
}

/* Estructura mobile-first definitiva para la banda de la app. */
.banda-app .banda-app__grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 32px;
}
.banda-app .banda-app__texto {
  width: 100%;
  min-width: 0;
}
.banda-app .banda-app__telefono {
  flex: none;
  width: min(410px, 88vw);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  justify-self: auto;
}

@media (min-width: 961px) {
  .banda-app .banda-app__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 48px;
  }
  .banda-app .banda-app__telefono {
    width: min(520px, 112%);
    max-width: none;
    margin-inline: 0;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .banda-app .banda-app__grid { gap: 24px; }
  .banda-app .banda-app__texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .banda-app .banda-app__telefono {
    width: min(330px, calc(100vw - 60px));
    margin: 0 auto;
  }
}

/* Fondos interactivos de la portada provincial. */
.portada__fondos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.portada__fondo {
  position: absolute;
  inset: -2%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.065);
  filter: saturate(1.08) contrast(1.03);
  transition:
    opacity 650ms ease,
    transform 1500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

/* Las fotos se cargan solo donde el preview al pasar el mouse existe:
   en pantallas táctiles se toca la tarjeta y se navega, nunca se ven. */
/* El ?v= es obligatorio: los nombres de archivo no cambian entre versiones y
   el servidor manda max-age=604800, así que sin él los navegadores que ya
   visitaron el sitio seguirían mostrando la foto anterior durante 7 días. */
@media (hover: hover) and (pointer: fine) {
  .portada__fondo--san-juan {
    background-image: url("../images/landscapes/san-juan.jpg?v=2");
    background-image: image-set(
      url("../images/landscapes/san-juan.webp?v=2") type("image/webp"),
      url("../images/landscapes/san-juan.jpg?v=2") type("image/jpeg"));
  }

  .portada__fondo--salta {
    background-image: url("../images/landscapes/salta.jpg?v=2");
    background-image: image-set(
      url("../images/landscapes/salta.webp?v=2") type("image/webp"),
      url("../images/landscapes/salta.jpg?v=2") type("image/jpeg"));
  }
}

.portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(7 21 10 / 0.24), rgb(7 21 10 / 0.64)),
    linear-gradient(90deg, rgb(10 31 14 / 0.18), transparent 45%, rgb(10 31 14 / 0.18));
  opacity: 0;
  transition: opacity 500ms ease;
}

.portada--san-juan .portada__fondo--san-juan,
.portada--salta .portada__fondo--salta,
.portada--mendoza .portada__fondo--mendoza {
  opacity: 1;
  transform: scale(1);
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__velo {
  opacity: 1;
}

.portada__blobs,
.portada::before,
.portada::after {
  transition: opacity 400ms ease;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__blobs,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza)::before,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza)::after {
  opacity: 0;
}

.portada .display,
.portada .eyebrow,
.portada .lead,
.portada__pie,
.portada__logo {
  transition:
    color 350ms ease,
    filter 350ms ease,
    text-shadow 350ms ease;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .display,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .eyebrow,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .lead,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__pie {
  color: #fff;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.42);
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__logo {
  filter: drop-shadow(0 5px 14px rgb(0 0 0 / 0.32));
}

.provincia {
  transition:
    box-shadow 300ms ease,
    transform 300ms ease,
    border-color 300ms ease,
    opacity 300ms ease;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) {
  opacity: 0.84;
}

.provincia--activa {
  transform: translateY(-10px) scale(1.025);
  border-color: rgb(255 255 255 / 0.9);
  box-shadow: 0 24px 60px rgb(3 18 7 / 0.34);
}

/* (El encuadre en ventana angosta se define junto al resto del bloque ≤760px.) */

/* Portada provincial premium: fotografía limpia, identidad legible y CTA claros. */
.portada__fondo {
  inset: 0;
  transform: scale(1.012);
  filter: none;
  transition:
    opacity 560ms ease,
    transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Salta es panorámica 2:1 (el alto manda en casi todo monitor, así que el
   recorte es horizontal); San Juan es 16:9 y se sube un poco para privilegiar
   la montaña y el cielo por sobre el viñedo oscuro del primer plano. */
.portada__fondo--salta { background-position: center center; }
.portada__fondo--san-juan { background-position: center 44%; }
.portada__fondo--mendoza { background-position: center 45%; }

.portada--san-juan .portada__fondo--san-juan,
.portada--salta .portada__fondo--salta,
.portada--mendoza .portada__fondo--mendoza {
  transform: scale(1);
}

.portada__velo {
  background:
    linear-gradient(180deg, rgb(5 20 8 / 0.12), rgb(5 20 8 / 0.4)),
    linear-gradient(90deg, rgb(5 20 8 / 0.18), transparent 38%, transparent 62%, rgb(5 20 8 / 0.18));
}

.portada__centro {
  width: 100%;
  padding: 40px 24px 28px;
}

.portada__identidad {
  position: relative;
  width: min(760px, 100%);
  padding: 28px 48px 30px;
  border: 1px solid rgb(255 255 255 / 0.86);
  border-radius: 36px;
  background: rgb(255 255 255 / 0.82);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 30px 80px rgb(25 56 17 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
  transition:
    background-color 400ms ease,
    box-shadow 400ms ease,
    transform 400ms ease;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad {
  background: rgb(255 255 255 / 0.93);
  box-shadow:
    0 1px 0 #fff inset,
    0 32px 90px rgb(4 18 7 / 0.3);
  transform: translateY(-2px);
}

.portada__identidad .portada__logo {
  display: block;
  height: 68px;
  margin: 0 auto 16px;
  filter: none;
}

.portada__identidad .eyebrow {
  margin-bottom: 8px;
  color: var(--avera-verde-700);
}

.portada__identidad .display {
  margin-bottom: 12px;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 0.92;
  color: var(--color-texto);
}

.portada__identidad .lead {
  margin-bottom: 0;
  color: var(--color-texto-secundario);
  font-size: 1.08rem;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .eyebrow,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .lead {
  text-shadow: none;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display {
  color: var(--color-texto);
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .eyebrow {
  color: var(--avera-verde-700);
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .lead {
  color: var(--color-texto-secundario);
}

/* auto-fit y no un número fijo de columnas: con tres sedes, entre ~760px y
   ~1080px no entran las tres en fila y la tercera baja sola, centrada. Fijar
   `repeat(3, ...)` desbordaba la pantalla en ese rango. */
.provincias.provincias--sedes {
  grid-template-columns: repeat(auto-fit, minmax(272px, 340px));
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.provincias--sedes .provincia {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 18px 18px;
  border: 1px solid rgb(255 255 255 / 0.94);
  border-radius: 25px;
  background: rgb(255 255 255 / 0.94);
  box-shadow:
    0 1px 0 #fff inset,
    0 15px 40px rgb(8 40 14 / 0.15);
  text-align: left;
  overflow: hidden;
}

.provincias--sedes .provincia::before {
  inset: 0 auto 0 0;
  width: 5px;
  height: auto;
  background: var(--avera-verde-500);
}

.provincias--sedes .provincia:nth-child(2)::before {
  background: var(--avera-amarillo-500);
}

.provincia__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: var(--avera-verde-700) !important;
  background: linear-gradient(145deg, var(--avera-verde-100), #fff);
  box-shadow: 0 8px 20px rgb(68 130 32 / 0.13);
}

.provincia:nth-child(2) .provincia__icono {
  color: #a86b00 !important;
  background: linear-gradient(145deg, var(--avera-amarillo-100), #fff);
}

.provincia__icono svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.provincia__contenido {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.provincia__contenido strong {
  color: var(--color-texto);
  font-size: 1.35rem;
  line-height: 1.1;
}

.provincia .provincia__direccion {
  color: var(--color-texto-terciario);
  font-size: 0.82rem;
  /* Sin nowrap: en 320px la dirección desbordaba la tarjeta. */
  line-height: 1.3;
}

/* Etiqueta de estado de la sede (San Juan todavía no tiene sitio propio). */
.provincia__estado {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--avera-amarillo-100);
  color: #7a5200;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Provincia elegida en una visita anterior: se destaca, no se fuerza. */
.provincia__recordada {
  display: none;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--avera-verde-100);
  color: var(--avera-verde-800);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.provincia--recordada .provincia__recordada { display: inline-flex; }
.provincia--recordada {
  border-color: var(--avera-verde-500) !important;
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 2px rgb(121 207 64 / 0.34),
    0 18px 44px rgb(8 40 14 / 0.18);
}

.provincia .enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 13px;
  border-radius: 999px;
  color: #fff;
  background: var(--avera-verde-700);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(51 108 25 / 0.22);
  transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}

.provincia:nth-child(2) .enlace-flecha {
  color: #3e2d02;
  background: var(--avera-amarillo-500);
  box-shadow: 0 8px 18px rgb(196 130 0 / 0.2);
}

.provincia .enlace-flecha svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  transition: transform 250ms ease;
}

.provincia:hover .enlace-flecha,
.provincia:focus-visible .enlace-flecha {
  color: #fff;
  background: var(--avera-verde-800);
  transform: translateX(2px);
  box-shadow: 0 10px 24px rgb(51 108 25 / 0.3);
}

.provincia:nth-child(2):hover .enlace-flecha,
.provincia:nth-child(2):focus-visible .enlace-flecha {
  color: #2f2302;
  background: var(--avera-amarillo-400);
}

.provincia:hover .enlace-flecha svg,
.provincia:focus-visible .enlace-flecha svg {
  transform: translateX(2px);
}

.provincia:focus-visible {
  outline: 3px solid rgb(121 207 64 / 0.72);
  outline-offset: 4px;
}

.provincia--activa {
  transform: translateY(-7px) scale(1.012);
  border-color: #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 24px 55px rgb(3 18 7 / 0.3);
}

@media (max-width: 760px) {
  .portada__centro { padding: 24px 16px 20px; }
  .portada__identidad {
    padding: 22px 20px 24px;
    border-radius: 28px;
  }
  .portada__identidad .portada__logo {
    height: 55px;
    margin-bottom: 12px;
  }
  .portada__identidad .display {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
    line-height: 0.94;
  }
  .portada__identidad .lead { font-size: 1rem; }
  .provincias.provincias--sedes {
    width: min(100%, 520px);
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
  }
  .provincias--sedes .provincia {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    min-height: 94px;
    padding: 14px;
    border-radius: 21px;
  }
  .provincia__icono {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  .provincia__contenido strong { font-size: 1.18rem; }
  .provincia .enlace-flecha {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .provincia .enlace-flecha svg { width: 18px; height: 18px; }

  /* Ventana angosta con mouse: el recorte lateral es enorme, así que se centra
     en el sujeto (el pico iluminado en Salta, la montaña en San Juan). */
  .portada__fondo--salta { background-position: 54% center; }
  .portada__fondo--san-juan { background-position: 42% center; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .portada__centro { padding-block: 22px 16px; }
  .portada__identidad { padding-block: 20px 22px; }
  .portada__identidad .portada__logo { height: 55px; margin-bottom: 10px; }
  .portada__identidad .display { font-size: clamp(2.3rem, 4.2vw, 3.5rem); }
  .provincias.provincias--sedes { margin-top: 16px; }
}

/* Refinamiento visual del selector: identidad integrada y acciones sobrias. */
.portada__identidad,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad {
  isolation: isolate;
  padding: 14px 42px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

.portada__identidad::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -90px -28px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 0.98) 0%,
    rgb(255 255 255 / 0.9) 46%,
    rgb(255 255 255 / 0.55) 63%,
    rgb(255 255 255 / 0) 79%
  );
  pointer-events: none;
  transition: opacity 400ms ease;
}

.portada__identidad .portada__logo {
  height: 62px;
  margin-bottom: 12px;
}

.portada__identidad .display {
  font-size: clamp(2.4rem, 4.5vw, 3.95rem);
  line-height: 0.95;
}

.provincias.provincias--sedes {
  gap: 16px;
  margin-top: 18px;
}

.provincias--sedes .provincia {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 104px;
  padding: 17px 18px;
  border: 1px solid rgb(255 255 255 / 0.82);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.88);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 12px 34px rgb(10 35 15 / 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
  backdrop-filter: blur(12px) saturate(1.06);
}

.provincias--sedes .provincia::before {
  display: none;
}

.provincia__icono,
.provincia:nth-child(2) .provincia__icono {
  width: 48px;
  height: 48px;
  border: 1px solid rgb(69 130 32 / 0.12);
  border-radius: 16px;
  color: var(--avera-verde-700) !important;
  background: rgb(244 251 240 / 0.92);
  box-shadow: none;
}

.provincia .enlace-flecha,
.provincia:nth-child(2) .enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 0 7px 14px;
  border-left: 1px solid rgb(69 130 32 / 0.18);
  border-radius: 0;
  color: var(--avera-verde-800);
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.provincia .enlace-flecha::after {
  content: none;
  display: none;
}

.provincia .enlace-flecha svg {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 50%;
  color: #fff;
  background: var(--avera-verde-700);
  stroke: currentColor;
  box-shadow: 0 7px 16px rgb(51 108 25 / 0.2);
}

.provincia:hover .enlace-flecha,
.provincia:focus-visible .enlace-flecha,
.provincia:nth-child(2):hover .enlace-flecha,
.provincia:nth-child(2):focus-visible .enlace-flecha {
  color: var(--avera-verde-900);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  transform: none;
}

.provincia:hover .enlace-flecha svg,
.provincia:focus-visible .enlace-flecha svg {
  background: var(--avera-verde-800);
  box-shadow: 0 9px 20px rgb(51 108 25 / 0.28);
  transform: translateX(3px);
}

.provincia--activa {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 #fff inset,
    0 20px 46px rgb(3 18 7 / 0.22);
}

@media (max-width: 760px) {
  .portada__identidad,
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad {
    padding: 8px 14px 14px;
  }
  .portada__identidad::before {
    inset: -20px -28px -18px;
    background: radial-gradient(
      ellipse at center,
      rgb(255 255 255 / 0.98) 0%,
      rgb(255 255 255 / 0.88) 52%,
      rgb(255 255 255 / 0) 82%
    );
  }
  .portada__identidad .portada__logo { height: 52px; }
  .portada__identidad .display {
    font-size: clamp(2.05rem, 9.4vw, 3rem);
  }
  .provincias--sedes .provincia {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 88px;
    padding: 13px 14px;
  }
  .provincia__icono,
  .provincia:nth-child(2) .provincia__icono {
    width: 44px;
    height: 44px;
  }
  .provincia .enlace-flecha,
  .provincia:nth-child(2) .enlace-flecha {
    width: auto;
    height: auto;
    padding: 5px 0 5px 10px;
    font-size: 0;
  }
  .provincia .enlace-flecha svg {
    width: 34px;
    height: 34px;
    padding: 9px;
  }
}

/* Fondo fotográfico integrado: sin óvalos ni placas detrás de la identidad. */
.portada__identidad::before {
  content: none;
  display: none;
}

.portada__velo {
  background:
    linear-gradient(
      90deg,
      rgb(8 24 11 / 0.18) 0%,
      rgb(255 255 255 / 0.3) 24%,
      rgb(255 255 255 / 0.52) 50%,
      rgb(255 255 255 / 0.3) 76%,
      rgb(8 24 11 / 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.2) 0%,
      rgb(255 255 255 / 0.18) 48%,
      rgb(5 18 8 / 0.42) 100%
    );
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .portada__logo {
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.92))
    drop-shadow(0 5px 14px rgb(255 255 255 / 0.46));
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display {
  text-shadow:
    0 1px 0 rgb(255 255 255 / 0.84),
    0 4px 24px rgb(255 255 255 / 0.6);
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .eyebrow,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .lead {
  text-shadow:
    0 1px 0 rgb(255 255 255 / 0.9),
    0 3px 14px rgb(255 255 255 / 0.72);
}

@media (max-width: 760px) {
  .portada__velo {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.48) 0%, rgb(255 255 255 / 0.26) 58%, rgb(5 18 8 / 0.46) 100%),
      linear-gradient(90deg, rgb(8 24 11 / 0.12), rgb(255 255 255 / 0.28) 50%, rgb(8 24 11 / 0.12));
  }
}

/* El texto multicolor no debe heredar la sombra blanca del título. */
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .texto-gradiente {
  background: linear-gradient(
    90deg,
    var(--avera-verde-600) 0%,
    var(--avera-celeste-600) 26%,
    var(--avera-magenta-600) 51%,
    var(--avera-naranja-600) 76%,
    var(--avera-amarillo-700) 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--avera-verde-600);
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .texto-gradiente {
    background: none;
    color: var(--avera-verde-700);
    -webkit-text-fill-color: currentColor;
  }
}

/* La placa aparece solo al previsualizar una provincia. */
.portada__identidad::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: -22px -36px -20px;
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 32px;
  background: rgb(255 255 255 / 0.94);
  box-shadow:
    0 1px 0 #fff inset,
    0 28px 70px rgb(3 18 7 / 0.25);
  opacity: 0;
  transform: translateY(12px) scale(0.965);
  transform-origin: center 70%;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    transform 480ms cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 480ms ease;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.portada__velo {
  background:
    linear-gradient(180deg, rgb(5 18 8 / 0.08), rgb(5 18 8 / 0.36)),
    linear-gradient(90deg, rgb(5 18 8 / 0.12), transparent 34%, transparent 66%, rgb(5 18 8 / 0.12));
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .portada__logo {
  filter: none;
}

.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .eyebrow,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .lead {
  text-shadow: none;
}

@media (max-width: 760px) {
  .portada__identidad::before {
    inset: -14px -8px -12px;
    border-radius: 25px;
    transform: translateY(8px) scale(0.975);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portada__identidad::before { transition: none; }
}

/* Aire entre la placa de identidad y los accesos provinciales. */
.provincias.provincias--sedes {
  gap: 30px;
  margin-top: 42px;
}

@media (max-width: 760px) {
  .provincias.provincias--sedes {
    gap: 16px;
    margin-top: 30px;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .provincias.provincias--sedes {
    gap: 26px;
    margin-top: 34px;
  }
}

/* ============================================================================
   31. PORTADA — bloque autoritativo
   Rediseño: las dos fotos son el protagonista (partidas en diagonal, y la
   elegida se expande); el texto va en blanco sobre ellas, sin la placa
   blanca que antes tapaba el paisaje. Este bloque va último a propósito:
   gana por orden de cascada a los fragmentos de portada de las secciones
   anteriores, que quedaron superpuestos por pasadas sucesivas.
   ========================================================================== */

/* --- Escenario --- */
.portada { background: #0c1710; }
.portada__blobs,
.portada::before,
.portada::after { display: none; }

/* Las fotos siempre visibles: son el diseño, no un adorno del hover. */
.portada__fondo {
  inset: 0;
  opacity: 1;
  transform: none;
  filter: saturate(1.04);
  transition: clip-path 720ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path;
}

/* Corte diagonal: San Juan a la izquierda, Salta a la derecha. */
.portada__fondo--san-juan { clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); }
.portada__fondo--salta { clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }

/* Al elegir una provincia, su foto ocupa toda la pantalla. */
.portada--san-juan .portada__fondo--san-juan,
.portada--salta .portada__fondo--salta,
.portada--mendoza .portada__fondo--mendoza {
  z-index: 2;
  opacity: 1;
  transform: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Velo permanente: sostiene la legibilidad del texto sobre cualquier foto. */
.portada__velo,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__velo {
  z-index: 4;
  opacity: 1;
  background:
    linear-gradient(180deg, rgb(6 18 11 / 0.62) 0%, rgb(6 18 11 / 0.30) 34%, rgb(6 18 11 / 0.52) 72%, rgb(6 18 11 / 0.78) 100%);
}

/* --- Identidad: sin placa, directo sobre la foto --- */
.portada__centro { position: relative; z-index: 5; padding: 48px 24px 34px; }

.portada .portada__identidad,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad {
  width: min(680px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
.portada__identidad::before { display: none; }

.portada .portada__identidad .portada__logo,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .portada__logo {
  height: 82px;
  margin: 0 auto 22px;
  filter: drop-shadow(0 8px 26px rgb(0 0 0 / 0.5));
}

.portada .portada__identidad .eyebrow,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .eyebrow {
  margin-bottom: 14px;
  color: rgb(255 255 255 / 0.78);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
}

.portada .portada__identidad .display,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display {
  /* El h1 tiene max-width para controlar el corte de línea; sin margen
     automático el bloque queda pegado a la izquierda del contenedor. */
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  text-shadow: 0 3px 26px rgb(0 0 0 / 0.5);
}

.portada .portada__identidad .lead,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .lead {
  color: rgb(255 255 255 / 0.9);
  font-size: 1.05rem;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.55);
}

/* Degradé de marca. Sobre foto oscura se usan los tonos claros de cada color
   (400/500 en vez de 600/700): los originales estaban pensados para la placa
   blanca y acá quedarían apagados. */
.portada .texto-gradiente,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .texto-gradiente {
  background: linear-gradient(
    92deg,
    var(--avera-verde-400) 0%,
    var(--avera-celeste-400) 26%,
    var(--avera-magenta-400) 51%,
    var(--avera-naranja-400) 76%,
    var(--avera-amarillo-400) 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--avera-verde-400);
  -webkit-text-fill-color: transparent;
  /* Con el relleno transparente la sombra de texto se dibujaría por encima
     de las letras: el contraste lo aporta el filtro sobre la caja. */
  text-shadow: none;
  filter: drop-shadow(0 3px 18px rgb(0 0 0 / 0.55));
}

/* Sin animaciones, el degradé se reemplaza por un color plano legible. */
@media (prefers-reduced-motion: reduce) {
  .portada .texto-gradiente,
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .texto-gradiente {
    background: none;
    color: var(--avera-verde-400);
    -webkit-text-fill-color: currentColor;
  }
}

/* --- Tarjetas de provincia sobre la foto --- */
.provincias.provincias--sedes { margin-top: 32px; gap: 20px; }

.provincias--sedes .provincia,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) {
  min-height: 104px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.93);
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.3);
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

.provincia--activa {
  transform: translateY(-8px) scale(1.02);
  border-color: #fff;
  background: #fff;
  box-shadow: 0 26px 62px rgb(0 0 0 / 0.42);
}

.portada .portada__pie,
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__pie {
  position: relative;
  z-index: 5;
  color: rgb(255 255 255 / 0.72);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
}

/* --- Celular: corte horizontal, cada foto detrás de su tarjeta --- */
@media (max-width: 760px) {
  .portada__fondo--san-juan { clip-path: polygon(0 0, 100% 0, 100% 54%, 0 46%); }
  .portada__fondo--salta { clip-path: polygon(0 46%, 100% 54%, 100% 100%, 0 100%); }
  .portada--san-juan .portada__fondo--san-juan,
  .portada--salta .portada__fondo--salta { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .portada__centro { padding: 34px 18px 26px; }
  .portada .portada__identidad .portada__logo,
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .portada__logo { height: 64px; margin-bottom: 16px; }
  .portada .portada__identidad .display,
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .portada__identidad .display { font-size: clamp(1.85rem, 7.4vw, 2.5rem); }
  .provincias.provincias--sedes { margin-top: 24px; gap: 14px; }
}

/* En pantalla táctil no hay hover, así que la foto tiene que estar igual:
   se sirven versiones de 1200px (153 KB las dos) en lugar de las de 2400. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .portada__fondo--san-juan {
    background-image: url("../images/landscapes/san-juan-movil.jpg?v=2");
    background-image: image-set(
      url("../images/landscapes/san-juan-movil.webp?v=2") type("image/webp"),
      url("../images/landscapes/san-juan-movil.jpg?v=2") type("image/jpeg"));
  }
  .portada__fondo--salta {
    background-image: url("../images/landscapes/salta-movil.jpg?v=2");
    background-image: image-set(
      url("../images/landscapes/salta-movil.webp?v=2") type("image/webp"),
      url("../images/landscapes/salta-movil.jpg?v=2") type("image/jpeg"));
  }
  .portada__fondo--mendoza {
    background-image: url("../images/landscapes/mendoza-movil.jpg?v=1");
    background-image: image-set(
      url("../images/landscapes/mendoza-movil.webp?v=1") type("image/webp"),
      url("../images/landscapes/mendoza-movil.jpg?v=1") type("image/jpeg"));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portada__fondo { transition: none; }
}

/* ============================================================================
   32. TEMA SAN JUAN
   San Juan replica el sitio de Salta con el acento en amarillo. En vez de
   duplicar reglas, se reasignan las variables de verde a la escala amarilla:
   todo lo que usa var(--avera-verde-*) cambia solo.
   La escala entera se deriva de #FFD754, el amarillo de marca de la sede
   (tono 46°): del 50 al 400 son aclarados de ese tono, el 500 es el color
   exacto. Los oscuros NO mapean uno a uno — #FFD754 sobre blanco da 1,4:1 y
   no sirve para texto ni para botones con texto blanco, así que del 600 en
   adelante se baja a #8A660A (5,3:1) y #674C06 (8,0:1), que igualan el
   contraste que tenía el verde.
   ========================================================================== */
[data-sede="san-juan"] {
  --avera-verde-50:  #FFFDF4;
  --avera-verde-100: #FFF8E0;
  --avera-verde-200: #FFF1C4;
  --avera-verde-300: #FFE9A4;
  --avera-verde-400: #FFE082;
  --avera-verde-500: #FFD754;   /* amarillo de marca */
  --avera-verde-600: #8A660A;   /* primario, contraste AA */
  --avera-verde-700: #8A660A;
  --avera-verde-800: #674C06;
  --avera-verde-900: #674C06;

  --superficie-verde: #FFFDF4;
  --borde-verde-suave: rgb(255 241 196 / 0.9);
  --sombra-reposo: 0 12px 34px rgb(103 76 6 / 0.10);
  --sombra-hover: 0 22px 54px rgb(103 76 6 / 0.16);
}

/* Sombras y bordes que quedaron con el verde escrito a mano. */
[data-sede="san-juan"] .navbar { border-bottom-color: rgb(255 248 224 / 0.9); }
[data-sede="san-juan"] .navbar.con-sombra { box-shadow: 0 10px 32px rgb(103 76 6 / 0.13); }
[data-sede="san-juan"] .navbar__panel {
  border-color: rgb(255 248 224 / 0.9);
  box-shadow: 0 24px 60px rgb(103 76 6 / 0.18);
}
[data-sede="san-juan"] .navbar__panel-separador { background: rgb(255 248 224 / 0.9); }
[data-sede="san-juan"] .navbar__panel-enlace em { background: var(--avera-celeste-100); color: var(--avera-celeste-800); }
[data-sede="san-juan"] .nav-movil {
  background:
    radial-gradient(360px 260px at 100% 0%, var(--avera-celeste-100), transparent 72%),
    linear-gradient(180deg, #fff 0%, #FFFDF4 100%);
}
[data-sede="san-juan"] .nav-movil__cabecera { border-bottom-color: rgb(255 241 196 / 0.82); }
[data-sede="san-juan"] .btn--primario { box-shadow: 0 10px 24px rgb(103 76 6 / 0.24); }
/* El fondo del hero NO va acá: esta regla pisaba el shorthand `background`
   entera y borraba la textura que la sección 30 le pone al hero, así que San
   Juan se quedaba sin fondo. Está en la sección 36, con las tres variantes por
   breakpoint que hay que replicar. */

/* En la portada, San Juan es la sede amarilla y Salta la verde. El color sale
   de data-provincia y no del orden de las tarjetas (nth-child era frágil).
   Importante: se pintan los elementos del diseño vigente — el ícono cuadrado
   y el círculo de la flecha — y NO .enlace-flecha, que es un enlace de texto
   sin fondo. Las sombras van neutras: sobre la foto oscura, un halo de color
   bajo el botón se lee como una mancha. */
.provincia[data-provincia="san-juan"] .provincia__icono {
  color: #8A660A !important;
  border-color: rgb(138 102 10 / 0.16);
  background: rgb(255 253 244 / 0.94);
}
.provincia[data-provincia="san-juan"] .enlace-flecha {
  color: #7A5A00;
  border-left-color: rgb(138 102 10 / 0.2);
}
.provincia[data-provincia="san-juan"] .enlace-flecha svg {
  color: #fff;
  background: #8A660A;
  box-shadow: 0 6px 14px rgb(18 14 5 / 0.2);
}
.provincia[data-provincia="san-juan"]:hover .enlace-flecha,
.provincia[data-provincia="san-juan"]:focus-visible .enlace-flecha { color: #5C4400; }
.provincia[data-provincia="san-juan"]:hover .enlace-flecha svg,
.provincia[data-provincia="san-juan"]:focus-visible .enlace-flecha svg {
  background: #674C06;
  box-shadow: 0 8px 18px rgb(18 14 5 / 0.28);
}

.provincia[data-provincia="salta"] .provincia__icono {
  color: var(--avera-verde-700) !important;
  border-color: rgb(69 130 32 / 0.12);
  background: rgb(244 251 240 / 0.92);
}
.provincia[data-provincia="salta"] .enlace-flecha {
  color: var(--avera-verde-800);
  border-left-color: rgb(69 130 32 / 0.18);
}
.provincia[data-provincia="salta"] .enlace-flecha svg {
  color: #fff;
  background: var(--avera-verde-700);
  box-shadow: 0 6px 14px rgb(8 18 6 / 0.2);
}
.provincia[data-provincia="salta"]:hover .enlace-flecha,
.provincia[data-provincia="salta"]:focus-visible .enlace-flecha { color: var(--avera-verde-900); }
.provincia[data-provincia="salta"]:hover .enlace-flecha svg,
.provincia[data-provincia="salta"]:focus-visible .enlace-flecha svg {
  background: var(--avera-verde-800);
  box-shadow: 0 8px 18px rgb(8 18 6 / 0.28);
}

/* ============================================================================
   33. TEMA SAN JUAN — bandas claras
   En Salta las tres bandas (.banda-app, .banda-esencia, .cta-cierre) son
   fondos oscuros con texto blanco, y tienen el verde escrito directo en
   hexadecimal — no salen de las variables. En San Juan se invierten: fondo
   amarillo claro derivado de #FFD754 (tono 46°) y texto oscuro.
   Invertir el fondo obliga a invertir TODO lo que iba en blanco encima:
   títulos, párrafos, íconos, la trama de puntos, las flechas y los puntos del
   carrusel, y el botón del cierre. Por eso este bloque es largo — no alcanza
   con cambiar el background.
   Contrastes sobre el amarillo claro: #3B2C05 da 11,3:1, #674C06 6,3:1 y
   #7A5C0A 5,2:1. Todos AA.
   Va al final a propósito: tiene que ganarle a las secciones 28-30, que
   redefinen las mismas reglas.
   ========================================================================== */

/* La escala --avera-amarillo-* también se usa suelta (subrayado de "bienestar",
   comillas del carrusel, eyebrows). En San Juan se alinea al mismo amarillo
   para que no queden dos acentos distintos conviviendo. En Salta queda como
   está, que ahí es un acento sobre verde. */
[data-sede="san-juan"] {
  --avera-amarillo-50:  #FFFDF4;
  --avera-amarillo-100: #FFF8E0;
  --avera-amarillo-200: #FFF1C4;
  --avera-amarillo-300: #FFE9A4;
  --avera-amarillo-400: #FFE082;
  --avera-amarillo-500: #FFD754;
  --avera-amarillo-600: #D7AE1B;
  --avera-amarillo-700: #B08C13;
  --avera-amarillo-800: #8A660A;
  --avera-amarillo-900: #674C06;
}

/* El subrayado de "bienestar" va sobre blanco: el amarillo de marca ahí
   desaparece, así que usa un paso intermedio. */
[data-sede="san-juan"] .palabra--bienestar .subrayado path { stroke: #E5B02A; }

/* ---------- Banda de la app ---------- */
[data-sede="san-juan"] .banda-app {
  background:
    radial-gradient(620px 440px at 90% 58%, rgb(255 215 84 / 0.55), transparent 68%),
    linear-gradient(120deg, #FFF8E0, #FFEEBA 62%, #FFE290);
  border: 1px solid rgb(103 76 6 / 0.12);
  box-shadow: 0 24px 60px rgb(103 76 6 / 0.14);
  color: #3B2C05;
}
[data-sede="san-juan"] .banda-app h2 { color: #3B2C05; }
[data-sede="san-juan"] .banda-app__marca { color: #8A660A; }
[data-sede="san-juan"] .banda-app .eyebrow { color: #7A5C0A; }
[data-sede="san-juan"] .banda-app__texto p { color: #674C06; }
[data-sede="san-juan"] .banda-app__nota { color: #7A5C0A !important; }
[data-sede="san-juan"] .banda-app__lista li { color: #3B2C05; }
[data-sede="san-juan"] .banda-app__icono {
  border-color: rgb(103 76 6 / 0.22);
  background: rgb(255 255 255 / 0.62);
  color: #8A660A;
}
/* Trama de puntos: era blanca sobre oscuro. */
[data-sede="san-juan"] .banda-app::before {
  background-image: radial-gradient(rgb(103 76 6 / 0.24) 1.4px, transparent 1.4px);
}
/* Resplandor detrás del teléfono: sobre fondo claro va en blanco. */
[data-sede="san-juan"] .banda-app__telefono::before {
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 72%);
}

/* ---------- Banda de misión ---------- */
/* Velo claro sobre la foto (la de Salta, la Quebrada, no correspondía acá).
   El velo va casi opaco: con menos, la foto le come el contraste al texto. */
[data-sede="san-juan"] .banda-esencia {
  background-color: #FFF1C4;
  background-image:
    linear-gradient(135deg, rgb(255 248 224 / 0.95), rgb(255 226 144 / 0.90)),
    url("../images/landscapes/san-juan.jpg");
  border: 1px solid rgb(103 76 6 / 0.14);
  box-shadow: 0 24px 60px rgb(103 76 6 / 0.14);
  color: #3B2C05;
}
[data-sede="san-juan"] .banda-esencia .carrusel__comillas { color: #C79517; }
[data-sede="san-juan"] .banda-esencia .carrusel__etiqueta { color: #7A5C0A; }
[data-sede="san-juan"] .banda-esencia blockquote { color: #3B2C05; }
[data-sede="san-juan"] .banda-esencia .carrusel__flecha {
  border-color: rgb(103 76 6 / 0.38);
  color: #674C06;
}
[data-sede="san-juan"] .banda-esencia .carrusel__flecha:hover { background: rgb(103 76 6 / 0.10); }
[data-sede="san-juan"] .banda-esencia .carrusel__punto { background: rgb(103 76 6 / 0.30); }
[data-sede="san-juan"] .banda-esencia .carrusel__punto:hover { background: rgb(103 76 6 / 0.55); }
[data-sede="san-juan"] .banda-esencia .carrusel__punto.activo { background: #674C06; }

/* ---------- Cierre ---------- */
[data-sede="san-juan"] .cta-cierre {
  background:
    radial-gradient(620px 350px at 90% 120%, rgb(255 215 84 / 0.5), transparent 68%),
    #FFF3CE;
  box-shadow: 0 24px 60px rgb(103 76 6 / 0.14);
  color: #3B2C05;
}
[data-sede="san-juan"] .cta-cierre .display { color: #3B2C05; }
[data-sede="san-juan"] .cta-cierre p { color: #674C06; }
/* El botón era blanco sobre fondo oscuro; acá se invierte a sólido oscuro. */
[data-sede="san-juan"] .cta-cierre .btn--blanco {
  background: #8A660A;
  color: #fff;
}
[data-sede="san-juan"] .cta-cierre .btn--blanco:hover { background: #674C06; color: #fff; }

/* ---------- Superficies claras y grises con tinte verde ---------- */
[data-sede="san-juan"] .seccion--celeste { background: #FFFDF6; }
[data-sede="san-juan"] .input-busqueda { border-color: #F2E1AE; }
[data-sede="san-juan"] .chip { border-color: #F7E9C4; }
[data-sede="san-juan"] body { color: #1F1B10; }
[data-sede="san-juan"] .hero .lead { color: #5E5744; }
[data-sede="san-juan"] .hero__confianza { color: #5B5541; }
[data-sede="san-juan"] .plan-card__sub { color: #726D5D; }

/* ============================================================================
   34. TEMA SAN JUAN — verdes sueltos fuera de las variables
   La 32 reasigna --avera-verde-* y la 33 invierte las tres bandas oscuras.
   Queda un resto que ninguna de las dos alcanza: verdes escritos directo en
   hexadecimal o en rgb() dentro de sombras, tramas de puntos, resplandores y
   degradados. Se agrupan acá, al final, porque varias de estas reglas viven
   dentro de @media y hay que ganarles por especificidad.
   Criterio del arcoíris de marca (--linea-marca, .texto-gradiente y la órbita
   de .hero__fotos): el stop verde pasa a #D9A521, el mismo dorado que ya usan
   los SVG inline de san-juan/index.html. No se toca el resto de los colores
   del logo — solo deja de haber verde.
   Base de sombra cálida: rgb(103 76 6), la misma de las secciones 32 y 33.
   ========================================================================== */

[data-sede="san-juan"] {
  --linea-marca: linear-gradient(90deg, #D9A521 0%, #39A4DA 28%, #C23488 52%, #EB7E2B 76%, #D9A521 100%);
}

/* "bienestar" y demás texto con degradado de marca. Se pisa background-image y
   no background: el shorthand reiniciaría el background-size 220% del que
   depende la animación del degradado. */
[data-sede="san-juan"] .texto-gradiente {
  background-image: linear-gradient(90deg, #8A660A, #308AB7, #C23488, #C56A24, #AE7E1C, #8A660A);
  color: #8A660A;
}

/* ---------- Hero ---------- */
[data-sede="san-juan"] .hero { border-bottom-color: #F3E8CC; }
[data-sede="san-juan"] .hero::before {
  background-image: radial-gradient(rgb(138 102 10 / 0.25) 1.1px, transparent 1.1px);
}
[data-sede="san-juan"] .hero::after {
  background: radial-gradient(circle, rgb(255 215 84 / 0.30) 0%, rgb(255 215 84 / 0.12) 42%, transparent 72%);
}
[data-sede="san-juan"] .hero__fotos::before {
  background: conic-gradient(
    from 15deg,
    transparent 0deg 36deg,
    rgb(217 165 33 / 0.92) 52deg 96deg,
    transparent 112deg 154deg,
    rgb(57 164 218 / 0.88) 168deg 210deg,
    transparent 224deg 260deg,
    rgb(194 52 136 / 0.86) 274deg 306deg,
    rgb(249 180 40 / 0.92) 318deg 346deg,
    transparent 356deg
  );
  filter: drop-shadow(0 0 7px rgb(217 165 33 / 0.22));
}
[data-sede="san-juan"] .hero__fotos::after { box-shadow: 0 24px 46px rgb(103 76 6 / 0.14); }
[data-sede="san-juan"] .hero-slider { filter: drop-shadow(0 28px 38px rgb(103 76 6 / 0.17)); }
[data-sede="san-juan"] .hero-slider .carrusel__pista { box-shadow: 0 28px 70px rgb(103 76 6 / 0.16); }

/* ---------- Secciones ---------- */
[data-sede="san-juan"] .seccion--alt {
  background:
    radial-gradient(rgb(255 215 84 / 0.30) 1.6px, transparent 1.6px) 0 0 / 24px 24px,
    linear-gradient(180deg, #ffffff 0%, var(--avera-neutro-50) 24%, var(--avera-verde-50) 100%);
}

/* ---------- Componentes ---------- */
[data-sede="san-juan"] .btn--primario:hover { box-shadow: 0 14px 30px rgb(103 76 6 / 0.28); }
[data-sede="san-juan"] .plan-card { box-shadow: 0 12px 36px rgb(103 76 6 / 0.07); }
[data-sede="san-juan"] .valor { box-shadow: 0 8px 28px rgb(103 76 6 / 0.05); }
[data-sede="san-juan"] .input-busqueda { box-shadow: 0 8px 24px rgb(103 76 6 / 0.05); }

@media (max-width: 640px) {
  [data-sede="san-juan"] .plan-card { box-shadow: 0 9px 28px rgb(103 76 6 / 0.07); }
}

/* ============================================================================
   35. TEMA SAN JUAN — rellenos en amarillo claro
   Las secciones 32-34 dejaron el sitio sin verde, pero heredaron un problema:
   los tonos 600-900 de la escala (#8A660A y #674C06) se eligieron para TEXTO
   sobre blanco, donde un amarillo tiene que bajar mucho de luminosidad para
   pasar AA. Aplicados como relleno de botones e íconos, ese mismo amarillo
   oscuro se lee marrón.
   Acá se invierte el patrón en los rellenos: fondo con el amarillo de marca
   (#FFD754) y texto oscuro encima, en vez de fondo oscuro con texto blanco.
   Además de verse amarillo de verdad, sube el contraste: #3B2C05 sobre
   #FFD754 da 9,75:1, contra los 5,27:1 del blanco sobre #8A660A.
   Los tonos oscuros siguen vigentes donde son TEXTO chico sobre fondo claro,
   que es para lo que se calcularon. Los íconos y gráficos pasan a #A67B08
   (3,8:1, AA de gráficos es 3:1) porque ahí no hace falta llegar a 4,5:1.
   El amarillo de marca contra blanco da 1,39:1, así que los botones llevan un
   filete interior oscuro para no perder el borde. Va por box-shadow inset y
   no por border, que correría el layout.
   ========================================================================== */

[data-sede="san-juan"] .btn--primario {
  background: #FFD754;
  color: #3B2C05;
  box-shadow:
    inset 0 0 0 1px rgb(154 116 8 / 0.30),
    0 10px 24px rgb(103 76 6 / 0.20);
}
[data-sede="san-juan"] .btn--primario:hover {
  background: #F5C21F;
  color: #2E2204;
  box-shadow:
    inset 0 0 0 1px rgb(154 116 8 / 0.38),
    0 14px 30px rgb(103 76 6 / 0.26);
}

[data-sede="san-juan"] .faq-flotante__boton {
  background: #FFD754;
  color: #3B2C05;
  box-shadow:
    inset 0 0 0 1px rgb(154 116 8 / 0.30),
    0 12px 28px rgb(103 76 6 / 0.24);
}

[data-sede="san-juan"] .chip.activo {
  background: #FFD754;
  border-color: rgb(154 116 8 / 0.38);
  color: #3B2C05;
}

[data-sede="san-juan"] .salto-contenido {
  background: #FFD754;
  color: #3B2C05;
}

/* El cierre va sobre una banda amarilla clara (#FFF3CE): un botón amarillo
   sobre amarillo se pierde, así que este mantiene el relleno de marca pero
   con un filete oscuro sólido que le devuelve la jerarquía. */
[data-sede="san-juan"] .cta-cierre .btn--blanco {
  background: #FFD754;
  color: #3B2C05;
  box-shadow: inset 0 0 0 2px #3B2C05;
}
[data-sede="san-juan"] .cta-cierre .btn--blanco:hover {
  background: #F5C21F;
  color: #2E2204;
  box-shadow: inset 0 0 0 2px #2E2204;
}

/* ---------- Íconos y gráficos: se aclaran a #A67B08 ---------- */
[data-sede="san-juan"] .banda-app__icono { color: #A67B08; }
[data-sede="san-juan"] .texto-gradiente {
  background-image: linear-gradient(90deg, #A67B08, #308AB7, #C23488, #C56A24, #AE7E1C, #A67B08);
  color: #A67B08;
}

/* ---------- Tarjeta de San Juan en la portada ---------- */
/* El círculo de la flecha era blanco sobre #8A660A: el marrón que más se
   notaba, porque es lo primero que se ve al entrar al sitio. */
.provincia[data-provincia="san-juan"] .provincia__icono { color: #A67B08 !important; }
.provincia[data-provincia="san-juan"] .enlace-flecha svg {
  background: #FFD754;
  color: #3B2C05;
  box-shadow: 0 6px 14px rgb(103 76 6 / 0.24);
}
.provincia[data-provincia="san-juan"]:hover .enlace-flecha svg,
.provincia[data-provincia="san-juan"]:focus-visible .enlace-flecha svg {
  background: #F5C21F;
  color: #2E2204;
  box-shadow: 0 8px 18px rgb(103 76 6 / 0.30);
}

/* ============================================================================
   36. TEMA SAN JUAN — fondo del hero
   La sección 30 le da al hero una textura (hero-texture-small-v2.png) con tres
   encuadres distintos: desktop, ≤960 y ≤640. La 32 lo tematizaba con un
   `background` propio, y como `[data-sede="san-juan"] .hero` (0,2,0) le gana a
   `.hero` (0,1,0) en cualquier @media, borraba las tres de un saque: el hero de
   San Juan quedaba sin fondo.
   Acá se replican los tres encuadres tal cual, cambiando solo el velo —que en
   Salta va con un blanco de tinte verde (rgb(248 252 245)) y acá va cálido
   (rgb(255 253 244))— y sumando arriba los halos amarillos de la sede.
   La textura es gris neutro, sin verde, así que se reutiliza sin tocarla.
   Si mañana cambia el encuadre del hero en la sección 30, hay que replicarlo
   acá: son reglas paralelas, no heredadas.
   ========================================================================== */

[data-sede="san-juan"] .hero {
  background:
    radial-gradient(560px 400px at 8% 18%, rgb(255 215 84 / 0.22), transparent 70%),
    radial-gradient(680px 440px at 94% 6%, rgb(255 215 84 / 0.15), transparent 72%),
    linear-gradient(90deg, rgb(255 253 244 / 0.08) 0%, rgb(255 255 255 / 0.16) 44%, rgb(255 255 255 / 0.46) 76%, rgb(255 255 255 / 0.62) 100%),
    url("../images/backgrounds/hero-texture-small-v2.png?v=3") calc(50% + 20.5vw - 342px) calc(50% + 18px) / calc(100% + 220px) auto no-repeat;
}

@media (max-width: 960px) {
  [data-sede="san-juan"] .hero {
    background:
      radial-gradient(560px 400px at 8% 18%, rgb(255 215 84 / 0.20), transparent 70%),
      linear-gradient(180deg, rgb(255 255 255 / 0.58) 0%, rgb(255 255 255 / 0.34) 48%, rgb(255 253 244 / 0.18) 100%),
      url("../images/backgrounds/hero-texture-small-v2.png?v=3") center 64% / cover no-repeat;
  }
}

@media (max-width: 640px) {
  [data-sede="san-juan"] .hero {
    background:
      radial-gradient(420px 320px at 8% 14%, rgb(255 215 84 / 0.20), transparent 70%),
      linear-gradient(180deg, rgb(255 255 255 / 0.66) 0%, rgb(255 255 255 / 0.48) 48%, rgb(255 253 244 / 0.24) 100%),
      url("../images/backgrounds/hero-texture-small-v2.png?v=3") 42% 64% / cover no-repeat;
  }
}

/* ============================================================================
   37. MENDOZA — tercera sede en la portada
   Mendoza es Avera Red de Consultorios, un servicio distinto del de Salta y
   San Juan. Su sitio propio usa --color-primary: #36a4d9, que es el celeste de
   la marca, así que la tarjeta va en la escala --avera-celeste-* y queda
   coherente con lo que el visitante encuentra al entrar.
   El círculo de la flecha va en el 600 (#308AB7) y no en el 500: la flecha es
   blanca y sobre el celeste de marca da 2,80:1, por debajo del 3:1 que pide
   un gráfico. Con el 600 llega a 3,86:1.
   ========================================================================== */

.provincia[data-provincia="mendoza"] .provincia__icono {
  color: var(--avera-celeste-700) !important;
  border-color: rgb(54 164 217 / 0.16);
  background: rgb(243 250 253 / 0.94);
}
.provincia[data-provincia="mendoza"] .enlace-flecha {
  color: var(--avera-celeste-700);
  border-left-color: rgb(54 164 217 / 0.22);
}
.provincia[data-provincia="mendoza"] .enlace-flecha svg {
  color: #fff;
  background: var(--avera-celeste-600);
  box-shadow: 0 6px 14px rgb(6 30 42 / 0.2);
}
.provincia[data-provincia="mendoza"]:hover .enlace-flecha,
.provincia[data-provincia="mendoza"]:focus-visible .enlace-flecha {
  color: var(--avera-celeste-900);
}
.provincia[data-provincia="mendoza"]:hover .enlace-flecha svg,
.provincia[data-provincia="mendoza"]:focus-visible .enlace-flecha svg {
  background: var(--avera-celeste-700);
  box-shadow: 0 8px 18px rgb(6 30 42 / 0.28);
}

/* Foto de Mendoza: viñedo en primer plano y la cordillera nevada al fondo.
   Es más panorámica que las otras dos (2400x1054, 2,28:1, contra el 2:1 de
   Salta y el 16:9 de San Juan), así que en monitores ultra anchos es la única
   de las tres que se recorta en vertical. Por eso va en 45% y no en el centro:
   protege la línea de las cumbres, que es el sujeto. */
@media (hover: hover) and (pointer: fine) {
  .portada__fondo--mendoza {
    background-image: url("../images/landscapes/mendoza.jpg?v=1");
    background-image: image-set(
      url("../images/landscapes/mendoza.webp?v=1") type("image/webp"),
      url("../images/landscapes/mendoza.jpg?v=1") type("image/jpeg"));
  }
}

/* ============================================================================
   38. PORTADA — tres sedes en una sola fila
   `repeat(auto-fit, ...)` no servía acá: .portada__centro es un flex en columna
   con align-items: center, así que .provincias no toma el ancho del contenedor
   sino el de su contenido. Sin un ancho definido contra el cual medir, auto-fit
   terminaba armando una sola columna y las tarjetas quedaban apiladas.
   La solución es al revés: darle a la grilla un ancho explícito y tres columnas
   fijas. Así entran siempre en fila.
   El límite real no es la grilla sino el interior de cada tarjeta: ícono +
   texto + CTA en fila necesitan unos 270px por tarjeta. Por eso hay tres
   tramos:
     ≥1120px  tres en fila con el CTA completo ("Ingresar")
     900-1120 tres en fila con el CTA reducido al círculo de la flecha, que
              libera ~70px por tarjeta y evita que el texto se comprima
     761-899  apiladas: por debajo de 900px tres en fila dejarían la columna
              del texto en ~65px, que es exactamente el problema que tenía la
              tarjeta de San Juan al principio
   Por debajo de 761px manda el bloque de la sección 31, que ya apila.
   ========================================================================== */

@media (min-width: 900px) {
  .provincias.provincias--sedes {
    width: min(100%, 1064px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
  }
}

/* CTA reducido al círculo: mismo tratamiento que ya usa el móvil. */
@media (min-width: 900px) and (max-width: 1120px) {
  .provincia .enlace-flecha,
  .provincia:nth-child(2) .enlace-flecha {
    padding: 5px 0 5px 10px;
    font-size: 0;
  }
  .provincia .enlace-flecha svg {
    width: 34px;
    height: 34px;
    padding: 9px;
  }
}

/* Tramo intermedio: una sola columna, como en móvil pero sin achicar tipos. */
@media (min-width: 761px) and (max-width: 899px) {
  .provincias.provincias--sedes {
    width: min(100%, 520px);
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* ============================================================================
   39. PORTADA — tríptico diagonal y coreografía de selección
   La sección 31 dejó las fotos siempre visibles, cortadas en diagonal: una
   mitad por sede. Al sumar Mendoza quedaron tres fotos y solo dos cortes, y la
   que no tenía clip-path se comía la pantalla entera.
   Acá se reparte en tres franjas, en el mismo orden que las tarjetas de abajo
   (Mendoza, San Juan, Salta): la franja está sobre su tarjeta, así que al pasar
   el mouse la imagen que crece es la que ya se estaba mirando. Los dos cortes
   mantienen la inclinación original (12% de corrimiento entre el borde de
   arriba y el de abajo), que es lo que le da el aire diagonal al conjunto.

   La coreografía al elegir una sede tiene cuatro movimientos simultáneos:
     - la franja elegida se abre a pantalla completa (clip-path)
     - su foto se asienta de scale(1.05) a scale(1) — entra empujando y frena,
       que es lo que le da peso; no es un zoom que arranca, es uno que termina
     - las otras dos se apagan (menos saturación y brillo) en vez de solo
       quedar tapadas, así el foco es inequívoco desde el primer fotograma
     - todo con una curva expo-out, que hace casi todo el recorrido al principio
       y llega frenando

   La entrada dura más que la salida (900ms contra 620ms) a propósito: elegir
   tiene que sentirse deliberado y soltar tiene que ser inmediato. Se consigue
   poniendo transiciones distintas en el estado base y en el activo — la del
   base gobierna la vuelta, la del activo la ida.
   ========================================================================== */

/* Reposo: tres franjas, cada una encima de su tarjeta.
   Van dentro de media queries a propósito. En celular el corte no es vertical
   sino horizontal, porque las tarjetas se apilan y cada foto tiene que quedar
   detrás de la suya. Sin acotar por ancho, estas reglas —que van después y con
   la misma especificidad— le ganarían al bloque de ≤760px y romperían ese
   encuadre, el mismo problema que tuvo el fondo del hero en la sección 36. */

/* Escritorio: tres franjas verticales, en el orden de las tarjetas. */
@media (min-width: 761px) {
  .portada__fondo--mendoza  { clip-path: polygon(0 0, 39% 0, 27% 100%, 0 100%); }
  .portada__fondo--san-juan { clip-path: polygon(39% 0, 73% 0, 61% 100%, 27% 100%); }
  .portada__fondo--salta    { clip-path: polygon(73% 0, 100% 0, 100% 100%, 61% 100%); }
}

/* Celular: tres bandas horizontales, en el mismo orden en que se apilan. */
@media (max-width: 760px) {
  .portada__fondo--mendoza  { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 28%); }
  .portada__fondo--san-juan { clip-path: polygon(0 28%, 100% 34%, 100% 68%, 0 62%); }
  .portada__fondo--salta    { clip-path: polygon(0 62%, 100% 68%, 100% 100%, 0 100%); }
}

.portada__fondo {
  transform: scale(1.05);
  transform-origin: center;
  transition:
    clip-path 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms ease;
  will-change: clip-path, transform, filter;
}

/* Con una sede elegida, las otras dos se apagan. */
.portada:is(.portada--mendoza, .portada--san-juan, .portada--salta) .portada__fondo {
  filter: saturate(0.45) brightness(0.58) contrast(0.98);
}

/* La elegida: pantalla completa, a color y asentándose.
   Va con .portada.portada--X para ganarle en especificidad a la regla de
   apagado de arriba, que si no la pisaría. */
.portada.portada--mendoza .portada__fondo--mendoza,
.portada.portada--san-juan .portada__fondo--san-juan,
.portada.portada--salta .portada__fondo--salta {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1);
  filter: saturate(1.1) contrast(1.04);
  transition:
    clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1500ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 620ms ease;
}

/* Sin animación: se mantiene el tríptico y el apagado, que son información
   (cuál estoy eligiendo), pero desaparece todo el movimiento. */
@media (prefers-reduced-motion: reduce) {
  .portada__fondo,
  .portada.portada--mendoza .portada__fondo--mendoza,
  .portada.portada--san-juan .portada__fondo--san-juan,
  .portada.portada--salta .portada__fondo--salta {
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   40. PORTADA — salida al elegir una sede
   Hasta acá el clic era un corte seco: la portada desaparecía de golpe y
   aparecía la página de la sede. Esta sección le da una salida de 640ms, que
   es el tiempo que espera selector-provincias.js antes de navegar. Si tocás
   uno de los dos números hay que tocar el otro.

   Lo que pasa en esos 640ms, escalonado:
     0-300    la identidad y las tarjetas no elegidas se retiran hacia arriba
     100-540  la tarjeta elegida se va última, y hacia arriba y creciendo: se
              queda un instante sola en pantalla, que es lo que confirma la
              elección sin necesidad de ningún otro efecto
     0-420    la foto termina de abrirse y empieza a empujar hacia adelante
     0-380    el velo se abre para que la foto quede limpia
     340-640  disolvido a claro

   Las curvas van al revés que en la sección 39: allá era expo-out (arranca
   rápido y frena) porque era algo que llega y se asienta; acá es ease-in
   (arranca lento y acelera) porque es algo que se va. Una salida que frena
   se siente como un titubeo.

   El disolvido termina en blanco y no en negro porque las cinco páginas de
   destino son claras: así la salida aterriza sobre la página siguiente en
   lugar de cortarse contra ella.
   ========================================================================== */

.portada__salida {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.portada.portada--eligiendo .portada__salida {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.32, 0, 0.67, 0) 340ms;
}

/* La interfaz se retira. */
.portada.portada--eligiendo .portada__identidad {
  opacity: 0;
  transform: translateY(-16px);
  transition:
    opacity 300ms ease,
    transform 460ms cubic-bezier(0.32, 0, 0.67, 0);
}

.portada.portada--eligiendo .provincia {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.32, 0, 0.67, 0);
}

/* La elegida se va última y creciendo: queda sola un instante. */
.portada.portada--eligiendo .provincia--activa {
  opacity: 0;
  transform: translateY(-20px) scale(1.03);
  transition:
    opacity 300ms ease 150ms,
    transform 440ms cubic-bezier(0.32, 0, 0.67, 0) 100ms;
}

.portada.portada--eligiendo .portada__pie {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.32, 0, 0.67, 0);
}

/* La foto empuja hacia adelante y el velo se abre. */
.portada--eligiendo.portada--mendoza .portada__fondo--mendoza,
.portada--eligiendo.portada--san-juan .portada__fondo--san-juan,
.portada--eligiendo.portada--salta .portada__fondo--salta {
  transform: scale(1.07);
  filter: saturate(1.16) contrast(1.05);
  transition:
    clip-path 420ms cubic-bezier(0.32, 0, 0.67, 0),
    transform 640ms cubic-bezier(0.32, 0, 0.67, 0),
    filter 420ms ease;
}

.portada.portada--eligiendo .portada__velo {
  opacity: 0.28;
  transition: opacity 380ms ease;
}

/* Sin animación el JS navega derecho y nunca pone la clase, pero por si acaso
   se neutraliza todo: nadie se queda mirando una pantalla en blanco. */
@media (prefers-reduced-motion: reduce) {
  .portada.portada--eligiendo .portada__identidad,
  .portada.portada--eligiendo .provincia,
  .portada.portada--eligiendo .provincia--activa,
  .portada.portada--eligiendo .portada__pie,
  .portada.portada--eligiendo .portada__velo {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .portada.portada--eligiendo .portada__salida {
    opacity: 0;
    transition: none;
  }
}

/* ============================================================================
   41. PORTADA — eslogan y ejes de marca animados
   El eslogan es "Tu salud, estés donde estés." y abajo van los tres ejes
   (Atención · Cobertura · Bienestar) con un barrido continuo de los cinco
   colores del logo.

   Cómo funciona el barrido, para poder tocarlo sin romperlo:
   - Cada palabra lleva el degradado entero de la marca recortado al texto
     (background-clip: text) con background-size 500%: la imagen mide cinco
     veces la palabra, así que en pantalla se ve ~un color por vez, no un
     arcoíris estático.
   - El bucle es perfecto por aritmética, no por suerte: 6 paradas donde la
     última repite la primera dan 5 tramos iguales; ir de background-position
     0% a 100% desplaza 4 tramos justos, así que el último fotograma es
     idéntico al primero y el reinicio es invisible.
   - Las tres palabras corren la MISMA animación con delays negativos
     (0, -3s, -6s sobre 9s): cada una va desfasada un tercio de ciclo y el
     color parece viajar de una palabra a la siguiente. Negativos para que al
     cargar la página la onda ya esté en marcha, no arrancando.
   - La paleta va en los tonos claros de cada color (verde 400, celeste 400,
     magenta y naranja aclarados): los de marca puros se apagan sobre el velo
     oscuro de las fotos — el magenta #C23488 baja de 3:1 y desaparece.
   - La sombra es filter: drop-shadow y no text-shadow: con el relleno del
     texto transparente, text-shadow se vería A TRAVÉS de las letras.
   ========================================================================== */

/* El eslogan corta después de la coma: "estés donde estés." va como una sola
   palabra animada e indivisible. En pantallas mínimas se libera el corte. */
.titulo-animado .sin-corte { white-space: nowrap; }
@media (max-width: 344px) {
  .titulo-animado .sin-corte { white-space: normal; }
}

.portada__ejes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 14px;
  margin: 16px 0 0;
  font-size: clamp(0.9rem, 1.9vw, 1.22rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* backwards y no both: con both la animación de entrada queda "aplicada"
     para siempre y puede dejar al contenedor en una capa compuesta propia,
     donde el barrido de los hijos deja de repintarse. backwards cubre el
     retardo inicial igual y después se suelta del todo. */
  animation: ejesEntran 640ms cubic-bezier(0.16, 1, 0.3, 1) 520ms backwards;
}

/* OJO: nada de filter ni transform en este elemento. En Chromium, `filter`
   sobre un elemento con background-clip: text rasteriza el recorte una sola
   vez y el fondo animado queda congelado — el barrido "no anda" sin dar
   ningún error. La sombra se pierde; los tonos claros en negrita sobre el
   velo oscuro no la necesitan. */
.portada__eje {
  background-image: linear-gradient(90deg, #98DA6C, #74BFE5, #D471AC, #F1A56B, #F9D883, #98DA6C);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #98DA6C; /* respaldo si background-clip: text no existe */
  -webkit-text-fill-color: transparent;
  animation: ejesRecorren 9s linear infinite;
}
.portada__eje:nth-child(3) { animation-delay: -3s; }
.portada__eje:nth-child(5) { animation-delay: -6s; }

.portada__eje-sep {
  color: rgb(255 255 255 / 0.5);
  font-weight: 600;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
}

@keyframes ejesRecorren {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes ejesEntran {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Sin background-clip: text (o si el recorte falla), la palabra entera cicla
   por los cinco colores en vez de quedarse en un verde fijo: la onda entre
   palabras se conserva porque los delays son los mismos. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .portada__eje {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: ejesRecorrenColor 9s linear infinite;
  }
}
@keyframes ejesRecorrenColor {
  0%, 100% { color: #98DA6C; }
  20%      { color: #74BFE5; }
  40%      { color: #D471AC; }
  60%      { color: #F1A56B; }
  80%      { color: #F9D883; }
}

/* Sin animación: cada eje queda fijo en un color de la marca, aclarado para
   el fondo oscuro. La información (tres ejes, paleta del logo) se conserva;
   el movimiento no. */
@media (prefers-reduced-motion: reduce) {
  .portada__ejes { animation: none; }
  .portada__eje {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .portada__eje:nth-child(1) { color: #74BFE5; }
  .portada__eje:nth-child(3) { color: #F9D883; }
  .portada__eje:nth-child(5) { color: #98DA6C; }
}

/* ============================================================================
   43. PORTADA — vidrio y una sola voz de color
   Antes convivían tres sistemas de acento (San Juan dorado, Salta verde,
   Mendoza celeste), el arcoíris animado en los ejes y los blobs multicolores
   del fondo. Cada pieza tenía sentido sola; juntas, la portada gritaba.
   El rediseño invierte el criterio: EL COLOR LO PONEN LAS FOTOS. Toda la
   interfaz pasa a un solo lenguaje de vidrio esmerilado (glassmorphism)
   sobre la fotografía: blanco translúcido, blur, un filo de luz arriba y
   texto blanco. La identidad de cada sede la siguen dando su foto y su
   nombre, no un color de botón.
   Nota de especificidad: las reglas por provincia usan atributos
   ([data-provincia="..."], hasta 0,4,1 en los hovers) y los íconos llevan
   color !important desde la sección 19. Por eso acá los selectores están
   calzados para empatar o superar cada caso y ganar por orden — no
   simplificar sin revisar eso.
   ========================================================================== */

/* Los blobs de colores se retiran: pintaban círculos tenues sobre las fotos.
   Con fotografía a pantalla completa son ruido, no ambiente. */
.portada__blobs { display: none; }

/* --- Ejes: de arcoíris animado a una sola voz --- */
/* El barrido de 5 colores era protagonista; ahora acompaña. Blanco pleno,
   tracking más abierto y peso 700: leído, no mirado. */
.portada__ejes {
  gap: 4px 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.portada__ejes .portada__eje,
.portada__ejes .portada__eje:nth-child(1),
.portada__ejes .portada__eje:nth-child(3),
.portada__ejes .portada__eje:nth-child(5) {
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.35);
}
.portada__ejes .portada__eje-sep {
  color: rgb(255 255 255 / 0.4);
  font-weight: 400;
}

/* --- Tarjetas de vidrio --- */
/* La receta: fondo blanco al 12%, blur con saturación (el vidrio "real"
   satura un poco lo que hay detrás), borde blanco fino y un filo de luz
   interior arriba, que es lo que vende el material. El overflow:hidden que
   las tarjetas ya tenían recorta el filo al radio. */
.provincias--sedes .provincia {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 18px 44px rgb(4 12 8 / 0.34);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
.provincias--sedes .provincia:hover {
  background: rgb(255 255 255 / 0.17);
  border-color: rgb(255 255 255 / 0.4);
}
.provincias--sedes .provincia--activa {
  border-color: rgb(255 255 255 / 0.65);
}
.provincias--sedes .provincia:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.85);
  outline-offset: 4px;
}

/* Texto sobre el vidrio: blanco con una sombra corta de seguridad — la foto
   de atrás cambia según la sede y la hora de la pantalla de cada uno. */
.provincias--sedes .provincia strong {
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.3);
}
.provincias--sedes .provincia .provincia__direccion {
  color: rgb(255 255 255 / 0.75);
}

/* Ícono: mismo vidrio, sin color de sede. El !important empata los que
   arrastra la cascada desde la sección 19. */
.provincias--sedes .provincia .provincia__icono {
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / 0.26);
  background: rgb(255 255 255 / 0.14);
  box-shadow: none;
}

/* Etiqueta "Tu última visita": píldora de vidrio, no verde. */
.provincias--sedes .provincia .provincia__recordada {
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.28);
  color: #fff;
}
.provincias--sedes .provincia--recordada {
  border-color: rgb(255 255 255 / 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    0 0 0 1px rgb(255 255 255 / 0.22),
    0 20px 48px rgb(4 12 8 / 0.38);
}

/* CTA: un solo tratamiento para las tres sedes. Círculo de vidrio con la
   flecha blanca; al pasar, se invierte a blanco pleno con la flecha oscura —
   la jerarquía la da el gesto, no un color por provincia. */
.provincias--sedes .provincia .enlace-flecha {
  color: rgb(255 255 255 / 0.88);
  border-left-color: rgb(255 255 255 / 0.22);
}
.provincias--sedes .provincia .enlace-flecha svg {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
}
.provincias--sedes .provincia:hover .enlace-flecha,
.provincias--sedes .provincia:focus-visible .enlace-flecha {
  color: #fff;
}
.provincias--sedes .provincia:hover .enlace-flecha svg,
.provincias--sedes .provincia:focus-visible .enlace-flecha svg {
  background: rgb(255 255 255 / 0.96);
  color: #14281a;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
}

/* Sin backdrop-filter (navegadores viejos) el blanco al 12% dejaría el texto
   directo sobre la foto: se cambia por un vidrio oscuro que sostiene el
   blanco en cualquier fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .provincias--sedes .provincia {
    background: rgb(14 24 18 / 0.6);
  }
}

/* --- Estado con una sede elegida: las no elegidas también son vidrio --- */
/* La regla vieja de la línea ~4215 les devolvía el blanco casi sólido
   (0.93) a las tarjetas no activas — con el texto ahora blanco quedaban
   ilegibles. Mismo selector (0,4,0), más abajo en el archivo: gana esta.
   Las no elegidas retroceden BAJANDO el vidrio (menos blanco, menos borde,
   texto más tenue), no con opacity sobre la tarjeta: opacity o filter en el
   propio elemento pueden anular el muestreo del backdrop-filter en Chromium
   y el vidrio se pierde. */
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) {
  opacity: 1;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.15);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 12px 30px rgb(4 12 8 / 0.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) strong {
  color: rgb(255 255 255 / 0.66);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) .provincia__direccion {
  color: rgb(255 255 255 / 0.48);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) .provincia__icono {
  color: rgb(255 255 255 / 0.72) !important;
  background: rgb(255 255 255 / 0.09);
  border-color: rgb(255 255 255 / 0.16);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) .enlace-flecha {
  color: rgb(255 255 255 / 0.55);
  border-left-color: rgb(255 255 255 / 0.14);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) .enlace-flecha svg {
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
.portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) .provincia__recordada {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.6);
}
/* Sin backdrop-filter, mismas razones que arriba: vidrio oscuro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portada:is(.portada--san-juan, .portada--salta, .portada--mendoza) .provincia:not(.provincia--activa) {
    background: rgb(14 24 18 / 0.45);
  }
}

/* ============================================================================
   44. PORTADA — los ejes como píldora de vidrio
   "Atención · Cobertura · Bienestar" suelto sobre la foto quedaba pobre:
   tres palabras flotando sin pertenecer a nada. Ahora son una sola pieza del
   mismo material que las tarjetas: una píldora de vidrio esmerilado con un
   destello que la recorre cada ~6s — un reflejo de luz sobre el vidrio, no
   un color. Toda la portada queda hecha del mismo material.
   El destello es un pseudo-elemento inclinado que cruza por transform
   (translateX en %, relativo a su propio ancho: 45% de píldora × 340% de
   recorrido ≈ cruza entera), así que no toca el layout. El overflow:hidden
   del contenedor lo recorta al radio.
   ========================================================================== */
.portada__ejes {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  margin: 18px 0 0;
  padding: 0.6rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    0 10px 28px rgb(4 12 8 / 0.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  font-size: clamp(0.72rem, 1.4vw, 0.86rem);
  letter-spacing: 0.14em;
  gap: 0.3rem 0.85em;
}

/* El destello: una franja clara inclinada que cruza y descansa. */
.portada__ejes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / 0.16) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
  animation: ejesBrillo 6s ease-in-out 2.4s infinite;
  pointer-events: none;
}
@keyframes ejesBrillo {
  0%        { transform: translateX(-140%) skewX(-18deg); }
  42%, 100% { transform: translateX(340%) skewX(-18deg); }
}

/* En pantallas mínimas la píldora entra achicando tipo y aire, no partiendo
   las palabras. */
@media (max-width: 380px) {
  .portada__ejes {
    padding: 0.5rem 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portada__ejes { background: rgb(14 24 18 / 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .portada__ejes::before { animation: none; opacity: 0; }
}

/* ============================================================================
   45. NAVBAR — chip de sede con oficio
   El chip "SAN JUAN ⌄" era una píldora genérica: radio 999px, mayúsculas de
   0.72rem con tracking, tinte saturado. Acá se rehace como un selector de
   ubicación de verdad: pin de marca + nombre en caja normal + chevron, radio
   moderado, tinte apenas y un filo de luz arriba.
   Todo por CSS, sin tocar el markup: en Salta el bloque del menú lo genera
   tools/sync-nav.py y una edición a mano se pierde en la próxima corrida.
   El pin entra por mask sobre un ::before; donde mask no exista, el ::before
   queda como un punto de color — un indicador de "estás acá" igual de
   digno, no un cuadrado roto.
   En San Juan los colores giran solos a la escala amarilla vía las variables
   --avera-verde-* que remapea la sección 32.
   ========================================================================== */
.navbar__sede {
  gap: 7px;
  padding: 7px 11px 7px 10px;
  border: 1px solid var(--borde-verde-suave);
  border-radius: 11px;
  background: var(--avera-verde-50);
  color: var(--avera-verde-900);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgb(29 63 13 / 0.06);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

/* Indicador de ubicación: punto de color como base... */
.navbar__sede::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--avera-verde-500);
}
/* ...y pin de marca donde hay soporte de mask (el mismo trazo que usan las
   tarjetas de la portada). */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .navbar__sede::before {
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.15 7-12a7 7 0 1 0-14 0c0 6.85 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.15 7-12a7 7 0 1 0-14 0c0 6.85 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

.navbar__sede svg { opacity: 0.55; }

.navbar__sede:hover,
.navbar__sede-grupo.abierto .navbar__sede {
  background: var(--avera-verde-100);
  border-color: var(--avera-verde-300);
  color: var(--avera-verde-900);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 2px 6px rgb(29 63 13 / 0.09);
}
.navbar__sede:focus-visible {
  outline: 2px solid var(--avera-verde-500);
  outline-offset: 2px;
}

/* ============================================================================
   46. BANDA APP — enviate el enlace (réplica vanilla del phone-input)
   Selector de país + número con validación en vivo, como el componente
   shadcn de referencia, pero sin React: este sitio es estático. Sin backend
   no se promete ningún envío: el botón abre WhatsApp hacia el PROPIO número
   del visitante con los enlaces de las tiendas — pasarse el enlace de la
   compu al teléfono. En Salta la banda es oscura; en San Juan la sección 33
   la invierte a clara, por eso el bloque [data-sede] de abajo. */
.app-envio {
  margin-top: 22px;
  max-width: 460px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.08);
}
.app-envio__titulo {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}
.app-envio__fila { display: flex; gap: 8px; }
.app-envio__pais,
.app-envio__tel {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 12px;
}
.app-envio__pais { flex: none; padding-inline: 8px; }
/* el desplegable nativo pinta sobre blanco: las opciones van oscuras */
.app-envio__pais option { color: #24331c; background: #fff; }
.app-envio__tel { flex: 1; min-width: 0; }
.app-envio__tel::placeholder { color: rgb(255 255 255 / 0.5); }
.app-envio__pais:focus-visible,
.app-envio__tel:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 2px;
}
.app-envio__btn {
  flex: none;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  background: var(--avera-verde-500);
  color: #14281a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms ease, background-color 200ms ease, opacity 200ms ease;
}
.app-envio__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.app-envio__btn:not(:disabled):hover { transform: translateY(-1px); }
.app-envio__estado {
  margin: 9px 0 0;
  min-height: 1.3em;
  font-size: 0.78rem;
  color: rgb(255 255 255 / 0.72);
}
.app-envio__estado.ok  { color: #A8E682; }
.app-envio__estado.mal { color: #FFB4A8; }

/* San Juan: banda clara (sección 33) → tarjeta e inputs en claro. */
[data-sede="san-juan"] .app-envio {
  border-color: rgb(103 76 6 / 0.2);
  background: rgb(255 255 255 / 0.55);
}
[data-sede="san-juan"] .app-envio__titulo { color: #3B2C05; }
[data-sede="san-juan"] .app-envio__pais,
[data-sede="san-juan"] .app-envio__tel {
  border-color: rgb(103 76 6 / 0.28);
  background: #fff;
  color: #3B2C05;
}
[data-sede="san-juan"] .app-envio__tel::placeholder { color: #a08f66; }
[data-sede="san-juan"] .app-envio__pais:focus-visible,
[data-sede="san-juan"] .app-envio__tel:focus-visible {
  outline-color: #8A660A;
}
[data-sede="san-juan"] .app-envio__estado { color: #674C06; }
[data-sede="san-juan"] .app-envio__estado.ok  { color: #2F6B14; }
[data-sede="san-juan"] .app-envio__estado.mal { color: #B3261E; }

@media (max-width: 760px) {
  .app-envio__fila { flex-wrap: wrap; }
  .app-envio__btn { flex: 1 1 100%; }
}

/* ============================================================================
   47. BANDA APP — mockup de iPhone con pantallas vivas (carrusel CSS)
   Réplica vanilla del phone-mockup carousel de referencia. Sin imágenes:
   las tres pantallas están DIBUJADAS en HTML dentro del marco — credencial,
   gestiones y cobertura, las tres promesas que la banda ya enumera. Rotan
   por keyframes puros (sin JS), 12s el ciclo, y con reduced-motion queda
   fija la credencial. Los acentos usan --avera-verde-*: en San Juan giran
   solos a la escala dorada. Reemplaza a credencial-movil.png (-100 KB).
   ========================================================================== */
.movil { width: min(248px, 64vw); margin: 0 auto; }
.movil__marco {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  background: #0d1409;
  box-shadow:
    inset 0 0 0 3px #2a3822,
    0 24px 60px rgb(5 12 3 / 0.45);
  padding: 10px;
}
.movil__isla {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  border-radius: 999px;
  background: #0d1409;
  z-index: 2;
}
.movil__pantalla {
  position: relative;
  height: 100%;
  border-radius: 29px;
  overflow: hidden;
  background: linear-gradient(170deg, #fff 0%, var(--avera-verde-50) 100%);
}
.movil__vista {
  position: absolute;
  inset: 0;
  padding: 44px 16px 16px;
  opacity: 0;
  animation: mvCiclo 12s ease-in-out infinite;
}
.movil__vista:nth-child(2) { animation-delay: 4s; }
.movil__vista:nth-child(3) { animation-delay: 8s; }
@keyframes mvCiclo {
  0%       { opacity: 0; transform: translateY(8px); }
  4%, 32%  { opacity: 1; transform: none; }
  37%, 100%{ opacity: 0; transform: translateY(-8px); }
}

.mv-marca {
  margin: 0 0 12px;
  font-family: var(--fuente-titulos, inherit);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--avera-verde-800);
}
.mv-cred {
  padding: 13px 13px 15px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--avera-verde-600), var(--avera-verde-800));
  color: #fff;
  box-shadow: 0 10px 22px rgb(10 25 5 / 0.25);
}
.mv-chico { margin: 0 0 7px; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.09em; opacity: 0.8; }
.mv-nombre { margin: 0; font-size: 0.95rem; font-weight: 800; line-height: 1.15; }
.mv-detalle { margin: 3px 0 10px; font-size: 0.62rem; opacity: 0.85; }
.mv-codigo {
  height: 26px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, #1c2b12 0 2px, transparent 2px 5px, #1c2b12 5px 6px, transparent 6px 10px),
    #fff;
}
.mv-pie { margin: 10px 2px 0; font-size: 0.6rem; color: var(--avera-verde-700); font-weight: 700; }

.mv-fila {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 9px 10px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 10px rgb(20 40 10 / 0.08);
  font-size: 0.66rem;
  font-weight: 700;
  color: #24331c;
}
.mv-fila::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #d9dfd4;
  flex: none;
}
.mv-fila--ok::before {
  background: var(--avera-verde-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.mv-boton {
  margin-top: 11px;
  padding: 9px;
  border-radius: 999px;
  background: var(--avera-verde-600);
  color: #fff;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
}
.mv-item { margin-bottom: 11px; font-size: 0.64rem; font-weight: 700; color: #24331c; }
.mv-item span { display: block; margin-bottom: 4px; }
.mv-barra {
  height: 8px;
  border-radius: 999px;
  background: rgb(20 40 10 / 0.1);
  overflow: hidden;
}
.mv-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--avera-verde-500), var(--avera-verde-600));
}

@media (prefers-reduced-motion: reduce) {
  .movil__vista { animation: none; }
  .movil__vista:first-child { opacity: 1; transform: none; }
}

/* ============================================================================
   48. BANDA APP — carrusel de tres teléfonos
   La versión fiel al componente de referencia: tres marcos en escena, el del
   centro nítido y los laterales detrás, apagados; rotan de posición con una
   transición larga y hay controles ‹ ⏸ ›. Reusa las pantallas mv-* de la 47;
   acá las vistas van fijas (una por teléfono) y el movimiento es de los
   marcos. movil-carrusel.js asigna las clases de posición.
   ========================================================================== */
.movil-carrusel {
  /* min() sin piso fijo: con piso de 168px, tres teléfonos (2.24 × mw)
     desbordaban 16px en pantallas de 360 y ~60px en las de 320. */
  --mw: min(44vw, 240px);
  position: relative;
  width: min(560px, 94vw);
  height: calc(var(--mw) * 19 / 9 + 10px);
  margin: 0 auto;
}
.movil-carrusel .movil {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--mw);
  margin: 0;
  transition:
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 750ms ease,
    filter 750ms ease;
}
.movil-carrusel .movil__vista {
  position: static;
  opacity: 1;
  animation: none;
  transform: none;
}
.movil--centro { transform: translateX(-50%); z-index: 2; opacity: 1; }
.movil--izq,
.movil--der { z-index: 1; opacity: 0.38; filter: saturate(0.55) contrast(0.95); }
.movil--izq { transform: translateX(calc(-50% - var(--mw) * 0.62)) scale(0.85); }
.movil--der { transform: translateX(calc(-50% + var(--mw) * 0.62)) scale(0.85); }

.movil-carrusel__controles {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 9px;
}
.movil-carrusel__controles button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  background: rgb(16 24 10 / 0.82);
  color: #fff;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}
.movil-carrusel__controles button:hover { transform: scale(1.08); background: rgb(16 24 10 / 0.95); }
.movil-carrusel__controles button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.movil-carrusel__controles svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.movil-carrusel__controles .ic-play { fill: currentColor; stroke: none; display: none; }
.movil-carrusel__controles .pausado .ic-play { display: block; }
.movil-carrusel__controles .pausado .ic-pausa { display: none; }

@media (prefers-reduced-motion: reduce) {
  .movil-carrusel .movil { transition: none; }
}

/* 48b. Capturas reales de la app dentro de los marcos: la pantalla es más
   alargada (9:19) que las capturas (9:16.7) — cover recorta apenas arriba y
   abajo en vez de dejar bandas. */
.movil__vista--img { padding: 0; }
.movil__vista--img picture,
.movil__vista--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   49. BANDA APP — marco realista y barra de estado
   La isla flotaba SOBRE la captura y tapaba el encabezado de la app. Como en
   un teléfono real: barra de estado propia (9:41, señal, wifi, batería) del
   color exacto del encabezado de cada captura (--sb, muestreado de los
   píxeles de arriba de cada imagen), la isla vive ahí adentro, y la captura
   arranca debajo, completa. Marco en titanio neutro con botones laterales.
   ========================================================================== */
.movil__marco {
  background: linear-gradient(160deg, #2b2e31, #101214);
  box-shadow:
    inset 0 0 0 2.5px #45494d,
    inset 0 0 0 6px #000,
    0 24px 60px rgb(5 10 6 / 0.45);
  padding: 11px;
}
.movil__marco::before,
.movil__marco::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #3c4043;
}
.movil__marco::before { right: -2.5px; top: 27%; height: 14%; }
.movil__marco::after  { left: -2.5px;  top: 20%; height: 9%; }
.movil__isla { background: #000; top: 19px; height: 21px; width: 72px; }

.movil__vista--img {
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  background: var(--sb, #294899);
}
.movil__vista--img picture { flex: 1; min-height: 0; }
.movil__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  color: #fff;
  z-index: 1;
}
.movil__status b { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.movil__status svg { width: 46px; height: 11px; }

/* ============================================================================
   50. MÓVIL — remates de la auditoría táctil
   ========================================================================== */
@media (max-width: 760px) {
  /* iOS hace zoom automático al enfocar cualquier campo con fuente menor a
     16px: el buscador de la cartilla lo provocaba. */
  .input-busqueda { font-size: 16px; }
}
@media (pointer: coarse) {
  /* Los controles del carrusel de teléfonos medían 38px: el mínimo táctil
     recomendado (Apple y Google) es 44. Solo en pantallas táctiles, para no
     engordar el de escritorio. */
  .movil-carrusel__controles button { width: 44px; height: 44px; }
}

/* ============================================================================
   51. PLANES — diagrama de cobertura
   Tabla comparativa Superior/Selecta generada desde el Excel del cliente
   (hojas DIAGRAMA DE COBERTURA). Hereda la base de .tabla-planes de la
   comparativa; acá van los agregados: filas de sección que separan
   Ambulatorio / Internación / Otros, cebra suave para seguir la fila con la
   vista (la referencia que pasó el cliente), y la leyenda de abreviaturas
   que trae el propio Excel. En San Juan se pinta dorada sola (variables).
   ========================================================================== */
.tabla-cobertura th[scope="row"] {
  font-weight: 600;
  color: var(--color-texto);
}
.tabla-cobertura tbody tr:nth-child(even) td,
.tabla-cobertura tbody tr:nth-child(even) th[scope="row"] {
  background: rgb(20 40 10 / 0.035);
}
.tabla-cobertura .fila-seccion th {
  padding-top: 22px;
  background: var(--avera-verde-50) !important;
  color: var(--avera-verde-800);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tabla-referencias {
  margin-top: 18px;
  font-size: 0.85rem;
  line-height: 1.6;
}
@media (max-width: 760px) {
  /* tres columnas con textos largos: la tabla scrollea dentro de su
     envoltura, nunca la página entera */
  .tabla-cobertura { min-width: 640px; }
}