/* =============================================================================
   SOYTHEME — Federico Giner
   Design System v1.0
   Fuentes: Reckless Neue (SemiBold) + TWK Lausanne (400, 800)
   ============================================================================= */

/* =============================================================================
   1. Custom Properties (Design Tokens)
   ============================================================================= */
:root {
  /* Colores */
  --fg-primary:     #003366;
  --fg-accent:      #d98c47;
  --fg-white:       #ffffff;
  --fg-black:       #000000;
  --fg-muted:       #616161;
  --fg-placeholder: #919191;
  --fg-card-bg:     rgba(210, 204, 198, 0.2);

  /* Tipografía — nombres según UseAnyFont del servidor */
  --font-heading: 'recklessneue', Georgia, 'Times New Roman', serif;
  --font-body:    'lausanne', 'Helvetica Neue', Arial, sans-serif;
  --font-body-bold: 'lausanne-bold', 'Helvetica Neue', Arial, sans-serif;
  --font-body-italic: 'lausanne-italic', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Tamaños */
  --fs-hero:   70px;
  --fs-h2:     55px;
  --fs-h3:     32px;
  --fs-lg:     18px;
  --fs-base:   16px;
  --fs-sm:     14px;

  /* Line-heights */
  --lh-hero:  76px;
  --lh-h2:    64px;
  --lh-h3:    80px;
  --lh-lg:    24px;
  --lh-base:  22px;

  /* Espaciado */
  --s-section: 60px;
  --s-gap:     20px;
  --s-card:    12px;

  /* Layout */
  --max-full:   1920px;
  --max-wide:   1560px;
  --max-normal: 1296px;
  --navbar-h:   86px;
  --navbar-px:  86px;
  --footer-px:  179px;

  /* Radios */
  --r-pill:  115px;
  --r-card:  17px;
  --r-input: 5px;

  /* Transiciones */
  --ease: 0.3s ease;
}

/* =============================================================================
   2. @font-face (descomenta cuando tengas los archivos en /assets/fonts/)
   =============================================================================
@font-face {
  font-family: 'TWK Lausanne';
  src: url('../fonts/TWKLausanne-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('../fonts/TWKLausanne-400Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('../fonts/TWKLausanne-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: url('../fonts/RecklessNeue-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

/* =============================================================================
   3. Reset y Base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Clase estándar de WordPress para texto solo de lectores de pantalla. La
   emite el core sin que podamos evitarlo: el <h2>"Paginación de entradas" de
   the_posts_pagination(), las etiquetas de los formularios de búsqueda, etc.
   El tema tiene que definirla; en dev venía por casualidad de wc-blocks.css y
   en producción no se carga, así que el título salía a la vista.
   No se usa display:none a propósito: el texto debe seguir llegando a los
   lectores de pantalla, solo se oculta visualmente. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-wrap: normal !important;
}

/* Al tabular hasta un enlace de salto sí debe verse. */
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 15px 23px 14px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--fg-white);
  color: var(--fg-black);
  font-size: var(--fs-base);
  line-height: normal;
  text-decoration: none;
  z-index: 100000;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
  background: var(--fg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; }
input, textarea, select { font: inherit; }

/* =============================================================================
   4. Tipografía global
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--fg-black);
}

/* =============================================================================
   5. Utilidades
   ============================================================================= */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 15px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--ease);
  border: 2px solid transparent;
}
.btn:hover { opacity: 0.82; }

.btn--primary       { background: var(--fg-primary); color: var(--fg-white); border-color: var(--fg-primary); }
.btn--white         { background: var(--fg-white);   color: var(--fg-black); border-color: var(--fg-white); }
.btn--outline-white { background: transparent;       color: var(--fg-white); border-color: var(--fg-white); }
.btn--lg            { font-size: var(--fs-lg); }

/* =============================================================================
   6. Header / Navbar
   ============================================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--fg-white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* Compensar header fijo en páginas sin banner hero */
body:not(.home) #site-content,
body:not(.home) .site-content {
  padding-top: var(--navbar-h);
}
/* Homepage: el hero queda bajo el header transparente sin necesidad de margen
   negativo, porque .site-header es position:fixed y ya flota por encima (no hay
   espaciador que compensar). El `margin-top: -86px` que había aquí no "subía"
   el hero: empujaba sus primeros 86px fuera de la pantalla, donde no se podían
   ver. Con banners cuya imagen lleva texto en la parte alta, eso lo recortaba. */
body.home .site-content {
  margin-top: 0;
}
/* Si el banner principal está oculto, lo primero de la home quedaría debajo de
   la cabecera fija: se compensa igual que en el resto de páginas. */
body.home .site-content--no-hero {
  padding-top: var(--navbar-h);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-h);
  max-width: var(--max-full);
  margin: 0 auto;
  padding: 9px var(--navbar-px);
}

/* Logo */
.navbar__logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo img,
.navbar__logo .custom-logo { width: 100px; height: 68px; object-fit: contain; }

/* Nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.navbar__links > li > a {
  display: block;
  padding: 6px 12px;
  font-family: var(--font-body-bold);
  font-weight: normal;
  font-size: var(--fs-base);
  color: var(--fg-black);
  white-space: nowrap;
  transition: opacity var(--ease);
}
.navbar__links a {
  font-family: var(--font-body-bold);
  font-weight: normal;
  font-size: var(--fs-base);
  color: var(--fg-black);
  white-space: nowrap;
  transition: opacity var(--ease);
}
.navbar__links a:hover { opacity: 0.65; }
.navbar__links .current-menu-item > a,
.navbar__links .current_page_item > a { border-bottom: 2px solid var(--fg-black); }

/* Icons area */
.navbar__icons {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.navbar__language {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--fg-black);
  cursor: pointer;
}
.navbar__language-current {
  display: flex;
  align-items: center;
  gap: 3px;
}
.navbar__language-current svg { width: 10px; height: 6px; transition: transform var(--ease); }
.navbar__language--has-dropdown:hover .navbar__language-current svg,
.navbar__language--has-dropdown:focus-within .navbar__language-current svg { transform: rotate(180deg); }

.navbar__language-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--fg-white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 12px 0 4px; /* padding-top cubre el hueco visual sin romper el hover */
  min-width: 56px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 200;
}
.navbar__language--has-dropdown:hover .navbar__language-dropdown,
.navbar__language--has-dropdown:focus-within .navbar__language-dropdown { display: block; }
.navbar__language-dropdown a {
  display: block;
  padding: 6px 16px;
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.navbar__language-dropdown a:hover { background: rgba(0,0,0,0.05); }
.navbar__language svg { width: 10px; height: 6px; }

/* Ocultar selector de idioma WPML del menú principal */
.navbar__links li.wpml-ls-item { display: none !important; }

.navbar__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--fg-black);
  transition: opacity var(--ease);
}
.navbar__icon:hover { opacity: 0.65; }
.navbar__icon svg   { width: 20px; height: 20px; fill: currentColor; }

.navbar__cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--fg-primary);
  color: var(--fg-white);
  font-size: 9px;
  font-weight: 700;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar__cart-count--empty { display: none; }

/* Dropdown submenus (desktop) */
.navbar__links .menu-item-has-children {
  position: relative;
}
.navbar__links .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.navbar__links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform var(--ease);
}
.navbar__links .menu-item-has-children:hover > a::after,
.navbar__links .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}
.navbar__links .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--fg-white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  list-style: none;
  padding: 10px 0 8px; /* padding-top cubre el gap sin crear zona muerta */
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.navbar__links .menu-item-has-children:hover > .sub-menu,
.navbar__links .menu-item-has-children:focus-within > .sub-menu,
.navbar__links .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Third-level flyout: opens to the right of the second-level item */
.navbar__links .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}
.navbar__links .sub-menu li { display: block; position: relative; }
/* Second-level items that have children: push arrow to the far right */
.navbar__links .sub-menu .menu-item-has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.navbar__links .sub-menu a {
  display: block;
  padding: 9px 20px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  color: var(--fg-black);
  transition: background 0.15s ease;
  opacity: 1;
}
.navbar__links .sub-menu a:hover { background: rgba(0, 51, 102, 0.06); }

/* Mobile toggle */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 2px;
}
.navbar__toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-primary);
  transition: all var(--ease);
}

/* Mobile menu */
.navbar__mobile {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--navbar-h);
  background: var(--fg-white);
  z-index: 999;
  flex-direction: column;
  padding: 30px var(--navbar-px);
  gap: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
}
.navbar__mobile.is-open { display: flex; }
.navbar__mobile > li { border-bottom: 1px solid rgba(0, 51, 102, 0.1); }
.navbar__mobile > li > a {
  font-family: var(--font-body-bold);
  font-weight: normal;
  font-size: 20px;
  color: var(--fg-primary);
  padding: 14px 0;
  display: block;
}
.navbar__mobile .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar__mobile .submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--fg-primary);
  font-size: 20px;
  line-height: 1;
  transition: transform var(--ease);
  flex-shrink: 0;
}
.navbar__mobile .menu-item-has-children.is-open > a > .submenu-toggle {
  transform: rotate(180deg);
}
.navbar__mobile .sub-menu {
  list-style: none;
  padding: 0 0 8px 16px;
  display: none;
}
.navbar__mobile .sub-menu .sub-menu {
  padding-left: 12px;
}
.navbar__mobile .menu-item-has-children.is-open > .sub-menu { display: block; }
.navbar__mobile .sub-menu a {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-primary);
  padding: 8px 0;
  display: block;
  opacity: 0.85;
}
.navbar__mobile .sub-menu a:hover { opacity: 1; }

/* =============================================================================
   7. Hero
   ============================================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 730px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Overlay de los banners: cubre el banner y coloca el bloque de texto+botón
   en cualquiera de las 9 combinaciones (izq/centro/dcha x arriba/medio/abajo)
   con justify-content y align-items. Se elige desde el Personalizador.
   El padding hace de margen de seguridad y sustituye al antiguo left/bottom. */
/* Banners con imagen: la imagen NO se recorta. Se escala al 100% del ancho y
   es ella la que marca el alto de la sección, en cualquier resolución. Antes
   tenían alto fijo (730/480px) con object-fit: cover, así que al estrechar la
   ventana se comían los laterales y partían el texto incrustado del diseño.
   Los banners SIN imagen conservan el alto fijo, porque su contenido va en un
   overlay absoluto y la sección se colapsaría a cero.
   La doble clase es intencionada: necesita más especificidad que las reglas
   `.hero, .home-banner { height: ... }` de los breakpoints de abajo. */
.hero.hero--has-image,
.home-banner.home-banner--has-image { height: auto; }
.hero--has-image > picture,
.home-banner--has-image > picture { display: block; }
.hero--has-image .hero__bg,
.home-banner--has-image .home-banner__bg {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 70px var(--navbar-px);
  pointer-events: none;
}
.banner-overlay > * { pointer-events: auto; }

/* Banner clicable entero: solo se pinta cuando el banner NO tiene botón y sí
   tiene URL. Va por encima del overlay para que el clic funcione también sobre
   el título, que tiene pointer-events: auto. */
.banner-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.banner-overlay--h-left   { justify-content: flex-start; }
.banner-overlay--h-center { justify-content: center; }
.banner-overlay--h-right  { justify-content: flex-end; }
.banner-overlay--v-top    { align-items: flex-start; }
.banner-overlay--v-middle { align-items: center; }
.banner-overlay--v-bottom { align-items: flex-end; }

/* El texto acompaña a la alineación horizontal */
.banner-overlay--h-center .hero__content,
.banner-overlay--h-center .home-banner__content { align-items: center; text-align: center; }
.banner-overlay--h-right .hero__content,
.banner-overlay--h-right .home-banner__content  { align-items: flex-end; text-align: right; }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  max-width: 461px;
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  color: var(--fg-white);
}

/* ── Banner intermedio de la home (Personalizar → Banner intermedio) ──
   Mismo aspecto que el hero, pero con clase propia: el hero arrastra el
   margin-top negativo que lo desliza bajo la cabecera transparente, y eso
   no debe aplicarse a un banner que va en medio de la página. */
.home-banner {
  position: relative;
  width: 100%;
  height: 730px;
  overflow: hidden;
}
.home-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  max-width: 461px;
}
.home-banner__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  color: var(--fg-white);
}

/* =============================================================================
   8. Categorías / Products Grid (home)
   ============================================================================= */
/* ── Home Category Carousel ── */
.home-carousel {
  padding: var(--s-section) 0;
  overflow: hidden;
}
.home-carousel__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--footer-px);
}
.home-carousel__track-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.home-carousel__track {
  display: flex;
  width: 100%;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
/* El aspecto lo comparte con .projects-carousel__arrow, en una sola regla más
   abajo, para que los dos carruseles no se descuadren al tocar uno. */
.home-carousel__arrow { padding: 0; }
.home-carousel__arrow svg { pointer-events: none; display: block; }
.home-carousel .category-card { flex: 0 0 calc(25% - 15px); width: calc(25% - 15px); }

.category-card {
  position: relative;
  width: 375px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--ease);
}
.category-card:hover { transform: translateY(-4px); }

