/* =====================================================================
   estilos.css — Diseño de la web de Senti2 Óptica
   ---------------------------------------------------------------------
   Está escrito "mobile first": primero los estilos para el MÓVIL y,
   al final de cada bloque o del archivo, unos @media que AMPLÍAN el
   diseño para tablet (768px o más) y ordenador (1100px o más).

   ÍNDICE
    1. Variables (colores, letras, espacios)
    2. Reinicio y base
    3. Utilidades (contenedor, títulos, botones…)
    4. Barra superior
    5. Cabecera
    6. Menú y mega-menú
    7. Hero
    8. Carrusel de marcas
    9. Novedades (pestañas y productos)
   10. Tendencias
   11. Servicios
   12. Conoce Senti2
   13. Opiniones
   14. Instagram
   15. Franja de confianza
   16. Newsletter
   17. Pie de página
   18. WhatsApp flotante y banner de cookies
   19. Animaciones al hacer scroll
   20. Tablet y ordenador (@media)
   ===================================================================== */


/* =====================================================================
   1. VARIABLES — cambia aquí y cambia en toda la web
   ===================================================================== */
:root {
  /* Colores */
  --blanco: #ffffff;
  --marfil: #f8f5f0;          /* fondo cálido de algunas secciones */
  --marfil-oscuro: #ece6dc;   /* bordes y líneas */
  --carbon: #1c1c1c;          /* textos y fondos oscuros */
  --gris: #6b6862;            /* textos secundarios */
  --turquesa: #1a9e96;        /* color del logo: acento de marca */
  --turquesa-oscuro: #12756f;
  --dorado: #b89b5e;          /* detalles premium (ahora solo estrellas y etiquetas) */
  --turquesa-claro: #eef6f5;  /* fondo "clínico" de la sección de salud visual */

  /* Tipografías */
  --letra-titulos: "Cormorant Garamond", Georgia, serif;
  --letra-texto: "Manrope", Arial, sans-serif;

  /* Espacios (siempre los mismos, así todo respira igual) */
  --espacio-xs: 8px;
  --espacio-s: 16px;
  --espacio-m: 24px;
  --espacio-l: 48px;
  --espacio-xl: 80px;

  /* Otros */
  --ancho-maximo: 1400px;
  --radio: 6px;                                   /* esquinas suaves */
  --sombra: 0 8px 30px rgba(28, 28, 28, 0.06);    /* sombra muy sutil */
  --transicion: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =====================================================================
   2. REINICIO Y BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px; /* hueco para la cabecera fija al saltar a una sección */
}

body {
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--carbon);
  background-color: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: 0;
}

/* Contorno visible al navegar con teclado (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--letra-titulos);
  font-weight: 500;
  line-height: 1.1;
}

/* Las palabras en <em> dentro de títulos salen en cursiva turquesa
   (el color de la marca, más "sanitario" que el dorado) */
h1 em,
h2 em {
  font-style: italic;
  color: var(--turquesa-oscuro);
}


/* =====================================================================
   3. UTILIDADES
   ===================================================================== */

/* Contenedor: centra el contenido con un máximo de 1400px */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--espacio-s);
}

/* Oculta algo a la vista pero lo deja para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace "Saltar al contenido": solo aparece al usar el tabulador */
.saltar {
  position: absolute;
  top: -100px;
  left: var(--espacio-s);
  z-index: 1000;
  padding: var(--espacio-xs) var(--espacio-s);
  background: var(--carbon);
  color: var(--blanco);
}
.saltar:focus {
  top: var(--espacio-s);
}

.centrado {
  text-align: center;
  margin-top: var(--espacio-l);
}

/* Secciones */
.seccion {
  padding-block: var(--espacio-xl);
}
.seccion--marfil {
  background-color: var(--marfil);
}
.seccion__cabecera {
  text-align: center;
  margin-bottom: var(--espacio-l);
}
.seccion h2 {
  font-size: clamp(34px, 5vw, 52px);
}
/* Frase de introducción bajo el título de una sección */
.seccion__intro {
  max-width: 36rem;
  margin: var(--espacio-s) auto 0;
  color: var(--gris);
}

/* Texto pequeño en mayúsculas encima de los títulos */
.antetitulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin-bottom: var(--espacio-xs);
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;   /* el texto del botón no se parte en dos líneas */
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
/* Botón principal: siempre en el turquesa de la marca, para que todas
   las llamadas a la acción ("Pedir cita") se reconozcan al instante */
