/* ==========================================================================
   NapoGold — componentes.css
   Piezas reutilizables: barra, menú, estado del precio, tarifas, simulador,
   panel del recorrido, tarjetas de sede, redes, barra de acción y pie.
   Móvil primero: la base es el teléfono, las media queries añaden.
   ========================================================================== */

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: calc(var(--alto-barra) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--margen) 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-suave),
              border-color var(--dur-base) var(--ease-suave);
}
/* Al despegarse del top la barra se vuelve sólida para que el texto se lea
   sobre cualquier sección. */
.barra.esta-fija {
  background: rgba(8, 8, 10, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--linea);
}

.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.marca__leon { width: 30px; height: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre {
  font-size: 17px;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: .14em;
  color: var(--tinta);
}
.marca__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.barra__nav { display: none; gap: var(--e4); }
.barra__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-dim);
  transition: color var(--dur-rapida);
}
.barra__nav a:hover { color: var(--tinta); }

.btn-barra { display: none; padding: 11px 22px; min-height: 44px; font-size: 14px; }

/* Botón hamburguesa: dos líneas que se cruzan al abrir */
.barra__menu {
  width: 48px; height: 48px;
  margin-right: -10px;
  display: grid;
  place-content: center;
  gap: 6px;
  border-radius: var(--radio-s);
}
.barra__menu span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--tinta);
  transition: transform var(--dur-rapida) var(--ease-salida),
              opacity var(--dur-rapida);
}
.barra__menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.barra__menu[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 1000px) {
  .barra__nav { display: flex; }
  .btn-barra  { display: inline-flex; }
  .barra__menu { display: none; }
  .marca__leon { width: 34px; }
}

/* --- Menú móvil desplegable --- */
.menu-movil {
  position: fixed;
  inset: calc(var(--alto-barra) + env(safe-area-inset-top, 0px)) 0 auto 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - var(--alto-barra));
  overflow-y: auto;
  padding: var(--e1) var(--margen) var(--e4);
  background: rgba(8, 8, 10, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linea);
}
.menu-movil[hidden] { display: none; }
.menu-movil a {
  display: flex;
  align-items: center;
  min-height: 54px;
  font-size: 20px;
  font-weight: 650;
  font-stretch: 88%;
  border-bottom: 1px solid var(--linea);
}
.menu-movil a:last-child { border-bottom: 0; }

/* ==========================================================================
   ESTADO DEL PRECIO
   Una línea honesta sobre la fecha del dato, encima de las tarifas.
   ========================================================================== */
.estado-precio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pill);
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta-dim);
}
.estado-precio__punto {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--jade);
}
/* Dato viejo: el punto se vuelve ámbar */
.esta-vieja .estado-precio__punto { background: var(--alerta); }
.estado-precio strong { color: var(--tinta); font-weight: 700; }

/* ==========================================================================
   TARIFAS
   No es una tabla: cada pureza es una unidad de valor con su cifra como
   elemento dominante. En móvil, la referencia (18K italiano) a ancho
   completo y el resto en rejilla de dos; en escritorio, la destacada ocupa
   dos filas a la izquierda.
   ========================================================================== */
.tarifas {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tarifa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 16px 18px;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  overflow: hidden;
  /* La cifra se mide contra SU tarjeta, no contra la ventana: así llena la
     tarjeta igual en un teléfono de 360 que en una columna de escritorio. */
  container-type: inline-size;
}
.tarifa__pureza { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tarifa__k {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-weight: 750;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--oro-claro);
}
.tarifa__nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-dim);
}
.tarifa__valor {
  margin-top: 10px;
  font-size: clamp(30px, 8.6vw, 44px);
}
/* Solo las secundarias van en marfil: la destacada lleva el oro de
   .cifra-valor, y un color aquí lo taparía. */
.tarifa:not(.tarifa--destacada) .tarifa__valor { color: var(--tinta); }
/* "$412.900" mide ~3,4 em en la voz de cifras: a 25cqi ocupa ~85 % de la
   tarjeta. El clamp de arriba queda de respaldo sin container queries. */
