/* ==========================================================================
   STYLES.CSS — Componentes y secciones
   --------------------------------------------------------------------------
   ÍNDICE
   01. Loader
   02. Navbar y menú móvil
   03. Botones
   04. Hero con fotografía rotativa
   05. Barra de búsqueda
   06. Franja de datos y cinta de marcas
   07. Tarjeta de vehículo
   08. Filtros y catálogo
   09. Cómo funciona
   10. Por qué elegirnos
   11. Testimonios
   12. Preguntas frecuentes
   13. Llamado a la acción
   14. Footer y botones flotantes
   15. Página de detalle
   16. Galería ampliada
   17. Calculadora
   18. Apariciones al hacer scroll
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. LOADER
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-5);
  background: var(--papel);
  transition: opacity var(--medio), visibility var(--medio);
}

.loader.oculto { opacity: 0; visibility: hidden; }

.loader__marca {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-left: 0.38em;
}

.loader__barra { width: 160px; height: 2px; background: var(--linea); overflow: hidden; }

.loader__barra span {
  display: block;
  width: 38%;
  height: 100%;
  background: var(--azul);
  animation: barrido 1.05s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes barrido {
  from { transform: translateX(-100%); }
  to   { transform: translateX(360%); }
}

/* --------------------------------------------------------------------------
   02. NAVBAR
   Sobre la fotografía del hero va en blanco; al bajar se vuelve sólida.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition: background var(--medio), border-color var(--medio), box-shadow var(--medio);
}

.nav--solida,
.nav--fija {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.nav__interior {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--papel);
  transition: color var(--medio);
}

.logo__icono { width: 26px; height: 26px; flex: none; }

.logo small {
  display: block;
  margin-top: 1px;
  font-family: var(--f-dato);
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  color: currentColor;
  opacity: 0.6;
}

.nav--solida .logo,
.nav--fija .logo { color: var(--tinta); }

.nav--solida .logo__icono path[stroke="#ffffff"],
.nav--fija .logo__icono path[stroke="#ffffff"] { stroke: var(--tinta); }

.nav__menu { display: none; }

.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--e-2);
  transition: color var(--rapido);
}

.nav--solida .nav__link,
.nav--fija .nav__link { color: var(--humo); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio);
}

.nav__link:hover,
.nav__link.activo { color: var(--papel); }

.nav--solida .nav__link:hover,
.nav--solida .nav__link.activo,
.nav--fija .nav__link:hover,
.nav--fija .nav__link.activo { color: var(--tinta); }

.nav__link:hover::after,
.nav__link.activo::after { transform: scaleX(1); }

.nav__acciones { display: flex; align-items: center; gap: var(--e-3); }

.nav__tel { display: none; }

.hamburguesa {
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-sm);
}

.nav--solida .hamburguesa,
.nav--fija .hamburguesa { border-color: var(--linea); }

.hamburguesa span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--papel);
  transition: transform var(--medio), opacity var(--rapido), background var(--medio);
}

.nav--solida .hamburguesa span,
.nav--fija .hamburguesa span { background: var(--tinta); }

.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.menu-movil {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 890;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: var(--e-4) var(--margen) var(--e-6);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform var(--medio), visibility var(--medio);
  box-shadow: var(--sombra-md);
}

.menu-movil.abierto { transform: translateY(0); visibility: visible; }

.menu-movil a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--e-4);
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}

.menu-movil .boton { margin-top: var(--e-5); width: 100%; justify-content: center; }

.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--azul);
  z-index: 950;
}

@media (min-width: 1000px) {
  .nav__menu { display: flex; align-items: center; gap: var(--e-4); }
  .nav__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--f-dato);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04em;
  }
  .nav--solida .nav__tel,
  .nav--fija .nav__tel { color: var(--tinta); }
  .hamburguesa { display: none; }
}

/* El teléfono de la barra solo cabe en pantallas anchas: con la sesión
   y el botón de reservar, antes se apretaba el menú */
@media (max-width: 1399px) { .nav__tel { display: none !important; } }
@media (min-width: 1280px) { .nav__menu { gap: var(--e-5); } }

/* --------------------------------------------------------------------------
   03. BOTONES
   Rectangulares y sobrios. El negro es la acción principal; el azul, el enlace.
   -------------------------------------------------------------------------- */
.boton {
  --bg: var(--tinta);
  --fg: var(--papel);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.85rem 1.35rem;
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--rapido), box-shadow var(--medio), background var(--rapido), color var(--rapido), border-color var(--rapido);
}