.boton--principal {
  background-color: var(--turquesa-oscuro);
  border-color: var(--turquesa-oscuro);
  color: var(--blanco);
}
.boton--principal:hover {
  background-color: var(--carbon);
  border-color: var(--carbon);
}
.boton--claro {
  background-color: var(--blanco);
  color: var(--carbon);
}
.boton--claro:hover {
  background-color: var(--marfil);
}
.boton--turquesa {
  background-color: var(--turquesa-oscuro);
  color: var(--blanco);
}
.boton--turquesa:hover {
  background-color: var(--carbon);
}
.boton--borde {
  border-color: var(--carbon);
}
.boton--borde:hover {
  background-color: var(--carbon);
  color: var(--blanco);
}
.boton--borde-claro {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--blanco);
}
.boton--borde-claro:hover {
  background-color: var(--blanco);
  color: var(--carbon);
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Enlace de texto con subrayado que se dibuja al pasar el ratón */
.enlace-animado,
.menu__lista > li > a,
.menu__desplegar {
  position: relative;
}
.enlace-animado::after,
.menu__lista > li > a::after,
.menu__desplegar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);           /* empieza "encogido" */
  transform-origin: right;
  transition: transform var(--transicion);
}
.enlace-animado:hover::after,
.menu__lista > li > a:hover::after,
.menu__desplegar:hover::after,
.tiene-mega:focus-within .menu__desplegar::after {
  transform: scaleX(1);           /* se estira de izquierda a derecha */
  transform-origin: left;
}


/* =====================================================================
   4. BARRA SUPERIOR
   ===================================================================== */
.barra-superior {
  background-color: var(--carbon);
  color: var(--blanco);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px var(--espacio-s);
}
.barra-superior a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Solo se ve un mensaje; el JavaScript (fase 3) los irá cambiando */
.barra-superior__mensajes li {
  display: none;
}
.barra-superior__mensajes li:first-child,
.barra-superior__mensajes li.activo {
  display: block;
}
.barra-superior__mensajes.rotando li:first-child:not(.activo) {
  display: none;
}


/* =====================================================================
   5. CABECERA (fija arriba)
   ===================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--marfil-oscuro);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-s);
  height: 68px;
  transition: height var(--transicion);
}

/* Al bajar, el JavaScript añade esta clase y la cabecera se hace más baja */
.cabecera--compacta .cabecera__fila {
  height: 56px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  width: 44px;
  height: auto;
}
.logo__texto {
  font-family: var(--letra-titulos);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.logo__texto em {
  font-weight: 500;
  color: var(--turquesa);
}

/* Botón hamburguesa (3 rayas) */
.cabecera__hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}
.cabecera__hamburguesa span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--carbon);
  transition: transform var(--transicion), opacity var(--transicion);
}
/* Cuando el menú está abierto, las rayas forman una X */
.cabecera__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cabecera__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cabecera__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Buscador: oculto en móvil, visible en ordenador */
.buscador {
  display: none;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
}
.cabecera__acciones .boton {
  padding: 10px 14px;
  font-size: 11px;
}

/* Botón-icono (favoritos) */
.icono-boton {
  display: none; /* en móvil lo ocultamos para ganar espacio */
  place-items: center;
  width: 40px;
  height: 40px;
}
.icono-boton svg,
.buscador svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: stroke var(--transicion);
}
.icono-boton:hover svg {
  stroke: var(--turquesa);
}


/* =====================================================================
   6. MENÚ Y MEGA-MENÚ
   En MÓVIL: panel a pantalla completa que se abre con la hamburguesa
   (el JavaScript añade la clase .menu--abierto).
   ===================================================================== */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;        /* ocupa toda la pantalla */
  z-index: -1;           /* por detrás de la fila del logo */
  padding-top: 110px;
  background-color: var(--blanco);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.menu--abierto {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.menu__lista > li {
  border-bottom: 1px solid var(--marfil-oscuro);
}
.menu__lista > li > a,
.menu__desplegar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: var(--letra-titulos);
  font-size: 24px;
  text-align: left;
}
/* En móvil no queremos el subrayado animado */
.menu__lista > li > a::after,
.menu__desplegar::after {
  display: none;
}