@supports (font-size: 1cqi) {
  .tarifa__valor { font-size: clamp(28px, 25cqi, 56px); }
  .tarifa--destacada .tarifa__valor { font-size: clamp(56px, 25cqi, 132px) !important; }
  /* La tarjeta que queda sola a todo el ancho mide el doble: con 25cqi su
     cifra saldría más grande que las de al lado, y el 10K (el que menos
     paga) parecería el principal. A la mitad, queda del mismo tamaño. */
  .tarifa:not(.tarifa--destacada):last-child:nth-child(even) .tarifa__valor { font-size: clamp(28px, 11cqi, 56px); }
}
.tarifa__unidad {
  font-size: 13px;
  color: var(--tinta-faint);
}

/* La referencia: la tarifa más alta, a pantalla completa en el móvil */
.tarifa--destacada {
  grid-column: 1 / -1;
  padding: 22px 20px 24px;
  border-color: var(--linea-oro);
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, rgba(168,121,43,.18), transparent 70%),
    var(--carbon);
}
.tarifa--destacada .tarifa__k { font-size: 32px; }
.tarifa--destacada .tarifa__nombre { font-size: 14px; color: var(--tinta); }
.tarifa--destacada .tarifa__valor { font-size: clamp(62px, 19vw, 124px); margin-top: 14px; }
.tarifa--destacada .tarifa__unidad { font-size: 15px; color: var(--tinta-dim); }

/* Si la última tarjeta queda sola en su fila (número impar de tarjetas bajo
   la destacada: con 24K, 18K italiano, 18K nacional, 16K, 14K y 10K le
   pasa al 10K), ocupa todo el ancho en vez de dejar medio hueco vacío. */
.tarifa:not(.tarifa--destacada):last-child:nth-child(even) { grid-column: 1 / -1; }

.tarifa__sello {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 9px;
  border: 1px solid var(--linea-oro);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--oro-claro);
}

/* Entrada escalonada: la pone js/precio.js cuando la lista llega a la
   pantalla (las tarjetas se crean después de cargar el JSON, así que no
   pasan por el revelado general). */
.js .tarifas .tarifa {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-salida), transform .6s var(--ease-salida);
}
.js .tarifas.esta-visible .tarifa { opacity: 1; transform: none; }
.js .tarifas .tarifa:nth-child(2) { transition-delay: 90ms; }
.js .tarifas .tarifa:nth-child(3) { transition-delay: 180ms; }
.js .tarifas .tarifa:nth-child(4) { transition-delay: 270ms; }
.js .tarifas .tarifa:nth-child(5) { transition-delay: 360ms; }
.js .tarifas .tarifa:nth-child(6) { transition-delay: 450ms; }

/* Plata: se compra, pero no es el foco. Una línea compacta. */
.tarifas-plata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  font-size: 14px;
  color: var(--tinta-dim);
}
.tarifas-plata[hidden] { display: none; }
.tarifas-plata .cifra { font-size: 22px; color: var(--tinta); margin-left: 6px; }
.tarifas-plata__titulo { flex-basis: 100%; }

@media (min-width: 760px) {
  .tarifas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .tarifa { padding: 24px; }
  .tarifa--destacada { grid-column: 1 / span 2; grid-row: span 2; justify-content: flex-end; padding: 32px; }
  .tarifa--destacada .tarifa__valor { font-size: clamp(64px, 8vw, 124px); }
  .tarifas-plata__titulo { flex-basis: auto; }
  /* En escritorio la destacada ocupa un bloque de 2×2 y las demás van de dos
     en dos a su derecha. Con 6 tarjetas, la sexta queda sola en una tercera
     fila: a todo el ancho. Con 4, la cuarta queda sola en la segunda fila,
     al lado de la destacada: ocupa las dos columnas libres. */
  .tarifa:not(.tarifa--destacada):last-child:nth-child(even) { grid-column: auto; }
  .tarifa:not(.tarifa--destacada):last-child:nth-child(4) { grid-column: span 2; }
  .tarifa:not(.tarifa--destacada):last-child:nth-child(6) { grid-column: 1 / -1; }
}

