/* ===================================================
   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;1,900&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;
  --header-h: 84px;         /* lo recalcula efectos.js al cargar; este valor es solo el de respaldo */
}

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

html {
  scroll-behavior: smooth;
}

/* ---------- Pantalla de carga con el logo ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--crema);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.preloader img {
  width: 64px;
  height: auto;
  animation: preloader-pulso 1s ease-in-out infinite;
}

@keyframes preloader-pulso {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.preloader.oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader img {
    animation: none;
  }
}

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

/* Los saltos a un ancla (#como-funciona, etc.) o el scroll por JS no se
   paran justo debajo del borde de la pantalla, sino un poco más abajo,
   para que la barra fija (ver más abajo) no tape el principio de la
   sección. */
html {
  scroll-padding-top: var(--header-h);
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  /* Reparte las palabras entre líneas de forma más equilibrada, para
     que no se quede una sola palabra suelta en la última línea (como
     pasaba con "¿Hablamos de tu evento?" en el móvil). */
  text-wrap: balance;
}

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 ---------- */
/* "fixed" (no "sticky"): al escondida con transform, un "sticky" deja
   su hueco reservado vacío (el espacio en blanco feo en el móvil);
   "fixed" no reserva hueco, así que no puede dejar ninguno. El "body"
   compensa el espacio con su padding-top (ver --header-h). */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 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);
  transition: transform 0.35s ease;
}

/* En toda la web: la barra se esconde al bajar y vuelve al subir (o si
   acercas el ratón del todo arriba), para dejar más protagonismo al
   contenido. */
header.header-oculto {
  transform: translateY(-100%);
}

.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;
}

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

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

header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--acento);
  transition: width 0.25s ease;
}

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

header nav a:hover::after {
  width: 100%;
}

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

/* ---------- Desplegable de categorías en "Catálogo" ---------- */
/* Al pasar el ratón por "Catálogo" en el menú, se abre un panel con
   las categorías del catálogo y, al lado, una foto de la categoría
   señalada (la lista la rellena menu-catalogo.js con los mismos datos
   que usa la página del catálogo). Solo tiene sentido en escritorio:
   en móvil no existe "pasar por encima", así que el enlace sigue
   llevando directo al catálogo y el panel se queda oculto. */
.nav-catalogo {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-catalogo-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: top left;
  display: flex;
  align-items: stretch;
  gap: 1.3rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(43, 41, 38, 0.18);
  padding: 1.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.3s;
  z-index: 95;
}

.nav-catalogo:hover .nav-catalogo-menu,
.nav-catalogo:focus-within .nav-catalogo-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Una sola columna (varias columnas hacía que el ancho dependiera de
   la palabra más larga de cada una, y eso descuadraba el panel entero).
   Para que salga más ancho que alto, el panel cuelga pegado a la
   izquierda (debajo de "Catálogo") y se abre hacia la derecha, con la
   foto ocupando bastante sitio al lado en vez de quedarse estrecha. */
.nav-catalogo-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 170px;
  padding-right: 1.15rem;
  border-right: 1px solid var(--borde);
}

/* Los enlaces de dentro del desplegable son otra cosa distinta del
   menú principal (aunque viven dentro de <nav>): sin la rayita que
   crece al pasar el ratón ni el "salto" de tamaño, que aquí, uno al
   lado de otro, quedaban sueltos y poco cuidados. Solo el fondo suave
   marca cuál está señalado. */
.nav-catalogo-lista a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.7rem;
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-catalogo-lista a::after {
  content: none;
}

.nav-catalogo-lista a:hover,
.nav-catalogo-lista a.activo {
  background: var(--crema-oscura);
  color: var(--acento);
  transform: none;
}

/* Icono de cada categoría: siempre del mismo naranja oscuro, no del
   color del texto (que al señalarlo cambia a un naranja más claro). */
.nav-catalogo-icono {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--acento-oscuro);
}

.nav-catalogo-icono svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-catalogo-foto {
  width: 270px;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--crema-oscura);
}

.nav-catalogo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.5s ease, transform 3.2s ease;
}

.nav-catalogo-foto img.cambio {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 640px) {
  .nav-catalogo-menu {
    display: none;
  }
}

/* Buscador de la cabecera: un icono de lupa que, al tocarlo, despliega
   un campo de texto. Al desplegarse, el icono se mete DENTRO del propio
   campo (como en cualquier barra de búsqueda de verdad) en vez de
   quedarse como un botón suelto al lado — así forman una sola pieza
   sí o sí, sin depender de ajustar a ojo cuánto se acerca uno al otro. */
/* Ahora vive dentro de <nav>, justo después de "Contacto" — por eso ya
   no necesita márgenes propios para acercarse al menú: fluye con los
   demás enlaces, en la misma fila si hay sitio, y se envuelve con
   ellos igual que cualquier otro elemento del menú si no lo hay. */