/* Flecha "+" de los acordeones */
.menu__desplegar::before {
  content: "+";
  order: 2;
  font-family: var(--letra-texto);
  font-weight: 300;
  transition: transform var(--transicion);
}
.menu__desplegar[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

/* Contenido del mega-menú: en móvil es un acordeón cerrado */
.mega {
  display: none;
  padding-bottom: var(--espacio-m);
}
.mega--abierto {
  display: grid;
  gap: var(--espacio-m);
}
.mega__titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin-bottom: var(--espacio-xs);
}
.mega__columna li a {
  display: block;
  padding: 4px 0;
  color: var(--gris);
  transition: color var(--transicion);
}
.mega__columna li a:hover {
  color: var(--carbon);
}
.mega__destacado {
  display: none; /* la foto destacada solo en ordenador */
}


/* =====================================================================
   7. HERO (portada con la foto de la tienda)
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - 100px);
  overflow: hidden;
  color: var(--blanco);
}
.hero__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* rellena sin deformar */
  object-position: center 60%;
  animation: zoom-lento 14s ease-out both;
}
/* Degradado oscuro para que el texto blanco se lea bien */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 24, 24, 0.5) 0%, rgba(20, 24, 24, 0.22) 45%, rgba(20, 24, 24, 0) 68%),
    linear-gradient(180deg, rgba(20, 24, 24, 0) 0%, rgba(20, 24, 24, 0) 45%, rgba(20, 24, 24, 0.55) 100%);
}
.hero__texto {
  position: relative;
  z-index: 1;            /* por encima del degradado */
  padding-bottom: var(--espacio-xl);
  /* Sombra suave bajo las letras: se leen incluso sobre la pared blanca */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero__texto .boton {
  text-shadow: none;
}
/* "Óptica en Moraira" va dentro del <h1> (bueno para Google),
   pero se ve pequeño, como un antetítulo */
.hero .antetitulo {
  display: block;
  font-family: var(--letra-texto);
  line-height: 1.7;
  color: var(--blanco);
  opacity: 0.9;
  margin-bottom: var(--espacio-s);
}
.hero h1 {
  font-size: clamp(44px, 7.5vw, 92px);
  font-weight: 500;
  margin-bottom: var(--espacio-s);
}
.hero h1 em {
  color: var(--blanco);
}
.hero__subtitulo {
  font-size: 18px;
  font-weight: 500;
  max-width: 30rem;
  margin-bottom: var(--espacio-m);
}

@keyframes zoom-lento {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* =====================================================================
   7b. SALUD VISUAL (parte sanitaria)
   ===================================================================== */
.salud {
  background-color: var(--turquesa-claro);
}
.salud__intro {
  display: grid;
  gap: var(--espacio-l);
  align-items: center;
  margin-bottom: var(--espacio-xl);
}
.salud__intro h2 {
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: var(--espacio-m);
}
.salud__intro > div > p {
  color: var(--gris);
  max-width: 34rem;
  margin-bottom: var(--espacio-m);
}

/* Tarjeta blanca con la lista de pruebas */
.salud__tarjeta {
  padding: var(--espacio-l) var(--espacio-m);
  background-color: var(--blanco);
  border-radius: var(--radio);
  border-top: 3px solid var(--turquesa);
  box-shadow: var(--sombra);
}
.salud__tarjeta h3 {
  font-size: 26px;
  margin-bottom: var(--espacio-s);
}

/* Lista con un "check" turquesa delante de cada línea */
.lista-check li {
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--marfil-oscuro);
}
.lista-check li:last-child {
  border-bottom: 0;
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--turquesa)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.salud__subtitulo {
  font-size: clamp(26px, 3.5vw, 34px);
  text-align: center;
  margin-bottom: var(--espacio-l);
}

/* Tarjetas por edades */
.edades {
  display: grid;
  gap: var(--espacio-m);
  margin-bottom: var(--espacio-l);
}
.edad {
  padding: var(--espacio-m);
  background-color: var(--blanco);
  border: 1px solid rgba(18, 117, 111, 0.12);
  border-radius: var(--radio);
}
.edad svg {
  width: 40px;
  height: 40px;
  margin-bottom: var(--espacio-s);
  fill: none;
  stroke: var(--turquesa);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edad h4 {
  font-family: var(--letra-titulos);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: var(--espacio-xs);
}
.edad p {
  font-size: 15px;
  color: var(--gris);
}

/* Señales de alerta: etiquetas en fila */
.senales {
  padding: var(--espacio-m);
  border-left: 3px solid var(--turquesa);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.senales h3 {
  font-size: 24px;
  margin-bottom: var(--espacio-s);
}
.senales ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.senales li {
  padding: 6px 14px;
  border: 1px solid rgba(18, 117, 111, 0.3);
  border-radius: 999px;
  font-size: 14px;
  color: var(--turquesa-oscuro);
  background-color: var(--blanco);
}


/* =====================================================================
   7c. EQUIPO (profesionales sanitarios)
   ===================================================================== */
.equipo__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: var(--espacio-l);
}
.profesional {
  text-align: center;
}
.profesional__foto,
.profesional img {
  width: 160px;
  height: 160px;
  margin: 0 auto var(--espacio-s);
  border-radius: 50%;
  object-fit: cover;
}
.profesional__foto {
  display: grid;
  place-items: center;
  background-color: var(--blanco);
  border: 1px solid var(--marfil-oscuro);
}
.profesional__foto svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--turquesa);
  stroke-width: 1.2;
}
.profesional h3 {
  font-size: 26px;
}
.profesional__cargo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--turquesa-oscuro);
}
.profesional__colegiado {
  font-size: 14px;
  color: var(--gris);
}