/* --- CTA inmediato después del precio --- */
.cta-valor {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}
.cta-valor__pregunta {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.cta-valor__acciones { display: grid; gap: 10px; }
@media (min-width: 560px) {
  .cta-valor__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
}
@media (min-width: 900px) {
  .cta-valor { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   SIMULADOR — "Calculadora de venta de oro"
   Tres pasos numerados en el orden en que se leen: 1 cuánto pesa, 2 qué oro
   es, 3 cuánto te pagamos. (Antes el resultado iba arriba en el móvil para
   que el teclado no lo tapara; con los botones − / + casi no hace falta el
   teclado, y para quien no está acostumbrado a estas cuentas el orden
   natural se entiende mejor.)
   ========================================================================== */
.simulador {
  display: grid;
  gap: 1px;
  background: var(--linea-oro);
  border: 1px solid var(--linea-oro);
  box-shadow: 0 0 0 6px rgba(168, 121, 43, .06), 0 40px 80px -40px rgba(168, 121, 43, .35);
  border-radius: var(--radio-l);
  overflow: hidden;
  /* minmax(0, 1fr) y no 1fr: `1fr` equivale a `minmax(auto, 1fr)`, y ese
     minimo `auto` es el min-content del contenido. El campo de peso aporta
     520px de min-content, asi que en movil el track crecia hasta 568px
     dentro de un viewport de 375 y el overflow:hidden de aqui arriba
     recortaba el input y el selector de material. Con minmax(0, ...) el
     track no puede pasarse del ancho disponible. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .simulador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.simulador__entradas {
  background: var(--carbon);
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.simulador__salida {
  background: var(--carbon-alto);
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* El degradado dorado muy tenue separa el resultado de los controles */
  background-image: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(168,121,43,.16), transparent 70%);
}
@media (min-width: 900px) {
  .simulador__entradas, .simulador__salida { padding: 44px; }
  .simulador__entradas { gap: var(--e5); }
}
.simulador__salida-etiqueta {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--tinta);
}
.simulador__salida-nota {
  font-size: 13px;
  color: var(--tinta-faint);
  margin-bottom: var(--e1);
}

/* --- Campos --- */
.campo { display: flex; flex-direction: column; gap: 10px; }
.campo__etiqueta {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta);
}
/* El número del paso: un círculo dorado. Guía el orden sin tener que leer. */
.campo__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--oro-grad-suave);
  font-family: var(--sans);
  font-stretch: 100%;
  font-size: 14px;
  font-weight: 800;
  color: var(--tinta-oscura);
}
.campo__fila { display: flex; gap: 8px; align-items: stretch; }
.campo__caja {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  background: var(--obsidiana);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-m);
  transition: border-color var(--dur-rapida);
}
.campo__caja:focus-within { border-color: var(--oro-linea); }
.campo__caja input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--display);
  font-stretch: var(--ancho-cifra);
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
/* Fuera las flechitas del input number: estorban y se ven mal */
.campo__caja input::-webkit-outer-spin-button,
.campo__caja input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo__caja input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.campo__unidad { font-size: 15px; color: var(--tinta-faint); flex: none; }
.campo__ayuda { font-size: 14px; line-height: 1.5; color: var(--tinta-dim); }
.campo__ayuda strong { color: var(--oro-claro); }

/* − / + : en el móvil, sumar un gramo con el pulgar es más cómodo que abrir
   el teclado numérico. */
.paso-peso {
  flex: none;
  width: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-m);
  background: var(--obsidiana);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: var(--tinta);
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}
.paso-peso:hover { border-color: var(--oro-linea); }
.paso-peso:active { background: rgba(168, 121, 43, .14); }

/* --- Segmentos (tipo de oro) --- */
.segmentos { display: flex; flex-wrap: wrap; gap: 8px; }
.segmento {
  padding: 11px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pill);
  background: var(--obsidiana);
  font-size: 15px;
  font-weight: 650;
  color: var(--tinta-dim);
  min-height: 48px;
  transition: border-color var(--dur-rapida), color var(--dur-rapida),
              background-color var(--dur-rapida);
}
.segmento:hover { color: var(--tinta); }
.segmento[aria-checked="true"] {
  border-color: var(--oro-linea);
  background: rgba(168, 121, 43, .14);
  color: var(--oro-claro);
}