.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.18) 50%, transparent 78%);
  transform: translateX(-120%);
  transition: transform var(--lento);
}

.boton:hover::before { transform: translateX(120%); }
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-md); }
.boton:active { transform: none; }
.boton svg { width: 17px; height: 17px; flex: none; }

.boton--azul { --bg: var(--azul); }
.boton--claro { --bg: var(--papel); --fg: var(--tinta); }

.boton--fantasma {
  --bg: transparent;
  --fg: var(--papel);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.boton--fantasma:hover { --bg: var(--papel); --fg: var(--tinta); border-color: var(--papel); }

.boton--linea {
  --bg: transparent;
  --fg: var(--tinta);
  border: 1px solid var(--linea);
}

.boton--linea:hover { --bg: var(--tinta); --fg: var(--papel); border-color: var(--tinta); }
.boton--wa { --bg: var(--whatsapp); }
.boton--fb { --bg: #1877f2; }
.boton--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.boton--bloque { width: 100%; }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azul);
}

.enlace-flecha svg { width: 16px; height: 16px; transition: transform var(--medio); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   04. HERO
   Fotografía a sangre que rota entre las unidades, con el titular encima.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  isolation: isolate;
}

.hero__fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.vitrina__lamina {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms ease;
}

.vitrina__lamina.activa { opacity: 1; }

.vitrina__lamina img { width: 100%; height: 100%; object-fit: cover; }
.vitrina__lamina.activa img { animation: acercar 8s ease-out both; }

@keyframes acercar {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}

/* Velo para que el texto sea legible sobre cualquier fotografía */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(11, 12, 14, 0.94) 8%, rgba(11, 12, 14, 0.72) 42%, rgba(11, 12, 14, 0.25) 78%),
    linear-gradient(to top, rgba(11, 12, 14, 0.88), transparent 45%);
}

.hero__contenido {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--e-7));
  padding-bottom: var(--e-7);
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-4);
}

.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--azul-alto); }

.hero__texto {
  color: var(--plata);
  font-size: var(--t-md);
  max-width: 46ch;
}

/* Etiqueta de la unidad que se está viendo */
.vitrina__info {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-self: flex-start;
  padding: var(--e-3) var(--e-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  background: rgba(11, 12, 14, 0.42);
  backdrop-filter: blur(10px);
  transition: border-color var(--rapido), background var(--rapido);
}

.vitrina__info:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(11, 12, 14, 0.6); }
.vitrina__envoltura { align-self: flex-start; }
.vitrina__envoltura.entra { animation: subir 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.vitrina__flecha { width: 16px; height: 16px; color: var(--papel); transition: transform var(--medio); }
.vitrina__info:hover .vitrina__flecha { transform: translateX(4px); }

@keyframes subir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.vitrina__estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-dato);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.vitrina__estado i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: latido 1.9s ease-in-out infinite;
}

.vitrina__info--reservado .vitrina__estado i { background: var(--ambar); animation: none; }

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 159, 91, 0.7); }
  70%      { box-shadow: 0 0 0 7px rgba(14, 159, 91, 0); }
}

.vitrina__titulo {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--papel);
}

.vitrina__meta {
  font-family: var(--f-dato);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--plata);
}

.vitrina__pie { display: inline-flex; align-items: center; gap: var(--e-3); }
.vitrina__pie .precio { color: var(--papel); font-size: 1.15rem; }
.vitrina__pie .precio small { color: var(--plata); }

.vitrina__separador { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.22); }

/* En móvil la ficha se apila: los separadores verticales sobran */
@media (max-width: 599px) {
  .vitrina__envoltura { align-self: stretch; }
  .vitrina__info { width: 100%; }
  .vitrina__separador { display: none; }
  .vitrina__pie { width: 100%; justify-content: space-between; }
}

/* Puntos y avance */
.vitrina__puntos {
  position: absolute;
  right: var(--margen);
  /* por encima de la barra de búsqueda, que monta sobre el borde del hero */
  bottom: var(--e-8);
  display: flex;
  gap: 6px;
}

.vitrina__punto {
  width: 26px; height: 3px;
  background: rgba(255, 255, 255, 0.34);
  transition: background var(--rapido), width var(--medio);
}

.vitrina__punto:hover { background: rgba(255, 255, 255, 0.65); }
.vitrina__punto.activo { width: 40px; background: var(--papel); }