/* En escritorio vive fuera de <nav>, como hermano suelto en la
   cabecera: por eso se acerca al menú con un margen negativo (si no,
   el gap de la cabecera lo dejaba lejos, a la misma distancia del
   menú que del botón de presupuesto). En móvil, el JS lo mete dentro
   de <nav> (después de "Contacto") para que vaya en su misma fila; en
   ese caso el margen no hace falta, se quita por JS/CSS más abajo. */
/* "Contacto" y la lupa viven juntos dentro de este bloque: así, si en
   el menú no cabe todo en una fila, se envuelven los dos juntos a la
   fila siguiente — nunca se separa uno del otro. */
/* En escritorio este envoltorio es invisible para el diseño del todo
   ("display:contents" hace que no cuente como caja propia): "Contacto"
   y la lupa quedan exactamente como si no hubiera ningún span de por
   medio, con el mismo hueco que entre cualquier otro par de enlaces —
   así no se repite el problema de alineación de antes. En móvil (ver
   media query) sí que se activa como grupo de verdad, para que los
   dos vayan siempre juntos a la misma fila sin separarse. */
/* El envoltorio ".nav-contacto" que agrupa "Contacto" con la lupa en
   móvil NO está en el HTML — lo crea el propio JS solo si la pantalla
   es estrecha (ver buscador.js), así que en escritorio el DOM queda
   exactamente como si esta función no existiera. El estilo de ese
   grupo vive dentro de la media query de móvil, un poco más abajo. */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  /* Sitio de siempre en escritorio: pegado al menú con un margen
     negativo (si no, el hueco de la cabecera lo deja lejos). */
  margin-left: -1.2rem;
}

.buscador-icono {
  position: relative;
  z-index: 2;
  flex: none;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--texto-suave);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
}

.buscador-icono svg {
  width: 19px;
  height: 19px;
}

.buscador-icono:hover {
  color: var(--acento);
  background: var(--crema-oscura);
}

/* Mientras está desplegado, el icono deja de ser un botón redondo con
   fondo propio (ya está "dentro" del campo, que ya tiene su propio
   fondo) y pasa a ser solo la lupa, encima del borde izquierdo. */
.buscador.abierto .buscador-icono {
  background: none;
  pointer-events: none;
}

.buscador-input {
  position: relative;
  z-index: 1;
  width: 0;
  opacity: 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--texto);
  background: var(--crema-oscura);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0;
  margin-left: 0;
  transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.2s ease;
}

.buscador.abierto .buscador-input {
  width: 190px;
  opacity: 1;
  /* El hueco a la izquierda dentro del propio campo es justo el ancho
     del icono, para que el texto empiece después de la lupa, nunca
     debajo. El hueco a la derecha deja sitio a la "x" de borrar. */
  padding: 0.5rem 1.8rem 0.5rem 2.1rem;
  /* Se mete debajo del icono (margen negativo = el ancho del icono),
     en vez de empezar después de él. */
  margin-left: -36px;
}

.buscador-input:focus {
  outline: none;
  border-color: var(--acento);
}

/* Botón propio para borrar lo escrito: el que trae cada navegador de
   serie (en "type=search") no se ve igual en todos — en el móvil
   muchas veces no sale. Este sale siempre, y solo cuando hay texto. */
.buscador-limpiar {
  display: none;
  position: absolute;
  z-index: 3;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--texto-suave);
  cursor: pointer;
}

.buscador-limpiar:hover {
  color: var(--acento);
}

.buscador.abierto.con-texto .buscador-limpiar {
  display: block;
}

/* ---------- 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;
  forced-color-adjust: none;
  background-size: cover;
  background-position: 30% 35%;
  opacity: 0;
  transform: scale(1);
  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; }

/* El "zoom lento" (efecto Ken Burns): cada foto va creciendo un poco
   mientras está visible, para que el banner se sienta vivo en vez de
   una diapositiva fija. */
@keyframes hero-fade {
  0%    { opacity: 0; transform: scale(1); }
  3%    { opacity: 1; transform: scale(1); }
  17%   { opacity: 1; transform: scale(1.07); }
  20%   { opacity: 0; transform: scale(1.08); }
  100%  { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
    transform: none;
  }
  .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);
}

/* ---------- Qué ofrecemos (página servicios.html) ---------- */

/* Fotos de los colaboradores: sin tarjeta, sin borde ni fondo, solo la
   foto grande y el texto debajo. */
.grid-colaboradores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 1.5rem;
}

.colaborador {
  text-align: center;
}

.colaborador img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: 0 20px 45px rgba(43, 41, 38, 0.18);
  margin-bottom: 1.5rem;
}

/* Pequeña raya de acento entre la foto y el título, a modo de firma
   editorial — más elegante que pasar directo de la foto al texto. */
.colaborador h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 1rem;
  background: var(--acento);
}

.colaborador h3 {
  font-size: 1.8rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}

.colaborador p {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  color: var(--texto-suave);
  line-height: 1.75;
  letter-spacing: 0.005em;
  max-width: 40ch;
}

.servicios-cta {
  text-align: center;
  max-width: 50ch;
  margin: 3.5rem auto 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--texto-suave);
}

