/* ============================================================
   TIPOGRAFÍAS ALOJADAS EN EL PROPIO SERVIDOR
   ------------------------------------------------------------
   Los archivos están en /fonts. No se cargan desde Google, así
   que no se comparte ningún dato del visitante con terceros y
   la web carga antes.

   · Poppins  → TÍTULOS. Es una sans geométrica (círculos puros,
                vértice de la «A» en punta, trazo monolineal), el
                mismo carácter que las letras del logo AGINAGA.
   · Inter    → TEXTO. Sans neutra diseñada para leer en pantalla;
                aguanta mejor los párrafos largos que una
                geométrica.

   Para cambiar cualquiera de las dos en el futuro, basta con
   tocar --font-heading / --font-body en :root (más abajo).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   MUEBLES AGUINAGA · AGINAGA ALTZARIAK
   Hoja de estilos única para todas las páginas.
   Paleta tomada del logo: verde lima, negro y blanco.
   ============================================================ */

:root {
  /* --- Colores de marca (del logo) --- */
  --color-black: #161513;
  --color-black-soft: #2a2926;
  --color-white: #ffffff;
  --color-cream: #f7f6f2;
  --color-lime: #9fe200;
  --color-lime-dark: #6f9f08;   /* verde oscuro: contraste suficiente sobre blanco */
  --color-lime-soft: #eef9d1;
  --color-gray: #5c5b57;
  --color-gray-light: #8b8981;
  --color-border: #e6e4dd;

  /* --- TIPOGRAFÍA -------------------------------------------
     Todo se controla desde aquí: cambiando estas dos familias
     cambia la tipografía de toda la web, sin tocar nada más. */
  --font-heading: "Poppins", "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala de tamaños con clamp(mínimo, fluido, máximo): el título
     crece con la pantalla, pero nunca se desborda en el móvil ni se
     dispara en pantallas grandes. La parte fluida lleva un valor en
     rem para respetar el tamaño de letra del navegador del usuario. */
  --fs-h1:     clamp(2.05rem, 1.35rem + 3.1vw, 3.3rem);    /* H1 del hero: el mayor */
  --fs-h1-int: clamp(1.8rem, 1.4rem + 1.8vw, 2.55rem);     /* H1 de páginas interiores */
  --fs-h2:     clamp(1.5rem, 1.24rem + 1.15vw, 2.05rem);   /* TODOS los H2 de sección */
  --fs-h3:     clamp(1.06rem, 1rem + 0.28vw, 1.22rem);
  --fs-h2-doc: 1.25rem;                                    /* títulos dentro de textos legales */
  --fs-lead:   clamp(1rem, 0.97rem + 0.15vw, 1.08rem);     /* entradillas */

  /* Rasgos tomados del logo: los títulos grandes van algo apretados,
     como el logotipo, y las etiquetas en mayúsculas bien espaciadas,
     como el «ALTZARIAK» de debajo del sillón. */
  --ls-h1: -0.025em;
  --ls-h2: -0.018em;
  --ls-h3: -0.01em;
  --ls-label: 0.14em;
  --lh-title: 1.14;
  --lh-body: 1.65;

  /* --- Layout --- */
  --header-height: 76px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(22, 21, 19, 0.08);
  --shadow-strong: 0 20px 45px rgba(22, 21, 19, 0.18);
  --transition: 0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black-soft);
  background: var(--color-white);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-black);
  line-height: var(--lh-title);
  margin: 0 0 0.5em;
  text-wrap: balance;          /* evita palabras sueltas al final del título */
}
/* Jerarquía: se define una sola vez y vale para toda la web, así los
   H2 de todas las secciones salen iguales sin repetir tamaños. */
h1 { font-size: var(--fs-h1-int); font-weight: 700; letter-spacing: var(--ls-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2);     font-weight: 600; letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3);     font-weight: 600; letter-spacing: var(--ls-h3); }
h4 { font-weight: 600; letter-spacing: var(--ls-h3); }
p { margin: 0 0 1em; color: var(--color-gray); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-lime-dark); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 780px; }

/* ---------- Secciones ---------- */
.section { padding: 76px 0; }
.section-tight { padding: 46px 0; }
.section-alt { background: var(--color-cream); }
.section-head { max-width: 660px; margin: 0 auto 46px; text-align: center; }
.section-lead { color: var(--color-gray); font-size: var(--fs-lead); }
.section-lead a { color: var(--color-lime-dark); font-weight: 600; text-decoration: underline; }
.h-small { font-size: var(--fs-h3); margin-bottom: 0.8em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-lime);
  margin-bottom: 0.7em;
}
.eyebrow-dark { color: var(--color-lime-dark); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.94rem;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition),
              color var(--transition), border-color var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-lime); color: var(--color-black); }