.vitrina__progreso {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.vitrina__progreso span { display: block; width: 0; height: 100%; background: var(--azul-alto); }

@keyframes avance { from { width: 0; } to { width: 100%; } }

@media (max-width: 767px) {
  .vitrina__puntos { bottom: auto; top: calc(var(--nav-h) + var(--e-4)); right: var(--margen); }
}

/* --------------------------------------------------------------------------
   05. BARRA DE BÚSQUEDA
   Monta sobre el borde del hero, como en las agencias de renta.
   -------------------------------------------------------------------------- */
.buscador {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--e-6) * -1);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
}

.buscador__campo { display: flex; flex-direction: column; gap: 5px; }

.buscador__campo > label {
  font-family: var(--f-dato);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
}

.buscador .boton { padding-block: 0.95rem; }

@media (min-width: 860px) {
  .buscador {
    grid-template-columns: 1.2fr 1fr 0.7fr auto;
    align-items: end;
    gap: var(--e-5);
    padding: var(--e-5);
  }
  .buscador__campo { border-right: 1px solid var(--linea); padding-right: var(--e-5); }
  .buscador__campo:nth-child(3) { border-right: 0; }
}

/* --------------------------------------------------------------------------
   06. FRANJA DE DATOS Y CINTA DE MARCAS
   -------------------------------------------------------------------------- */
.riel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
}

.riel__celda { background: var(--papel); padding: var(--e-5) var(--e-4); }

.riel__valor {
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.riel__etiqueta {
  font-family: var(--f-dato);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: var(--e-2);
}

@media (min-width: 760px) { .riel { grid-template-columns: repeat(4, 1fr); } }

.marcas {
  border-block: 1px solid var(--linea);
  padding-block: var(--e-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marcas__pista { display: flex; width: max-content; animation: desfilar 36s linear infinite; }
.marcas:hover .marcas__pista { animation-play-state: paused; }
.marcas__grupo { display: flex; align-items: center; gap: var(--e-6); padding-right: var(--e-6); }

.marcas__item {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--humo);
  opacity: 0.6;
  white-space: nowrap;
  transition: opacity var(--rapido), color var(--rapido);
}

.marcas__item:hover { opacity: 1; color: var(--tinta); }
.marcas__punto { width: 3px; height: 3px; border-radius: 50%; background: var(--azul); flex: none; }

@keyframes desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   07. TARJETA DE VEHÍCULO
   -------------------------------------------------------------------------- */
.grid-autos { display: grid; grid-template-columns: 1fr; gap: var(--e-5); }

@media (min-width: 640px) { .grid-autos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-autos { grid-template-columns: repeat(3, 1fr); } }

.auto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--medio), box-shadow var(--medio), transform var(--medio);
}

.auto:hover {
  transform: translateY(-3px);
  border-color: #cfd4db;
  box-shadow: var(--sombra-md);
}

.auto__figura {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #e8ebef 30%, #f4f6f8 50%, #e8ebef 70%);
  background-size: 220% 100%;
  animation: brillo 1.5s ease-in-out infinite;
}

@keyframes brillo {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

.auto__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--lento);
}

.auto:hover .auto__figura img { transform: scale(1.05); }

.auto__foto--alterna { position: absolute; inset: 0; opacity: 0; transition: opacity var(--medio); }
.auto:hover .auto__foto--alterna { opacity: 1; }

.auto__estado {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--tinta);
  font-family: var(--f-dato);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auto__estado i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.auto__estado--reservado i { background: var(--ambar); }
.auto__estado--disponible i { animation: latido 1.9s ease-in-out infinite; }

.auto__tipo {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: blur(6px);
  color: var(--papel);
  font-family: var(--f-dato);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--e-4);
  padding: var(--e-5);
}

.auto__marca {
  font-family: var(--f-dato);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
}

.auto__modelo {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-top: 4px;
}

.auto__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  padding-block: var(--e-3);
  border-block: 1px solid var(--linea);
}

.auto__spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--humo);
}

.auto__spec b { font-weight: 500; color: var(--tinta); }
.auto__spec svg { width: 15px; height: 15px; color: var(--humo); }

.auto__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: auto;
}

.precio {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.precio small {
  font-family: var(--f-dato);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--humo);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   08. FILTROS Y CATÁLOGO
   -------------------------------------------------------------------------- */
.chips { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-2); margin-bottom: var(--e-5); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip-filtro {
  flex: none;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--papel);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--humo);
  white-space: nowrap;
  transition: color var(--rapido), border-color var(--rapido), background var(--rapido);
}

