/* Oaxaca Renta · maqueta del buscador /cars
   Medidas tomadas de airbnb.mx el 28-oct-2026 (barra 850×66, paneles de 32 px,
   días de 52 px, grises #F7F7F7/#EBEBEB/#DDDDDD, texto #222/#6A6A6A).
   Movimiento con los tokens de Dentidia: entra con ease-out, sale más rápido,
   solo transform y opacity, nunca desde scale(0). */

:root {
  color-scheme: light;

  /* Marca propuesta 2: el acento sale del tema de marca de css/marca.css. Desde el 30-oct-2026 el sitio usa
     añil-grana (Julian); barro y cantera son variantes auxiliares. Los degradados van de --tema-a a --tema-b: «claro» es el inicio del
     degradado, no un tono más claro (el blanco encima pide ≥ 4.5:1). */
  --acento: var(--tema-a);
  --acento-oscuro: var(--tema-b);
  --acento-claro: var(--tema-a);

  /* Colores de estado (29-oct-2026, pedido de Julian): de las paletas de la marca (marca/propuesta-2/paleta/
     temas.css); fijos, no cambian con ?acento=. Cantera para lo que conviene (precio más bajo, precio final) y
     añil para lo que se aparta aquí. Avisar (falta cobertura) era grana; desde el 30-oct-2026, con el sitio en
     añil-grana, es barro (naranja de aviso), para no confundirse con los cupones, que usan el tema. Contraste del
     texto sobre su fondo ≥ 5:1. */
  --bien: #13705F;          /* cantera, --tema-a */
  --bien-fondo: #E4F9FB;    /* cantera, --tema-fondo */
  --bien-borde: #BCE8EB;    /* cantera, --tema-borde */
  --alerta: #903419;        /* barro, --tema-medio (7.8:1 sobre blanco) */
  --alerta-fondo: #FFF1ED;  /* barro, --tema-fondo */
  --alerta-borde: #FAD4CA;  /* barro, --tema-borde */
  --anil: #2A3D94;          /* añil-grana, --tema-a (añil) */
  /* Degradados de las etiquetas (30-oct-2026): el del tema (añil-grana) y el de cantera (verde a azul). */
  --cantera-b: #0D4560;     /* cantera, --tema-b */
  --barro-a: #B4441A;       /* barro, --tema-a */
  --degradado-marca: linear-gradient(120deg, var(--tema-a) 0%, var(--tema-b) 100%);
  --degradado-bien: linear-gradient(120deg, var(--bien) 0%, var(--cantera-b) 100%);
  --degradado-promo: linear-gradient(120deg, var(--tema-b) 0%, var(--tema-hover) 100%);
  --degradado-aviso: linear-gradient(120deg, var(--barro-a) 0%, var(--alerta) 100%);

  --texto: #222222;
  --texto-2: #6A6A6A;
  --texto-3: #929292;
  --apagado: #C1C1C1;
  --borde: #DDDDDD;
  --borde-2: #EBEBEB;
  --gris-1: #F7F7F7;
  --gris-2: #EBEBEB;
  --gris-3: #DDDDDD;
  --circulo: #F2F2F2;
  --rango: #F2F2F2;
  --blanco: #FFFFFF;

  --r-pildora: 9999px;
  --r-panel: 32px;
  --r-tarjeta: 24px;
  --r-12: 12px;
  --r-16: 16px;

  --sombra-barra: 0 0 0 1px rgb(0 0 0 / .02), 0 8px 24px rgb(0 0 0 / .1);
  --sombra-panel: 0 6px 20px rgb(0 0 0 / .2);
  --sombra-seg: 0 3px 12px rgb(0 0 0 / .15);
  --sombra-menu: 0 2px 16px rgb(0 0 0 / .12);
  --sombra-mini: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .05);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 80ms;
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --dur-exit: 140ms;

  --fuente: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --margen: 48px;
  --alto-fila: 84px;
  --alto-enc: 192px;
  --ancho-barra: 850px;
}

@media (max-width: 1127px) { :root { --margen: 40px; } }
@media (max-width: 743px) { :root { --margen: 24px; } }

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.43;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1; }

body:has(.hoja[open]) { overflow: hidden; }

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; }
ul { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--borde-2); margin: 8px 0; }
h1, h2, h3 { margin: 0; }

svg { display: block; width: 100%; height: 100%; }

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

.saltar {
  position: fixed; left: 16px; top: -48px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-12);
  background: var(--texto); color: var(--blanco); font-weight: 600;
}
.saltar:focus { top: 16px; }

/* ---------- Encabezado ---------- */

.enc {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--alto-enc);
  pointer-events: none;
}