.btn-primary:hover { background: #b3f01a; }
.btn-outline-light { color: var(--color-white); border-color: rgba(255, 255, 255, 0.75); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--color-white); }
.btn-outline-dark { color: var(--color-black); border-color: var(--color-black); }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.btn-whatsapp { background: var(--color-black); color: var(--color-white); padding: 11px 20px; }
.btn-whatsapp:hover { background: var(--color-lime); color: var(--color-black); }
.btn-block { width: 100%; margin-top: 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

/* ============================================================
   CABECERA
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  z-index: 200;
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 6px 22px rgba(22, 21, 19, 0.09); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; height: 100%; }
/* Logo con fondo transparente (img/logo.png) */
.brand-logo { height: 46px; width: auto; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: none; z-index: 210;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 0 auto;
  background: var(--color-black);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(22, 21, 19, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
  z-index: 150;
}
.nav-backdrop.active { opacity: 1; pointer-events: auto; }

.nav-link {
  color: var(--color-black-soft);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.97rem;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 0;
  transition: color var(--transition);
}
.nav-link:hover { color: var(--color-lime-dark); }
.nav-link.activo { color: var(--color-black); font-weight: 600; }

.nav-parent { display: flex; align-items: center; gap: 2px; }
.dropdown-toggle {
  background: none; border: none; padding: 8px 4px;
  color: var(--color-black-soft); display: inline-flex; align-items: center;
}
.chevron { transition: transform var(--transition); }
.has-dropdown.open .chevron { transform: rotate(180deg); }

/* ---- Navegación en escritorio ---- */
@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .nav-list { display: flex; align-items: center; gap: 30px; }

  .nav-link.activo::after {
    content: ""; display: block; position: absolute;
    left: 0; right: 0; bottom: 2px; height: 2px;
    background: var(--color-lime);
  }
  .nav-list > li { position: relative; }

  .has-dropdown { position: relative; }
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    padding: 10px;
    min-width: 235px;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .dropdown-menu::before {
    content: "";
    position: absolute; top: -6px; left: 50%;
    width: 12px; height: 12px;
    background: var(--color-white);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    transform: translateX(-50%) rotate(45deg);
  }
  .dropdown-menu li a {
    display: block; padding: 10px 14px; border-radius: 8px;
    color: var(--color-black-soft); font-size: 0.93rem;
  }
  .dropdown-menu li a:hover { background: var(--color-lime-soft); color: var(--color-black); }
  .dropdown-menu li a[aria-current="page"] {
    background: var(--color-lime-soft); font-weight: 600; color: var(--color-black);
  }

  /* Se abre al pasar el cursor y también con la clase .open (clic/teclado) */
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu,
  .has-dropdown.open .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
}

/* ---- Navegación en móvil ---- */
@media (max-width: 939px) {
  .main-nav {
    position: fixed; top: 0; right: 0;
    height: 100dvh;
    width: min(330px, 84vw);
    background: var(--color-white);
    box-shadow: var(--shadow-strong);
    padding: calc(var(--header-height) + 16px) 24px 30px;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    z-index: 200;
  }
  .main-nav.open { transform: translateX(0); }
  .nav-list { display: flex; flex-direction: column; }
  .nav-list > li { border-bottom: 1px solid var(--color-border); }
  .nav-link { width: 100%; padding: 15px 2px; }
  .nav-parent { justify-content: space-between; }
  .nav-parent .nav-link { flex: 1; }
  .dropdown-toggle { padding: 15px 10px; }

  /* Acordeón dentro del menú hamburguesa */
  .dropdown-menu {
    max-height: 0; overflow: hidden;
    transition: max-height var(--transition);
    padding-left: 12px;
  }
  .has-dropdown.open .dropdown-menu { max-height: 460px; }
  .dropdown-menu li a {
    display: block; padding: 11px 8px;
    color: var(--color-gray); font-size: 0.94rem;
  }
  .dropdown-menu li a[aria-current="page"] { color: var(--color-lime-dark); font-weight: 600; }

  /* El botón de WhatsApp de la barra se oculta en móvil: ya está el
     botón flotante en todas las páginas, y así el hamburguesa pasa a
     ocupar ese hueco de la derecha (space-between con solo 2 elementos:
     logo y hamburguesa). */
  .nav-whatsapp { display: none; }
}

/* ============================================================
   HERO (portada)
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 21, 19, 0.5) 0%, rgba(22, 21, 19, 0.75) 100%);
}
.hero-content { max-width: 700px; padding-top: 50px; padding-bottom: 60px; }
.hero-content h1 { color: var(--color-white); font-size: var(--fs-h1); margin-bottom: 0.4em; }
.hero-subtitle { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-lead); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; }

/* ---------- Cabecera de página interior ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-height) + 62px) 0 62px;
  overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22, 21, 19, 0.62) 0%, rgba(22, 21, 19, 0.78) 100%);
}
.page-hero h1 { color: var(--color-white); margin-bottom: 0.25em; }
.page-hero p { color: rgba(255, 255, 255, 0.88); max-width: 620px; margin: 0; }

/* Cabecera sencilla, sin foto, para las páginas legales */
.page-hero-simple { background: var(--color-black); padding-bottom: 54px; }

.breadcrumb { margin-bottom: 16px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.84rem; }
.breadcrumb li { color: rgba(255, 255, 255, 0.72); }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; }
.breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.breadcrumb a:hover { color: var(--color-lime); }
.breadcrumb [aria-current="page"] { color: var(--color-lime); }

