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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-texto);
  font-size: var(--t-3-size);
  line-height: var(--t-3-lh);
  letter-spacing: var(--t-3-ls);
  color: var(--carbon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;

  background: var(--sup-1);
  background:
    var(--grad-lienzo),
    var(--sup-1);
  background-attachment: fixed;
}

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

a { color: var(--tinta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

::selection { background: var(--ladrillo-tinte); color: var(--tinta); }

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

h1, h2, h3, h4 { font-weight: 500; color: var(--tinta); text-wrap: balance; }

.t-1 {
  font-size: var(--t-1-size); line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase;
}
.t-2 { font-size: var(--t-2-size); line-height: var(--t-2-lh); letter-spacing: var(--t-2-ls); font-weight: var(--t-2-w); }
.t-3 { font-size: var(--t-3-size); line-height: var(--t-3-lh); letter-spacing: var(--t-3-ls); font-weight: var(--t-3-w); }
.t-4 { font-size: var(--t-4-size); line-height: var(--t-4-lh); letter-spacing: var(--t-4-ls); font-weight: var(--t-4-w); }
.t-5 { font-size: var(--t-5-size); line-height: var(--t-5-lh); letter-spacing: var(--t-5-ls); font-weight: var(--t-5-w); }
.t-6 { font-size: var(--t-6-size); line-height: var(--t-6-lh); letter-spacing: var(--t-6-ls); font-weight: var(--t-6-w); }
.t-7 { font-size: var(--t-7-size); line-height: var(--t-7-lh); letter-spacing: var(--t-7-ls); font-weight: var(--t-7-w); }
.t-8 {
  font-size: var(--t-8-size); line-height: var(--t-8-lh);
  letter-spacing: var(--t-8-ls); font-weight: var(--t-8-w);
  font-variant-numeric: tabular-nums;
}

.nombre {
  font-family: var(--f-nombre);
  font-weight: 600;
  letter-spacing: -.019em;
}

.icono-svg { display: block; flex-shrink: 0; }

.rotulo {
  font-size: var(--t-1-size); line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase; color: var(--tinta-3);
}

.suave { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }

.prosa { max-width: var(--ancho-prosa); }

.prosa-corta { max-width: 48ch; }

.prosa-centro { max-width: 48ch; margin-inline: auto; }
.prosa p + p { margin-top: var(--e-4); }

.btn,
.btn-1, .btn-2, .btn-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  height: var(--h-2);
  padding: 0 var(--e-4);
  font-family: var(--f-texto);
  font-size: var(--t-3-size);
  font-weight: 500;
  letter-spacing: var(--t-3-ls);
  font-weight: 550;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva),
              box-shadow var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva);
}
.btn:hover, .btn-1:hover, .btn-2:hover, .btn-3:hover { text-decoration: none; }

.btn-1 {
  background: var(--grad-luz);
  color: var(--sobre-acento);
  border-color: transparent;
  font-weight: 650;
  box-shadow: var(--brillo);
}
.btn-1:hover {
  background: var(--grad-luz-viva);
  border-color: transparent;
  color: var(--sobre-acento);
  box-shadow: var(--brillo-fuerte);
}

.btn-1:active {
  background: var(--grad-luz-viva);
  box-shadow: var(--s-1);
  transform: translateY(1px);
}

.btn-2 { background: var(--sup-3); color: var(--carbon); border-color: var(--trazo); }
.btn-2:hover { background: var(--sup-1); border-color: var(--carbon-3); }

.btn-3 { color: var(--carbon-2); padding: 0 var(--e-3); }
.btn-3:hover { color: var(--carbon); background: var(--sup-1); }

.btn-alto { height: var(--h-3); padding: 0 var(--e-5); font-size: var(--t-4-size); }
.btn-bajo { height: var(--h-1); padding: 0 var(--e-3); font-size: var(--t-2-size); }
.btn-ancho { width: 100%; }

.btn-peligro { color: var(--peligro); }
.btn-peligro:hover { color: var(--peligro); background: var(--peligro-tinte); }

.btn-2.btn-peligro { border-color: var(--peligro); }
.btn-2.btn-peligro:hover { border-color: var(--peligro); }

.btn-1.btn-peligro {
  background: var(--peligro);
  color: var(--sup-2);
  box-shadow: var(--s-1);
}
.btn-1.btn-peligro:hover { background: var(--peligro); box-shadow: var(--s-2); }

.btn-1:disabled, .btn-2:disabled, .btn-3:disabled, button:disabled {
  opacity: .45; cursor: not-allowed;
}

input:disabled, select:disabled, textarea:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--cal-0);
  border-style: dashed;
}

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-2); height: var(--h-2); padding: 0;
  font: inherit;
  border: 1px solid var(--trazo); border-radius: var(--r-2);
  background: var(--sup-2); color: var(--carbon); cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva);
}
.btn-icono:hover { background: var(--cal-3); }

.segmentado {
  display: flex;

  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--sup-0);
  border-radius: var(--r-2);
}

.segmento {

  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;

  height: var(--h-1);
  padding: 0 var(--e-2);
  font-family: var(--f-texto);
  font-size: var(--t-2-size);
  font-weight: 500;
  line-height: 1;
  color: var(--carbon-2);
  text-align: center;
  text-decoration: none;
  background: none;
  border: 0;

  border-radius: calc(var(--r-2) - 3px);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva),
              box-shadow var(--dur-1) var(--curva);
}

.segmento .icono-svg {
  flex-shrink: 0;
  opacity: .68;
  transition: opacity var(--dur-1) var(--curva);
}

.segmento-texto { white-space: nowrap; }

.segmento:hover { color: var(--carbon); }
.segmento:hover .icono-svg { opacity: 1; }

.segmento[aria-pressed="true"],
.segmento[aria-current="page"] {
  color: var(--acento-texto);
  font-weight: 600;
  background: var(--sup-2);
  box-shadow: var(--s-1);
}
.segmento[aria-pressed="true"] .icono-svg,
.segmento[aria-current="page"] .icono-svg { opacity: 1; }

.segmento:focus-visible { outline: var(--foco-outline); outline-offset: 1px; }

.segmento[disabled] { opacity: .45; cursor: default; }

.segmento-cuenta {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  font-size: var(--t-1-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--r-full);
}
.segmento-cuenta:empty { display: none; }

label, .etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-2-size);
  font-weight: 600;
  color: var(--tinta-2);
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="tel"], input[type="search"], input[type="number"], input[type="time"],
input[type="date"], textarea, select, .campo {
  width: 100%;

  max-width: var(--ancho-campo);
  height: var(--h-2);
  padding: 0 var(--e-4);
  font-family: var(--f-texto);
  font-size: var(--t-3-size);
  color: var(--carbon);
  background: var(--sup-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

textarea { height: auto; min-height: 7rem; padding: var(--e-3) var(--e-4); line-height: 1.55; resize: vertical; }

input:focus, textarea:focus, select:focus, .campo:focus {
  outline: none;
  border-color: var(--foco-color);
  box-shadow: 0 0 0 3px var(--acento-tinte);
}

input::placeholder, textarea::placeholder { color: var(--tinta-3); }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--e-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%),
    linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; accent-color: var(--acento-texto); cursor: pointer;
}

input[type="file"] {
  height: auto; padding: var(--e-2); font-size: var(--t-2-size);
  color: var(--tinta-2); cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: var(--e-3); height: var(--h-1); padding: 0 var(--e-3);
  font-family: inherit; font-size: var(--t-2-size); font-weight: 500;
  color: var(--tinta); background: var(--cal-2);
  border: 1px solid var(--trazo); border-radius: var(--r-1); cursor: pointer;
}

.grupo-campo { margin-bottom: var(--e-5); }