/* ---------- 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%;
}

/* Estas son fotos de estudio muy verticales (mucho suelo vacío debajo,
   o una mesa entera debajo de la lámpara): recortadas al 4/3 de la
   tarjeta, con "cover" se quedaba fuera lo importante del todo — el
   asiento del taburete, hasta la lámpara entera en sí. Con "contain"
   se ve el mueble completo, aunque quede más pequeño dentro de la
   tarjeta (con el mismo fondo crema alrededor, a juego). */
.producto .foto img[src*="/tamboret-"],
.producto .foto img[src*="/lampara-kent"],
.producto .foto img[src*="/lampara-denali"],
.producto .foto img[src*="/planta-bananera"] {
  object-fit: contain;
}

#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;
}

/* ---------- Servicios propios: la foto es el fondo entero ---------- */
/* La sección se sale del ancho de 1100px habitual (ver ".jk-banda" o
   "#newsletter", que hacen lo mismo) para que los paneles vayan de
   lado a lado de verdad. */
#servicios-propios {
  max-width: none;
  padding-top: 0;
  padding-bottom: 0;
}

.servicios-paneles {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* Cada servicio ocupa, como mínimo, una pantalla entera. La foto es el
   fondo de todo el panel (no una columna aparte, para que no parezca
   una tarjeta) y el texto flota encima, sobre un degradado oscuro que
   lo hace legible sea cual sea la foto de debajo. */
.servicio-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}

.servicio-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, transparent 48%, rgba(20, 13, 8, 0.5) 68%, rgba(20, 13, 8, 0.9) 88%);
}

/* Paneles pares: el texto pasa a la izquierda, así que el degradado
   oscuro también cambia de lado. */
.servicio-panel:nth-child(even)::before {
  background: linear-gradient(to left, transparent 0%, transparent 48%, rgba(20, 13, 8, 0.5) 68%, rgba(20, 13, 8, 0.9) 88%);
}

.servicio-panel-texto {
  position: relative;
  z-index: 1;
  width: min(38ch, 38%);
  margin-left: auto;
  padding: 4rem 4rem 4rem 2rem;
}

.servicio-panel:nth-child(even) .servicio-panel-texto {
  margin-left: 0;
  margin-right: auto;
  padding: 4rem 2rem 4rem 4rem;
}

.servicio-panel-numero {
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--acento);
  margin-bottom: 1rem;
}

.servicio-panel-texto h3 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--crema);
  margin-bottom: 1.2rem;
}

.servicio-panel-intro {
  color: rgba(250, 247, 242, 0.9);
  margin-bottom: 2rem;
}

.servicio-panel-incluye {
  list-style: none;
  margin-bottom: 2.2rem;
  display: grid;
  gap: 1.1rem;
}

.servicio-panel-incluye li {
  padding-left: 1.3rem;
  border-left: 2px solid var(--acento);
}

.servicio-panel-incluye strong {
  display: block;
  color: var(--crema);
  margin-bottom: 0.2rem;
}

.servicio-panel-incluye span {
  display: block;
  color: rgba(250, 247, 242, 0.7);
  font-size: 0.95rem;
}

.servicio-panel-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.servicio-panel-mas {
  font-weight: 600;
  color: var(--crema);
  transition: transform 0.2s ease;
  display: inline-block;
}

.servicio-panel-mas:hover {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  .servicio-panel-texto {
    width: 100%;
    padding: 2.5rem 1.5rem;
  }
  /* En una columna, el texto ocupa todo el ancho, así que el degradado
     diagonal (pensado para cuando el texto solo ocupaba un lado) ya no
     basta: se queda bastante zona sin oscurecer y el texto se vuelve
     ilegible encima de la foto. Aquí oscurecemos todo el panel por
     igual, mucho más simple y seguro. */
  .servicio-panel::before,
  .servicio-panel:nth-child(even)::before {
    background: linear-gradient(rgba(20, 13, 8, 0.35), rgba(20, 13, 8, 0.85));
  }
}

/* ---------- 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 {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}

/* Línea que une los pasos de icono a icono — solo tiene sentido
   cuando los 4 caben en una fila (si no, cada uno cae en su propia
   línea y se quita, ver media query de abajo). */
.pasos::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--borde);
  z-index: 0;
  /* La línea se dibuja de izquierda a derecha al entrar en pantalla,
     a la vez que los pasos aparecen en cascada — da la sensación de
     que el proceso avanza de verdad, no es solo decoración fija. */
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s ease 0.1s;
}

.pasos.reveal-visible::before {
  transform: scaleX(1);
}

.pasos li {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Los 4 pasos aparecen en cascada, uno detrás de otro, aprovechando
   que la sección entera ya recibe ".reveal-visible" al entrar en
   pantalla (mismo sistema que el resto de la web, sin JS nuevo). */
.pasos.reveal-visible li {
  opacity: 1;
  transform: translateY(0);
}

.pasos li:nth-child(1) { transition-delay: 0.05s; }
.pasos li:nth-child(2) { transition-delay: 0.18s; }
.pasos li:nth-child(3) { transition-delay: 0.31s; }
.pasos li:nth-child(4) { transition-delay: 0.44s; }

.paso-numero {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--texto-suave);
  margin-bottom: 0.8rem;
  transition: color 0.3s ease;
}

