/* Amarillo 2.0: la Amarillo original + la ruta que avanza (de Ruta negra), la barra de búsqueda y la vista rápida (de Pro)
   y los precios colgantes (de Etiquetas). Se carga después de amarillo.css. */
:root {
  --asfalto: #1C1D20;
  --pintura: #F2F2EF;
  --avance: 0;
  --discontinua: repeating-linear-gradient(90deg, var(--amarillo) 0 34px, transparent 34px 58px);
}

/* ---------- La ruta ---------- */

/* Portada: una ruta en perspectiva que avanza debajo de las fotos (y acompaña al subir y bajar) */
.via-portada { position: relative; display: grid; place-items: center; }
.camino { position: absolute; left: 50%; bottom: -96px; width: min(86%, 470px); height: 150%; transform: translateX(-50%) perspective(420px) rotateX(58deg); transform-origin: 50% 100%; pointer-events: none; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 3%, var(--pintura) 3% 5%, transparent 5% 95%, var(--pintura) 95% 97%, transparent 97%),
    repeating-linear-gradient(180deg, var(--amarillo) 0 46px, transparent 46px 92px) 50% var(--ruta-y, 0px) / 5% 100% repeat-y,
    var(--asfalto);
  box-shadow: 0 0 60px 6px rgba(0, 0, 0, 0.35) inset; }
.mazo { z-index: 1; }
.mazo .pista { bottom: -10px; padding: 4px 12px; border-radius: 999px; background: var(--tinta); color: var(--blanco); }
@media (min-width: 900px) { .camino { bottom: -120px; } }

/* Carril entre secciones: la línea discontinua corre al bajar y vuelve al subir */
.carretera { position: relative; height: 58px; overflow: hidden; border-block: 2px solid var(--tinta);
  background: linear-gradient(var(--pintura), var(--pintura)) 0 7px / 100% 3px no-repeat, linear-gradient(var(--pintura), var(--pintura)) 0 calc(100% - 7px) / 100% 3px no-repeat, var(--asfalto); }
.carretera::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; background: var(--discontinua); background-position-x: calc(var(--avance) * -1px); }
.carretera.doble::before { height: 14px; margin-top: -7px; background: linear-gradient(var(--amarillo) 0 5px, transparent 5px 9px, var(--amarillo) 9px 14px); }
.carretera + .cinta { border-top: 0; }

/* ---------- Barra de búsqueda (fija al bajar) ---------- */
.barra-busqueda { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: var(--amarillo); border-bottom: 2px solid var(--tinta); transition: box-shadow 260ms var(--ease); }
.barra-busqueda.pegada { box-shadow: 0 6px 0 var(--tinta); }
.barra-busqueda .ancho { display: grid; gap: 10px; padding-block: 12px; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.buscador input { width: 100%; height: 50px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco); padding: 0 18px 0 46px; font: 600 16px var(--f); color: var(--tinta); outline: none; transition: box-shadow 200ms var(--ease); }
.buscador input::placeholder { color: #6A6A70; font-weight: 500; }
.buscador input:focus { box-shadow: 0 4px 0 var(--tinta); }
.buscador label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.marcas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.marcas::-webkit-scrollbar { display: none; }
.marcas button { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--tinta); background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease); }
.marcas button span { margin-left: 5px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.marcas button[aria-pressed="true"] { background: var(--tinta); color: var(--amarillo); }
.marcas button:active { transform: scale(0.96); }
.barra-busqueda .fila-filtro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.barra-busqueda .filtro button { height: 40px; padding: 0 14px; font-size: 14px; }
.resultado { font-weight: 700; font-size: 14px; }
.resultado b { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .barra-busqueda .ancho { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) auto; align-items: center; }
  .marcas { margin: 0; padding: 0; }
  .barra-busqueda .fila-filtro { flex-wrap: nowrap; }
}
@media (max-width: 899px) {
  .barra-busqueda.pegada .fila-filtro { display: none; }
  .barra-busqueda.pegada .ancho { padding-block: 8px; gap: 8px; }
  .barra-busqueda.pegada .buscador input { height: 44px; }
  .barra-busqueda.pegada .marcas button { height: 36px; }
}
.autos { padding-top: 36px; }
.vacio { grid-column: 1 / -1; padding: 36px 20px; border: 2px dashed var(--tinta); border-radius: 22px; text-align: center; display: grid; gap: 12px; justify-items: center; font-weight: 600; }
.vacio[hidden] { display: none; }
.vacio b { font-size: 22px; letter-spacing: -0.02em; }