.ayuda {
  margin-top: var(--e-2);
  font-size: var(--t-2-size);
  color: var(--tinta-3);
  max-width: var(--ancho-prosa);
}

.casilla {
  display: flex; align-items: flex-start; gap: var(--e-3);
  margin: 0;
  font-size: var(--t-3-size);
  line-height: var(--t-3-lh);
  font-weight: 400;
  color: var(--tinta);
  cursor: pointer;
}
.casilla input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.casilla strong { font-weight: 600; }

.ficha {
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
}

.ficha-alzada {
  background: var(--sup-2);
  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  box-shadow: var(--s-2);
  padding: var(--e-5);
}

.ficha-formulario { padding: clamp(var(--e-4), 4vw, var(--e-6)); }

.ficha-enlace {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-2) var(--curva),
              box-shadow var(--dur-2) var(--curva);
}
.ficha-enlace:hover {
  text-decoration: none;
  border-color: var(--trazo);
  box-shadow: var(--s-2);
}
.ficha-enlace:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

.zona-peligro { border-color: var(--peligro); }
.zona-peligro > .ficha-cabecera h2 { color: var(--peligro); }

.aviso-trato {
  border-left: 3px solid var(--acento);
  background: var(--acento-tinte);
}

.aviso-trato summary::-webkit-details-marker { display: none; }

.aviso-trato summary {
  list-style: none;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aviso-trato summary:hover { color: var(--carbon); }

.mensaje-equipo {
  border-left: 3px solid var(--ladrillo);
  background: var(--ladrillo-tinte);
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ficha-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
}

.ficha-pie {
  display: flex; gap: var(--e-2); flex-wrap: wrap;
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.filete { height: 1px; background: var(--linea); border: 0; margin: var(--e-6) 0; }

.sello {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 8px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  white-space: nowrap;
  line-height: 1;
}

.sello-pro { color: var(--sello-pro); background: var(--sello-pro-fondo); }

.sello-premium {
  color: var(--sello-premium);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sello-premium-fondo), var(--sello-premium-fondo)) padding-box,
    var(--grad-luz) border-box;
  box-shadow: var(--brillo);
}

.sello-pro::before,
.sello-premium::before {
  content: ''; width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

.promo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--r-3);
  background:
    linear-gradient(var(--acento-tinte), var(--acento-tinte)) padding-box,
    var(--grad-luz) border-box;
  font-size: var(--t-4-size);
  color: var(--carbon);
}

.promo-rotulo {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--grad-luz);
  color: var(--sobre-acento);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1;
}

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: var(--e-5);
  align-items: start;
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--sup-2);

  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  box-shadow: var(--s-tarjeta);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-2) var(--curva),
              transform var(--dur-2) var(--curva),
              border-color var(--dur-2) var(--curva);
}
.tarjeta:hover, .tarjeta:focus-visible {
  text-decoration: none;

  border-color: var(--filo-fuerte);
  box-shadow: var(--s-tarjeta-alta);
  transform: translateY(-2px);
}
.tarjeta:focus-visible { outline: var(--foco-outline); outline-offset: 3px; }

.tarjeta-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cal-0);
  overflow: hidden;
}
.tarjeta-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--curva);
}
.tarjeta:hover .tarjeta-foto img { transform: scale(1.03); }

.tarjeta-sello { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 2; }

.tarjeta-logo {
  position: absolute; left: var(--e-4); bottom: calc(var(--e-4) * -1);
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--cal-3);
  border: 3px solid var(--cal-2);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 20px; color: var(--tinta-2);
  z-index: 2;
}

.tarjeta-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-2); }
.tarjeta-foto + .tarjeta-cuerpo { padding-top: var(--e-6); }

.tarjeta-nombre {
  font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
  color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-meta {
  font-size: var(--t-2-size); color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-resumen {
  font-size: var(--t-2-size); line-height: 1.5; color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-pie {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-top: var(--e-1);
}

.tarjeta-sin-foto {
  background: var(--cal-2);
  box-shadow: none;
  border: 1px solid var(--linea);
}
.tarjeta-sin-foto:hover { box-shadow: var(--s-1); transform: none; border-color: var(--trazo); }
.tarjeta-sin-foto .tarjeta-cuerpo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
}
.tarjeta-sin-foto .tarjeta-inicial {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--cal-0);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 18px; color: var(--tinta-2);
}
.tarjeta-sin-foto .tarjeta-nombre { font-size: 15.5px; -webkit-line-clamp: 1; }

.tarjeta-compacta-texto { min-width: 0; display: block; }
.tarjeta-compacta-texto .tarjeta-nombre,
.tarjeta-compacta-texto .tarjeta-meta { display: block; }
.tarjeta-compacta-texto .estado { margin-top: 2px; font-size: var(--t-2-size); }

.tarjeta-premium { grid-column: span 2; }
.tarjeta-premium .tarjeta-foto { aspect-ratio: 16 / 9; }
.tarjeta-premium .tarjeta-nombre { font-size: 21px; }
.tarjeta-premium .tarjeta-logo { width: 60px; height: 60px; font-size: 24px; }

@media (max-width: 719px) {

  .tarjeta-premium { grid-column: span 1; }
}

.tarjeta-tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tarjeta-tira img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cal-0); }

.puntaje { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-2-size); }
.puntaje b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.puntaje .estrella { color: var(--ambar-texto); }
.puntaje-vacio { font-size: var(--t-2-size); color: var(--tinta-3); }

.estado {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-3-size);
}

.estado::before {
  content: '';
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: var(--r-full);
}

.estado-abierto { color: var(--monte); font-weight: 600; }
.estado-abierto::before { background: var(--monte); }

.estado-cerrado { color: var(--tinta-2); }
.estado-cerrado::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

.estado-sin-horario { color: var(--tinta-3); }
.estado-sin-horario::before { display: none; }

.estado-insignia {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--h-1); padding: 0 var(--e-4);
  background: var(--sup-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  font-size: var(--t-3-size); font-weight: 500;
}

.estado-insignia.estado-abierto { background: var(--verde-tinte); border-color: transparent; }
.estado-insignia::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--r-full);
}
.estado-insignia.estado-abierto::before { background: var(--monte); }
.estado-insignia.estado-cerrado::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.estado-insignia.estado-sin-horario::before { display: none; }

.etiqueta-dato {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 3px var(--e-3);
  font-size: var(--t-2-size); font-weight: 500;
  color: var(--carbon-2); background: var(--sup-1);
  border: 1px solid transparent; border-radius: var(--r-full);
  white-space: nowrap;
}
.etiqueta-dato.acento { color: var(--acento-texto); background: var(--acento-tinte); }
.etiqueta-dato.viva { color: var(--verde); background: var(--verde-tinte); }

.etiqueta-dato.zona { color: var(--indigo); background: var(--indigo-tinte); }

.etiqueta-dato.atencion { color: var(--ambar-texto); background: var(--ambar-fondo); }
.etiqueta-dato.peligro { color: var(--peligro); background: var(--peligro-tinte); }

.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  border-left: 3px solid;
  border-radius: var(--r-1) var(--r-2) var(--r-2) var(--r-1);
  font-size: var(--t-3-size);
}

.aviso > * { max-width: var(--ancho-prosa); }
.aviso-info    { background: var(--sup-2); border-color: var(--trazo); color: var(--carbon-2); }
.aviso-bien    { background: var(--verde-tinte); border-color: var(--verde); color: var(--carbon); }

.aviso-atencion{ background: var(--ambar-fondo); border-color: var(--ambar-texto); color: var(--ambar-texto); }
.aviso-atencion a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aviso-error   { background: var(--peligro-tinte); border-color: var(--peligro); color: var(--peligro); }