.category-card__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 15px;
  width: 100%;
  height: calc(100% - 15px);
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.5s ease;
}
.category-card:hover .category-card__img { transform: scale(1.04); }

.category-card__name {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--fg-black);
}

/* =============================================================================
   9. Secciones de Contenido (Ergonomía, Calidad)
   ============================================================================= */
.content-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-section) 0;
  max-width: var(--max-wide);
  margin: 0 auto;
}
.content-split--reverse { flex-direction: row-reverse; }

.content-split__text {
  display: flex;
  flex-direction: column;
  gap: 82px;
  padding: 0 133px;
  flex: 0 0 768px;
  max-width: 768px;
}
.content-split__desc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content-split__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.content-split__body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
}
.content-split__img {
  flex: 0 0 770px;
  width: 770px;
  height: 656px;
  object-fit: cover;
}

/* =============================================================================
   10. Sección Proyectos
   ============================================================================= */
.projects-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: var(--s-section) 0;
  width: 100%;
  overflow: hidden;
}
.projects-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 1100px;
  padding: 0 var(--footer-px);
}
.projects-section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.projects-section__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Projects Carousel */
.projects-carousel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--footer-px);
  box-sizing: border-box;
}
.projects-carousel__track-wrap {
  flex: 1;
  overflow: hidden;
}
.projects-carousel__track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
}
.projects-carousel .project-card {
  flex: none;
  width: calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.project-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.project-card__img-wrap--empty {
  background: var(--fg-muted);
}
.projects-carousel .project-card__img-wrap img,
.projects-carousel .project-card .project-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.projects-carousel .project-card:hover .project-card__img-wrap img,
.projects-carousel .project-card:hover .project-card__img {
  transform: scale(1.04);
}
.project-card__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-black);
}
.projects-carousel__arrow,
.home-carousel__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  color: var(--fg-black);
}
.projects-carousel__arrow:hover,
.home-carousel__arrow:hover { background: var(--fg-black); color: #fff; }
.projects-carousel__arrow:disabled,
.home-carousel__arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Legacy grid (fallback si se usa en otro sitio) */
.projects-grid {
  display: flex;
  gap: var(--s-gap);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================================================
   11. Sección Blog
   ============================================================================= */
.blog-section {
  display: flex;
  gap: var(--s-gap);
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-section) var(--s-gap);
  flex-wrap: wrap;
}

.blog-promo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 375px;
  height: 375px;
  background: var(--fg-accent);
  border-radius: var(--r-card);
  overflow: hidden;
  flex-shrink: 0;
  padding: 28px;
  box-sizing: border-box;
  gap: 28px;
}
.blog-promo__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--fg-white);
}
.blog-promo__btn { flex-shrink: 0; align-self: flex-start; }

.blog-article {
  display: flex;
  flex-direction: column;
  gap: var(--s-card);
  width: 375px;
  flex-shrink: 0;
}
.blog-article__img {
  width: 375px;
  height: 286px;
  object-fit: cover;
}
.blog-article__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}
.blog-article__meta { display: none; }

/* =============================================================================
   12. Sección Historia
   ============================================================================= */
.history-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-section) 0;
  max-width: var(--max-normal);
  margin: 0 auto;
  gap: 40px;
}
.history-section__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 499px;
  flex-shrink: 0;
}
.history-section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.history-section__imgs {
  position: relative;
  width: 651px;
  height: 617px;
  flex-shrink: 0;
}
.history-section__img {
  position: absolute;
  width: 397px;
  height: 397px;
  object-fit: cover;
}
.history-section__img:first-child { top: 0;    left: 0;   }
.history-section__img:last-child  { bottom: 0; right: 0;  }

/* =============================================================================
   13. Footer
   ============================================================================= */
.site-footer {
  background: var(--fg-primary);
  color: var(--fg-white);
  padding: var(--s-section) var(--footer-px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Columnas de navegación */
.footer-nav-cols {
  display: flex;
  gap: 166px;
  flex-shrink: 0;
}
.footer-col { display: flex; flex-direction: column; gap: 15px; }
.footer-col__heading {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  text-align: left;
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-white);
  font-weight: 400;
}
.footer-col__icon { display: none; }
.footer-col__list { display: flex; flex-direction: column; gap: 3px; }
.footer-col__list li,
.footer-col__list a {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-white);
  transition: opacity var(--ease);
}
.footer-col__list a:hover { opacity: 0.65; }

/* Contacto */
.footer-contact { display: flex; flex-direction: column; gap: 15px; min-width: 371px; }
.footer-contact__heading {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  text-align: left;
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--fs-lg);
  color: var(--fg-white);
  font-weight: 400;
}
.footer-contact__items  { display: flex; flex-direction: column; gap: 12px; }
.footer-contact__item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-white);
}
.footer-contact__item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; fill: var(--fg-white); }

/* Brand + Newsletter */
.footer-brand { display: flex; flex-direction: column; gap: 36px; align-items: flex-end; width: 506px; flex-shrink: 0; }
.footer-brand__logo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 378 / 223;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.footer-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-newsletter { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.footer-newsletter__text { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-white); }
.footer-newsletter__form {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.footer-newsletter__input {
  flex: 1;
  background: var(--fg-white);
  border: none;
  border-radius: var(--r-input);
  padding: 11px 10px;
  font-size: var(--fs-base);
  color: var(--fg-black);
  outline: none;
  min-width: 0;
}
.footer-newsletter__input::placeholder { color: var(--fg-placeholder); }
.footer-newsletter__btn {
  font-size: var(--fs-lg);
  padding: 17px 15px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Social */
.footer-social {
  display: flex;
  gap: var(--s-gap);
  justify-content: center;
  width: 100%;
  align-self: center;
}
.footer-social a {
  display: flex;
  width: 40px;
  height: 40px;
  transition: opacity var(--ease);
}
.footer-social a:hover { opacity: 0.65; }
.footer-social svg { width: 40px; height: 40px; fill: var(--fg-white); }

/* Footer bottom — links legales */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--footer-px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-legal {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a,
.footer-credit {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--ease);
}
.footer-legal a:hover,
.footer-credit:hover { color: var(--fg-white); }

/* =============================================================================
   14. WooCommerce
   ============================================================================= */

/* Generic WooCommerce page container (cart/checkout use overrides in 14b) */
.woocommerce-page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-shop):not(.tax-product_cat):not(.tax-product_tag) .woocommerce {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--s-section) var(--footer-px);
  box-sizing: border-box;
}

/* =============================================================================
   14a. Shop / Product Archive
   ============================================================================= */

/* WooCommerce outputs #primary.content-area > #main.site-main for shop/archives */
.woocommerce-shop #primary.content-area,
.tax-product_cat #primary.content-area,
.tax-product_tag #primary.content-area {
  float: none;
  width: 100%;
}

.woocommerce-shop #main.site-main,
.tax-product_cat #main.site-main,
.tax-product_tag #main.site-main {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 60px var(--footer-px) 80px;
  box-sizing: border-box;
}

/* Hide unused WC sidebar */
#sidebar[role="complementary"] { display: none; }

/* Shop title */
.woocommerce-products-header {
  margin-bottom: 40px;
}

.woocommerce-products-header__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  color: var(--fg-black);
  margin: 0;
}

/* Toolbar: result count (left) + ordering select (right) */
.woocommerce-result-count {
  float: left;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
  line-height: 44px;
}

.woocommerce-ordering {
  float: right;
  margin: 0 0 24px;
}

.woocommerce-ordering select.orderby {
  border: 1px solid #d0c9c2 !important;
  border-radius: 8px;
  padding: 11px 36px 11px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-black);
  background-color: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23616161' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* Product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  clear: both;
  float: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

/* Product card */
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}

/* Product image */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: rgba(210,204,198,0.18);
  flex-shrink: 0;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 24px;
  padding: 16px 16px 8px;
  color: var(--fg-black);
  margin: 0;
  flex: 1;
}

/* Price — hidden (all products show 0.00€) */
.woocommerce ul.products li.product .price {
  display: none;
}

/* "Seleccionar opciones" button */
.woocommerce ul.products li.product .button {
  display: block;
  margin: 8px 16px 16px;
  padding: 12px 20px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  border: none !important;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s !important;
}

.woocommerce ul.products li.product .button:hover {
  background: #333 !important;
  opacity: 1 !important;
}

/* Pagination */
.woocommerce-pagination {
  margin-top: 48px;
  clear: both;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-pagination ul.page-numbers li { list-style: none; }

.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-black);
  text-decoration: none;
  transition: background 0.15s;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
  background: rgba(210,204,198,0.4);
}

.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--fg-black);
  color: var(--fg-white);
  border-radius: 50%;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--fg-black);
  font-size: 22px;
  font-weight: 400;
}

/* Global WooCommerce buttons (fallback — specific contexts override below) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border-radius: 100px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  border: none !important;
  transition: background 0.2s !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #333 !important;
  opacity: 1 !important;
  color: var(--fg-white) !important;
}

/* =============================================================================
   14b. Cart & Checkout
   ============================================================================= */

/* Container override */
.woocommerce-cart .prose-content,
.woocommerce-checkout .prose-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  padding: 40px var(--footer-px) 80px !important;
}

/* Breadcrumb */
.woocommerce-cart .blog-breadcrumb,
.woocommerce-checkout .blog-breadcrumb { margin-bottom: 0; }

/* ---- Empty cart ---- */
.wc-empty-cart-message {
  padding: 80px 0 40px;
  text-align: center;
}

.cart-empty.woocommerce-info {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-indent: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  color: var(--fg-black) !important;
  display: block;
}

.cart-empty.woocommerce-info::before { display: none !important; }

.return-to-shop {
  text-align: center;
  margin-top: 32px;
}

.return-to-shop .button.wc-backward {
  display: inline-block;
  padding: 16px 48px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none;
  transition: background 0.2s !important;
}

.return-to-shop .button.wc-backward:hover {
  background: #333 !important;
  opacity: 1 !important;
}

/* ---- Cart table ---- */
.woocommerce-cart-form { margin-bottom: 48px; }

table.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
}

/* Table header */
table.shop_table.cart thead th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 16px 16px;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  background: transparent !important;
  text-align: left;
}

table.shop_table.cart th.product-remove { width: 44px; }
table.shop_table.cart th.product-thumbnail { width: 100px; }

/* Table cells */
table.shop_table.cart td {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  vertical-align: middle !important;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  background: transparent !important;
}

/* Remove (×) button */
td.product-remove a.remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(210,204,198,0.35);
  color: var(--fg-muted) !important;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

td.product-remove a.remove:hover {
  background: #cc0000 !important;
  color: #fff !important;
}

/* Product thumbnail */
td.product-thumbnail a { display: block; }

td.product-thumbnail img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(210,204,198,0.2);
  display: block;
}

/* Product name */
td.product-name a {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--fg-black);
  text-decoration: none;
}

td.product-name a:hover { text-decoration: underline; }

td.product-name .variation {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

td.product-name .variation dt,
td.product-name .variation dd { display: inline; margin: 0; }
td.product-name .variation dt::after { content: ': '; }
td.product-name .variation dd::after { content: ' · '; color: #ccc; }
td.product-name .variation dd:last-child::after { content: ''; }

/* Subtotal column: bold */
td.product-subtotal { font-weight: 600; }

/* Quantity column — compact pill */
td.product-quantity { width: 160px; }
td.product-quantity .quantity {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  border: 1.5px solid var(--fg-black);
  border-radius: var(--r-pill);
  padding: 10px 16px;
}
td.product-quantity .quantity input.qty {
  width: 32px;
  text-align: center;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
td.product-quantity .quantity input.qty::-webkit-inner-spin-button,
td.product-quantity .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
td.product-quantity .quantity .minus,
td.product-quantity .quantity .plus {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-black);
  flex-shrink: 0;
}

/* Actions row */
td.actions {
  border-bottom: none !important;
  padding-top: 24px;
}

td.actions > * { vertical-align: middle; }

.coupon {
  display: none !important;
}

.coupon input.input-text {
  padding: 12px 18px;
  border: 1px solid #d0c9c2;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: #fff;
  color: var(--fg-black);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  width: 200px;
}

.coupon input.input-text:focus { border-color: var(--fg-black); }

.coupon .button[name="apply_coupon"] {
  padding: 12px 24px !important;
  background: transparent !important;
  color: var(--fg-black) !important;
  border: 1px solid var(--fg-black) !important;
  border-radius: 100px !important;
  font-size: var(--fs-sm) !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s !important;
}

.coupon .button[name="apply_coupon"]:hover {
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  opacity: 1 !important;
}

button[name="update_cart"] {
  float: right;
  padding: 12px 28px !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  border: 1px solid #d0c9c2 !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s !important;
}

button[name="update_cart"]:not([disabled]):hover {
  border-color: var(--fg-black) !important;
  color: var(--fg-black) !important;
  background: transparent !important;
  opacity: 1 !important;
}

button[name="update_cart"][disabled] { opacity: 0.4; }

/* ---- Cart totals ---- */
.cart-collaterals { width: 100%; overflow: hidden; }

.cart_totals {
  float: right;
  width: 42% !important;
  background: rgba(210,204,198,0.15);
  border-radius: 20px;
  padding: 32px;
  box-sizing: border-box;
}

.cart_totals h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  color: var(--fg-black);
  margin: 0 0 24px;
}

.cart_totals .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  border: none !important;
}

