/* Texto disponible para lectores de pantalla pero fuera de la vista. No se usa
   `display: none` ni `visibility: hidden`: ambos lo ocultarían también para el
   lector, que es justo a quien va dirigido. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --color-bg: #f8f7f5;
  --color-surface: #e3e3e3;
  --color-card: #7f6f6f;
  /* Beige que usaban el badge del carrito y los filtros antes de que las
     tarjetas pasaran a #7f6f6f; se mantiene por legibilidad del texto negro. */
  --color-accent-soft: #c3b1a0;
  --color-modal: #d9c5b2;
  --color-dark: #3e3530;
  --color-black: #000;
  --color-white: #fff;
  --color-text: #1a1a1a;
  --color-text-muted: #555;
  --color-border: #ccc;
  --color-accent: #2f225b;
  --color-danger: #d9534f;
  /* Verde de WhatsApp: solo para el botón que envía el pedido por ese canal. */
  --color-whatsapp: #25d366;
  --shadow-card: 0 0.5rem 1.5rem rgb(0 0 0 / 20%);

  --radius-md: 6px;
  --radius-lg: 8px;

  --font-body: "Montserrat", sans-serif;
  --font-display: "Bitter", serif;
  /* Catálogos, carrusel y secciones de accesorios / "por qué comprar" */
  --font-ui: "Blinker", sans-serif;

  --gutter: 5%;
  /* Cuánto baja la imagen del hero sobre el bloque de pestañas (solo escritorio) */
  --hero-overlap: 2.5rem;
  /* Franja que se recorta del borde superior de la foto del hero: su primera
     fila de píxeles deja una línea que se lee como un corte. En porcentaje
     para que el recorte se vea igual en móvil que en escritorio. */
  --hero-trim: 2%;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1,
.font-bittler {
  font-family: var(--font-display);
  font-weight: 600;
}

/* UTILIDADES */
.hidden {
  display: none;
}

.cart-view {
  padding: 2rem var(--gutter);
}

/* Pasó de <div> a <button> para poder usarse con teclado; estas reglas le
   quitan la apariencia propia del control y lo dejan igual que antes. */
.logo-container {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

.cart-empty-message {
  padding: var(--spacing-md) 0;
}

/* HEADER Y NAV */
/* El header se queda en el tope de la página: no acompaña al scroll. */
.main-header {
  background: var(--color-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.header-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* El gutter del 5% deja los iconos muy lejos del borde en pantallas anchas
     (64px a 1280px). Se acota el margen lateral para que el grupo de acciones
     quede anclado al canto sin pegarse a él. Sigue siendo simétrico, que es lo
     que mantiene el logo centrado. */
  padding: 0.8rem clamp(1rem, 2.5vw, 1.75rem);
}

/* Los dos lados reparten el sobrante por igual, así el logo queda centrado sin
   depender de un ancho fijo acertado a mano: al iniciar sesión el contenido de
   un lado crece y el centro no se mueve. */
.header-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-side--fin {
  justify-content: flex-end;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--color-black);
  cursor: pointer;
  position: relative;
  /* El icono mantiene su tamaño; lo que crece es la zona que responde al dedo
     (WCAG 2.2 SC 2.5.8 pide 24x24 CSS px como mínimo; 44 es lo cómodo). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-accent-soft);
  color: var(--color-black);
  font-size: 0.65rem;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 5px;
}

.ui-feedback {
  position: fixed;
  z-index: 1000;
  inset: auto var(--gutter) var(--spacing-md);
  max-width: min(26rem, calc(100vw - 2 * var(--gutter)));
  margin-inline: auto;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 20%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ui-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-feedback i {
  margin-right: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
  .ui-feedback {
    transition: none;
  }
}

/* En móvil el logo cede alto para que la fila cuadre junto al carrito y el
   botón de menú; en escritorio recupera su tamaño. */
.brand-logo {
  height: 38px;
  object-fit: contain;
}

/* --- Entrada de perfil (barra en escritorio, menú en móvil) --- */

.perfil-entrada {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  color: inherit;
  min-height: 44px;
}

.perfil-entrada:hover,
.perfil-entrada:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.perfil-entrada-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-dark);
  font-size: 0.9rem;
}

.perfil-entrada-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.perfil-entrada-accion {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Dentro del menú, sobre fondo negro, el contraste se invierte. */
#perfil-slot-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.3rem 0 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.3rem;
}

