/* Estilos base — Anteojos Del Chino
 *
 * Mobile-first. Los patrones de identidad (títulos en píldora, dragón de fondo)
 * vienen del tema rebrand que está en producción.
 */

/* ==========================================================================
   Reset y cimientos
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  line-height: var(--interlinea);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titular);
  font-weight: 400;
  line-height: var(--interlinea-apretada);
  letter-spacing: 0.02em;
  margin: 0 0 var(--e4);
}

h1 { font-size: var(--titulo-lg); }
h2 { font-size: var(--titulo-md); }
h3 { font-size: var(--titulo-sm); }

@media (min-width: 750px) {
  h1 { font-size: var(--titulo-xl); }
}

p { margin: 0 0 var(--e4); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Accesible pero invisible: para etiquetas que sólo leen los lectores de pantalla */
.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;
}

.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--e3) var(--e5);
  background: var(--verde);
  color: var(--papel);
  border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus {
  left: 0;
  top: 0;
}

/* ==========================================================================
   Disposición
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

@media (min-width: 750px) {
  .contenedor { padding-inline: var(--e6); }
}

.seccion {
  padding-block: var(--e7);
}

@media (min-width: 750px) {
  .seccion { padding-block: var(--e9); }
}

.seccion--gris { background: var(--gris); }
.seccion--verde { background: var(--verde); color: var(--papel); }

/* ==========================================================================
   Título en píldora — patrón del manual de marca
   ========================================================================== */

.titulo-pastilla {
  display: inline-block;
  background: var(--papel);
  color: var(--verde);
  border: 2px solid var(--verde);
  border-radius: var(--radio-pastilla);
  padding: var(--e2) var(--e6);
  letter-spacing: 0.05em;
  margin: 0 auto var(--e6);
}

.centrado { text-align: center; }

/* ==========================================================================
   Botones
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e6);
  border: 2px solid transparent;
  border-radius: var(--radio-pastilla);
  background: var(--verde);
  color: var(--papel);
  font-weight: 600;
  font-size: var(--texto-base);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.boton:hover:not(:disabled) {
  background: var(--verde-oscuro);
}

.boton:disabled {
  background: var(--gris);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.boton--contorno {
  background: transparent;
  color: var(--verde);
  border-color: var(--verde);
}
.boton--contorno:hover:not(:disabled) {
  background: var(--verde);
  color: var(--papel);
}

.boton--grande {
  padding: var(--e4) var(--e7);
  font-size: var(--texto-lg);
  width: 100%;
}

/* ==========================================================================
   Barra de anuncio
   ========================================================================== */

.anuncio {
  position: relative;
  background: var(--verde);
  color: var(--papel);
  text-align: center;
  padding: var(--e2) var(--e6);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El dragón acompaña el mensaje, a la izquierda */
.anuncio::before {
  content: '';
  position: absolute;
  left: max(var(--e4), calc((100vw - var(--ancho-max)) / 2 + var(--e4)));
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--dragon-blanco) center / contain no-repeat;
  opacity: 0.95;
  pointer-events: none;
}

@media (min-width: 750px) {
  .anuncio { font-size: var(--texto-base); }
  .anuncio::before { width: 28px; height: 28px; }
}

/* ==========================================================================
   Encabezado
   ========================================================================== */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: var(--alto-header);
}

.encabezado__logo {
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--verde);
  white-space: nowrap;
}

.encabezado__logo img {
  height: 40px;
  width: auto;
}

.encabezado__nav {
  display: none;
  gap: var(--e5);
  margin-inline-start: auto;
}

.encabezado__nav a {
  font-size: var(--texto-sm);
  font-weight: 500;
  padding-block: var(--e2);
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}

.encabezado__nav a:hover,
.encabezado__nav a[aria-current='page'] {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-inline-start: auto;
}

.encabezado__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.encabezado__icono:hover {
  background: var(--gris);
  color: var(--verde);
}

@media (min-width: 990px) {
  .encabezado__nav { display: flex; }
  .encabezado__acciones { margin-inline-start: var(--e5); }
}

/* Navegación móvil, desplegable */
.nav-movil {
  display: block;
  border-top: 1px solid var(--borde);
  padding: var(--e3) 0;
}
.nav-movil ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--e4);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-movil ul::-webkit-scrollbar { display: none; }
.nav-movil a {
  white-space: nowrap;
  font-size: var(--texto-sm);
  font-weight: 500;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
}
.nav-movil a[aria-current='page'] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--papel);
}

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

/* ==========================================================================
   Buscador
   ========================================================================== */

.buscador {
  display: flex;
  align-items: center;
  gap: var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  padding: var(--e2) var(--e4);
  background: var(--papel);
  max-width: 420px;
}

.buscador input {
  border: 0;
  outline: 0;
  background: none;
  width: 100%;
  font-size: var(--texto-sm);
}

.buscador button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--texto-suave);
  display: grid;
  place-items: center;
}
.buscador button:hover { color: var(--verde); }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
}

@media (min-width: 750px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
}

@media (min-width: 1100px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta:hover {
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.tarjeta__figura {
  position: relative;
  aspect-ratio: 1;
  background: var(--papel);
  overflow: hidden;
}

.tarjeta__figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tarjeta__cuerpo {
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
}

.tarjeta__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 750px) {
  .tarjeta__titulo { font-size: var(--texto-lg); }
}

.tarjeta__precio {
  font-weight: 700;
  font-size: var(--texto-lg);
  margin-top: auto;
}

.tarjeta__precio del {
  color: var(--texto-suave);
  font-weight: 400;
  font-size: var(--texto-sm);
  margin-inline-end: var(--e2);
}

/* ==========================================================================
   Etiquetas
   ========================================================================== */

.etiqueta {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pastilla);
  background: var(--gris);
  color: var(--texto-suave);
}

.etiqueta--verde { background: var(--verde); color: var(--papel); }
.etiqueta--claro { background: var(--verde-claro); color: var(--tinta); }
.etiqueta--oferta { background: var(--amarillo); color: var(--tinta); }

/* ==========================================================================
   Pie de página
   ========================================================================== */

.pie {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
  padding-block: var(--e7) var(--e5);
  margin-top: var(--e9);
}

/* El dragón como marca de agua, patrón del tema actual */
.pie::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -30px;
  width: 220px;
  height: 220px;
  background: var(--dragon-verde) bottom right / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 750px) {
  .pie::after { width: 320px; height: 320px; opacity: 0.12; }
}

.pie__interior {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e6);
}

@media (min-width: 750px) {
  .pie__interior { grid-template-columns: repeat(3, 1fr); }
}

.pie h3 {
  font-size: var(--texto-lg);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--e3);
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e2);
}

.pie a:hover { color: var(--verde-claro); }

.pie__legal {
  position: relative;
  z-index: 1;
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--texto-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Mensajes vacíos y avisos
   ========================================================================== */

.aviso {
  padding: var(--e5);
  border-radius: var(--radio);
  background: var(--gris);
  text-align: center;
  color: var(--texto-suave);
}

.aviso--error {
  background: #fdecec;
  color: var(--rojo);
}