.paso-icono {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: rgba(181, 89, 47, 0.06);
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.paso-icono svg {
  width: 24px;
  height: 24px;
}

.pasos li:hover .paso-numero {
  color: var(--acento);
}

.pasos li:hover .paso-icono {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(181, 89, 47, 0.12);
  transform: translateY(-3px);
}

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

.pasos p {
  color: var(--texto-suave);
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .pasos::before {
    display: none;
  }
}

/* ---------- 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;
  }
}

.form-card-titulo {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

.form-card-subtitulo {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto 2.5rem;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* ---------- Formulario ---------- */
/* Sin caja ni sombra: el formulario se apoya directo en la página,
   como en jaiak.es, en vez de ir metido en una tarjeta aparte. */
.form-card {
  max-width: 680px;
  margin: 0 auto;
}

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

form label {
  display: grid;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Nombre/Email + asterisco en la misma línea: sin este span envolvente,
   el "display:grid" de la etiqueta pone el asterisco en su propia fila,
   debajo del texto, en vez de pegado a él. */
.campo-etiqueta {
  display: inline-flex;
  gap: 0.2rem;
}

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

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

/* El prefijo y el número comparten una sola línea inferior, en vez de
   verse como dos campos separados pegados el uno al otro. */
.telefono-fila {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--borde);
  transition: border-color 0.2s ease;
}

.telefono-fila:focus-within {
  border-bottom-color: var(--acento);
  border-bottom-width: 2px;
}

.telefono-fila select {
  flex: 0 0 auto;
  width: 92px;
  border-bottom: none !important;
}

.telefono-fila input {
  flex: 1;
  min-width: 0;
  border-bottom: none !important;
}

/* Estilo minimalista de línea (sin caja ni fondo), inspirado en el
   formulario de jaiak.es: el campo es solo una línea inferior, no un
   recuadro cerrado. */
form input,
form textarea,
form select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--texto);
  padding: 0.85rem 0.1rem;
  border: none;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  width: 100%;
  transition: border-color 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.1rem center;
  padding-right: 1.4rem;
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-bottom-color: var(--acento);
  border-bottom-width: 2px;
}

/* 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;
  text-transform: none;
  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);
}

/* Botón dinámico: empieza solo con el contorno, y al pasar el ratón
   se ve cómo el cuadrado de color se va formando de izquierda a
   derecha, en vez de cambiar de color de golpe. */
.boton-dinamico {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: transparent;
  color: var(--acento);
  border: 2px solid var(--acento);
  box-shadow: none;
  padding: 0.8rem 1.8rem;
}

.boton-dinamico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.boton-dinamico:hover {
  color: #fff;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.boton-dinamico:hover::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .boton-dinamico::before {
    transition: none;
  }
}

/* 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;
  }
}

/* Solo para lectores de pantalla: el campo de email de la newsletter
   tiene su etiqueta, pero visualmente basta con el placeholder. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ---------- Franja de invitación a contactar ----------
   Banda oscura a toda anchura, como las que usa jaiak.es entre bloques
   de contenido — aquí sirve de invitación a pedir presupuesto, el
   formulario de verdad vive en contacto.html. */
.contacto-teaser {
  max-width: none;
  background: var(--texto);
  color: #fff;
  text-align: center;
  padding: 5.5rem 1.5rem;
}

.contacto-teaser h2 {
  color: #fff;
  margin-bottom: 0.8rem;
}