.avisos-hoja { padding-top: var(--e-4); padding-bottom: 0; }

.avisos-flotantes {
  position: fixed;
  top: calc(var(--h-4) + var(--e-3));
  left: 50%;
  transform: translateX(-50%);

  z-index: 940;

  width: min(var(--ancho-ficha), calc(100vw - var(--e-6)));

  pointer-events: none;
}

.avisos-flotantes .aviso {
  margin-bottom: var(--e-2);
  pointer-events: none;

  box-shadow: var(--s-3);
}
.avisos-flotantes .aviso a,
.avisos-flotantes .aviso button { pointer-events: auto; }

.barra {
  height: 6px; width: 100%;
  background: var(--cal-0);
  border-radius: var(--r-1);
  overflow: hidden;
}
.barra > span { display: block; height: 100%; background: var(--tinta-2); }

.tira-deslizante {
  overflow-x: auto;
  overscroll-behavior-x: contain;

  --fondo-tira: var(--sup-1);

  background:

    linear-gradient(to right, var(--fondo-tira) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--fondo-tira) 40%, transparent) right center / 28px 100% no-repeat local,

    linear-gradient(to right, var(--filo-fuerte), transparent) left center / 22px 100% no-repeat scroll,
    linear-gradient(to left,  var(--filo-fuerte), transparent) right center / 22px 100% no-repeat scroll;
}

.tira-deslizante { scrollbar-width: thin; scrollbar-color: var(--trazo) transparent; }
.tira-deslizante::-webkit-scrollbar { height: 8px; }
.tira-deslizante::-webkit-scrollbar-track { background: transparent; }
.tira-deslizante::-webkit-scrollbar-thumb {
  background: var(--trazo);
  border-radius: var(--r-full);

  border: 2px solid transparent;
  background-clip: padding-box;
}
.tira-deslizante::-webkit-scrollbar-thumb:hover { background: var(--carbon-3); }

.invitacion {
  position: fixed; z-index: 960;
  left: var(--e-4); right: var(--e-4);

  bottom: 0;
  transform: translateY(calc(100% + var(--e-5)));
  opacity: 0;

  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;

  max-width: min(var(--ancho-hoja), 72rem);
  margin: 0 auto;
  padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4);

  background: var(--vidrio);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid var(--filo-fuerte);
  border-radius: var(--r-3);
  box-shadow: var(--s-tarjeta-alta);

  transition: transform var(--dur-3) var(--curva), opacity var(--dur-3) var(--curva);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .invitacion { background: var(--sup-2); }
}

.invitacion-visible {
  transform: translateY(calc(-1 * var(--e-4)));
  opacity: 1;
}

.invitacion-texto { flex: 1 1 260px; min-width: 0; }

.invitacion-titulo {
  margin: 0;
  font-size: var(--t-4-size); font-weight: 650;
  letter-spacing: var(--t-4-ls);
  color: var(--carbon);
}

.invitacion-detalle {
  margin: 2px 0 0;
  font-size: var(--t-2-size);
  color: var(--carbon-2);
}

.invitacion-detalle strong { color: var(--carbon); font-weight: 650; }

.invitacion-acciones {
  display: flex; align-items: center; gap: var(--e-3);
  flex: 0 0 auto;
}

.invitacion-entrar {
  font-size: var(--t-2-size);
  color: var(--carbon-2);
  white-space: nowrap;
}
.invitacion-entrar:hover { color: var(--carbon); }

.invitacion-cerrar {
  position: absolute; top: 2px; right: 2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font: inherit; font-size: 20px; line-height: 1;
  color: var(--carbon-3);
  background: none; border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
}
.invitacion-cerrar:hover { color: var(--carbon); background: var(--sup-1); }
.invitacion-cerrar:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

@media (max-width: 560px) {
  .invitacion {
    left: var(--e-2); right: var(--e-2);
    flex-direction: column; align-items: stretch;
    gap: var(--e-3);
    padding: var(--e-4);

  }

  .invitacion-titulo { padding-right: var(--e-6); }
  .invitacion-acciones { flex-direction: column-reverse; align-items: stretch; }
  .invitacion-acciones .btn-1 { width: 100%; }
  .invitacion-entrar { text-align: center; }
}

.franja-suplantacion {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-2) var(--e-4);
  background: var(--ambar-fondo);
  color: var(--ambar-texto);
  font-size: var(--t-2-size);
  border-bottom: 1px solid var(--filo-fuerte);
}

.franja-suplantacion-texto { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; min-width: 0; }
.franja-suplantacion-detalle { opacity: .8; }

.franja-suplantacion-volver {
  height: var(--h-1);
  padding: 0 var(--e-4);
  font: inherit; font-weight: 650;
  color: var(--ambar-fondo);
  background: var(--ambar-texto);
  border: 0; border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
}
.franja-suplantacion-volver:hover { opacity: .88; }
.franja-suplantacion-volver:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

body:has(.franja-suplantacion) .app { height: calc(100dvh - var(--h-1) - var(--e-4)); }

.masthead {
  height: var(--h-4);

  background: var(--vidrio);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--filo);
  position: sticky; top: 0; z-index: 900;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: var(--sup-2); }
}

.masthead-interior {
  height: 100%;
  max-width: var(--ancho-hoja);
  margin-inline: auto;
  padding-inline: var(--canal);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: nowrap;
}

.modo-app .masthead-interior { max-width: none; }

.marca {
  display: inline-flex; align-items: center; gap: 7px;

  min-height: var(--h-1);
  font-family: var(--f-nombre); font-size: 20px; font-weight: 700;
  letter-spacing: -.028em;
  color: var(--carbon); text-decoration: none; white-space: nowrap;
}
.marca:hover { text-decoration: none; }

.marca::after {
  content: ''; width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--acento); flex-shrink: 0;
  align-self: flex-start; margin-top: 4px;
}

.marca-bajada {
  font-size: var(--t-1-size); letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase; color: var(--tinta-3); white-space: nowrap;
}

.masthead-nav { display: flex; align-items: center; gap: var(--e-1); flex-wrap: nowrap; }

.nav-enlace {
  display: inline-flex; align-items: center;
  height: var(--h-1); padding: 0 var(--e-4);
  font-size: var(--t-3-size); font-weight: 500; color: var(--carbon-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.nav-enlace:hover { color: var(--carbon); background: var(--sup-1); text-decoration: none; }

.nav-enlace[aria-current="page"] {
  color: var(--acento-texto); background: var(--sup-0); font-weight: 600;
}

.nav-filete { width: 1px; height: 18px; background: var(--linea); margin: 0 var(--e-2); flex-shrink: 0; }

@media (min-width: 768px) and (max-width: 1099px) {
  .masthead-nav { gap: 0; }

  .nav-enlace {
    padding: 0 var(--e-2);
    font-size: var(--t-2-size);
  }

  .nav-filete { margin: 0 var(--e-1); }
}

.barra-inferior { display: none; }

:root { --barra-abajo: 0px; }

@media (max-width: 767px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  :root { --barra-abajo: 56px; }

  .barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--vidrio);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-top: 1px solid var(--linea);
  }

  .barra-inferior a {
    display: grid; place-items: center; gap: 3px;
    min-height: 56px; padding: var(--e-2) var(--e-1);
    font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
    color: var(--carbon-3); text-decoration: none;
  }
  .barra-inferior a:hover { text-decoration: none; }

  .barra-inferior a[aria-current="page"] { color: var(--carbon); font-weight: 600; }
  .barra-inferior a[aria-current="page"] .icono { color: var(--acento-texto); }
  .barra-inferior .icono { display: grid; place-items: center; line-height: 1; }

  body { padding-bottom: calc(var(--barra-abajo, 0px) + env(safe-area-inset-bottom, 0px)); }

  .invitacion {
    bottom: calc(var(--barra-abajo, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 945;
  }
}

@media (max-width: 400px) {
  .barra-inferior a {
    font-size: 9.5px;
    padding-inline: 2px;
  }
}

.pie {
  background: var(--sup-2);
  border-top: 1px solid var(--linea);
  margin-top: var(--e-9);
}
.pie-interior {
  max-width: var(--ancho-hoja); margin: 0 auto;
  padding-block: var(--e-6);
  padding-inline: var(--canal);
  font-size: var(--t-2-size); color: var(--carbon-3);
}

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-5) var(--e-6);
  padding-bottom: var(--e-6);
}
.pie-columna ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-1);
}
.pie-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-1-size);
  line-height: var(--t-1-lh);
  letter-spacing: var(--t-1-ls);
  font-weight: var(--t-1-w);
  text-transform: uppercase;
  color: var(--carbon-2);
}
.pie-columna a {
  color: var(--carbon-3);
  text-decoration: none;

  display: inline-flex; align-items: center;
  min-height: var(--tocable-chico);
  transition: color var(--dur-1) var(--curva);
}
.pie-columna a:hover,
.pie-columna a:focus-visible { color: var(--acento-texto); }

