/* Invest Texas Hub · maqueta de la portada, versión 3 (9-nov-2026). Móvil primero. El mapa vive sólo en la portada. */
@font-face {
  font-family: "Outfit";
  src: url("assets/fuentes/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("assets/fuentes/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Paleta azul noche. La de bandera es la de la página (data-paleta="bandera" en <html>); ?paleta= la cambia. */
  --claro: #FFFFFF;
  --claro-2: #F3F4F2;
  --texto: #14202E;
  --texto-2: #4A5563;
  --linea: #E3E6E8;
  --acento: #B5502E;
  --acento-claro: #F0B595;
  --tinta: #FFFFFF;
  --oscuro: #0E1A2B;
  --profundo: #0A1320;
  --pie: #0E1A2B;
  --nav-fondo: #0E1A2B;
  --nav-texto: #FFFFFF;
  --nav-linea: rgba(255, 255, 255, 0.16);
  --nav-marca-solida: #F0B595;
  --boton-fondo: #B5502E;
  --boton-texto: #FFFFFF;
  --boton-hover: #9A4325;
  --velo: 10, 19, 32;
  --velo-banda: 14, 26, 43;
  --filtro-foto: saturate(.92) contrast(1.03);
  --nav: 76px;
  --gutter: 20px;
  --max: 1184px;
}
:root[data-paleta="tierra"] {
  --claro: #F3EDE2;
  --claro-2: #F3EDE2;
  --texto: #4E2520;
  --texto-2: rgba(78, 37, 32, 0.78);
  --linea: rgba(78, 37, 32, 0.18);
  --acento: #98533E;
  --acento-claro: #E4B08E;
  --tinta: #F3EDE2;
  --oscuro: #4E2520;
  --profundo: #2B1512;
  --pie: #2B1512;
  --nav-fondo: #F3EDE2;
  --nav-texto: #4E2520;
  --nav-linea: rgba(78, 37, 32, 0.18);
  --nav-marca-solida: #98533E;
  --boton-fondo: #E4B08E;
  --boton-texto: #2B1512;
  --boton-hover: #F3EDE2;
  --velo: 43, 21, 18;
  --velo-banda: 78, 37, 32;
  --filtro-foto: saturate(.88) sepia(.14) contrast(1.04);
}
:root[data-paleta="bandera"] {
  --claro: #FFFFFF;
  --claro-2: #F4F6FA;
  --texto: #0F1B33;
  --texto-2: #4A5568;
  --linea: #E1E6EF;
  --acento: #BF0D3E;
  --acento-claro: #FFFFFF;
  --tinta: #FFFFFF;
  --oscuro: #002664;
  --profundo: #001A45;
  --pie: #002664;
  --nav-fondo: #002664;
  --nav-texto: #FFFFFF;
  --nav-linea: rgba(255, 255, 255, 0.18);
  --nav-marca-solida: #FFFFFF;
  --boton-fondo: #BF0D3E;
  --boton-texto: #FFFFFF;
  --boton-hover: #9C0B32;
  --velo: 0, 26, 69;
  --velo-banda: 0, 38, 100;
  --filtro-foto: saturate(.92) contrast(1.03);
}
@media (min-width: 1024px) {
  :root { --nav: 88px; --gutter: 48px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--claro);
  color: var(--texto);
  font-family: "Jakarta", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.hero :focus-visible, .tarjeta-mapa :focus-visible, .metodo :focus-visible, .pie :focus-visible, .nav :focus-visible { outline-color: var(--acento-claro); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: "Outfit", system-ui, sans-serif; font-weight: 600; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
.etiqueta {
  display: block;
  font-family: "Jakarta", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 14px;
}

/* ------------------------------------------------------------ navegación */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav);
  color: var(--tinta);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.nav .envoltura { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.solida { background: var(--nav-fondo); color: var(--nav-texto); box-shadow: 0 1px 0 var(--nav-linea); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.marca svg { width: 34px; height: 33px; flex: none; color: var(--acento-claro); transition: color .25s ease; }
.nav.solida .marca svg { color: var(--nav-marca-solida); }
.marca span { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.marca-etiqueta { display: none; font: 600 10.5px "Jakarta", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; border-radius: 2px; opacity: .9; white-space: nowrap; }
@media (min-width: 400px) { .marca-etiqueta { display: inline-block; } }
.nav-enlaces { display: none; }
.nav-enlaces a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 12px 2px; }
.nav-enlaces a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-enlaces a.contacto { border: 1px solid currentColor; padding: 11px 18px; }
.menu-boton {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; cursor: pointer;
}
.menu-boton svg { width: 22px; height: 22px; }
.menu-panel {
  display: none; position: fixed; top: var(--nav); left: 0; right: 0; z-index: 49;
  background: var(--nav-fondo); border-bottom: 1px solid var(--nav-linea); padding: 8px var(--gutter) 20px;
}
.menu-panel.abierto { display: block; }
.menu-panel a { display: block; padding: 14px 0; border-bottom: 1px solid var(--nav-linea); text-decoration: none; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 20px; color: var(--nav-texto); }
@media (min-width: 1024px) {
  .nav-enlaces { display: flex; align-items: center; gap: 32px; }
  .menu-boton, .menu-panel { display: none !important; }
}

/* ------------------------------------------------------------ portada: el mapa vive sólo aquí */
.hero { position: relative; height: var(--alto-hero, max(100vh, 700px)); height: var(--alto-hero, max(100svh, 700px)); color: var(--tinta); overflow: hidden; }
.hero .mapa { position: absolute; inset: 0; }
.credito-mapa {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 10px; left: var(--gutter);
  margin: 0; font-size: 9.5px; line-height: 1.35; color: var(--tinta); opacity: .85; text-align: right;
}
.hero-texto { position: relative; z-index: 2; padding-top: calc(var(--nav) + 28px); pointer-events: none; }
.hero-texto > * { pointer-events: auto; }
.hero .etiqueta { color: var(--acento-claro); }
.hero h1 { font-weight: 700; font-size: 35px; line-height: 1.04; max-width: 13ch; }
.hero .bajada { font-size: 16px; line-height: 1.5; margin: 14px 0 20px; max-width: 34ch; color: var(--tinta); }
.boton {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--boton-fondo); color: var(--boton-texto); text-decoration: none;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 17px; border-radius: 2px;
}
.boton:hover { background: var(--boton-hover); }
/* señal de que se puede bajar: una línea fina con un tramo que baja */
.bajar { position: absolute; z-index: 2; right: 8px; bottom: 50px; width: 44px; height: 56px; display: grid; place-items: center; }
.bajar span { position: relative; width: 1px; height: 40px; background: rgba(255,255,255,.35); overflow: hidden; }
.bajar span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--tinta); animation: bajar 2.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes bajar { 0% { transform: translateY(-14px); } 70%, 100% { transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { .bajar span::after { animation: none; transform: translateY(13px); } }
.quieto .bajar span::after { animation: none; }
@media (min-width: 1024px) {
  .hero { height: var(--alto-hero, max(100vh, 720px)); height: var(--alto-hero, max(100svh, 720px)); }
  .hero-texto { padding-top: calc(var(--nav) + 64px); }
  .hero h1 { font-size: clamp(44px, 4.4vw, 62px); max-width: 11ch; }
  .hero .bajada { font-size: 18px; max-width: 30ch; margin: 22px 0 30px; }
  .credito-mapa { left: auto; font-size: 11px; }
  .bajar { right: auto; left: var(--gutter); margin-left: -10px; bottom: 40px; }
}
.por-confirmar { display: inline-block; font: 700 10.5px/1.5 "Jakarta", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); border: 1px solid currentColor; padding: 0 5px; border-radius: 2px; vertical-align: 2px; white-space: nowrap; }

/* ------------------------------------------------------------ capítulo 2: ¿desde dónde sales? */
.origenes { background: var(--claro-2); scroll-margin-top: var(--nav); }
.origenes .cabeza h2, .regiones-sec .cabeza h2 { font-weight: 700; }
.selector { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--linea); margin-bottom: 18px; }
.selector button {
  min-height: 44px; padding: 0 6px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  font: 700 17px "Outfit", sans-serif; color: var(--texto-2);
}
.selector button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.selector button:hover { color: var(--texto); }
.org { display: grid; gap: 18px; }
.tarjeta-mapa { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--profundo); border: 1px solid var(--linea); color: var(--tinta); }
.frases ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.frase {
  display: block; width: 100%; min-height: 44px; padding: 12px 10px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--texto);
  font: 500 16px/1.5 "Jakarta", sans-serif; transition: background-color .15s ease;
}
.frase:hover, .frase:focus-visible, .frase.activa { background: var(--claro); }
.frase .por-confirmar { margin-left: 4px; }
@media (min-width: 1024px) {
  .selector { display: flex; gap: 36px; margin-bottom: 28px; }
  .selector button { font-size: 24px; padding: 0 0 10px; min-height: 52px; }
  .org { grid-template-columns: 3fr 2fr; gap: 44px; align-items: stretch; }
  .org .tarjeta-mapa { aspect-ratio: 16 / 11; }
  .org-frases { display: flex; flex-direction: column; justify-content: center; }
  .origenes.seccion, .regiones-sec.seccion { padding: 88px 0; }
  .origenes .cabeza, .regiones-sec .cabeza { margin-bottom: 36px; }
  .frase { font: 500 20px/1.45 "Jakarta", sans-serif; padding: 22px 16px; }
}