.cart_totals .shop_table th,
.cart_totals .shop_table td {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  background: transparent !important;
}

.cart_totals .shop_table th { text-align: left; color: var(--fg-muted); font-weight: 400; }
.cart_totals .shop_table td { text-align: right; }

.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: none !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-black) !important;
  padding-top: 20px;
}

.cart_totals .shipping td { font-size: var(--fs-sm); color: var(--fg-muted); }
.cart_totals .shipping td a { color: var(--fg-black); }

.wc-proceed-to-checkout { margin-top: 0; }

.checkout-button.button.alt {
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 18px 32px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none;
  transition: background 0.2s !important;
  box-sizing: border-box;
}

.checkout-button.button.alt:hover {
  background: #333 !important;
  opacity: 1 !important;
}

/* Cross-sells below cart */
.cross-sells { clear: both; padding-top: 60px; }

.cross-sells h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  color: var(--fg-black);
  margin-bottom: 24px;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--font-body) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 20px !important;
  margin-bottom: 40px !important;
  list-style: none !important;
  border-top: none !important;
}
.woocommerce-message {
  background: #edf7f0 !important;
  color: #1a6b3c !important;
  border: 1px solid #b2dfc3 !important;
}
.woocommerce-message::before {
  content: '✓' !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a6b3c !important;
  flex-shrink: 0 !important;
}
.woocommerce-message .button.wc-forward {
  margin-left: auto !important;
  white-space: nowrap !important;
  background: none !important;
  border: 1.5px solid #1a6b3c !important;
  color: #1a6b3c !important;
  border-radius: var(--r-pill) !important;
  padding: 7px 18px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.woocommerce-message .button.wc-forward:hover {
  background: #1a6b3c !important;
  color: #fff !important;
}

/* ---- Checkout ---- */

/* Coupon / login toggle messages */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  background: rgba(210,204,198,0.2) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  color: var(--fg-muted) !important;
  margin-bottom: 12px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }

.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a {
  color: var(--fg-black) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Coupon / login form */
.checkout_coupon.woocommerce-form-coupon,
.woocommerce-form-login {
  background: rgba(210,204,198,0.1);
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* 2-column layout: billing (left) + order review (right) */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-rows: auto;
  column-gap: 48px;
  align-items: start;
}

#customer_details { grid-column: 1; grid-row: 1; }
#order_review     { grid-column: 2; grid-row: 1 / 3; }

/* Keep payment inside order_review column */
#payment { grid-column: 2; }

/* ---- Billing / shipping sections ---- */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  color: var(--fg-black);
  margin: 0 0 20px;
  font-weight: 400;
}

/* Form rows: first/last side-by-side */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 0;
}

.form-row-wide,
.form-row.notes { grid-column: 1 / -1; }
.form-row-first { grid-column: 1; }
.form-row-last  { grid-column: 2; }

/* Individual field rows */
.form-row {
  margin-bottom: 14px !important;
  padding: 0 !important;
}

.form-row label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-weight: 400;
}

.form-row label .required { color: var(--fg-black); text-decoration: none; }

.form-row .input-text,
.form-row select,
.woocommerce-checkout .input-text {
  width: 100%;
  border: 1px solid #d0c9c2 !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  background: #fff !important;
  color: var(--fg-black) !important;
  outline: none !important;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  height: auto !important;
}

.form-row .input-text:focus,
.form-row select:focus { border-color: var(--fg-black) !important; box-shadow: none !important; }

.form-row textarea.input-text { min-height: 120px; resize: vertical; }

/* Select arrow */
.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Validation */
.form-row.woocommerce-validated .input-text  { border-color: #5a9e6f !important; }
.form-row.woocommerce-invalid  .input-text  { border-color: #cc0000 !important; }
.form-row.woocommerce-invalid label { color: #cc0000; }

/* ---- Order review panel ---- */
#order_review_heading {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  color: var(--fg-black);
  margin: 0 0 20px;
  font-weight: 400;
}

.woocommerce-checkout-review-order {
  background: rgba(210,204,198,0.15);
  border-radius: 20px;
  padding: 32px;
  position: sticky;
  top: 100px;
}

table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table.woocommerce-checkout-review-order-table th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  padding: 0 0 12px;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  background: transparent !important;
}

table.woocommerce-checkout-review-order-table th.product-total { text-align: right; }

table.woocommerce-checkout-review-order-table td {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-black);
  vertical-align: middle;
  background: transparent !important;
}

table.woocommerce-checkout-review-order-table td.product-total { text-align: right; font-weight: 500; }

.product-quantity { color: var(--fg-muted); font-weight: 400; }

/* Totals rows */
table.woocommerce-checkout-review-order-table tfoot tr th,
table.woocommerce-checkout-review-order-table tfoot tr td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: transparent !important;
}

table.woocommerce-checkout-review-order-table tfoot tr td { text-align: right; }
table.woocommerce-checkout-review-order-table tfoot .order-total th,
table.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 18px;
  font-weight: 700;
  border-bottom: none;
  color: var(--fg-black);
  padding-top: 16px;
}

/* ---- Payment section ---- */
#payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#payment .wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: none !important;
  background: transparent !important;
}

#payment .wc_payment_methods li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#payment .wc_payment_methods li:last-child { border-bottom: none; }

#payment .wc_payment_methods label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

#payment .payment_box {
  background: rgba(210,204,198,0.2);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* Place order button */
#place_order,
.woocommerce-checkout #place_order {
  display: block !important;
  width: 100% !important;
  padding: 18px 32px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s !important;
  margin-top: 8px;
}

#place_order:hover { background: #333 !important; opacity: 1 !important; }

/* Terms */
.woocommerce-terms-and-conditions-wrapper {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: 16px;
}

/* Privacy policy notice */
.woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: 16px;
}

/* ---- Modo presupuesto: sin precios ---- */

/* Shop / archivos de categoría: precio ya oculto en sección 14a (.price { display:none }) */

/* Carrito: ocultar columnas Precio y Subtotal */
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal {
  display: none !important;
}

/* Carrito: columna nombre ocupa el espacio sobrante al ocultar precio/subtotal */
.woocommerce-cart table.shop_table td.product-name,
.woocommerce-cart table.shop_table th.product-name {
  width: 100%;
}

/* Carrito: totales — ocultar importes y sustituir por "A consultar" */
.woocommerce-cart .cart_totals tr.cart-subtotal td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.cart-subtotal td strong,
.woocommerce-cart .cart_totals tr.order-total td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals tr.order-total td strong {
  display: none !important;
}

.woocommerce-cart .cart_totals tr.cart-subtotal td::after,
.woocommerce-cart .cart_totals tr.order-total td::after {
  content: "A consultar";
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}

/* ----------------------------------------------------------------------------
   Pedido recibido (/checkout/presupuesto-recibido/)
   El contenido de WooCommerce va dentro de un bloque de KingComposer, que ya
   aporta el padding lateral. Sin esto, .woocommerce añadía otros var(--footer-px)
   encima y el texto salía con el doble de sangría.
   ---------------------------------------------------------------------------- */
.woocommerce-order-received .woocommerce {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.woocommerce-order-received .woocommerce-notice--success {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--fg-black);
  margin: 0 0 32px;
}

/* Resumen: nº de pedido, fecha, email, total */
.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 48px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
  background: rgba(210, 204, 198, 0.2);
  border-radius: 12px;
}
.woocommerce-order-overview li {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: none !important;
  margin: 0;
  padding: 0;
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-black);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--fg-black);
  margin: 0 0 20px;
}

.woocommerce-order-details { margin-bottom: 48px; }

table.order_details,
table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}
table.order_details th,
table.woocommerce-table--order-details th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-align: left;
  padding: 0 16px 14px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  background: transparent !important;
}
table.order_details td,
table.woocommerce-table--order-details td {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent !important;
}
table.order_details tfoot th,
table.woocommerce-table--order-details tfoot th {
  border-bottom: none;
  padding-top: 16px;
}

/* Modo presupuesto: aquí también hay que ocultar los importes */
.woocommerce-order-received .woocommerce-Price-amount { display: none !important; }
.woocommerce-order-received .woocommerce-order-overview__total::after,
.woocommerce-order-received table.order_details tfoot td::after,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td::after {
  content: "A consultar";
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}

.woocommerce-customer-details address {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--fg-black);
  font-style: normal;
  border: none;
  padding: 0;
}

/* Checkout: ocultar columna "Total" en revisión del pedido */
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total {
  display: none !important;
}

/* Checkout: totales — ocultar importes y sustituir por "A consultar" */
.woocommerce-checkout-review-order-table tr.cart-subtotal td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tr.cart-subtotal td strong,
.woocommerce-checkout-review-order-table tr.order-total td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tr.order-total td strong {
  display: none !important;
}

.woocommerce-checkout-review-order-table tr.cart-subtotal td::after,
.woocommerce-checkout-review-order-table tr.order-total td::after {
  content: "A consultar";
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}

/* Página de producto individual: ocultar precio 0.00€ */
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
  display: none !important;
}

/* ---- My Account ---- */

/* Container: narrower for login, full for dashboard */
.woocommerce-account .woocommerce {
  padding: 60px var(--footer-px) 80px !important;
}

/* ---- Login / Register forms (logged out) ---- */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 960px !important;
}

/* Side-by-side login + register */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper + * {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* Each form takes ~half width */
.woocommerce-account form.login,
.woocommerce-account form.register {
  flex: 1;
  min-width: 0;
}

/* When only login form (no registration) */
.woocommerce-account form.login:only-of-type {
  max-width: 440px;
  margin: 0 auto;
  flex: none;
  width: 100%;
}

.woocommerce-account form h2,
.woocommerce-account .woocommerce > h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  color: var(--fg-black);
  margin: 0 0 24px;
  font-weight: 400;
}

/* Form rows */
.woocommerce-account .woocommerce-form-row {
  margin-bottom: 14px !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-form-row label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-Input {
  width: 100%;
  border: 1px solid #d0c9c2 !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  background: #fff !important;
  color: var(--fg-black) !important;
  outline: none !important;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-Input:focus {
  border-color: var(--fg-black) !important;
  box-shadow: none !important;
}

/* Remember me + submit row */
.woocommerce-account .form-row:has(button[name="login"]),
.woocommerce-account .form-row:has(button[name="register"]) {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  cursor: pointer;
}

/* Login / Register submit buttons */
.woocommerce-account button[name="login"],
.woocommerce-account button[name="register"],
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  padding: 14px 40px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: background 0.2s !important;
  white-space: nowrap;
}

.woocommerce-account button[name="login"]:hover,
.woocommerce-account button[name="register"]:hover {
  background: #333 !important;
  opacity: 1 !important;
}

/* Lost password link */
.woocommerce-LostPassword {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.woocommerce-LostPassword a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-LostPassword a:hover { color: var(--fg-black); }

/* ---- Dashboard (logged in) ---- */
.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 60px;
  align-items: start;
}

/* Sidebar nav */
.woocommerce-MyAccount-navigation {
  background: rgba(210,204,198,0.15);
  border-radius: 16px;
  padding: 8px;
  position: sticky;
  top: 100px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: rgba(210,204,198,0.4);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--fg-black);
  color: var(--fg-white);
  font-weight: 500;
}

/* Logout link: red tint */
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #cc3333 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(204,51,51,0.08) !important;
}

/* Main content area */
.woocommerce-MyAccount-content {
  min-width: 0;
}

.woocommerce-MyAccount-content p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 26px;
  color: var(--fg-black);
  margin-bottom: 16px;
}

/* Orders table */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.woocommerce-MyAccount-content table th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  padding: 0 16px 12px;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  background: transparent;
  text-align: left;
}

.woocommerce-MyAccount-content table td {
  padding: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-black);
  background: transparent;
  vertical-align: middle;
}

.woocommerce-MyAccount-content .woocommerce-button.button,
.woocommerce-MyAccount-content a.button {
  padding: 8px 20px !important;
  background: var(--fg-black) !important;
  color: var(--fg-white) !important;
  border-radius: 100px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  text-decoration: none;
  display: inline-block;
}

/* Address listing (my-account/edit-address/) */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}