.enc__fondo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--blanco) 40%, #F8F8F8 100%);
  border-bottom: 1px solid var(--borde-2);
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}

.enc__fila {
  position: relative;
  height: var(--alto-fila);
  padding: 0 var(--margen);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.enc__fila > * { pointer-events: auto; }

/* Logo de la marca (marca/propuesta-2, 29-oct-2026): SVG de img/marca/, nunca texto ni redibujado.
   Desde el 30-oct-2026, ícono de app (cuadro degradado con el auto blanco) + logotipo, a pedido de Julian.
   Completo desde 1128 px; entre 744 y 1127 px el encabezado deja solo el ícono, como airbnb.mx. */
.logo { display: inline-flex; align-items: center; height: 48px; }
.logo img { display: block; width: auto; height: 32px; }
.logo .logo__iso { display: none; }
@media (max-width: 1127px) {
  .enc .logo .logo__completo { display: none; }
  .enc .logo .logo__iso { display: block; }
}
/* Teléfono (panel y registro): 24 px de alto = 188 px de ancho, arriba del mínimo de 140 px. */
@media (max-width: 743px) { .logo img { height: 24px; } }

/* Giros (pestañas con icono 3D) */
.giros {
  position: absolute; left: 50%; top: 0; height: var(--alto-fila);
  display: flex; align-items: center; gap: 28px;
  transform: translateX(-50%);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.giro {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 4px;
  color: var(--texto-2); font-size: 14px; font-weight: 500;
  transition: color var(--dur-fast) ease;
}
.giro[aria-current="page"] { color: var(--texto); font-weight: 600; }
.giro[aria-current="page"]::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--texto);
}

.giro__icono { position: relative; width: 48px; height: 48px; flex: none; }
.giro__icono img {
  width: 48px; height: 48px; object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}
.insignia {
  position: absolute; top: 0; left: 26px;
  padding: 2px 5px 1px; border-radius: 6px 6px 6px 2px;
  background: #3F4756; color: var(--blanco);
  font-size: 8px; font-weight: 800; letter-spacing: .06em; line-height: 10px; text-transform: uppercase;
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
}

@media (hover: hover) and (pointer: fine) {
  .giro:hover { color: var(--texto); }
  .giro:hover .giro__icono img { transform: scale(1.1) rotate(-3deg); }
}

/* Acciones de la derecha */
.enc__acciones { position: relative; display: flex; align-items: center; gap: 8px; }

.enlace-pildora {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  border-radius: var(--r-pildora); font-weight: 500;
  transition: background-color var(--dur-fast) ease;
}

.circulo {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--circulo);
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.circulo svg { width: 16px; height: 16px; }
.circulo[data-ico="usuario"] svg { width: 18px; height: 18px; }
.circulo:active { transform: scale(.94); }
.circulo--blanco { background: var(--blanco); box-shadow: 0 0 0 1px var(--borde), 0 2px 6px rgb(0 0 0 / .06); }

@media (hover: hover) and (pointer: fine) {
  .enlace-pildora:hover { background: var(--gris-1); }
  .circulo:hover { background: var(--gris-2); }
  .circulo--blanco:hover { background: var(--gris-1); }
}

@media (max-width: 1127px) { .enlace-pildora { display: none; } }

/* Menú */
.menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 5;
  width: 260px; padding: 8px 0;
  background: var(--blanco); border-radius: var(--r-16);
  box-shadow: var(--sombra-menu), 0 0 0 1px rgb(0 0 0 / .04);
  transform-origin: top right;
  opacity: 0; visibility: hidden; transform: scale(.97) translateY(-4px);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.menu[data-abierto] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}
.menu a { display: block; padding: 12px 16px; font-size: 14px; }
.menu__destacado span:first-child { font-weight: 600; }
.menu__sub { display: block; margin-top: 2px; color: var(--texto-2); font-size: 12px; line-height: 16px; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--gris-1); } }

/* ---------- Barra de búsqueda grande ---------- */

.enc__busqueda {
  position: absolute; top: 96px; left: 50%;
  width: min(var(--ancho-barra), calc(100% - 2 * var(--margen)));
  transform: translateX(-50%);
  transform-origin: top center;
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s;
}

.barra {
  position: relative; display: flex; align-items: center;
  height: 66px; margin: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-pildora);
  box-shadow: var(--sombra-barra);
  transition: background-color var(--dur) ease;
}
.barra[data-activo] { background: var(--gris-2); }