/* ------------------------------------------------------------ capítulo 3: las siete regiones */
.regiones-sec { scroll-margin-top: var(--nav); }
.reg-lista { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter); border-bottom: 1px solid var(--linea); }
.reg-lista::-webkit-scrollbar { display: none; }
.reg-lista button {
  flex: none; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  font: 700 16px "Outfit", sans-serif; color: var(--texto-2); white-space: nowrap;
}
.reg-lista .num { display: none; }
.reg-lista button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.reg-vista { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
.reg-vista::-webkit-scrollbar { display: none; }
.reg-panel { flex: 0 0 86%; scroll-snap-align: start; border: 1px solid var(--linea); background: var(--claro); }
.reg-panel figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--oscuro); }
.reg-panel figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--filtro-foto); }
.reg-texto { padding: 14px 16px 6px; }
.reg-panel h3 { font-weight: 700; font-size: 24px; line-height: 1.1; }
.reg-panel .linea { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.reg-panel .fuente { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--texto-2); }
.reg-panel .fuente a { text-underline-offset: 2px; }
.reg-panel .credito { display: block; margin-top: 1px; }
.mini { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-top: 12px; background: var(--profundo); color: var(--tinta); }
.escribe { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 700 15px "Outfit", sans-serif; color: var(--acento); text-underline-offset: 4px; }
.escribe:hover { text-decoration-thickness: 2px; }
.cifra { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .reg { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
  .reg-lista { flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; border-bottom: 0; border-top: 1px solid var(--linea); }
  .reg-lista button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 12px; border-bottom: 1px solid var(--linea); margin: 0; font-size: 20px; text-align: left; }
  .reg-lista .num { display: inline; font: 700 13px "Outfit", sans-serif; color: var(--texto-2); }
  .reg-lista button[aria-selected="true"] { background: var(--claro-2); border-bottom-color: var(--linea); }
  .reg-lista button[aria-selected="true"] .num { color: var(--acento); }
  .reg-lista button:hover { color: var(--texto); }
  .reg-vista { display: block; overflow: visible; margin: 0; padding: 0; }
  .reg-panel { display: none; }
  .reg-panel.activa { display: grid; grid-template-columns: 1fr 1fr; }
  .reg-panel figure { grid-column: 1 / -1; aspect-ratio: 7 / 2; }
  .reg-texto { display: contents; }
  .reg-panel .reg-texto > *:not(.mini) { grid-column: 1; margin-left: 28px; margin-right: 12px; }
  .reg-panel h3 { margin-top: 24px; font-size: 34px; }
  .reg-panel .linea { font-size: 17px; }
  .reg-panel .mini { grid-column: 2; grid-row: 2 / span 6; margin: 24px 24px 24px 12px; align-self: start; aspect-ratio: 4 / 3; }
  .reg-panel .reg-texto > .linea { margin-top: 8px; }
  .reg-panel .escribe { margin-bottom: 20px; }
}