.woocommerce-Address {
  background: rgba(210,204,198,0.15);
  border-radius: 16px;
  padding: 28px 28px 24px;
}

.woocommerce-Address-title {
  margin-bottom: 16px;
}

.woocommerce-Address-title h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 32px;
  font-weight: 400;
  margin: 0 0 8px;
}

.woocommerce-Address-title .edit {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-Address-title .edit:hover { color: var(--fg-black); }

address {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-style: normal;
  line-height: 26px;
  color: var(--fg-black);
}

/* "Aún no has configurado este tipo de dirección" */
.woocommerce-Address address:empty,
.woocommerce-Address address {
  color: var(--fg-black);
}

/* Tabla del carrito (legacy rule kept) */
.woocommerce table.shop_table th { color: var(--fg-primary); font-family: var(--font-body); font-weight: 600; }

/* =============================================================================
   15. Plantillas de página estándar
   ============================================================================= */
.site-content { min-height: 60vh; }

.entry-content {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: var(--s-section) var(--navbar-px);
}

/* Páginas de texto plano (legal, privacidad, cookies…) */
.prose-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px var(--navbar-px) 100px;
}

/* El editor a veces genera un h1 vacío al principio */
.prose-content h1:empty { display: none; }

.prose-content h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  color: var(--fg-black);
  line-height: 1.15;
  margin: 0 0 40px;
  text-transform: none;
}
/* El editor suele meter <strong> dentro del h1 */
.prose-content h1 strong { font-weight: 400; }

.prose-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--fg-black);
  line-height: 1.25;
  margin: 48px 0 14px;
}

.prose-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-black);
  margin: 32px 0 10px;
}

.prose-content p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-muted);
  margin: 0 0 14px;
}

.prose-content ul,
.prose-content ol {
  padding-left: 22px;
  margin: 0 0 20px;
}

.prose-content li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.prose-content strong { color: var(--fg-black); font-weight: 600; }

.prose-content a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--ease);
}
.prose-content a:hover { opacity: 0.7; text-decoration: none; }

.prose-content em { font-style: italic; }

/* 404 */
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px var(--navbar-px);
  gap: 24px;
}
.error-404__code {
  font-family: var(--font-heading);
  font-size: 120px;
  line-height: 1;
  color: var(--fg-primary);
}

/* =============================================================================
   16. Product Page (WooCommerce Single Product)
   ============================================================================= */

/* Breadcrumb */
.product-content { padding-top: var(--navbar-h); }
.product-breadcrumb { padding: 10px var(--footer-px); }
.product-breadcrumb__text,
.wc-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--fg-muted);
  margin: 0;
}
.wc-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.wc-breadcrumb a:hover { color: var(--fg-primary); }
.woocommerce-breadcrumb { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; padding: 10px var(--footer-px); }
.woocommerce-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--fg-primary); }

/* Product Main */
.product-main { padding: 40px 0; }
.product-main__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 var(--footer-px);
  max-width: var(--max-full);
  margin: 0 auto;
}

/* Gallery */
.product-gallery { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.product-gallery__main {
  width: 770px;
  height: 770px;
  background: var(--fg-white);
  overflow: hidden;
  position: relative;
}
.product-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--ease);
}
.product-gallery__thumbs { display: flex; gap: 12px; }
.product-gallery__thumb {
  width: 85px;
  height: 85px;
  background: var(--fg-white);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb--active,
.product-gallery__thumb:hover { border-color: var(--fg-primary); }

/* Product Info */
.product-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 638px;
  flex-shrink: 0;
}
.product-info__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  color: var(--fg-black);
  margin: 0;
  font-weight: 600;
}
.product-info__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
}
.product-info__desc p { margin: 0 0 4px; }
.product-info__ficha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  align-self: flex-start;
  text-decoration: none;
}

/* Variation attributes table: label above swatches */
table.variations,
table.variations tbody,
table.variations tr {
  display: block;
  width: 100%;
}
table.variations tr { margin-bottom: 20px; }
table.variations th.label,
table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
table.variations th.label {
  margin-bottom: 10px;
}
table.variations th.label label {
  font-family: var(--font-body-bold);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-primary);
  cursor: default;
}

/* Swatches grid: flex wrap instead of floats */
.swatch-control {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.swatch-wrapper {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.swatch-wrapper:hover { border-color: var(--fg-primary) !important; }
div.swatch-wrapper.selected {
  padding: 0 !important;
  border: 2px solid var(--fg-primary) !important;
}
/* El plugin fija el tamaño con style="width:32px;height:32px" en línea,
   así que hace falta !important para subirlo. */
.swatch-wrapper .swatch-anchor,
.swatch-wrapper .swatch-img {
  width: 34px !important;
  height: 34px !important;
}

/* Swatches */
.product-swatches { display: flex; flex-direction: column; gap: 12px; }
.product-swatches__label {
  font-family: var(--font-body-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  margin: 0;
}
.product-swatches__img { width: 493px; height: 153px; max-width: 100%; object-fit: contain; display: block; }
.product-swatches__dots { display: flex; flex-wrap: wrap; gap: 8px; }
.product-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  transition: border-color var(--ease);
}
.product-swatch:hover,
.product-swatch--active { border-color: var(--fg-primary); }
.product-swatch--text {
  background: var(--fg-white);
  border: 1px solid #ccc;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--fg-black);
  width: auto;
  border-radius: 4px;
  padding: 2px 6px;
}

/* Add to Cart area */
.product-actions .cart,
.product-actions .woocommerce-variation-add-to-cart,
.product-actions .variations_button {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
/* Variable products: hide reset link and WC messages until variation selected */
.product-actions .reset_variations { display: none; }

/* "Limpiar" reset link — styled as outline pill button */
a.reset_variations {
  display: block !important;
  width: fit-content;
  margin-top: 24px;
  padding: 10px 22px;
  border: 1.5px solid var(--fg-primary);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
a.reset_variations:hover {
  background: var(--fg-primary);
  color: #fff;
}
.product-actions .woocommerce-variation.single_variation { display: none; }
/* Button in pending-selection state keeps same look */
.product-actions .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.55;
  cursor: default;
}
/* Quantity pill (+/- custom) */
.product-qty {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--fg-black);
  border-radius: var(--r-pill);
  padding: 14px 19px;
  flex-shrink: 0;
}
.product-qty__btn {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--fg-placeholder);
}
.product-qty__btn--plus { color: var(--fg-black); }
.product-qty__input {
  width: 30px;
  text-align: center;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.product-qty__input::-webkit-inner-spin-button,
.product-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Fallback for default WC quantity */
.product-actions .quantity {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--fg-black);
  border-radius: var(--r-pill);
  padding: 14px 19px;
  flex-shrink: 0;
}
.product-actions .quantity label { display: none; }
.product-actions .qty {
  width: 40px;
  text-align: center;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-black);
  background: transparent;
}
.woocommerce .product-actions .single_add_to_cart_button {
  flex: 1;
  min-width: 200px;
  background: var(--fg-primary) !important;
  color: var(--fg-white) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 35px !important;
  font-family: var(--font-body-bold) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
  cursor: pointer;
  text-align: center;
  transition: background var(--ease);
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.woocommerce .product-actions .single_add_to_cart_button:hover { background: #002244 !important; }
.product-actions .single_add_to_cart_button.loading { opacity: 0.7; pointer-events: none; }

/* Contact */
.product-contact { display: flex; flex-direction: column; gap: 6px; }
.product-contact__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: #323232;
  margin: 0;
}
.product-contact__row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-primary);
  font-family: var(--font-body-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-decoration: none;
}
.product-contact__row:hover { text-decoration: underline; }

/* Guarantee + Measurements */
.product-guarantee-section {
  background: #e9e9e9;
  padding: 40px var(--footer-px);
}
.product-guarantee-section__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--max-full);
  margin: 0 auto;
}
.product-guarantee-section__divider {
  width: 2px;
  background: var(--fg-primary);
  align-self: stretch;
  flex-shrink: 0;
}
.product-guarantee {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 37px;
}
.product-guarantee__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 42px;
  color: var(--fg-primary);
  margin: 0;
  font-weight: 600;
}
.product-guarantee__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 0;
}
.guarantee-item {
  width: 243px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.guarantee-item__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--fg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.guarantee-item__icon svg { width: 38px; height: 38px; flex-shrink: 0; }
.guarantee-item__icon img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.guarantee-item__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--fg-primary);
  text-align: center;
  margin: 0;
}

.product-measurements {
  width: 638px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-measurements__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 42px;
  color: var(--fg-primary);
  margin: 0;
  font-weight: 600;
}
.product-measurements__img { max-width: 549px; width: 100%; height: auto; display: block; }
.product-measurements__img--empty {
  width: 100%;
  max-width: 549px;
  aspect-ratio: 549 / 436;
  background: #d0ccc8;
  display: block;
}
.product-measurements__btn { align-self: flex-start; padding: 17px 15px; text-decoration: none; }

/* Collection */
.product-collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding: 20px var(--footer-px);
  max-width: calc(var(--max-wide) + 2 * var(--footer-px));
  margin: 0 auto;
  box-sizing: border-box;
}
.product-collection__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 82px;
  max-width: 768px;
}
.product-collection__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-black);
  margin: 0;
  font-weight: 600;
}
.product-collection__body { display: flex; flex-direction: column; gap: 12px; }
.product-collection__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
}
.product-collection__desc p { margin: 0 0 4px; }
.product-collection__img {
  width: 770px;
  height: 770px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Related Products */
.product-related {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px var(--footer-px);
  box-sizing: border-box;
}
.product-related__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 42px;
  color: var(--fg-primary);
  margin: 0;
  max-width: 511px;
  text-align: center;
  font-weight: 600;
}
/* Carousel wrapper */
.product-related__carousel {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.product-related__track {
  flex: 1;
  overflow: hidden;
}
.product-related__grid {
  display: flex;
  gap: 20px;
  transition: transform 0.35s ease;
  will-change: transform;
}
/* 3 cards visible: each card takes 1/3 of track minus gaps */
.product-related__carousel--active .product-card {
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: 375px;
}
/* Static (≤3 cards): centered row */
.product-related__carousel:not(.product-related__carousel--active) .product-related__grid {
  justify-content: center;
}
/* Navigation arrows */
.product-related__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--fg-primary);
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease), color var(--ease);
}
.product-related__arrow:hover {
  background: var(--fg-primary);
  color: #fff;
}
.product-related__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 375px;
  flex-shrink: 0;
}
.product-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 468px;
  background: var(--fg-card-bg);
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  padding: 16px 12px;
  text-decoration: none;
  justify-content: flex-end;
}
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__colors {
  display: flex;
  gap: 6px;
  position: relative;
  z-index: 1;
  justify-content: center;
}
.product-card__color-dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ccc;
  display: block;
  flex-shrink: 0;
}
.product-card__name {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-black);
  text-align: center;
  margin: 0;
}
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--fg-primary); }

