/* ===================================================
   A3 Events — estilo "elegante moderno"
   Serif en títulos, sans en texto, tonos crema,
   mucho aire y fotos grandes.
   =================================================== */

/* ---------- Fuentes ----------
   Fraunces: serif elegante con mucho carácter, para títulos.
   Outfit: sans cálida y contemporánea, para el texto corrido. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Outfit:wght@400;500;600;700&display=swap');

/* ---------- Variables de color y forma ---------- */
:root {
  --crema: #faf7f2;
  --crema-oscura: #f0ebe2;
  --texto: #2b2926;
  --texto-suave: #6b655d;
  --acento: #b5592f;        /* cobre/terracota de la marca A3 Events */
  --acento-oscuro: #944825;
  --borde: #e4ddd1;
  --ancho: 1100px;
  --radio: 10px;             /* redondeo estándar de botones y tarjetas */
  --radio-chico: 6px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--texto);
  background: var(--crema);
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

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

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

/* ---------- Contenedores de sección ---------- */
section {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

/* Línea fina entre secciones, para separarlas con una marca sutil
   en vez de solo el salto de aire. La portada (hero) no lleva, ya
   se distingue de sobra con la foto. */
main > section:not(.hero) {
  border-top: 1px solid var(--borde);
}

section h2 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Marca decorativa centrada sobre el título de cada sección */
.divisor {
  width: 46px;
  height: 3px;
  background: var(--acento);
  border-radius: 3px;
  margin: 0 auto 1.4rem;
}

.subtitulo {
  text-align: center;
  color: var(--texto-suave);
  margin-bottom: 3rem;
}

/* ---------- Botón ---------- */
.boton {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radio-chico);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(148, 72, 37, 0.18);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.boton:hover {
  background: var(--acento-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(148, 72, 37, 0.28);
}

.boton:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(148, 72, 37, 0.2);
}

/* ---------- Cabecera ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.1rem 2rem;
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-lockup img {
  height: 2.1rem;
  width: auto;
  display: block;
}

.logo-lockup span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ---------- Selector de idioma ---------- */
.lang-toggle {
  display: flex;
  gap: 0.3rem;
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 0.2rem;
}

.lang-boton {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 16px;
  cursor: pointer;
  color: var(--texto-suave);
}

.lang-boton.activo {
  background: var(--acento);
  color: #fff;
}

header nav {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

header nav a {
  display: inline-block;
  color: var(--texto-suave);
  transition: color 0.2s ease, transform 0.2s ease;
}

header nav a:hover {
  color: var(--acento);
  transform: scale(1.08);
}

header .boton {
  padding: 0.65rem 1.3rem;
}

/* ---------- Portada (hero) con carrusel de fondo ---------- */
.hero {
  max-width: none;
  padding: 0;
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* Capa de fotos: cada una se desvanece dentro y fuera por turnos.
   Son 5 fotos repartidas a partes iguales en un ciclo de 30s;
   el retraso negativo hace que cada una empiece "a mitad de vuelta"
   para que queden escalonadas sin tener que escribir 5 animaciones distintas. */
.hero-fondo {
  position: absolute;
  inset: 0;
}

.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(30, 20, 12, 0.4), rgba(30, 20, 12, 0.52));
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 30% 35%;
  opacity: 0;
  animation: hero-fade 30s infinite;
}

/* La foto de la silla y la mesa: que se vea la parte de arriba
   (la barra y la decoración) en vez de recortarla por el medio. */
.hero-slide-silla {
  background-position: 30% 12%;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: -6s; }
.hero-slide:nth-child(3) { animation-delay: -12s; }
.hero-slide:nth-child(4) { animation-delay: -18s; }
.hero-slide:nth-child(5) { animation-delay: -24s; }

@keyframes hero-fade {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  17%   { opacity: 1; }
  20%   { opacity: 0; }
  100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
  }
  .hero-slide:nth-child(1) {
    opacity: 1;
  }
}

.hero-contenido {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
}

