/* 1. Blanco y celeste para la marca; azul oscuro para texto legible. */
:root {
  --celeste: #64bedd;
  --azul: #096b91;
  --fondo: #ffffff;
  --superficie: #eff9fd;
  --borde: #cde5ef;
  --texto: #173447;
  --texto-secundario: #496474;
}
* { box-sizing: border-box; }
/* Los controles ocultos no deben reaparecer por el display de su clase. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}
body.carrito-abierto { overflow: hidden; }
a { color: var(--azul); text-underline-offset: 0.3em; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
.contenedor { width: 90%; max-width: 1120px; margin: 0 auto; }
h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
h1 { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { margin: 0 0 1rem; font-size: 1.5rem; }
p { margin: 0 0 1.5rem; color: var(--texto-secundario); }
.acento, .etiqueta { color: var(--azul); }
.etiqueta {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 2. El carrito queda visible en la esquina superior derecha al desplazarse. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  border-bottom: 1px solid var(--borde);
}
.barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.barra { justify-content: space-between; padding: 0.8rem 0; }
.marca {
  color: var(--texto);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.marca-cabecera { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; }
.logo-marca { display: block; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.5rem; }
.cabecera .barra { gap: 0.5rem; }
.navegacion-escritorio { display: none; }
.navegacion-escritorio a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--texto-secundario);
  text-decoration: none;
}
.navegacion-escritorio a:hover, .navegacion-escritorio a[aria-current="page"] {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}
.navegacion-escritorio a[aria-current="page"] { font-weight: 650; }
.acciones-cabecera { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.menu-desplegable { position: relative; }
.boton-menu, .boton-carrito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  color: var(--texto);
  background: var(--superficie);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}
.boton-menu { width: 44px; border-color: transparent; background: transparent; list-style: none; }
.boton-menu::-webkit-details-marker { display: none; }
.boton-menu:hover, .boton-carrito:hover { background: #def3fb; }
/* El panel flota debajo del botón sin empujar el resto de la página. */
.opciones-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  width: 12rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 0.9rem;
  background: #ffffff;
  box-shadow: 0 12px 30px rgb(20 70 95 / 12%);
}
.opciones-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--texto);
  text-decoration: none;
}
.opciones-menu a:hover, .opciones-menu a[aria-current="page"] {
  color: var(--azul);
  background: var(--superficie);
}
.opciones-menu a[aria-current="page"] { font-weight: 700; }
.boton-carrito { position: relative; width: 48px; flex-shrink: 0; }
.boton-carrito svg { flex-shrink: 0; }
[data-contador] {
  position: absolute;
  top: -0.35rem;
  right: -0.2rem;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  border: 2px solid #ffffff;
  border-radius: 1rem;
  color: #103b4f;
  background: var(--celeste);
  font-size: 0.7rem;
  line-height: 1.5;
}