#perfil-slot-menu .perfil-entrada {
  color: var(--color-white);
}

#perfil-slot-menu .perfil-entrada:hover,
#perfil-slot-menu .perfil-entrada:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* `--color-accent` es un morado oscuro: sobre el negro del menú no se lee.
   El tono suave de la marca sí contrasta. */
#perfil-slot-menu .perfil-entrada-accion {
  color: var(--color-accent-soft);
}

/* Mobile-first: la navegación está plegada y la abre el botón hamburguesa. Con
   los cuatro enlaces visibles el menú se partía en dos filas y el encabezado se
   comía el 20% de la pantalla. */
.main-nav {
  background: var(--color-black);
  padding: 0.6rem 0;
  display: none;
  justify-content: center;
}

.main-nav.abierto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-nav.abierto ul {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* En una lista vertical el objetivo cómodo no es el texto, es el renglón. */
.main-nav.abierto a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 1rem;
  padding: 0 var(--gutter);
}

.main-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  /* El texto mide 14px de alto: el padding lleva el objetivo táctil al mínimo */
  display: inline-block;
  padding: 0.4rem 0.2rem;
}

/* USER PROFILE */
.user-profile-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  object-fit: cover;
}

.user-name {
  font-size: 0.75rem;
  font-weight: bold;
}

/* HERO */
.hero-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero-text {
  padding: 2rem var(--gutter);
}

.hero-text h1 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
}

.hero-description {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-top: 2.5rem;
  margin-bottom: var(--spacing-xl);
  max-width: 48ch;
}

.hero-buttons {
  display: flex;
  /* Nunca se apilan: si no caben, encogen. */
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin: 3rem auto 0;
}

.btn-primary,
.btn-secondary {
  /* Alto del diseño (50px); el ancho lo marca el texto más su padding, para
     que el botón no quede holgado por los lados. */
  /* Mismo ancho los dos (base 260px) y con permiso para encoger en pantallas
     estrechas, para que nunca se pase uno debajo del otro. */
  flex: 0 1 260px;
  min-width: 0;
  min-height: 56px;
  padding: 0.75rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: var(--radius-lg);
}

.btn-primary {
  background: var(--color-black);
  color: var(--color-white);
}

.btn-secondary {
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
}

.hero-image {
  width: 100%;
  /* En móvil el hero necesita una composición vertical para que la imagen
     tenga presencia sin dejar una franja demasiado baja. */
  aspect-ratio: 4 / 5;
  /* Marco de referencia de la foto, que sobresale por arriba y se recorta. */
  position: relative;
  overflow: hidden;
}

.hero-img-element {
  /* Pegada al borde inferior y un poco más alta que el marco: lo que sobra
     asoma por arriba y lo recorta el overflow. Solo se corta arriba. */
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--hero-trim));
  object-fit: cover;
  /* Si algun redondeo obliga a recortar, que sea por abajo: la cara queda
     en la mitad superior. */
  object-position: center 35%;
}

/* CATALOGOS Y CARDS */
.dual-catalog,
.starry-section {
  font-family: var(--font-ui);
}

.dual-catalog {
  display: flex;
  flex-direction: column;
  padding: 2rem var(--gutter);
  gap: var(--spacing-xl);
}

.dual-catalog h2 {
  /* Entre el breakpoint y ~1000px la columna se estrecha y con 28px fijos el
     título se iba a un tercer renglón; el tamaño acompaña al ancho de página
     en vez de abrir otro breakpoint. */
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.25;
  text-align: center;
  /* Como en el diseño: el título se lee en dos renglones parejos, centrado en
     su columna, en vez de estirarse de borde a borde. `balance` reparte las
     palabras entre los dos renglones; la medida máxima evita que entre un
     tercero cuando la columna es ancha. */
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Aire debajo de todos los títulos de sección. */
.dual-catalog h2,
.starry-section h2 {
  padding-bottom: var(--spacing-xl);
  font-weight: 700;
}

.catalog-col-lentes,
.catalog-col-pestanas {
  width: 100%;
}

.catalog-col-pestanas {
  background: var(--color-dark);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

/* Los controles de formulario no heredan tipografía ni tamaño del documento, y
   Safari en iOS amplía la página al enfocar cualquier campo con fuente menor a
   16px. Se fija aquí para todos en vez de repetirlo en cada bloque. */
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

input,
select,
textarea {
  font-size: 16px;
}

/* <picture> solo agrupa formatos, no debe añadir una caja al layout: con
   `display: contents` la imagen sigue siendo hija directa a efectos de flex y
   grid, y todas las reglas escritas para `img` siguen valiendo igual. */
picture {
  display: contents;
}

.lentes-filter-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: var(--spacing-md) 0;
}

.filter-btn {
  background: var(--color-accent-soft);
  border: none;
  padding: 0.4rem 0.7rem;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font-ui);
}

