/* Variables globales */
:root {
  --bg: #d3d3d3; /* Cambiado a gris claro */
  --panel: #3a3a3a; /* Paneles */
  --ink: #ffffff; /* Texto principal */
  --muted: #b0b0b0; /* Texto secundario */
  --brand: #a52222; /* Color de marca */
  --accent: #6c757d; /* Color de acento */
  --radius: 14px; /* Sin cambios */
}

/* Reset y configuración básica */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

/* Estilos para enlaces */
a {
  color: #c7d2fe;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Contenedor principal */
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 20px;
}

/* Secciones */
.section {
  padding: 64px 0;
}
.section-alt {
  background: var(--panel);
}
.section h1, .section h2 {
  margin: 0 0 10px;
}
.section h1 {
  font-size: 3rem !important; /* Cambiado el tamaño de la fuente del título principal */
}
.section-lead {
  color: var(--muted);
  margin: 0 0 24px;
}

/* Cabecera del sitio */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 16, 32, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  min-height: 64px;
}
.brand img{
  height: 6rem;        /* tamaño del logo */
  width: 6rem;         /* mismo ancho y alto para que quede circular */
  object-fit: cover;   /* recorta la imagen sin deformarla */
  border-radius: 50%;  /* hace el círculo */
  display: block;
}
.brand-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
  font-weight: 800;
}

/* Navegación */
.nav .menu {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  padding: 10px 8px;
  border-radius: 8px;
}
.menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  border-radius: 10px;
  padding: 8px 10px;
}

/* Botones */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--brand); /* Cambiado a solo rojo */
  color: white;
  border-color: #58595a;
}
.btn-light {
  background: white;
  color: #0b1020;
}
.btn-ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--ink);
}

/* Hero */
.hero {
  padding: 72px 0;
  background: var(--bg); /* Usar el fondo principal */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
}
.hero h1 {
  font-size: 2.2rem;
  margin: 0.2rem 0 8px;
}
.hero p {
  color: #dbe1ea;
  margin: 0 0 18px;
}

/* Badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}
.badges li {
  font-size: 0.95rem;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 6px 10px;
  border-radius: 999px;
  color: #d3e0ff;
}

/* Placeholder para medios */
.media-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #bcd0ff;
  background: rgba(37, 99, 235, 0.06);
}

/* Grillas */
.grid {
  display: grid;
  gap: 18px;
}
.grid.two {
  grid-template-columns: 1fr 1fr;
}
.cards {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 18px;
}

/* Chips */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.chips li {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tablas */
.table-wrap {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.table thead th {
  background: rgba(255, 255, 255, 0.04);
}

/* Formularios */
.form {
  display: grid;
  gap: 10px;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
}
.form .check {
  display: flex;
  gap: 10px;
  align-items: center;
}
.form-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.form-success {
  color: #86efac;
  font-weight: 600;
}

/* Mapas */
.map-embed {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.map-embed iframe {
  width: 100%;
  height: 220px;
  border: 0;
}

/* Barra de acciones */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.61);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
  justify-content: center;
  margin-bottom: 5%; /* Ajusta el porcentaje según lo que necesites */
}
.action {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
.action:hover {
  text-decoration: none;
}

/* Footer */
.site-footer {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0b1020;
  margin-top: 5%; /* Ajusta el porcentaje según lo que necesites */
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}

/* Accesibilidad */
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  background: #fff;
  color: #000;
  padding: 8px;
  border-radius: 10px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Media Queries */
@media (max-width: 1000px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .nav .menu {
    display: none;
    position: absolute;
    right: 16px;
    top: 60px;
    background: rgba(11, 16, 32, 0.95);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    width: min(92vw, 320px);
  }
  .menu-toggle {
    display: inline-block;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .header-ctas {
    display: none;
  }
  .hero {
    padding: 56px 0;
  }
}

/*
Archivo: styles.css
Descripción: Estilos generales para buscador, mapa y menú desplegable.
Autor: Agencia Ariel
*/

/* ===== BUSCADOR ===== */
.buscador {
  text-align: center;
  padding: 1rem;
  background: var(--panel); /* Fondo amigable */
  border-radius: var(--radius); /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

#searchInput {
  width: 80%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius); /* Bordes redondeados */
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

#searchInput:focus {
  outline: none;
  border-color: var(--brand); /* Color de enfoque */
  box-shadow: 0 0 4px var(--brand);
}

#searchResults {
  list-style: none;
  margin-top: 0.5rem;
  padding: 0;
}

#searchResults li {
  background: white;
  margin: 0.2rem 0;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: var(--radius); /* Bordes redondeados */
  cursor: pointer;
  color: black; /* Texto con contraste */
}