/* KC content section — rendered via the_content() en productos con KC */
.product-kc-content {
  width: 100%;
  overflow: hidden;
}
/* Botones KC dentro de productos — heredan el estilo del tema */
.product-kc-content .kc_button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 17px 28px;
  font-family: var(--font-body-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  background: var(--fg-primary);
  color: #fff;
  border: none;
  cursor: pointer;
}
.product-kc-content .kc_button:hover { background: #002244; }

/* =============================================================================
   16b. KingComposer helpers
   ============================================================================= */

/* Base layout */
.kc-wrap-columns { max-width: 100%; overflow: hidden; }
.kc_title, .kc_title a { font-family: var(--font-heading) !important; }

/* Text block: base spacing for all KC text blocks */
.kc_text_block {
  font-family: var(--font-body);
}

.kc_text_block p {
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
}

.kc_text_block p:last-child {
  margin-bottom: 0 !important;
}

/* Column container vertical padding so colored-background sections breathe */
.kc-col-container {
  padding-top:    8px;
  padding-bottom: 40px;
}

/* Widen KC container to match theme */
.kc-row-container.kc-container {
  max-width: 1560px !important;
  padding-left:  var(--footer-px) !important;
  padding-right: var(--footer-px) !important;
  box-sizing: border-box;
}

/* Full-width KC rows (no .kc-container) must stretch to viewport edges */
section[data-kc-fullwidth] .kc-row-container:not(.kc-container),
.kc-row-container:not(.kc-container) {
  padding-left:  0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Hero sections (full-width KC rows with a title) ---- */
section[data-kc-fullwidth="content"] {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

section[data-kc-fullwidth="content"] h1.kc_title,
section[data-kc-fullwidth="content"] h2.kc_title {
  font-size: clamp(36px, 5vw, 72px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}

section[data-kc-fullwidth="content"] .kc_text_block p {
  font-size: 20px !important;
  line-height: 30px !important;
}

/* ---- KC step / card columns ---- */

/* Images in KC content: consistent rounding and no overflow */
.kc_single_image img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: auto;
}

/* Vertical rhythm between image and text inside a KC column */
.kc_single_image + .kc-title-wrap { margin-top: 20px; }
.kc-title-wrap + .kc_text_block   { margin-top: 8px; }

/* KC step section: equal-height columns */
.kc_row:not([data-kc-fullwidth]) .kc-wrap-columns {
  display: flex !important;
  flex-wrap: wrap;
}

/* KC image-overlay brochure thumbnails */
.kc_single_image .kc-image-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.kc_single_image .kc-image-overlay i {
  font-size: 28px !important;
  color: var(--fg-white) !important;
}

/* ---- amz shortcode not active: hide raw text node ---- */
/* The raw shortcode appears as a text child in a .kc-col-container that also
   has .contact-info-wrap or .kc-multi-icons-wrapper siblings.
   We can't target text nodes directly; instead style the container to
   overflow:hidden so a partially-rendered shortcode doesn't break layout. */
.kc_col-sm-4 .kc-col-container,
.kc_col-sm-3 .kc-col-container {
  overflow: visible;
  word-break: break-word;
}

/* =============================================================================
   16b. Página /catalogos/ (page-id-18815) — imágenes con cantos redondeados
   ============================================================================= */
.page-id-18815 .kc_single_image img {
  border-radius: 12px !important;
}

/* Más espacio entre el título "Catálogos" y la primera sección */
.page-id-18815 .kc-css-563408.kc_title,
.page-id-18815 .kc-css-563408 .kc_title {
  margin-bottom: 40px !important;
}

/* Los spacers KC entre el h1 y Novedades son inline height:20px — sobreescribir */
.page-id-18815 .kc-css-223734,
.page-id-18815 .kc-css-891981 {
  height: 32px !important;
}

/* Títulos de sección: Novedades, Espacios, etc. */
.page-id-18815 .kc_text_block h4 {
  font-family: var(--font-body-bold) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--fg-black) !important;
  margin-bottom: 20px !important;
}

/* =============================================================================
   16c. "Crea tu proyecto a medida" — CF7 + contact info block
        (common block on /diseno-espacios/, /aula-ateca/, etc.)
   ============================================================================= */

/* Title above the form */
.kc-title-wrap + .kc-contact-form7 { margin-top: 20px; }
.kc-title-wrap .kc_title { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.2 !important; }

/* =============================================================================
   16d. Sección "¿Necesitas inspirarte?" (kc-css-667284) — /diseno-espacios/
   ============================================================================= */
.kc-css-455989 h4 {
  font-family: var(--font-body-bold) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--fg-black) !important;
}

.kc-css-854265 img {
  border-radius: 12px !important;
}

/* =============================================================================
   16e. Sección "4 pasos" (kc-css-6410) — /diseno-espacios/
        Títulos: Lausanne Bold 18px · Descripciones: Lausanne 14px
   ============================================================================= */
.kc-css-6410 .kc_title,
.kc-css-6410 .kc_title a.kc_title_link {
  font-family: var(--font-body-bold) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--fg-black) !important;
}

.kc-css-6410 .kc-col-container p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* ---- CF7 form inside KC ---- */

/* Bootstrap grid compatibility within CF7 */
.kc-contact-form7 .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kc-contact-form7 .col-md-12 { grid-column: 1 / -1; }
.kc-contact-form7 .col-md-6  { grid-column: span 1; }

/* Strip default <p> margins */
.kc-contact-form7 p { margin: 0 !important; }

/* label above select */
.kc-contact-form7 label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: 6px;
}

/* Inputs, select, textarea */
.kc-contact-form7 input:not([type="submit"]):not([type="hidden"]),
.kc-contact-form7 select,
.kc-contact-form7 textarea {
  width: 100%;
  border: 1px solid #d0c9c2;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: #fff;
  color: var(--fg-black);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.kc-contact-form7 input:focus:not([type="submit"]):not([type="hidden"]),
.kc-contact-form7 select:focus,
.kc-contact-form7 textarea:focus { border-color: var(--fg-black); }

/* Select arrow */
.kc-contact-form7 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.kc-contact-form7 textarea { min-height: 140px; resize: vertical; }

/* Submit button */
.kc-contact-form7 input[type="submit"] {
  width: 100%;
  padding: 16px 32px;
  background: #003366;
  color: var(--fg-white);
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.kc-contact-form7 input[type="submit"]:hover { background: #002952; }

/* ---- amz-contact-info rendered output ---- */
/* Dentro de la ficha de producto, la caja de contacto va sobre el gris de
   .product-guarantee-section (#e9e9e9). Con su tinte propio quedaba un
   rectángulo ligeramente más cálido que resaltaba; en transparente adopta el
   gris de la sección, y si algún día se cambia ese gris, acompaña solo.
   Fuera de la ficha (página de contacto) conserva su tarjeta. */
.product-kc-content .contact-info-wrap {
  background: transparent;
}

/* ---- [amz-share] — botones de compartir ---- */
.share-wrap-icon-cover {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.share-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: var(--fg-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.share-link:hover,
.share-link:focus-visible {
  background: var(--fg-primary);
  border-color: var(--fg-primary);
  color: #fff;
}
.share-link svg { width: 18px; height: 18px; display: block; }

.contact-info__heading {
  font-family: var(--font-body-bold);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-black);
  margin: 0 0 14px;
}
.contact-info-wrap--box { margin-top: 8px; }

.contact-info-wrap {
  background: rgba(210,204,198,0.2);
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 20px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info .phone-number {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info .telephone,
.contact-info .mobile,
.contact-info .email,
.contact-info .address {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-info p.title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 !important;
}

.contact-info p:not(.title) {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 22px;
  color: var(--fg-black);
  margin: 0 !important;
}

/* fg-* icon font (amz plugin) / SVG fallback */
.contact-info i,
.contact-info .fg-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
}
.contact-info i { font-size: 13px; }

/* KC pone float:left a todo .kc-elm, y sus espaciadores son float de ancho
   completo. Un hermano posterior que cree contexto de formato de bloque
   (flex, grid, overflow) no puede solaparse con un float: como no queda hueco,
   WebKit/Blink lo encogen a 0px contra el borde derecho — el texto sale en
   vertical, una letra por línea. Firefox lo baja debajo del float y por eso
   allí se veía bien. Con clear:both la caja empieza bajo el espaciador.
   Afecta a /diseno-espacios/ y /aula-ateca/. */
.contact-info-wrap,
.contact-info-box-wrap,
.share-wrap,
.kc-multi-icons-wrapper {
  clear: both;
}

/* KC aplica white-space:nowrap en .kc-col-container; lo anulamos aquí */
.contact-info-wrap,
.contact-info-wrap * { white-space: normal; }

/* ---- KC multi-icons (social) ---- */
.kc-multi-icons-wrapper {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.multi-icons-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  background: #dde0e9 !important;
  border-radius: 10px !important;
  transition: background 0.2s;
  text-decoration: none;
}

.multi-icons-link:hover { background: #c5c9d5 !important; }

.multi-icons-link i {
  color: #002c4b !important;
  font-size: 15px !important;
}

/* Elementor (por si se instala en el futuro) */
.elementor-section.elementor-section-full_width { max-width: 100%; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-heading) !important; }
.elementor-widget-text-editor { font-family: var(--font-body); }

/* =============================================================================
   17. Blog Archive
   ============================================================================= */

/* Breadcrumb */
.blog-breadcrumb {
  padding: 10px var(--footer-px);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--fg-muted);
}
.blog-breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
}
.blog-breadcrumb a:hover { color: var(--fg-black); }

/* Section wrapper */
.blog-archive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px var(--footer-px);
}

.blog-archive__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-black);
  text-align: center;
  width: 770px;
  max-width: 100%;
}

/* Body: grid + sidebar */
.blog-archive__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  max-width: 1553px;
}

.blog-archive__grid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
  align-content: flex-start;
}

/* Sidebar */
.blog-archive__sidebar {
  width: 374px;
  flex-shrink: 0;
  background: var(--fg-card-bg);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-archive__sidebar-title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 42px;
  color: var(--fg-black);
}

.blog-archive__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-archive__cats li a {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-black);
  text-decoration: none;
}
.blog-archive__cats li a:hover { color: var(--fg-primary); }

/* Archive (category / tag / author) */
.archive-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px var(--footer-px) 80px;
  max-width: calc(1560px + 2 * var(--footer-px));
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

/* El <header> es hijo de un flex con align-items:flex-start, así que sin esto
   se encoge al ancho de su contenido y el título/chips quedan descentrados. */
.archive-header {
  width: 100%;
}

.archive-header__desc {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  margin-top: 8px;
}

.archive-empty {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-muted);
}

/* Full-width grid (no sidebar) */
.blog-archive__grid--full {
  width: 100%;
  max-width: 1553px;
}

/* Category filter buttons */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* En el archivo de categoría los hijos del header son bloques sin gap,
   así que el filtro necesita su propia separación del título. */
.archive-header .blog-filter {
  margin-top: 24px;
}

.blog-filter__btn {
  /* Ahora es un <a>, no un <button>: hay que reponer lo que el botón traía
     de serie y quitar el subrayado del enlace. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 9px 22px;
  border-radius: 100px;
  border: 1.5px solid #003366;
  background: transparent;
  color: #003366;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.blog-filter__btn:hover,
.blog-filter__btn.is-active {
  background: #003366;
  color: #fff;
}

/* Card hidden by filter */
.blog-card.is-hidden {
  display: none !important;
}

/* Blog card */
.blog-card {
  width: calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card__img-wrap {
  display: block;
  aspect-ratio: 373 / 248;
  overflow: hidden;
  border-radius: 12px;
}
.blog-card__img-wrap--empty {
  background: var(--fg-card-bg);
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ease);
}
.blog-card__img-wrap:hover .blog-card__img {
  transform: scale(1.03);
}

.blog-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--fg-muted);
}
.blog-card__cat {
  color: var(--fg-muted);
  text-decoration: none;
}
.blog-card__cat:hover { color: var(--fg-primary); }

.blog-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-black);
  font-weight: 400;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__title a:hover { color: var(--fg-primary); }

/* Pagination */
.blog-pagination {
  padding: 0 var(--footer-px) 40px;
  width: 100%;
}
.blog-pagination .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: var(--fg-black);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
  background: var(--fg-primary);
  color: var(--fg-white);
  border-color: var(--fg-primary);
}

/* =============================================================================
   18. Single Post
   ============================================================================= */

/* El artículo usa overflow:hidden para contener los floats de KingComposer */
.post-single {
  overflow: hidden;
}

/* El resto del contenido tiene el padding lateral */
.post-single__content,
.post-single__tags,
.post-single__nav {
  padding-left: var(--footer-px);
  padding-right: var(--footer-px);
}

/* Todos los bloques después del contenido necesitan clear:both */
.post-single__tags,
.post-single__nav,
.post-related {
  clear: both;
}

/* Hero: imagen full-width con título superpuesto */
.post-single__hero {
  position: relative;
  width: 100%;
  height: 680px;
  background-size: cover;
  background-position: center;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 56px;
}
.post-single__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
}
.post-single__hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.post-single__cat {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.post-single__cat:hover { color: var(--fg-white); }
.post-single__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-white);
}
.post-single__byline {
  font-family: var(--font-body-italic);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
}

/* Contenido — el padding lateral viene del wrapper global (--footer-px).
   Quitamos max-width para que el texto use el ancho disponible.
   El KC container interno tiene --footer-px por la regla global, lo anulamos
   para evitar doble padding. */
.post-single__content {
  /* KC pone float:left a todo .kc-elm. Sin contener esos floats aquí se
     escapan del contenedor y arrastran el footer, igual que pasaba en los
     proyectos (.project-single__content ya lo lleva por eso mismo). */
  overflow: hidden;
  padding-bottom: 48px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 28px;
  color: var(--fg-black);
  overflow: hidden;
}

.post-single__content .kc-row-container.kc-container {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Estilos editoriales para contenido estándar (no-KC) */
.post-single__content h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  margin: 40px 0 16px;
  color: var(--fg-black);
}
.post-single__content h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  margin: 32px 0 12px;
  color: var(--fg-black);
}
.post-single__content p { margin-bottom: 20px; }
.post-single__content ul,
.post-single__content ol { margin: 0 0 20px 24px; }
.post-single__content li { margin-bottom: 6px; }
.post-single__content blockquote {
  border-left: 4px solid var(--fg-primary);
  margin: 32px 0;
  padding: 16px 24px;
  background: var(--fg-card-bg);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--fg-muted);
}
.post-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
  display: block;
}
.post-single__content a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-single__content a:hover { opacity: 0.75; }

/* KingComposer dentro del contenido */
.post-single__content .kc_row { margin-bottom: 20px; }
.post-single__content .kc_text_block p { margin-bottom: 20px; }

