/* ============================================================
   Tienda: estilos de las paginas publicas.

   Lo cargan todas las paginas de la tienda (portada, ficha, carrito,
   checkout, perfil, login y pedido confirmado), despues de style.css. El
   panel no lo carga. Las reglas de cada pagina van atadas a clases o id
   propios de esa pagina.

   - Para todas las medidas: el aviso de stock y el selector de sets.
   - Solo en celular (hasta 600 px): portada corta, categorias en una fila,
     tarjetas mas bajas con boton "Agregar" y boton de comprar fijo abajo.
     En pantallas anchas la portada y la ficha se ven como antes.
   ============================================================ */

:root {
  --tienda-rojo-aviso: #C8102E;   /* con letra blanca: contraste 5,9 a 1 */
}

/* ===== Aviso de stock: "Ultimas N" y "Agotado" ===== */
.aviso-stock {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tienda-rojo-aviso);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.aviso-stock-agotado {
  background: #3a3a46;
}

/* En la tarjeta, sobre la foto, arriba a la izquierda (el "N disenos" del
   set va arriba a la derecha). */
#productos-grid .card-imagen .aviso-stock {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* El boton "Agregar" de las tarjetas es solo para celular. */
#productos-grid .tarjeta-boton-agregar {
  display: none;
}

/* ===== Ficha: precio por mayor ===== */
.detalle-precio-por-mayor {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-secundario);
}

.detalle-precio-por-mayor strong {
  color: var(--texto-principal);
}

.detalle-mayor-enlace {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detalle-stock:empty {
  display: none;
}

/* ===== Ficha: elegir set completo o figura suelta ===== */
.detalle-eleccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detalle-modos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detalle-modo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: transparent;
  color: var(--texto-principal);
  font-family: var(--font-body);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.detalle-modo[aria-pressed="true"] {
  border-color: var(--acento);
  background: rgba(0, 229, 255, 0.1);
}

.detalle-modo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.detalle-modo-nombre {
  font-size: 15px;
  font-weight: 800;
}

.detalle-modo-detalle {
  font-size: 13px;
  color: var(--texto-secundario);
}

.detalle-disenos[hidden] {
  display: none;
}

.detalle-disenos-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-secundario);
}

.detalle-disenos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

/* Cada diseno: su foto chica y su numero. */
.detalle-diseno {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-foto, #ffffff);
  color: #1a1a1a;
  font-family: var(--font-body);
  cursor: pointer;
}

.detalle-diseno img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.detalle-diseno-numero {
  font-size: 15px;
  font-weight: 800;
}

.detalle-diseno[aria-pressed="true"] {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.45);
}

.detalle-diseno-agotado {
  opacity: 0.45;
}

.detalle-modo:focus-visible,
.detalle-diseno:focus-visible,
.detalle-mayor-enlace:focus-visible,
#productos-grid .tarjeta-boton-agregar:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ============================================================
   Solo celular
   ============================================================ */