.contacto-teaser p {
  max-width: 50ch;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Franja "qué ofrecemos": carrusel de tarjetas, inspirado
   en el slider de jaiak.es (tarjeta centrada con las vecinas asomando
   a los lados), pero a menor escala y con fotos reales nuestras. ---------- */
.jk-banda {
  max-width: none;
  background:
    linear-gradient(rgba(20, 13, 8, 0.78), rgba(20, 13, 8, 0.88)),
    url('img/catalogo/barra-mostrador-premium.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 4.5rem 0;
}

.jk-eyebrow {
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  margin-bottom: 0.8rem;
}

.jk-banda h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 auto 2.2rem;
}

.jk-carrusel {
  position: relative;
}

/* La "pista" es scrolleable de verdad (se puede arrastrar con el dedo
   en el móvil) — el centrado y el "asomar" de las vecinas salen solos
   del ancho del contenedor siendo menor que el de la pista entera. */
.jk-pista {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: visible; /* si no, el navegador recorta también en vertical
                          al poner overflow-x, y la foto se corta al ampliarse */
  scroll-snap-type: x mandatory;
  padding: 1.5rem calc(50% - 180px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Las fotos de los extremos se desvanecen en vez de cortarse en seco
     contra el borde del carrusel — da sensación de continuidad. */
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

/* Mientras el ratón está encima, el carrusel se mueve solo (JS) siguiendo
   el cursor — el "scroll-snap" de arriba pelearía con ese movimiento y lo
   reajustaría de vuelta al centro todo el rato, así que se desactiva
   mientras dura el hover. */
.jk-pista.jk-sin-snap {
  scroll-snap-type: none;
}

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

.jk-slide {
  position: relative;
  flex: 0 0 auto;
  width: 360px;
  height: 480px;
  border-radius: var(--radio);
  overflow: hidden;
  scroll-snap-align: center;
  cursor: pointer;
  margin: 0;
  /* --rot-x/--rot-y los mueve el JS al pasar el ratón por encima, para
     un ligero efecto 3D que sigue al cursor (el resto del transform
     — escala — lo sigue poniendo cada estado de abajo, para no pisarse). */
  --rot-x: 0deg;
  --rot-y: 0deg;
  transform: perspective(550px) scale(0.8) rotateX(var(--rot-x)) rotateY(var(--rot-y));
  filter: brightness(0.6) saturate(0.85);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease, margin 0.5s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  forced-color-adjust: none; /* que no borre la foto si tienes alto contraste activado */
  background-size: cover;
  background-position: center;
  background-color: var(--crema-oscura); /* se ve mientras carga la foto */
}

.jk-slide.jk-activa {
  transform: perspective(550px) scale(1) rotateX(var(--rot-x)) rotateY(var(--rot-y));
  filter: brightness(1) saturate(1);
}

/* Al pasar el ratón: esa foto recupera brillo y se amplía un poco más
   (incluso si no es la activa), y las dos vecinas se apartan para
   hacerle sitio (clase puesta por JS). También se inclina un poco
   hacia donde tienes el cursor (ver mousemove en efectos.js). */
.jk-slide:hover {
  transform: perspective(550px) scale(1.05) rotateX(var(--rot-x)) rotateY(var(--rot-y));
  filter: brightness(1) saturate(1);
  z-index: 3;
}

.jk-vecina-izq {
  margin-right: 1.6rem;
}

.jk-vecina-der {
  margin-left: 1.6rem;
}

.jk-info {
  max-width: var(--ancho);
  margin: 0.8rem auto 0;
  padding: 0 1.5rem 0 4.5rem;
  text-align: left;
}

.jk-numero {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: rgba(250, 247, 242, 0.5);
  margin-bottom: 0.8rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.jk-titulo {
  font-family: "Fraunces", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--crema);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.jk-info.jk-info-cambio .jk-titulo {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
}

.jk-info.jk-info-cambio .jk-numero {
  opacity: 0;
  transform: translateX(6px);
}

.jk-flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10; /* por encima de cualquier foto ampliada al hover (esas van a 3) */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 13, 8, 0.3);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.jk-flecha:hover {
  background: var(--acento);
  border-color: var(--acento);
  transform: translateY(-50%) scale(1.08);
}

.jk-flecha-izq {
  left: 1rem;
}

.jk-flecha-der {
  right: 1rem;
}

.jk-puntos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.jk-puntos button {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}

.jk-puntos button.activo {
  width: 22px;
  background: var(--acento);
}

.jk-banda .boton {
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .jk-slide {
    width: 260px;
    height: 347px;
  }
  .jk-pista {
    padding: 0 calc(50% - 130px);
  }
  .jk-flecha {
    display: none; /* en móvil se arrastra con el dedo, no hacen falta */
  }
}

/* ---------- Página de un servicio individual ---------- */
/* La foto de cabecera va en el style="" de cada página (es distinta en
   cada una); esta clase solo pone el degradado y la tipografía encima. */
.servicio-hero {
  max-width: none;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 7rem 1.5rem;
}

.servicio-hero .jk-eyebrow {
  color: rgba(255, 255, 255, 0.65);
}

.servicio-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  max-width: 20ch;
  margin: 0 auto 1rem;
}

.servicio-hero p {
  max-width: 50ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}

.servicio-volver {
  display: inline-block;
  margin-top: 2rem;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  padding-bottom: 2px;
}

.servicio-volver:hover {
  color: var(--acento);
  border-color: var(--acento);
}

/* ---------- Newsletter ---------- */
#newsletter {
  text-align: center;
  background: var(--crema-oscura);
  max-width: none;
}

#newsletter > * {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

#newsletter h3 {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

#newsletter p {
  color: var(--texto-suave);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.form-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* El campo y el botón de enviar se funden en una sola barra, en vez de
   ir como dos elementos sueltos uno al lado del otro. */
.form-newsletter-fila {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.form-newsletter-fila:focus-within {
  border-color: var(--acento);
}

.form-newsletter-fila input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.9rem 1.2rem;
  border: none;
  background: transparent;
}

.form-newsletter-fila input[type="email"]:focus {
  outline: none;
}

.form-newsletter-fila .boton {
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
}

.form-newsletter-fila .boton:hover {
  transform: none;
  box-shadow: none;
}

/* Vive fuera del <form> (es hermano, como .form-estado) para no quedar
   limitado a sus 480px de ancho. El selector con #newsletter es a
   propósito más específico que "#newsletter > *", que si no, ganaría
   y lo dejaría en 480px igualmente. */
#newsletter .newsletter-legal {
  max-width: 900px;
  margin: 1.2rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.62rem;
  line-height: 1.6;
  text-align: justify;
  color: var(--texto);
}