/* ==========================================================================
   PANEL DEL RECORRIDO (sección "Cómo evaluamos")
   La cuenta se va armando mientras se hace scroll: peso → pureza → tarifa →
   dinero. Sin JS, o con movimiento reducido, se ve la cuenta completa.
   ========================================================================== */
.panel-valor {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Las medidas verticales del panel van en svh y NO en media queries de
     altura. En el iPhone el alto de la pantalla cambia cada vez que Safari
     esconde o muestra su barra al deslizar; una regla @media (max-height)
     cambiaba entonces de lado y el panel crecía o encogía en pleno scroll:
     todo lo de abajo saltaba ~240 px ("paro en una parte y aparece otra").
     svh es el alto con la barra VISIBLE y no cambia mientras se desliza. */
  padding: clamp(11px, 2svh, 16px) clamp(14px, 2.4svh, 18px) clamp(10px, 1.8svh, 14px);
  background: var(--carbon);
  border: 1px solid var(--linea-oro);
  border-radius: var(--radio-l);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95);
}
.panel-valor__titulo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: clamp(6px, 1.4svh, 10px);
  border-bottom: 1px solid var(--linea);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-medio);
  text-transform: uppercase;
  color: var(--tinta-faint);
}
.pv-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: clamp(5px, 1.3svh, 9px) 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
  color: var(--tinta-dim);
  transition: opacity .5s var(--ease-salida), color .5s var(--ease-salida);
}
.pv-fila .cifra { font-size: clamp(20px, 3.4svh, 24px); color: var(--tinta); }
.pv-fila__op { color: var(--tinta-faint); margin-right: 6px; }
.pv-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: clamp(7px, 1.7svh, 12px);
  transition: opacity .5s var(--ease-salida);
}
.pv-total__etiqueta { font-size: 13px; font-weight: 700; letter-spacing: var(--track-medio); text-transform: uppercase; color: var(--tinta-dim); }
/* En teléfonos bajos la cifra la limita el alto (svh); en los demás, el ancho */
.pv-total .cifra { font-size: clamp(30px, min(10.4vw, 6.4svh), 58px); transition: color .6s var(--ease-salida); }
.pv-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(5px, 1.4svh, 10px);
  font-size: 13px;
  color: var(--tinta-faint);
  transition: color .5s var(--ease-salida);
}
.pv-pie .ico { width: 16px; height: 16px; }

/* Estados, solo con JS. data-paso = paso activo (1–4). */
.js .recorrido .pv-fila,
.js .recorrido .pv-total { opacity: .22; }
.js .recorrido[data-paso="1"] .pv-fila[data-f="peso"],
.js .recorrido[data-paso="2"] .pv-fila:is([data-f="peso"], [data-f="pureza"]),
.js .recorrido[data-paso="3"] .pv-fila,
.js .recorrido[data-paso="4"] .pv-fila,
.js .recorrido[data-paso="3"] .pv-total,
.js .recorrido[data-paso="4"] .pv-total { opacity: 1; }
/* La fila que acaba de entrar se ilumina en oro */
.js .recorrido[data-paso="1"] .pv-fila[data-f="peso"] .cifra,
.js .recorrido[data-paso="2"] .pv-fila[data-f="pureza"] .cifra,
.js .recorrido[data-paso="3"] .pv-fila[data-f="tarifa"] .cifra { color: var(--oro-claro); }
/* El último paso: el valor ya es dinero en la mano */
.recorrido[data-paso="4"] .pv-total .cifra { background: none; color: var(--jade-claro); }
.recorrido[data-paso="4"] .pv-pie { color: var(--jade-claro); }

/* ==========================================================================
   SEDES (TIENDAS)
   Agrupadas por ciudad. En el teléfono y la tableta cada ciudad es una fila
   que se desliza con scroll-snap (como "Datos curiosos"): la foto de cada
   tienda se ve grande y la sección no se alarga siete tarjetas seguidas.
   Desde 1100 px, rejilla de 4 columnas: Medellín y Cali quedan alineadas.
   ========================================================================== */