.filter-btn.active {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Subcategorías de pestañas y accesorios, sobre su carrusel. [hidden] se
   respeta aunque la clase fije display. */
.carrusel-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 var(--spacing-md);
}

.carrusel-filtros[hidden],
.lentes-filter-wrapper[hidden] {
  display: none;
}

/* En las secciones con fondo de estrellas el botón activo (oscuro) se perdía. */
.starry-section .filter-btn.active {
  outline: 2px solid var(--color-white);
}

.products-grid-lentes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.product-card-figma {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  /* El botón llega hasta el borde inferior: el recorte redondea sus esquinas. */
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.product-card-figma img {
  /* Imagen cuadrada con un margen del color de la tarjeta alrededor. */
  width: calc(100% - 2 * var(--spacing-sm));
  margin: var(--spacing-sm) var(--spacing-sm) 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.card-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: var(--spacing-sm) 0.4rem;
}

.pestana-card-footer .btn-add-figma {
  font-size: 22px;
}

/* Las tarjetas de accesorio van en fila y todas reparten igual su alto entre
   foto y texto: el nombre ocupa siempre dos renglones y la descripción tres,
   así un texto largo no estira el bloque de texto de toda la fila. Los textos
   de `js/productos.js` están escritos para caber ahí sin recortarse. */
.card-title,
.card-desc,
.card-title-btn,
.pestana-card-footer h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nombre del accesorio: mismo alto de dos renglones que el de los lentes. */
.card-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  height: calc(2 * 1.3em);
  -webkit-line-clamp: 2;
}

.product-card-figma h3 {
  margin: 0;
}

/* El nombre es el camino accesible al detalle, así que es un botón de verdad
   con la apariencia del texto que sustituye. Ocupa todo el ancho para que el
   objetivo táctil sea la línea entera, no solo las letras. */
.card-title-btn {
  width: 100%;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  height: calc(2 * 1.3em + 0.5rem);
  -webkit-line-clamp: 2;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: center;
}

/* El precio es lo primero que se busca en una tarjeta: va más grande y más
   pesado que el nombre, no al revés. */
.product-card-figma .price {
  font-size: 23px;
  font-weight: 800;
}

.btn-add-figma {
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  width: 100%;
  padding: 0.6rem 0.4rem;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  margin-top: auto;
  font-family: var(--font-ui);
  border-radius: 0;
}

/* CARRUSELES: pestañas y accesorios comparten pista, flechas y medidas. */
.carrusel {
  margin-top: var(--spacing-md);
  min-width: 0;
}

.carrusel-pista {
  display: flex;
  align-items: stretch;
  /* Sin esto, el ancho mínimo de la pista es la suma de sus tarjetas y la
     columna que la contiene crece en vez de dejar que la pista haga scroll. */
  min-width: 0;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scroll-behavior: smooth;
  /* La barra se oculta: el desplazamiento se hace con swipe o con las flechas. */
  scrollbar-width: none;
  padding-bottom: var(--spacing-sm);
}

.carrusel-pista::-webkit-scrollbar {
  display: none;
}

.carrusel-pista:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* Sin scroll-snap: como la última tarjeta asoma parcialmente, su punto de
   anclaje cae fuera del scroll máximo y el navegador devolvía la vista al
   inicio en cuanto se usaban las flechas. */
/* Las pestañas conservan su tamaño de siempre; los accesorios van más chicos
   porque son nueve y la foto ya viene recortada en cuadrado. */
.carrusel-pista > .pestana-card {
  flex: 0 0 80%;
}

.carrusel-pista > .product-card-figma {
  flex: 0 0 46%;
}

/* Flechas planas en los extremos del bloque, como en el diseño. */
.carousel-controls {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
}

.carousel-btn {
  border: none;
  background: transparent;
  color: var(--color-white);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
  /* La flecha es estrecha (18px): el objetivo táctil se agranda sin tocarla */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.carousel-btn:hover {
  opacity: 0.7;
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pestana-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-black);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pestana-img-box {
  width: 100%;
  height: clamp(24rem, 98vw, 36rem);
  flex: 0 0 clamp(24rem, 98vw, 36rem);
}

.pestana-img-box picture {
  display: block;
  width: 100%;
  height: 100%;
}

.pestana-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pestana-card-footer {
  background-color: var(--color-white);
  color: var(--color-black);
  /* Sin padding lateral: el botón llega hasta los bordes de la tarjeta. */
  padding: 0.8rem 0 0;
  height: 9.75rem;
  flex: 0 0 9.75rem;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
}

.pestana-card-footer h3,
.pestana-card-footer .price {
  padding: 0 0.5rem;
}

.pestana-card-footer h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  height: calc(2 * 1.3em);
  -webkit-line-clamp: 2;
}

.pestana-card-footer .price {
  font-size: 28px;
  font-weight: 800;
}

/* CARRITO */
/* También pasó de <p> a <button>. Hereda la tipografía porque los controles de
   formulario no la heredan solos (convención del proyecto). */
.back-link {
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: var(--spacing-lg);
  text-decoration: underline;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  /* El texto mide 16px de alto; el padding lleva el objetivo al tamaño cómodo
     sin separarlo visualmente del borde de la columna. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem 0 0;
  margin-left: -0.25rem;
}

.cart-page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.cart-items-column {
  width: 100%;
}

.cart-summary-card {
  width: 100%;
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.dashed-divider {
  border: none;
  border-top: 1px dashed #999;
  margin: var(--spacing-md) 0;
}

.cart-item-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: 1.2rem;
  align-items: center;
}

.cart-item-row img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.cart-item-details {
  flex: 1;
  font-size: 0.8rem;
}

.cart-item-price-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.cart-item-price {
  font-size: 1rem;
  font-weight: bold;
}

.btn-remove-item {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  /* Medía 23x29: por debajo de los 24x24 de WCAG 2.2 SC 2.5.8. El icono
     conserva su tamaño y lo que crece es la zona que responde al dedo. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.qty-btn-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.qty-btn-group button {
  width: 24px;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.total-line {
  font-size: 1.1rem;
  font-weight: bold;
}

.shipping-selector-group {
  margin: var(--spacing-md) 0;
  font-size: 0.8rem;
}

.shipping-selector-group select {
  width: 100%;
  /* 0.75rem y no 0.5: con 0.5 el control quedaba en 23px de alto, por debajo
     de los 24x24 que pide WCAG 2.2 SC 2.5.8. */
  padding: 0.75rem 0.5rem;
  margin-top: 0.3rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.address-input-container input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-body);
}

.address-input-container {
  margin-top: var(--spacing-md);
}

.btn-checkout-final {
  width: 100%;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: 0.8rem;
  font-weight: bold;
  margin-top: 1.2rem;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: var(--font-body);
  border-radius: var(--radius-md);
}

.btn-checkout-final:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* MODALES */
/* Congela la página mientras hay un modal abierto. `position: fixed` es lo
   único que frena el scroll también en iOS; `top` compensa el desplazamiento
   actual para que no se vea ningún salto, y el padding rellena el hueco que
   deja la barra de scroll al desaparecer. */
body.scroll-bloqueado {
  position: fixed;
  top: var(--scroll-lock-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding-right: var(--scroll-lock-gap, 0px);
}

.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 3000;
}

.modal-backdrop.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-detail-card {
  background: var(--color-modal);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 650px;
  position: relative;
  color: var(--color-text);
  margin: 1rem;
}

/* --- Buscador --- */

.search-card {
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.search-field {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.search-field > i { color: var(--color-text-muted); }

.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  outline: none;
}

.search-cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-black);
  background: transparent;
  font-size: 1.1rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.search-cerrar:hover,
.search-cerrar:focus-visible {
  color: var(--color-black);
  background: rgb(0 0 0 / 8%);
}

.search-results {
  display: grid;
  gap: 0.25rem;
  overflow-y: auto;
  min-height: 0;
  padding: 0.5rem;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  background: transparent;
  font-family: var(--font-body);
  transition: background 0.15s ease;
}

.search-result:hover,
.search-result:focus-visible {
  background: rgb(0 0 0 / 5%);
  outline: none;
}

.search-result img {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-surface);
}