#newsletter .form-estado {
  max-width: 480px;
  margin: 1rem auto 0;
}

/* ---------- Aviso de cookies ----------
   Modal centrado de verdad, con fondo oscurecido detrás: hay que
   elegir una opción (o cerrarlo con la X) para poder seguir, en vez
   de ser un avisito de esquina que se puede ignorar sin más. */
.cookies-fondo {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(20, 13, 8, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cookies-fondo.activo {
  opacity: 1;
  pointer-events: auto;
}

.cookies-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 95;
  width: min(560px, calc(100vw - 2.4rem));
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 30px 70px rgba(20, 13, 8, 0.35);
  padding: 2.2rem 2.4rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookies-banner.activo {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.cookies-cerrar {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color 0.2s ease;
}

.cookies-cerrar:hover {
  color: var(--texto);
}

.cookies-banner p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--texto);
  text-align: left;
  margin: 0 1.8rem 1.8rem 0;
}

.cookies-banner a {
  color: var(--texto);
  text-decoration: underline;
}

.cookies-botones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.8rem;
}

.cookies-botones button {
  font: inherit;
  cursor: pointer;
}

.cookies-rechazar-enlace {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texto);
  text-decoration: underline;
}

.cookies-rechazar-enlace:hover {
  color: var(--acento);
}

#cookies-aceptar {
  background: var(--texto);
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

#cookies-aceptar:hover {
  background: var(--acento);
  transform: translateY(-2px);
}

@media (max-width: 500px) {
  .cookies-banner {
    padding: 1.8rem 1.6rem;
  }
  .cookies-botones {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.9rem;
  }
  .cookies-rechazar-enlace {
    text-align: center;
  }
}

/* ---------- Botón flotante "pedir presupuesto" ---------- */
/* Acompaña en todas las páginas, y lleva directo al formulario de
   contacto (en la portada, aunque estés en otra página). Empieza
   oculto y aparece (clase .is-show, puesta por efectos.js) al hacer
   scroll, en vez de estar desde el primer segundo tapando la foto. */
.fab-cita {
  position: fixed;
  right: 2.4rem;
  bottom: 1.8rem;
  z-index: 96; /* por encima de la barra de cookies, que a veces comparte la esquina inferior */
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--acento), var(--acento-oscuro));
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* "filter: drop-shadow" se descartó: sigue la silueta de TODO lo que
     hay dentro del botón (incluido el globo de texto rectangular, aun
     estando invisible), y por eso salía una sombra cuadrada que se
     extendía hacia un lado. "box-shadow" en cambio solo sigue la forma
     del propio círculo, sin fijarse en los hijos — es la forma segura. */
  box-shadow: 0 10px 20px rgba(148, 72, 37, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: transform 0.3s ease, box-shadow 0.25s ease, background 0.25s ease,
              opacity 0.3s ease, visibility 0.3s ease;
}

.fab-cita.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab-cita:hover {
  background: linear-gradient(155deg, var(--acento-oscuro), var(--acento-oscuro));
  box-shadow: 0 14px 26px rgba(148, 72, 37, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  animation: fab-pulso 0.6s ease;
}

@keyframes fab-pulso {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Brillo del botón: después de varios intentos con un halo que se
   salía del botón (y que por eso podía toparse con el borde de la
   pantalla o con el contenido de detrás, viéndose "cortado" en una
   línea recta), ahora el brillo vive SIEMPRE dentro de la silueta
   circular del propio botón — nunca sobresale, así que no hay forma de
   que nada externo lo recorte. "inset: 0" (no negativo) es la clave. */
.fab-rayos {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 190, 0.55) 0%, rgba(181, 89, 47, 0) 70%);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.fab-cita.is-show .fab-rayos {
  animation: fab-halo 10s ease-in-out 1s infinite;
}

@keyframes fab-halo {
  0%, 76%, 100% { opacity: 0; transform: scale(0.85); }
  88%, 98% { opacity: 1; transform: scale(1); }
}

/* El mensaje que aparece a la vez, flotando a la izquierda del botón. */
.fab-mensaje {
  position: absolute;
  right: calc(100% + 0.9rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--texto);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radio-chico);
  box-shadow: 0 10px 24px rgba(43, 41, 38, 0.2);
  opacity: 0;
  pointer-events: none;
}

.fab-cita.is-show .fab-mensaje {
  animation: fab-mensaje 10s ease-in-out 1s infinite;
}

@keyframes fab-mensaje {
  0%, 76%, 100% { opacity: 0; }
  88%, 98% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-cita .fab-rayos,
  .fab-cita.is-show .fab-mensaje {
    animation: none;
  }
}