.seg {
  position: relative; align-self: stretch;
  flex: 1 1 0; min-width: 0;
  border-radius: var(--r-pildora);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.seg--donde { flex-grow: 1.3; }
.seg--tipo { flex-grow: 1.35; }

.seg__boton {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px; border-radius: inherit;
  text-align: left; cursor: pointer;
}
.seg--donde .seg__boton { padding-left: 32px; }
.seg--tipo .seg__boton { padding-right: 124px; }
.seg[data-activo][data-lleno] .seg__boton { padding-right: 52px; }
.seg--tipo[data-activo][data-lleno] .seg__boton { padding-right: 150px; }
.seg__boton:focus-visible { outline-offset: -2px; }

.seg__titulo {
  display: block; padding-bottom: 2px;
  font-size: 12px; font-weight: 600; line-height: 16px; color: var(--texto);
}
.seg__valor, .seg__campo {
  display: block; width: 100%;
  font-size: 14px; line-height: 18px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg[data-lleno] .seg__valor { color: var(--texto); font-weight: 500; }

.seg__campo {
  border: 0; padding: 0; margin: 0; background: transparent;
  outline: none; color: var(--texto); font-weight: 500;
}
.seg__campo::placeholder { color: var(--texto-2); font-weight: 400; opacity: 1; }

.seg[data-activo] { background: var(--blanco); box-shadow: var(--sombra-seg); z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .barra:not([data-activo]) .seg:hover { background: var(--gris-2); }
  .barra[data-activo] .seg:not([data-activo]):hover { background: var(--gris-3); }
}

.barra__div {
  flex: none; width: 1px; height: 32px; background: var(--borde);
  transition: opacity var(--dur-fast) ease;
}
.barra[data-activo] .barra__div { background: var(--gris-3); }
@media (hover: hover) and (pointer: fine) {
  .seg:hover + .barra__div,
  .barra__div:has(+ .seg:hover) { opacity: 0; }
}
.seg[data-activo] + .barra__div,
.barra__div:has(+ .seg[data-activo]) { opacity: 0; }

/* Botón para borrar dentro del segmento activo */
.seg__borrar {
  position: absolute; top: 50%; right: 16px; z-index: 2;
  width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gris-2);
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast), background-color var(--dur-fast) ease;
}
.seg__borrar svg { width: 10px; height: 10px; }
.seg--tipo .seg__borrar { right: 124px; }
.seg[data-activo][data-lleno] .seg__borrar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .seg__borrar:hover { background: var(--gris-3); } }

/* Botón Buscar: círculo que se abre a píldora cuando la barra está activa.
   Se recorta con clip-path (no anima el ancho). */
.boton-buscar {
  position: absolute; top: 50%; right: 8px; z-index: 2;
  width: 104px; height: 48px; margin-top: -24px;
  display: flex; align-items: center; gap: 8px;
  padding-left: 16px; border-radius: 24px;
  background: var(--acento); color: var(--blanco);
  font-size: 16px; font-weight: 600;
  clip-path: inset(0 0 0 56px round 24px);
  transition: clip-path var(--dur-slow) var(--ease-out), background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.boton-buscar__icono {
  width: 16px; height: 16px; flex: none;
  transform: translateX(56px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast) ease;
}
.boton-buscar__texto { opacity: 0; transition: opacity var(--dur-fast) ease; }
.boton-buscar__giro {
  position: absolute; left: 16px; top: 16px; width: 16px; height: 16px;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--blanco); border-radius: 50%;
  opacity: 0; transform: translateX(56px);
  transition: transform var(--dur-slow) var(--ease-out);
}

.barra[data-activo] .boton-buscar,
.boton-buscar:focus-visible { clip-path: inset(0 round 24px); }
.barra[data-activo] .boton-buscar__icono,
.boton-buscar:focus-visible .boton-buscar__icono,
.barra[data-activo] .boton-buscar__giro { transform: none; }
.barra[data-activo] .boton-buscar__texto,
.boton-buscar:focus-visible .boton-buscar__texto { opacity: 1; transition-delay: 60ms; }
.boton-buscar:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--texto), inset 0 0 0 4px var(--blanco); }
.boton-buscar:active { transform: scale(.96); }

.boton-buscar[data-cargando] .boton-buscar__icono { opacity: 0; }
.boton-buscar[data-cargando] .boton-buscar__giro { opacity: 1; animation: girar 700ms linear infinite; }
.barra:not([data-activo]) .boton-buscar[data-cargando] .boton-buscar__giro { animation-name: girar-cerrado; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes girar-cerrado { from { transform: translateX(56px) rotate(0); } to { transform: translateX(56px) rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
  .boton-buscar:hover {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--acento-claro) 0%, var(--acento) 30%, var(--acento-oscuro) 100%);
  }
}

/* ---------- Paneles ---------- */

.panel {
  position: absolute; top: calc(100% + 12px); z-index: 3;
  background: var(--blanco);
  border-radius: var(--r-panel);
  box-shadow: var(--sombra-panel);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.panel[data-abierto] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}