/* =====================================================================
   8. CARRUSEL DE MARCAS
   Logos en gris que pasan a color con el ratón.
   El movimiento infinito lo activa el JavaScript (fase 3).
   ===================================================================== */
.marcas {
  padding-block: var(--espacio-l);
  border-bottom: 1px solid var(--marfil-oscuro);
  overflow: hidden;
}
.marcas__pista {
  display: flex;
  width: max-content;
}
/* Cuando el JS duplica la lista, la pista se desplaza sin fin */
.marcas__pista--animada {
  animation: desplazar-marcas 60s linear infinite;
}
.marcas__pista--animada:hover {
  animation-play-state: paused;   /* se para al pasar el ratón */
}
.marcas__lista {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.marcas__lista img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  mix-blend-mode: multiply;   /* hace "desaparecer" el fondo blanco de los JPG */
  transition: filter var(--transicion), opacity var(--transicion);
}
/* Logos muy alargados (p. ej. Porsche Design) necesitan más ancho para leerse */
.marcas__lista img.marca--ancha {
  max-width: 240px;
}
.marcas__lista li:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes desplazar-marcas {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* la mitad = una lista completa */
}


/* =====================================================================
   9. NOVEDADES (pestañas y tarjetas de producto)
   ===================================================================== */
.pestanas {
  display: flex;
  justify-content: center;
  gap: var(--espacio-l);
  margin-bottom: var(--espacio-l);
}
.pestanas [role="tab"] {
  position: relative;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--transicion);
}
.pestanas [role="tab"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--turquesa);
  transform: scaleX(0);
  transition: transform var(--transicion);
}
.pestanas [aria-selected="true"] {
  color: var(--carbon);
}
.pestanas [aria-selected="true"]::after {
  transform: scaleX(1);
}

/* Rejilla de productos: 2 columnas en móvil, 3 en tablet y ordenador.
   Con 6 gafas por pestaña siempre quedan filas completas. */
.productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-l) var(--espacio-s);
}
.productos[hidden] {
  display: none;
}

/* Todas las fotos de producto tienen el mismo formato (4:3, 1200x900),
   así las tarjetas quedan perfectamente alineadas */
.producto__fotos {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--marfil);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--espacio-s);
}
.producto__fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;       /* funde el fondo blanco de la foto con el marfil */
  transition: opacity var(--transicion), transform 0.6s ease;
}
/* Segunda foto (la gafa puesta): escondida hasta pasar el ratón */
.producto__fotos .producto__foto-2 {
  opacity: 0;
  mix-blend-mode: normal;         /* es una foto real: sin fundir */
}
.producto:hover .producto__fotos img {
  transform: scale(1.04);         /* zoom ligero */
}
.producto:hover .producto__foto-2 {
  opacity: 1;
}
.producto:hover .producto__fotos:has(.producto__foto-2) img:first-child {
  opacity: 0;
}

/* En secciones con fondo marfil, la caja de la foto va en blanco */
.seccion--marfil .producto__fotos {
  background-color: var(--blanco);
}

.etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 20px;
  background-color: var(--blanco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--turquesa-oscuro);
}
.etiqueta--top {
  background-color: var(--carbon);
  color: var(--dorado);
}