.fab-cita svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 500px) {
  .fab-cita {
    width: 64px;
    height: 64px;
    right: 1.4rem;
    bottom: 1.1rem;
    /* Solo en móvil, sin sombra: a pedido del cliente, la bola queda
       plana aquí (en escritorio mantiene la sombra de siempre). */
    box-shadow: none;
  }
  .fab-cita:hover {
    box-shadow: none;
  }
}

/* ---------- Flecha "volver arriba" del texto legal ---------- */
/* Solo en las páginas legales (privacidad, aviso legal): son muy largas
   y sin fotos ni otros puntos de referencia, así que ayuda tener un
   atajo para subir arriba justo al terminar de leer, en vez de tener
   que buscarlo en el pie. Centrada, debajo del último párrafo. */
.flecha-arriba {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 2.6rem auto 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.flecha-arriba:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.flecha-arriba svg {
  width: 18px;
  height: 18px;
}

/* ---------- Aparición suave al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Títulos que aparecen palabra a palabra, al estilo del scroll de
   twobstudio.com, pero con CSS/JS ligero en vez de su librería. */
.reveal-texto .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-texto.reveal-visible .palabra {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-texto .palabra,
  .pasos li,
  .pasos::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fab-cita.is-show {
    animation: none;
  }
}

.zona-mapa {
  position: relative;
}

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

footer p {
  margin-bottom: 0.4rem;
}

.footer-columnas {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  text-align: left;
  margin-bottom: 3rem;
}

.footer-logo {
  height: 1.8rem;
  width: auto;
  margin-bottom: 0.8rem;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
  transition: color 0.2s ease;
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

.footer-social:hover {
  color: var(--acento);
}

.footer-col h4 {
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: 0.9rem;
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer-col a {
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--acento);
}

.footer-abajo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-abajo p {
  margin: 0;
  font-size: 0.85rem;
}

.footer-arriba {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: none;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-arriba:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .footer-columnas {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-columnas {
    grid-template-columns: 1fr;
  }
}

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.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--texto-suave);
  padding: 0.5rem 0.9rem;
  border-radius: 0;
  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;
}

/* Botón para abrir el panel de categorías y fondo oscuro detrás —
   ambos solo existen visualmente en pantallas estrechas. */
/* Pestaña fija con flecha, pegada al borde izquierdo de la pantalla:
   siempre está ahí (no se va al hacer scroll, a diferencia del botón
   de antes), y es lo que se toca para desplegar el panel. Mientras el
   panel está abierto, se esconde deslizando hacia fuera (clase
   "oculta", puesta por JS) para no estorbar. */
.cat-nav-toggle {
  display: none;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 58;
  width: 21px;
  height: 52px;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Semitransparente: se deja ver un poco lo que hay detrás, en vez de
     ser un bloque de color sólido pegado al borde. */
  background: rgba(181, 89, 47, 0.45);
  backdrop-filter: blur(2px);
  border: none;
  border-radius: 0 var(--radio) var(--radio) 0;
  box-shadow: 4px 0 16px rgba(20, 13, 8, 0.2);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
}

.cat-nav-toggle:hover {
  background: rgba(181, 89, 47, 0.85);
}

.cat-nav-toggle.oculta {
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
}

.cat-nav-toggle svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.cat-nav-fondo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 13, 8, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cat-nav-fondo.activo {
  opacity: 1;
  pointer-events: auto;
}

/* En pantallas estrechas no cabe una barra lateral fija: se convierte
   en un panel que vive fuera de la pantalla (a la izquierda) y entra
   deslizando cuando lo pides con el botón de arriba. Se cierra solo si
   tocas fuera, si eliges una categoría o si haces scroll. */
@media (max-width: 860px) {
  .catalogo-layout {
    grid-template-columns: 1fr;
  }
  .cat-nav-toggle {
    display: flex;
  }
  .cat-nav-fondo {
    display: block;
  }
  .cat-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(78vw, 280px);
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: visible;
    background: var(--crema);
    padding: calc(var(--header-h) + 1.5rem) 1.2rem 2rem;
    margin-bottom: 0;
    box-shadow: 16px 0 40px rgba(20, 13, 8, 0.25);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
  }
  .cat-nav.cat-nav-abierto {
    transform: translateX(0);
  }
  .cat-nav button {
    width: 100%;
    white-space: normal;
    text-align: left;
    border-left: 2px solid transparent;
    border-bottom: none;
  }
  .cat-nav button:hover {
    transform: translateX(3px);
    border-left-color: var(--acento);
    border-bottom-color: transparent;
  }
  .cat-nav button.activo {
    border-left-color: var(--acento);
    border-bottom-color: transparent;
  }
}

/* ---------- 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;
}

/* ---------- Resultados del buscador ---------- */
.busqueda-resultados-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.busqueda-resultados-cabecera h2 {
  margin-bottom: 0;
}

#busqueda-limpiar {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

#busqueda-limpiar:hover {
  color: var(--acento);
}