.hero-contenido h1 {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  max-width: 26ch;
  margin-bottom: 1.2rem;
}

.hero-tagline {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  max-width: 36ch;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Rejilla de productos ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.producto {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  overflow: hidden;
  display: block;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

a.producto:hover {
  box-shadow: 0 14px 28px rgba(43, 41, 38, 0.12);
  transform: translateY(-4px);
  border-color: var(--acento);
}

.producto .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.4s ease;
}

/* Esta foto es una escena de ambiente (mesa completa), no un producto
   recortado en estudio: centramos el recorte en platos y copas,
   no en la silla que sale al fondo. */
.producto .foto img[src*="vaixella-cristalleria"] {
  object-position: 10% 20%;
}

#material .producto .cuerpo {
  text-align: center;
}

#material .producto h3 {
  margin-bottom: 0;
}

/* ---------- Contacto directo (email / whatsapp) ---------- */
.contacto-directo {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.95rem;
}

.contacto-directo a {
  display: inline-block;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.contacto-directo a:hover {
  color: var(--acento);
  border-color: var(--acento);
  transform: scale(1.08);
}

.producto .foto {
  aspect-ratio: 4 / 3;
  /* Sustituye por una <img> real */
  background: var(--crema-oscura);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.producto .cuerpo {
  padding: 1.5rem;
}

.producto h3 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.producto p {
  color: var(--texto-suave);
  font-size: 0.98rem;
}

/* ---------- Cómo funciona ---------- */
#como-funciona {
  background: var(--crema-oscura);
  max-width: none;
}

#como-funciona > * {
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
}

.pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}

.pasos li {
  text-align: center;
}

.pasos h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pasos p {
  color: var(--texto-suave);
}

/* ---------- Zona de servicio ---------- */
#zona {
  text-align: center;
}

.zona-contenido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
}

.zona-contenido p {
  color: var(--texto-suave);
}

.zona-mapa {
  border-radius: var(--radio-chico);
  overflow: hidden;
  border: 1px solid var(--borde);
  aspect-ratio: 4 / 3;
}

.zona-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(15%) sepia(8%) saturate(1.05);
}

@media (max-width: 760px) {
  .zona-contenido {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ---------- Formulario ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 4px 20px rgba(43, 41, 38, 0.05);
  padding: 2.5rem;
  max-width: 640px;
  margin: 0 auto;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.5rem;
}

form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
}

.req {
  color: var(--acento);
}

.ancho-completo {
  grid-column: 1 / -1;
}

form input,
form textarea,
form select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--texto);
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: #fff;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b655d' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(181, 89, 47, 0.15);
}

/* Casilla de privacidad: fila con checkbox + texto corrido,
   distinta del resto de etiquetas (que van apiladas sobre su campo) */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--texto-suave);
  line-height: 1.5;
}

.casilla input {
  width: auto;
  margin-top: 0.2rem;
  accent-color: var(--acento);
}