.producto__marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}
.producto__modelo {
  font-size: 22px;
}


/* =====================================================================
   10. TENDENCIAS (bloques editoriales)
   ===================================================================== */
/* Tres bloques iguales: foto 4:3 arriba y texto debajo */
.tendencias__rejilla {
  display: grid;
  gap: var(--espacio-l) var(--espacio-m);
}
.tendencia {
  display: block;
}
.tendencia__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio);
  background-color: var(--blanco);
  margin-bottom: var(--espacio-m);
}
.tendencia__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.tendencia:hover .tendencia__foto img {
  transform: scale(1.05);
}
.tendencia h3 {
  font-size: 32px;
  margin-bottom: var(--espacio-xs);
}
.tendencia p {
  color: var(--gris);
  max-width: 26rem;
}


/* =====================================================================
   11. SERVICIOS
   ===================================================================== */
.servicios__lista {
  display: grid;
  gap: var(--espacio-l) var(--espacio-m);
}
.servicio {
  text-align: center;
}
.servicio__icono {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--espacio-s);
  fill: none;
  stroke: var(--turquesa);
  stroke-width: 1.2;              /* línea muy fina */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.servicio h3 {
  font-size: 26px;
  margin-bottom: var(--espacio-xs);
}
.servicio p {
  color: var(--gris);
  max-width: 22rem;
  margin-inline: auto;
}


/* =====================================================================
   12. CONOCE SENTI2
   ===================================================================== */
.conoce__rejilla {
  display: grid;
  gap: var(--espacio-l);
  align-items: center;
}
.conoce__foto {
  width: 100%;
  height: auto;          /* que mande la proporción, no el atributo height */
  aspect-ratio: 4 / 3;   /* foto horizontal de la zona de atención */
  object-fit: cover;
  border-radius: var(--radio);
}
/* Galería "Nuestra tienda": la foto vertical ocupa dos filas */
.tienda__galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
  gap: 8px;
}
.tienda__foto {
  overflow: hidden;
  border-radius: var(--radio);
  background-color: var(--blanco);
}
.tienda__foto--alta {
  grid-row: span 2;
}
.tienda__foto:last-child {
  grid-column: span 2;
}
.tienda__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.tienda__foto:hover img {
  transform: scale(1.04);
}
.tienda__redes {
  margin-top: var(--espacio-m);
}
.conoce h2 {
  margin-bottom: var(--espacio-m);
}
.conoce__texto > p {
  color: var(--gris);
  margin-bottom: var(--espacio-s);
}
.valores {
  display: grid;
  gap: var(--espacio-s);
  margin-top: var(--espacio-m);
  padding-top: var(--espacio-m);
  border-top: 1px solid var(--marfil-oscuro);
}
.valores strong {
  display: block;
  font-family: var(--letra-titulos);
  font-size: 22px;
  font-weight: 600;
}
.valores li {
  color: var(--gris);
}


/* =====================================================================
   13. OPINIONES
   ===================================================================== */
.opiniones__lista {
  display: grid;
  gap: var(--espacio-m);
}
.opinion {
  padding: var(--espacio-l) var(--espacio-m);
  background-color: var(--marfil);
  border-radius: var(--radio);
}
.estrellas {
  color: var(--dorado);
  letter-spacing: 0.2em;
  margin-bottom: var(--espacio-s);
}
.opinion blockquote {
  font-family: var(--letra-titulos);
  font-size: 22px;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: var(--espacio-s);
}
.opinion figcaption {
  font-size: 13px;
  color: var(--gris);
}
.opiniones a {
  border-bottom: 1px solid currentColor;
}
/* Nota media: "4,8 ★★★★★ 12 reseñas en Google" */
.opiniones__nota {
  margin-top: var(--espacio-s);
  color: var(--gris);
  font-size: 14px;
}
.opiniones__nota strong {
  font-family: var(--letra-titulos);
  font-size: 26px;
  font-weight: 600;
  color: var(--carbon);
  vertical-align: -2px;
}
.opiniones__nota .estrellas {
  display: inline;
  margin: 0 6px;
}
/* Las tres tarjetas a la misma altura, con el nombre abajo */
.opinion {
  display: flex;
  flex-direction: column;
}
.opinion figcaption {
  margin-top: auto;
}


/* =====================================================================
   14. INSTAGRAM (rejilla de 6)
   ===================================================================== */