#searchResults li:hover {
  background: #f3f4f6; /* Fondo más claro al pasar el mouse */
}

/* ===== ACCORDION ===== */
.accordion {
  width: 90%;
  margin: 1rem auto;
}

.accordion-btn {
  background: #004080;
  color: white;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.3s;
  font-size: 1rem;
  border-radius: 5px;
  margin-top: 5px;
}

.accordion-btn.active, .accordion-btn:hover {
  background: #0066cc;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background: white;
  border-left: 2px solid #004080;
  border-right: 2px solid #004080;
  border-bottom: 2px solid #004080;
  padding-left: 1rem;
}

/* Mapa */
.mapa {
  text-align: center;
  padding: 1rem;
}

#mapaUruguay {
  width: 90%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 8px;
}

/* SVG dentro del object */
#mapaUruguay { width: 100%; max-width: 900px; height: auto; border: 2px solid #ccc; border-radius: 8px; }
.depto { transition: 0.25s; }
.depto.hover { filter: brightness(1.06); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: grid; place-items: center; z-index: 999;
}
.modal-box {
  background: #fff; padding: 1rem 1.25rem; border-radius: 10px;
  width: min(92vw, 520px); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal-box h3 { margin-top: 0; color: #004080; }
.modal-box ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.modal-box button {
  margin-top: 1rem; background: #004080; color: #fff; border: 0;
  padding: .5rem .9rem; border-radius: 8px; cursor: pointer;
}
.modal-box button:hover { background: #0066cc; }

/* Opcional: asegura que el <object> sea responsive */
#mapaUruguay { width: 100%; max-width: 900px; height: auto; }

/* ========== CSS COBERTURA ========== */
:root{
  --ok: #21a67a;
  --no: #d9534f;
  --bg: #0c1116;
  --card: #ffffff;
  --ink: #eaf2f1;
  --muted: #8aa0b3;
}

#page-cobertura.cobertura-layout{
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr min(420px, 28vw);
  gap: 24px;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

#page-cobertura .map-wrap{
  width: 80vw;
  height: 80vh;
  max-width: 1200px;
  background: var(--card);
  border: 1px solid #1e2a34;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#page-cobertura #uy-map{
  width: 100%;
  height: auto;      /* <- evita forzar altura que recorta el SVG */
  display: block;
}


#page-cobertura #uy-map [data-hoverable],
#page-cobertura #uy-map path,
#page-cobertura #uy-map g[id] > path{
  transition: fill 120ms ease, stroke-width 120ms ease;
  cursor: pointer;
}

#page-cobertura .dept-ok{ fill: #1a6d55 !important; }
#page-cobertura .dept-ok:hover{ fill: var(--ok) !important; }
#page-cobertura .dept-no{ fill: #6e1f1c !important; }
#page-cobertura .dept-no:hover{ fill: var(--no) !important; }

#page-cobertura #tooltip{
  position: fixed;
  pointer-events: none;
  padding: .75rem .9rem;
  background: #0b0f15;
  border: 1px solid #243141;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  min-width: 220px;
  max-width: 360px;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px));
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 50;
}
#page-cobertura #tooltip[data-show="true"]{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px));
}
#page-cobertura #tooltip h3{
  margin: 0 0 .4rem 0;
  font-size: 1rem;
}
#page-cobertura #tooltip p{ margin: 0; color: var(--muted); }
#page-cobertura #tooltip ul{ margin: .25rem 0 0 1rem; padding: 0; }