@media (max-width: 600px) {

  /* --- Portada corta: titulo, una linea de texto y dos sellos --- */
  .hero-neon {
    padding: 20px 16px 16px;
    gap: 0;
  }

  .hero-neon .hero-mockups,
  .hero-neon .logo-ring-grande,
  .hero-neon .badge-neon-magenta,
  .hero-neon .hero-botones,
  .hero-neon .hero-foto-col,
  .hero-neon .beneficio-item:nth-child(3) {
    display: none;
  }

  .hero-neon-contenido {
    gap: 0;
  }

  .hero-neon-texto {
    align-items: flex-start;
    gap: 10px;
  }

  .hero-neon-titulo,
  .hero-neon-sub {
    text-align: left;
  }

  .hero-neon-titulo {
    font-size: 1.75rem;
    -webkit-text-stroke: 1px #ffffff;
  }

  /* style.css oculta ".hero p" en todas las medidas; en celular la maqueta
     muestra esta linea, asi que aqui vuelve a verse. En computador sigue
     oculta, como hoy. */
  .hero-neon .hero-neon-sub {
    display: block;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .hero-neon .beneficios-fila {
    justify-content: flex-start;
    gap: 8px;
  }

  .hero-neon .beneficio-item {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* La tira de fotos repite los productos que aparecen abajo. */
  .tira-fotos {
    display: none;
  }

  .banner-publicitario {
    padding: 0 16px 12px;
  }

  /* --- Categorias en una sola fila que se desliza de lado --- */
  #seccion-categorias .titulo-seccion {
    display: none;
  }

  .grid-categorias {
    display: flex;
    gap: 8px;
    margin: 12px 0 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .grid-categorias .cat-btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 8px 14px;
    border-width: 2px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .grid-categorias .cat-btn .cat-icono {
    font-size: 18px;
  }

  .grid-categorias .cat-btn:hover {
    transform: none;
  }

  /* --- Tarjetas mas bajas, dos por fila, con "Agregar" --- */
  #productos-grid {
    gap: 12px;
    padding-bottom: 32px;
  }

  #productos-grid .card-producto {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  #productos-grid .card-imagen {
    aspect-ratio: 4 / 3;
  }

  #productos-grid .card-body {
    padding: 10px 10px 4px;
    gap: 4px;
  }

  #productos-grid .card-categoria {
    display: none;
  }

  #productos-grid .card-nombre {
    font-size: 13px;
    text-align: left;
  }

  #productos-grid .card-precios {
    padding-top: 2px;
    align-items: flex-start;
  }

  #productos-grid .card-precio {
    font-size: 17px;
    text-align: left;
  }

  #productos-grid .card-imagen .card-set-badge,
  #productos-grid .card-imagen .aviso-stock {
    top: 6px;
    padding: 2px 8px;
    font-size: 10px;
  }

  #productos-grid .card-imagen .card-set-badge { right: 6px; }
  #productos-grid .card-imagen .aviso-stock { left: 6px; }

  #productos-grid .tarjeta-boton-agregar {
    display: block;
    width: calc(100% - 20px);
    margin: 6px 10px 10px;
    padding: 8px 10px;
    font-size: 13px;
  }

  /* --- Ficha: foto mas baja y boton de comprar fijo abajo --- */
  .pagina-producto {
    padding-bottom: 88px;
  }

  .pagina-producto .detalle-grid {
    gap: 16px;
    padding-bottom: 24px;
  }

  .pagina-producto .detalle-imagen {
    aspect-ratio: 4 / 3;
  }

  .pagina-producto .detalle-info {
    gap: 12px;
  }

  .pagina-producto .detalle-acciones {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--fondo, #170a3d);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }

  .pagina-producto .detalle-acciones .btn-agregar-carrito {
    width: 100%;
    margin: 0;
  }

  /* El boton flotante de WhatsApp (y su panel) suben para no tapar el de
     comprar. Son de js/whatsapp-widget.js. */
  .pagina-producto .wa-fab {
    bottom: 88px;
  }

  .pagina-producto .wa-panel {
    bottom: 160px;
  }
}

/* ============================================================
   Encabezado de la tienda en celular (todas las paginas de la tienda)
   Una fila: logo, buscador, carrito con su numero y menu.
   En computador (mas de 768 px) se ve como antes: el buscador de las
   paginas que no son la portada y el icono de carrito no se muestran.
   ============================================================ */
.encabezado-buscador,
.encabezado-carrito,
.header-menu-movil svg {
  display: none;
}

.texto-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .header {
    padding: 0;
  }

  .header-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
  }

  .header-inner > .header-menu-movil {
    margin: 0;
  }

  .header-inner > .logo-ring-sm {
    order: 1;
    flex: 0 0 auto;
  }

  /* Solo el circulo del logo: el nombre ya esta en el circulo y ocupa lugar. */
  .header-inner > .logo-ring-sm > span:not(.logo-ring-circulo) {
    display: none;
  }

  .header-busqueda,
  .encabezado-buscador {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .encabezado-buscador {
    display: block;
  }

  .header-inner .buscador-input {
    padding: 9px 14px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie-2, #140a35);
    color: var(--texto-principal);
    font-size: 14px;
  }

  .header-inner .buscador-input::placeholder {
    color: var(--texto-muted);
  }

  .encabezado-carrito,
  .header-menu-movil {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: transparent;
    color: var(--texto-principal);
  }

  .encabezado-carrito { order: 3; }
  .header-menu-movil { order: 4; }

  .encabezado-carrito svg,
  .header-menu-movil svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .header-menu-movil-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .encabezado-carrito-numero {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #FFD700;
    color: #1a1a1a;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
  }

  .encabezado-carrito-numero[hidden] {
    display: none;
  }

  .encabezado-carrito:focus-visible,
  .header-menu-movil:focus-visible,
  .header-inner .buscador-input:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
  }

  /* El menu abierto va debajo, a todo el ancho. */
  .header-inner > .header-nav {
    order: 5;
  }
}