.panel--donde { left: 0; width: 440px; max-width: 100%; padding: 16px 0 8px; transform-origin: top left; }
.panel--fechas { left: 0; right: 0; padding: 32px 32px 24px; transform-origin: top center; }
.panel--tipo { right: 0; width: 460px; max-width: 100%; padding: 24px; transform-origin: top right; }

.panel__contexto:empty { display: none; }
.panel__contexto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 32px 8px; padding: 10px 14px;
  border-radius: var(--r-12); background: var(--gris-1);
  font-size: 13px; line-height: 18px; color: var(--texto-2);
}
.panel__contexto strong { color: var(--texto); font-weight: 600; }
.panel__contexto .enlace { padding: 4px 6px; margin: -4px -6px; font-size: 13px; }

.panel__pie {
  margin: 8px 16px 0; padding: 12px 16px 6px;
  border-top: 1px solid var(--borde-2);
}

/* Lista de lugares */
.lista {
  max-height: min(56vh, 470px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px;
  scrollbar-width: thin;
}
.lista__grupo + .lista__grupo { margin-top: 8px; }
.lista__titulo { padding: 8px 16px 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto); }

.opcion {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px; padding: 8px; border-radius: var(--r-12);
  cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) ease;
}
.opcion[data-activa] { background: var(--gris-1); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { background: var(--gris-1); } }

.opcion__icono {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-12);
  display: grid; place-items: center;
  background: var(--gris-2); color: var(--texto);
}
.opcion__icono svg { width: 24px; height: 24px; }
.opcion__icono[data-tinte="cerca"] { background: #EBF1FB; color: #2D5BC4; }
.opcion__icono[data-tinte="barro"] { background: #FBEEE6; color: #B4501F; }
.opcion__icono[data-tinte="cantera"] { background: #EAF3EE; color: #2E7556; }
.opcion__icono[data-tinte="mar"] { background: #E6F2F7; color: #1C6E8C; }
.opcion__icono[data-tinte="agave"] { background: #EEF4E6; color: #4D7A23; }
.opcion__icono[data-tinte="reciente"] { background: var(--gris-2); color: var(--texto); }

.opcion__texto { min-width: 0; }
.opcion__titulo, .opcion__sub { display: block; }
.opcion__titulo { font-size: 14px; line-height: 18px; font-weight: 500; }
.opcion__titulo strong { font-weight: 700; }
.opcion__sub { font-size: 14px; line-height: 18px; color: var(--texto-2); }

.lista__vacia { padding: 16px 16px 20px; color: var(--texto-2); line-height: 20px; }
.lista__vacia strong { display: block; margin-bottom: 4px; color: var(--texto); font-weight: 600; }

/* Interruptor (switch) */
.interruptor {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 40px; cursor: pointer;
  font-size: 14px; font-weight: 500;
}
.interruptor input {
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 13px; background: #B0B0B0; cursor: pointer;
  transition: background-color var(--dur) ease;
}
.interruptor input::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--blanco);
  box-shadow: 0 1px 3px rgb(0 0 0 / .2);
  transition: transform var(--dur) var(--ease-out);
}
.interruptor input:checked { background: var(--texto); }
.interruptor input:checked::before { transform: translateX(18px); }
.interruptor input:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ---------- Calendario ---------- */

.cal { position: relative; }

.cal__nav {
  position: absolute; top: -6px; left: 0; right: 0;
  display: flex; justify-content: space-between; pointer-events: none;
}
.cal__flecha {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: auto;
  transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.cal__flecha svg { width: 12px; height: 12px; }
.cal__flecha:disabled { opacity: .25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cal__flecha:not(:disabled):hover { background: var(--gris-1); } }

.cal__meses { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.mes__titulo {
  margin: 0 0 14px; text-align: center;
  font-size: 16px; line-height: 20px; font-weight: 600;
}
.mes__semana {
  display: grid; grid-template-columns: repeat(7, 1fr);
  height: 24px; margin-bottom: 4px;
  font-size: 12px; line-height: 24px; font-weight: 600; color: var(--texto-2); text-align: center;
}
.mes__dias { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }

.dia { position: relative; height: 48px; display: grid; place-items: center; }
.dia::before { content: ''; position: absolute; inset: 0; background: transparent; }
.dia--rango::before { background: var(--rango); }
.dia--previo::before { background: var(--gris-1); }
.dia--inicio.dia--con-fin::before { left: 50%; }
.dia--fin::before,
.dia--previo-fin::before { right: 50%; }
.dia--inicio.dia--fin::before { display: none; }

.dia__btn {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dia__btn[aria-disabled="true"] { color: var(--apagado); cursor: default; }
.dia__btn:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .dia__btn:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--texto); }
}
.dia--previo-fin .dia__btn { box-shadow: inset 0 0 0 1.5px var(--texto); }
.dia--inicio .dia__btn,
.dia--fin .dia__btn { background: var(--texto); color: var(--blanco); box-shadow: none; }

.cal__mas {
  width: 100%; height: 48px; margin-top: 8px;
  border: 1px solid var(--texto); border-radius: var(--r-12);
  font-weight: 600;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.cal__mas:active { transform: scale(.98); }

/* Pie del calendario: aparece por pasos */
.cal__pie {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 16px; min-height: 40px; margin-top: 20px;
}
.pista { margin: 0; color: var(--texto-2); font-size: 14px; }
.horas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.hora { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); }
.hora select {
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 34px 0 14px;
  border: 1px solid var(--borde); border-radius: var(--r-pildora);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 12 16.7 23.3a1 1 0 0 1-1.4 0L4 12' fill='none' stroke='%23222' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px;
  font-size: 14px; font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease;
}
.hora select:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .hora select:hover { border-color: var(--texto); } }

.pie__der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.duracion { font-weight: 600; white-space: nowrap; }

.notas { width: 100%; display: grid; gap: 6px; }
.nota {
  margin: 0;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 18px; color: var(--texto-2);
}
.nota span:first-child { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--texto); }

.enlace {
  display: inline-flex; align-items: center;
  padding: 8px 10px; margin: -8px -10px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  transition: background-color var(--dur-fast) ease;
}
.pie__der .enlace { margin: 0; }

.boton-siguiente {
  height: 40px; padding: 0 18px; border-radius: 10px;
  background: var(--texto); color: var(--blanco); font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out);
}
.boton-siguiente:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .enlace:hover { background: var(--gris-1); } }