.instagram__rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-s);
}
.instagram__rejilla li {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radio);
  background-color: var(--marfil);
}
.instagram__rejilla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.instagram__rejilla li:hover img {
  transform: scale(1.06);
}


/* =====================================================================
   15. FRANJA DE CONFIANZA (justo debajo de la portada)
   ===================================================================== */
.confianza {
  padding-block: var(--espacio-m);
  background-color: var(--blanco);
  border-bottom: 1px solid var(--marfil-oscuro);
}
.confianza__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-s) var(--espacio-m);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.confianza li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.confianza svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--turquesa);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =====================================================================
   15c. PIDE TU CITA — tres tarjetas-enlace
   ===================================================================== */
.cita {
  background-color: var(--turquesa-claro);
}
.cita__opciones {
  display: grid;
  gap: var(--espacio-s);
}
.cita__opcion {
  display: block;
  height: 100%;
  padding: var(--espacio-l) var(--espacio-m);
  background-color: var(--blanco);
  border: 1px solid transparent;
  border-radius: var(--radio);
  text-align: center;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.cita__opcion:hover {
  transform: translateY(-4px);
  border-color: var(--turquesa);
  box-shadow: var(--sombra);
}
.cita__opcion svg {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--espacio-s);
  fill: none;
  stroke: var(--turquesa);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cita__opcion h3 {
  font-size: 26px;
  margin-bottom: 4px;
}
.cita__opcion p {
  font-weight: 600;
  color: var(--turquesa-oscuro);
  margin-bottom: 6px;
}
.cita__opcion span {
  display: block;
  font-size: 13px;
  color: var(--gris);
}
.cita__nota {
  margin-top: var(--espacio-l);
  text-align: center;
  color: var(--gris);
}
.cita__nota .estado-tienda {
  color: var(--carbon);
}


/* =====================================================================
   15b. PREGUNTAS FRECUENTES
   <details> + <summary> se abren y cierran sin JavaScript
   ===================================================================== */
.faq__caja {
  max-width: 860px;
}
.faq details {
  border-bottom: 1px solid var(--marfil-oscuro);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-s);
  padding: 22px 0;
  font-family: var(--letra-titulos);
  font-size: 24px;
  cursor: pointer;
  list-style: none;              /* quita el triángulo por defecto */
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--letra-texto);
  font-weight: 300;
  color: var(--dorado);
  transition: transform var(--transicion);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding-bottom: 22px;
  color: var(--gris);
}
.faq details a {
  color: var(--turquesa-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =====================================================================
   16. NEWSLETTER
   ===================================================================== */
.newsletter__caja {
  max-width: 760px;
  text-align: center;
}
.newsletter h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: var(--espacio-m);
}
.newsletter__formulario {
  display: grid;
  gap: 12px;
}
.newsletter__formulario input[type="email"] {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--marfil-oscuro);
  border-radius: var(--radio);
  background-color: var(--blanco);
}
.newsletter__formulario input[type="email"]:focus {
  outline: none;
  border-color: var(--turquesa);
}
.casilla {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  font-size: 13px;
  color: var(--gris);
  text-align: left;
}
.casilla input {
  margin-top: 5px;
  accent-color: var(--turquesa);
}
.casilla a {
  text-decoration: underline;
}
.newsletter__aviso,
.aviso-busqueda {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--turquesa-oscuro);
  text-align: center;
}
.aviso-busqueda {
  margin: calc(var(--espacio-m) * -1) 0 var(--espacio-l);
}


/* =====================================================================
   17. PIE DE PÁGINA
   ===================================================================== */
.pie {
  background-color: var(--carbon);
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  padding-top: var(--espacio-xl);
}
.pie__rejilla {
  display: grid;
  gap: var(--espacio-l);
  padding-bottom: var(--espacio-l);
}
.logo--pie .logo__texto {
  color: var(--blanco);
}
/* El logo tiene barras negras: en el pie oscuro lo pasamos a blanco */
.logo--pie img {
  filter: invert(1) hue-rotate(180deg);
}
.pie__columna > p {
  margin-top: var(--espacio-s);
  max-width: 22rem;
}
.pie__titulo {
  font-family: var(--letra-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: var(--espacio-s);
}
.pie address {
  font-style: normal;
}
.pie__direccion {
  margin-bottom: var(--espacio-s);
}
.pie a:hover {
  color: var(--blanco);
}

.redes {
  display: flex;
  gap: 12px;
  margin-top: var(--espacio-m);
}
/* Mientras no haya enlaces reales, la lista lleva el atributo hidden */
.redes[hidden] {
  display: none;
}
.redes a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transition: border-color var(--transicion);
}
.redes a:hover {
  border-color: var(--dorado);
}
.redes svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Indicador "Abierto ahora / Cerrado" (el texto lo pone el JS).
   Aparece en la franja de confianza, en "Pide tu cita" y en el pie. */