/* ============================================================
   Carrito (carrito.html, <body class="pagina-carrito">)
   ============================================================ */
.pagina-carrito .carrito-item-sin-foto {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: var(--superficie-2);
}

.pagina-carrito .carrito-desglose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.pagina-carrito .carrito-desglose-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--texto-secundario);
  font-size: 15px;
}

.pagina-carrito .carrito-desglose-fila dt,
.pagina-carrito .carrito-desglose-fila dd {
  margin: 0;
}

.pagina-carrito .carrito-desglose-fila dd {
  font-family: var(--font-mono);
  color: var(--texto-principal);
}

.pagina-carrito .carrito-desglose-fila .carrito-envio-pendiente {
  font-family: var(--font-body);
  color: var(--texto-secundario);
}

.pagina-carrito .carrito-total {
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}

.pagina-carrito .carrito-total-mas-envio {
  font-size: 0.8em;
  color: var(--texto-secundario);
}

/* El boton de pagar ocupa todo el ancho; "Vaciar carrito" va aparte, abajo
   y chico, lejos de el. */
.pagina-carrito .carrito-acciones .btn-confirmar {
  flex: 1;
  text-align: center;
}

.pagina-carrito .carrito-enlaces {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--texto-muted);
}

.pagina-carrito .carrito-enlace {
  flex: none;
  width: auto;
  margin: 0;
  padding: 4px 2px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--texto-secundario);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
}

.pagina-carrito .carrito-enlace:hover {
  color: var(--acento);
}

.pagina-carrito .carrito-enlace-vaciar:hover {
  border: none;
  color: var(--error);
}

.pagina-carrito .carrito-enlace:focus-visible,
.pagina-carrito .cantidad-control button:focus-visible,
.pagina-carrito .carrito-item-eliminar:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* El total a lo ancho, como el desglose (no centrado). */
  .pagina-carrito .carrito-total {
    flex-direction: row;
    text-align: left;
  }
}

/* ============================================================
   Checkout en 3 pasos (checkout.html, <body class="pagina-checkout">)
   ============================================================ */
.pagina-checkout .checkout-flujo {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.pagina-checkout .checkout-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pagina-checkout .checkout-pasos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-muted);
  font-size: 14px;
  font-weight: 700;
}

.pagina-checkout .checkout-pasos li.actual {
  border-color: var(--acento);
  background: var(--acento);
  color: #000;
}

.pagina-checkout .checkout-pasos li.hecho {
  border-color: var(--exito);
  background: var(--exito);
  color: #000;
}

.pagina-checkout .checkout-etapa {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 24px;
}

.pagina-checkout .checkout-etapa-titulo {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1.2;
}

.pagina-checkout .checkout-etapa-titulo:focus {
  outline: none;
}

.pagina-checkout .checkout-etapa-texto {
  color: var(--texto-secundario);
  margin: 0;
}

.pagina-checkout .checkout-siguiente {
  width: 100%;
  margin-top: 20px;
  justify-content: center;
  text-align: center;
}

.pagina-checkout .checkout-etapa-nota {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--texto-muted);
}

.pagina-checkout .checkout-atras,
.pagina-checkout .checkout-cambiar {
  display: block;
  width: auto;
  margin: 14px auto 0;
  padding: 4px 2px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--texto-secundario);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
}

.pagina-checkout .checkout-atras:hover,
.pagina-checkout .checkout-cambiar:hover {
  background: none;
  color: var(--acento);
  transform: none;
}

.pagina-checkout .checkout-atras:focus-visible,
.pagina-checkout .checkout-cambiar:focus-visible,
.pagina-checkout .selector-comuna input:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.pagina-checkout .checkout-envio-caja {
  margin-top: 16px;
}