/* Tags */
.post-single__tags {
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-single__tag {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #ddd;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.post-single__tag:hover {
  background: var(--fg-primary);
  color: var(--fg-white);
  border-color: var(--fg-primary);
}

/* Nav anterior/siguiente */
.post-single__nav {
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #eee;
}
.post-single__nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 45%;
  text-decoration: none;
  color: var(--fg-black);
}
.post-single__nav-item--next { text-align: right; margin-left: auto; }
.post-single__nav-label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.post-single__nav-title {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  transition: color var(--ease);
}
.post-single__nav-item:hover .post-single__nav-title { color: var(--fg-primary); }

/* Posts relacionados */
.post-related {
  background: var(--fg-card-bg);
  padding: 60px var(--footer-px);
}
.post-related__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.post-related__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 42px;
  color: var(--fg-black);
  margin-bottom: 40px;
  text-align: center;
}
.post-related__grid {
  display: flex;
  gap: 20px;
}
.post-related__grid .blog-card {
  flex: 1;
  width: auto;
}

/* =============================================================================
   19. Product Category Archive
   ============================================================================= */
.cat-archive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px var(--footer-px);
}

.page-id-63 .coll-archive,
.page-id-15365 .coll-archive,
.page-id-32489 .coll-archive { display: none; }

.coll-archive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 var(--footer-px) 80px;
}

.cat-archive__title {
  font-family: var(--font-heading);
  font-size: 55px;
  line-height: 64px;
  color: var(--fg-black);
  text-align: center;
  width: 100%;
}

.cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1560px;
  width: 100%;
}

/* Product grid needs more row gap (40px) */
.cat-grid--products {
  gap: 40px 20px;
}

/* Subcategory strip above product grid */
.cat-grid--subcats {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cat-grid--subcats .cat-card--subcat {
  width: calc((100% - 60px) / 4);
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc((100% - 60px) / 4);
}

/* Shared image wrap */
.cat-card__img-wrap {
  display: block;
  width: 100%;
  position: relative;
  background: rgba(210, 204, 198, 0.2);
  border-radius: 20px;
  overflow: hidden;
}

/* Subcategory tile — square (categoria-padre style) */
.cat-card--subcat .cat-card__img-wrap { aspect-ratio: 1 / 1; }

/* Product tile — portrait 375×468 (categoria-sillas style) */
.cat-card--product .cat-card__img-wrap { aspect-ratio: 375 / 468; }

/* Collection tile — portrait, full-cover */
.cat-card--collection .cat-card__img-wrap { background: #d2ccc6; aspect-ratio: 1 / 1; }

.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s ease;
}

.cat-card__img-wrap:hover .cat-card__img { transform: scale(1.05); }

.cat-card--collection .cat-card__img { object-fit: cover; mix-blend-mode: normal; }

/* Las tarjetas de categoría de /products/ llevan fotos de ambiente, no recortes
   de producto sobre blanco. Con el object-fit: contain heredado, cada foto se
   encajaba dentro del cuadrado según su proporción y dejaba bandas grises de
   distinto grosor, así que la rejilla se veía desigual. Rellenan el cuadrado,
   igual que las de colección de la misma página. */
.cat-card--subcat .cat-card__img { object-fit: cover; mix-blend-mode: normal; }

/* Wishlist heart — top-right inside product card */
.cat-card__wishlist {
  display: none;
}

/* Product tile: name centered below */
.cat-card--product .cat-card__name {
  text-align: center;
  display: block;
}

/* Subcategory/collection footer: name + link row */
.cat-card__footer {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.cat-card__name {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 22px;
  color: var(--fg-black);
  text-decoration: none;
}

a.cat-card__name:hover { text-decoration: underline; }

.cat-card__link { display: none; }

/* Product card swatches — dentro de la imagen, parte inferior */
.cat-card__swatches {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 2;
}
.cat-card__swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.cat-card__swatch-more {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--font-body);
  color: var(--fg-black);
  flex-shrink: 0;
  line-height: 1;
}

/* =============================================================================
   20. Contact Page
   ============================================================================= */
.contact-section {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  padding: 60px var(--footer-px);
  max-width: calc(1560px + 2 * var(--footer-px));
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

/* Form column */
.contact-form-col { flex: 1; min-width: 0; }

.contact-title {
  font-family: var(--font-heading);
  font-size: 55px;
  line-height: 64px;
  color: var(--fg-black);
  margin-bottom: 16px;
}

.contact-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 26px;
  color: var(--fg-muted);
  margin-bottom: 8px;
  max-width: 620px;
}

.contact-form-label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  margin-bottom: 24px;
}

/* CF7 form */
.contact-form-col .wpcf7 p { margin: 0 0 14px; }
.contact-form-col .wpcf7 p:last-child { margin-bottom: 0; }

/* Bootstrap grid fallback (if KC renders col-md-* wrappers) */
.contact-form-col .wpcf7 .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form-col .wpcf7 .col-md-12 { grid-column: 1 / -1; }

.contact-form-col .wpcf7 input:not([type="submit"]):not([type="hidden"]),
.contact-form-col .wpcf7 textarea,
.contact-form-col .wpcf7 select {
  width: 100%;
  border: 1px solid #d0c9c2;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 22px;
  background: #fff;
  color: var(--fg-black);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.contact-form-col .wpcf7 input:not([type="submit"]):focus,
.contact-form-col .wpcf7 textarea:focus {
  border-color: var(--fg-black);
}

.contact-form-col .wpcf7 textarea { min-height: 160px; resize: vertical; }

.contact-form-col .wpcf7 .wpcf7-submit {
  width: 100%;
  padding: 16px 32px;
  background: #003366;
  color: var(--fg-white);
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 0.01em;
}

.contact-form-col .wpcf7 .wpcf7-submit:hover { background: #002952; }

/* Info column */
.contact-info-col {
  width: 374px;
  flex-shrink: 0;
  background: rgba(210, 204, 198, 0.2);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* El .contact-info-wrap ya tiene fondo propio; dentro de .contact-info-col
   lo dejamos transparente para que ambos compartan el mismo gris. */
.contact-info-col .contact-info-wrap { background: transparent; border-radius: 0; padding: 0; margin-bottom: 0; }

.contact-info-title {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  color: var(--fg-black);
}

/* Contact data list */
.contact-data { display: flex; flex-direction: column; gap: 16px; }

.contact-data__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.contact-data__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-data__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--fg-black);
}

.contact-data__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 22px;
  color: var(--fg-black);
}

.contact-data__text a { color: var(--fg-black); text-decoration: none; }
.contact-data__text a:hover { text-decoration: underline; }

/* Social icons */
.contact-social { display: flex; gap: 10px; flex-wrap: wrap; }

.contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #003366;
  border-radius: 50%;
  transition: background 0.2s;
}

.contact-social a:hover { background: #002952; }

.contact-social a svg {
  width: 18px;
  height: 18px;
  fill: var(--fg-white);
}

/* Map */
.contact-map { width: 100%; }

.contact-map iframe,
.contact-map .amz-map-container,
.contact-map > div { display: block; width: 100%; }

/* =============================================================================
   21. History / Sobre FG page
   ============================================================================= */

/* Grid wrapper: three panels side by side */
.history-grid {
  display: flex;
  min-height: 540px;
  width: 100%;
}

/* ---- Fallback boxes (plugin amz no activo) ---- */
.history-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #222;
  text-decoration: none;
  transition: flex 0.4s ease;
}

.history-box:hover { flex: 1.08; }

.history-box__overlay {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s;
}

.history-box:hover .history-box__overlay { opacity: 0.7; }

.history-box__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.history-box__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 48px;
  color: var(--fg-white);
  text-align: center;
  letter-spacing: 0.04em;
}

.history-box__arrow {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--fg-white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}

.history-box:hover .history-box__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ---- amz plugin activo: estilos para el markup del plugin ---- */
.history-grid .background-box-wrap {
  flex: 1;
  transition: flex 0.4s ease;
}

.history-grid .background-box-wrap:hover { flex: 1.08; }

.history-grid .background-box-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 540px;
  background-size: cover;
  background-position: center;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

.history-grid .background-box-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity 0.3s;
}

.history-grid .background-box-cover.overlay-green::before  { background: rgba(93,109,94,0.55); }
.history-grid .background-box-cover.overlay-blue::before   { background: rgba(0,44,75,0.55); }
.history-grid .background-box-cover.overlay-brown::before  { background: rgba(182,125,23,0.55); }

.history-grid .background-box-cover:hover::before { opacity: 0.75; }

.history-grid .img-cover {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-grid .content-center-wrap,
.history-grid .content-center { display: flex; align-items: center; justify-content: center; }

.history-grid .background-box-cover .title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 48px;
  color: var(--fg-white);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
}

/* =============================================================================
   23. Product Category Page (template: templates/page-product-category.php)
   ============================================================================= */

.product-cats-page {
  padding: 60px var(--footer-px) 80px;
  max-width: var(--max-wide);
  margin: 0 auto;
  box-sizing: border-box;
}

.product-cats-header {
  margin-bottom: 48px;
}

.product-cats__title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 400;
  color: var(--fg-black);
  margin: 0;
}

/* Category grid */
.product-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Category card */
.product-cat-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-color: #c8c3bb;
  transition: transform 0.3s ease;
}

.product-cat-card:hover { transform: scale(1.015); }

.product-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.05) 60%);
  transition: background 0.3s;
}

.product-cat-card:hover .product-cat-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 70%);
}

.product-cat-card__body {
  position: relative;
  z-index: 1;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.product-cat-card__name {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 32px;
  color: #fff;
  font-weight: 400;
  margin: 0;
}

.product-cat-card__arrow {
  font-size: 22px;
  color: rgba(255,255,255,0.7);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}

.product-cat-card:hover .product-cat-card__arrow {
  transform: translateX(5px);
  color: #fff;
}

/* Collections page: large cards span 2 columns */
.collections-grid {
  grid-template-columns: repeat(3, 1fr);
}

.collections-grid .product-cat-card--large {
  grid-column: span 2;
  height: 380px;
}

.collections-grid .product-cat-card--medium {
  height: 380px;
}

/* =============================================================================
   23b. Search Overlay
   ============================================================================= */
/* Inline navbar search */
.navbar__search-inline {
  position: absolute;
  left: 160px; /* approx logo width + gap */
  right: 280px; /* approx icons width */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 0 14px 0 18px;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.navbar.is-search-open .navbar__search-inline {
  opacity: 1;
  pointer-events: auto;
}
.navbar.is-search-open .navbar__links {
  opacity: 0;
  pointer-events: none;
}
.navbar__search-inline input[type="search"] {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-black);
  padding: 10px 0;
  min-width: 0;
  caret-color: var(--fg-black);
}
.navbar__search-inline input[type="search"]::placeholder { color: #aaa; }
.navbar__search-inline button[type="submit"] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-black);
  display: flex;
  align-items: center;
  padding: 6px 0;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.navbar__search-inline button[type="submit"]:hover { opacity: 1; }
.navbar__search-inline button[type="submit"] svg { width: 20px; height: 20px; fill: currentColor; }

/* Legacy overlay (kept in DOM but no longer used) */
.search-overlay { display: none; }

/* =============================================================================
   24. Projects Page + Single Project
   ============================================================================= */
.projects-page {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 40px var(--footer-px) 80px;
  box-sizing: border-box;
}

.projects-hero {
  text-align: center;
  max-width: 770px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 55px);
  font-weight: 600;
  line-height: 1.16;
  color: var(--fg-black);
  margin: 0;
}

.projects-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.375;
  color: var(--fg-black);
  margin: 0;
}

.projects-page .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.projects-page .project-card {
  text-decoration: none;
  color: var(--fg-black);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projects-page .project-card:hover .project-card__title {
  text-decoration: underline;
}

.projects-page .project-card__img {
  height: 400px;
  overflow: hidden;
  background: rgba(210, 204, 198, 0.3);
  border-radius: 12px;
}

.projects-page .project-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.projects-page .project-card:hover .project-card__img img {
  transform: scale(1.03);
}

.projects-page .project-card__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.22;
  margin: 0;
  height: 43px;
  overflow: hidden;
}

/* Single project */
.project-single__banner {
  width: 100%;
  max-height: 560px;
  overflow: hidden;
  margin-top: 40px;
}

.project-single__banner-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

.project-single__breadcrumb {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 10px var(--footer-px) 0;
  box-sizing: border-box;
}

/* El contenido KC va full-width como en el resto de páginas KC.
   overflow:hidden contiene los floats internos de KC para que el footer
   no escape a la derecha del contenido. */
.project-single__content {
  overflow: hidden;
}

.project-single__clear {
  clear: both;
  display: block;
}

/* Reduce el padding interno del kc-container dentro de proyectos
   (KC lo sobreescribe a 1170px — lo dejamos respirar igual que otras páginas KC) */
.single-fg_projects .kc-row-container.kc-container {
  max-width: var(--max-wide);
  padding-left: var(--footer-px);
  padding-right: var(--footer-px);
}