.estado-tienda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.pie .estado-tienda {
  margin-bottom: var(--espacio-s);
  color: var(--blanco);
}
.estado-tienda::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gris);
}
.estado-tienda--abierto::before {
  background-color: #3ccf8e;
  box-shadow: 0 0 0 4px rgba(60, 207, 142, 0.2);
}
.estado-tienda--cerrado::before {
  background-color: #e0645c;
}

.horario {
  width: 100%;
  border-collapse: collapse;
}
.horario th,
.horario td {
  padding: 6px 0;
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.horario td {
  text-align: right;
  color: var(--blanco);
}

.pie__mapa iframe {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--radio);
  filter: grayscale(0.6);         /* mapa más sobrio, a juego con la web */
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-s);
  padding-block: var(--espacio-m);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}
.pie__legal ul {
  display: flex;
  gap: var(--espacio-m);
}


/* =====================================================================
   18. WHATSAPP FLOTANTE Y BANNER DE COOKIES
   ===================================================================== */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform var(--transicion);
}
.whatsapp:hover {
  transform: scale(1.08);
}
.whatsapp svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--blanco);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.cookies {
  position: fixed;
  left: var(--espacio-s);
  right: var(--espacio-s);
  bottom: var(--espacio-s);
  z-index: 200;
  max-width: 440px;
  padding: var(--espacio-m);
  background-color: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.cookies[hidden] {
  display: none;
}
.cookies h2 {
  font-size: 26px;
  margin-bottom: var(--espacio-xs);
}
.cookies p {
  font-size: 14px;
  color: var(--gris);
  margin-bottom: var(--espacio-s);
}
.cookies a {
  text-decoration: underline;
}
.cookies .boton {
  flex: 1;
}


/* =====================================================================
   18b. PÁGINAS LEGALES (aviso legal, privacidad, cookies)
   ===================================================================== */
.legal {
  max-width: 820px;
  padding-block: var(--espacio-l) var(--espacio-xl);
}
.legal h1 {
  font-size: clamp(36px, 5vw, 52px);
  margin-bottom: var(--espacio-xs);
}
.legal .actualizado {
  font-size: 13px;
  color: var(--gris);
  margin-bottom: var(--espacio-l);
}
.legal h2 {
  font-size: 28px;
  margin: var(--espacio-l) 0 var(--espacio-s);
}
.legal p,
.legal li {
  color: var(--gris);
  margin-bottom: 12px;
}
.legal ul {
  list-style: disc;
  padding-left: 22px;
}
.legal a {
  color: var(--turquesa-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-bottom: var(--espacio-m);
}
.legal th,
.legal td {
  padding: 10px 12px;
  border: 1px solid var(--marfil-oscuro);
  text-align: left;
  vertical-align: top;
}
.legal th {
  background-color: var(--marfil);
  font-weight: 600;
}
.legal .pendiente {
  background-color: #fff3cd;   /* amarillo: dato que falta por rellenar */
  padding: 0 4px;
}


/* =====================================================================
   19. ANIMACIONES AL HACER SCROLL
   Solo se activan si hay JavaScript (clase "js" en <html>), así nada
   queda invisible si el JS falla.
   ===================================================================== */
.js .aparecer {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .aparecer.visible {
  opacity: 1;
  transform: none;
}

/* Respeto a quien pide "menos movimiento" en su sistema */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .aparecer {
    opacity: 1;
    transform: none;
  }
}


/* =====================================================================
   20. TABLET Y ORDENADOR
   ===================================================================== */

/* ---------- TABLET: 768px o más ---------- */
@media (min-width: 768px) {
  .contenedor {
    padding-inline: var(--espacio-l);
  }

  .icono-boton {
    display: grid;
  }
  .cabecera__acciones .boton {
    padding: 12px 22px;
    font-size: 12px;
  }

  .productos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-l) var(--espacio-m);
  }

  /* Tendencias: tres bloques iguales en fila */
  .tendencias__rejilla {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Tienda: vertical a la izquierda, ancha arriba, dos abajo */
  .tienda__galeria {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 12px;
  }
  .tienda__foto--ancha {
    grid-column: span 2;
  }
  .tienda__foto:last-child {
    grid-column: auto;
  }

  .servicios__lista {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Salud visual: texto a la izquierda y tarjeta a la derecha */
  .salud__intro {
    grid-template-columns: 1fr 1fr;
  }
  .edades {
    grid-template-columns: repeat(2, 1fr);
  }

  .opiniones__lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .instagram__rejilla {
    grid-template-columns: repeat(4, 1fr);
  }

  .confianza__lista {
    grid-template-columns: repeat(4, 1fr);
  }
  .cita__opciones {
    grid-template-columns: repeat(3, 1fr);
  }

  .newsletter__formulario {
    grid-template-columns: 1fr auto;
  }
  .casilla {
    grid-column: 1 / -1;   /* la casilla ocupa toda la fila */
  }

  .pie__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---------- ORDENADOR: 1100px o más ---------- */
@media (min-width: 1100px) {

  /* --- Cabecera: logo | buscador | acciones --- */
  .cabecera__hamburguesa {
    display: none;
  }
  .cabecera__fila {
    height: 84px;
  }
  .logo img {
    width: 56px;
  }
  .logo__texto {
    font-size: 28px;
  }
  .buscador {
    display: flex;
    align-items: center;
    flex: 0 1 380px;
    border-bottom: 1px solid var(--marfil-oscuro);
    transition: border-color var(--transicion);
  }
  .buscador:focus-within {
    border-color: var(--carbon);
  }
  .buscador input {
    flex: 1;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    outline: none;
  }

  /* --- Menú horizontal --- */
  .menu {
    position: static;
    width: auto;
    height: auto;
    z-index: auto;
    padding-top: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: transparent;
  }
  .menu__lista {
    display: flex;
    justify-content: center;
    gap: 34px;
  }
  .menu__lista > li {
    border: 0;
  }
  .menu__lista > li > a,
  .menu__desplegar {
    width: auto;
    padding: 14px 0 16px;
    font-family: var(--letra-texto);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
  .menu__lista > li > a::after,
  .menu__desplegar::after {
    display: block;
    bottom: 10px;
  }
  .menu__desplegar::before {
    display: none;
  }

  /* --- Mega-menú: panel ancho que aparece al pasar el ratón ---
     :hover = ratón encima; :focus-within = navegando con teclado */
  .mega,
  .mega--abierto {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr;
    gap: var(--espacio-l);
    padding: var(--espacio-l) max(var(--espacio-l), calc((100% - var(--ancho-maximo)) / 2 + var(--espacio-l)));
    background-color: var(--blanco);
    border-top: 1px solid var(--marfil-oscuro);
    box-shadow: 0 30px 40px -20px rgba(28, 28, 28, 0.12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .tiene-mega:hover .mega,
  .tiene-mega:focus-within .mega {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .mega__destacado {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radio);
    background-color: var(--marfil);
  }
  .mega__destacado img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    padding: var(--espacio-m);
    mix-blend-mode: multiply;
    transition: transform 0.6s ease;
  }
  .mega__destacado:hover img {
    transform: scale(1.04);
  }
  .mega__destacado span {
    position: absolute;
    left: var(--espacio-m);
    bottom: var(--espacio-s);
    font-family: var(--letra-titulos);
    font-size: 22px;
  }

  /* --- Secciones --- */
  .seccion {
    padding-block: 120px;
  }

  .hero__texto {
    padding-bottom: 120px;
  }

  .productos {
    gap: 64px var(--espacio-l);   /* en ordenador, más aire entre gafas */
  }

  /* 6 servicios en 3 columnas = 2 filas completas */
  .servicios__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 64px var(--espacio-l);
  }

  .salud__intro {
    gap: 96px;
  }
  .edades {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Conoce: rejilla de 12 columnas → foto 5, texto 6 (con 1 de aire) */
  .conoce__rejilla {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--espacio-m);
  }
  .conoce__foto {
    grid-column: 1 / span 5;
  }
  .conoce__texto {
    grid-column: 7 / span 6;
  }
  .valores {
    grid-template-columns: repeat(3, 1fr);
  }

  .pie__rejilla {
    grid-template-columns: 1.2fr 1fr 1.2fr 1.4fr;
  }
}