.chip-filtro:hover { color: var(--tinta); border-color: var(--tinta); }
.chip-filtro.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.filtros {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--e-5);
  margin-bottom: var(--e-6);
}

.filtros__buscador { position: relative; }

.filtros__buscador > span {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--humo);
  pointer-events: none;
}

.campo {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: border-color var(--rapido), box-shadow var(--rapido);
  appearance: none;
}

.campo:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.filtros__buscador .campo { padding-left: 42px; }

.filtros__fila { display: grid; grid-template-columns: 1fr; gap: var(--e-4); margin-top: var(--e-4); }

.campo-grupo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.campo-grupo > label {
  font-family: var(--f-dato);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
}

.select-envoltura { position: relative; }

.select-envoltura::after {
  content: "";
  position: absolute;
  right: 15px; top: 45%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--humo);
  border-bottom: 1.5px solid var(--humo);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.rango { width: 100%; height: 22px; background: none; appearance: none; }
.rango::-webkit-slider-runnable-track { height: 2px; background: var(--linea); }
.rango::-moz-range-track { height: 2px; background: var(--linea); }

.rango::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--azul);
  border: 3px solid var(--papel);
  box-shadow: 0 0 0 1px var(--linea);
  cursor: pointer;
  transition: transform var(--rapido);
}

.rango::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--azul);
  border: 3px solid var(--papel);
  cursor: pointer;
}

.rango:hover::-webkit-slider-thumb { transform: scale(1.12); }
.rango-valor { font-family: var(--f-dato); font-size: var(--t-xs); }

.filtros__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.contador { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--humo); }
.contador b { color: var(--tinta); }

.limpiar { font-size: var(--t-sm); font-weight: 600; color: var(--azul); padding: var(--e-2); }
.limpiar:hover { text-decoration: underline; }

.interruptor { display: inline-flex; align-items: center; gap: var(--e-3); cursor: pointer; font-size: var(--t-sm); user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor__pista {
  position: relative;
  width: 38px; height: 21px;
  border-radius: var(--r-pill);
  background: var(--linea);
  transition: background var(--medio);
  flex: none;
}

.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: var(--sombra-sm);
  transition: transform var(--medio);
}

.interruptor input:checked + .interruptor__pista { background: var(--verde); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(17px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--azul); outline-offset: 3px; }

.vacio { display: none; text-align: center; padding: var(--e-8) var(--e-4); border: 1px dashed var(--linea); border-radius: var(--r-md); }
.vacio.visible { display: block; }
.vacio h3 { margin-bottom: var(--e-2); }
.vacio p { color: var(--humo); margin-bottom: var(--e-4); }

@media (min-width: 700px) { .filtros__fila { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filtros__fila { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .filtros__fila { grid-template-columns: repeat(5, 1fr); } }

/* --------------------------------------------------------------------------
   09. CÓMO FUNCIONA
   -------------------------------------------------------------------------- */
.pasos { display: grid; gap: var(--e-6); counter-reset: paso; }

.paso { position: relative; padding-top: var(--e-5); border-top: 1px solid var(--grafito); }

.paso::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--azul-alto);
  margin-bottom: var(--e-4);
}

.paso h3 { font-size: 1.3rem; margin-bottom: var(--e-2); }
.paso p { color: var(--plata); font-size: var(--t-sm); }

@media (min-width: 800px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }

/* --------------------------------------------------------------------------
   10. POR QUÉ ELEGIRNOS
   -------------------------------------------------------------------------- */
.ventajas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }

.ventaja { position: relative; background: var(--papel); padding: var(--e-6) var(--e-5); transition: background var(--medio); overflow: hidden; }
.ventaja:hover { background: var(--niebla); }

.ventaja::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--azul);
  transition: height var(--lento);
}

.ventaja:hover::before { height: 100%; }

.ventaja__num { font-family: var(--f-dato); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--azul); }
.ventaja h3 { font-size: 1.15rem; margin-block: var(--e-4) var(--e-2); }
.ventaja p { color: var(--humo); font-size: var(--t-sm); }

.ventaja__icono { width: 26px; height: 26px; color: var(--tinta); margin-top: var(--e-4); transition: transform var(--medio), color var(--rapido); }
.ventaja:hover .ventaja__icono { transform: translateY(-3px); color: var(--azul); }