.single-fg_projects .kc_text_block p,
.single-fg_collections .kc_text_block p {
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
}

.single-fg_projects .kc_text_block p:last-child,
.single-fg_collections .kc_text_block p:last-child { margin-bottom: 0 !important; }

/* Título del proyecto — son 2-3 <h2> consecutivos dentro del primer
   kc_text_block. El reset global (* { margin: 0 }) les quita todo el margen y
   la regla global de headings no define line-height, así que las líneas
   quedaban pegadas entre sí, al breadcrumb y al divisor de abajo. */
.single-fg_projects .project-single__content .kc_text_block h2 {
  line-height: 1.28;
}
.single-fg_projects .project-single__content .kc_text_block h2 + h2 {
  margin-top: 12px;
}
.single-fg_projects .project-single__content .kc_text_block h2:first-child {
  margin-top: 40px;
}
.single-fg_projects .project-single__content .kc_text_block h2:last-child {
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .single-fg_projects .project-single__content .kc_text_block h2 + h2        { margin-top: 8px; }
  .single-fg_projects .project-single__content .kc_text_block h2:first-child { margin-top: 24px; }
  .single-fg_projects .project-single__content .kc_text_block h2:last-child  { margin-bottom: 24px; }
}

/* Single colección — mismo tratamiento que proyectos */
.collection-single__breadcrumb {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 10px var(--footer-px) 0;
  box-sizing: border-box;
}

/* KC product-box shortcode (used in fg_collections content) */
.product-box-wrap {
  position: relative !important;
  display: block !important;
}

.product-box-con {
  position: absolute;
  top: auto;
  bottom: 269px;
  left: 185px;
  width: 390px;
}

.product-box-con.left-position .show-product {
  float: right;
}

.show-product {
  width: 35px;
  height: 35px;
  border: 2px solid var(--fg-black);
  display: inline-block;
  border-radius: 50px;
  text-align: center;
  line-height: 32px;
  float: left;
  position: relative;
  top: 34px;
  cursor: pointer;
}

.show-product i.fg-plus {
  background: #002c4b;
  color: #fff;
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 50px;
  line-height: 25px;
  margin: 3px auto;
  font-style: normal;
}

.show-product i.fg-plus::before {
  content: "+";
  font-size: 18px;
  line-height: 25px;
  display: block;
  text-align: center;
}

.product-box-content {
  background: #fff;
  padding: 24px 20px 30px;
  border: 2px solid #dbdbdb;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  width: 390px;
  max-width: 100%;
  margin-left: 54px;
  display: none;
  z-index: 9999;
}

.product-box-content.is-open { display: block; }

.product-box-con.left-position .product-box-content {
  margin-right: auto;
  margin-left: -54px;
}

.product-box-content::before {
  content: "";
  position: absolute;
  top: 40px;
  border-right: 10px solid #dbdbdb;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  left: -12px;
}

.product-box-con.left-position .product-box-content::before {
  border-right: transparent;
  border-left: 10px solid #dbdbdb;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  left: auto;
  right: -12px;
}

.product-box-content p {
  text-align: left;
  line-height: 1.2;
}

.product-box-content p.desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
}

.product-box-content .title {
  font-size: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 16px;
  width: 100%;
}

.product-box-content .btn {
  font-family: var(--font-body);
  display: block;
  background: #002c4b;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 10px 30px;
  border-radius: 50px;
  margin-top: 24px;
  border: 1px solid #002c4b;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.product-box-content .btn:hover {
  background: transparent;
  color: #002c4b;
}

/* Collection hero banner */
.collection-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  max-height: 800px;
  overflow: hidden;
}

.collection-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.collection-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: rgba(0, 0, 0, 0.25);
}