/* regiones: origen, rutas y a quién acudir */
.reg-origen { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.reg-origen span { font: 700 11px "Jakarta", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.reg-origen button { min-height: 44px; padding: 0 2px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: 700 15px "Outfit", sans-serif; color: var(--texto-2); }
.reg-origen button[aria-pressed="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.reg-panel .como { margin-top: 10px; }
.reg-panel .como-t { margin: 0 0 2px; font: 700 11px "Jakarta", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.rutas { list-style: none; margin: 0; padding: 0; }
.ruta { display: block; width: 100%; min-height: 44px; padding: 7px 8px 7px 24px; position: relative; text-align: left; background: none; border: 0; border-top: 1px solid var(--linea); cursor: pointer; font: 600 14px/1.4 "Jakarta", sans-serif; color: var(--texto); }
.ruta::before { content: ""; position: absolute; left: 6px; top: 50%; width: 10px; height: 0; border-top: 3px solid var(--texto-2); }
.rutas li:first-child .ruta::before { border-top-color: var(--acento); }
.ruta:hover, .ruta:focus-visible, .ruta.activa { background: var(--claro-2); }
.ruta .pasando { font-weight: 500; color: var(--texto-2); }
.acudir { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.acudir span { display: block; font: 700 11px "Jakarta", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 2px; }
.acudir a { font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .reg-panel figure { aspect-ratio: 5 / 2; }
  .reg-texto { padding: 10px 14px 2px; }
  .reg-panel h3 { font-size: 22px; }
  .reg-panel .linea { font-size: 14.5px; margin-top: 4px; }
  .reg-panel .fuente { margin-top: 4px; }
  .reg-panel .mini { aspect-ratio: 2 / 1; margin-top: 8px; }
}
@media (min-width: 1024px) {
  .reg-panel .acudir { margin-bottom: 4px; }
}

/* ¿qué necesitas resolver? */
.necesidad { background: var(--claro-2); }
.selector-nec { grid-template-columns: 1fr; border-bottom: 0; gap: 0; }
.selector-nec button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border-bottom: 1px solid var(--linea); border-left: 0; margin: 0; padding: 0 10px; min-height: 52px; }
.selector-nec button[aria-selected="true"] { background: var(--claro); border-bottom: 3px solid var(--acento); }
.cuenta { font: 600 12.5px "Jakarta", sans-serif; color: var(--texto-2); }
.nec { display: grid; gap: 18px; }
.nec-panel ol { list-style: none; margin: 0; padding: 0; }
.nec-fila { display: block; width: 100%; min-height: 44px; padding: 12px 10px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea); cursor: pointer; color: var(--texto); font: 400 15px/1.5 "Jakarta", sans-serif; }
.nec-fila b { display: block; font: 700 19px "Outfit", sans-serif; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; }
.nec-fila:hover b, .nec-fila:focus-visible b { text-decoration-color: var(--acento); }
.nec-panel .fuente { margin: 10px 0 0; font-size: 12px; color: var(--texto-2); }
.nec-mapa { aspect-ratio: 16 / 11; }
.lienzo .m-region.apagada { opacity: .32; }
@media (min-width: 1024px) {
  .selector-nec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
  .necesidad.seccion, .puentes.seccion, .empresas.seccion, .parques.seccion, .guias.seccion { padding: 88px 0; }
  .necesidad .cabeza, .puentes .cabeza, .empresas .cabeza, .guias .cabeza { margin-bottom: 32px; }
  .selector-nec button { min-height: 76px; padding: 0 16px; font-size: 21px; border: 1px solid var(--linea); }
  .selector-nec button[aria-selected="true"] { border-color: var(--linea); border-bottom: 3px solid var(--acento); }
  .nec { grid-template-columns: 2fr 3fr; gap: 44px; align-items: center; }
}

/* puentes: banda oscura con satélite */
.puentes { position: relative; color: var(--tinta); overflow: hidden; background: var(--profundo); scroll-margin-top: var(--nav); }
.puentes .fondo { position: absolute; inset: 0; background: var(--profundo) url("assets/satelite-banda.jpg") center / cover no-repeat; }
.puentes .fondo::after { content: ""; position: absolute; inset: 0; background: rgba(var(--velo-banda), .86); }
.puentes .envoltura { position: relative; }
.puentes .cabeza p { color: var(--tinta); opacity: .9; }
.selector-oscuro { grid-template-columns: repeat(2, 1fr); border-bottom-color: rgba(255,255,255,.25); }
.selector-oscuro button { color: rgba(255,255,255,.75); }
.selector-oscuro button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.selector-oscuro button:hover { color: var(--tinta); }
.puentes-mapa { aspect-ratio: 4 / 3; border-color: rgba(255,255,255,.25); }
.puentes-mapa .m-puente .in { transform: scale(1.5); }
@media (min-width: 1024px) {
  .ptes { display: grid; grid-template-columns: 7fr 5fr; gap: 36px; align-items: start; }
  .mapa.puentes-mapa { aspect-ratio: 4 / 3; position: sticky; top: calc(var(--nav) + 20px); }
  .puentes-panel ul { margin-top: 0; }
}
.contador { position: absolute; z-index: 3; left: 14px; top: 10px; margin: 0; font: 600 13px "Jakarta", sans-serif; color: var(--tinta); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.contador span { font: 800 30px "Outfit", sans-serif; margin-right: 4px; font-variant-numeric: tabular-nums; }
.puentes-panel ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0 32px; }
.pte { display: block; width: 100%; min-height: 44px; padding: 12px 10px; text-align: left; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.2); color: var(--tinta); cursor: pointer; font: 400 13.5px/1.45 "Jakarta", sans-serif; }
.pte b { display: block; font: 700 17px "Outfit", sans-serif; }
.pte i { font-style: normal; opacity: .8; }
.pte.activa, .pte:hover, .pte:focus-visible { background: rgba(255,255,255,.1); }
.pte .fuente-pte { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.pte .por-confirmar { color: var(--tinta); }
.puentes .pte a { color: var(--tinta); }
.credito-sec { margin: 14px 0 0; font-size: 11px; opacity: .8; }
.lienzo .m-puente.elegido .punto { fill: var(--activa); stroke: var(--tinta); }
.lienzo .m-puente.marcado .punto { fill: var(--tinta); stroke: var(--activa); stroke-width: 3; }
.lienzo .m-puente.apagado { opacity: .35; }
.lienzo .m-puente[role="link"] .punto { cursor: pointer; }
@media (min-width: 1024px) {
  .selector-oscuro { display: flex; gap: 36px; }
}

/* empresas */
.empresas { background: var(--claro); }
.selector-dos { grid-template-columns: repeat(2, 1fr); }
.emp { display: grid; gap: 18px; }
.emp-mapa { aspect-ratio: 4 / 3; }
.emp-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.emp-t { display: block; width: 100%; height: 100%; text-align: left; padding: 12px 14px; background: var(--claro); border: 1px solid var(--linea); color: var(--texto); cursor: pointer; font: 400 13.5px/1.45 "Jakarta", sans-serif; transition: border-color .15s ease, opacity .3s ease, transform .3s ease; }
.emp-t b { display: block; font: 700 18px "Outfit", sans-serif; }
.emp-t .donde { display: block; font-size: 12.5px; color: var(--texto-2); margin: 2px 0 4px; }
.emp-t .fuente-e { display: block; font-size: 11.5px; color: var(--texto-2); margin-top: 4px; }
.emp-t.activa, .emp-t:hover, .emp-t:focus-visible { border-color: var(--acento); }
.emp-t.espera { opacity: 0; transform: translateY(8px); }
.lienzo .arco { fill: none; stroke: var(--tinta); stroke-opacity: .85; stroke-width: 1.7; stroke-linecap: round; transition: stroke .15s ease, stroke-width .15s ease, stroke-opacity .15s ease; }
.lienzo .arco.bajo { stroke-opacity: .25; }
.lienzo .arco-golpe { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.lienzo .arco.resaltado { stroke: var(--activa); stroke-opacity: 1; stroke-width: 3; }
.lienzo .m-emp .punto { fill: var(--activa); stroke: var(--tinta); stroke-width: 1.6; }
.lienzo .m-emp.resaltado .punto { fill: var(--tinta); stroke: var(--activa); stroke-width: 3; }
@media (min-width: 640px) { .emp-tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .emp { grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
  .mapa.emp-mapa { position: sticky; top: calc(var(--nav) + 20px); }
}

/* parques */
.parques { background: var(--claro-2); }
.parques .selector-dos { margin-top: 24px; }
.candidatos { list-style: none; margin: 0; padding: 0; }
.candidatos li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 8px 0 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.35; }
.cand-nombre { font-weight: 600; }
.en-verif { font: 700 10px "Jakarta", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); border: 1px solid var(--linea); padding: 1px 5px; border-radius: 2px; }
.cand-escribe { width: 100%; font-size: 12.5px; color: var(--texto-2); text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; }
.pasos-ver { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.pasos-ver li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linea); font: 700 17px "Outfit", sans-serif; }
.pasos-ver li::before { content: ""; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--texto-2); border-radius: 50%; background: center / 12px no-repeat; transition: background-color .3s ease, border-color .3s ease; }
.pasos-ver li.hecho::before, .no-anim .pasos-ver li::before { background-color: var(--acento); border-color: var(--acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
@media (min-width: 640px) { .candidatos { columns: 2; column-gap: 28px; } .candidatos li { break-inside: avoid; } }

/* guías */
.guias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guia { border: 1px solid var(--linea); padding: 16px 18px 8px; }
.guia h3 { font-weight: 700; font-size: 21px; line-height: 1.15; margin-top: 8px; }
.guia p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.en-prep { align-self: flex-start; font: 700 10.5px "Jakarta", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); border: 1px solid var(--linea); padding: 2px 6px; border-radius: 2px; }
@media (min-width: 640px) { .guias-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .guias-lista { grid-template-columns: repeat(4, 1fr); gap: 16px; } .guia { display: flex; flex-direction: column; } .guia .escribe { margin-top: auto; } }


/* cifras: banda delgada bajo la portada */
.cifras { background: var(--claro); border-bottom: 1px solid var(--linea); }
.cifras-lista { list-style: none; margin: 0 auto; padding-top: 28px; padding-bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.cifras-lista li { display: flex; flex-direction: column; }
.cifra-n { margin: 0; font: 600 14px/1.2 "Jakarta", sans-serif; color: var(--texto); }
.cifra-n .grande { display: block; font: 800 34px/1 "Outfit", sans-serif; color: var(--acento); margin-bottom: 4px; }
.cifra-n .cifra-v { font-variant-numeric: tabular-nums; }
.cifra-t { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.cifra-nota { margin: 4px 0 0; font: 700 10.5px "Jakarta", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.fuente-c { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--texto-2); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: flex-end; }
@media (min-width: 1024px) {
  .cifras-lista { grid-template-columns: repeat(4, 1fr); gap: 36px; padding-top: 36px; padding-bottom: 36px; }
  .cifra-n .grande { font-size: 44px; }
}

/* fuente corta */
.fuente-corta { font-size: 12px; color: var(--texto-2); }
.fuente-corta a { text-underline-offset: 2px; }
.puentes .fuente-corta { color: var(--tinta); opacity: .8; }
.puentes .fuente-corta a { color: var(--tinta); }
.emp-t .fuente-e { margin-top: 6px; }

/* rutas alternas en teléfono */
.ver-otra { min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: 700 14px "Outfit", sans-serif; color: var(--acento); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) { .rutas li.alterna { display: none; } .rutas.abierta li.alterna { display: block; } .rutas.abierta + .ver-otra { display: none; } }
@media (min-width: 1024px) { .ver-otra { display: none; } }

/* compara regiones */
.compara { background: var(--claro); }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ficha { min-height: 44px; padding: 0 16px; background: var(--claro); color: var(--texto); border: 1px solid var(--linea); border-radius: 2px; cursor: pointer; font: 700 15px "Outfit", sans-serif; }
.ficha[aria-pressed="true"] { background: var(--oscuro); color: var(--tinta); border-color: var(--oscuro); }
.ficha:hover { border-color: var(--texto-2); }
.tabla-c { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.45; }
.tabla-c thead th { text-align: left; font: 700 18px "Outfit", sans-serif; padding: 10px 10px 8px; border-bottom: 2px solid var(--texto); }
.tabla-c tbody th { text-align: left; vertical-align: top; font: 700 11px "Jakarta", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); padding: 12px 10px; }
.tabla-c td { vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--linea); }
.tabla-c tbody th[scope="row"] { border-bottom: 1px solid var(--linea); width: 22%; }
.tabla-c tr.rubro th { padding: 14px 10px 0; }
.tabla-c td b { font-weight: 700; }
.tabla-c .nueva { animation: entraCol .35s ease both; }
@keyframes entraCol { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabla-c .nueva { animation: none; } }
.nota-compara { margin: 14px 0 0; font-size: 13px; color: var(--texto-2); }

/* a quién acudir */
.acudir-sec { background: var(--claro); }
.guias { background: var(--claro-2); }
.acu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; border-top: 1px solid var(--linea); }
.acu-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.acu-reg { flex: 0 0 auto; min-width: 9.5em; min-height: 32px; padding: 0; background: none; border: 0; text-align: left; font: 700 16px "Outfit", sans-serif; color: var(--texto); }
button.acu-reg { cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; }
button.acu-reg:hover { text-decoration-color: var(--acento); }
.acu-orgs { flex: 1 1 14em; font-size: 15px; }
.acu-lista a { font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 1024px) { .acu-lista { grid-template-columns: 1fr 1fr; } .compara.seccion, .acudir-sec.seccion { padding: 88px 0; } }

/* páginas de texto (aviso, 404) */
.texto-legal { padding: calc(var(--nav) + 48px) 0 72px; }
.texto-legal .envoltura { max-width: calc(720px + 2 * var(--gutter)); }
.texto-legal h1 { font-weight: 700; font-size: 34px; line-height: 1.08; }
.texto-legal h2 { font-weight: 700; font-size: 21px; margin: 32px 0 6px; }
.texto-legal p { margin: 0 0 10px; font-size: 17px; line-height: 1.6; }
.texto-legal .actualizado { color: var(--texto-2); font-size: 14px; margin-top: 10px; }
.texto-legal a:not(.boton) { text-underline-offset: 3px; }
@media (min-width: 1024px) { .texto-legal h1 { font-size: 48px; } }

/* ------------------------------------------------------------ mapa */
:root { --ruta: var(--acento-claro); --activa: var(--acento); --casco: var(--profundo); }
.mapa { position: relative; overflow: hidden; background: var(--profundo); }
.mapa > img.sat { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.hero .mapa > img.sat:not(.detalle) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%); }
.mapa > img.sat.detalle { opacity: 0; transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.mapa > img.sat.detalle.visible { opacity: 1; }
.mapa .velo, .velo-claro { position: absolute; inset: 0; pointer-events: none; }
.velo-claro { background: rgba(var(--velo), .22); }
/* velo: oscuro arriba (texto) en teléfono, a la izquierda en escritorio */
.mapa .velo { background: linear-gradient(180deg, rgba(var(--velo),.92) 0%, rgba(var(--velo),.86) 34%, rgba(var(--velo),.35) 58%, rgba(var(--velo),.18) 80%, rgba(var(--velo),.55) 100%); }
@media (min-width: 1024px) {
  .mapa .velo {
    background:
      linear-gradient(90deg, rgba(var(--velo),.93) 0%, rgba(var(--velo),.86) 28%, rgba(var(--velo),.35) 44%, rgba(var(--velo),.12) 62%, rgba(var(--velo),.2) 100%),
      linear-gradient(180deg, rgba(var(--velo),.55) 0%, rgba(var(--velo),0) 18%);
  }
}
.mapa .sombra {
  position: absolute; inset: 0; pointer-events: none; background: rgba(var(--velo), .34);
  --lx: -999px; --ly: -999px; --lr: 1px;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 0, transparent 38%, #000 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 0, transparent 38%, #000 100%);
}
@media (hover: none) { .mapa .sombra { background: rgba(var(--velo), .2); } }
/* el lienzo se esconde donde está el texto de la portada; guion.js pone los límites */
.mapa > svg.lienzo {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  --ml0: 0px; --ml1: 0px; --mt0: 0px; --mt1: 0px; --mb0: 100%; --mb1: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--ml0), #000 var(--ml1)), linear-gradient(180deg, transparent 0, transparent var(--mt0), #000 var(--mt1), #000 var(--mb0), transparent var(--mb1));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, transparent var(--ml0), #000 var(--ml1)), linear-gradient(180deg, transparent 0, transparent var(--mt0), #000 var(--mt1), #000 var(--mb0), transparent var(--mb1));
  mask-composite: intersect;
}
.lienzo .lim-otros { fill: none; stroke: var(--tinta); stroke-opacity: .26; stroke-width: .8; }
.lienzo .lim-nl { fill: none; stroke: var(--tinta); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 3; }
.lienzo .lim-tx { fill: none; stroke: var(--tinta); stroke-opacity: .78; stroke-width: 1.5; }
.lienzo .rot-pais { font: 600 11px "Jakarta", sans-serif; fill: var(--tinta); fill-opacity: .7; letter-spacing: .32em; }
/* red: base apagada, luz que se enciende desde Monterrey */
.lienzo .r-base { fill: none; stroke: var(--ruta); stroke-opacity: .22; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.lienzo .r-casco { fill: none; stroke: var(--casco); stroke-opacity: .55; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; transition: stroke-width .15s ease; }
.lienzo .r-luz { fill: none; stroke: var(--ruta); stroke-opacity: .72; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; transition: stroke-opacity .2s ease, stroke-width .15s ease; }
.lienzo .r-casco.ruta { stroke-width: 4.6; stroke-opacity: .65; }
.lienzo .r-luz.ruta { stroke-width: 2.1; stroke-opacity: 1; }
.lienzo .r-luz.fino { stroke-width: 1; }
.lienzo .r-luz.encendida { stroke-width: 3.4; stroke-opacity: 1; }
.lienzo .r-casco.encendida { stroke-width: 6.5; stroke-opacity: .75; }
.lienzo.con-foco .r-luz:not(.en-foco):not(.encendida) { stroke-opacity: .32; }
.lienzo.con-foco .r-casco:not(.encendida) { stroke-opacity: .3; }
/* ruta que se dibuja al pasar el puntero por una región */
.lienzo .act-casco { fill: none; stroke: var(--tinta); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; }
.lienzo .act { fill: none; stroke: var(--activa); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; }
.lienzo .act-casco.alt { stroke: var(--casco); stroke-opacity: .7; stroke-width: 5.5; }
.lienzo .act.alt { stroke: var(--tinta); stroke-width: 2.4; }
.lienzo .act, .lienzo .act-casco { transition: opacity .2s ease; }
.lienzo .act.bajo, .lienzo .act-casco.bajo { opacity: .18; }
.lienzo.tenue .r-luz:not(.encendida) { stroke-opacity: .42; }
.lienzo.tenue .r-casco:not(.encendida) { stroke-opacity: .3; }
.lienzo .rot-camino { font: 700 11px "Jakarta", sans-serif; fill: var(--ruta); paint-order: stroke; stroke: var(--casco); stroke-width: 3px; stroke-linejoin: round; letter-spacing: .04em; pointer-events: none; }
/* marcas */
.lienzo g[role="link"] { cursor: pointer; outline: none; }
.lienzo .golpe { fill: transparent; }
.lienzo g[role="link"]:focus-visible .golpe { stroke: var(--tinta); stroke-width: 2; }
.lienzo .apagada { pointer-events: none; }
.lienzo .m-region .punto { fill: var(--tinta); stroke: var(--casco); stroke-width: 2; transition: r .15s ease, fill .15s ease; }
.lienzo .m-region .punto.sec { stroke: none; }
.lienzo .rotulo { font: 700 14px "Outfit", sans-serif; fill: var(--tinta); paint-order: stroke; stroke: var(--casco); stroke-width: 3.5px; stroke-linejoin: round; }
.lienzo .m-region:hover .punto:not(.sec), .lienzo .m-region.foco .punto:not(.sec) { r: 7.5; fill: var(--activa); stroke: var(--tinta); }
.lienzo .m-origen .punto { fill: var(--tinta); stroke: var(--casco); stroke-width: 2; r: 4.5; }
.lienzo .m-origen .rotulo { font: 700 12.5px "Jakarta", sans-serif; stroke-width: 3px; }
.lienzo .m-origen .sub { font: 600 10.5px "Jakarta", sans-serif; fill: var(--tinta); letter-spacing: .14em; paint-order: stroke; stroke: var(--casco); stroke-width: 3px; }
.lienzo .m-origen.actual .punto { fill: var(--activa); stroke: var(--tinta); stroke-width: 2.5; r: 7.5; }
.lienzo .m-origen.actual .rotulo { font: 800 15px "Outfit", sans-serif; stroke-width: 4px; }
.lienzo .m-puente .punto { fill: var(--tinta); stroke: var(--casco); stroke-width: 1.6; }
.lienzo .m-puente.parcial .punto { fill: var(--casco); stroke: var(--tinta); stroke-dasharray: 2 1.5; }
.lienzo .m-puente .rotulo { font: 700 11.5px "Jakarta", sans-serif; stroke-width: 3px; }
.lienzo .m-puente .sub { font: 600 9.5px "Jakarta", sans-serif; fill: var(--tinta); letter-spacing: .1em; paint-order: stroke; stroke: var(--casco); stroke-width: 3px; }
.etq-puntero {
  position: absolute; z-index: 3; pointer-events: none; padding: 6px 10px; max-width: 260px;
  background: rgba(var(--velo), .92); color: var(--tinta); border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  font: 700 13px/1.25 "Jakarta", sans-serif; white-space: nowrap;
}
.etq-puntero small { display: block; font-weight: 500; font-size: 11.5px; opacity: .85; }

/* ------------------------------------------------------------ secciones de abajo */
.seccion { padding: 72px 0; }
.seccion, .metodo { scroll-margin-top: var(--nav); }
.cabeza { display: grid; gap: 12px; margin-bottom: 36px; }
.cabeza h2 { font-size: 30px; line-height: 1.08; }
.cabeza p { margin: 0; font-size: 17px; color: var(--texto-2); max-width: 46ch; }
@media (min-width: 1024px) {
  .seccion { padding: 112px 0; }
  .cabeza { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-bottom: 56px; }
  .cabeza h2 { font-size: 46px; }
  .cabeza p { font-size: 19px; justify-self: end; max-width: 30ch; }
}

/* banda de método */
.metodo { position: relative; color: var(--tinta); overflow: hidden; }
.metodo .fondo { position: absolute; inset: 0; background: var(--profundo) url("assets/satelite-banda.jpg") center / cover no-repeat; }
.metodo .fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--velo-banda),.88) 0%, rgba(var(--velo-banda),.74) 50%, rgba(var(--velo-banda),.42) 100%); }
.metodo .envoltura { position: relative; padding-top: 80px; padding-bottom: 80px; text-align: center; }
.metodo .etiqueta { color: var(--acento-claro); }
.metodo h2 { font-size: 30px; line-height: 1.1; max-width: 22ch; margin: 0 auto; }
.metodo p { font-size: 17px; line-height: 1.6; max-width: 40ch; margin: 18px auto 0; }
.metodo .credito { font-size: 11px; opacity: .8; margin-top: 28px; }
@media (min-width: 1024px) {
  .metodo .envoltura { padding-top: 120px; padding-bottom: 120px; }
  .metodo h2 { font-size: 48px; }
  .metodo p { font-size: 20px; }
}