.pie-firma {
  border-top: 1px solid var(--linea);
  padding-top: var(--e-4);
  display: flex; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}

.hoja {
  max-width: var(--ancho-hoja); margin: 0 auto;
  padding-block: var(--e-7);
  padding-inline: var(--canal);
}
.hoja-angosta {
  max-width: var(--ancho-ficha); margin: 0 auto;
  padding-block: var(--e-7);
  padding-inline: var(--canal);
}

.panel-cuerpo {
  display: grid;

  grid-template-columns: clamp(12.5rem, 15vw, 16.5rem) minmax(0, 1fr);
  align-items: start;
}

.panel-nav {
  position: sticky; top: var(--panel-tope, 0px);
  display: grid; align-content: start; gap: 2px;
  padding: var(--e-4) var(--e-3);
  height: calc(100dvh - var(--panel-tope, 0px));
  background: var(--sup-2);
  border-right: 1px solid var(--linea);
  min-width: 0;
}

.panel-nav a {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 9px var(--e-3);
  font-size: var(--t-3-size); font-weight: 500;
  color: var(--tinta-2);
  border-radius: var(--r-2);
  text-decoration: none;
}
.panel-nav a:hover { background: var(--sup-1); color: var(--tinta); text-decoration: none; }
.panel-nav a[aria-current="page"] {
  background: var(--acento-tinte);
  color: var(--acento-texto);
  font-weight: 650;
}

.panel-nav-grupo {
  margin: var(--e-4) 0 2px;
  padding: 0 var(--e-3);
  font-size: var(--t-1-size);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-nav-grupo:first-child { margin-top: 0; }

.panel-nav-cuenta {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-1-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--peligro);
  background: var(--peligro-tinte);
  border-radius: var(--r-full);
}

.panel-nav-salir { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid var(--linea); }

.panel-cuerpo-persona { --panel-tope: var(--h-4); }

.panel-nav .panel-plan {
  display: block;
  margin-bottom: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--sup-1);
  color: var(--tinta);
  text-decoration: none;
}
.panel-nav .panel-plan:hover {
  border-color: var(--trazo);
  background: var(--sup-1);
  text-decoration: none;
}

.panel-plan-rotulo {
  display: block;
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-plan-nombre {
  display: block; margin-top: 1px;
  font-size: var(--t-4-size); font-weight: 650;
  color: var(--tinta);
}

@media (max-width: 900px) {
  .panel-nav .panel-plan { display: none; }
}

.panel-hoja {
  min-width: 0;
  padding-block: var(--e-6) var(--e-9);
  padding-inline: var(--canal);
  width: min(100%, var(--ancho-hoja));

  margin-inline: auto;
}

.panel-hoja > .hoja { padding-inline: 0; padding-block: 0; max-width: none; }

.panel-hoja > .hoja-angosta {
  padding-inline: 0;
  padding-block: 0;
  margin-inline: 0 auto;
}

.panel-titulo { margin-bottom: var(--e-6); }
.panel-titulo h1 {
  margin: 0;
  font-size: var(--t-6-size); font-weight: 650; letter-spacing: -.021em;
}
.panel-titulo p { margin: var(--e-2) 0 0; color: var(--tinta-2); max-width: 68ch; }

.panel-titulo-accion {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}

.panel-ficha {

  min-width: 0;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
}
.panel-ficha > h2 {
  margin: 0 0 var(--e-4);
  font-size: var(--t-4-size); font-weight: 650;
}
.panel-ficha > .ayuda { margin: 0 0 var(--e-4); }

.panel-ficha > table { display: block; overflow-x: auto; max-width: 100%; }

.panel-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-4);
}

.panel-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.panel-cifra {
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-4) var(--e-5);
}

.panel-cifra b,
.panel-cifra > strong {
  display: block;
  font-size: var(--t-6-size); font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.panel-cifra span:not(.pastilla) {
  display: block; margin-top: 2px;
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.panel-cifra > .ayuda { margin: var(--e-2) 0 0; }

.panel-cifra.alerta b,
.panel-cifra.alerta > strong { color: var(--ambar-texto); }

.panel-cifra > .pastilla { white-space: normal; }

.panel-cifra-enlace {
  display: block;
  color: inherit;
  transition: border-color var(--dur-1) var(--curva), background var(--dur-1) var(--curva);
}
.panel-cifra-enlace:hover {
  border-color: var(--trazo);
  background: var(--sup-3);
  text-decoration: none;
}
.panel-cifra-enlace:focus-visible {
  outline: var(--foco-outline);
  outline-offset: 2px;
}

.panel-cifra span.panel-cifra-ir {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-2-size);
  color: var(--acento-texto);

  text-transform: none; letter-spacing: normal;
}

.panel-pie-acciones {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}
.panel-pie-acciones .ayuda { margin: 0; }

@media (max-width: 599px) {
  .panel-pie-acciones > form { width: 100%; }
  .panel-pie-acciones .btn-1,
  .panel-pie-acciones .btn-2 { width: 100%; justify-content: center; }
}

.lista-beneficios {
  display: grid; gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}
.lista-beneficios li {
  display: flex; align-items: baseline; gap: var(--e-2);
  font-size: var(--t-3-size);
}

.lista-beneficios li::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 11px;
  margin-top: 3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: .75;
}

.datos-suscripcion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-4);
  margin: var(--e-4) 0 0;
}
.datos-suscripcion dt {
  font-size: var(--t-1-size); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.datos-suscripcion dd {
  margin: 2px 0 0;
  font-size: var(--t-4-size); font-weight: 600;
  color: var(--tinta);
}

@media (max-width: 900px) {
  .panel-cuerpo { grid-template-columns: 1fr; }

  .panel-nav {
    position: static;
    height: auto;
    display: flex; gap: var(--e-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: var(--e-3) var(--e-4) var(--e-2);
    border-right: 0; border-bottom: 1px solid var(--linea);

    background:
      linear-gradient(to right, var(--sup-2) 40%, transparent) left center / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--sup-2) 40%, transparent) right center / 28px 100% no-repeat local,
      linear-gradient(to right, var(--filo-fuerte), transparent) left center / 22px 100% no-repeat scroll,
      linear-gradient(to left,  var(--filo-fuerte), transparent) right center / 22px 100% no-repeat scroll,
      var(--sup-2);

    scrollbar-width: thin;
    scrollbar-color: var(--trazo) transparent;
  }

  .panel-nav::-webkit-scrollbar { height: 8px; }
  .panel-nav::-webkit-scrollbar-track { background: transparent; }
  .panel-nav::-webkit-scrollbar-thumb {
    background: var(--trazo);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .panel-nav a { flex: 0 0 auto; white-space: nowrap; }
  .panel-nav-salir { margin: 0; padding: 0; border: 0; }

  .panel-nav-grupo { display: none; }

  .panel-hoja { padding-block: var(--e-5) var(--e-8); }
}

body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; min-width: 0; }