.collection-hero__title {
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 1;
  color: #fff;
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

.collection-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.collection-hero__scroll:hover { opacity: 1; }

.collection-single__content {
  overflow: hidden;
}

/* Las colecciones KC no usan .kc-container — el padding va en el wrapper */
.single-fg_collections .kc-row-container {
  padding-left: var(--footer-px) !important;
  padding-right: var(--footer-px) !important;
  box-sizing: border-box;
}

/* Si hubiera filas KC realmente full-width (con data-kc-fullwidth) respetamos su ancho */
.single-fg_collections section[data-kc-fullwidth] .kc-row-container,
.single-fg_collections section[data-kc-fullwidth="content"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =============================================================================
   22. Responsive — Tablet (≤1200px)
   ============================================================================= */
@media (max-width: 1200px) {
  :root {
    --navbar-px:  40px;
    --footer-px:  40px;
    --fs-hero:    48px;
    --lh-hero:    54px;
    --fs-h2:      40px;
    --lh-h2:      48px;
  }
  .navbar__links { display: none; }
  .navbar__toggle { display: flex; }

  .banner-overlay { padding: 100px 40px; }
  .hero__content,
  .home-banner__content { max-width: 360px; }

  .content-split { flex-direction: column; gap: 32px; padding: var(--s-section) var(--navbar-px); }
  .content-split--reverse { flex-direction: column; }
  .content-split__text { flex: 1 1 100%; width: 100%; max-width: 100%; padding: 0; }
  .content-split__img  { flex: 1 1 100%; width: 100%; height: 400px; }

  .footer-nav-cols { gap: 60px; }
  .footer-top { flex-wrap: wrap; }
  .footer-brand { width: 100%; align-items: flex-start; }

  .projects-grid { flex-wrap: wrap; }
  .project-card--featured .project-card__img { width: 100%; max-width: 506px; }

  .history-section { flex-direction: column; padding: var(--s-section) var(--navbar-px); }
  .history-section__content { width: 100%; }
  .history-section__imgs { width: 100%; height: 500px; }

  /* Blog archive tablet: 2 columns */
  .blog-archive__body { flex-direction: column; }
  .blog-archive__sidebar { width: 100%; }
  .blog-card { width: calc((100% - 20px) / 2); }

  /* Single post tablet */
  .post-single__header { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-single__featured { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-single__content { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-single__tags { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-single__nav { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-related { padding-left: var(--navbar-px); padding-right: var(--navbar-px); }
  .post-related__grid { flex-wrap: wrap; }
  .post-related__grid .blog-card { flex: none; width: calc((100% - 20px) / 2); }

  /* Product category + collections page tablet */
  .product-cats-grid,
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .product-cat-card,
  .collections-grid .product-cat-card--large,
  .collections-grid .product-cat-card--medium { height: 280px; }
  .collections-grid .product-cat-card--large { grid-column: span 2; }

  /* Cart / Checkout tablet */
  .cart_totals { width: 52% !important; }
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding: 40px var(--navbar-px) 60px !important; }

  form.woocommerce-checkout {
    grid-template-columns: 1fr 340px;
    column-gap: 32px;
  }

  .woocommerce-checkout-review-order { position: static; }

  /* Contact tablet */
  .contact-section { flex-direction: column; gap: 40px; }
  .contact-info-col { width: 100%; max-width: 560px; }

  /* KC form block tablet: collapse to single column */
  .kc-contact-form7 .row { grid-template-columns: 1fr; }
  .kc-contact-form7 .col-md-6 { grid-column: 1 / -1; }

  /* KC columns: stack on tablet */
  .kc_col-sm-7,
  .kc_col-sm-5,
  .kc_col-sm-4,
  .kc_col-sm-8 { width: 100% !important; }

  /* KC 4-col step sections: 2 columns on tablet */
  .kc_col-sm-3 { width: 50% !important; }

  /* Widened KC container: reduce padding */
  .kc-row-container.kc-container {
    padding-left:  var(--navbar-px) !important;
    padding-right: var(--navbar-px) !important;
  }

  /* Cat archive tablet: 2 columns */
  .cat-archive__title { font-size: 40px; line-height: 48px; }
  .cat-card { width: calc((100% - 20px) / 2); }

  /* History page tablet: stack vertically */
  .history-grid { flex-direction: column; min-height: unset; }
  .history-box,
  .history-grid .background-box-cover { min-height: 260px; height: 260px; }
  .history-grid .background-box-wrap { flex: none; }

  /* Product page tablet */
  .product-main__inner { flex-direction: column; gap: 40px; padding: 0 var(--navbar-px); }
  .product-gallery__main { width: 100%; height: 500px; }
  .product-gallery { width: 100%; }
  .product-info { width: 100%; }
  .product-guarantee-section__inner { flex-direction: column; gap: 40px; }
  .product-guarantee-section__divider { width: 100%; height: 2px; align-self: auto; }
  .product-measurements { width: 100%; }
  .product-collection { flex-direction: column; gap: 40px; padding: 40px var(--navbar-px); }
  .product-collection__text { max-width: 100%; }
  .product-collection__img { width: 100%; height: 400px; }
  .product-card { width: calc(50% - 10px); }
  .product-card__inner { height: 300px; }
  /* Carousel tablet: 2 visible */
  .product-related__carousel--active .product-card { flex: 0 0 calc((100% - 20px) / 2); }
  /* Proyectos: 2 tarjetas en tablet, mismo criterio que el carrusel de
     relacionados. El descuento de 20px es el gap del track. */
  .projects-carousel .project-card { width: calc((100% - 20px) / 2); }

  /* Slides de la home: 3 tarjetas en tablet (2 huecos de 20px). */
  .home-carousel .category-card {
    flex: 0 0 calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
  }
  .product-related { padding-left: 20px; padding-right: 20px; }
}

/* =============================================================================
   18. Responsive — Mobile (≤768px)
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    --navbar-px:  20px;
    --footer-px:  20px;
    --s-section:  40px;
    --fs-hero:    36px;
    --lh-hero:    42px;
    --fs-h2:      30px;
    --lh-h2:      36px;
    --fs-h3:      24px;
  }

  .hero,
  .home-banner { height: 480px; }

  .banner-overlay { padding: 60px 20px; }
  .hero__content,
  .home-banner__content { max-width: 280px; }

  /* Slides de la home: 2 tarjetas en móvil CON las flechas visibles. Entre las
     dos flechas de 44px y los márgenes queda poco ancho útil, así que se
     recortan paddings y gaps para que las tarjetas no salgan minúsculas.
     A 375px: 375 - 24 (padding) - 88 (flechas) - 12 (gaps del inner) = 251px
     de pista → (251 - 12) / 2 ≈ 120px por tarjeta. */
  .home-carousel__inner { padding: 0 12px; gap: 6px; }
  .home-carousel__track { gap: 12px; }
  .home-carousel__track-wrap { overflow: hidden; }
  .home-carousel .category-card {
    flex: 0 0 calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
  }
  /* Se quita el height fijo de 380px para que vuelva a mandar el
     aspect-ratio 1/1 y las tarjetas no queden como torres estrechas. */
  .home-carousel .category-card { height: auto; }
  /* 20px no caben en una tarjeta de 120px: "Soft seating" se desbordaba. */
  .category-card__name { font-size: 13px; padding-bottom: 10px; }

  /* Proyectos — carrusel horizontal en mobile */
  .projects-section { padding: var(--s-section) 0; width: 100%; align-items: flex-start; }
  .projects-section__header,
  .projects-section > .btn { padding-left: 20px; padding-right: 20px; }
  /* La sección pasa a align-items:flex-start y el botón es hijo directo,
     así que hay que centrarlo explícitamente. */
  .projects-section > .btn { align-self: center; }
  /* 1 tarjeta a pantalla completa en móvil (en tablet son 2, arriba). */
  .projects-carousel .project-card { width: 100%; }
  .projects-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding: 0 20px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
  }
  .projects-grid::-webkit-scrollbar { display: none; }
  /* card: ancho fijo, contiene desbordamientos internos */
  .project-card,
  .project-card--featured { flex: none; width: calc(100vw - 60px); min-width: 0; overflow: hidden; scroll-snap-align: start; }
  .project-card a { display: block; width: 100%; }
  /* imagen: resetea los px del desktop */
  .project-card .project-card__img,
  .project-card--featured .project-card__img { width: 100%; max-width: 100%; height: 260px; object-fit: cover; }

  /* Blog — grid magazine en mobile (como Figma):
     [promo — ancho completo]
     [art.1]  [art.2]
     [art.3 — ancho completo]          */
  .blog-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: var(--s-section) 20px;
    align-items: start;
  }
  /* Bloque naranja: fila 1, ancho completo */
  .blog-promo {
    grid-column: 1 / 3;
    grid-row: 1;
    width: auto;
    height: auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
  }
  .blog-promo__title {
    position: static;
    font-size: 26px;
    line-height: 32px;
    width: auto;
    margin-bottom: 16px;
  }
  .blog-promo__btn { position: static; width: fit-content; align-self: flex-start; }
  /* Artículos 1 y 2: fila 2, dos columnas */
  .blog-section > .blog-article:nth-child(2) { grid-column: 1; grid-row: 2; }
  .blog-section > .blog-article:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* Artículo 3: fila 3, ancho completo */
  .blog-section > .blog-article:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  .blog-article { width: auto; max-width: none; }
  .blog-article__img { width: 100%; max-width: none; height: 120px; }
  .blog-article__title { font-size: 13px; line-height: 18px; }
  .blog-section > .blog-article:nth-child(4) .blog-article__img { height: 200px; }
  .blog-section > .blog-article:nth-child(4) .blog-article__title { font-size: 16px; line-height: 22px; }

  /* Blog archive mobile: 1 column */
  .blog-card { width: 100%; max-width: 375px; }

  /* Single post mobile */
  .post-single__title { font-size: 28px; line-height: 34px; }
  .post-single__featured-img { aspect-ratio: 4 / 3; border-radius: 8px; }
  .post-single__nav { flex-direction: column; gap: 24px; }
  .post-single__nav-item--next { text-align: left; margin-left: 0; }
  .post-related__grid .blog-card { width: 100%; max-width: 375px; }

  /* Cart / Checkout mobile */
  .cart_totals { width: 100% !important; float: none !important; margin-top: 32px; }
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding: 24px var(--navbar-px) 48px !important; }
  .coupon input.input-text { width: 140px; }
  table.shop_table.cart th.product-price,
  table.shop_table.cart th.product-thumbnail { display: none; }

  form.woocommerce-checkout {
    grid-template-columns: 1fr;
  }

  #customer_details { grid-column: 1; grid-row: 1; }
  #order_review     { grid-column: 1; grid-row: 2; }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .form-row-first,
  .form-row-last { grid-column: 1; }

  /* Contact mobile */
  .contact-title { font-size: 36px; line-height: 44px; }
  .contact-form-col .wpcf7 .row { grid-template-columns: 1fr; }
  .contact-form-col .wpcf7 .col-md-6 { grid-column: 1 / -1; }
  .contact-info-col { width: 100%; }

  /* Cat archive mobile: 1 column */
  .cat-archive__title { font-size: 30px; line-height: 36px; }
  .cat-card { width: 100%; max-width: 375px; }

  /* History page mobile */
  .history-box__title,
  .history-grid .background-box-cover .title { font-size: 28px; line-height: 34px; }
  .history-box,
  .history-grid .background-box-cover { min-height: 200px; height: 200px; }

  /* Projects page mobile */
  .projects-page .projects-grid { grid-template-columns: 1fr 1fr; }
  .projects-page .project-card__img { height: 280px; }

  /* Product category + collections page mobile */
  .projects-page .projects-grid { grid-template-columns: 1fr; }
  .product-cats-grid,
  .collections-grid { grid-template-columns: 1fr; }
  .product-cat-card,
  .collections-grid .product-cat-card--large,
  .collections-grid .product-cat-card--medium { height: 240px; grid-column: span 1; }
  .product-cat-card__name { font-size: 22px; }

  /* KC columns: all full-width on mobile */
  .kc_col-sm-7, .kc_col-sm-5,
  .kc_col-sm-4, .kc_col-sm-8,
  .kc_col-sm-3, .kc_col-sm-6 { width: 100% !important; }

  .kc-row-container.kc-container {
    padding-left:  var(--navbar-px) !important;
    padding-right: var(--navbar-px) !important;
  }

  section[data-kc-fullwidth="content"] h1.kc_title,
  section[data-kc-fullwidth="content"] h2.kc_title {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  .history-section__imgs { height: 350px; }
  .history-section__img { width: 55%; height: 240px; }

  /* Footer accordion mobile */
  .footer-top { flex-direction: column; }
  .footer-nav-cols { flex-direction: column; gap: 0; width: 100%; flex-shrink: 1; }
  .footer-contact { min-width: unset; width: 100%; gap: 0; }
  .footer-col { gap: 0; width: 100%; }

  .footer-col__heading,
  .footer-contact__heading {
    cursor: pointer;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 20px;
    justify-content: center;
    gap: 12px;
  }
  .footer-col__icon {
    display: block;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .footer-col.is-open .footer-col__icon,
  .footer-contact.is-open .footer-col__icon { transform: rotate(45deg); }

  .footer-col__body { display: none; padding: 16px 0 8px; text-align: center; }
  .footer-col.is-open .footer-col__body,
  .footer-contact.is-open .footer-col__body { display: block; }

  .footer-col__list { align-items: center; }
  .footer-contact__items { align-items: center; }

  /* Brand / newsletter centered on mobile */
  .footer-brand { align-items: center; width: 100%; }
  .footer-brand__logo { max-width: 260px; }
  .footer-newsletter { align-items: center; text-align: center; }
  .footer-newsletter__form { flex-direction: column; width: 100%; }
  .footer-newsletter__input { width: 100%; box-sizing: border-box; }
  .footer-newsletter__btn { width: 100%; text-align: center; }

  .woocommerce ul.products li.product { width: calc(50% - 10px) !important; }

  .woocommerce-page .woocommerce,
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding: var(--s-section) 20px; }

  /* Product page mobile */
  .product-gallery__main { height: 320px; }
  .product-gallery__thumbs { display: none; }
  .product-actions .cart { flex-direction: column; }
  .product-qty { width: 100%; justify-content: center; }
  .product-actions .single_add_to_cart_button { width: 100%; }
  .product-guarantee__grid { justify-content: center; }
  .guarantee-item { width: 160px; }
  .product-card { width: 100%; max-width: 375px; }
  .product-card__inner { height: 400px; }
  /* Carousel mobile: 1.3 visible (muestra que hay más) */
  .product-related__carousel--active .product-card { flex: 0 0 calc(100% / 1.3); }
  .product-related__arrow { width: 36px; height: 36px; }
  .product-related { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 480px) {
  .woocommerce ul.products li.product { width: 100% !important; }
  .navbar__icons .navbar__language { display: none; }
}

/* =============================================================================
   AMZ Blog/Insight Grid shortcode
   ============================================================================= */
.amz-blog-grid {
  display: grid;
  gap: 20px;
  padding: 40px var(--footer-px);
  max-width: calc(var(--max-wide) + 2 * var(--footer-px));
  margin: 0 auto;
  box-sizing: border-box;
}
.amz-blog-grid--col3 { grid-template-columns: repeat(3, 1fr); }
.amz-blog-grid--col2 { grid-template-columns: repeat(2, 1fr); }

.amz-blog-card { display: flex; flex-direction: column; gap: 12px; }

.amz-blog-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.amz-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.amz-blog-card__img--empty { background: var(--fg-card-bg); width: 100%; height: 100%; }
.amz-blog-card__img-wrap:hover .amz-blog-card__img { transform: scale(1.03); }

.amz-blog-card__body { display: flex; flex-direction: column; gap: 6px; }
.amz-blog-card__cat { font-size: var(--fs-sm); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.amz-blog-card__title { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-lg); color: var(--fg-black); }
.amz-blog-card__title a { color: inherit; text-decoration: none; }
.amz-blog-card__title a:hover { text-decoration: underline; }
.amz-blog-card__date { font-size: var(--fs-sm); color: var(--fg-muted); }

@media (max-width: 768px) {
  .amz-blog-grid--col3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .amz-blog-grid--col3,
  .amz-blog-grid--col2 { grid-template-columns: 1fr; }
  .amz-blog-grid { padding: 40px 20px; }
}

@media (max-width: 768px) {
  .collection-hero { height: 60vh; min-height: 320px; }
  .collection-hero__title { font-size: 48px; }
}

/* =============================================================================
   18. Páginas KC heredadas — coherencia tipográfica y visual
       /quienes/ (471) · /history-list/ (168) · /calidadfg/ (209)
   ============================================================================= */

/* --- Fuente global en todos los .kc_title KC --- */
.kc_title,
.kc_title a.kc_title_link {
  font-family: var(--font-heading) !important;
  color: var(--fg-black);
}

/* --- Texto KC: eliminar Nordiak/Roboto heredados --- */
.kc_text_block,
.kc_text_block p,
.kc_text_block li {
  font-family: var(--font-body) !important;
}

/* --- Botones KC: estilo coherente con el resto del sitio --- */
a.kc_button,
button.kc_button {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  background-color: #003366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  cursor: pointer !important;
}
a.kc_button:hover,
button.kc_button:hover {
  background-color: #002952 !important;
  color: #fff !important;
}

/* --- Banners sub-cabecera (temporalmente visibles para revisión) --- */
/* .page-id-471 .kc-css-622776,
.page-id-209 .kc-css-799766 { display: none; } */

/* --- /quienes/ — ajustes específicos --- */
/* El título principal es muy grande (87px KC inline); lo moderamos */
.page-id-471 .kc-css-641336.kc_title,
.page-id-471 .kc-css-641336 .kc_title {
  font-size: clamp(42px, 6vw, 70px) !important;
  padding-right: var(--footer-px) !important;
  padding-left: var(--footer-px) !important;
  padding-bottom: 40px !important;
  margin-bottom: 20px !important;
}

/* Párrafos de texto a tamaño coherente */
.page-id-471 .kc-css-540947,
.page-id-471 .kc-css-540947 p {
  font-size: var(--fs-lg) !important;
  line-height: 26px !important;
}

/* --- /history-list/ — timeline --- */

/* KC fullheight (data-kc-fullheight="middle-content") hace que cada fila ocupe
   el alto del viewport. Con las columnas vacías el contenido queda suspendido
   en el centro dejando enormes espacios. Lo neutralizamos con !important
   que sobrescribe el min-height inline que KC JS inyecta. */
.page-id-168 .kc_row.con-center {
  min-height: 0 !important;
  height: auto !important;
}
.page-id-168 .kc_row.con-center .kc-row-container {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.page-id-168 .kc_row.con-center .kc-wrap-columns {
  align-items: flex-start !important;
}

/* Títulos de cada hito en Reckless, tamaño legible */
.page-id-168 .kc_title {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

/* Texto de cada hito */
.page-id-168 .kc_text_block,
.page-id-168 .kc_text_block p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Año inyectado vía JS */
.history-year-label {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--fg-black);
  padding-top: 4px;
}

/* Responsive: columnas KC no colapsan solas en móvil → forzar 100% */
@media (max-width: 767px) {
  .page-id-168 .kc_row.con-center .kc_column {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
  .page-id-168 .kc_row.con-center .kc-row-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .page-id-168 .kc_row.con-center .year-posation {
    margin-bottom: 8px;
  }
}

/* --- /calidadfg/ — ajustes específicos --- */

/* KC inline aplica margin-top:-65px en el hero y en la sección "Compromiso"
   para que se superpongan al banner anterior. Con nuestro diseño eso desalinea
   el contenido respecto al banner — lo neutralizamos. */
.page-id-209 .kc-css-145236 { margin-top: 0 !important; }
.page-id-209 .kc-css-743920 { margin-top: 0 !important; }

/* Título principal hero: KC inline = 87px → escala a nuestro sistema */
.page-id-209 .kc-css-481759.kc_title,
.page-id-209 .kc-css-481759 .kc_title {
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 1.1 !important;
}

/* Texto intro del hero: KC inline = 25px font-weight:300 → normalizar */
.page-id-209 .kc-css-7290,
.page-id-209 .kc-css-7290 p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Heading CERTIFICADOS (h2 dentro de kc_text_block) */
.page-id-209 .kc-css-63677 h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  color: var(--fg-black) !important;
  letter-spacing: 0.05em;
}

/* Títulos de sección: KC inline = 60px → escalar */
.page-id-209 .kc-css-729426.kc_title,
.page-id-209 .kc-css-729426 .kc_title,
.page-id-209 .kc-css-55362.kc_title,
.page-id-209 .kc-css-55362 .kc_title,
.page-id-209 .kc-css-813705.kc_title,
.page-id-209 .kc-css-813705 .kc_title {
  font-size: clamp(26px, 3.2vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* h5 subtítulos internos (Primeras calidades, Soldaduras, Ergonomía…) */
.page-id-209 h5.kc_title,
.page-id-209 h5.kc_title a.kc_title_link {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

/* Bloques de texto: KC inline = 18-25px → normalizar a body size */
.page-id-209 .kc_text_block,
.page-id-209 .kc_text_block p,
.page-id-209 .kc_text_block li {
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* h5 dentro de kc_text_block (texto bold largo) */
.page-id-209 .kc_text_block h5 {
  font-family: var(--font-body-bold) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

/* Imágenes con cantos redondeados */
.page-id-209 .kc_single_image img { border-radius: 12px; }

/* =============================================================================
   19. /aula-futuro/ (page-id-11659)
   ============================================================================= */
.page-id-11659 .kc-css-774797 .kc_title,
.page-id-11659 .kc-css-774797 h3.kc_title { color: #fff !important; }

/* =============================================================================
   20. /diseno-espacios/ (page-id-26298)
   ============================================================================= */
.page-id-26298 .kc-css-455989 { margin-bottom: 32px !important; }