.sedes {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

.ciudad__nombre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--e2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.015em;
}
.ciudad__cuenta {
  font-family: var(--sans);
  font-stretch: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-ancho);
  text-transform: uppercase;
  color: var(--oro-claro);
}

.ciudad__tiendas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 340px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  /* Sangra hasta los bordes de la pantalla y recupera el canal por dentro */
  margin-inline: calc(-1 * var(--margen));
  padding: 4px var(--margen) 14px;
  scrollbar-width: none;
}
.ciudad__tiendas::-webkit-scrollbar { display: none; }
.ciudad__tiendas:focus-visible { outline-offset: -2px; }
.ciudad__pista { margin-top: 2px; }

@media (min-width: 1100px) {
  .ciudad__tiendas {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    gap: var(--e2);
  }
  .ciudad__pista { display: none; }
}

.sede {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  transition: border-color var(--dur-base) var(--ease-salida),
              transform var(--dur-base) var(--ease-salida);
}
@media (hover: hover) {
  .sede:hover { border-color: var(--linea-oro); transform: translateY(-3px); }
}
.sede--propia { border-color: var(--linea-oro); }

.sede__foto {
  position: relative;
  background: var(--carbon-alto);
}
.sede__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* En un teléfono bajo la foto no se come la tarjeta. svh, nunca
     @media (max-height): ver CLAUDE.md, el salto al deslizar en iPhone. */
  max-height: 52svh;
  object-fit: cover;
}
/* Funde el pie de la foto con la tarjeta */
.sede__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, var(--carbon));
  pointer-events: none;
}

.sede__insignia {
  align-self: flex-start;
  margin: 18px 18px 0;
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  background: rgba(168, 121, 43, .16);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-medio);
  text-transform: uppercase;
  color: var(--oro-claro);
}
/* Sobre la foto: arriba a la izquierda, legible encima de cualquier fondo */
.sede__foto .sede__insignia {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  border: 1px solid var(--linea-oro);
  background: rgba(10, 10, 12, .8);
}

.sede__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 18px;
}
@media (min-width: 760px) { .sede__cuerpo { padding: 16px 20px 20px; } }

.sede__centro {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.sede__dir { font-size: 15px; color: var(--tinta-dim); }

/* Horario: el día arriba en pequeño, la hora debajo y fuerte. Apilado y no
   en dos columnas: en una tarjeta de 300 px "Domingos y festivos" + la hora
   no caben en una línea, y mezclar filas partidas y enteras se lee mal. */
.sede__horario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.sede__hora dt { font-size: 13px; color: var(--tinta-faint); }
.sede__hora dd {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.sede__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sede__servicio {
  padding: 4px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pill);
  font-size: 12px;
  color: var(--tinta-dim);
}
.sede__acciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: var(--e2);
}
/* "Cómo llegar" con su icono pide ~121 px. En una tarjeta de menos de 290 px
   (teléfonos de 360–375 px, y las 4 columnas del escritorio) los dos botones
   no caben lado a lado: van uno encima del otro, a todo lo ancho. */