/* ============================================================
   BARRA DE CONFIANZA
   ============================================================ */
.trust-bar { background: var(--color-black); color: rgba(255, 255, 255, 0.85); padding: 18px 0; }
.trust-inner {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  align-items: center; justify-content: center;
  font-size: 0.9rem; text-align: center;
}
.trust-item { display: inline-flex; align-items: center; gap: 9px; }
.trust-item svg { color: var(--color-lime); flex-shrink: 0; }
.trust-item strong { color: var(--color-white); }
.trust-item a:hover { color: var(--color-lime); }
.stars { color: var(--color-lime); letter-spacing: 2px; }

/* ============================================================
   TARJETAS DE CATEGORÍA
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
}
.category-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.category-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-cream); }
.category-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.category-card:hover .category-img img { transform: scale(1.06); }
.category-body { padding: 22px 22px 26px; }
.category-body h3 { margin-bottom: 0.35em; }
.category-body p { font-size: 0.93rem; margin-bottom: 0.9em; }
.category-link { font-family: var(--font-heading); color: var(--color-lime-dark); font-weight: 600; font-size: 0.9rem; }
.category-card:hover .category-link { color: var(--color-black); }

/* ---------- Enlaces rápidos entre categorías ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.9rem; font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
}
.chip:hover { background: var(--color-lime-soft); border-color: var(--color-lime); }

/* ============================================================
   GALERÍA + LIGHTBOX
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.gallery-item {
  padding: 0; border: none; background: none;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; position: relative;
  box-shadow: var(--shadow-soft);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 21, 19, 0) 55%, rgba(22, 21, 19, 0.5) 100%);
  opacity: 0; transition: opacity var(--transition);
}
.gallery-item:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(15, 14, 13, 0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 50px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 500;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: 940px; width: 100%; margin: 0; text-align: center; }
.lightbox-figure img { width: 100%; max-height: 84vh; object-fit: contain; border-radius: 10px; }
.lightbox-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: none; color: var(--color-white);
  font-size: 2.6rem; line-height: 1;
}

/* ============================================================
   ESCAPARATE CRUZADO
   ------------------------------------------------------------
   Dos fotos grandes superpuestas en diagonal, a modo de "collage",
   pensado como apertura de la sección de galería en cada categoría.
   Los <button class="gallery-item ..."> reutilizan el lightbox ya
   existente: al hacer clic se abren igual que en la galería normal.
   ============================================================ */
.showcase-cruzado {
  position: relative;
  height: clamp(360px, 40vw, 560px);
  margin: 10px 0 60px;
}
.showcase-cruzado .gallery-item {
  position: absolute;
  aspect-ratio: auto;
  transition: transform var(--transition), box-shadow var(--transition);
}
.showcase-cruzado .gallery-item:first-child {
  top: 0; left: 0;
  width: 60%; height: 80%;
  transform: rotate(-3deg);
  z-index: 1;
}
.showcase-cruzado .gallery-item:last-child {
  right: 0; bottom: 0;
  width: 50%; height: 65%;
  transform: rotate(3deg);
  z-index: 2;
  border: 7px solid var(--color-white);
}
.showcase-cruzado .gallery-item:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 3;
  box-shadow: var(--shadow-strong);
}