/* ---------- Tipo de auto ---------- */

.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tipo {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: var(--r-12);
  text-align: left; background: var(--blanco);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.tipo:active { transform: scale(.97); }
.tipo[aria-pressed="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); background: var(--gris-1); }
@media (hover: hover) and (pointer: fine) { .tipo:hover { border-color: var(--texto); } }

.tipo__icono { width: 60px; height: 40px; flex: none; }
/* Foto por defecto del modelo (js/fotos.js): PNG/WebP transparente de perfil, centrado sobre el gris del hueco */
.foto-modelo { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }

/* Autos 3D por tipo (img/tipos/): mismo estilo que el carrito del giro */
.auto-3d {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .16));
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: 50% 85%;
  user-select: none;
}
.tipo[aria-pressed="true"] .auto-3d,
.tipo-filtro[aria-pressed="true"] .auto-3d { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) {
  .tipo:hover .auto-3d, .tipo-filtro:hover .auto-3d { transform: scale(1.08) rotate(-2deg); }
}
.tipo__nombre { display: block; font-size: 14px; line-height: 18px; font-weight: 600; }
.tipo__sub { display: block; font-size: 12px; line-height: 16px; color: var(--texto-2); }

.transmision {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borde-2);
}
.transmision__titulo { font-weight: 600; }

.segmentado {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-pildora); background: var(--gris-2);
}
.segmentado button {
  height: 32px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--r-pildora);
  font-size: 13px; font-weight: 600; color: var(--texto-2);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.segmentado button[aria-checked="true"] { background: var(--blanco); border-color: var(--borde); color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .segmentado button[aria-checked="false"]:hover { color: var(--texto); } }

/* ---------- Búsqueda compacta (al bajar) ---------- */

.mini {
  position: absolute; left: 50%; top: 18px;
  display: flex; align-items: center;
  height: 48px; padding: 0 8px 0 8px;
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--r-pildora);
  box-shadow: var(--sombra-mini);
  transform-origin: top center;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(60px) scale(1.5);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), box-shadow var(--dur-fast) ease, visibility 0s linear var(--dur-slow);
}
.mini__seg {
  display: flex; align-items: center; gap: 12px;
  height: 100%; padding: 0 16px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.mini__seg span[data-mini] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.mini__seg--ultimo { padding-right: 0; color: var(--texto-2); font-weight: 400; }
.mini[data-tipo-lleno] .mini__seg--ultimo { color: var(--texto); font-weight: 500; }
.mini__div { width: 1px; height: 24px; background: var(--borde); }
.mini__lupa {
  width: 32px; height: 32px; padding: 9px; border-radius: 50%;
  background: var(--acento); color: var(--blanco);
}
@media (hover: hover) and (pointer: fine) { .mini:hover { box-shadow: 0 2px 4px rgb(0 0 0 / .18); } }

/* Modos del encabezado */
.enc[data-modo="mini"] .enc__fondo { transform: translateY(calc(var(--alto-fila) - var(--alto-enc))); }
.enc[data-modo="mini"] .giros { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-14px) scale(.9); transition-delay: 0s, 0s, var(--dur-slow); }
.enc[data-modo="mini"] .enc__busqueda {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-70px) scale(.56);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.enc[data-modo="mini"] .mini {
  opacity: 1; visibility: visible;
  transform: translateX(-50%);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), box-shadow var(--dur-fast) ease, visibility 0s;
}

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(0 0 0 / .25);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.velo[data-visible] { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }

/* ---------- Contenido ---------- */

main { padding-top: var(--alto-enc); }

.inspira { max-width: 1440px; margin: 0 auto; padding: 48px var(--margen) 56px; }
.inspira h2 { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }

.pestanas {
  display: flex; gap: 32px; margin-top: 8px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  position: relative; flex: none;
  padding: 16px 0 14px;
  font-weight: 500; color: var(--texto-2);
  transition: color var(--dur-fast) ease;
}
.pestana[aria-selected="true"] { color: var(--texto); font-weight: 600; }
.pestana[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--texto);
}
@media (hover: hover) and (pointer: fine) { .pestana:hover { color: var(--texto); } }

.destinos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px; padding-top: 32px;
}
.destino { display: block; align-self: start; text-align: left; border-radius: 8px; }
.destino__nombre { display: block; font-weight: 500; }
.destino__sub { display: block; color: var(--texto-2); }
@media (hover: hover) and (pointer: fine) { .destino:hover .destino__nombre { text-decoration: underline; text-underline-offset: 2px; } }

.pie { background: var(--gris-1); border-top: 1px solid var(--borde); }
.pie__cols {
  max-width: 1440px; margin: 0 auto; padding: 48px var(--margen) 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.pie h3 { margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.pie li + li { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { text-decoration: underline; text-underline-offset: 2px; } }
.pie__base {
  max-width: 1440px; margin: 0 auto; padding: 24px var(--margen);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--borde);
}
.pie__idioma { font-weight: 600; }

/* ---------- Avisos (toasts) ---------- */

.avisos {
  position: fixed; left: 50%; bottom: 24px; z-index: 100;
  width: min(440px, calc(100% - 32px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.aviso {
  pointer-events: auto;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-12);
  background: var(--texto); color: var(--blanco);
  box-shadow: 0 8px 28px rgb(0 0 0 / .28);
  font-size: 14px; line-height: 20px;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@starting-style { .aviso { opacity: 0; transform: translateY(12px) scale(.98); } }
.aviso[data-saliendo] { opacity: 0; transform: translateY(8px); transition-duration: var(--dur-exit); transition-timing-function: var(--ease-in); }
.aviso__icono { width: 20px; height: 20px; flex: none; color: rgb(255 255 255 / .85); }
.aviso__icono[data-tono="check"] { color: #8FD4A8; }
.aviso__titulo { font-weight: 600; }
.aviso__sub { color: rgb(255 255 255 / .72); }

/* ---------- Color de acento (solo maqueta, dentro del menú) ---------- */

.menu__acentos { padding: 8px 16px 8px; }
.acentos { display: flex; gap: 10px; margin-top: 10px; }
.acento {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.acento:active { transform: scale(.92); }
.acento[aria-checked="true"] { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--texto); }

/* ---------- Teléfono ---------- */

.movil-tope, .barra-inferior, .hoja { display: none; }

@media (max-width: 743px) {
  .enc, .velo { display: none; }
  main { padding-top: 0; }

  .movil-tope {
    display: block; position: sticky; top: 0; z-index: 30;
    padding: 14px var(--margen) 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde-2);
  }

  .pildora {
    width: 100%; height: 56px; padding: 0 20px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    border-radius: var(--r-pildora); background: var(--blanco);
    box-shadow: 0 0 0 1px var(--borde), 0 3px 12px rgb(0 0 0 / .1);
    transition: transform var(--dur-press) var(--ease-out);
  }
  .pildora:active { transform: scale(.98); }
  .pildora__lupa { width: 16px; height: 16px; flex: none; }
  .pildora__texto { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .pildora__titulo { font-weight: 600; font-size: 14px; line-height: 18px; }
  .pildora__sub { font-size: 12px; line-height: 16px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pildora__sub:empty { display: none; }
  .pildora[data-lleno] .pildora__texto { align-items: flex-start; }
  .pildora[data-lleno] { justify-content: flex-start; }

  .chips {
    display: flex; gap: 8px;
    margin: 0 calc(-1 * var(--margen)); padding: 14px var(--margen) 12px;
    overflow-x: auto; scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 44px; padding: 0 14px 0 8px;
    border-radius: var(--r-pildora);
    box-shadow: 0 0 0 1px var(--borde-2);
    color: var(--texto-2); font-weight: 500;
  }
  .chip img { width: 28px; height: 28px; object-fit: contain; }
  .chip[aria-current="page"] { color: var(--texto); font-weight: 600; box-shadow: 0 0 0 1.5px var(--texto); }

  .inspira { padding-top: 28px; }
  .inspira h2 { font-size: 20px; line-height: 24px; }
  .destinos { grid-template-columns: 1fr 1fr; gap: 20px 16px; }

  .pie__cols { grid-template-columns: 1fr; gap: 28px; }
  .pie { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .barra-inferior {
    display: flex; justify-content: center; gap: 44px;
    position: fixed; inset: auto 0 0 0; z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--blanco); border-top: 1px solid var(--borde-2);
  }
  .barra-inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 64px; font-size: 10px; font-weight: 600; color: var(--texto-2);
  }
  .barra-inferior a span { width: 24px; height: 24px; }
  .barra-inferior a[aria-current="page"] { color: var(--acento); }

  .avisos { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.hoja[open]) .avisos { bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Hoja de búsqueda */
  .hoja {
    position: fixed; inset: 0;
    width: 100%; max-width: none; height: 100dvh; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--gris-1); color: var(--texto);
    opacity: 0; transform: translateY(24px);
    transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in);
  }
  .hoja[open] { display: flex; flex-direction: column; }
  .hoja[data-visible] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform 320ms var(--ease-drawer); }
  .hoja::backdrop { background: transparent; }

  .hoja__tope { display: flex; justify-content: flex-end; padding: 12px 16px 4px; }
  .hoja__tope .circulo { width: 36px; height: 36px; }
  .hoja__tope .circulo svg { width: 12px; height: 12px; }

  .hoja__contenido {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 12px;
    padding: 8px 12px 24px;
  }

  .tarjeta {
    background: var(--blanco); border-radius: var(--r-tarjeta);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 6px 20px rgb(0 0 0 / .08);
  }
  .tarjeta__resumen {
    width: 100%; min-height: 60px; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-radius: inherit; font-size: 14px;
  }
  .tarjeta__resumen span:first-child { color: var(--texto-2); font-weight: 500; }
  .tarjeta__resumen span:last-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tarjeta__cuerpo { display: none; padding: 24px 20px 20px; }
  .tarjeta[data-abierta] .tarjeta__resumen { display: none; }
  .tarjeta[data-abierta] .tarjeta__cuerpo { display: block; animation: tarjeta-entra var(--dur-slow) var(--ease-out); }
  .tarjeta__titulo { margin: 0 4px 16px; font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }

  .panel__contexto { margin: 0 0 12px; }

  .campo {
    display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 16px;
    border: 1px solid #B0B0B0; border-radius: var(--r-12);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }
  .campo:focus-within { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
  .campo span { width: 16px; height: 16px; flex: none; }
  .campo input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
    font-size: 16px; font-weight: 500;
  }
  .campo input::placeholder { color: var(--texto-2); font-weight: 400; }

  .lista--movil { max-height: min(40dvh, 380px); padding: 8px 0 0; margin: 0 -8px; }
  .lista--movil .lista__titulo { padding-left: 8px; }
  .lista--movil .opcion { min-height: 64px; }
  .lista--movil .opcion__icono { width: 48px; height: 48px; }
  .interruptor--movil { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--borde-2); }

  .cal--movil .mes + .mes { margin-top: 24px; }
  .cal[data-modo="lista"] .cal__meses { grid-template-columns: 1fr; gap: 24px; }
  .cal[data-modo="lista"] .cal__lista { max-height: min(46dvh, 420px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
  .cal[data-modo="lista"] .mes__titulo { text-align: left; margin-left: 4px; }
  .cal[data-modo="lista"] .dia { height: auto; aspect-ratio: 1; max-height: 52px; }
  .cal[data-modo="lista"] .dia__btn { width: 100%; height: 100%; max-width: 48px; max-height: 48px; }
  .cal__pie--movil { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde-2); }
  .cal__pie--movil .horas { width: 100%; }
  .cal__pie--movil .hora { flex: 1 1 140px; justify-content: space-between; }
  .cal__pie--movil .pie__der { width: 100%; justify-content: space-between; margin-left: 0; }

  .tipos { gap: 8px; }
  .tipo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }

  .hoja__pie {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    background: var(--blanco); border-top: 1px solid var(--borde-2);
  }
  .boton-acento {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 24px 0 20px;
    border-radius: var(--r-12); background: var(--acento); color: var(--blanco);
    font-size: 16px; font-weight: 600;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
  }
  .boton-acento span { width: 16px; height: 16px; }
  .boton-acento:active { transform: scale(.97); }
}

@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(6px); } }

/* Tableta: la barra se encoge con el ancho */
@media (min-width: 744px) and (max-width: 949px) {
  .giros { gap: 12px; }
  .giro__nombre { font-size: 13px; }
  .giro__icono, .giro__icono img { width: 40px; height: 40px; }
  .seg__boton { padding: 0 16px; }
  .seg--donde .seg__boton { padding-left: 24px; }
  .panel--fechas { padding: 24px 20px 20px; }
  .cal__meses { gap: 24px; }
  .dia__btn { width: 40px; height: 40px; }
  .dia { height: 42px; }
}

/* Movimiento reducido: sin desplazamientos ni escalas, solo opacidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .panel, .menu, .mini, .enc__busqueda, .giros, .enc__fondo, .hoja, .aviso,
  .boton-buscar, .boton-buscar__icono, .tipo, .circulo, .pildora, .giro__icono img, .auto-3d {
    transition-property: opacity, visibility, background-color, color, border-color !important;
  }
  .boton-buscar[data-cargando] .boton-buscar__giro { animation-duration: 700ms !important; animation-iteration-count: infinite !important; }
}

/* Zonas dentro de su ciudad en la lista de lugares: renglón compacto con sangría */
.opcion--hija { min-height: 48px; padding: 4px 8px 4px 32px; gap: 12px; }
.opcion--hija .opcion__icono { width: 32px; height: 32px; border-radius: 8px; }
.opcion--hija .opcion__icono svg { width: 16px; height: 16px; }
.opcion--hija .opcion__titulo { font-size: 14px; }
.opcion--hija .opcion__sub { font-size: 13px; line-height: 16px; }
.lista--movil .opcion--hija { min-height: 48px; padding-left: 28px; }
.lista--movil .opcion--hija .opcion__icono { width: 32px; height: 32px; }

/* ---------- Etiquetas (30-oct-2026, pedido de Julian) ----------
   Una sola pieza para todo el sitio; el texto, el icono y el tono de cada dato salen del catálogo de Go
   (internal/etiquetas → js/etiquetas.js; en la portada, el templ). Forma «foto»: píldora llena con degradado sobre
   fotos y fondos oscuros. Forma «línea»: chip suave junto al texto (las de promo van llenas: los descuentos
   resaltan). */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
  font-weight: 600; white-space: nowrap;
}
/* Si no cabe (tarjetas angostas del teléfono), el texto termina en «…» en lugar de cortarse. */
.etiqueta__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.etiqueta__icono { display: inline-flex; flex: none; height: 14px; }
.etiqueta__icono svg { width: auto; height: 100%; }