.pagina-checkout .checkout-destino {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 16px;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.pagina-checkout .checkout-destino:empty {
  display: none;
}

.pagina-checkout .checkout-destino-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pagina-checkout .checkout-destino-titulo {
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.pagina-checkout .checkout-destino .checkout-cambiar {
  margin: 0;
  flex: none;
}

.pagina-checkout .etiqueta-ayuda {
  color: var(--texto-muted);
}

.pagina-checkout .campo-automatico,
.pagina-perfil .campo-automatico {
  background: var(--superficie-2);
  color: var(--texto-secundario);
  cursor: default;
}

/* ===== Selector de comuna (checkout y perfil) ===== */
.selector-comuna {
  position: relative;
}

.selector-comuna input {
  box-sizing: border-box;
  width: 100%;
}

.selector-comuna-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: var(--radio-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.selector-comuna-lista [role="option"] {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
}

.selector-comuna-lista [role="option"]:hover,
.selector-comuna-lista [role="option"][aria-selected="true"] {
  background: rgba(0, 229, 255, 0.18);
}

.selector-comuna-region {
  color: var(--texto-secundario);
}

.selector-comuna-vacio {
  padding: 10px 12px;
  color: var(--texto-muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  .pagina-checkout .checkout-etapa {
    padding: 16px;
  }

  .pagina-checkout .checkout-etapa-titulo {
    font-size: 1.35rem;
  }

  .pagina-checkout .checkout-pasos li {
    padding: 5px 10px;
    font-size: 13px;
  }
}

/* ============================================================
   Registro corto (login.html, <body class="pagina-login">)
   ============================================================ */
.pagina-login .etiqueta-ayuda,
.pagina-perfil .etiqueta-ayuda {
  color: var(--texto-muted);
}

.pagina-login .registro-intro {
  margin: 4px 0 0;
  color: var(--texto-secundario);
  font-size: 14px;
}

.pagina-login .registro-nombre {
  margin: 12px 0 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.pagina-login .registro-nombre legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 13px;
  color: var(--texto-secundario);
}

.pagina-login .registro-nombre-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pagina-login .registro-nombre-fila input {
  min-width: 0;
}

.pagina-login .campo-contrasena {
  position: relative;
  display: flex;
}

.pagina-login .campo-contrasena input {
  flex: 1;
  min-width: 0;
  padding-right: 84px;
}

.pagina-login .ver-contrasena {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  margin: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--acento);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.pagina-login .ver-contrasena:hover {
  background: rgba(0, 229, 255, 0.12);
  transform: translateY(-50%);
}

.pagina-login .ver-contrasena:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
}

/* ============================================================
   Compra confirmada (pedido-confirmado.html, <body class="pagina-confirmacion">)
   ============================================================ */
.pagina-confirmacion .confirmacion-container {
  padding-top: 32px;
}

.pagina-confirmacion .checkmark-circle[data-tono="alerta"] {
  background: var(--advertencia);
}

.pagina-confirmacion .checkmark-circle[data-tono="espera"] {
  background: var(--acento);
}

.pagina-confirmacion .confirmacion-texto {
  margin-bottom: 20px;
}

.pagina-confirmacion .confirmacion-camino,
.pagina-confirmacion .confirmacion-entrega {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: left;
}

.pagina-confirmacion .confirmacion-camino h2,
.pagina-confirmacion .confirmacion-resumen-pedido h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.pagina-confirmacion .confirmacion-camino ol {
  margin: 0;
  list-style: decimal;
  padding-left: 22px;
  color: var(--texto-secundario);
  line-height: 1.6;
}

.pagina-confirmacion .confirmacion-camino li.hecho {
  color: var(--texto-principal);
}

.pagina-confirmacion .confirmacion-camino li.hecho::marker {
  content: '✓  ';
  color: var(--exito);
  font-weight: 700;
}

.pagina-confirmacion .confirmacion-camino .mono {
  font-family: var(--font-mono);
  color: var(--acento);
  overflow-wrap: anywhere;
}

.pagina-confirmacion .confirmacion-seguir {
  display: inline-block;
  margin-top: 10px;
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-confirmacion .confirmacion-entrega p {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pagina-confirmacion .confirmacion-entrega-label,
.pagina-confirmacion .confirmacion-entrega-nota {
  color: var(--texto-muted);
}

/* Los dos botones uno bajo el otro y a lo ancho, como en la maqueta. */
.pagina-confirmacion .confirmacion-acciones {
  flex-direction: column;
  margin: 16px 0 28px;
}

.pagina-confirmacion .btn-ver-pedido,
.pagina-confirmacion .btn-seguir-comprando {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  text-align: center;
}

.pagina-confirmacion .btn-seguir-comprando:hover {
  color: var(--acento);
}

.pagina-confirmacion .confirmacion-resumen-pedido {
  text-align: left;
  scroll-margin-top: 80px;
}

.pagina-confirmacion .confirmacion-nota-invitado a {
  color: var(--acento);
}

.pagina-confirmacion a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ============================================================
   Mi perfil (perfil.html, <body class="pagina-perfil">)
   ============================================================ */

/* Barra de avance de cada compra: la misma regla que el panel. */
.pagina-perfil .compra-pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 12px 0;
  padding: 12px 14px;
  list-style: none;
  border-radius: var(--radio-sm);
  background: var(--superficie-2);
}

.pagina-perfil .compra-paso {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-muted);
  font-size: 14px;
  font-weight: 700;
}

.pagina-perfil .compra-paso + .compra-paso::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 10px;
  background: var(--borde);
}

.pagina-perfil .compra-paso-hecho + .compra-paso::before {
  background: var(--exito);
}

.pagina-perfil .compra-paso-marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.pagina-perfil .compra-paso-hecho {
  color: var(--exito);
}

.pagina-perfil .compra-paso-hecho .compra-paso-marca {
  border-color: var(--exito);
  background: var(--exito);
  color: #0a1652;
}

.pagina-perfil .compra-paso-actual {
  color: var(--texto-principal);
}

.pagina-perfil .compra-paso-actual .compra-paso-marca {
  border-color: var(--advertencia);
  color: var(--advertencia);
}

.pagina-perfil .compra-pasos-cerrado {
  margin: 12px 0;
}

.pagina-perfil .compra-etiqueta-roja {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 77, 109, 0.14);
  color: var(--error);
  font-size: 13px;
  font-weight: 800;
}

.pagina-perfil .compra-seguir {
  margin-left: auto;
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-perfil .compra-seguir:focus-visible,
.pagina-perfil .perfil-tab:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  /* Las cuatro pestañas en dos filas: todas a la vista, sin correr la
     pagina hacia el lado. */
  .pagina-perfil .perfil-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }

  .pagina-perfil .perfil-tab {
    padding: 10px 8px;
    font-size: 13px;
    white-space: normal;
  }

  /* En celular los pasos van uno bajo el otro. */
  .pagina-perfil .compra-pasos {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pagina-perfil .compra-paso + .compra-paso::before {
    display: none;
  }

  .pagina-perfil .compra-seguir {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  /* Resumen compacto: en celular "Mis compras" tiene que quedar a la vista
     sin bajar una pantalla entera. */
  .pagina-perfil .perfil-resumen {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    text-align: left;
  }

  .pagina-perfil .perfil-avatar {
    width: 52px;
    height: 52px;
  }

  .pagina-perfil .avatar-inicial {
    font-size: 22px;
  }

  .pagina-perfil .perfil-info-resumen {
    min-width: 0;
  }

  .pagina-perfil .perfil-info-resumen h2 {
    font-size: 18px;
  }

  .pagina-perfil .perfil-email-display {
    overflow-wrap: anywhere;
  }

  .pagina-perfil .perfil-stats {
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
  }

  .pagina-perfil .perfil-tabs {
    margin-bottom: 16px;
  }
}
/* ============================================================
   Aviso publicitario de la portada (una sola imagen que se adapta)
   ============================================================ */
.banner-publicitario img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.banner-publicitario .banner-red-anunciante {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-secundario);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.banner-publicitario .banner-red-anunciante:hover,
.banner-publicitario .banner-red-anunciante:focus-visible {
  color: var(--acento);
}