/* 3. Portada y categorías. Las fotos grandes se incorporarán más adelante. */
.hero, .seccion, .encabezado-categoria { padding: 3.5rem 0; }
.hero, .encabezado-categoria { background: var(--superficie); }
.presentacion, .encabezado-categoria { text-align: center; }
.presentacion h1 span { display: inline-block; }
.introduccion { max-width: 42rem; margin: 0 auto 1.75rem; font-size: 1.2rem; }
.presentacion .introduccion { margin-bottom: 0; }
.encabezado-categoria h1 { color: var(--azul); font-size: clamp(2.25rem, 7vw, 5rem); }
.categorias { display: grid; gap: 1rem; margin-top: 2rem; }
.categoria {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  color: var(--texto);
  background: var(--superficie);
  text-decoration: none;
}
.categoria:hover { border-color: var(--azul); }
.enlace-categoria { margin-top: auto; color: var(--azul); font-weight: 600; }
.compra { background: var(--superficie); text-align: center; }
.pie { border-top: 1px solid var(--borde); background: #ffffff; }
section[id] { scroll-margin-top: 6rem; }

/* 4. Fichas: la caja de imagen conserva su espacio al cambiar las fotos. */
.nota-demo {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--celeste);
  border-radius: 0.25rem;
  background: var(--superficie);
  font-size: 0.9rem;
}
.productos { display: grid; gap: 1.5rem; }
.producto {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  background: #ffffff;
}
.producto-foto { position: relative; aspect-ratio: 4 / 3; background: #e5f5fb; }
.producto-imagen { display: block; width: 100%; height: 100%; padding: 1rem; object-fit: contain; }
.producto-foto span {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--texto);
  background: #ffffff;
  font-size: 0.875rem;
}
.producto-detalle { display: flex; flex-direction: column; padding: 1.5rem; }
.producto-nombre { font-size: 1.4rem; }
.producto-categoria { margin-bottom: 0.5rem; }
.producto-descripcion { margin-bottom: 1rem; }
.precio { color: var(--texto); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.campo-modelo { margin-bottom: 1rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
select, textarea {
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #91b8ca;
  border-radius: 0.5rem;
  color: var(--texto);
  background: #ffffff;
  font-size: 1rem;
}
.disponibilidad, .nota { font-size: 0.875rem; }
.disponibilidad { margin-bottom: 1rem; }

/* 5. Botones, foco visible y navegación con teclado. */
.boton, .boton-secundario {
  display: inline-block;
  max-width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font: inherit;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  color: #103b4f;
  background: var(--celeste);
  cursor: pointer;
}
.boton:hover:not(:disabled) { background: #8dd7f2; }
.boton-secundario { color: var(--azul); border-color: var(--borde); background: #ffffff; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}
.saltar-contenido {
  position: fixed;
  z-index: 10;
  left: 1rem;
  top: -10rem;
  padding: 0.75rem 1rem;
  color: var(--texto);
  background: var(--celeste);
}
.saltar-contenido:focus { top: 0.5rem; }

/* 6. dialog permanece oculto hasta que JavaScript llama a showModal(). */
.carrito {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 32rem);
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 1.25rem;
  padding-top: 0;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 1px solid var(--borde);
  color: var(--texto);
  background: #ffffff;
}
.carrito::backdrop { background: rgb(14 43 61 / 40%); }
/* Cerrar permanece visible aunque el carrito sea más alto que la pantalla. */
.carrito-cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 -1.25rem 1.25rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  background: #ffffff;
}
.carrito h2 { margin: 0; font-size: 1.5rem; }
.carrito h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.lista-carrito { padding: 0; margin: 0; list-style: none; }
.linea-carrito { padding: 1.2rem 0; border-bottom: 1px solid var(--borde); }
.linea-modelo, .linea-precio { margin-bottom: 0.5rem; font-size: 0.875rem; }
.linea-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.cantidad { display: flex; align-items: center; gap: 0.5rem; }
.cantidad button, .quitar {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  color: var(--azul);
  background: var(--superficie);
}
.unidades { min-width: 2ch; text-align: center; }
.quitar { background: #ffffff; }
.linea-subtotal { margin: 0.75rem 0 0; font-weight: 650; color: var(--texto); }
.carrito-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.carrito-total strong { font-size: 1.3rem; }
.mensaje-etiqueta { margin-top: 1.5rem; }
textarea { resize: vertical; line-height: 1.5; }
.acciones-carrito { display: grid; gap: 0.75rem; margin: 1rem 0; }
#estado-carrito { color: var(--azul); font-size: 0.9rem; }
.aviso-carrito {
  position: fixed;
  z-index: 6;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  color: var(--texto);
  background: #ffffff;
  box-shadow: 0 4px 24px rgb(20 70 95 / 15%);
}
.aviso-carrito:empty { padding: 0; border: 0; box-shadow: none; }

/* 7. Más columnas solo cuando hay espacio. */
@media (min-width: 560px) {
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  /* Con espacio suficiente, cambiamos las tres rayitas por enlaces visibles. */
  .cabecera .barra { justify-content: flex-start; gap: 2rem; }
  .navegacion-escritorio { display: flex; align-items: center; gap: 0.25rem; }
  .menu-desplegable { display: none; }
  .marca { font-size: 1.4rem; }
  .hero, .seccion, .encabezado-categoria { padding: 5rem 0; }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* En horizontal, la cabecera no ocupa permanentemente una pantalla baja. */
@media (max-height: 480px) {
  .cabecera { position: static; }
}

/* Accesos discretos junto al carrito y búsqueda desplegable. */
.icono-cabecera{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:.75rem;background:transparent;color:var(--texto);cursor:pointer}
.icono-cabecera:hover{background:var(--superficie)}
.buscador-sitio{padding:0 0 1rem}.buscador-sitio label{font-size:.875rem}.fila-busqueda{display:flex;gap:.5rem}
#buscar-productos{width:100%;min-width:0;padding:.75rem;border:1px solid #91b8ca;border-radius:.65rem;font:inherit;background:white;color:var(--texto)}
#buscar-productos:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
#resultado-busqueda:empty{display:none}
@media(max-width:420px){.marca-cabecera .logo-marca{display:none}.marca-cabecera{font-size:1rem}.acciones-cabecera{gap:0}.cabecera .barra{gap:.25rem}}
@media(min-width:800px) and (max-width:1050px){.cabecera .barra{gap:.5rem}.marca-cabecera{font-size:1.1rem}.navegacion-escritorio a{padding:.5rem}}