.pagina-centrada { display: grid; align-content: center; }

.ficha-cuerpo {
  max-width: var(--ancho-comercio);
  margin: 0 auto;
  padding-block: var(--e-7) var(--e-9);
  padding-inline: var(--canal);
  display: grid;

  grid-template-columns: minmax(0, 1fr) clamp(18rem, 26%, 23.75rem);
  gap: var(--e-7);
  align-items: start;
}

.ficha-principal { min-width: 0; }

.ficha-lateral {
  min-width: 0;
  position: sticky;

  top: calc(var(--h-4) + var(--e-3));
  display: grid;
  gap: var(--e-5);
}

.ficha-lateral .seccion { margin-bottom: 0; }

.ficha-lateral > .seccion {
  background: var(--sup-2);
  border: 1px solid var(--filo);
  border-radius: var(--r-3);
  padding: var(--e-4);
}

.ficha-lateral .seccion-cabecera {
  margin-bottom: var(--e-3);
  padding-bottom: 0;
  border-bottom: 0;
}

.ficha-lateral .seccion-cabecera h2 { font-size: var(--t-4-size); }

@media (max-width: 900px) {
  .ficha-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-6);
    padding-block: var(--e-5) var(--e-8);
  }

  .ficha-lateral { position: static; }
}

.seccion { margin-bottom: var(--e-8); }

.seccion-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  margin-bottom: var(--e-5); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trazo);
}

.rejilla { display: grid; gap: var(--e-4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fila-fin { margin-left: auto; }
.pila { display: grid; gap: var(--e-3); }

.pila-junta { gap: var(--e-2); }

.pila-suelta { gap: var(--e-5); }

.fila-entre  { justify-content: space-between; }
.fila-centro { justify-content: center; }
.fila-derecha { justify-content: flex-end; }

.fila-arriba { align-items: flex-start; }

.fila-junta { gap: var(--e-2); }

.fila-firme { flex-wrap: nowrap; }
.fila-firme > .crece { min-width: 0; flex: 1 1 auto; }

.ficha-columna { display: flex; flex-direction: column; gap: var(--e-3); }
.ficha-columna > .ficha-pie { margin-top: auto; }

.empuja-abajo { margin-top: auto; }

.plan-pie { margin-top: auto; }

.avatar-circulo {
  flex: none;
  display: grid; place-items: center;
  width: var(--h-2); height: var(--h-2);
  object-fit: cover;

  overflow: hidden;
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  color: var(--tinta-3);
  background: var(--cal-0);
  border-radius: var(--r-full);
}
.avatar-circulo-chico { width: 32px; height: 32px; font-size: var(--t-3-size); }

.vacio {
  padding: var(--e-8) var(--e-5);
  text-align: center;
  color: var(--tinta-3);
}

.vacio .ayuda,
.vacio .prosa,
.centrado .ayuda,
.centrado .prosa,
.galeria-falta .ayuda { margin-inline: auto; }
.vacio-titulo { font-family: var(--f-nombre); font-size: var(--t-6-size); color: var(--tinta-2); margin-bottom: var(--e-2); }

.portada-hero {
  background:
    radial-gradient(120% 130% at 12% -10%, var(--lavada) 0%, var(--lavada-fin) 58%),
    var(--sup-2);
  border-bottom: 1px solid var(--linea);
}
.portada-hero-interior {
  max-width: var(--ancho-hoja);
  margin: 0 auto;
  padding-block: var(--e-8) var(--e-7);
  padding-inline: var(--canal);
}

.portada-titulo {
  font-family: var(--f-nombre);
  font-size: clamp(32px, 4.8vw, 52px);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
.portada-bajada {
  margin: var(--e-3) 0 var(--e-5);
  font-size: var(--t-4-size);
  color: var(--carbon-2);
  max-width: 48ch;
}

.portada-buscador {
  display: flex; align-items: center; gap: var(--e-2);

  width: 100%;
  max-width: min(100%, 46rem);
  padding: var(--e-2);
  background: var(--sup-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-full);
  box-shadow: var(--s-2);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
.portada-buscador:focus-within {
  border-color: var(--foco-color);
  box-shadow: 0 0 0 4px var(--acento-tinte), var(--s-2);
}

.portada-lupa {
  display: grid; place-items: center;
  margin-left: var(--e-3);
  flex-shrink: 0;
  color: var(--carbon-3);
  pointer-events: none;
  transition: color var(--dur-1) var(--curva);
}
.portada-buscador:focus-within .portada-lupa { color: var(--acento-texto); }

.portada-buscador input {
  flex: 1; min-width: 0; width: auto;
  height: var(--h-3);
  padding-left: var(--e-2);
  border: 0; background: none; border-radius: 0;
  font-size: var(--t-4-size);
}

.portada-buscador input:focus { outline: none; box-shadow: none; }
.portada-buscador .btn-1 { height: var(--h-3); flex-shrink: 0; }

.portada-rubros {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  list-style: none; padding: 0;
  margin: var(--e-5) 0 0;
}

.portada-atajos-rotulo {
  margin: var(--e-5) 0 0;
  font-size: var(--t-1-size);
  font-weight: var(--t-1-w);
  letter-spacing: var(--t-1-ls);
  text-transform: uppercase;
  color: var(--tinta-3);
}
.portada-atajos-rotulo + .portada-rubros { margin-top: var(--e-3); }

.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: var(--t-2-size);
  color: var(--tinta-3);
}
.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.migas > span { flex: none; }
.migas [aria-current="page"] { color: var(--tinta-2); }

.rubro-hero {
  padding-bottom: var(--e-6);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--linea);
}
.rubro-hero h1 { margin: 0; }

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-full); line-height: 1;
  white-space: nowrap;
}
.pastilla::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.pastilla-viva   { color: var(--verde); background: var(--verde-tinte); }
.pastilla-espera { color: var(--ambar-texto); background: var(--ambar-fondo); }
.pastilla-fria   { color: var(--carbon-2); background: var(--sup-0); }
.pastilla-mala   { color: var(--peligro); background: var(--peligro-tinte); }
.pastilla-oficial { color: var(--marcador-visitante); background: var(--indigo-tinte); }

.nav-punto {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 2px;
  vertical-align: super;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 28%, transparent);
}

.radar-hero {
  display: flex; flex-wrap: wrap; gap: var(--e-5);
  align-items: flex-end; justify-content: space-between;
  padding-bottom: var(--e-6);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--linea);
}
.radar-hero h1 { margin: 0; }

.radar-resumen {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4);
  margin: 0 0 var(--e-5);
  font-size: var(--t-3-size);
  color: var(--tinta-2);
}
.radar-resumen strong { color: var(--tinta); font-weight: 650; }

.radar-resumen-grupo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-2-size);
  color: var(--tinta-3);
}
.radar-resumen-grupo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--trazo);
  flex-shrink: 0;
}
.radar-resumen-transito::before { background: var(--radar-transito); }
.radar-resumen-infraestructura::before { background: var(--radar-infra); }
.radar-resumen-evento::before { background: var(--radar-evento); }
.radar-resumen-situacion::before { background: var(--radar-situacion); }

.radar-lista {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  align-items: start;
}

.situacion {
  position: relative;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-2);
}