#page-cobertura .accordion{
  height: 80vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid #1e2a34;
  border-radius: 12px;
  padding: 1rem;
  color: var(--ink);
}
#page-cobertura .accordion h2{ margin: 0 0 .5rem 0; font-size: 1.1rem; }
#page-cobertura .accordion details{ border-bottom: 1px dashed #253445; }
#page-cobertura .accordion summary{
  cursor: pointer; padding: .6rem .25rem; font-weight: 600; list-style: none;
}
#page-cobertura .accordion summary::-webkit-details-marker{ display:none; }
#page-cobertura .accordion ul{ margin: .2rem 0 1rem 1.2rem; }

@media (max-width: 1060px){
  #page-cobertura.cobertura-layout{ grid-template-columns: 1fr; }
  #page-cobertura .accordion{ width: 100%; height: auto; }
  #page-cobertura .map-wrap{ width: 100%; height: 70vh; }
}

/* Contenedor principal */
#cobertura-app .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
#cobertura-app h1{margin:0 0 1rem;font-size:2rem}
#cobertura-app h2{margin:2rem 0 1rem}
#cobertura-app h3{margin:1.5rem 0 .75rem}

/* Mapa */
#uy-map-container{position:relative;max-width:900px;margin:1rem 0}
#uy-map-container svg{width:100%;height:auto;display:block}

/* Departamentos */
#uy-map-container .dept{
  fill:#e5e7eb; /* gris claro */
  stroke:#111827; /* gris muy oscuro */
  stroke-width:.8;
  transition:fill .15s ease, transform .05s ease, filter .15s ease;
}
#uy-map-container .dept.has-coverage:hover{
  fill:#86efac; /* verde suave hover */
  cursor:pointer;
}
#uy-map-container .dept.no-coverage{fill:#fca5a5!important}
#uy-map-container .dept.no-coverage:hover{filter:brightness(.95)}
#uy-map-container .dept:focus{outline:3px solid #2563eb;outline-offset:2px}

/* Tooltip */
#uy-map-container .tooltip{
  position:absolute;
  pointer-events:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  border-radius:10px;
  padding:10px 12px;
  min-width:220px;
  font-size:.95rem;
  line-height:1.3;
  display:none;
  z-index:20;
}
#uy-map-container .tooltip h4{margin:.1rem 0 .35rem;font-weight:700;font-size:1rem}
#uy-map-container .tooltip ul{margin:0;padding-left:18px;max-height:220px;overflow:auto}
#uy-map-container .tooltip .sin{color:#b91c1c;font-weight:700}

/* Menú lateral opcional */
#menu-dptos{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
#menu-dptos > li{
  border:1px solid #e5e7eb;border-radius:10px;padding:.6rem .8rem;background:#fff;
  cursor:pointer;position:relative
}
#menu-dptos > li:hover{background:#f9fafb}
#menu-dptos > li ul{margin:.5rem 0 0 .8rem}
.badge-sin{display:inline-block;margin-left:.35rem;padding:.1rem .4rem;border-radius:.5rem;background:#fee2e2;color:#991b1b;font-size:.75rem}

/* Grilla de destinos dentro del contenido anclable */
.destinos-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.destinos-grid li{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;padding:.5rem .7rem}
.sin{color:#991b1b;font-weight:700}

/* Resaltado suave del botón de acordeón cuando llega desde el mapa */
#accordion-root .highlight-accent{
  outline: 2px dashed #2563eb;
  outline-offset: 3px;
  animation: accPulse 0.9s ease 2;
}
@keyframes accPulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
  100%{ box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}

/* === Cobertura: marco y viewport responsivo === */
#cobertura-map {
  width: 100%;
  max-width: 820px;           /* ajustá si querés un límite distinto en desktop */
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;           /* recorta cualquier “rebalse” */
  background: #0c131a;        /* tu fondo oscuro del card */
  padding: 0;                 /* el relleno lo da el SVG */
}

/* Mantener relación de aspecto “alta y angosta” (Uruguay es vertical) */
@supports (aspect-ratio: 1) {
  #cobertura-map { aspect-ratio: 3 / 4; } /* podés probar 2/3, 3/4 o 4/5 */
}

/* El SVG debe escalar fluidamente */
#cobertura-map svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Bordes que no se “engordan” al escalar */
#cobertura-map path,
#cobertura-map line,
#cobertura-map polyline,
#cobertura-map polygon {
  vector-effect: non-scaling-stroke;
}