@media (min-width: 640px) { .ventajas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ventajas { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   11. TESTIMONIOS
   -------------------------------------------------------------------------- */
.testimonios { display: grid; gap: var(--e-4); }

.testimonio {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--e-5);
  transition: box-shadow var(--medio), border-color var(--medio);
}

.testimonio:hover { box-shadow: var(--sombra-md); border-color: #cfd4db; }
.estrellas { display: flex; gap: 2px; color: var(--azul); }
.estrellas span { width: 14px; height: 14px; }
.testimonio p { font-size: var(--t-md); }
.testimonio__autor { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; }

.avatar {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--f-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.testimonio__autor b { display: block; font-size: var(--t-sm); }
.testimonio__autor span { font-size: var(--t-xs); color: var(--humo); }

@media (min-width: 700px) { .testimonios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 699px) {
  .testimonios {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--margen);
    margin-inline: calc(var(--margen) * -1);
  }
  .testimonios::-webkit-scrollbar { display: none; }
  .testimonio { flex: 0 0 86%; scroll-snap-align: center; }
}

.puntos-carrusel { display: flex; justify-content: center; gap: 6px; margin-top: var(--e-5); }
.puntos-carrusel button { width: 6px; height: 6px; border-radius: 50%; background: var(--linea); transition: width var(--medio), background var(--rapido); }
.puntos-carrusel button.activo { width: 22px; border-radius: var(--r-pill); background: var(--azul); }

@media (min-width: 700px) { .puntos-carrusel { display: none; } }

/* --------------------------------------------------------------------------
   12. PREGUNTAS FRECUENTES
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }

.faq__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color var(--rapido);
}

.faq__boton:hover { color: var(--azul); }
.faq__mas { position: relative; width: 20px; height: 20px; flex: none; }

.faq__mas::before,
.faq__mas::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--medio);
}

.faq__mas::after { transform: rotate(90deg); }
.faq__item.abierto .faq__mas::after { transform: rotate(0); }
.faq__item.abierto .faq__boton { color: var(--azul); }

.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--medio); }
.faq__item.abierto .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { color: var(--humo); padding-bottom: var(--e-5); max-width: 70ch; }

@media (min-width: 900px) {
  .faq-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--e-7); align-items: start; }
}

/* --------------------------------------------------------------------------
   13. LLAMADO A LA ACCIÓN
   -------------------------------------------------------------------------- */
.cta {
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-lg);
  padding: var(--e-7) var(--e-5);
  display: grid;
  gap: var(--e-5);
}

.cta h2 { max-width: 18ch; }
.cta p { color: var(--plata); font-size: var(--t-md); max-width: 52ch; }
.cta__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

@media (min-width: 900px) {
  .cta { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: var(--e-8); }
  .cta__acciones { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   14. FOOTER Y FLOTANTES
   -------------------------------------------------------------------------- */
.footer { background: var(--tinta); color: var(--plata); padding-block: var(--e-7) var(--e-5); }
.footer__grid { display: grid; gap: var(--e-6); padding-bottom: var(--e-6); border-bottom: 1px solid var(--grafito); }
.footer .logo { color: var(--papel); }

.footer h4 {
  font-family: var(--f-dato);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel);
  margin-bottom: var(--e-4);
}

.footer li + li { margin-top: var(--e-2); }
.footer a { font-size: var(--t-sm); transition: color var(--rapido); }
.footer a:hover { color: var(--papel); }
.footer__texto { font-size: var(--t-sm); max-width: 38ch; margin-top: var(--e-4); }

.redes { display: flex; gap: var(--e-2); margin-top: var(--e-5); }

.red {
  width: 38px; height: 38px;
  display: grid;
  place-content: center;
  border: 1px solid var(--grafito);
  border-radius: var(--r-sm);
  color: var(--plata);
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}

.red svg { width: 17px; height: 17px; }
.red:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
  padding-top: var(--e-5);
  font-family: var(--f-dato);
  font-size: 0.66rem;
  color: var(--humo);
}

@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }

.flotante {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 800;
  width: 52px; height: 52px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--papel);
  box-shadow: 0 10px 24px rgba(18, 161, 90, 0.35);
  transform: scale(0);
  transition: transform var(--medio);
}

.flotante.visible { transform: scale(1); }
.flotante:hover { transform: scale(1.07); }
.flotante svg { width: 25px; height: 25px; }

.arriba {
  position: fixed;
  right: 18px; bottom: 80px;
  z-index: 800;
  width: 40px; height: 40px;
  display: grid;
  place-content: center;
  border-radius: var(--r-sm);
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-md);
  transform: scale(0);
  transition: transform var(--medio);
}

.arriba.visible { transform: scale(1); }
.arriba:hover { transform: scale(1.06); }
.arriba svg { width: 17px; height: 17px; transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   15. PÁGINA DE DETALLE
   -------------------------------------------------------------------------- */
.detalle { padding-top: calc(var(--nav-h) + var(--e-5)); }

.migas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: var(--e-5);
}

.migas a:hover { color: var(--azul); }

.detalle__grid { display: grid; gap: var(--e-6); }
.detalle__grid > *, .calculadora__fila > * { min-width: 0; }
input[type="date"].campo { min-width: 0; width: 100%; }

.galeria__principal {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  background: linear-gradient(100deg, #e8ebef 30%, #f4f6f8 50%, #e8ebef 70%);
  background-size: 220% 100%;
  animation: brillo 1.5s ease-in-out infinite;
}

.galeria__principal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; animation: aparecer var(--medio) both; }

@keyframes aparecer {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

.galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tinta);
  box-shadow: var(--sombra-sm);
  opacity: 0;
  transition: opacity var(--medio), background var(--rapido);
  z-index: 2;
}

.galeria__principal:hover .galeria__flecha,
.galeria__flecha:focus-visible { opacity: 1; }

.galeria__flecha:hover { background: var(--papel); }
.galeria__flecha--prev { left: var(--e-3); }
.galeria__flecha--next { right: var(--e-3); }
.galeria__flecha svg { width: 16px; height: 16px; }
.galeria__flecha--prev svg { transform: rotate(180deg); }

.galeria__contador {
  position: absolute;
  right: var(--e-3); bottom: var(--e-3);
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-sm);
  background: rgba(11, 12, 14, 0.72);
  color: var(--papel);
  font-family: var(--f-dato);
  font-size: 0.62rem;
  z-index: 2;
}

.galeria__miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--e-2); margin-top: var(--e-2); }

.miniatura {
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--rapido), opacity var(--rapido);
  opacity: 0.65;
}

.miniatura img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.miniatura:hover { opacity: 1; }
.miniatura.activa { border-color: var(--tinta); opacity: 1; }

.panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--e-5);
}

.auto__estado--estatico { position: static; display: inline-flex; margin-bottom: var(--e-4); border: 1px solid var(--linea); }

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

.panel__precio .precio { font-size: 2.2rem; }
.nota-precio { color: var(--humo); }

.contactos { display: grid; gap: var(--e-2); }
.contactos .boton { width: 100%; }

.nota { font-size: var(--t-xs); color: var(--humo); text-align: center; margin-top: var(--e-4); }

.detalle__eyebrow { margin-top: var(--e-6); }

.subtitulo {
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}

.specs-tabla { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--linea); }

.specs-tabla div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
}

.specs-tabla dt { font-family: var(--f-dato); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--humo); }
.specs-tabla dd { font-weight: 600; text-align: right; }

.equipamiento { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
}

.chip svg { width: 13px; height: 13px; color: var(--azul); }

@media (min-width: 620px) { .specs-tabla { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-6); } }

@media (min-width: 960px) {
  .detalle__grid { grid-template-columns: 1.5fr 1fr; align-items: start; gap: var(--e-7); }
  .panel { position: sticky; top: calc(var(--nav-h) + var(--e-4)); }
}

.barra-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--margen);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%);
  transition: transform var(--medio);
}

.barra-movil.visible { transform: none; }
.barra-movil .precio { font-size: 1.3rem; }

@media (min-width: 900px) { .barra-movil { display: none; } }

/* --------------------------------------------------------------------------
   16. GALERÍA AMPLIADA
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--e-5);
  background: rgba(8, 9, 11, 0.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio), visibility var(--medio);
}

.lightbox.abierto { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; border-radius: var(--r-sm); object-fit: contain; animation: aparecer var(--medio) both; }

.lightbox__cerrar,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--papel);
  transition: background var(--rapido);
}

.lightbox__cerrar:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.14); }

.lightbox__cerrar { top: var(--e-4); right: var(--e-4); font-size: 1.3rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--e-4); }
.lightbox__nav--next { right: var(--e-4); }
.lightbox__nav svg { width: 19px; height: 19px; }
.lightbox__nav--prev svg { transform: rotate(180deg); }
.lightbox__contador { position: absolute; bottom: var(--e-5); font-family: var(--f-dato); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--plata); }

/* --------------------------------------------------------------------------
   17. CALCULADORA
   -------------------------------------------------------------------------- */