.situacion::before {
  content: '';
  position: absolute; left: 0; top: var(--e-4); bottom: var(--e-4);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--trazo);
}
.situacion-transito::before { background: var(--radar-transito); }
.situacion-infraestructura::before { background: var(--radar-infra); }
.situacion-evento::before { background: var(--radar-evento); }
.situacion-situacion::before { background: var(--radar-situacion); }

.situacion-sellos { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

.sello-fuente {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 22px; padding: 0 var(--e-3);
  border-radius: var(--r-full);
  font-size: var(--t-1-size);
  font-weight: 700;
  letter-spacing: var(--t-1-ls);
  text-transform: uppercase;
}
.sello-fuente::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.sello-oficial {
  color: var(--marcador-visitante);
  background: color-mix(in srgb, var(--marcador-visitante) 14%, transparent);
}
.sello-vecinal {
  color: var(--tinta-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--linea);
}

.situacion-titulo {
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  line-height: var(--t-5-lh);
  letter-spacing: var(--t-5-ls);
  font-weight: var(--t-5-w);
  color: var(--tinta);
  margin: 0;
}
.situacion-meta { font-size: var(--t-2-size); color: var(--tinta-2); margin: 0; }
.situacion-detalle { font-size: var(--t-3-size); color: var(--tinta-2); margin: 0; white-space: pre-wrap; }
.situacion-confirmaciones { font-size: var(--t-2-size); color: var(--tinta-3); margin: 0; }

.situacion-acciones {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}
.situacion-acciones form { display: contents; }

.btn-elegido {
  color: var(--acento-texto);
  background: var(--acento-tinte);
  border-color: var(--acento-borde);
}

.situacion-denuncia > summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-2-size); color: var(--tinta-3);
}
.situacion-denuncia > summary::-webkit-details-marker { display: none; }
.situacion-denuncia > summary:hover { color: var(--tinta-2); }
.situacion-denuncia form { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }

.radar-leyenda { border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-4); }
.radar-leyenda > summary { cursor: pointer; font-size: var(--t-3-size); color: var(--tinta-2); }
.radar-leyenda-lista {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-3);
  font-size: var(--t-2-size); color: var(--tinta-2);
}

.radar-leyenda-lista li {
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline;
  max-width: 74ch;
}
.radar-leyenda .ayuda { max-width: var(--ancho-prosa); }

.tipos-radar { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.tipo-radar {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--sup-2);
  cursor: pointer;
  flex: 1 1 14rem;
}
.tipo-radar:hover { border-color: var(--trazo); }
.tipo-radar input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-radar-nombre { font-size: var(--t-3-size); font-weight: 600; color: var(--tinta); }

.tipo-radar-ayuda { display: none; font-size: var(--t-2-size); color: var(--tinta-2); }
.tipo-radar input:checked ~ .tipo-radar-ayuda { display: block; }
.tipo-radar-ayuda b { display: block; margin-top: var(--e-1); color: var(--tinta-3); font-weight: 600; }

.tipo-radar:has(input:checked),
.tipo-radar input:checked ~ .tipo-radar-nombre { color: var(--acento-texto); }
.tipo-radar:has(input:checked) {
  border-color: var(--acento-borde);
  background: var(--acento-tinte);
  flex-basis: 100%;
}

.tipo-radar:focus-within { outline: var(--foco-outline); outline-offset: 2px; }

.sin-marco { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.sin-marco > legend { padding: 0; }

.portada-rubros a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: var(--h-1); padding: 0 var(--e-4);
  font-size: var(--t-2-size); font-weight: 500;
  color: var(--carbon-2);
  background: var(--sup-1);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva),
              color var(--dur-1) var(--curva);
}
.portada-rubros a:hover {
  text-decoration: none;
  color: var(--acento-texto);
  background: var(--acento-tinte);
  border-color: var(--acento-borde);
}
.portada-rubros .rubro-mapa { color: var(--acento-texto); background: none; font-weight: 600; }

.franja-alta {
  background:
    radial-gradient(100% 140% at 100% 0%, var(--lavada) 0%, var(--lavada-fin) 62%),
    var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-4);
  padding: var(--e-8) var(--e-6);
  margin-bottom: var(--e-8);
}

@media (max-width: 767px) {
  .portada-hero-interior { padding-block: var(--e-6) var(--e-5); }

  .portada-buscador {
    flex-wrap: wrap;
    border-radius: var(--r-3);
    padding: var(--e-3);
    gap: var(--e-2);
  }
  .portada-buscador input { flex-basis: 100%; }
  .portada-buscador .btn-1 { width: 100%; }

  .portada-lupa { margin-left: var(--e-2); }

  .franja-alta { padding: var(--e-6) var(--e-4); }
}

.ficha-comercio { padding-bottom: var(--e-8); }

.hero-comercio { background: var(--cal-2); border-bottom: 1px solid var(--linea); }

.hero-portada {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 420px;
  background: var(--sup-0);
  overflow: hidden;
}
.hero-portada img { width: 100%; height: 100%; object-fit: cover; }

.hero-portada-contenida {
  aspect-ratio: 16 / 7;
  max-height: 220px;

  max-width: min(var(--ancho-comercio), 100% - var(--canal) * 2);
  margin: var(--e-4) auto 0;
  border-radius: var(--r-2);
}

.hero-cuerpo {
  position: relative;
  max-width: var(--ancho-comercio);
  margin: 0 auto;
  padding-block: var(--e-5) var(--e-6);
  padding-inline: var(--canal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: end;
}

.hero-logo {
  width: 104px; height: 104px;
  margin-top: -68px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--cal-3);
  border: 4px solid var(--cal-2);
  display: grid; place-items: center;
  font-family: var(--f-nombre); font-size: 40px; color: var(--tinta-2);
  flex-shrink: 0;
}

.hero-simple .hero-logo { margin-top: 0; width: 72px; height: 72px; font-size: 28px; }
.hero-simple .hero-cuerpo { padding-top: var(--e-6); align-items: center; }

.hero-titulo-fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.hero-texto h1 { margin: 0; }

.hero-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--e-4);
}

.item {
  display: flex; flex-direction: column;
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
}
.item:hover { border-color: transparent; box-shadow: var(--s-tarjeta); }

.item-foto {
  aspect-ratio: 4 / 3;
  background: var(--sup-0);
  overflow: hidden;
}
.item-foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--curva);
}
.item:hover .item-foto img { transform: scale(1.04); }

.item-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }

.item-nombre {
  margin: 0;
  font-family: var(--f-nombre);
  font-size: var(--t-4-size); font-weight: 600; letter-spacing: -.016em;
  color: var(--carbon);
}

.item-detalle {
  margin: 0;
  font-size: var(--t-2-size);
  line-height: 1.5;
  color: var(--carbon-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-precio {
  margin: var(--e-1) 0 0;
  font-size: var(--t-5-size); font-weight: 650; letter-spacing: -.018em;
  color: var(--carbon);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 200px), 1fr));
  gap: var(--e-2);
}
.galeria img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--cal-0);
  border-radius: var(--r-1);
}

.galeria-edicion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-3);
}
.galeria-item { margin: 0; position: relative; }
.galeria-item img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--cal-0);
  border-radius: var(--r-1);
  display: block;
}

.galeria-falta {
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  padding: var(--e-3);
  background: var(--cal-0);
  border: 1px dashed var(--trazo);
  border-radius: var(--r-1);

  color: var(--tinta-3);
  font-size: var(--t-1-size);
  text-align: center;
}
.galeria-sacar {
  position: absolute;
  right: var(--e-2); top: var(--e-2);
  min-height: 32px; padding: 0 var(--e-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-full);
  background: var(--cal-2);
  color: var(--peligro);
  font: inherit; font-size: var(--t-1-size);
  cursor: pointer;
}
.galeria-sacar:hover { background: var(--peligro); color: var(--cal-2); border-color: var(--peligro); }