/* Un poco de resguardo táctil en móviles */
#cobertura-map {
  touch-action: manipulation;
}
/* El mismo estilo que uses en :hover, aplicalo a .is-touch */
#page-cobertura .dept.is-touch {
  /* ejemplo: si tu :hover cambia fill/stroke */
  /* fill: var(--accent); */
  /* stroke: currentColor; */
  filter: brightness(1.08); /* o lo que estés usando para hover */
}

/* El contenedor ya actúa como referencia para el tooltip */
#uy-map-container { position: relative; }

/* Tooltip más legible en móvil */
#map-tooltip{
  position: absolute;
  max-width: min(85vw, 320px);
  z-index: 20;
  pointer-events: none;
  transform: translate3d(0,0,0);
  /* estética opcional, ajustá si querés: */
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

@media (max-width: 768px){
  #map-tooltip{ font-size: 1.05rem; line-height: 1.25; }
}

/* === FIX contraste tooltip cobertura (móvil & general) === */

/* Versión globo BLANCO (la actual que crea .tooltip) */
#uy-map-container .tooltip{
  color:#0f172a;               /* texto bien oscuro */
}
#uy-map-container .tooltip h3{ 
  color:#0b1220; 
  font-weight:700; 
  letter-spacing:.2px; 
}
#uy-map-container .tooltip li{ 
  color:#111827; 
  font-weight:600; 
}
@media (max-width:640px){
  #uy-map-container .tooltip{
    font-size:1rem;            /* un pelín más grande en móvil */
    border-color:#cbd5e1;
  }
}

/* Si alguna vista usa el tooltip viejo #tooltip (fondo oscuro), 
   aseguramos texto de alto contraste también: */
#page-cobertura #tooltip{ 
  color:#f8fafc; 
}
#page-cobertura #tooltip h3{ 
  color:#ffffff; 
  font-weight:700; 
}
#page-cobertura #tooltip p,
#page-cobertura #tooltip li{ 
  color:#e5e7eb; 
}
/* Pequeño refuerzo de legibilidad en pantallas chicas */
@media (max-width:640px){
  #page-cobertura #tooltip{ font-size:1rem; }
  #page-cobertura #tooltip, 
  #page-cobertura #tooltip *{ text-shadow:0 1px 1px rgba(0,0,0,.25); }
}

/* Tooltip centrado en móvil */
@media (max-width: 640px){
  #uy-map-container .tooltip{
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: min(92vw, 420px);
    z-index: 9999;
  }
}

/* === Barra de acciones móvil: scroll horizontal por arrastre === */
#action-bar{
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* inercia en iOS */
  overscroll-behavior-x: contain;     /* no “rebota” toda la página */
  scrollbar-width: none;               /* oculta scrollbar en Firefox */
  touch-action: pan-y;                 /* dejamos el vertical al navegador; el horizontal lo manejamos en JS */
  padding: .5rem 1rem;
  /* Si ya está fija al fondo, mantené tus position/bottom/left/right existentes */
}

/* Oculta scrollbar en WebKit */
#action-bar::-webkit-scrollbar { display: none; }

/* (Opcional) Snap agradable entre ítems si están “en tarjetas/chips” */
#action-bar{
  scroll-snap-type: x proximity;
}
#action-bar > *{
  scroll-snap-align: start;
  flex: 0 0 auto; /* que no se rompa el scroll horizontal */
}

/* Mapa */
#mapaUruguay path.hover {
  fill: #5ff0a0; /* Color al pasar el mouse */
  stroke: #ff0000;
}

/* Acordeón */
.accordion-btn.active + .panel {
  max-height: 500px; /* Ajusta según el contenido */
  transition: max-height 0.3s ease;
}

/* === FIX CONTRASTE ACORDEÓN (forzado + móvil) === */

/* Texto por defecto del acordeón en oscuro */
#page-cobertura .accordion{
  color: #0b1220 !important;       /* fuerza tinta oscura */
  background: #ffffff;             /* fondo claro legible */
}

/* Título del bloque */
#page-cobertura .accordion h2{ color:#0b1220; }

