/* ==========================================================================
   Óptica Estudios Oftalmológicos
   Hoja propia de la sección /optica/. Se carga DESPUÉS de styles.css y solo
   en las páginas de la óptica.

   Cómo funciona: en vez de reescribir botones, tarjetas y rejillas, esta hoja
   vuelve a apuntar los tokens de marca dentro de .optica. Todo el sistema de
   componentes que ya existe se pinta solo con la paleta de la tienda, y aquí
   abajo solo van las piezas que la clínica no tiene: la cabecera de la óptica,
   la rejilla del catálogo y la ficha de montura.

   La paleta es deliberadamente otra. La clínica es azul marino, aireada y
   clínica; la óptica es tinta, hueso y latón, que es como se ve una tienda de
   gafas. Quien entra tiene que notar que cambió de sitio sin necesidad de
   leer el nombre.
   ========================================================================== */

.optica {
  /* Marca de la tienda. El latón oscuro (#8F6420) da 5.4:1 sobre blanco, así
     que sirve para texto y para fondo de botón con letra blanca. El claro
     (#C9A227) es decorativo y nunca lleva texto encima. */
  --tinta:      #1C1F24;
  --tinta-800:  #2A2F36;
  --laton:      #8F6420;
  --laton-claro:#C9A227;
  --hueso:      #FAF6EF;
  --hueso-200:  #F0E8DA;

  /* Se reapuntan los tokens de la clínica. A partir de aquí, .boton--principal,
     .tarjeta, .antetitulo y compañía salen con la paleta de la óptica. */
  --marino-900: var(--tinta);
  --marino:     var(--tinta);
  --marino-600: var(--tinta-800);
  --azul:       var(--laton);
  --azul-500:   var(--laton);
  --azul-400:   var(--laton-claro);
  --cielo:      var(--hueso-200);
  --cielo-50:   var(--hueso);
  --enlace:     var(--laton);
  --superficie-2: var(--hueso);
  --borde:      #E3D9C8;

  background: var(--superficie);
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Cinta de vuelta a la clínica
   Es lo primero de la página a propósito: la óptica se siente aparte, pero
   nunca esconde de quién es ni deja al paciente sin camino de regreso.
   -------------------------------------------------------------------------- */
.optica-cinta {
  background: var(--tinta); color: #D9CDB8; font-size: var(--paso--1);
}
.optica-cinta__interior {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding-block: .6rem;
}
.optica-cinta a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
.optica-cinta a:hover { color: var(--laton-claro); }
.optica-cinta svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Cabecera de la tienda
   -------------------------------------------------------------------------- */
.optica-encabezado {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.optica-encabezado__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-5); padding-block: var(--e-4);
}
.optica-marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta); }
.optica-marca:hover { color: var(--tinta); }
.optica-marca__icono { width: 2.4rem; height: 2.4rem; flex: none; color: var(--laton); }
.optica-marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.optica-marca__nombre {
  font-size: var(--paso-1); font-weight: 800; letter-spacing: -.01em;
}
.optica-marca__bajada {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--laton); font-weight: 700;
}
.optica-nav { display: flex; align-items: center; gap: var(--e-2); }
.optica-nav a {
  padding: .55em .7em; border-radius: var(--radio-s); font-weight: 600;
  font-size: var(--paso--1); color: var(--tinta);
}
.optica-nav a:hover { background: var(--hueso-200); color: var(--tinta); }
.optica-nav a[aria-current="page"] { background: var(--hueso-200); color: var(--laton); }

/* La vuelta a la clínica, siempre a mano.
   Va separada del resto por una línea, porque no es una sección más de la
   tienda: es la salida. La cinta de arriba dice lo mismo, pero se va con el
   scroll y la cabecera no. */