.mapa-ficha {
  height: clamp(200px, 28dvh, 340px);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--cal-0);
}

@media (max-width: 767px) {
  .hero-portada { aspect-ratio: 16 / 10; }
  .hero-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--e-4);
    gap: var(--e-3);
    align-items: start;
  }
  .hero-logo { width: 76px; height: 76px; margin-top: -50px; font-size: 30px; }
  .hero-acciones { width: 100%; }
  .hero-acciones .btn-1 { flex: 1; }
}

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3-size); }
.tabla th {
  text-align: left; padding: var(--e-2) var(--e-3);
  font-size: var(--t-1-size); letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
  text-transform: uppercase; color: var(--tinta-3);
  background: var(--cal-0);
  border-bottom: 1px solid var(--trazo);
}
.tabla td { padding: var(--e-3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--cal-1); }
.tabla-envoltura { overflow-x: auto; }

@media (max-width: 719px) {
  .tabla-envoltura { overflow-x: visible; }

  .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; }

  .tabla thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }

  .tabla tbody tr {
    border: 1px solid var(--linea);
    border-radius: var(--r-3);
    padding: var(--e-3);
    margin-bottom: var(--e-3);
    background: var(--sup-2);
  }
  .tabla tbody tr:hover { background: var(--sup-2); }

  .tabla td {
    border-bottom: 0;
    padding: var(--e-2) 0;
  }
  .tabla td + td { border-top: 1px solid var(--linea); }

  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 4px;
    font-size: var(--t-1-size); letter-spacing: var(--t-1-ls); font-weight: var(--t-1-w);
    text-transform: uppercase; color: var(--tinta-3);
  }

  .tabla td select,
  .tabla td input[type="text"],
  .tabla td input[type="number"],
  .tabla td button { width: 100%; }
}

.horarios-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3-size); }
.horarios-tabla td { padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--linea); }
.horarios-tabla tr:last-child td { border-bottom: 0; }

.horarios-tabla .dia {
  color: var(--tinta-3);
  width: 1%;
  white-space: nowrap;
  padding-right: var(--e-3);
}
.horarios-tabla .hoy { color: var(--tinta); font-weight: 600; }
.horarios-tabla .cerrado { color: var(--tinta-3); }
.horarios-tabla td:last-child { font-variant-numeric: tabular-nums; }

input[type="radio"].tipo-radio {
  position: absolute;
  width: 1px; height: 1px; min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  opacity: 0;
}

.tipo-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--e-3);
}

.tipo-card {
  display: block;
  margin: 0;
  padding: var(--e-4);
  font-size: var(--t-3-size);
  font-weight: 400;
  color: var(--tinta);
  background: var(--cal-3);
  border: 1px solid var(--trazo);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva);
}
.tipo-card:hover { background: var(--cal-2); }

.tipo-icono {
  display: block; line-height: 0; margin-bottom: var(--e-2);
  color: var(--carbon-2);
  transition: color var(--dur-1) var(--curva);
}
.tipo-radio:checked + * .tipo-icono,
.tipo-card:hover .tipo-icono { color: var(--acento-texto); }

.tipo-nombre {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--f-nombre);
  font-size: var(--t-5-size);
  font-weight: var(--t-5-w);
  color: var(--tinta);
}

.tipo-detalle {
  display: block;
  font-size: var(--t-2-size);
  line-height: var(--t-2-lh);
  font-weight: 400;
  color: var(--tinta-3);
}

.tipo-costo {
  display: block;
  margin-top: auto;
  padding-top: var(--e-3);
  font-size: var(--t-1-size);
  font-weight: 600;
  color: var(--tinta-2);
}

#tipo-local:checked ~ * .tipo-card[data-tipo="local"],
#tipo-servicio:checked ~ * .tipo-card[data-tipo="servicio"],
#tipo-alquiler:checked ~ * .tipo-card[data-tipo="alquiler"],
#tipo-evento:checked ~ * .tipo-card[data-tipo="evento"],
#tipo-pedido:checked ~ * .tipo-card[data-tipo="pedido"] {
  background: var(--ladrillo-tinte);
  border-color: var(--ladrillo);
}
#tipo-local:checked ~ * .tipo-card[data-tipo="local"] .tipo-nombre,
#tipo-servicio:checked ~ * .tipo-card[data-tipo="servicio"] .tipo-nombre,
#tipo-alquiler:checked ~ * .tipo-card[data-tipo="alquiler"] .tipo-nombre,
#tipo-evento:checked ~ * .tipo-card[data-tipo="evento"] .tipo-nombre,
#tipo-pedido:checked ~ * .tipo-card[data-tipo="pedido"] .tipo-nombre {
  color: var(--ladrillo);
}

#tipo-local:focus-visible ~ * .tipo-card[data-tipo="local"],
#tipo-servicio:focus-visible ~ * .tipo-card[data-tipo="servicio"],
#tipo-alquiler:focus-visible ~ * .tipo-card[data-tipo="alquiler"],
#tipo-evento:focus-visible ~ * .tipo-card[data-tipo="evento"],
#tipo-pedido:focus-visible ~ * .tipo-card[data-tipo="pedido"] {
  outline: var(--foco-outline);
  outline-offset: 2px;
}

.solo-local, .solo-servicio, .solo-alquiler, .solo-evento, .solo-pedido,
.solo-vecino, .solo-comercio { display: none; }

#tipo-local:checked    ~ * :is(.solo-local, .solo-comercio),
#tipo-servicio:checked ~ * :is(.solo-servicio, .solo-comercio),
#tipo-alquiler:checked ~ * :is(.solo-alquiler, .solo-vecino),
#tipo-evento:checked   ~ * :is(.solo-evento, .solo-vecino),
#tipo-pedido:checked   ~ * :is(.solo-pedido, .solo-vecino) {
  display: block;
}

.selector-ayuda {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  margin-bottom: var(--e-2);
  font-size: var(--t-2-size);
  color: var(--tinta-3);

  max-width: var(--ancho-prosa);
}

.selector-coords {
  padding: 2px var(--e-2);
  font-size: var(--t-2-size);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
  background: var(--cal-0);
  border-radius: var(--r-1);
}

.selector-barra {
  display: flex; gap: var(--e-2); flex-wrap: wrap;
  margin-bottom: var(--e-2);
}
.selector-barra input[type="text"] { flex: 1 1 12rem; width: auto; }

.selector-mapa {
  position: relative;

  height: clamp(16rem, 46dvh, 34rem);
  border: 1px solid var(--trazo);
  border-radius: var(--r-1);
  overflow: hidden;
}
.selector-mapa .mapa { width: 100%; height: 100%; }

.selector-cruz {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 500;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: var(--t-7-size);
  line-height: 1;
}

.selector-cruz-afuera { filter: grayscale(1); opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
  .selector-cruz { transition: filter .15s ease, opacity .15s ease; }
}

.zona-poligono {
  stroke: var(--zona-linea);
  stroke-width: 3;
  stroke-linejoin: round;
  fill: var(--zona-relleno);
  fill-opacity: 1;
}

.zona-velo {
  stroke: none;
  fill: var(--zona-velo);
  fill-opacity: 1;
}

.zona-recuadro {
  stroke: var(--zona-recuadro);
  stroke-width: 1;
  stroke-dasharray: 6 6;
  fill: none;
}

.leaflet-marker-icon.zona-manija { cursor: pointer; }
.leaflet-marker-icon.zona-manija.leaflet-marker-draggable { cursor: move; }