/* Cabeceras del acordeón: <summary> o .accordion-btn */
#page-cobertura .accordion summary,
#page-cobertura .accordion .accordion-btn{
  color:#0f172a;                   /* texto muy oscuro */
  background:#f8fafc;              /* pill claro */
  border:2px solid #0f172a;
  border-radius:10px;
  padding:.75rem .9rem;
  font-weight:700;
  letter-spacing:.2px;
}

/* Estado abierto / foco con resaltado potente */
#page-cobertura .accordion details[open] > summary,
#page-cobertura .accordion .accordion-btn.active,
#page-cobertura .accordion summary:focus-visible,
#page-cobertura .accordion .accordion-btn:focus-visible{
  background:#0f172a;              /* inversión: fondo oscuro */
  color:#575757;                   /* texto blanco */
  outline:3px solid #facc15;       /* halo amarillo de alto contraste */
  outline-offset:2px;
}

/* Contenido interno: listas y links en oscuro legible */
#page-cobertura .accordion .panel,
#page-cobertura .accordion li,
#page-cobertura .accordion a{
  color:#111827;
}

/* Resaltado tipo marcador (para énfasis o coincidencias de búsqueda) */
#page-cobertura .accordion mark{
  background:#facc15; color:#111827;
  padding:0 .2em; border-radius:.2em;
}

/* En móvil: subir tamaño y dar feedback táctil más visible */
@media (max-width:720px){
  #page-cobertura .accordion summary,
  #page-cobertura .accordion .accordion-btn{
    font-size:1.1rem; line-height:1.25;
  }
  #page-cobertura .accordion summary:active,
  #page-cobertura .accordion .accordion-btn:active{
    background:#facc15; color:#111827; /* flash amarillo al tocar */
  }
}

/* Cuando llega resaltado desde el mapa */
#accordion-root .highlight-accent{
  background:#0f172a !important; color:#fff !important;
  outline:3px solid #f59e0b; outline-offset:2px;
}

.contacto .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.contacto .grid-2{grid-template-columns:1fr}}
.contacto label{display:flex;flex-direction:column;gap:.375rem}
.contacto input, .contacto select, .contacto textarea{padding:.65rem;border:1px solid #ddd;border-radius:.5rem}
.contacto .opciones-extra{border:0;display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0 0}
.contacto .acciones{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
#btn-enviar, .btn-secundario{padding:.75rem 1rem;border-radius:.5rem;border:0;cursor:pointer}
.btn-secundario{background:#f3f3f3;display:inline-block;text-decoration:none}
.estado{margin-top:.5rem;font-size:.95rem}

/* Botón secundario genérico reforzado */
#cta-wa-directo,
a.btn-secundario[href*="wa.me"],
button.btn-whatsapp {
  display: inline-block;
  padding: 0.85rem 1.1rem;
  border-radius: 0.6rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  /* Alto contraste en dark */
  background: #128C7E;          /* verde WA accesible */
  color: #ffffff !important;
  border: 1px solid #0e6e64;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.25);
}

/* Hover / Active / Focus accesibles */
#cta-wa-directo:hover,
a.btn-secundario[href*="wa.me"]:hover,
button.btn-whatsapp:hover {
  filter: brightness(0.95);
}

#cta-wa-directo:active,
a.btn-secundario[href*="wa.me"]:active,
button.btn-whatsapp:active {
  transform: translateY(1px);
}

#cta-wa-directo:focus-visible,
a.btn-secundario[href*="wa.me"]:focus-visible,
button.btn-whatsapp:focus-visible {
  outline: 3px solid #37d7c5;
  outline-offset: 2px;
}

/* Estado deshabilitado, evita “texto gris sobre gris” */
#cta-wa-directo[aria-disabled="true"],
#cta-wa-directo[disabled] {
  background: #6b6b6b;
  border-color: #5a5a5a;
  color: #eaeaea !important;
  box-shadow: none;
  pointer-events: none;
  opacity: 1;
}

/* Por si hay tema claro: mantené contraste */
@media (prefers-color-scheme: light) {
  #cta-wa-directo,
  a.btn-secundario[href*="wa.me"],
  button.btn-whatsapp {
    background: #0e7a6f;
    color: #fff !important;
    border-color: #0b6259;
  }
}