.search-result-info {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.search-result-nombre {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-precio {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.search-result > i { color: var(--color-text-muted); }

.search-hint {
  padding: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Producto señalado desde el buscador (pestañas y accesorios, que no tienen ficha). */
.resaltado {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  transition: outline-color 0.3s ease;
}

/* --- Modales de identidad (login y perfil) --- */

/* Los dos son la misma pieza y comparten estilos, para que entrar a la cuenta y
   consultarla no parezcan pantallas de sitios distintos.
   Fondo claro en vez del beige de los modales de producto: sobre #d9c5b2 el
   texto secundario quedaba en torno a 3:1, por debajo del mínimo legible. Con
   #f8f7f5 el texto apagado sube a ~7:1 y el principal a ~16:1. */
.login-card,
.perfil-card {
  background: var(--color-bg);
  max-width: 360px;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  text-align: center;
  border-radius: var(--radius-lg);
}

/* La X con recuadro pesaba demasiado para una tarjeta tan limpia: aquí es un
   objetivo sin marco que solo se tiñe al enfocarlo o pasar por encima. */
.login-card .close-modal-x,
.perfil-card .close-modal-x {
  border: none;
  top: 10px;
  right: 10px;
  font-size: 1.6rem;
  color: var(--color-text-muted);
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}

.login-card .close-modal-x:hover,
.login-card .close-modal-x:focus-visible,
.perfil-card .close-modal-x:hover,
.perfil-card .close-modal-x:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.login-card .modal-header-title,
.perfil-card .modal-header-title {
  min-height: 0;
  margin-bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

.identidad-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: var(--spacing-lg) 0;
}

.login-marca {
  height: 46px;
  object-fit: contain;
  margin-bottom: var(--spacing-md);
}

.login-sub {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 28ch;
}

.perfil-foto {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
  margin-bottom: var(--spacing-sm);
}

.perfil-nombre {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.perfil-email {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  word-break: break-all;
}

/* Filas etiqueta/valor, el mismo patrón del resumen del carrito. Hairlines en
   vez de cajas: la separación se nota sin añadir peso visual. */
.perfil-datos {
  margin: 0 0 var(--spacing-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}

.perfil-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: 0.75rem 0.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.perfil-dato dt {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.perfil-dato dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  text-align: right;
  overflow-wrap: anywhere;
}

.identidad-acciones {
  display: flex;
}

/* Ancho completo, como el botón de finalizar pedido: en una tarjeta estrecha un
   botón centrado y pequeño deja la base descompensada. Contorno en vez de
   relleno porque cerrar sesión no es la acción que el sitio quiere empujar. */
.btn-modal-secundario {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-modal-secundario:hover,
.btn-modal-secundario:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
}

/* AVISO DE COMPROBANTE */
#modal-comprobante .modal-detail-card {
  max-width: 420px;
}

.comprobante-aviso {
  margin-top: var(--spacing-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

.comprobante-estado {
  margin-top: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--color-danger);
}

.comprobante-estado:empty {
  display: none;
}

.comprobante-numero-bloque {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.comprobante-numero-etiqueta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

.comprobante-numero {
  margin: var(--spacing-sm) 0 var(--spacing-md);
  font-family: var(--font-ui);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.comprobante-copia-estado {
  margin-top: var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.comprobante-copia-estado:empty {
  display: none;
}

.comprobante-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.btn-whatsapp {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  background: var(--color-whatsapp);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  filter: brightness(0.92);
}

/* Mismo peso que el botón negro del resumen: es la vía del pago en línea. */
.btn-pagar-aviso {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
}

.btn-pagar-aviso:hover,
.btn-pagar-aviso:focus-visible {
  background: var(--color-dark);
}

/* `display: block` de la clase pisa al atributo hidden del navegador. */
.btn-pagar-aviso[hidden] {
  display: none;
}

.google-btn-wrapper {
  display: flex;
  justify-content: center;
}

.identidad-nota {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.close-modal-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid var(--color-dark);
  border-radius: 2px;
  line-height: 1;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  color: var(--color-dark);
  cursor: pointer;
  /* Se mantiene el recuadro discreto del diseño, pero por encima del mínimo
     táctil; en pantallas de dedo se agranda al tamaño cómodo. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

@media (any-pointer: coarse) {
  .close-modal-x {
    min-width: 44px;
    min-height: 44px;
  }
}

/* MODAL DE DETALLE DEL LENTE */

/* El modal nunca debe superar la altura de la pantalla: el título, la X y la
   barra de "añadir al carrito" quedan fijos y solo scrollea el contenido. Sin
   esto, en pantallas bajas el botón caía fuera del viewport y, al ser el fondo
   `position: fixed`, no había forma de alcanzarlo.
   Se aplica solo al modal de detalle para no alterar el de login, que comparte
   la clase `.modal-detail-card`. */
#modal-product-detail .modal-detail-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
}

#modal-product-detail .modal-detail-body {
  overflow-y: auto;
  /* Un ítem flex no baja de su tamaño de contenido sin esto, así que sin
     `min-height: 0` el bloque no se encogería y el scroll nunca aparecería. */
  min-height: 0;
}

#modal-product-detail .modal-header-title,
#modal-product-detail .modal-action-bar {
  flex-shrink: 0;
}

.modal-header-title {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-align: center;
  /* La X va posicionada sobre esta zona: la cabecera reserva su alto y deja
     libres los costados para que no se monte sobre el título ni sobre la foto. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 44px;
}

.modal-detail-body {
  display: grid;
  gap: var(--spacing-md);
}

/* Recuadro blanco sobre el que va el collage de fotos */
.modal-img-col {
  background: var(--color-white);
  padding: 0.4rem;
  align-self: start;
  /* En móvil se limita para que los datos y el botón sigan a la vista */
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
}

.modal-galeria {
  display: grid;
  gap: 0.25rem;
  /* Con una sola foto ocupa todo el recuadro; con varias, cuadrícula 2x2. */
  grid-template-columns: 1fr 1fr;
}

.modal-galeria[data-cantidad="1"] {
  grid-template-columns: 1fr;
}

.modal-galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.modal-info-col {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.35;
}

.modal-info-col p {
  margin: 0 0 0.45rem;
}

/* La descripción va bajo su etiqueta y conserva los saltos de línea del dato */
.modal-desc-bloque #modal-desc {
  white-space: pre-line;
}

.modal-price-tag {
  font-weight: bold;
}

.modal-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.btn-add-modal {
  background: transparent;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  padding: 0.55rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  color: var(--color-dark);
  cursor: pointer;
}

/* Producto publicado pero todavía sin precio: se ve, no se compra. */
.btn-add-figma:disabled,
.btn-add-modal:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-add-modal:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.qty-controls {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-controls button {
  background: transparent;
  border: none;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-dark);
  cursor: pointer;
}

.qty-controls span {
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  border-left: 1px solid var(--color-dark);
  border-right: 1px solid var(--color-dark);
  font-family: var(--font-ui);
  font-size: 0.8rem;
}

/* SECCIONES CON FONDO DE ESTRELLAS */
.starry-section {
  background-color: var(--color-white);
  /* Estrellas sueltas, no un mosaico repetido: con `repeat`, cualquier
     estrella que cayera en el borde del contenedor quedaba cortada a la
     mitad. La posición en % nunca recorta la imagen (0%/100% alinean su
     borde exactamente con el del contenedor), así que todas quedan enteras
     sin importar el ancho de la sección. */
  background-image: url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-clara.svg"),
    url("../assets/img/estrella-clara.svg"),
    url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-clara.svg");
  background-position:
    0% 3%,
    100% 2%,
    2% 40%,
    98% 38%,
    6% 97%,
    94% 96%;
  background-size:
    52px 52px,
    48px 48px,
    44px 44px,
    46px 46px,
    50px 50px,
    46px 46px;
  background-repeat: no-repeat;
  padding: 3.5rem var(--gutter);
  text-align: center;
}

/* Reparto propio de estrellas: esta sección es mucho más baja que la de
   accesorios, así que con los mismos porcentajes se apelotonaban. */
.why-section {
  background-image: url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-clara.svg"),
    url("../assets/img/estrella-clara.svg"),
    url("../assets/img/estrella-oscura.svg"),
    url("../assets/img/estrella-clara.svg");
  background-position:
    0% 30%,
    100% 28%,
    3% 62%,
    97% 60%,
    8% 97%,
    92% 95%;
  background-size:
    48px 48px,
    44px 44px,
    46px 46px,
    44px 44px,
    46px 46px,
    48px 48px;
}

/* Franja marrón que separa el bloque de accesorios de los catálogos, con un
   respiro en blanco entre los catálogos y la franja. */
.accessories-section {
  margin-top: 2.5rem;
  /* La franja tiene el mismo grosor que la barra negra del navbar. */
  border-top: 30px solid var(--color-dark);
}

.accessories-section h2 {
  font-size: 28px;
  line-height: 1.3;
}

.why-section h2 {
  font-size: 30px;
  line-height: 1.3;
}

/* Las tarjetas van sobre las estrellas, no debajo. */
.accessories-grid,
.why-grid {
  position: relative;
}

.card-desc {
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 0.2rem;
  /* Tres renglones fijos: es lo que cabe sin que la tarjeta crezca. */
  height: calc(3 * 1.35em);
  -webkit-line-clamp: 3;
}

/* ¿POR QUÉ COMPRAR EN MARÃO? */
.why-grid {
  list-style: none;
  display: grid;
  gap: var(--spacing-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.why-card {
  background: #d0c9c9;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  text-align: left;
}

.why-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.why-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.why-card p {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* FOOTER */

.main-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-xl) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.footer-logo {
  height: 35px;
  filter: brightness(0) invert(1);
}

.footer-contact a {
  color: inherit;
}

.footer-redes ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
}

.footer-redes li[hidden] {
  display: none;
}

/* 44px: área táctil cómoda en móvil aunque el icono sea más chico. */
.footer-redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 1.15rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.footer-redes a:hover,
.footer-redes a:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
}

.footer-redes a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ESCRITORIO: a partir de 769px se activa el layout de dos columnas */
/* Texto que solo aparece en pantallas grandes. Se recorta la palabra en vez de
   duplicar el botón para que el lector de pantalla no anuncie dos veces la
   misma acción ni lea una etiqueta que no está visible. */
.solo-escritorio {
  display: none;
}

/* Filtros y ficha técnica del catálogo de lentes */
.filter-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: bold;
  min-width: 3.5rem;
}

/* Tono y cobertura bajo el nombre de cada lente */
.card-meta {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  margin: 0;
  opacity: 0.75;
}

.catalogo-vacio {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  grid-column: 1 / -1;
  margin: var(--spacing-md) 0;
}

.modal-ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--spacing-sm);
  margin: var(--spacing-sm) 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.modal-ficha dt {
  font-weight: bold;
  color: var(--color-dark);
}

.modal-ficha dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* Paginación del catálogo de lentes */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: var(--spacing-md) 0;
  font-family: var(--font-ui);
}

.pagina-btn {
  background: var(--color-accent-soft);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.35rem 0.6rem;
  min-width: 32px;
  min-height: 32px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}

.pagina-btn.active {
  background: var(--color-dark);
  color: var(--color-white);
}

.pagina-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagina-flecha {
  font-size: 0.95rem;
  line-height: 1;
}

.paginacion-info {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

@media (min-width: 769px) {
  .solo-escritorio {
    display: inline;
  }

  .modal-detail-body {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }

  .modal-img-col {
    max-width: none;
  }

  .brand-logo {
    height: 55px;
  }

  .menu-toggle {
    display: none;
  }

  .main-nav {
    display: flex;
  }

  /* En escritorio el perfil vuelve a la barra y su hueco del menú sobra. */
  #perfil-slot-menu {
    display: none;
  }

  /* Junto al carrito el perfil va como icono, según el diseño: el nombre y el
     "Ver perfil" son la forma del menú móvil, donde hay sitio para leerlos. */
  .header-side--fin .perfil-entrada-texto {
    display: none;
  }

  .header-side--fin .perfil-entrada {
    padding: 6px;
  }

  .main-nav ul {
    gap: 2.5rem;
  }

  .main-nav a {
    font-size: 0.75rem;
  }

  .hero-section {
    flex-direction: row;
  }

  .hero-text {
    flex: 1;
    padding: 5rem 8% 5rem 2%;
  }

  .hero-text h1 {
    font-size: 70px;
    margin-bottom: 1.5rem;
  }

  .hero-description {
    font-size: 30px;
  }

  .hero-buttons {
    gap: 4rem;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 62px;
    padding: 0 2rem;
    font-size: 16px;
  }

  .hero-image {
    flex: 0 0 auto;
    width: min(40vw, 500px);
    /* La columna la mide el texto de al lado, no la proporcion de la foto:
       asi no queda una franja de fondo bajo la imagen. El recorte lateral
       es intencional y va centrado en la cara. */
    aspect-ratio: auto;
    align-self: stretch;
    /* Queda por encima del bloque de pestañas, que sube para solaparse. */
    z-index: 1;
  }

  .hero-img-element {
    object-position: center;
  }

  /* La columna de pestañas continúa la imagen del hero: sin separación arriba
     ni a la derecha, para que el bloque oscuro quede pegado a la imagen.
     El padding pasa a cada columna para no perder el margen de los lentes. */
  .dual-catalog {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: stretch;
    padding: 0;
    gap: 0;
    margin-top: calc(var(--hero-overlap) * -1);
  }

  /* Sin esto el reparto de arriba no se cumple: el ancho mínimo de una columna
     de rejilla es el de su contenido, y el carrusel de pestañas mide lo que
     suman sus tarjetas, así que se quedaba con tres cuartos de la fila. */
  .catalog-col-lentes,
  .catalog-col-pestanas {
    min-width: 0;
  }

  .catalog-col-lentes {
    padding: calc(3rem + var(--hero-overlap)) var(--spacing-xl) 3rem
      var(--gutter);
  }

  .catalog-col-pestanas {
    /* Media página: la imagen del hero la cubre parcialmente por arriba.
       El extra de padding deja libre la franja que cubre la imagen. */
    padding: calc(var(--spacing-xl) + var(--hero-overlap)) var(--spacing-lg)
      var(--spacing-xl);
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  /* La segunda tarjeta de pestañas queda parcialmente visible para que se note
     que el carrusel se desplaza; de accesorios caben cuatro y pico. */
  .carrusel-pista > .pestana-card {
    flex-basis: 62%;
  }

  .carrusel-pista > .product-card-figma {
    flex-basis: 22%;
  }

  /* En escritorio las flechas acompañan la pista y quedan disponibles sin
     obligar a buscar los controles debajo del carrusel. */
  .accessories-section .carrusel {
    position: relative;
  }

  .accessories-section .carrusel-pista {
    padding-inline: 2.5rem;
  }

  .accessories-section .carousel-controls {
    position: absolute;
    inset: 0;
    align-items: center;
    margin-top: 0;
    pointer-events: none;
  }

  .accessories-section .carousel-btn {
    background: var(--color-dark);
    border-radius: 50%;
    pointer-events: auto;
  }

  .accessories-section .carousel-btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
  }

  .products-grid-lentes {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }

  .starry-section {
    padding: 4.5rem var(--gutter);
  }

  .accessories-section {
    margin-top: 4rem;
    border-top-width: 38px;
  }

  /* Reparto de estrellas del diseño: en escritorio hay sitio de sobra
     alrededor del título, así que van más grandes y repartidas. */
  .accessories-section {
    background-image: url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-clara.svg");
    background-position:
      4% 7%,
      97% 5%,
      1% 46%,
      79% 44%,
      11% 95%,
      38% 99%,
      64% 94%,
      92% 97%;
    background-size:
      86px 86px,
      80px 80px,
      64px 64px,
      70px 70px,
      72px 72px,
      66px 66px,
      62px 62px,
      68px 68px;
  }

  .why-section {
    background-image: url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-oscura.svg"),
      url("../assets/img/estrella-clara.svg"),
      url("../assets/img/estrella-oscura.svg");
    background-position:
      27% 10%,
      71% 10%,
      3% 44%,
      97% 42%,
      7% 94%,
      43% 98%,
      95% 92%;
    background-size:
      70px 70px,
      66px 66px,
      76px 76px,
      72px 72px,
      68px 68px,
      60px 60px,
      74px 74px;
  }

  .why-grid {
    /* `minmax(0, 1fr)` y no `1fr`: entre el breakpoint y ~830px el ancho mínimo
       de las tarjetas desbordaba la página a lo ancho. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
    justify-content: center;
  }

  /* Tamaño exacto del diseño: 271×127px. */
  .why-card {
    width: 271px;
    height: 127px;
    justify-self: center;
  }

  .cart-page-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .cart-items-column {
    flex: 1.3;
  }

  .cart-summary-card {
    flex: 0.7;
  }

  .cart-item-row img {
    width: 90px;
    height: 90px;
  }

  .main-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.admin-view {
  min-height: 70dvh;
  padding: var(--spacing-xl) var(--gutter);
}

.admin-card {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.admin-mensaje { margin: var(--spacing-sm) 0; }
.admin-mensaje--error { color: var(--color-danger); }
.admin-table-wrap { overflow-x: auto; margin-top: var(--spacing-lg); }
.admin-table-wrap table { width: 100%; border-collapse: collapse; }
.admin-table-wrap th,
.admin-table-wrap td { padding: var(--spacing-sm); text-align: left; border-bottom: 1px solid var(--color-border); }
.admin-table-wrap select { min-height: 44px; }