.zona-vertice,
.zona-fantasma {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  box-sizing: border-box;
}

.zona-vertice {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--zona-vertice);
  border: 2px solid var(--zona-vertice-borde);
}

.zona-manija:hover > .zona-vertice { transform: scale(1.25); }

.zona-fantasma {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: none;
  border: 2px solid var(--zona-vertice-borde);
  opacity: .55;
}

.zona-manija:hover > .zona-fantasma { opacity: 1; transform: scale(1.35); }

@media (prefers-reduced-motion: no-preference) {
  .zona-vertice,
  .zona-fantasma { transition: transform .12s ease, opacity .12s ease; }
}

.horario-dia {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}
.horario-dia:last-child { border-bottom: 0; padding-bottom: 0; }

.horario-dia-nombre {
  padding-top: var(--e-3);
  font-size: var(--t-2-size); font-weight: 600;
  color: var(--tinta-2);
}

.horario-tramos { display: grid; gap: var(--e-2); }

.horario-tramo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.horario-tramo input[type="time"] { width: auto; min-width: 8rem; }
.horario-tramo .a { font-size: var(--t-2-size); color: var(--tinta-3); }

@media (max-width: 640px) {
  .horario-dia { grid-template-columns: 1fr; gap: var(--e-1); }
  .horario-dia-nombre { padding-top: 0; }
}

.oculto { display: none !important; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lista-limpia { list-style: none; padding: 0; margin: 0; }

.bloque { display: block; }

.centrado { text-align: center; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--e-2); }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }

.mb-2 { margin-bottom: var(--e-2); }
.mb-3 { margin-bottom: var(--e-3); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }

.menu-cuenta { display: none; position: relative; }

.menu-cuenta-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-1); height: var(--h-1);
  border-radius: var(--r-full);
  cursor: pointer;
  list-style: none;
  color: var(--carbon-2);
}
.menu-cuenta-boton::-webkit-details-marker { display: none; }
.menu-cuenta-boton:hover { background: var(--sup-1); color: var(--carbon); }
.menu-cuenta-boton:focus-visible { outline: var(--foco-outline); outline-offset: 2px; }

.menu-cuenta-lineas,
.menu-cuenta-lineas::before,
.menu-cuenta-lineas::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.menu-cuenta-lineas { position: relative; }
.menu-cuenta-lineas::before,
.menu-cuenta-lineas::after { content: ''; position: absolute; left: 0; }
.menu-cuenta-lineas::before { top: -6px; }
.menu-cuenta-lineas::after  { top: 6px; }

.menu-cuenta[open] .menu-cuenta-lineas { background: transparent; }
.menu-cuenta[open] .menu-cuenta-lineas::before { top: 0; transform: rotate(45deg); }
.menu-cuenta[open] .menu-cuenta-lineas::after  { top: 0; transform: rotate(-45deg); }

.menu-cuenta-panel {
  position: absolute; right: 0; top: calc(100% + var(--e-2));
  z-index: 60;
  min-width: 15rem;

  max-width: calc(100vw - var(--e-6));
  display: flex; flex-direction: column;
  padding: var(--e-2);
  background: var(--sup-0);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px rgb(var(--sombra-tinta) / .16);
}

.menu-cuenta-panel a,
.menu-cuenta-salir {
  display: block; width: 100%;
  padding: var(--e-3) var(--e-4);
  font-family: var(--f-texto); font-size: var(--t-3-size); font-weight: 500;
  text-align: left; color: var(--carbon);
  background: none; border: 0; border-radius: var(--r-2);
  cursor: pointer;
}
.menu-cuenta-panel a:hover,
.menu-cuenta-salir:hover { background: var(--sup-1); text-decoration: none; }

.menu-cuenta-salir {
  margin-top: var(--e-2);
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--r-2) var(--r-2);
  color: var(--peligro);
  font-weight: 600;
}

@media (max-width: 900px) {
  .marca-bajada { display: none; }
  .nav-enlace { padding: 0 var(--e-3); }
  .masthead-nav { gap: 2px; }
}

@media (max-width: 767px) {

  .hoja, .hoja-angosta { padding-block: var(--e-5); }

  .masthead-nav .nav-enlace,
  .masthead-nav .nav-filete,
  .masthead-nav > form { display: none; }

  .masthead-nav .btn-1,
  .masthead-nav .btn-2 { display: none; }

  .menu-cuenta { display: block; }
}

html, body { overflow-x: clip; }

.saltar-al-contenido {
  position: fixed;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 999;

  transform: translateY(calc(-100% - var(--e-4)));
  display: inline-flex; align-items: center;
  min-height: var(--h-2);
  padding-inline: var(--e-4);
  border-radius: var(--r-2);
  background: var(--grad-luz);
  color: var(--sobre-acento);
  font-size: var(--t-2-size);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--s-3);
  transition: transform var(--dur-2) var(--curva);
}
.saltar-al-contenido:focus,
.saltar-al-contenido:focus-visible {
  transform: translateY(0);
}

#contenido:focus { outline: none; }

.nav-tema {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--carbon-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--curva),
              background var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva);
}
.nav-tema:hover,
.nav-tema:focus-visible {
  color: var(--acento-texto);
  background: var(--sup-3);
  border-color: var(--filo);
}
.nav-tema > span[aria-hidden] {
  grid-area: 1 / 1;
  line-height: 0;
}

.nav-tema .nav-tema-luna { display: none; }
.nav-tema .nav-tema-sol { display: block; }

:root[data-theme="light"] .nav-tema .nav-tema-luna { display: block; }
:root[data-theme="light"] .nav-tema .nav-tema-sol { display: none; }

.migas {
  max-width: var(--ancho-hoja);
  margin: 0 auto;
  padding-inline: var(--canal);
  padding-block: var(--e-4) 0;
  font-size: var(--t-2-size);
}
.migas ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--e-2);
}
.migas li { display: flex; align-items: center; gap: var(--e-2); }
.migas li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--carbon-3);
  border-right: 1.5px solid var(--carbon-3);
  transform: rotate(45deg);
  opacity: .55;
  flex: none;
}
.migas a {
  color: var(--carbon-2);
  text-decoration: none;
  min-height: var(--tocable-chico);
  display: inline-flex; align-items: center;
}
.migas a:hover, .migas a:focus-visible { color: var(--acento-texto); }
.migas [aria-current="page"] {
  color: var(--carbon-3);

  max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.opinion-fecha {
  display: block;
  font-size: var(--t-1-size);
  color: var(--carbon-3);
  margin-top: 2px;
}

.enlace-suave {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--trazo);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--curva),
              text-decoration-color var(--dur-1) var(--curva);
}
.enlace-suave:hover, .enlace-suave:focus-visible {
  color: var(--acento-texto);
  text-decoration-color: currentColor;
}

@media (pointer: coarse) {
  .nav-avatar,
  .panel-salida,
  .barra-inferior a,
  .btn-icono,
  .chip,
  .pie-columna a,

  .panel-hoja details a,
  .seccion-cabecera .btn-3 {
    min-height: var(--tocable);
    min-width: var(--tocable);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-tema {
    width: var(--tocable);
    height: var(--tocable);
  }

  .barra-inferior a {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
  }

  .panel-nav a,
  .panel-nav-salir a {
    min-height: var(--tocable);
    display: inline-flex;
    align-items: center;
  }

  .conmutador button {
    min-height: var(--tocable);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px; height: 22px;
  }

  .casilla {
    display: flex; align-items: flex-start; gap: var(--e-3);
    min-height: var(--tocable);
    padding-block: var(--e-1);
  }

  .leaflet-control-zoom a {
    width: var(--tocable) !important;
    height: var(--tocable) !important;
    line-height: var(--tocable) !important;
  }
}