.etiqueta--foto {
  padding: 5px 11px 5px 9px; border-radius: var(--r-pildora);
  font-size: 12px; line-height: 16px; letter-spacing: .005em; color: var(--blanco);
  box-shadow: 0 2px 10px rgb(0 0 0 / .2), inset 0 0 0 1px rgb(255 255 255 / .14);
}
.etiqueta--foto.etiqueta--marca { background: var(--degradado-marca); }
.etiqueta--foto.etiqueta--bien { background: var(--degradado-bien); }
.etiqueta--foto.etiqueta--promo { background: var(--degradado-promo); }
.etiqueta--foto.etiqueta--aviso { background: var(--degradado-aviso); }
.etiqueta--foto.etiqueta--neutro {
  background: rgb(255 255 255 / .96); color: var(--texto);
  box-shadow: 0 2px 10px rgb(0 0 0 / .14), inset 0 0 0 1px rgb(0 0 0 / .04);
}
.etiqueta--foto.etiqueta--neutro .etiqueta__icono { color: var(--tema-a); }

.etiqueta--linea {
  padding: 3px 9px 3px 7px; border-radius: 8px;
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.etiqueta--linea .etiqueta__icono { height: 13px; }
.etiqueta--linea.etiqueta--marca { background: var(--tema-fondo); color: var(--tema-a); box-shadow: inset 0 0 0 1px var(--tema-borde); font-weight: 600; }
.etiqueta--linea.etiqueta--bien { background: var(--bien-fondo); color: var(--bien); box-shadow: inset 0 0 0 1px var(--bien-borde); font-weight: 600; }
.etiqueta--linea.etiqueta--aviso { background: var(--alerta-fondo); color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta-borde); font-weight: 600; }
.etiqueta--linea.etiqueta--promo { background: var(--degradado-promo); color: var(--blanco); font-weight: 600; }
.etiqueta--linea.etiqueta--neutro { background: var(--gris-1); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borde-2); }

/* Fila de etiquetas */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }