/* ==========================================================================
   publico.css — sitio público: header, home, catálogo, producto, carrito,
   checkout y pie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.sitio-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.header-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-header);
}

.logo { display: flex; align-items: center; gap: var(--e-2); flex: none; }
.logo img {
  height: var(--logo-alto);
  width: auto;
  /* El logo actual es un JPG con fondo blanco: multiply lo recorta.
     Ver la nota en tokens.css para cuando llegue el PNG transparente. */
  mix-blend-mode: var(--logo-mezcla);
}
.logo:hover { text-decoration: none; }

.header-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }

.icono-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: var(--radio-sm);
  color: var(--texto-medio);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.icono-boton:hover { background: var(--fondo-suave); color: var(--acento-osc); text-decoration: none; }
.icono-boton svg { width: 22px; height: 22px; }

.carrito-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-full);
  background: var(--secundario-fuerte);
  color: var(--blanco);
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.carrito-badge.visible { display: inline-flex; }

/* --- Navegación --- */
.nav-principal { display: none; }

.nav-principal a {
  display: block;
  padding: var(--e-3) 0;
  color: var(--texto-medio);
  font-weight: var(--peso-medio);
  font-size: var(--txt-base);
}
.nav-principal a:hover, .nav-principal a[aria-current="page"] {
  color: var(--acento-osc);
  text-decoration: none;
}

.nav-movil {
  display: none;
  padding: var(--e-3) 0 var(--e-5);
  border-top: 1px solid var(--borde-suave);
}
.nav-movil.abierto { display: block; }
.nav-movil a { display: block; padding: var(--e-3) var(--e-1); border-bottom: 1px solid var(--borde-suave); color: var(--texto); }
.nav-movil .nav-cta { margin-top: var(--e-4); }

/* --- Buscador --- */
.buscador { position: relative; flex: 1 1 auto; max-width: 420px; display: none; }
.buscador input {
  min-height: 42px;
  padding-left: 40px;
  border-radius: var(--radio-full);
  background: var(--fondo-suave);
  border-color: transparent;
  font-size: var(--txt-sm);
}
.buscador input:focus { background: var(--blanco); }
.buscador svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--texto-tenue);
  pointer-events: none;
}

.buscador-movil { padding-bottom: var(--e-3); }
.buscador-movil .buscador { display: block; max-width: none; }

@media (min-width: 60rem) {
  .header-barra { gap: var(--e-5); }
  .logo img { height: var(--logo-alto-md); }
  .nav-principal { display: flex; gap: var(--e-5); }
  .buscador { display: block; }
  .buscador-movil { display: none; }
  .boton-menu { display: none; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--acento-claro) 0%, var(--fondo-suave) 55%, var(--blanco) 100%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  gap: var(--e-5);
  padding-block: var(--e-7);
  align-items: center;
}
.hero h1 { margin-bottom: var(--e-4); }
.hero p.hero-bajada {
  font-size: var(--txt-lg);
  color: var(--texto-medio);
  max-width: 46ch;
  margin-bottom: var(--e-5);
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.hero-foto {
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  background: var(--blanco);
  aspect-ratio: 4 / 3;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 60rem) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: var(--e-8); padding-block: var(--e-9); }
}

/* --------------------------------------------------------------------------
   FRANJA DE CONFIANZA
   -------------------------------------------------------------------------- */
.franja-confianza { background: var(--blanco); border-block: 1px solid var(--borde); }
.franja-confianza .grilla { grid-template-columns: 1fr; padding-block: var(--e-5); gap: var(--e-4); }

.confianza-item { display: flex; gap: var(--e-3); align-items: flex-start; }
.confianza-item svg { flex: none; width: 26px; height: 26px; color: var(--acento); margin-top: 2px; }
.confianza-item h3 { font-family: var(--fuente-texto); font-size: var(--txt-base); font-weight: var(--peso-semi); margin-bottom: 2px; letter-spacing: 0; }
.confianza-item p { font-size: var(--txt-sm); color: var(--texto-suave); margin: 0; }

@media (min-width: 48rem) {
  .franja-confianza .grilla { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
}

/* --------------------------------------------------------------------------
   CARD DE PRODUCTO
   -------------------------------------------------------------------------- */
.card-producto {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  transition: transform var(--transicion-lenta), box-shadow var(--transicion-lenta), border-color var(--transicion);
}
.card-producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); border-color: var(--acento-suave); }

.card-producto-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Blanco, no crudo: las fotos se guardan cuadradas sobre blanco, así que
     con el fondo crema se veía un recuadro blanco adentro de cada card. Con
     blanco no hay costura: la foto y la card son el mismo fondo. */
  background: var(--blanco);
  overflow: hidden;
}
/* Sin padding: el margen ya viene adentro de la imagen (ver imagen_cuadrada()
   en lib/imagenes.php). Sumarle otro acá lo dejaba con el doble de aire. */
.card-producto-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transicion-lenta); }
.card-producto:hover .card-producto-foto img { transform: scale(1.04); }

/* Carrusel en fundido -------------------------------------------------------
   Las capas se apilan en el mismo lugar y se cruzan por opacidad. Nada se
   mueve de posición: por eso no hay saltos de layout ni scroll horizontal.
   Sin JS queda la primera capa visible y el resto invisible: se ve igual que
   antes, con una sola foto. */
.card-foto-capa {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.card-foto-capa.activa { opacity: 1; }
.card-foto-capa picture,
.card-foto-capa img { width: 100%; height: 100%; display: block; }

/* La grilla ya reserva el alto con aspect-ratio, así que las capas absolutas
   no lo rompen. Este respaldo es para el navegador que no soporte la regla. */
.card-producto-foto.tiene-carrusel { min-height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .card-foto-capa { transition: none; }
}

.card-producto-etiquetas { position: absolute; top: var(--e-2); left: var(--e-2); display: flex; flex-direction: column; gap: var(--e-1); }

.card-producto-cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e-4); gap: var(--e-2); }
.card-producto-marca { font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tenue); font-weight: var(--peso-semi); }
.card-producto-nombre { font-family: var(--fuente-texto); font-size: var(--txt-base); font-weight: var(--peso-semi); line-height: 1.35; letter-spacing: 0; margin: 0; }
.card-producto-nombre a { color: var(--texto); }
.card-producto-nombre a:hover { color: var(--acento-osc); text-decoration: none; }
.card-producto-medida { font-size: var(--txt-sm); color: var(--texto-suave); }

.card-producto-pie { margin-top: auto; padding-top: var(--e-2); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-2); }
.precio { font-family: var(--fuente-titulo); font-size: var(--txt-xl); font-weight: var(--peso-semi); color: var(--texto); line-height: 1; }
.precio-unidad { font-size: var(--txt-xs); color: var(--texto-tenue); display: block; margin-top: 3px; }
.precio--consultar { font-family: var(--fuente-texto); font-size: var(--txt-base); color: var(--texto-suave); font-weight: var(--peso-medio); }

.disponibilidad { font-size: var(--txt-xs); font-weight: var(--peso-semi); display: inline-flex; align-items: center; gap: 5px; }
.disponibilidad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.disponibilidad.disponible { color: var(--ok); }
.disponibilidad.consultar { color: var(--alerta); }

/* --------------------------------------------------------------------------
   CATÁLOGO: layout con filtros
   -------------------------------------------------------------------------- */
.catalogo-layout { display: grid; gap: var(--e-5); align-items: start; }

.filtros {
  background: var(--fondo-crudo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  padding: var(--e-4);
}
.filtros h2 { font-size: var(--txt-base); font-family: var(--fuente-texto); letter-spacing: 0; margin-bottom: var(--e-3); }

.filtro-grupo { border-top: 1px solid var(--borde-suave); padding-top: var(--e-3); margin-top: var(--e-3); }
.filtro-grupo:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.filtro-grupo > summary {
  cursor: pointer;
  font-weight: var(--peso-semi);
  font-size: var(--txt-sm);
  color: var(--texto-medio);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--e-1) 0;
}
.filtro-grupo > summary::-webkit-details-marker { display: none; }
.filtro-grupo > summary::after { content: "+"; font-size: var(--txt-lg); color: var(--texto-tenue); line-height: 1; }
.filtro-grupo[open] > summary::after { content: "–"; }

.filtro-opciones { display: flex; flex-direction: column; gap: 2px; padding-top: var(--e-2); max-height: 240px; overflow-y: auto; }
.filtro-opciones a {
  display: block;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  color: var(--texto-medio);
}
.filtro-opciones a:hover { background: var(--acento-claro); color: var(--acento-mas-osc); text-decoration: none; }
.filtro-opciones a.activo { background: var(--acento); color: var(--acento-contraste); font-weight: var(--peso-semi); }

.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 5px var(--e-2) 5px var(--e-3);
  border-radius: var(--radio-full);
  background: var(--acento-claro);
  color: var(--acento-mas-osc);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
}
.chip-filtro:hover { background: var(--acento-suave); text-decoration: none; }
.chip-filtro span { font-size: var(--txt-base); line-height: 1; opacity: 0.7; }

.catalogo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}
.catalogo-barra select { width: auto; min-width: 190px; min-height: 40px; font-size: var(--txt-sm); }

.filtros-toggle { display: inline-flex; }

@media (min-width: 60rem) {
  .catalogo-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-6); }
  .filtros { position: sticky; top: calc(var(--alto-header) + var(--e-3)); display: block !important; }
  .filtros-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   MIGA DE PAN
   -------------------------------------------------------------------------- */
.miga { display: flex; flex-wrap: wrap; gap: var(--e-1); font-size: var(--txt-sm); color: var(--texto-tenue); padding-block: var(--e-4); }
.miga a { color: var(--texto-suave); }
.miga a:hover { color: var(--acento-osc); }
.miga span::after { content: "/"; margin-left: var(--e-1); color: var(--borde-fuerte); }
.miga span:last-child::after { content: ""; }

/* --------------------------------------------------------------------------
   PÁGINA DE PRODUCTO
   -------------------------------------------------------------------------- */
.producto-layout { display: grid; gap: var(--e-5); align-items: start; }

.galeria-principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; padding: var(--e-4); transition: transform var(--transicion-lenta); }
.galeria-principal.con-zoom img { transform: scale(2); cursor: zoom-out; padding: 0; }

.galeria-miniaturas { display: flex; gap: var(--e-2); margin-top: var(--e-3); overflow-x: auto; padding-bottom: var(--e-1); }
.galeria-miniaturas button {
  flex: none;
  width: 68px; height: 68px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color var(--transicion);
}
.galeria-miniaturas button img { width: 100%; height: 100%; object-fit: contain; }
.galeria-miniaturas button[aria-current="true"] { border-color: var(--acento); border-width: 2px; padding: 3px; }

.producto-titulo { margin-bottom: var(--e-2); }
.producto-marca { font-size: var(--txt-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--acento-osc); font-weight: var(--peso-semi); margin-bottom: var(--e-2); }
.producto-sku { font-size: var(--txt-sm); color: var(--texto-tenue); }

.producto-precio-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  margin: var(--e-4) 0;
  border-block: 1px solid var(--borde);
}
.producto-precio-caja .precio { font-size: var(--txt-2xl); }

.producto-compra { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }
.cantidad-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
  flex: none;
}
.cantidad-control button {
  width: 46px; height: 46px;
  border: 0;
  background: var(--fondo-suave);
  color: var(--texto-medio);
  font-size: var(--txt-lg);
  cursor: pointer;
  transition: background var(--transicion);
}
.cantidad-control button:hover { background: var(--borde); }
.cantidad-control input {
  width: 62px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: var(--peso-semi);
  -moz-appearance: textfield;
}
.cantidad-control input::-webkit-outer-spin-button,
.cantidad-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Calculadora de m² --- */
.calculadora {
  background: var(--acento-claro);
  border: 1px solid var(--acento-suave);
  border-radius: var(--radio-md);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}
.calculadora h3 { font-family: var(--fuente-texto); font-size: var(--txt-base); letter-spacing: 0; margin-bottom: var(--e-1); }
.calculadora .calc-intro { font-size: var(--txt-sm); color: var(--texto-medio); margin-bottom: var(--e-3); }
.calc-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; }
.calc-fila .campo { flex: 1 1 120px; margin-bottom: 0; }
.calc-resultado {
  margin-top: var(--e-3);
  padding: var(--e-3);
  background: var(--blanco);
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  display: none;
}
.calc-resultado.visible { display: block; }
.calc-resultado strong { font-size: var(--txt-lg); color: var(--acento-mas-osc); }
.calc-detalle { color: var(--texto-suave); margin-top: var(--e-1); }

/* --------------------------------------------------------------------------
   "PARA COLOCARLO TAMBIÉN NECESITÁS"
   En este rubro es la recomendación que vende: una placa sin perfiles,
   tornillos y masilla no es una obra.
   -------------------------------------------------------------------------- */
.completar-obra {
  margin-top: var(--e-5);
  padding: var(--e-4);
  background: var(--secundario-claro);
  border: 1px solid var(--secundario-fuerte);
  border-radius: var(--radio-md);
}
.completar-obra h2 {
  font-family: var(--fuente-texto);
  font-size: var(--txt-base);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.completar-intro { font-size: var(--txt-sm); color: var(--texto-suave); margin-bottom: var(--e-3); }

.completar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.completar-lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  background: var(--blanco);
  border-radius: var(--radio-sm);
}
.completar-foto { flex: none; width: 48px; height: 48px; }
.completar-foto img { width: 100%; height: 100%; object-fit: contain; }
.completar-datos { flex: 1; min-width: 0; }
.completar-datos a { font-size: var(--txt-sm); font-weight: var(--peso-semi); color: var(--texto); }
.completar-datos a:hover { color: var(--acento-osc); }
.completar-motivo { display: block; font-size: var(--txt-xs); color: var(--texto-suave); margin-top: 1px; }
.completar-lista .boton { flex: none; }

/* En el carrito, la misma idea con otro acento. */
.completar-obra--carrito { margin-top: var(--e-4); }

/* --- Ficha técnica --- */
.ficha-tecnica { margin-top: var(--e-6); }
.ficha-tecnica .tabla th { width: 42%; background: var(--fondo-crudo); font-weight: var(--peso-semi); color: var(--texto-medio); }

.producto-descripcion { margin-top: var(--e-6); max-width: var(--ancho-texto); }
.producto-descripcion h2 { font-size: var(--txt-xl); }

@media (min-width: 60rem) {
  .producto-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e-8); }
  .producto-info { position: sticky; top: calc(var(--alto-header) + var(--e-4)); }
}

/* --------------------------------------------------------------------------
   CARRITO
   -------------------------------------------------------------------------- */
.carrito-layout { display: grid; gap: var(--e-5); align-items: start; }

.carrito-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--e-3);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borde-suave);
}
.carrito-item-foto { border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--blanco); aspect-ratio: 1; }
.carrito-item-foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.carrito-item h3 { font-family: var(--fuente-texto); font-size: var(--txt-base); letter-spacing: 0; margin-bottom: 2px; }
.carrito-item-meta { font-size: var(--txt-sm); color: var(--texto-suave); margin-bottom: var(--e-2); }
.carrito-item-controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); justify-content: space-between; }
.carrito-item-subtotal { font-weight: var(--peso-semi); font-size: var(--txt-lg); white-space: nowrap; }
.carrito-quitar { border: 0; background: none; color: var(--texto-tenue); font-size: var(--txt-sm); cursor: pointer; text-decoration: underline; padding: var(--e-1); }
.carrito-quitar:hover { color: var(--error); }

.resumen {
  background: var(--fondo-crudo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  padding: var(--e-5);
}
.resumen h2 { font-size: var(--txt-lg); font-family: var(--fuente-texto); letter-spacing: 0; margin-bottom: var(--e-4); }
.resumen-linea { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0; font-size: var(--txt-base); }
.resumen-total {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-3);
  margin-top: var(--e-2);
  border-top: 1px solid var(--borde-fuerte);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xl);
  font-weight: var(--peso-semi);
}
.resumen .boton { margin-top: var(--e-4); }
.resumen-nota { font-size: var(--txt-xs); color: var(--texto-suave); margin-top: var(--e-3); }

@media (min-width: 60rem) {
  .carrito-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-6); }
  .carrito-item { grid-template-columns: 96px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   CHECKOUT
   -------------------------------------------------------------------------- */
.checkout-layout { display: grid; gap: var(--e-5); align-items: start; }
.checkout-bloque { margin-bottom: var(--e-6); }
.checkout-bloque > h2 {
  font-size: var(--txt-lg);
  font-family: var(--fuente-texto);
  letter-spacing: 0;
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-4);
}
.campos-2 { display: grid; gap: 0 var(--e-3); }

.opcion-pago {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  margin-bottom: var(--e-3);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion-pago:hover { border-color: var(--acento); background: var(--fondo-crudo); }
.opcion-pago input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--acento); }
.opcion-pago:has(input:checked) { border-color: var(--acento); border-width: 2px; background: var(--acento-claro); padding: calc(var(--e-4) - 1px); }
.opcion-pago strong { display: block; font-size: var(--txt-base); }
.opcion-pago span { font-size: var(--txt-sm); color: var(--texto-suave); }

.resumen-mini-item { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--txt-sm); padding: var(--e-2) 0; border-bottom: 1px solid var(--borde-suave); }
.resumen-mini-item span:first-child { color: var(--texto-medio); }

@media (min-width: 48rem) {
  .campos-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-6); }
  .checkout-resumen { position: sticky; top: calc(var(--alto-header) + var(--e-4)); }
}

/* --------------------------------------------------------------------------
   GRACIAS / RETORNO DE PAGO
   -------------------------------------------------------------------------- */
.gracias { max-width: 640px; margin-inline: auto; text-align: center; padding-block: var(--e-8); }
.gracias-icono {
  width: 76px; height: 76px;
  margin: 0 auto var(--e-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ok-claro);
  color: var(--ok);
}
.gracias-icono svg { width: 36px; height: 36px; }
.gracias-icono--espera { background: var(--alerta-claro); color: var(--alerta); }
.gracias-icono--error { background: var(--error-claro); color: var(--error); }
.gracias-numero {
  display: inline-block;
  padding: var(--e-2) var(--e-4);
  margin: var(--e-3) 0 var(--e-5);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  font-family: var(--fuente-mono);
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.04em;
}
.gracias-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }

/* --------------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
/* Redondo y sin texto, del mismo palo que el launcher del chat que tiene al
   lado: dos píldoras de distinto ancho ahí abajo se leen como un choque, dos
   círculos parejos se leen como un par. El ícono de WhatsApp ya es conocido,
   la palabra no agregaba nada. Quien use lector de pantalla lo sigue teniendo
   por el aria-label del enlace. */
.wa-flotante {
  position: fixed;
  /* Corrido a la IZQUIERDA del chat: antes compartían esquina y se pisaban. */
  right: calc(var(--chat-margen) + var(--chat-launcher) + var(--e-3));
  /* Centros alineados con el launcher, que es más alto: si los apoyara sobre la
     misma línea de abajo, quedaban en escalón. */
  bottom: calc(var(--chat-margen) + (var(--chat-launcher) - 56px) / 2);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radio-full);
  background: var(--whatsapp);
  color: #0B2E17;
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); color: #0B2E17; text-decoration: none; }
.wa-flotante svg { width: 28px; height: 28px; flex: none; }

/* --------------------------------------------------------------------------
   PIE
   -------------------------------------------------------------------------- */
.sitio-pie {
  background: var(--fondo-oscuro);
  color: #C9D6D9;
  /* Mobile-first: en un celular, 4rem de aire arriba del pie más el padding
     que ya trae la última sección son dos pantallazos de blanco antes de
     llegar a algo. En una pantalla ancha ese aire sí separa; en 375px sólo
     hace scrollear. Crece con el ancho, más abajo. */
  padding-block: var(--e-5) var(--e-4);
  margin-top: var(--e-5);
}
@media (min-width: 48rem) {
  .sitio-pie {
    padding-block: var(--e-7) var(--e-5);
    margin-top: var(--e-8);
  }
}
.sitio-pie a { color: #C9D6D9; }
.sitio-pie a:hover { color: var(--blanco); }

.pie-grilla { display: grid; gap: var(--e-6); }
.pie-logo img {
  height: var(--logo-alto-pie);
  width: auto;
  /* Sobre fondo oscuro el multiply no sirve. Se invierte hasta que exista
     la versión del logo en blanco. Ver tokens.css. */
  filter: var(--logo-filtro-pie);
}
.pie-lema { font-size: var(--txt-sm); color: #8FA5A9; margin-top: var(--e-3); max-width: 34ch; }

/* Redes del pie. El área táctil son 44 px aunque el ícono mida 22: en celular
   un blanco de 22 px se falla la mitad de las veces. */
.pie-redes { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radio-sm);
  color: #A8BEC3;
  transition: color var(--transicion), background var(--transicion);
}
.pie-redes a:hover { color: var(--blanco); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.pie-redes svg { width: 22px; height: 22px; }

.sitio-pie h3 { color: var(--blanco); font-family: var(--fuente-texto); font-size: var(--txt-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--e-3); }
.pie-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--txt-sm); }

/* ---------------------------------------------------------------------------
   ACCESO AL SISTEMA
   El botón vive arriba de la línea legal, pegado a la derecha: presente para
   el que lo busca, invisible para el que vino a comprar una placa.
   --------------------------------------------------------------------------- */
.pie-acceso {
  margin-top: var(--e-5);
  display: flex;
  justify-content: flex-end;
}
/* Sobre el pie oscuro, el botón fantasma del sitio queda casi ilegible: está
   pensado para fondo claro. Se le sube el contraste sin inventar otro botón. */
.pie-acceso .boton--fantasma {
  color: #B9CBCE;
  border-color: rgba(255, 255, 255, 0.22);
}
.pie-acceso .boton--fantasma:hover,
.pie-acceso .boton--fantasma:focus-visible {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.acceso-modal {
  border: 0;
  border-radius: var(--radio-md);
  padding: var(--e-5);
  max-width: 30rem;
  width: calc(100% - 2rem);
  box-shadow: var(--sombra-lg);
  color: var(--texto);
  background: var(--fondo);
}
.acceso-modal::backdrop { background: rgba(18, 38, 43, 0.55); }
.acceso-modal h2 { font-size: var(--txt-lg); margin: 0 0 var(--e-4); }

.acceso-opciones { display: grid; gap: var(--e-3); }

.acceso-opcion {
  display: block;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.acceso-opcion:hover,
.acceso-opcion:focus-visible {
  border-color: var(--acento);
  background: var(--acento-claro);
}
.acceso-opcion strong { display: block; font-size: var(--txt-base); }
.acceso-opcion span   { display: block; font-size: var(--txt-sm); color: var(--texto-medio); margin-top: 2px; }

.acceso-modal form { margin-top: var(--e-4); text-align: right; }

.pie-legal {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--txt-xs);
  color: #7C9297;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
}

/* Crédito del desarrollo: presente pero sin pelearle atención al contenido. */
.pie-credito {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}
.pie-credito a { color: #A8BEC3; text-decoration: none; }
.pie-credito a:hover { color: var(--blanco); text-decoration: underline; }
.pie-credito .icono-mini { width: 16px; height: 16px; display: block; }
.pie-credito a:has(.icono-mini):hover { text-decoration: none; }

@media (min-width: 48rem) {
  .pie-grilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-7); }
}

/* --------------------------------------------------------------------------
   AVISOS FLOTANTES ("Agregamos X al carrito")
   -------------------------------------------------------------------------- */
#avisos-flotantes {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  /* Por encima del chat, que es lo más alto de esa esquina. Antes esto se
     calculaba contra los 56px del botón de WhatsApp y el launcher (76px) le
     pasaba por arriba al aviso en celular. */
  bottom: calc(var(--chat-margen) + var(--chat-launcher) + var(--e-3));
  z-index: var(--z-flotante);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  pointer-events: none;
}

.aviso-flotante {
  background: var(--fondo-oscuro);
  color: var(--blanco);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio);
  font-size: var(--txt-sm);
  box-shadow: var(--sombra-lg);
  animation: aviso-entra 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aviso-flotante.saliendo { opacity: 0; transition: opacity 400ms ease; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 48rem) {
  #avisos-flotantes { left: auto; right: var(--e-5); max-width: 360px; }
}

/* --------------------------------------------------------------------------
   CONTACTO
   -------------------------------------------------------------------------- */
.contacto-layout { display: grid; gap: var(--e-6); align-items: start; }
.contacto-datos { background: var(--fondo-crudo); border: 1px solid var(--borde); border-radius: var(--radio-md); padding: var(--e-5); }
.contacto-dato { display: flex; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--borde-suave); }
.contacto-dato:last-child { border-bottom: 0; }
.contacto-dato svg { width: 20px; height: 20px; color: var(--acento); flex: none; margin-top: 3px; }
.contacto-dato strong { display: block; font-size: var(--txt-sm); color: var(--texto-medio); }

@media (min-width: 60rem) {
  .contacto-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e-7); }
}