.sede { container-type: inline-size; }
@container (max-width: 289px) {
  .sede__acciones { grid-template-columns: minmax(0, 1fr); }
}
@supports not (container-type: inline-size) {
  .sede__acciones { grid-template-columns: minmax(0, 1fr); }
}
.sede__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Poco relleno lateral: en la tarjeta más estrecha (teléfono de 360 px)
     cada botón mide ~128 px y "Cómo llegar" tiene que caber en una línea. */
  padding: 10px 8px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pill);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  min-height: 48px;
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}
.sede__accion:only-child { grid-column: 1 / -1; }
.sede__accion:hover { border-color: var(--oro-linea); background: rgba(168,121,43,.09); }
/* flex: none: sin él, en un botón justo el icono se encogía hasta ser un punto */
.sede__accion .ico { flex: none; width: 17px; height: 17px; }
.sede__accion--wa { border-color: rgba(31,168,85,.5); color: #6FE39B; }
.sede__accion--wa:hover { background: rgba(31,168,85,.12); border-color: #1FA855; }

/* ==========================================================================
   REDES
   Los glifos de assets/iconos/glifos/ montados como MÁSCARA: el pixel lo pone
   currentColor, así heredan el color del enlace. Ver CLAUDE.md → Iconos.
   ========================================================================== */
.icono-red {
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.icono-red--instagram { -webkit-mask-image: url(../assets/iconos/glifos/instagram.png); mask-image: url(../assets/iconos/glifos/instagram.png); }
.icono-red--facebook  { -webkit-mask-image: url(../assets/iconos/glifos/facebook.png);  mask-image: url(../assets/iconos/glifos/facebook.png); }
.icono-red--tiktok    { -webkit-mask-image: url(../assets/iconos/glifos/tiktok.png);    mask-image: url(../assets/iconos/glifos/tiktok.png); }
.icono-red--whatsapp  { -webkit-mask-image: url(../assets/iconos/glifos/whatsapp.png);  mask-image: url(../assets/iconos/glifos/whatsapp.png); }

/* Si el navegador no soporta mask, el cuadro de currentColor quedaría como
   una mancha sólida. Mejor no mostrarlo: manda el texto. */
@supports not ((-webkit-mask-image: url(x)) or (mask-image: url(x))) {
  .icono-red { display: none; }
}

/* Botones grandes de redes (sección de contacto) */
.redes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 560px) { .redes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.red {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 18px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-m);
  color: var(--tinta);
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida), color var(--dur-rapida);
}
.red:hover { border-color: var(--oro-linea); color: var(--oro-claro); background: rgba(168,121,43,.07); }
.red .icono-red { width: 22px; height: 22px; }
.red__texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.red__nombre { font-weight: 700; font-size: 15px; }
.red__usuario { font-size: 13px; color: var(--tinta-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   BARRA DE ACCIÓN MÓVIL
   Aparece al pasar el hero. En un sitio cuyo objetivo es que la gente escriba
   por WhatsApp, el botón no puede quedar fuera del alcance del pulgar.
   ========================================================================== */
.barra-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 10px var(--margen);
  /* respeta la zona segura de los iPhone con barra inferior */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 8, 10, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--linea);
  transform: translateY(105%);
  transition: transform var(--dur-base) var(--ease-salida);
}
.barra-movil[hidden] { display: none; }
.barra-movil.esta-visible { transform: translateY(0); }
.barra-movil__btn { flex: 1; padding-inline: 12px; font-size: 15px; min-height: 50px; }

@media (min-width: 1000px) {
  .barra-movil { display: none; }
}
/* Cuando la barra está, el contenido necesita aire abajo para no quedar tapado */
@media (max-width: 999px) {
  body.con-barra-movil { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--e5) var(--e5);
  background: var(--obsidiana);
}
.pie__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  justify-content: space-between;
  align-items: flex-start;
}
.pie__marca { display: flex; align-items: center; gap: 12px; }
.pie__marca img { width: 30px; height: auto; }
.pie__marca a { text-decoration: underline; text-underline-offset: 3px; }
.pie__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--tinta-dim);
  transition: color var(--dur-rapida);
}
.pie__enlaces a:hover { color: var(--oro-claro); }
.pie__enlaces .icono-red { width: 17px; height: 17px; }
/* Última fila: aviso legal a la izquierda y la firma del desarrollo a la
   derecha (debajo, en el teléfono). "Desarrollado por" en el gris del
   aviso; los dos usuarios con el logo y el rosa de Instagram, pequeños. */
.pie__base {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}
.pie__legal { max-width: 70ch; }

.pie__creditos { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 760px) { .pie__creditos { align-items: flex-end; } }
.pie__devs { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie__devs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--instagram-rosa);
  text-underline-offset: 3px;
}
.pie__devs a:hover { text-decoration: underline; }
/* El glifo es una máscara (ver .icono-red): debajo va el degradado de
   Instagram en vez del color del texto. */
.pie__devs .icono-red {
  width: 15px;
  height: 15px;
  background: var(--instagram-degradado);
}

/* ==========================================================================
   AVISOS
   ========================================================================== */
.aviso-legal {
  margin-top: var(--e3);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-faint);
  max-width: 78ch;
}

@media (prefers-reduced-motion: reduce) {
  .js .tarifas .tarifa { opacity: 1 !important; transform: none !important; }
}