.calculadora { border: 1px solid var(--linea); border-radius: var(--r-sm); padding: var(--e-4); margin-bottom: var(--e-4); background: var(--niebla); }
.calculadora__fila { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); align-items: end; }

.contador-dias { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--papel); overflow: hidden; }
.contador-dias button { width: 34px; height: 42px; font-size: 1.05rem; transition: background var(--rapido); }
.contador-dias button:hover { background: var(--niebla); }

.contador-dias input {
  width: 40px; height: 42px;
  border: 0;
  text-align: center;
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  background: transparent;
  -moz-appearance: textfield;
}

.contador-dias input::-webkit-outer-spin-button,
.contador-dias input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

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

.calculadora__total b { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -0.035em; }
.calculadora__total s { color: var(--humo); margin-left: 6px; }
.calculadora__nota { font-size: var(--t-xs); color: var(--humo); margin-top: var(--e-2); }
.calculadora__nota--ok { color: var(--verde); font-weight: 600; }

/* --------------------------------------------------------------------------
   18. APARICIONES AL HACER SCROLL
   -------------------------------------------------------------------------- */
[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lento), transform var(--lento);
}

[data-revelar].visible { opacity: 1; transform: none; }
[data-revelar][data-retardo="1"] { transition-delay: 70ms; }
[data-revelar][data-retardo="2"] { transition-delay: 140ms; }
[data-revelar][data-retardo="3"] { transition-delay: 210ms; }

.palabra { display: inline-block; overflow: hidden; vertical-align: top; }

.palabra > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  animation: palabraSube 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 50ms + 380ms);
}

@keyframes palabraSube { to { transform: none; opacity: 1; } }

.vitrina, .galeria__principal, .lightbox img { touch-action: pan-y; }

/* ==========================================================================
   19. CUENTAS: BOTÓN DE SESIÓN Y VENTANA DE ACCESO
   -------------------------------------------------------------------------- */
.zona-sesion { display: none; }

@media (min-width: 1000px) { .zona-sesion { display: inline-flex; } }

.zona-sesion .boton--linea {
  --fg: var(--papel);
  border-color: rgba(255, 255, 255, 0.4);
}

.nav--solida .zona-sesion .boton--linea,
.nav--fija .zona-sesion .boton--linea { --fg: var(--tinta); border-color: var(--linea); }

.usuario { position: relative; }

.usuario__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-pill);
  color: var(--papel);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--rapido), border-color var(--rapido);
}

.nav--solida .usuario__boton,
.nav--fija .usuario__boton { color: var(--tinta); border-color: var(--linea); }
.usuario__boton:hover { background: rgba(255, 255, 255, 0.12); }
.nav--solida .usuario__boton:hover,
.nav--fija .usuario__boton:hover { background: var(--niebla); }

.usuario__avatar {
  width: 26px; height: 26px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--azul);
  color: var(--papel);
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 700;
}

.usuario__nombre { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usuario__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  padding: var(--e-3);
  z-index: 10;
}

.usuario__correo {
  font-size: var(--t-xs);
  color: var(--humo);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
  word-break: break-all;
}

.usuario__menu button {
  width: 100%;
  text-align: left;
  padding: var(--e-2);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  transition: background var(--rapido);
}

.usuario__menu button:hover { background: var(--niebla); }

/* Ventana */
.acceso {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: rgba(8, 9, 11, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio), visibility var(--medio);
}

.acceso.abierto { opacity: 1; visibility: visible; }

.acceso__caja {
  position: relative;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--papel);
  border-radius: var(--r-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra-lg);
  transform: translateY(12px);
  transition: transform var(--medio);
}

.acceso.abierto .acceso__caja { transform: none; }

.acceso__cerrar {
  position: absolute;
  top: var(--e-3); right: var(--e-3);
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--humo);
  transition: background var(--rapido);
}

.acceso__cerrar:hover { background: var(--niebla); }
.acceso__titulo { font-size: 1.5rem; }
.acceso__sub { font-size: var(--t-sm); color: var(--humo); margin-top: var(--e-2); }

.acceso__pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--niebla);
  border-radius: var(--r-sm);
  margin-block: var(--e-5) var(--e-4);
}

.acceso__pestanas button {
  padding: 0.55rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--humo);
  transition: background var(--rapido), color var(--rapido);
}

.acceso__pestanas button.activo { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-sm); }