@media (max-width: 899px) {
  .showcase-cruzado {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
  }
  .showcase-cruzado .gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 86%;
  }
  .showcase-cruzado .gallery-item:first-child {
    align-self: flex-start;
    transform: rotate(-3deg);
    margin-bottom: -34px;
  }
  .showcase-cruzado .gallery-item:last-child {
    align-self: flex-end;
    transform: rotate(3deg);
  }
  .showcase-cruzado .gallery-item:hover { transform: rotate(0deg) scale(1.02); }
}

/* ---------- Galería con fotos grandes (sustituye a la rejilla pequeña) ---------- */
.gallery-grande {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.gallery-grande .gallery-item { aspect-ratio: 4 / 3; }
.gallery-grande .gallery-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 639px) {
  .gallery-grande { grid-template-columns: 1fr; }
  .gallery-grande .gallery-item:first-child { aspect-ratio: 4 / 3; }
}

/* ---------- Mosaico: fotos enteras, cada una con su proporción ---------- */
.mosaico { column-count: 1; column-gap: 20px; }
@media (min-width: 580px) { .mosaico { column-count: 2; } }
@media (min-width: 940px) { .mosaico { column-count: 3; } }
.mosaico .gallery-item {
  display: block; width: 100%;
  margin: 0 0 20px;
  break-inside: avoid;
  aspect-ratio: auto;
  cursor: zoom-in;
}
.mosaico .gallery-item img { display: block; width: 100%; height: auto; }

/* ---------- Fichas de producto (Descanso): sin recortar, para leer los datos ---------- */
.hojas-producto { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .hojas-producto { grid-template-columns: 1fr 1fr; } }
.hojas-producto .gallery-item {
  aspect-ratio: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 16px;
  cursor: zoom-in;
}
.hojas-producto .gallery-item img { position: static; width: 100%; height: auto; object-fit: contain; border-radius: 6px; }
.hojas-producto .gallery-item::after { display: none; }

/* ============================================================
   REJILLAS DE CONTENIDO
   ============================================================ */
.split-grid { display: grid; grid-template-columns: 1fr; gap: 42px; align-items: start; }
@media (min-width: 940px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split-grid-wide { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.section-alt .feature-card { background: var(--color-white); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-lime-soft); color: var(--color-lime-dark);
  margin-bottom: 15px;
}
.feature-card h3 { margin-bottom: 0.35em; }
.feature-card p { font-size: 0.92rem; margin: 0; }

/* ---------- Tarjetas de servicio (portada) ---------- */
a.feature-card { display: block; transition: transform var(--transition), box-shadow var(--transition); }
a.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.feature-card.destacada { border-color: var(--color-lime); border-width: 2px; }
.feature-card .category-link { display: inline-block; margin-top: 12px; }

.badge {
  display: inline-block;
  margin: 0 0 10px 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  color: var(--color-gray);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge-fuerte { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-black); }

/* ---------- Página de servicios ---------- */
.servicios-lista { display: flex; flex-direction: column; gap: 26px; }
.servicio {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 34px;
  scroll-margin-top: calc(var(--header-height) + 20px);
}
.servicio h2 { margin-bottom: 0.4em; }
.servicio .feature-icon { margin-bottom: 12px; }
.servicio .check-list { margin-top: 18px; }
@media (min-width: 760px) {
  .servicio .check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
}

/* ---------- Lista con check ---------- */
.check-list li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-gray);
  font-size: 0.95rem;
}
.check-list li::before {
  content: "";
  position: absolute; left: 4px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-lime);
}

/* ---------- Pasos numerados ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.steps li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-lime); color: var(--color-black);
  font-family: var(--font-heading); font-weight: 700; margin-bottom: 14px;
}
.steps h3 { margin-bottom: 0.3em; }
.steps p { font-size: 0.92rem; margin: 0; }

/* ---------- Lista de información de contacto ---------- */
.info-list { margin-bottom: 28px; }
.info-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-gray); font-size: 0.95rem;
}
.info-list svg { color: var(--color-lime-dark); flex-shrink: 0; margin-top: 3px; }
.info-list strong { color: var(--color-black); font-weight: 600; }
.info-list a:hover { color: var(--color-lime-dark); }