/* parques */
.parques .rejilla { display: grid; gap: 28px; }
.parques h2 { font-size: 30px; line-height: 1.08; max-width: 16ch; }
.parques p.texto { font-size: 17px; line-height: 1.6; margin: 16px 0 0; max-width: 40ch; }
.parques figure { margin: 0 calc(-1 * var(--gutter)); position: relative; }
.parques figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--filtro-foto); }
.parques figcaption { font-size: 11.5px; color: var(--texto-2); padding: 8px var(--gutter) 0; }
@media (min-width: 1024px) {
  .parques .rejilla { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .parques h2 { font-size: 46px; }
  .parques p.texto { font-size: 19px; }
  .parques figure { margin: 0; }
  .parques figure img { aspect-ratio: 16 / 9; }
  .parques figcaption { padding-left: 0; }
}
/* contacto */
.contacto { text-align: center; border-top: 1px solid var(--linea); }
section.contacto { background: var(--claro-2); }
.contacto h2 { font-size: 32px; line-height: 1.1; }
.contacto p { font-size: 18px; margin: 16px auto 0; max-width: 36ch; }
.contacto a.correo { font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .contacto h2 { font-size: 48px; } .contacto p { font-size: 20px; } }

/* pie */
.pie { background: var(--pie); color: var(--tinta); padding: 56px 0 36px; }
.pie .arriba { display: grid; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent); }
.pie .marca span { font-size: 22px; }
.pie .marca svg { width: 42px; height: 40px; color: var(--acento-claro); }
.pie .lema { margin: 14px 0 0; font-size: 15px; max-width: 40ch; color: var(--tinta); opacity: .9; }
.pie .redes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.pie .redes a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--acento-claro); font-weight: 600; }
.pie .redes a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie .legal { margin: 24px 0 0; font-size: 13px; line-height: 1.55; opacity: .85; }
.pie .legal a { color: var(--tinta); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 1024px) {
  .pie .arriba { grid-template-columns: 1fr auto; align-items: end; }
  .pie .redes { grid-template-columns: repeat(4, auto); gap: 0 32px; }
}

/* ------------------------------------------------------------ conmutador de paleta (sólo de la maqueta, con ?conmutador=1) */
.conmutador {
  display: none; position: fixed; z-index: 100; right: 8px; bottom: 30px;
  align-items: center; gap: 4px; padding: 4px 4px 4px 10px;
  background: #111; color: #fff; border: 1px dashed #888; border-radius: 6px;
  font: 600 11px/1 system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.con-conmutador .conmutador { display: flex; }
.conmutador > span { text-transform: uppercase; letter-spacing: .1em; opacity: .75; margin-right: 2px; }
.conmutador button {
  min-height: 40px; padding: 0 10px; background: transparent; color: #fff; border: 1px solid #555; border-radius: 4px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.conmutador button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.conmutador button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 1023px) { .conmutador { position: static; justify-content: center; border-radius: 0; box-shadow: none; flex-wrap: wrap; } }