.acceso__aviso,
.acceso__motivo,
.acceso__error {
  font-size: var(--t-xs);
  padding: var(--e-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--e-4);
}

.acceso__aviso { background: #fff8e6; color: #8a5a00; border: 1px solid #f2dfae; }
.acceso__motivo { background: var(--azul-suave); color: var(--azul); }
.acceso__error { background: #fdeceb; color: #a32018; border: 1px solid #f6cfcb; }

.acceso form { display: grid; gap: var(--e-4); }
.acceso .boton[data-cargando="si"] { opacity: 0.65; pointer-events: none; }

/* El campo de nombre solo aparece al crear cuenta */
.acceso[data-modo="entrar"] .acceso__soloRegistro { display: none; }

/* ==========================================================================
   20. OPINIONES
   -------------------------------------------------------------------------- */
.opiniones { border-top: 1px solid var(--linea); }

.opiniones__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}

.opiniones__cabecera h2 { margin-top: var(--e-2); }

.opiniones__resumen { display: flex; align-items: center; gap: var(--e-3); }

.opiniones__nota {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.opiniones__conteo, .opiniones__sinnota { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--humo); }

.opiniones__cuerpo { display: grid; gap: var(--e-6); }

@media (min-width: 900px) {
  .opiniones__cuerpo { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

.opiniones__invitacion,
.opinion-form {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--e-5);
  background: var(--niebla);
}

.opiniones__invitacion p { font-size: var(--t-sm); color: var(--humo); margin-bottom: var(--e-4); }
.opiniones__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.opinion-form { display: grid; gap: var(--e-3); }
.opinion-form__quien { font-size: var(--t-sm); color: var(--humo); }

.opinion-form__estrellas { display: flex; gap: 4px; }

.opinion-form__estrellas button {
  width: 30px; height: 30px;
  color: var(--linea);
  transition: color var(--rapido), transform var(--rapido);
}

.opinion-form__estrellas button svg { width: 100%; height: 100%; }
.opinion-form__estrellas button:hover { transform: scale(1.12); }
.opinion-form__estrellas button.activa { color: var(--azul); }

.opinion-form textarea { resize: vertical; min-height: 84px; background: var(--papel); }
.opinion-form__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.opinion-form__error { font-size: var(--t-xs); color: #a32018; }

.opiniones__lista { display: grid; gap: var(--e-4); }
.opiniones__cargando, .opiniones__vacio { font-size: var(--t-sm); color: var(--humo); }

.opinion { border-bottom: 1px solid var(--linea); padding-bottom: var(--e-4); }
.opinion:last-child { border-bottom: 0; }

.opinion__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.opinion__cabecera b { display: block; font-size: var(--t-sm); }
.opinion__fecha { font-family: var(--f-dato); font-size: 0.66rem; color: var(--humo); }
.opinion__cabecera .estrellas { margin-left: auto; }
.opinion p { font-size: var(--t-sm); }

.estrellas .apagada { color: var(--linea); }

/* Sesión dentro del menú móvil */
.menu-movil__sesion { margin-top: var(--e-5); }
.menu-movil__sesion .boton { width: 100%; justify-content: center; }

.menu-movil__usuario {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}

.menu-movil__usuario b { display: block; font-size: var(--t-sm); }
.menu-movil__usuario span:not(.usuario__avatar) { font-size: var(--t-xs); color: var(--humo); }
.menu-movil__usuario button { margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--azul); }

/* Borrar una opinión */
.opinion__borrar {
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: var(--r-sm);
  color: var(--humo);
  transition: background var(--rapido), color var(--rapido);
}

.opinion__borrar svg { width: 16px; height: 16px; }
.opinion__borrar:hover { background: #fdeceb; color: #a32018; }
.opinion__borrar:disabled { opacity: 0.4; pointer-events: none; }
.opinion__cabecera .opinion__borrar { margin-left: var(--e-2); }
.opinion__cabecera .estrellas { margin-left: auto; }

/* Panel de moderación */
.moderacion { background: var(--niebla); border-top: 1px solid var(--linea); }
.moderacion__lista { display: grid; gap: var(--e-3); }

.moderacion__fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--e-4);
}

.moderacion__datos { flex: 1; min-width: 0; }
.moderacion__datos b { font-size: var(--t-sm); }
.moderacion__datos .dato { display: block; color: var(--humo); margin-block: 3px var(--e-2); }
.moderacion__datos p { font-size: var(--t-sm); }