/* ---------- Testimonios ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 24px;
}
.testimonial-card {
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.section-alt .testimonial-card { background: var(--color-white); }
.testimonial-card .stars { display: block; margin-bottom: 12px; font-size: 1.05rem; }
.testimonial-card p { color: var(--color-black-soft); font-size: var(--fs-lead); }
.testimonial-card footer { color: var(--color-lime-dark); font-weight: 600; font-size: 0.9rem; }

/* ---------- Horario ---------- */
.hours-table { border-collapse: collapse; width: 100%; margin: 8px 0 22px; }
.hours-table caption {
  text-align: left; font-weight: 600; color: var(--color-black);
  padding-bottom: 10px; font-size: 0.95rem;
}
.hours-table th, .hours-table td {
  text-align: left; padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.93rem; font-weight: 400;
}
.hours-table th { color: var(--color-black); font-weight: 600; padding-right: 16px; white-space: nowrap; }
.hours-table td { color: var(--color-gray); text-align: right; }
.hours-table td.cerrado { color: var(--color-gray-light); }
.hours-table tr.hoy th, .hours-table tr.hoy td { color: var(--color-lime-dark); font-weight: 600; }

/* ---------- Mapa ---------- */
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--color-cream);
}
.map-wrap.ratio-4-3 { aspect-ratio: 4 / 3; }
.map-wrap.ratio-square { aspect-ratio: 1 / 1; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note { font-size: 0.82rem; color: var(--color-gray-light); margin-top: 12px; }

/* ============================================================
   FORMULARIO
   ============================================================ */
.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 580px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-field label { font-size: 0.87rem; font-weight: 600; margin-bottom: 6px; color: var(--color-black-soft); }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-black-soft);
  transition: border-color var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--color-lime-dark);
}
.form-field textarea { resize: vertical; }
.opcional { color: var(--color-gray-light); font-weight: 400; text-transform: none; }
/* Rojo apagado, que avisa sin desentonar con los tonos cálidos de la paleta */
.error-msg { display: none; color: #b3261e; font-size: 0.82rem; margin-top: 5px; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: #b3261e; }
.form-field.invalid .error-msg { display: block; }
.checkbox-field {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.87rem; color: var(--color-gray); margin-bottom: 6px;
}
.checkbox-field input { margin-top: 3px; accent-color: var(--color-lime-dark); width: 17px; height: 17px; }
.checkbox-field.invalid + .error-msg { display: block; margin-bottom: 10px; }
.form-success {
  display: none; margin-top: 16px; padding: 13px 16px;
  border-radius: 10px; background: var(--color-lime-soft);
  color: var(--color-black-soft); font-size: 0.92rem;
}
.form-success.visible { display: block; }

/* ============================================================
   BANDA DE LLAMADA A LA ACCIÓN
   ============================================================ */
.cta-band { background: var(--color-black); color: var(--color-white); padding: 68px 0; text-align: center; }
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255, 255, 255, 0.8); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

/* ============================================================
   PIE
   ============================================================ */
.site-footer { background: var(--color-black); color: rgba(255, 255, 255, 0.72); padding-top: 60px; }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 34px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
/* Logo en versión clara (img/logo-blanco.png), sin recuadro blanco */
.footer-logo { height: 54px; width: auto; margin-bottom: 16px; }
.footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.89rem; }
.footer-rating { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.85rem; }

.footer-col h2 {
  color: var(--color-lime);
  font-family: var(--font-heading);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  margin-bottom: 15px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }
.footer-col a:hover { color: var(--color-lime); }
.footer-col address { font-style: normal; font-size: 0.9rem; line-height: 1.8; color: rgba(255, 255, 255, 0.72); }
.footer-hours-mini { font-size: 0.84rem; color: rgba(255, 255, 255, 0.55); margin-top: 14px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 22px;
  font-size: 0.84rem; color: rgba(255, 255, 255, 0.5);
}
.footer-bottom p { margin: 0; color: inherit; }
.footer-bottom a { text-decoration: underline; }
.footer-bottom a:hover { color: var(--color-lime); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal li { display: flex; align-items: center; gap: 20px; }
.footer-legal li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.whatsapp-float {
  position: fixed; bottom: 22px; right: 22px;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-lime); color: var(--color-black);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-strong);
  z-index: 300;
  transition: transform var(--transition), background var(--transition);
}
.whatsapp-float:hover { transform: scale(1.08); background: #b3f01a; }

/* ============================================================
   MAPA CON CONSENTIMIENTO
   ------------------------------------------------------------
   El mapa de Google no se carga hasta que el visitante lo acepta,
   porque Google instala cookies propias al cargarlo.
   ============================================================ */
.map-consent {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: center;
  background: var(--color-cream);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}
.map-consent svg { color: var(--color-lime-dark); }
.map-consent p { font-size: 0.88rem; margin: 0; max-width: 340px; }
.map-consent .btn { padding: 11px 22px; font-size: 0.88rem; }
.map-consent a.enlace-simple { color: var(--color-lime-dark); text-decoration: underline; font-size: 0.82rem; }

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 940px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 24px;
  z-index: 600;
  display: none;
}
.cookie-banner.visible { display: block; }
/* Excepción intencionada: es un diálogo de interfaz, no un título de sección */
.cookie-banner h2 { font-size: 1.1rem; margin-bottom: 0.4em; }
.cookie-banner p { font-size: 0.88rem; margin-bottom: 1em; }
.cookie-banner a { color: var(--color-lime-dark); text-decoration: underline; }
.cookie-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-acciones .btn { padding: 12px 22px; font-size: 0.88rem; flex: 1 1 auto; min-width: 150px; }
.btn-texto {
  background: none; border: none;
  color: var(--color-gray);
  font-size: 0.88rem; font-weight: 600;
  text-decoration: underline;
  padding: 12px 10px;
}
.btn-texto:hover { color: var(--color-black); }

/* Panel de configuración */
.cookie-panel { display: none; margin-top: 20px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.cookie-panel.visible { display: block; }
.cookie-grupo {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.cookie-grupo:last-of-type { border-bottom: none; }
.cookie-grupo h3 { font-size: 0.95rem; margin-bottom: 0.2em; }
.cookie-grupo p { font-size: 0.83rem; margin: 0; }
.cookie-grupo input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--color-lime-dark); }
.cookie-grupo input:disabled { opacity: 0.55; }
.cookie-fijada { font-size: 0.76rem; color: var(--color-gray-light); white-space: nowrap; margin-top: 5px; }

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */
.legal { font-size: 0.95rem; }
.legal h2 { font-size: var(--fs-h2-doc); margin-top: 1.9em; }
/* Excepción intencionada: en un documento legal denso, los títulos van a
   tamaño de documento y no de sección, para no romper la lectura. */
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--color-gray); }
.legal ul { margin: 0 0 1.2em; }
.legal ul li { position: relative; padding: 5px 0 5px 22px; }
.legal ul li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-lime);
}
.legal a { color: var(--color-lime-dark); text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 0.87rem; }
.legal th, .legal td {
  text-align: left; padding: 11px 12px;
  border: 1px solid var(--color-border); vertical-align: top;
}
.legal th { background: var(--color-cream); color: var(--color-black); font-weight: 600; }
.tabla-scroll { overflow-x: auto; }
.aviso-rellenar {
  background: var(--color-lime-soft);
  border-left: 4px solid var(--color-lime);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 26px;
  font-size: 0.88rem;
}
.aviso-rellenar p { color: var(--color-black-soft); margin: 0; }
.legal-fecha { font-size: 0.84rem; color: var(--color-gray-light); margin-top: 2.5em; }

/* ============================================================
   ANIMACIONES AL HACER SCROLL
   ============================================================ */
.fade-in-up { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-up.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in-up { opacity: 1; transform: none; transition: none; }
  .btn:hover, .category-card:hover, .whatsapp-float:hover { transform: none; }
}

/* ============================================================
   PÁGINA 404
   ============================================================ */
.error-404 { padding-top: calc(var(--header-height) + 70px); padding-bottom: 80px; text-align: center; }
.error-num {
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-lime-soft);
  -webkit-text-stroke: 2px var(--color-lime);
  margin: 0 0 0.1em;
}
.error-404 h1 { font-size: var(--fs-h1-int); }
.error-acciones { justify-content: center; margin-top: 28px; margin-bottom: 56px; }
.error-subtitulo { color: var(--color-black); }
.error-404 .chip-row { justify-content: center; margin-bottom: 56px; }
.error-ayuda {
  border-top: 1px solid var(--color-border);
  padding-top: 32px;
  max-width: 460px;
  margin: 0 auto;
}
.error-ayuda h2 { margin-bottom: 0.5em; }
.error-ayuda p { margin: 0; }
.error-ayuda a { color: var(--color-lime-dark); font-weight: 600; text-decoration: underline; }

/* ---------- Impresión ---------- */
@media print {
  .site-header, .whatsapp-float, .nav-backdrop, .cta-band, .page-hero-bg { display: none !important; }
  body { color: #000; }
}