.casilla a {
  display: inline-block;
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.casilla a:hover {
  color: var(--acento);
  transform: scale(1.08);
}

.form-envio {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.form-nota {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Campo trampa para formularios automáticos (spam). Un humano nunca lo ve ni lo rellena. */
.trampa-spam {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-estado {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.8rem 1rem;
  border-radius: var(--radio-chico);
  margin-top: 0.3rem;
}

.form-estado.ok {
  background: #eef6ee;
  color: #2f6b33;
}

.form-estado.error {
  background: #faeceb;
  color: #a33b2f;
}

@media (max-width: 560px) {
  .form-card {
    padding: 1.8rem 1.4rem;
  }
  form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pie ---------- */
footer {
  border-top: 1px solid var(--borde);
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.9rem;
  padding: 2.5rem 1.5rem;
}

footer p {
  margin-bottom: 0.4rem;
}

footer a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

footer a:hover {
  color: var(--acento);
  transform: scale(1.08);
}

/* ---------- Catálogo: página ancha + barra lateral + contenido ---------- */
#catalogo-top {
  max-width: 1300px;
}

.catalogo-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 3rem;
  align-items: start;
}

/* La barra lateral se queda fija al hacer scroll, justo debajo de la
   cabecera (que también es sticky), para saber siempre en qué
   categoría estás y poder saltar a otra sin volver arriba. */
.cat-nav {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cat-nav button {
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 3px solid transparent;
  color: var(--texto-suave);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cat-nav button:hover {
  border-left-color: var(--acento);
  color: var(--acento);
  transform: translateX(3px);
}

.cat-nav button.activo {
  background: var(--crema-oscura);
  border-left-color: var(--acento);
  color: var(--texto);
  font-weight: 600;
}

/* En pantallas estrechas no cabe una barra lateral: vuelve a fila
   horizontal con scroll propio, encima del contenido. */
@media (max-width: 860px) {
  .catalogo-layout {
    grid-template-columns: 1fr;
  }
  .cat-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
  }
  .cat-nav button {
    width: auto;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .cat-nav button:hover {
    transform: none;
    border-left-color: transparent;
    border-bottom-color: var(--acento);
  }
  .cat-nav button.activo {
    border-left-color: transparent;
    border-bottom-color: var(--acento);
  }
}

/* ---------- Catálogo: grupos por categoría ---------- */
.cat-grupo {
  margin-bottom: 4.5rem;
}

.cat-grupo h2 {
  font-size: 1.9rem;
  text-align: left;
  padding-left: 1rem;
  border-left: 4px solid var(--acento);
  margin-bottom: 2rem;
}

/* Zoom suave al pasar el ratón por una foto del catálogo, y el cursor
   avisa de que se puede abrir en grande haciendo clic. */
.cat-grupo .producto .foto {
  overflow: hidden;
  cursor: zoom-in;
}

.cat-grupo .producto .foto img {
  transition: transform 0.35s ease, opacity 0.4s ease;
}

.cat-grupo .producto .foto:hover img {
  transform: scale(1.08);
}

/* ---------- Visor de foto en grande (lightbox) ---------- */
/* Oculto por defecto vía el atributo hidden del HTML. Hay que decirlo
   también aquí con la misma fuerza (.lightbox[hidden]) porque la regla
   de abajo pone display:flex con esa misma fuerza — sin esto, empataban
   y la ventana se quedaba visible todo el rato en vez de solo al abrirla. */
.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 242, 0.93);
  backdrop-filter: blur(6px);
  padding: 2rem;
  animation: lightbox-aparece 0.2s ease;
}

@keyframes lightbox-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radio-chico);
  box-shadow: 0 20px 60px rgba(43, 41, 38, 0.18);
}

.lightbox-cerrar {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--texto);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 41, 38, 0.1);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lightbox-cerrar:hover {
  background: var(--acento);
  color: #fff;
  transform: scale(1.08);
}

/* ---------- Ficha de producto: medidas, peso, material ---------- */
.producto .ficha {
  list-style: none;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-top: 0.8rem;
  display: grid;
  gap: 0.25rem;
}

.producto .ficha b {
  color: var(--texto);
  font-weight: 600;
}

/* ---------- Texto legal (política de privacidad) ---------- */
.legal-texto {
  max-width: 70ch;
  margin: 0 auto;
}

.legal-texto h3 {
  font-size: 1.3rem;
  margin: 2.2rem 0 0.6rem;
}

.legal-texto h3:first-child {
  margin-top: 0;
}

.legal-texto p {
  color: var(--texto-suave);
  margin-bottom: 0.6rem;
}

.legal-texto strong {
  color: var(--texto);
}

.legal-aviso {
  background: var(--crema-oscura);
  border-radius: var(--radio-chico);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
}

/* ---------- Página de catálogo: cabecera ---------- */
.catalogo-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 3rem;
  color: var(--texto-suave);
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  header {
    padding: 1rem 1.2rem;
    gap: 1rem;
  }
  header nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 1.2rem;
  }
  section {
    padding: 3.5rem 1.2rem;
  }
  section h2 {
    font-size: 2rem;
  }
}