.busqueda-vacia {
  color: var(--texto-suave);
  padding: 1rem;
}

/* 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 ----------
   Etiquetas pequeñas en versalita espaciada, estilo "ficha técnica"
   editorial, en vez de negrita corriente — más fino y cuidado. */
.producto .ficha {
  list-style: none;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  display: grid;
  gap: 0.35rem;
}

.producto .ficha b {
  display: inline-block;
  min-width: 4.2rem;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Texto legal (política de privacidad) ---------- */
/* Cabecera oscura a toda anchura, como una mini-portada para la página legal */
.legal-portada {
  background: var(--texto);
  color: #fff;
  text-align: center;
  padding: 4.5rem 1.5rem;
}

.legal-portada h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  margin-bottom: 0.8rem;
}

.legal-portada p {
  max-width: 55ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.75);
}

/* El texto se queda centrado exactamente igual que antes: se reserva
   el mismo hueco a la derecha que ocupa el menú a la izquierda (220px
   cada uno), así que el texto cae justo en el centro, no desplazado. */
#legal {
  max-width: 1300px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 70ch) 220px;
  justify-content: center;
  gap: 3rem;
  align-items: start;
}

.legal-lateral {
  grid-column: 1;
}

.legal-texto {
  grid-column: 2;
  max-width: 70ch;
  margin: 0 auto;
}

.legal-texto h3 {
  font-size: 1.3rem;
  margin: 2.8rem 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;
}

.legal-lista {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
  padding-left: 0.2rem;
}

.legal-lista li {
  color: var(--texto-suave);
  padding-left: 1rem;
  border-left: 2px solid var(--borde);
}

.legal-portada .legal-fecha {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Menú lateral con las secciones: fijo junto al texto mientras se hace
   scroll, igual que la barra de categorías del catálogo, y se marca
   solo la sección por la que vas (ver efectos.js). En pantallas
   estrechas no cabe al lado, así que pasa a ser una caja normal encima
   del texto. */
.legal-lateral {
  position: sticky;
  top: 6.5rem;
  /* Con 19 apartados la lista entera no cabe siempre en lo que queda
     de pantalla por debajo — sin esto, los últimos (18 y 19) quedaban
     tapados por el borde de la pantalla y solo se veían al llegar casi
     al final del texto. Así, el propio menú tiene scroll interno y se
     puede llegar a todos en cualquier punto de la página. */
  max-height: calc(100vh - 6.5rem - 2rem);
  overflow-y: auto;
  /* Reserva el huequito de la barra de scroll siempre, se necesite o
     no: si no, en listas justo al límite (como la del aviso legal, más
     corta), la barra aparecía y desaparecía sola al pasar el ratón —
     al aparecer, estrechaba el texto, que entonces envolvía distinto y
     cambiaba de alto, lo que a su vez hacía desaparecer la barra otra
     vez, en bucle. */
  scrollbar-gutter: stable;
}

.legal-lateral ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.legal-lateral a {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--texto-suave);
  padding: 0.45rem 0.9rem;
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.legal-lateral a:hover {
  border-left-color: var(--acento);
  color: var(--acento);
  transform: translateX(3px);
}

.legal-lateral a.activo {
  background: var(--crema-oscura);
  border-left-color: var(--acento);
  color: var(--texto);
  font-weight: 600;
}

@media (max-width: 860px) {
  .legal-layout {
    display: block;
  }
  .legal-lateral {
    position: static;
    max-height: none;
    overflow-y: visible;
    background: var(--crema-oscura);
    border-radius: var(--radio-chico);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.6rem;
  }
  .legal-lateral ol {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.6rem;
  }
  .legal-lateral a {
    padding: 0.3rem 0;
    border-left: none;
  }
  .legal-lateral a:hover,
  .legal-lateral a.activo {
    background: none;
    transform: none;
  }
}

@media (max-width: 640px) {
  .legal-lateral ol {
    flex-direction: column;
  }
}

/* ---------- 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: 0.6rem 1rem;
    gap: 0.4rem;
  }
  .logo-lockup img {
    height: 1.7rem;
  }
  .logo-lockup span {
    font-size: 1.2rem;
  }
  .nav-contacto {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .nav-contacto .buscador {
    margin-left: 0;
  }
  header nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 0.9rem;
    font-size: 0.82rem;
  }
  /* Con menos de 16px, el móvil (sobre todo iPhone) hace zoom
     automático en toda la página al tocar el campo — con 16px o más,
     no lo hace. */
  .buscador.abierto .buscador-input {
    font-size: 16px;
  }
  /* El botón "Pedir presupuesto" de la cabecera se quita en móvil: ya
     está el botón flotante de abajo a la derecha para eso, y quitarlo
     de aquí descarga bastante la cabecera (antes se amontonaba todo:
     logo, menú, buscador y este botón, uno debajo de otro). */
  header .boton {
    display: none;
  }
  section {
    padding: 3.5rem 1.2rem;
  }
  section h2 {
    font-size: 2rem;
  }
}