.optica-nav__clinica {
  display: inline-flex; align-items: center; gap: .35em;
  margin-left: var(--e-3); padding-left: var(--e-4);
  border-left: 1px solid var(--borde); color: var(--texto-tenue) !important;
}
.optica-nav__clinica:hover { color: var(--laton) !important; background: none !important; }
.optica-nav__clinica svg { width: .9em; height: .9em; }
@media (max-width: 640px) {
  .optica-nav__clinica { border-left: 0; margin-left: 0; padding-left: .7em; }
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.optica-hero { background: var(--hueso); border-bottom: 1px solid var(--borde); }
.optica-hero__interior {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8);
  align-items: center; padding-block: var(--e-9);
}
.optica-hero h1 {
  font-size: var(--paso-5); line-height: 1.03; letter-spacing: -.03em; color: var(--tinta);
}
.optica-hero h1 em { font-style: normal; color: var(--laton); }
.optica-hero__texto { font-size: var(--paso-1); color: var(--texto-suave); margin-top: var(--e-5); }
.optica-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.optica-hero figure { margin: 0; }
.optica-hero img { border-radius: var(--radio-l); box-shadow: var(--sombra-3); }

/* Tira de marcas */
.optica-marcas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3) var(--e-7);
  padding-block: var(--e-6);
}
.optica-marcas span {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: var(--paso--1); color: var(--texto-tenue);
}

/* Migas de pan.
   Las de la clínica están pintadas para ir sobre el hero azul oscuro, en tonos
   claros. Aquí van sobre fondo blanco, así que sin esto el nombre de la página
   actual salía blanco sobre blanco: invisible. */
.optica .migas a { color: var(--texto-tenue); }
.optica .migas a:hover { color: var(--laton); }
.optica .migas [aria-current] { color: var(--tinta); }

/* --------------------------------------------------------------------------
   Catálogo
   -------------------------------------------------------------------------- */
.catalogo-filtros {
  display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6);
}
.catalogo-filtro {
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta);
  border-radius: var(--radio-full); padding: .5em 1em; font: inherit;
  font-size: var(--paso--1); font-weight: 600; cursor: pointer;
}
.catalogo-filtro:hover { border-color: var(--laton); color: var(--laton); }
.catalogo-filtro[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}

.catalogo-rejilla {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.montura {
  display: flex; flex-direction: column; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.montura:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.montura__foto { background: var(--hueso); aspect-ratio: 4 / 3; }
.montura__foto img { width: 100%; height: 100%; object-fit: contain; padding: var(--e-4); }
.montura__sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center; color: var(--hueso-200);
}
.montura__sinfoto svg { width: 30%; height: auto; }
.montura__cuerpo { padding: var(--e-4); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.montura__marca {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--laton);
}
.montura__modelo { font-size: var(--paso-0); font-weight: 700; color: var(--tinta); }
.montura__detalle { font-size: var(--paso--1); color: var(--texto-tenue); }
.montura__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); margin-top: auto; padding-top: var(--e-3);
}
.montura__precio { font-size: var(--paso-1); font-weight: 800; color: var(--tinta); }
.montura__precio small { font-size: .7rem; font-weight: 600; color: var(--texto-tenue); display: block; }

/* Cuando todavía no hay monturas cargadas */
.catalogo-vacio {
  border: 2px dashed var(--borde); border-radius: var(--radio-l);
  padding: var(--e-9) var(--e-5); text-align: center; background: var(--hueso);
}
.catalogo-vacio h2 { color: var(--tinta); }
.catalogo-vacio p { color: var(--texto-suave); max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Pie de la tienda
   -------------------------------------------------------------------------- */
.optica-pie { background: var(--tinta); color: #C7BFB2; padding-block: var(--e-8) var(--e-6); }
.optica-pie a { color: #fff; }
.optica-pie a:hover { color: var(--laton-claro); }
.optica-pie__rejilla {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e-7);
}
.optica-pie h3 {
  color: #fff; font-size: var(--paso--1); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: var(--e-4);
}
.optica-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: var(--paso--1); }
.optica-pie__legal {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--e-7);
  padding-top: var(--e-5); font-size: .82rem; display: flex;
  flex-wrap: wrap; gap: var(--e-3) var(--e-5); justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Angosto
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .optica-hero__interior { grid-template-columns: 1fr; gap: var(--e-6); padding-block: var(--e-7); }
  .optica-hero figure { order: -1; }
  .optica-pie__rejilla { grid-template-columns: 1fr; gap: var(--e-6); }
}
@media (max-width: 640px) {
  .optica-encabezado__interior { flex-wrap: wrap; gap: var(--e-3); }
  .optica-nav { width: 100%; overflow-x: auto; }
  .optica-nav a { white-space: nowrap; }
}