/* ---------- Precio colgante ---------- */
.colgante { position: absolute; z-index: 4; top: -2px; right: 20px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; cursor: pointer; border: 0; padding: 0; background: none; font: inherit; color: var(--tinta); }
.colgante .hilo { width: 2px; height: 26px; background: var(--tinta); }
.colgante .etiq { position: relative; min-width: 92px; padding: 16px 12px 10px; border-radius: 10px 10px 12px 12px; background: var(--amarillo); border: 2px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); text-align: center; }
.colgante .etiq::before { content: ""; position: absolute; left: 50%; top: 5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--hueso); border: 2px solid var(--tinta); }
.colgante .etiq small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.colgante .etiq b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.colgante.balancea { animation: balanceo 1700ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes balanceo { 0% { transform: rotate(0); } 14% { transform: rotate(13deg); } 32% { transform: rotate(-9deg); } 50% { transform: rotate(5deg); } 68% { transform: rotate(-2.5deg); } 84% { transform: rotate(1deg); } 100% { transform: rotate(0); } }

/* Tarjetas: el precio está en la etiqueta (no se repite abajo); sello abajo a la izquierda, ojito abajo a la derecha */
.tarjeta { overflow: visible; container-type: inline-size; }
.tarjeta .foto { overflow: hidden; border-radius: 20px 20px 0 0; }
.tarjeta .sello { top: auto; bottom: 14px; right: auto; left: 12px; }
.tarjeta .medidas { justify-content: flex-start; }
.rapido { position: absolute; z-index: 3; right: 12px; top: calc(100cqw * 0.6875 - 58px); width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--blanco); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--tinta); transition: transform 160ms var(--ease); }
.rapido:active { transform: scale(0.94); }

/* Mazo: la carta de arriba lleva su etiqueta y abajo solo el nombre, centrado */
.mazo .carta { overflow: visible; }
.mazo .carta img { border-radius: 19px 19px 0 0; }
.mazo .carta .pie { justify-content: center; text-align: center; }
.mazo .carta .colgante { opacity: 0; transition: opacity 300ms var(--ease); }
.mazo .carta.arriba .colgante { opacity: 1; }

/* ---------- Vista rápida ---------- */
dialog.rapida { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0; border-top: 2px solid var(--tinta); border-radius: 26px 26px 0 0; background: var(--hueso); color: var(--tinta); overflow: auto; }
dialog.rapida::backdrop { background: rgba(18, 18, 18, 0.55); }
.rapida .tope { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--amarillo); border-bottom: 2px solid var(--tinta); }
.rapida .tope b { font-size: 18px; letter-spacing: -0.02em; }
.rapida .tope button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--blanco); display: grid; place-items: center; cursor: pointer; flex: none; }
.rapida .fotos-marco { position: relative; }
.rapida .fotos-marco .colgante { right: 26px; top: 0; }
.rapida .fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; padding: 14px 14px 0; }
.rapida .fotos::-webkit-scrollbar { display: none; }
.rapida .fotos figure { margin: 0; flex: none; width: 86%; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; border: 2px solid var(--tinta); scroll-snap-align: center; }
.rapida .fotos img { width: 100%; height: 100%; object-fit: cover; }
.rapida .cuerpo { padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 20px); display: grid; gap: 14px; }
.rapida .detalle { font-weight: 600; color: var(--gris); }
.rapida .rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.rapida .acciones { display: grid; gap: 8px; }
.rapida .acciones .boton { width: 100%; }
@media (min-width: 760px) { dialog.rapida { width: min(620px, 92vw); margin: auto; border: 2px solid var(--tinta); border-radius: 26px; box-shadow: 0 10px 0 var(--tinta); } .rapida .fotos figure { width: 70%; } }
@media (prefers-reduced-motion: no-preference) { dialog.rapida[open] { animation: subirHoja 420ms var(--ease-lenta); } dialog.rapida[open]::backdrop { animation: velo 300ms var(--ease); } }
@keyframes subirHoja { from { transform: translateY(100%); } }
@keyframes velo { from { opacity: 0; } }

/* Volver arriba */
.arriba-boton { position: fixed; z-index: 20; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--amarillo); box-shadow: 0 5px 0 var(--tinta); display: grid; place-items: center; cursor: pointer; transform: translateY(140%); transition: transform 360ms var(--ease-lenta); }
.arriba-boton.visible { transform: none; }
.arriba-boton svg { transform: rotate(-90deg); }

/* ---------- Ficha: el precio cuelga del panel ---------- */
.es-ficha .panel { position: relative; overflow: visible; padding-top: 26px; }
.es-ficha .panel .colgante { right: 22px; }
.es-ficha .panel .colgante .etiq { min-width: 130px; padding: 20px 14px 12px; }
.es-ficha .panel .colgante .etiq b { font-size: 22px; }
.es-ficha .panel h1 { padding-right: 178px; min-height: 104px; }
.es-ficha .etiqueta-precio { display: none; }
@media (max-width: 520px) { .es-ficha .panel h1 { padding-right: 0; min-height: 0; margin-top: 88px; } }

/* ---------- Frase del día: el tamaño se adapta a frases más largas ---------- */
.portada h1 { font-size: clamp(44px, 11.5vw, 104px); }

/* ---------- Logo redondo, siempre a la vista ---------- */
.logo-redondo { position: fixed; z-index: 25; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 16px; width: 72px; height: 72px; border-radius: 50%; transform-origin: 0 0; transition: transform 320ms var(--ease); filter: drop-shadow(0 4px 0 var(--tinta)); }
.logo-redondo.chico { transform: scale(0.82); }
.logo-redondo .aro { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.logo-redondo .disco { position: absolute; inset: 9px; border-radius: 50%; overflow: hidden; background: var(--blanco); border: 2px solid var(--tinta); }
.logo-redondo .disco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.logo-redondo:active { transform: scale(0.94); }
.logo-redondo.chico:active { transform: scale(0.78); }
.con-logo-redondo .encabezado .logo { visibility: hidden; width: 72px; aspect-ratio: 1; border: 0; }
.con-logo-redondo .barra-busqueda.pegada .ancho { padding-left: 84px; }
@media (min-width: 640px) {
  .logo-redondo { left: max(28px, calc((100vw - 1220px) / 2 + 28px)); width: 80px; height: 80px; }
  .con-logo-redondo .encabezado .logo { width: 80px; }
  .con-logo-redondo .barra-busqueda.pegada .ancho { padding-left: 106px; }
}

/* ---------- Disponibles ahora y Reservados: dos secciones, cada una con los autos de arriba hacia abajo ---------- */
.pasillo { margin-bottom: 48px; }
.pasillo[hidden] { display: none; }
.pasillo .titulo-pasillo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); }
.pasillo h3 { font-size: clamp(28px, 5vw, 40px); }
.pasillo h3 span { font-variant-numeric: tabular-nums; opacity: 0.45; margin-left: 8px; }
.pasillo .riel-autos { display: grid; gap: 22px; }
@media (min-width: 640px) { .pasillo .riel-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pasillo .riel-autos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Botón a los vendidos (en la sección negra) ---------- */
.ver-entregas { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 18px 18px 22px; border-radius: 22px; background: var(--amarillo); color: var(--tinta); text-decoration: none; border: 2px solid var(--amarillo); box-shadow: 0 6px 0 #4A4100; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.ver-entregas span { font-weight: 800; font-size: clamp(22px, 4.6vw, 30px); letter-spacing: -0.03em; line-height: 1.05; }
.ver-entregas small { grid-row: 2; font-weight: 600; font-size: 14px; color: var(--sobre-amarillo); margin-top: 4px; }
.ver-entregas i { grid-row: 1 / span 2; grid-column: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--tinta); color: var(--amarillo); display: grid; place-items: center; transition: transform 300ms var(--ease); }
.ver-entregas:active { transform: translateY(3px); box-shadow: 0 2px 0 #4A4100; }
@media (hover: hover) and (pointer: fine) { .ver-entregas:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #4A4100; } .ver-entregas:hover i { transform: translateX(4px); } }

/* ---------- Página de vendidos ---------- */
.entregas-portada { background: var(--amarillo); padding-block: 26px 40px; border-bottom: 2px solid var(--tinta); }
.entregas-portada .volver { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; min-height: 44px; }
.entregas-portada h1 { margin-top: 8px; font-size: clamp(42px, 10vw, 92px); }
.entregas-portada .bajada { margin-top: 14px; font-size: 18px; font-weight: 500; color: var(--sobre-amarillo); max-width: 46ch; }
.entregas-portada .total { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.entregas-portada .total p { font-weight: 700; max-width: 18ch; line-height: 1.25; }
.entregas-portada .marcas { margin-top: 22px; }
.entregas { padding-block: 44px 64px; }
.entregas .rejilla { display: grid; gap: 28px 20px; }
.entrega { position: relative; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 18px; padding: 10px 10px 16px; box-shadow: 0 6px 0 var(--tinta); transform: rotate(var(--giro, 0deg)); transition: transform 360ms var(--ease), box-shadow 360ms var(--ease); }
.entrega[hidden] { display: none; }
.entrega .foto { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid var(--tinta); }
.entrega .foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entrega .sello-entregado { position: absolute; left: 10px; bottom: 12px; padding: 6px 12px; border: 3px solid var(--tinta); border-radius: 10px; background: rgba(255, 255, 255, 0.92); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-8deg); }
.entrega .foto-cliente { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tinta); color: var(--blanco); font-size: 12px; font-weight: 700; }
.entrega .colgante .etiq { background: var(--blanco); }
.entrega .colgante .etiq small { letter-spacing: 0.04em; }
.entrega .texto { padding: 14px 6px 0; display: grid; gap: 4px; }
.entrega h3 { font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; }
.entrega .detalle { color: var(--gris); font-weight: 500; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .entrega:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 10px 0 var(--tinta); } }
@media (min-width: 640px) { .entregas .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .entregas .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entregas .nota { margin-top: 28px; padding: 14px 16px; border: 2px dashed var(--tinta); border-radius: 16px; font-weight: 500; color: var(--gris); }
.proximo { margin-top: 36px; background: var(--tinta); color: var(--blanco); border-radius: 26px; padding: 26px 22px; display: grid; gap: 14px; justify-items: start; }
.proximo h2 { font-size: clamp(30px, 6vw, 48px); }
.proximo p { color: #C9C9CE; }
.proximo .boton { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
@media (prefers-reduced-motion: no-preference) {
  .entrega.espera { opacity: 0.001; transform: translateY(30px) rotate(var(--giro, 0deg)); }
  .entrega { transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), opacity 700ms var(--ease); }
}

/* ---------- Recomendación del día (concepto aprobado) ---------- */
/* Cartel negro colgado de dos hilos arriba del mazo */
.reco { position: relative; z-index: 3; width: min(92%, 440px); margin: 0 auto 30px; padding-top: 30px; transform-origin: 50% 0; }
.reco[hidden] { display: none; }
.reco::before, .reco::after { content: ""; position: absolute; top: 0; width: 2px; height: 36px; background: var(--tinta); }
.reco::before { left: 16%; }
.reco::after { right: 16%; }
.reco .cartel { position: relative; background: var(--tinta); color: var(--blanco); border: 2px solid var(--tinta); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 0 rgba(18, 18, 18, 0.28); }
.reco .cartel::before, .reco .cartel::after { content: ""; position: absolute; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--amarillo); }
.reco .cartel::before { left: calc(16% - 4px); }
.reco .cartel::after { right: calc(16% - 4px); }
.reco .rotulo-reco { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amarillo); }
.reco .rotulo-reco svg { flex: none; }
.reco .linea-reco { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 10px; text-align: center; }
.reco .dia { padding: 4px 11px 3px; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.reco .frase-reco { width: 100%; margin-top: 2px; font-size: clamp(21px, 5.4vw, 27px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }

/* Mazo de recomendados: etiqueta y ojito solo en la carta de arriba */
div.mazo:focus-visible { outline: 3px solid var(--tinta); outline-offset: 6px; border-radius: 26px; }
.mazo .pista { display: none; }
.mazo .carta .rapido { top: auto; bottom: 64px; right: 12px; z-index: 5; }
.mazo .carta:not(.arriba) .rapido { display: none; }

/* Pastilla con los puntitos (cuál de los recomendados se ve) */
.recomendados { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--tinta); position: relative; z-index: 2; }
.recomendados[hidden] { display: none; }
.recomendados .puntos { display: flex; gap: 6px; }
.recomendados .puntos i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); transition: width 280ms var(--ease), background-color 280ms var(--ease); }
.recomendados .puntos i.on { width: 22px; background: var(--amarillo); }
.recomendados span { color: var(--blanco); font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .reco { animation: colgar 6s ease-in-out infinite alternate; }
}
@keyframes colgar { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* ---------- Contacto real: horarios, cómo llegar y redes ---------- */
.persona .boton { text-decoration: none; }
.horarios { margin: 0; display: grid; gap: 6px; }
.horarios div { display: grid; gap: 1px; }
.horarios dt { font-weight: 700; color: var(--blanco); }
.horarios dd { margin: 0; color: #C9C9CE; font-variant-numeric: tabular-nums; }
.persona .amarillo-boton { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); text-decoration: none; }
.seguinos { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #333; font-weight: 700; }
.redes { display: inline-flex; gap: 8px; }
.redes a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; transition: transform 160ms var(--ease), background-color 200ms var(--ease); }
.persona .redes a { background: var(--amarillo); color: var(--tinta); }
footer .redes a { background: #26262A; color: var(--amarillo); }
footer .ancho { align-items: center; }
.redes a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { footer .redes a:hover { background: var(--amarillo); color: var(--tinta); } }

/* ---------- Fichas flotantes para elegir con quién hablar (fondo desenfocado) ---------- */
dialog.fichas-contacto { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: var(--tinta); overflow-y: auto; }
dialog.fichas-contacto[open] { display: grid; place-items: center; }
dialog.fichas-contacto::backdrop { background: rgba(18, 18, 18, 0.42); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); }
.fc-cerrar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--blanco); box-shadow: 0 4px 0 var(--tinta); display: grid; place-items: center; cursor: pointer; }
.fc-contenido { width: min(420px, 100%); display: grid; gap: 16px; padding-block: 56px 24px; }
.fc-titulo { margin: 0; text-align: center; color: var(--blanco); font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.fc-sobre { margin: -6px 0 2px; justify-self: center; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 2px solid var(--tinta); font-size: 14px; font-weight: 600; text-align: center; }
.fc-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 16px; border-radius: 22px; border: 2px solid var(--tinta); background: var(--blanco); color: var(--tinta); box-shadow: 0 7px 0 var(--tinta); text-decoration: none; transition: box-shadow 200ms var(--ease); }
.fc-ficha:nth-of-type(2) { --giro: 1.2deg; }
.fc-inicial { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo); border: 2px solid var(--tinta); font-weight: 800; font-size: 21px; letter-spacing: 0.02em; }
.fc-texto { display: grid; gap: 2px; min-width: 0; }
.fc-texto b { font-size: 21px; letter-spacing: -0.025em; }
.fc-lema { font-weight: 500; color: var(--gris); line-height: 1.35; }
.fc-numero { font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-boton { grid-column: 1 / -1; height: 50px; border-radius: 999px; background: var(--tinta); color: var(--blanco); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; }
.fc-ficha:active { box-shadow: 0 3px 0 var(--tinta); }
.fc-redes { justify-self: center; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(18, 18, 18, 0.82); color: var(--blanco); font-weight: 700; }
.fichas-contacto .redes a { width: 44px; height: 44px; background: var(--amarillo); color: var(--tinta); border: 2px solid var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  dialog.fichas-contacto[open]::backdrop { animation: velo 320ms var(--ease); }
  dialog.fichas-contacto[open] .fc-titulo, dialog.fichas-contacto[open] .fc-sobre, dialog.fichas-contacto[open] .fc-redes { animation: aparecer 520ms var(--ease) both; }
  dialog.fichas-contacto[open] .fc-redes { animation-delay: 300ms; }
  /* Las fichas entran desde abajo una detrás de otra y después quedan flotando suave */
  dialog.fichas-contacto[open] .fc-ficha { animation: llegaFicha 560ms var(--ease-lenta) both, flota 4.4s ease-in-out infinite alternate; animation-delay: calc(80ms + var(--i) * 110ms), calc(700ms + var(--i) * 600ms); }
}
@keyframes llegaFicha { from { opacity: 0; transform: translateY(46px) scale(0.95) rotate(var(--giro, -1.2deg)); } to { opacity: 1; transform: rotate(var(--giro, -1.2deg)); } }
@keyframes flota { from { transform: translateY(0) rotate(var(--giro, -1.2deg)); } to { transform: translateY(-7px) rotate(calc(var(--giro, -1.2deg) * -0.4)); } }
@media (prefers-reduced-motion: reduce) { .fc-ficha { transform: rotate(var(--giro, -1.2deg)); } }