/* ===================================================================
   WOODEN PANEL® — Design System
   Sprint 1: tokens + base + componentes base
   Cargar después de base.css (Dawn) para que sobrescriba donde aplique.
   Mobile-first. Breakpoints: 768px, 1024px, 1440px.
   =================================================================== */

/* -------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------- */
:root {
  /* Fondos */
  --wp-bg-primary: #F4EFE8;     /* crema calido (medido de naturewall), fondo dominante */
  --wp-bg-secondary: #FFFFFF;   /* blanco, bandas de contenido y cards */
  --wp-bg-dark: var(--wp-olivo); /* olivo de marca, secciones oscuras */
  --wp-bg-card: #FFFFFF;        /* blanco puro, productos */

  /* Tinta */
  --wp-ink-primary: #141414;    /* texto principal (casi negro) */
  --wp-ink-secondary: #5F5C55;  /* texto secundario, captions */
  --wp-ink-inverse: #F5F1EA;    /* texto sobre fondo oscuro */

  /* Paleta de marca: Olivo · Roble · Crema (olivo alineado al logo v2) */
  --wp-olivo: #807A60;
  --wp-olivo-dark: #635E4A;
  --wp-roble: #B97C4B;
  --wp-crema: #EFEAD9;

  /* Acentos madera (alineados a la paleta) */
  --wp-accent-walnut: #5C3D2A;       /* nogal oscuro, acento de texto */
  --wp-accent-oak: var(--wp-roble);  /* roble, hover, highlights */

  /* CTA (medidos de naturewall): principal negro-olivo, conversion olivo */
  --wp-cta: #1B1908;
  --wp-cta-hover: #626A28;
  --wp-sale: #F75C46;          /* coral ofertas/badges */

  /* Verde olivo de marca (del logo) */
  --wp-brand-olive: var(--wp-olivo);

  /* Color de titulares (sobre fondo claro). Olivo de marca. */
  --wp-heading: var(--wp-ink-primary); /* titulares en negro (naturewall); olivo queda en CTAs */

  /* Acabados de marca (8 fieltros + 4 chapas) — tokens para acentos.
     Fondo neutro sigue dominando; estos entran en dosis. */
  --wp-felt-lino: #E6DFD2;
  --wp-felt-beige: #C9BCA6;
  --wp-felt-taupe: #9C9384;
  --wp-felt-gris: #8A8E8C;
  --wp-felt-marmol: #C3CFD2;
  --wp-felt-verde: #5A6B3B;
  --wp-felt-azul: #2E3A5C;
  --wp-felt-negro: #1C1A18;
  --wp-wood-patina: #DCD2C0;
  --wp-wood-roble: #C9A878;
  --wp-wood-nogal: #8A6A4B;
  --wp-wood-encina: #2E2823;

  /* Funcionales */
  --wp-line: #E5E3DE;           /* bordes, separadores */
  --wp-success: #5A7A4A;        /* confirmaciones */
  --wp-warning: #B85C38;        /* alertas */

  /* Tipografía (metodologia naturewall): serif display delgada + sans humanista */
  --wp-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp-font-ui: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tipografía — escala fluida */
  --wp-type-display-xl: clamp(3.5rem, 7vw, 6.5rem);
  --wp-type-display-l: clamp(2.5rem, 5vw, 4rem);
  --wp-type-display-m: clamp(2rem, 4vw, 3rem);
  --wp-type-display-s: clamp(1.5rem, 3vw, 2rem);
  --wp-type-body-l: 1.125rem;
  --wp-type-body: 1rem;
  --wp-type-caption: 0.875rem;
  --wp-type-micro: 0.75rem;

  /* Espaciado (8px grid) */
  --wp-space-xs: 0.5rem;   /* 8px  */
  --wp-space-s: 1rem;      /* 16px */
  --wp-space-m: 1.5rem;    /* 24px */
  --wp-space-l: 2.5rem;    /* 40px */
  --wp-space-xl: 4rem;     /* 64px */
  --wp-space-2xl: 6rem;    /* 96px */
  --wp-space-3xl: 10rem;   /* 160px */

  /* Grilla */
  --wp-max-width: 1520px;
  --wp-gutter: max(3.5vw, 20px);
  --wp-section-gap: var(--wp-space-2xl); /* mobile por defecto */

  /* Sombras (sutiles, nunca pronunciadas) */
  --wp-shadow-soft: 0 2px 12px rgba(28, 26, 23, 0.06);
  --wp-shadow-card: 0 8px 24px rgba(28, 26, 23, 0.08);

  /* Transiciones */
  --wp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wp-transition: 400ms var(--wp-ease);
}

@media screen and (min-width: 1024px) {
  :root {
    --wp-section-gap: var(--wp-space-3xl); /* desktop */
  }
}

/* -------------------------------------------------------------------
   2. RESET / BASE TIPOGRÁFICO
   ------------------------------------------------------------------- */
.wp {
  font-family: var(--wp-font-ui);
  font-weight: 400;
  color: var(--wp-ink-primary);
  background-color: var(--wp-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Titulares — grotesca neutra (Inter), peso medio, sentence case */
.wp h1,
.wp h2,
.wp h3,
.wp .wp-display-xl,
.wp .wp-display-l,
.wp .wp-display-m,
.wp .wp-display-s {
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-feature-settings: 'liga' 1, 'kern' 1;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--wp-heading);
  margin: 0;
}

/* -------------------------------------------------------------------
   3. UTILIDADES TIPOGRÁFICAS
   ------------------------------------------------------------------- */
.wp-display-xl { font-size: var(--wp-type-display-xl); font-weight: 500; }
.wp-display-l  { font-size: var(--wp-type-display-l); }
.wp-display-m  { font-size: var(--wp-type-display-m); }
.wp-display-s  { font-size: var(--wp-type-display-s); }

.wp-body-l {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body-l);
  line-height: 1.65;
  font-weight: 300;
}
.wp-body {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
  line-height: 1.65;
  font-weight: 400;
}
.wp-caption {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  line-height: 1.5;
  color: var(--wp-ink-secondary);
}
.wp-micro {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.wp-ink-secondary { color: var(--wp-ink-secondary); }
.wp-italic { font-style: italic; }

/* -------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------- */
.wp-container {
  width: 100%;
  max-width: var(--wp-max-width);
  margin-inline: auto;
  padding-inline: var(--wp-gutter);
  box-sizing: border-box;
}

.wp-section {
  padding-block: var(--wp-section-gap);
}

.wp-grid {
  display: grid;
  gap: var(--wp-space-m);
}

/* Splits responsive — stack mobile, 2 columnas desde 768 */
.wp-split {
  display: grid;
  gap: var(--wp-space-l);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .wp-split { grid-template-columns: 1fr 1fr; gap: var(--wp-space-xl); align-items: center; }
  .wp-split--60-40 { grid-template-columns: 6fr 4fr; }
  .wp-split--50-50 { grid-template-columns: 1fr 1fr; }
}

/* Esquemas de color de sección */
.wp-on-cream      { background-color: var(--wp-bg-primary); color: var(--wp-ink-primary); }
.wp-on-cream-soft { background-color: var(--wp-bg-secondary); color: var(--wp-ink-primary); }
.wp-on-dark       { background-color: var(--wp-bg-dark); color: var(--wp-ink-inverse); --wp-heading: var(--wp-ink-inverse); }
/* Override de color en oscuro. Incluye las utilidades .wp-display-* porque el
   reset base las matchea con especificidad (0,0,2,0) y ganaría si no las cubrimos. */
.wp-on-dark h1,
.wp-on-dark h2,
.wp-on-dark h3,
.wp-on-dark .wp-display-xl,
.wp-on-dark .wp-display-l,
.wp-on-dark .wp-display-m,
.wp-on-dark .wp-display-s { color: var(--wp-ink-inverse); }

/* -------------------------------------------------------------------
   5. BOTONES
   Editorial / sobrio: cuadrados (sin border-radius), sin sombra fuerte.
   ------------------------------------------------------------------- */
.wp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--wp-space-xs);
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  text-decoration: none;
  line-height: 1;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--wp-transition), color var(--wp-transition),
    border-color var(--wp-transition);
  -webkit-appearance: none;
  appearance: none;
}

/* Primario — negro-olivo (add-to-cart naturewall), hover olivo conversion */
.wp-btn--primary {
  background-color: var(--wp-cta);
  color: #FFFFFF;
  border-color: var(--wp-cta);
}
.wp-btn--primary:hover,
.wp-btn--primary:focus-visible {
  background-color: var(--wp-cta-hover);
  border-color: var(--wp-cta-hover);
  color: #FFFFFF;
}
/* Sobre fondo oscuro: relleno crema + texto carbón para que no se funda con el fondo */
.wp-on-dark .wp-btn--primary {
  background-color: var(--wp-ink-inverse);
  color: var(--wp-ink-primary);
  border-color: var(--wp-ink-inverse);
}
.wp-on-dark .wp-btn--primary:hover,
.wp-on-dark .wp-btn--primary:focus-visible {
  background-color: var(--wp-accent-oak);
  border-color: var(--wp-accent-oak);
  color: var(--wp-ink-primary);
}

/* Secundario — outline olivo, hover rellena */
.wp-btn--secondary {
  background-color: transparent;
  color: var(--wp-olivo);
  border-color: var(--wp-olivo);
}
.wp-pdp__manual { color: var(--wp-olivo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Cantidad + botón de la calculadora emergente */
.wp-qty-fila { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.wp-qty-calc { padding: 10px 14px; font-size: 0.85rem; flex: 1 1 auto; background-color: var(--wp-bg-card); }
/* Ventana emergente de la calculadora de la ficha */
.wp-calc-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wp-calc-modal[hidden] { display: none; }
.wp-calc-modal__velo { position: absolute; inset: 0; background: rgba(23, 27, 26, 0.5); }
.wp-calc-modal__caja { position: relative; z-index: 1; background: var(--wp-bg-card); max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 6px; }
.wp-calc-modal__caja .wp-product__calc { max-width: none; border: 0; padding-top: var(--wp-space-m); }
.wp .wp-calc-modal__caja .wp-product__calc h2 { margin-bottom: 4px; padding-right: 28px; } /* título más arriba, sin chocar con la × */
.wp-calc-sub { margin: 0 0 var(--wp-space-m); }
.wp-calc-nota-muros { margin: calc(-1 * var(--wp-space-s)) 0 var(--wp-space-m); }
/* Tamaño del panel: fijo (según la elección de la ficha) y centrado en su cuadro */
.wp-product__calc .wp-field__select { text-align: center; text-align-last: center; padding: 1rem; }
.wp-calc-modal__cerrar { position: absolute; top: 10px; right: 12px; z-index: 2; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--wp-ink-secondary); }
.wp-calc-modal__cerrar:hover { color: var(--wp-ink-primary); }
.wp-calc-plano { margin: var(--wp-space-s) 0; background: var(--wp-bg-secondary); padding: 10px; }
.wp-calc-plano svg { display: block; width: 100%; height: auto; max-height: 340px; }

/* Ficha técnica bajo el CTA de cotizar: fondo blanco */
.wp-btn--secondary.wp-btn--ficha { margin-top: 8px; background-color: var(--wp-bg-card); }
.wp-btn--secondary:hover,
.wp-btn--secondary:focus-visible {
  background-color: var(--wp-olivo);
  color: var(--wp-ink-inverse);
}
/* Variante sobre fondo oscuro */
.wp-on-dark .wp-btn--secondary {
  color: var(--wp-ink-inverse);
  border-color: var(--wp-ink-inverse);
}
.wp-on-dark .wp-btn--secondary:hover,
.wp-on-dark .wp-btn--secondary:focus-visible {
  background-color: var(--wp-ink-inverse);
  color: var(--wp-ink-primary);
}

/* Ghost — solo texto con underline animado */
.wp-btn--ghost {
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  color: var(--wp-accent-walnut);
  position: relative;
}
.wp-btn--ghost::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp-transition);
}
.wp-btn--ghost:hover::after,
.wp-btn--ghost:focus-visible::after {
  transform: scaleX(1);
}
.wp-on-dark .wp-btn--ghost { color: var(--wp-accent-oak); }

.wp-btn--block { width: 100%; }

/* -------------------------------------------------------------------
   6. TAG / LABEL
   ------------------------------------------------------------------- */
.wp-tag {
  display: inline-block;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp-accent-walnut);
  padding-bottom: var(--wp-space-xs);
}
.wp-on-dark .wp-tag { color: var(--wp-ink-inverse); }

/* -------------------------------------------------------------------
   7. CARD DE PRODUCTO
   ------------------------------------------------------------------- */
.wp-card-product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: var(--wp-bg-card);
  transition: transform var(--wp-transition), box-shadow var(--wp-transition);
}
.wp-card-product:hover,
.wp-card-product:focus-visible {
  transform: scale(1.02);
  box-shadow: var(--wp-shadow-card);
}
.wp-card-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--wp-bg-secondary);
}
.wp-card-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--wp-ease);
}
.wp-card-product:hover .wp-card-product__media img {
  transform: scale(1.05);
}
.wp-card-product__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--wp-space-m);
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wp-ink-inverse);
  background: linear-gradient(to top, rgba(28, 26, 23, 0.45), transparent 55%);
  opacity: 0;
  transition: opacity var(--wp-transition);
}
.wp-card-product:hover .wp-card-product__overlay,
.wp-card-product:focus-visible .wp-card-product__overlay {
  opacity: 1;
}
.wp-card-product__body {
  padding: var(--wp-space-m) var(--wp-space-s) var(--wp-space-l);
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-xs);
}
.wp-card-product__title {
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-size: var(--wp-type-display-s);
  line-height: 1.1;
}
.wp-card-product__spec {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  color: var(--wp-ink-secondary);
  margin: 0;
}
.wp-card-product__price {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
  font-weight: 500;
  margin: 0;
  margin-top: var(--wp-space-xs);
}

/* -------------------------------------------------------------------
   8. INPUT CON LABEL FLOTANTE
   ------------------------------------------------------------------- */
.wp-field {
  position: relative;
  margin-bottom: var(--wp-space-m);
}
.wp-field__input,
.wp-field__select,
.wp-field__textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
  color: var(--wp-ink-primary);
  background-color: transparent;
  border: 1px solid var(--wp-line);
  border-radius: 0;
  padding: 1.4rem 1rem 0.6rem;
  transition: border-color var(--wp-transition);
  -webkit-appearance: none;
  appearance: none;
}
.wp-field__textarea { min-height: 7rem; resize: vertical; padding-top: 1.6rem; }
.wp-field__input:focus,
.wp-field__select:focus,
.wp-field__textarea:focus {
  outline: none;
  border-color: var(--wp-accent-walnut);
}
.wp-field__label {
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
  color: var(--wp-ink-secondary);
  pointer-events: none;
  transition: transform var(--wp-transition), font-size var(--wp-transition),
    color var(--wp-transition);
  transform-origin: left top;
}
.wp-field__input:focus + .wp-field__label,
.wp-field__input:not(:placeholder-shown) + .wp-field__label,
.wp-field__textarea:focus + .wp-field__label,
.wp-field__textarea:not(:placeholder-shown) + .wp-field__label,
.wp-field__select:valid + .wp-field__label {
  transform: translateY(-0.85rem) scale(0.75);
  color: var(--wp-accent-walnut);
}
.wp-field__required { color: var(--wp-warning); }

/* -------------------------------------------------------------------
   9. ACCESIBILIDAD — focus visible
   ------------------------------------------------------------------- */
.wp a:focus-visible,
.wp button:focus-visible,
.wp input:focus-visible,
.wp select:focus-visible,
.wp textarea:focus-visible,
.wp [tabindex]:focus-visible {
  outline: 2px solid var(--wp-accent-walnut);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   10. FADE-IN AL ENTRAR EN VIEWPORT (IntersectionObserver)
   ------------------------------------------------------------------- */
.wp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--wp-ease), transform 700ms var(--wp-ease);
  will-change: opacity, transform;
}
.wp-reveal.wp-reveal--in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================================================
   SPRINT 2 — SECCIONES DE HOME
   =================================================================== */

.wp-icon { flex: none; }

/* ---- 1. Hero ----------------------------------------------------- */
.wp-hero {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--wp-bg-primary);
}
.wp-hero__media { position: relative; min-height: 62vw; }
.wp-hero__media img,
.wp-hero__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-hero__placeholder {
  background:
    repeating-linear-gradient(90deg, #b9966a 0 8px, #a9855c 8px 10px),
    var(--wp-accent-oak);
}
.wp-hero__content {
  display: flex;
  align-items: center;
  padding: var(--wp-space-2xl) var(--wp-gutter);
}
.wp-hero__inner { max-width: 36rem; }
.wp-hero .wp-hero__title {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);   /* más contenido que el display-xl */
  font-weight: 500;
  margin: var(--wp-space-s) 0;
}
.wp-hero__lead { margin: 0 0 var(--wp-space-l); color: var(--wp-ink-secondary); }
.wp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wp-space-s); }

@media screen and (min-width: 768px) {
  .wp-hero { grid-template-columns: 1fr 1fr; min-height: 88vh; }
  .wp-hero__media { min-height: 100%; }
}

/* Variante cover: foto full-bleed con texto encima (estilo woodupp) */
.wp-hero--cover {
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: 66vh;
  overflow: hidden;
}
.wp-hero--cover .wp-hero__media {
  position: absolute;
  inset: 0;
  min-height: 0;
}
.wp-hero--cover .wp-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velo para legibilidad del texto sobre la foto */
.wp-hero--cover .wp-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 26, 23, 0.72), rgba(28, 26, 23, 0.18) 55%, rgba(28, 26, 23, 0) 80%);
}
.wp-hero--cover .wp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--wp-space-2xl) var(--wp-space-xl);
  --wp-heading: var(--wp-ink-inverse);
}
.wp-hero--cover .wp-hero__lead { color: var(--wp-ink-inverse); opacity: 0.9; }
.wp-hero--cover .wp-tag { color: var(--wp-ink-inverse); }
.wp-hero--cover .wp-btn--secondary { color: var(--wp-ink-inverse); border-color: var(--wp-ink-inverse); }
.wp-hero--cover .wp-btn--secondary:hover,
.wp-hero--cover .wp-btn--secondary:focus-visible { background-color: var(--wp-ink-inverse); color: var(--wp-ink-primary); }
@media screen and (min-width: 768px) {
  .wp-hero--cover { min-height: 78vh; }
}

/* ---- 2. Comparador acústico -------------------------------------- */
.wp-compare__toggle {
  display: inline-flex;
  border: 1px solid var(--wp-line);
  margin-bottom: var(--wp-space-l);
}
.wp-compare__btn {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.4rem;
  background: transparent;
  border: none;
  color: var(--wp-ink-secondary);
  cursor: pointer;
  transition: background-color var(--wp-transition), color var(--wp-transition);
}
.wp-compare__btn--active {
  background-color: var(--wp-olivo);
  color: var(--wp-ink-inverse);
}
.wp-compare__viz {
  position: relative;
  background-color: var(--wp-bg-card);
  border: 1px solid var(--wp-line);
  padding: var(--wp-space-l);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wp-compare__waves { width: 100%; height: 120px; }
.wp-compare__wave { fill: none; stroke-width: 2.5; }
.wp-compare__wave--chaos {
  stroke: var(--wp-warning);
  animation: wp-wave-shift 0.9s linear infinite;
}
.wp-compare__wave--calm { stroke: var(--wp-success); opacity: 0; }
.wp-compare--con .wp-compare__wave--chaos { opacity: 0; }
.wp-compare--con .wp-compare__wave--calm { opacity: 1; }
@keyframes wp-wave-shift {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-compare__wave--chaos { animation: none; }
}
.wp-compare__data { display: flex; flex-direction: column; gap: 0.2rem; }
.wp-compare__value {
  font-family: var(--wp-font-display);
  font-size: var(--wp-type-display-m);
  font-weight: 500;
  color: var(--wp-ink-primary);
}
.wp-compare__value--con { display: none; }
.wp-compare--con .wp-compare__value--sin { display: none; }
.wp-compare--con .wp-compare__value--con { display: inline; }
.wp-compare__copy > * + * { margin-top: var(--wp-space-m); }

/* ---- 2b. Sección sonido (estilo acupanel): declaración + audio A/B */
.wp-sound {
  position: relative;
  overflow: hidden;
  min-height: 0; /* altura por contenido (antes 72vh) */
  padding-block: var(--wp-space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--wp-bg-primary);
}
.wp-sound__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wp-sound__rings circle {
  fill: none;
  stroke: var(--wp-olivo);
  stroke-width: 1;
  opacity: 0.10;
}
.wp-sound__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-l);
}
.wp-sound__statement {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-size: var(--wp-type-display-s);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--wp-ink-primary);
}
.wp-sound h2.wp-sound__statement { margin-inline: auto; }
.wp-sound__sub {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  color: var(--wp-ink-secondary);
}
.wp-sound__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-m);
  align-items: center;
  justify-content: space-between;
}
.wp-sound__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp-space-s);
}
.wp-sound__demo-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  color: var(--wp-ink-secondary);
}
.wp-sound__demo-label svg { color: var(--wp-olivo); }
.wp-sound__btn {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 500;
  padding: 0.7rem 1.2rem;
  background: transparent;
  border: 1px solid var(--wp-line);
  color: var(--wp-ink-secondary);
  cursor: pointer;
  transition: border-color var(--wp-transition), background-color var(--wp-transition), color var(--wp-transition);
}
.wp-sound__btn:hover { border-color: var(--wp-olivo); color: var(--wp-ink-primary); }
.wp-sound__btn--playing {
  background-color: var(--wp-olivo);
  border-color: var(--wp-olivo);
  color: var(--wp-ink-inverse);
}

/* ---- 3. Grid colección ------------------------------------------- */
.wp-collection { background: var(--wp-bg-card); }
.wp-collection__head { text-align: center; margin-bottom: var(--wp-space-xl); }
.wp-collection__head p { margin-top: var(--wp-space-s); }
/* 4 categorias siempre en pares 2x2, tambien en movil */
.wp-collection__grid {
  display: grid;
  gap: var(--wp-space-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
  .wp-collection__grid { gap: var(--wp-space-m); }
}
/* Cards compactas en movil para que el par respire */
@media screen and (max-width: 600px) {
  .wp-collection .wp-card-product__title { font-size: 1rem; }
  .wp-collection .wp-card-product__spec,
  .wp-collection .wp-card-product__price { font-size: 0.72rem; }
  .wp-collection .wp-card-product__body { padding: 0.7rem 0.85rem 0.9rem; }
}

/* ---- 4. Banda editorial ------------------------------------------ */
.wp-editorial__inner { max-width: 800px; margin-inline: auto; text-align: center; }
.wp-editorial__quote {
  font-family: var(--wp-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--wp-type-display-m);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--wp-space-l);
  color: var(--wp-ink-inverse);
}
.wp-editorial__body { color: var(--wp-ink-inverse); opacity: 0.85; }

/* ---- 5. Aplicaciones --------------------------------------------- */
.wp-applications__head { margin-bottom: var(--wp-space-xl); }
.wp-applications__head p { margin-top: var(--wp-space-s); }
.wp-applications { background: var(--wp-bg-card); }
.wp-applications__grid {
  display: grid;
  gap: var(--wp-space-s);
  grid-template-columns: 1fr;
}
.wp-applications__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.wp-applications__item img,
.wp-applications__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-applications__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: var(--wp-space-s);
  margin: 0;
  color: var(--wp-ink-inverse);
  background: linear-gradient(to top, rgba(28, 26, 23, 0.55), transparent);
}
.wp-applications__cta { margin-top: var(--wp-space-l); text-align: center; }
/* Inicio: la certificación pegada a la sección de proyectos */
.wp-applications:has(+ .wp-explain) { padding-bottom: var(--wp-space-l); }
.wp-applications + .wp-explain { padding-top: var(--wp-space-l); }
@media screen and (min-width: 600px) {
  .wp-applications__grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 1024px) {
  .wp-applications__grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .wp-applications__item--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
  .wp-applications__item--w { grid-column: span 2; aspect-ratio: auto; } /* llena la fila: cierra parejo con el hero contiguo */
  .wp-applications__item--v { grid-row: span 2; aspect-ratio: 1 / 2; }
}

/* ---- 6. Cómo funciona -------------------------------------------- */
.wp-explain__head { text-align: center; margin-bottom: var(--wp-space-xl); }
.wp-explain__grid {
  display: grid;
  gap: var(--wp-space-l);
  grid-template-columns: 1fr;
}
.wp-explain__block > * + * { margin-top: var(--wp-space-s); }
.wp-explain__icon { color: var(--wp-ink-secondary); display: inline-flex; }
.wp-explain__cta { margin-top: var(--wp-space-xl); text-align: center; }
@media screen and (min-width: 768px) {
  .wp-explain__grid { grid-template-columns: repeat(3, 1fr); gap: var(--wp-space-xl); }
}

/* ---- 7. Calculadora rápida --------------------------------------- */
.wp-calc__panel {
  background-color: var(--wp-bg-card);
  border: 1px solid var(--wp-line);
  padding: var(--wp-space-l);
}
.wp-calc__inputs { margin-bottom: var(--wp-space-m); }
.wp-calc__output {
  margin: 0 0 var(--wp-space-m);
  padding: var(--wp-space-m) 0;
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-xs);
}
.wp-calc__output > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp-space-s); }
.wp-calc__output dt { font-family: var(--wp-font-ui); font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); }
.wp-calc__output dd { margin: 0; font-family: var(--wp-font-ui); font-size: var(--wp-type-body); text-align: right; }
.wp-calc__output dd strong { font-size: var(--wp-type-display-s); font-weight: 500; }
.wp-calc__disclaimer { margin: 0 0 var(--wp-space-m); }

/* ---- 9. Para arquitectos ----------------------------------------- */
.wp-architects__copy > * + * { margin-top: var(--wp-space-m); }
.wp-architects__media img,
.wp-architects__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.wp-architects__note { opacity: 0.8; }
.wp-architects__note a { color: var(--wp-accent-oak); text-decoration: underline; }

/* ---- 8. CTA muestrario ------------------------------------------- */
.wp-sample__media img,
.wp-sample__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.wp-sample__copy > * + * { margin-top: var(--wp-space-m); }

/* ---- 10. Newsletter ---------------------------------------------- */
.wp-newsletter__inner { max-width: 600px; margin-inline: auto; text-align: center; }
.wp-newsletter__inner > * + * { margin-top: var(--wp-space-s); }
.wp-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-s);
  justify-content: center;
  margin-top: var(--wp-space-m);
}
.wp-newsletter__field { margin-bottom: 0; flex: 1 1 16rem; text-align: left; }
.wp-newsletter__success { color: var(--wp-success); font-weight: 500; }
.wp-newsletter__error { color: var(--wp-warning); font-size: var(--wp-type-caption); flex-basis: 100%; }

/* ===================================================================
   SPRINT 3 — PRODUCTO Y CATÁLOGO
   =================================================================== */

/* ---- Breadcrumb -------------------------------------------------- */
.wp-product__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: var(--wp-space-l);
}
.wp-product__breadcrumb a { color: var(--wp-ink-secondary); text-decoration: none; }
.wp-product__breadcrumb a:hover { color: var(--wp-accent-walnut); }
.wp-product__breadcrumb [aria-current] { color: var(--wp-ink-primary); }

/* ---- Galería ----------------------------------------------------- */
.wp-product__main img,
.wp-product__placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background-color: var(--wp-bg-secondary);
}
.wp-product__thumbs {
  display: flex;
  gap: var(--wp-space-xs);
  margin-top: var(--wp-space-s);
  flex-wrap: wrap;
}
.wp-gallery__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--wp-line);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--wp-transition);
}
.wp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-gallery__thumb--active { border-color: var(--wp-accent-walnut); }

/* ---- Info producto ----------------------------------------------- */
.wp-product__info > * + * { margin-top: var(--wp-space-m); }
.wp-product__title { margin: 0; }
.wp-product__lead { color: var(--wp-ink-secondary); margin: 0; }
.wp-product__price-amount {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-display-s);
  font-weight: 500;
  color: var(--wp-ink-primary);
}
.wp-product__price-compare { color: var(--wp-ink-secondary); margin-left: var(--wp-space-xs); }
.wp-product__price-note { margin: var(--wp-space-xs) 0 0; }
.wp-product__action-note { margin: var(--wp-space-xs) 0 0; color: var(--wp-ink-secondary); }
.wp-product__keyfacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-xs);
}
.wp-product__keyfacts li {
  font-size: var(--wp-type-caption);
  color: var(--wp-ink-secondary);
  padding-left: 1.6rem;
  position: relative;
}
.wp-product__keyfacts li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--wp-success);
}

/* ---- Bloques inferiores (calc, specs, install, faq, related) ----- */
.wp-product__calc,
.wp-product__specs,
.wp-product__install,
.wp-product__faq,
.wp-product__related { margin-top: var(--wp-space-2xl); }
/* Beneficios: 3 columnas centradas con divisores, entre bordes finos (referente) */
.wp-beneficios {
  margin-top: var(--wp-space-2xl);
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
  padding: var(--wp-space-xl) 0;
  display: grid;
  gap: var(--wp-space-l);
}
.wp-beneficio { text-align: center; padding: 0 var(--wp-space-m); color: var(--wp-ink-primary); }
.wp-beneficio svg { color: var(--wp-heading); }
.wp-beneficio__titulo { font-family: var(--wp-font-ui); font-size: 1rem; font-weight: 600; margin: 12px 0 10px; color: var(--wp-heading); }
.wp-beneficio__texto { margin: 0 auto; max-width: 360px; font-size: var(--wp-type-caption); line-height: 1.7; color: var(--wp-ink-secondary); }
@media screen and (min-width: 768px) {
  .wp-beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .wp-beneficio + .wp-beneficio { border-left: 1px solid var(--wp-line); }
}
/* Relacionados en 3 columnas a lo ancho (móvil mantiene 2) */
@media screen and (min-width: 768px) {
  .wp-collection__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wp-product__calc {
  background-color: var(--wp-bg-secondary);
  border: 1px solid var(--wp-line);
  padding: var(--wp-space-l);
  max-width: 680px;
}
.wp .wp-product__calc h2 { margin: 0 0 var(--wp-space-m); } /* aire entre el título y los campos */
.wp-product__calc select:disabled { color: var(--wp-ink-primary); opacity: 1; background-color: var(--wp-bg-card); cursor: default; }
.wp-product__calc-grid {
  display: grid;
  gap: var(--wp-space-s);
  grid-template-columns: 1fr;
  margin-bottom: var(--wp-space-m);
}
@media screen and (min-width: 600px) {
  .wp-product__calc-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Materialidades (categoría paneles): lista numerada que sigue al esquema */
.wp-mat-lista { margin: var(--wp-space-m) 0 0; padding-left: 1.3em; display: grid; gap: 12px; }
.wp-mat-lista li::marker { font-weight: 600; color: var(--wp-ink-primary); }

/* ---- Ficha técnica ----------------------------------------------- */
.wp-spec-table { width: 100%; border-collapse: collapse; margin: var(--wp-space-m) 0; }
.wp-spec-table th,
.wp-spec-table td {
  text-align: left;
  padding: var(--wp-space-s) 0;
  border-bottom: 1px solid var(--wp-line);
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
  vertical-align: top;
}
.wp-spec-table th { font-weight: 500; color: var(--wp-ink-secondary); width: 42%; }

/* ---- Instalación ------------------------------------------------- */
.wp-install__grid {
  display: grid;
  gap: var(--wp-space-l);
  grid-template-columns: 1fr;
  margin-top: var(--wp-space-m);
}
@media screen and (min-width: 768px) {
  .wp-install__grid { grid-template-columns: 1fr 1fr; }
}
.wp-install__card { border: 1px solid var(--wp-line); padding: var(--wp-space-l); }
.wp-install__card > * + * { margin-top: var(--wp-space-s); }
.wp-install__icon { color: var(--wp-accent-walnut); display: inline-flex; }

/* ---- FAQ (acordeón nativo <details>) ----------------------------- */
.wp-faq { margin-top: var(--wp-space-m); border-top: 1px solid var(--wp-line); }
.wp-faq__item { border-bottom: 1px solid var(--wp-line); }
.wp-faq__q {
  cursor: pointer;
  padding: var(--wp-space-m) 0;
  font-family: var(--wp-font-ui);
  font-weight: 500;
  font-size: var(--wp-type-body-l);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp-space-s);
}
.wp-faq__q::-webkit-details-marker { display: none; }
.wp-faq__q::after {
  content: '+';
  font-size: 1.4em;
  line-height: 1;
  color: var(--wp-accent-walnut);
  flex: none;
}
.wp-faq__item[open] .wp-faq__q::after { content: '\2212'; }
.wp-faq__a { padding-bottom: var(--wp-space-m); color: var(--wp-ink-secondary); max-width: 62ch; }

/* ---- Relacionados ------------------------------------------------ */
.wp-product__related h2 { margin-bottom: var(--wp-space-l); }

/* ===================================================================
   PDP estilo naturewall — galería en grilla + columna de opciones
   =================================================================== */
.wp-pdp {
  display: grid;
  gap: var(--wp-space-l);
  grid-template-columns: 1fr;
  align-items: start;
}
@media screen and (min-width: 900px) {
  /* Fila 1: imágenes | información (misma altura, contenido repartido en esa altura).
     Fila 2: kit de instalación | calculadora. Los acordeones van fuera, a todo el ancho. */
  .wp-pdp { grid-template-columns: 1.2fr 1fr; gap: var(--wp-space-l) var(--wp-space-xl); align-items: stretch; }
  .wp-pdp > .wp-pdp__gallery { grid-column: 1; grid-row: 1; align-self: stretch; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .wp-pdp > .wp-pdp__gallery .wp-pdp__shot { margin: 0; }
  .wp-pdp > .wp-pdp__gallery .wp-pdp__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .wp-pdp > .wp-pdp__gallery .wp-pdp__shot img[data-pdp-esquema] { object-fit: contain; background: #FFFFFF; } /* la imagen de medidas no se recorta */
  .wp-pdp > .wp-pdp__info { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .wp-pdp > .wp-pdp__info > * + * { margin-top: var(--wp-space-s); }
  .wp-pdp > .wp-pdp__acc { grid-column: 1; grid-row: 2; align-self: start; }
  .wp-pdp > .wp-product__calc { grid-column: 2; grid-row: 2; align-self: start; max-width: none; margin-top: 0; }
}

/* Galería: grilla de 2 columnas, 4 imágenes */
.wp-pdp__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp-space-s);
}
/* Miniaturas: solo en móvil, en fila bajo la imagen principal */
.wp-pdp__thumbs { display: none; }
@media screen and (max-width: 767px) {
  .wp-pdp__gallery { grid-template-columns: 1fr; }
  .wp-pdp__gallery .wp-pdp__shot:not(:first-child) { display: none; }  /* el collage pasa a miniaturas */
  .wp-pdp__gallery .wp-pdp__shot--main:first-child { margin: 0; }      /* la figura principal a todo el ancho */
  .wp-pdp__gallery .wp-pdp__shot--main:first-child img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
  .wp-pdp__gallery .wp-pdp__shot--main:first-child img.wp-img-contain { object-fit: contain; background: #FFFFFF; }
  .wp-pdp__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .wp-pdp__thumb {
    padding: 0; border: 1px solid var(--wp-line); background: none; cursor: pointer;
    aspect-ratio: 1 / 1; overflow: hidden;
  }
  .wp-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .wp-pdp__thumb.wp-gallery__thumb--active { border-color: var(--wp-cta); box-shadow: inset 0 0 0 1px var(--wp-cta); }
}

.wp-pdp__shot {
  position: relative;
  overflow: hidden;
  background-color: var(--wp-bg-secondary);
}
.wp-pdp__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-pdp__shot--main { grid-column: 1 / -1; }
.wp-pdp__shot--main img { aspect-ratio: 4 / 3; }
.wp-pdp__shot:not(.wp-pdp__shot--main) img { aspect-ratio: 1 / 1; }

/* Columna de opciones */
.wp-pdp__info > * + * { margin-top: var(--wp-space-m); }
.wp-pdp__price {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-display-s);
  font-weight: 500;
  color: var(--wp-ink-secondary);   /* precio en gris */
}
/* Título del producto: un punto más contenido que el display-m general */
.wp-pdp__info h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
/* Cabecera (título → precio → combinación → SKU) y CTAs (cotizar → ficha → muestra) compactos */
.wp-pdp__head p { margin: 6px 0 0; }
.wp-pdp__head .wp-pdp__price { margin-top: 8px; }
.wp-pdp__ctas > * + * { margin-top: 8px; }
.wp-pdp__ctas .wp-btn--ficha { margin-top: 8px; }
.wp-pdp__price .wp-caption { font-size: var(--wp-type-caption); font-weight: 400; }

.wp-pdp__opt-label {
  display: block;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 500;
  margin-bottom: var(--wp-space-xs);
}
.wp-pdp__opt-label span { color: var(--wp-ink-secondary); font-weight: 400; }

/* Chips de texto (tamaño) — outline gris, activo borde negro */
.wp-chip {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  padding: 0.65rem 1.1rem;
  background: var(--wp-bg-card);
  border: 1px solid var(--wp-line);
  color: var(--wp-ink-primary);
  cursor: pointer;
  transition: border-color var(--wp-transition);
}
.wp-chip:hover { border-color: var(--wp-ink-secondary); }
.wp-chip--active { border-color: var(--wp-ink-primary); box-shadow: inset 0 0 0 1px var(--wp-ink-primary); font-weight: 500; }
.wp-chips { display: flex; flex-wrap: wrap; gap: var(--wp-space-xs); }

/* Swatches compactos del PDP (enchapes 4 / fieltros 8) */
/* Variantes de la ficha: 5 columnas iguales para enchapes (4 + 1 libre) y fieltros
   (2 filas de 5, en el orden del esquema del cliente); el chip llena su celda y los
   nombres reservan dos líneas para que todas las tarjetas queden encuadradas. */
.wp-swatches.wp-swatches--pdp { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wp-swatches--pdp .wp-swatch { align-items: stretch; }
.wp-swatches--pdp .wp-swatch__chip { max-width: none; margin-inline: 0; }
/* Escritorio: los enchapes se muestran alargados, como muestra vertical de madera */
@media screen and (min-width: 900px) {
  .wp-swatches--pdp:not(.wp-swatches--pdp-10) .wp-swatch__chip { aspect-ratio: 1 / 2; }
}
.wp-swatches--pdp .wp-swatch__name {
  font-size: 0.72rem; line-height: 1.2; text-align: center;
  min-height: calc(0.72rem * 1.2 * 2);
}

/* Cantidad */
.wp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wp-line);
}
.wp-qty button {
  width: 40px; height: 40px;
  background: none; border: none;
  font-size: 1.1rem; color: var(--wp-ink-primary);
  cursor: pointer;
}
.wp-qty input {
  width: 48px; height: 40px;
  border: none; border-inline: 1px solid var(--wp-line);
  text-align: center;
  font-family: var(--wp-font-ui); font-size: var(--wp-type-body);
  -moz-appearance: textfield;
}
.wp-qty input::-webkit-outer-spin-button,
.wp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Filas de info (entrega / hecho en Chile / garantía) */
.wp-pdp__facts { list-style: none; margin: var(--wp-space-s) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp-space-xs); } /* aire tras el cuadro de cantidad */
.wp-pdp__facts li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); }
.wp-pdp__facts svg { flex: none; color: var(--wp-olivo); margin-top: 1px; }

/* Muestra */
.wp-pdp__sample { text-align: center; }
.wp-pdp__sample a { color: var(--wp-ink-primary); font-size: var(--wp-type-caption); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Accesorios ("Puede que necesites") */
.wp-pdp__acc { border: 1px solid var(--wp-line); background: var(--wp-bg-secondary); padding: var(--wp-space-s); }
.wp-pdp__acc-title { font-size: var(--wp-type-caption); font-weight: 500; margin: 0 0 var(--wp-space-s); }
.wp-acc-item {
  display: flex; align-items: center; gap: var(--wp-space-s);
  background: var(--wp-bg-card); border: 1px solid var(--wp-line);
  padding: var(--wp-space-xs);
}
.wp-acc-item + .wp-acc-item { margin-top: var(--wp-space-xs); }
.wp-acc-item__img { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--wp-bg-secondary); }
.wp-acc-item__img--icono { display: inline-flex; align-items: center; justify-content: center; color: var(--wp-olivo); border: 1px solid var(--wp-line); }
.wp-acc-item__body { flex: 1; min-width: 0; }
.wp-acc-item__name { font-size: var(--wp-type-caption); font-weight: 500; margin: 0; }
.wp-acc-item__price { font-size: 0.78rem; color: var(--wp-ink-secondary); margin: 0; }
.wp-acc-item__btn {
  font-family: var(--wp-font-ui); font-size: 0.78rem; font-weight: 500;
  padding: 0.5rem 0.9rem; cursor: pointer;
  background: var(--wp-ink-primary); color: #fff; border: 1px solid var(--wp-ink-primary);
  transition: background-color var(--wp-transition), border-color var(--wp-transition);
}
.wp-acc-item__btn--added { background: var(--wp-olivo); border-color: var(--wp-olivo); }

/* Acordeones del PDP (reusa la estética del FAQ) */
.wp-pdp-accordions { margin-top: var(--wp-space-2xl); border-top: 1px solid var(--wp-line); }
.wp-pdp-accordions .wp-faq__a { max-width: none; }
.wp-pdp-accordions .wp-faq__a table { width: 100%; border-collapse: collapse; }
.wp-pdp-accordions .wp-faq__a th, .wp-pdp-accordions .wp-faq__a td {
  text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--wp-line);
  font-size: var(--wp-type-caption); vertical-align: top;
}
.wp-pdp-accordions .wp-faq__a th { color: var(--wp-ink-secondary); font-weight: 500; width: 40%; }

/* ===================================================================
   HEADER GLOBAL
   =================================================================== */
.wp-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background-color: var(--wp-bg-card); /* blanco en todas las paginas (la home overlay lo pisa) */
  transition: box-shadow var(--wp-transition), background-color 300ms var(--wp-ease), transform 320ms var(--wp-ease);
}
.wp-header--scrolled { box-shadow: var(--wp-shadow-soft); }

/* ---- Header overlay (portada): transparente sobre el hero, se oculta al
   bajar y reaparece sólido (blanco, logo original) al subir. ---- */
.wp-header--overlay {
  position: fixed;
  left: 0; right: 0; top: 0;
  background-color: transparent;
}
.wp-header--overlay .wp-header__bar { background-color: transparent; }
.wp-header--overlay.wp-header--hidden { transform: translateY(-100%); box-shadow: none; }
.wp-header--overlay.wp-header--solid,
.wp-header--overlay.wp-header--force-solid {
  background-color: #FFFFFF;
  box-shadow: var(--wp-shadow-soft);
}
.wp-header--overlay.wp-header--solid .wp-header__bar,
.wp-header--overlay.wp-header--force-solid .wp-header__bar { background-color: #FFFFFF; }

/* Logo: dos versiones; sobre el hero va la blanca. Por defecto las --light se ocultan
   con especificidad alta para que la regla @media de .wp-header__logo-full no las active. */
.wp-header .wp-header__logo-full--light,
.wp-header .wp-header__logo-mark--light { display: none; }
/* En top: se ocultan las versiones originales (no las --light) y se muestran las blancas */
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__logo-full:not(.wp-header__logo-full--light),
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__logo-mark:not(.wp-header__logo-mark--light) { display: none !important; }
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__logo-full--light { display: block; }
@media screen and (max-width: 767px) {
  .wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__logo-full--light { height: 34px; }
}
@media screen and (min-width: 768px) {
  .wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__logo-mark--light { display: none; }
}

/* Menú, CTA, buscador y hamburguesa en blanco sobre el hero */
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__link,
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__icon { color: #FFFFFF; }
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-btn.wp-btn--secondary.wp-header__cta {
  color: #FFFFFF; border-color: rgba(255,255,255,0.85); background: transparent;
}
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-btn.wp-btn--secondary.wp-header__cta:hover,
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-btn.wp-btn--secondary.wp-header__cta:focus-visible {
  background: #FFFFFF; color: var(--wp-ink-primary);
}
.wp-header--overlay.wp-header--top:not(.wp-header--force-solid) .wp-header__burger span { background-color: #FFFFFF; }
/* Velo superior suave para legibilidad del header sobre cualquier foto */
.wp-hero--cover .wp-hero__media::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0));
  pointer-events: none;
}

.wp-header__bar {
  position: relative;
  z-index: 2;
  background-color: var(--wp-bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp-space-m);
  padding-top: var(--wp-space-s);
  padding-bottom: var(--wp-space-s);
}

.wp-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.wp-header__logo img { width: auto; }
.wp-header__logo-full { height: 48px; display: none; }
.wp-header__logo-mark { height: 40px; display: block; }
@media screen and (min-width: 768px) {
  .wp-header__logo-full { display: block; }
  .wp-header__logo-mark { display: none; }
}
/* Móvil: logo original completo, centrado en la barra (no solo el isotipo) */
@media screen and (max-width: 767px) {
  .wp-header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .wp-header__actions { margin-left: auto; }   /* iconos y hamburguesa se quedan a la derecha */
  .wp-header .wp-header__logo-full { display: block; height: 34px; }
  .wp-header .wp-header__logo-mark { display: none; }
}

/* Nav central (desktop) */
.wp-header__nav { display: none; }
.wp-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--wp-space-l);
}
.wp-header__link {
  position: relative;
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wp-ink-primary);
  text-decoration: none;
  padding-bottom: 2px;
}
.wp-header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp-transition);
}
.wp-header__link:hover::after,
.wp-header__link:focus-visible::after,
.wp-header__link--active::after { transform: scaleX(1); }

/* Desplegables del menú (escritorio) */
.wp-header__item { position: relative; }
.wp-header__link { display: inline-flex; align-items: center; gap: 5px; }
.wp-header__link--btn { background: none; border: 0; cursor: pointer; padding: 0 0 2px; }
.wp-header__caret { flex: none; transition: transform var(--wp-transition); }
.wp-header__item--drop:hover .wp-header__caret,
.wp-header__item--drop:focus-within .wp-header__caret { transform: rotate(180deg); }
.wp-header__drop {
  position: absolute; top: calc(100% + 12px); left: -16px; z-index: 70;
  min-width: 210px; padding: 8px 0;
  background-color: var(--wp-bg-card); border: 1px solid var(--wp-line);
  box-shadow: 0 12px 28px rgba(23, 27, 26, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.wp-header__drop::before { content: ''; position: absolute; top: -13px; left: 0; width: 100%; height: 13px; } /* puente para no perder el hover */
.wp-header__item--drop:hover > .wp-header__drop,
.wp-header__item--drop:focus-within > .wp-header__drop { opacity: 1; visibility: visible; transform: none; }
.wp-header__drop-link {
  display: block; padding: 9px 18px; white-space: nowrap;
  font-family: var(--wp-font-ui); font-size: var(--wp-type-caption);
  color: var(--wp-ink-primary); text-decoration: none;
}
.wp-header__drop-link:hover,
.wp-header__drop-link:focus-visible { background-color: var(--wp-bg-secondary); }

/* Menú móvil: acordeones por categoría */
.wp-header__ov-acc summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.wp-header__ov-acc summary::-webkit-details-marker { display: none; }
.wp-header__ov-acc[open] summary .wp-header__caret { transform: rotate(180deg); }
.wp-header__ov-sub { display: grid; gap: 12px; padding: 12px 0 6px 16px; border-left: 1px solid var(--wp-line); margin-top: 10px; }
.wp-header__ov-sub a {
  font-family: var(--wp-font-ui); font-size: var(--wp-type-body);
  color: var(--wp-ink-secondary); text-decoration: none;
}
.wp-header__ov-sub a:hover { color: var(--wp-ink-primary); }

/* Acciones */
.wp-header__actions { display: flex; align-items: center; gap: var(--wp-space-s); }
.wp-header__cta { display: none; }
.wp-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--wp-ink-primary);
  text-decoration: none;
}
.wp-header__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--wp-accent-walnut);
  color: var(--wp-ink-inverse);
  font-family: var(--wp-font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

/* Hamburguesa */
.wp-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.wp-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--wp-ink-primary);
  transition: transform var(--wp-transition), opacity var(--wp-transition);
}
.wp-header--menu-open .wp-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wp-header--menu-open .wp-header__burger span:nth-child(2) { opacity: 0; }
.wp-header--menu-open .wp-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay móvil */
.wp-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: var(--wp-bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wp-space-xl);
  padding: var(--wp-gutter);
  opacity: 0;
  transition: opacity 300ms var(--wp-ease);
}
.wp-header--menu-open .wp-header__overlay { opacity: 1; }
.wp-header__overlay[hidden] { display: none; }
.wp-header__overlay-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp-space-m); }
.wp-header__overlay-link {
  font-family: var(--wp-font-display);
  font-weight: 600;
  font-size: var(--wp-type-display-m);
  letter-spacing: -0.02em;
  color: var(--wp-ink-primary);
  text-decoration: none;
}
.wp-header__overlay-cta { align-self: flex-start; margin-top: var(--wp-space-m); }

/* Desktop ≥1024: nav + CTA visibles, hamburguesa oculta */
@media screen and (min-width: 1024px) {
  .wp-header__nav { display: block; }
  .wp-header__cta { display: inline-flex; }
  .wp-header__burger { display: none; }
  .wp-header__overlay { display: none !important; }
}

/* ===================================================================
   FOOTER GLOBAL
   =================================================================== */
.wp-footer { padding-block: var(--wp-space-2xl); }
.wp-footer__cols {
  display: grid;
  gap: var(--wp-space-xl);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) {
  .wp-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 1024px) {
  .wp-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

.wp-footer__logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 0 var(--wp-space-m);
}
.wp-footer__brand > * + * { margin-top: var(--wp-space-xs); }
.wp-footer__brand .wp-caption { color: var(--wp-ink-inverse); opacity: 0.92; }
.wp-footer__brand a { color: #FFFFFF; text-decoration: underline; }

.wp-footer .wp-footer__heading {
  font-family: var(--wp-font-ui);
  font-weight: 500;
  font-size: var(--wp-type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp-ink-inverse);
  margin: 0 0 var(--wp-space-m);
}
.wp-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-xs);
}
.wp-footer__list li,
.wp-footer__list a {
  color: var(--wp-ink-inverse);
  opacity: 0.92;
  text-decoration: none;
  font-size: var(--wp-type-caption);
  transition: opacity var(--wp-transition), color var(--wp-transition);
}
.wp-footer__list a:hover,
.wp-footer__list a:focus-visible { opacity: 1; color: #FFFFFF; }

.wp-footer__social { display: flex; gap: var(--wp-space-s); margin-top: var(--wp-space-m); }
.wp-footer__social a { color: var(--wp-ink-inverse); opacity: 0.8; display: inline-flex; }
.wp-footer__social a:hover { opacity: 1; color: #FFFFFF; }

.wp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-m);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--wp-space-xl);
  padding-top: var(--wp-space-l);
  border-top: 1px solid rgba(245, 241, 234, 0.15);
}
.wp-footer__payments { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wp-space-xs); margin: 0; padding: 0; }
.wp-footer__payment-icon { width: 38px; height: 24px; }
.wp-footer__copy { color: var(--wp-ink-inverse); opacity: 0.6; margin: 0; }

/* ===================================================================
   CONFIGURADOR — "Combina tu panel" (4 chapas × 8 fieltros)
   =================================================================== */
.wp-combina { padding-block-start: var(--wp-space-l); } /* pegado a la franja de iconos */
.wp-combina__head { text-align: center; max-width: 720px; margin: 0 auto var(--wp-space-xl); }
.wp-combina__lead { margin-top: var(--wp-space-s); }
.wp-combina__math {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--wp-space-m) 0 0;
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-size: var(--wp-type-display-s);
}
.wp-combina__math strong { font-weight: 600; color: var(--wp-accent-walnut); }
.wp-combina__math span[aria-hidden] { color: var(--wp-ink-secondary); }

.wp-configurator {
  display: grid;
  gap: var(--wp-space-l);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .wp-configurator { grid-template-columns: 1.1fr 1fr; gap: var(--wp-space-2xl); align-items: start; }
}

/* Preview por capas */
.wp-config__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--wp-line);
  background-color: var(--wp-bg-secondary);
  transition: background-color 300ms var(--wp-ease);
  box-shadow: inset 0 0 40px rgba(28, 26, 23, 0.08);
}
.wp-config__slats {
  position: absolute;
  inset: 0;
  /* Primer plano: listones anchos (44px) con ranura (12px) que deja ver el fieltro.
     Repetición de 56px → ~7 listones en mobile, ~11 en desktop. */
  background-image: repeating-linear-gradient(
    90deg,
    var(--wp-wood, #c9a878) 0,
    var(--wp-wood, #c9a878) 44px,
    rgba(0, 0, 0, 0) 44px,
    rgba(0, 0, 0, 0) 56px
  );
}
/* Relieve sutil: luz en el borde izquierdo y sombra en el derecho de cada listón. */
.wp-config__slats::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.09) 0,
    rgba(255, 255, 255, 0.09) 4px,
    rgba(0, 0, 0, 0) 4px,
    rgba(0, 0, 0, 0) 38px,
    rgba(0, 0, 0, 0.18) 38px,
    rgba(0, 0, 0, 0.18) 44px,
    rgba(0, 0, 0, 0) 44px,
    rgba(0, 0, 0, 0) 56px
  );
}
.wp-config__combo { margin-top: var(--wp-space-s); text-align: center; }
.wp-config__combo strong { color: var(--wp-ink-primary); font-weight: 500; }

/* Preview con renders reales (combo-{chapa}-{fieltro}.jpg).
   El contenedor toma la proporción NATIVA de la imagen (height auto):
   imposible que se corte o deforme. Ancho acotado para que no domine. */
.wp-config__preview--photo {
  aspect-ratio: auto;
  box-shadow: none;
  background-color: #ffffff;
  max-width: 420px;
  margin-inline: auto;
}
.wp-config__image {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 250ms var(--wp-ease);
}

/* Variante home (esquema del cliente): variantes IZQUIERDA (enchapes 2x2
   verticales | fieltros 2x4) + CTA debajo; imagen a la DERECHA (>=768).
   Encuadre: siempre que los dos grupos van lado a lado (>480px), los
   fieltros definen la altura (min-height por chip) y los enchapes se
   estiran para calzar; en escritorio la imagen estira a esa misma altura. */
.wp-configurator--wide { grid-template-columns: 1fr; gap: var(--wp-space-l); align-items: stretch; }
.wp-configurator--wide .wp-config__stage { display: flex; flex-direction: column; }
.wp-configurator--wide .wp-config__preview--photo { max-width: none; margin-inline: 0; }
.wp-configurator--wide .wp-config__preview { aspect-ratio: 1 / 1; overflow: hidden; }
.wp-configurator--wide .wp-config__image { height: 100%; object-fit: cover; object-position: center; }

.wp-configurator--wide .wp-config__controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas: "veneer felt" "cta cta";
  gap: var(--wp-space-l);
  align-content: start;
}
.wp-configurator--wide .wp-config__controls .wp-config__group { margin: 0; }
.wp-configurator--wide .wp-config__group--veneer { grid-area: veneer; }
.wp-configurator--wide .wp-config__group--felt { grid-area: felt; }
.wp-configurator--wide .wp-config__cta { grid-area: cta; margin: 0; width: 100%; box-sizing: border-box; justify-content: center; }
.wp-configurator--wide .wp-config__legend { font-size: 0.68rem; }

.wp-configurator--wide .wp-swatches--veneer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-space-s); }
.wp-configurator--wide .wp-swatches--veneer .wp-swatch__chip { aspect-ratio: 1 / 2.4; max-width: none; border-radius: 0; }
.wp-configurator--wide .wp-swatches--felt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-space-s); }
.wp-configurator--wide .wp-swatches--felt .wp-swatch__chip { aspect-ratio: 1 / 1; max-width: 130px; margin-inline: auto; border-radius: 12px; }

/* Encuadre lado a lado: los fieltros (min-height) mandan y los enchapes calzan */
@media screen and (min-width: 481px) {
  .wp-configurator--wide .wp-config__controls { grid-template-rows: 1fr auto; }
  .wp-configurator--wide .wp-config__controls .wp-config__group { display: flex; flex-direction: column; min-height: 0; }
  .wp-configurator--wide .wp-config__controls .wp-config__group .wp-swatches { flex: 1; min-height: 0; }
  .wp-configurator--wide .wp-swatches--veneer { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .wp-configurator--wide .wp-swatches--felt { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .wp-configurator--wide .wp-config__controls .wp-swatch { display: flex; flex-direction: column; min-height: 0; }
  .wp-configurator--wide .wp-swatches--veneer .wp-swatch__chip,
  .wp-configurator--wide .wp-swatches--felt .wp-swatch__chip {
    flex: 1;
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-inline: 0;
  }
  .wp-configurator--wide .wp-swatches--felt .wp-swatch__chip { min-height: 72px; }
}

/* Escritorio: imagen a la derecha, estirada a la altura de las variantes */
@media screen and (min-width: 768px) {
  .wp-configurator--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp-space-xl); }
  .wp-configurator--wide .wp-config__stage { order: 2; }
  .wp-configurator--wide .wp-config__controls { order: 1; }
  .wp-configurator--wide .wp-config__preview { aspect-ratio: auto; flex: 1; }
}

/* Movil angosto: todo apilado, swatches en 4 columnas */
@media screen and (max-width: 480px) {
  .wp-configurator--wide .wp-config__controls { grid-template-columns: 1fr; grid-template-areas: "veneer" "felt" "cta"; }
  .wp-configurator--wide .wp-swatches--veneer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wp-configurator--wide .wp-swatches--felt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.wp-config__image--loading { opacity: 0.45; }

/* Controles */
.wp-config__group + .wp-config__group { margin-top: var(--wp-space-l); }
.wp-config__legend { display: block; color: var(--wp-ink-secondary); margin-bottom: var(--wp-space-s); }
.wp-config__cta { margin-top: var(--wp-space-l); }

/* Muestras (swatches) */
.wp-swatches { display: grid; gap: var(--wp-space-s); grid-template-columns: repeat(4, 1fr); }
.wp-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.wp-swatch__chip {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--wp-line);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--wp-transition), border-color var(--wp-transition);
}
.wp-swatch__chip--wood {
  background-image: repeating-linear-gradient(
    90deg,
    var(--wp-wood) 0,
    var(--wp-wood) 5px,
    rgba(0, 0, 0, 0.1) 5px,
    rgba(0, 0, 0, 0.1) 6px
  );
}
/* Chip con textura real (tex-{id}.jpg) — enchapes y fieltros PET */
.wp-swatch__chip--tex {
  background-size: cover;
  background-position: center;
}
.wp-swatch--active .wp-swatch__chip {
  border-color: var(--wp-accent-walnut);
  box-shadow: 0 0 0 2px var(--wp-accent-walnut);
}
.wp-swatch__name { font-family: var(--wp-font-ui); font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); text-align: center; }
.wp-swatch--active .wp-swatch__name { color: var(--wp-ink-primary); font-weight: 500; }

/* ===================================================================
   COTIZADOR
   =================================================================== */
.wp-quote__inner { max-width: 760px; margin-inline: auto; }
.wp-quote__head { text-align: center; margin-bottom: var(--wp-space-xl); }
.wp-quote__head > * + * { margin-top: var(--wp-space-s); }

.wp-quote__trust {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp-space-xl);
  display: grid;
  gap: var(--wp-space-m);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) { .wp-quote__trust { grid-template-columns: repeat(3, 1fr); } }
.wp-quote__trust li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); }
.wp-quote__trust-icon { color: var(--wp-accent-walnut); display: inline-flex; flex: none; }

.wp-quote__summary {
  background-color: var(--wp-bg-secondary);
  border: 1px solid var(--wp-line);
  border-left: 3px solid var(--wp-accent-walnut);
  padding: var(--wp-space-m);
  margin-bottom: var(--wp-space-l);
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-body);
}

/* Secciones del form */
.wp-quote-form__section { border: none; padding: 0; margin: 0 0 var(--wp-space-xl); }
.wp-quote-form__section legend { padding: 0; margin-bottom: var(--wp-space-m); }
.wp-quote-form__row { display: grid; gap: var(--wp-space-s); grid-template-columns: 1fr; }
@media screen and (min-width: 600px) { .wp-quote-form__row { grid-template-columns: 1fr 1fr; } }

/* Grupos de opciones */
.wp-choice-group { border: none; padding: 0; margin: 0 0 var(--wp-space-m); }
.wp-choice-group legend { padding: 0; display: block; color: var(--wp-ink-secondary); margin-bottom: var(--wp-space-s); }
.wp-choices { display: flex; flex-wrap: wrap; gap: var(--wp-space-xs); }

/* Chip de opción (checkbox/radio oculto, span visible) */
.wp-choice { display: inline-flex; cursor: pointer; }
.wp-choice input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wp-choice span {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--wp-line);
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  color: var(--wp-ink-secondary);
  transition: border-color var(--wp-transition), background-color var(--wp-transition), color var(--wp-transition);
}
.wp-choice input:checked + span {
  border-color: var(--wp-accent-walnut);
  background-color: rgba(92, 61, 42, 0.06);
  color: var(--wp-ink-primary);
}
.wp-choice input:focus-visible + span { outline: 2px solid var(--wp-accent-walnut); outline-offset: 2px; }

/* Política: checkbox real + texto */
.wp-choice--policy { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.wp-choice--policy input {
  position: static;
  width: auto; height: auto;
  margin: 3px 0 0;
  clip: auto;
  accent-color: var(--wp-accent-walnut);
}
.wp-choice--policy span {
  border: none; padding: 0; background: none;
  display: inline;
  color: var(--wp-ink-secondary);
  font-size: var(--wp-type-caption);
}
.wp-choice--policy a { color: var(--wp-accent-walnut); }

/* Errores */
.wp-field__error { display: block; color: var(--wp-warning); font-size: var(--wp-type-caption); margin-top: 0.3rem; }
.wp-quote-form [aria-invalid="true"] { border-color: var(--wp-warning); }

/* Archivos */
.wp-quote-form__file { margin-bottom: var(--wp-space-m); }
.wp-quote-form__file label { display: block; margin-bottom: 0.4rem; color: var(--wp-ink-secondary); }
.wp-quote-form__file input { font-family: var(--wp-font-ui); font-size: var(--wp-type-caption); }

/* Footer / submit */
.wp-quote-form__footer { margin-top: var(--wp-space-l); }
.wp-quote-form__status { margin: var(--wp-space-s) 0 0; font-size: var(--wp-type-caption); }
.wp-quote-form__status--error { color: var(--wp-warning); }

/* ===================================================================
   CONTACTO
   =================================================================== */
.wp-contact__head { text-align: center; max-width: 640px; margin: 0 auto var(--wp-space-xl); }
.wp-contact__head > * + * { margin-top: var(--wp-space-s); }
.wp-contact__cards {
  display: grid;
  gap: var(--wp-space-m);
  grid-template-columns: 1fr;
  margin-bottom: var(--wp-space-2xl);
}
@media screen and (min-width: 768px) { .wp-contact__cards { grid-template-columns: repeat(3, 1fr); } }
.wp-contact-card {
  border: 1px solid var(--wp-line);
  background-color: var(--wp-bg-card);
  padding: var(--wp-space-l);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp-space-s);
}
.wp-contact-card__icon { color: var(--wp-olivo); display: inline-flex; }
.wp-contact-card h2 { font-size: var(--wp-type-display-s); }
.wp-contact-card p { margin: 0; color: var(--wp-ink-secondary); font-size: var(--wp-type-caption); }
.wp-contact__form { max-width: 560px; margin-inline: auto; }
.wp-contact__form h2 { text-align: center; margin-bottom: var(--wp-space-m); }
.wp-contact__map { margin-top: var(--wp-space-2xl); }
.wp-contact__map iframe { width: 100%; height: 360px; border: 1px solid var(--wp-line); display: block; }

/* Confirmación */
.wp-quote-confirm__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.wp-quote-confirm__inner > * + * { margin-top: var(--wp-space-m); }
.wp-quote-confirm__check { color: var(--wp-success); display: inline-flex; }
.wp-quote-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--wp-space-s); justify-content: center; margin-top: var(--wp-space-l); }

/* ===================================================================
   IDENTIDAD DE COLOR — franja de paleta, tintes de sección, acentos
   =================================================================== */

/* Franja de paleta (8 fieltros) — motivo de marca, decorativo */
.wp-palette-strip { display: flex; width: 100%; height: 5px; }
.wp-palette-strip--tall { height: 8px; }
.wp-palette-strip span { flex: 1 1 0; }

/* Tintes de sección oscura (fieltros profundos sobre el carbón base).
   Texto crema se mantiene legible (AA) en verde/azul/negro. */
.wp-tint--olivo { background-color: var(--wp-olivo); }
.wp-tint--carbon { background-color: var(--wp-bg-dark); }
.wp-tint--walnut { background-color: var(--wp-accent-walnut); }
.wp-tint--verde { background-color: var(--wp-felt-verde); }
.wp-tint--azul { background-color: var(--wp-felt-azul); }
.wp-tint--negro { background-color: var(--wp-felt-negro); }

/* Acentos por bloque en "Cómo funciona" — línea superior + ícono teñidos */
.wp-explain__block--accent {
  border-top: 3px solid var(--wp-block-accent, var(--wp-line));
  padding-top: var(--wp-space-m);
}
.wp-explain__block--accent .wp-explain__icon { color: var(--wp-block-accent); }

/* ---- Wizard del cotizador (Fase 4) ---- */
.wp-wizard__dots { list-style: none; margin: 0 0 var(--wp-space-l); padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp-space-s); }
.wp-wizard__dots li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); cursor: default; }
.wp-wizard__dots li span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid var(--wp-line); font-size: 0.75rem; }
.wp-wizard__dots li.is-active { color: var(--wp-ink-primary); font-weight: 500; }
.wp-wizard__dots li.is-active span { background: var(--wp-cta); color: #fff; border-color: var(--wp-cta); }
.wp-wizard__dots li.is-done { cursor: pointer; }
.wp-wizard__dots li.is-done span { background: var(--wp-olivo); color: #fff; border-color: var(--wp-olivo); }

/* ===================================================================
   BENEFICIOS — 8 características, cada una con el color de un fieltro PET
   (reemplaza la franja decorativa de la paleta)
   =================================================================== */
.wp-benefits { background: var(--wp-bg-secondary); padding-block: var(--wp-space-l); } /* sin titulo: franja compacta */
.wp-benefits__head { text-align: center; max-width: 640px; margin: 0 auto var(--wp-space-xl); }
.wp-benefits__head > * + * { margin-top: var(--wp-space-s); }
.wp-benefits__grid {
  display: grid;
  gap: var(--wp-space-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: 640px)  { .wp-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media screen and (min-width: 1024px) { .wp-benefits__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--wp-space-xs); } }

.wp-benefit {
  --wp-benefit-ink: #FFFFFF;
  background: var(--wp-benefit-bg, var(--wp-felt-taupe));
  color: var(--wp-benefit-ink);
  padding: var(--wp-space-m) var(--wp-space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--wp-space-s);
  min-height: 140px;
  justify-content: center;
}
.wp-benefit--dark-ink { --wp-benefit-ink: var(--wp-ink-primary); } /* fieltros claros */
.wp-benefit__icon { display: inline-flex; width: 40px; height: 40px; }
.wp-benefit__icon svg { width: 100%; height: 100%; }
.wp-benefit .wp-benefit__title {
  font-family: var(--wp-font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--wp-benefit-ink); /* gana al reset de titulares (--wp-heading) */
}
.wp-benefit .wp-benefit__felt { color: var(--wp-benefit-ink); }
.wp-benefit .wp-benefit__icon { color: var(--wp-benefit-ink); }
.wp-benefit__felt { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin: 0; }

/* ============ FAQ (/preguntas-frecuentes/) ============ */
.wp-faq__inner { max-width: 760px; margin-inline: auto; }
.wp-faq__head { text-align: center; margin-bottom: var(--wp-space-l); }
.wp-faq__item {
  background: var(--wp-bg-card);
  border: 1px solid var(--wp-line);
  margin-bottom: var(--wp-space-s);
}
.wp-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  font-family: var(--wp-font-ui);
  font-weight: 500;
  position: relative;
}
.wp-faq__q::-webkit-details-marker { display: none; }
.wp-faq__q::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--wp-accent-walnut);
}
.wp-faq__item[open] .wp-faq__q::after { content: "–"; }
.wp-faq__a { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--wp-ink-secondary); }
.wp-faq__cta { display: flex; gap: var(--wp-space-s); justify-content: center; flex-wrap: wrap; margin-top: var(--wp-space-l); }

/* ============ Ficha WP (Fase 3): preview por capas + calculadora ============ */
.wp-pdp__layers {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--wpanel-felt-hex, #E6DFD2);
}
.wp-pdp__layer { position: absolute; inset: 0; }
.wp-pdp__layer--felt { background-size: 480px; background-repeat: repeat; }
.wp-pdp__layer--wood {
  background-image: var(--wpanel-wood-tex);
  background-size: cover;
  background-position: center;
  /* listones verticales: madera 28 / fieltro visible 13 (proporcion real del panel) */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 28px, transparent 28px 41px);
  mask-image: repeating-linear-gradient(90deg, #000 0 28px, transparent 28px 41px);
}
@supports not (mask-image: linear-gradient(#000, #000)) {
  .wp-pdp__layer--felt { display: none; }
}
.wp-pdp__fallback { width: 100%; height: 100%; object-fit: cover; }
.wp-pdp__calc {
  border: 1px solid var(--wp-line);
  background: var(--wp-bg-card);
  padding: var(--wp-space-m);
  margin-block: var(--wp-space-m);
}
.wp-pdp__calc .wp-field { margin-bottom: 0; }
.wp-pdp__calc-out { margin-top: var(--wp-space-s); }
.wp-pdp__calc-out p { margin: 0 0 0.35rem; }
.wp-pdp__specs { margin-top: var(--wp-space-l); border-top: 1px solid var(--wp-line); }
.wp-pdp__specs > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--wp-space-s);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--wp-line);
}
.wp-pdp__specs dt { font-family: var(--wp-font-ui); font-size: var(--wp-type-caption); color: var(--wp-ink-secondary); }
.wp-pdp__specs dd { margin: 0; font-size: var(--wp-type-caption); }
.wp-pdp__desc { margin-top: var(--wp-space-m); }


/* Play/pausa del demo de audio */
.wp-sound__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--wp-olivo);
  background: var(--wp-olivo);
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: background-color var(--wp-transition), transform var(--wp-transition);
}
.wp-sound__play:hover { transform: scale(1.06); }
.wp-sound__play svg { display: block; }
.wp-sound__play [data-icon-pause] { display: none; }
.wp-sound__play.is-playing [data-icon-play] { display: none; }
.wp-sound__play.is-playing [data-icon-pause] { display: block; }
.wp-sound__btn--active { border-color: var(--wp-olivo); color: var(--wp-ink-primary); font-weight: 600; }

/* ============ Galeria de inspiracion (referente woodupp) ============ */
.wp-gallery__head { text-align: center; max-width: 720px; margin: 0 auto var(--wp-space-l); }
.wp-gallery__head > * + * { margin-top: var(--wp-space-s); }
.wp-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--wp-space-l);
}
.wp-gallery__chip {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp-line);
  border-radius: 999px;
  background: var(--wp-bg-card);
  color: var(--wp-ink-secondary);
  cursor: pointer;
  transition: border-color var(--wp-transition), color var(--wp-transition), background-color var(--wp-transition);
}
.wp-gallery__chip:hover { border-color: var(--wp-olivo); color: var(--wp-ink-primary); }
.wp-gallery__chip--active { background: var(--wp-cta); border-color: var(--wp-cta); color: #fff; }
/* mosaico: columnas con gap 8px como el referente */
.wp-gallery__grid { columns: 2; column-gap: 8px; }
@media screen and (min-width: 768px) { .wp-gallery__grid { columns: 3; } }
.wp-gallery__item {
  break-inside: avoid;
  margin: 0 0 8px;
  position: relative;
  overflow: hidden;
}
.wp-gallery__item img { width: 100%; height: auto; display: block; }
.wp-gallery__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.4rem 0.75rem 0.6rem;
  font-family: var(--wp-font-ui);
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  opacity: 0;
  transition: opacity var(--wp-transition);
}
.wp-gallery__item:hover .wp-gallery__cap { opacity: 1; }
@media (hover: none) { .wp-gallery__cap { opacity: 1; } }
/* Acciones de la galería: cargar más a la izquierda, cotizar a la derecha */
.wp-gallery__acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-s); flex-wrap: wrap; margin-top: var(--wp-space-l); }
.wp-gallery__cta { margin-left: auto; }


/* Lineas circulares de fondo en la seccion de muestras (como el demo de audio, en blanco) */
.wp-sample { position: relative; overflow: hidden; }
.wp-sample > .wp-container { position: relative; z-index: 1; }
.wp-sample__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wp-sample__rings circle {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  opacity: 0.7;
}


/* ============ Certificacion acustica (informe CPIA) ============ */
.wp-cert { margin-top: var(--wp-space-2xl); }
.wp-cert__head { text-align: center; max-width: 720px; margin: 0 auto var(--wp-space-l); }
.wp-cert__head > * + * { margin-top: var(--wp-space-s); }
.wp-cert__grid { display: grid; gap: var(--wp-space-s); grid-template-columns: 1fr; }
@media screen and (min-width: 768px) { .wp-cert__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-space-m); } }
.wp-cert__card {
  background: var(--wp-bg-card);
  border: 1px solid var(--wp-line);
  padding: var(--wp-space-m);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.wp-cert__icon { color: var(--wp-olivo); }
.wp-cert__montaje { margin: 0; font-family: var(--wp-font-ui); font-size: var(--wp-type-body); font-weight: 600; }
.wp-cert__nrc {
  margin: 0;
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wp-cert__clase {
  font-family: var(--wp-font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: var(--wp-bg-secondary);
  color: var(--wp-ink-secondary);
}
.wp-cert__clase--a { background: var(--wp-felt-verde); color: #fff; }
.wp-cert__aw { margin: 0; }
.wp-cert__chart { width: 132px; height: 58px; margin-top: 0.3rem; }
.wp-cert__chart rect { fill: var(--wp-olivo); opacity: 0.85; }
.wp-cert__chart text { font-family: var(--wp-font-ui); font-size: 7px; fill: var(--wp-ink-secondary); }
.wp-cert__desc { margin: 0.2rem 0 0; }
.wp-cert__nota { text-align: center; margin-top: var(--wp-space-m); }
.wp-cert__cta { text-align: center; margin-top: var(--wp-space-m); }


/* Tabs de producto de la calculadora (a lo ancho; outline cuadrado, activo relleno) */
.wp-calc__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: var(--wp-space-m);
}
@media screen and (min-width: 768px) { .wp-calc__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wp-calc__tab {
  font-family: var(--wp-font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--wp-cta);
  border-radius: 0;
  background: transparent;
  color: var(--wp-ink-primary);
  cursor: pointer;
  transition: background-color var(--wp-transition), color var(--wp-transition);
}
.wp-calc__tab:hover { background: var(--wp-cta); color: #fff; }
.wp-calc__tab--active { background: var(--wp-cta); color: #fff; }
/* fix: el display de las zonas jamas debe ganarle al atributo hidden */
.wp-calc__inputs[hidden] { display: none !important; }
.wp-calc__dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.wp-field__input--readonly { background: var(--wp-bg-secondary); cursor: default; }
.wp-calc__foto { margin: var(--wp-space-m) 0 0; }
.wp-calc__foto img { width: 100%; height: auto; max-height: 440px; object-fit: cover; display: block; }


/* Descuentos por superficie (seccion profesionales) */
.wp-desc__title { display: block; margin-bottom: var(--wp-space-s); color: var(--wp-ink-secondary); }
.wp-desc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wp-desc__tramo {
  border: 1px solid var(--wp-line);
  background: var(--wp-bg-primary);
  text-align: center;
  padding: 0.8rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wp-desc__tramo strong {
  font-family: var(--wp-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wp-olivo);
}
.wp-desc__tramo span { font-family: var(--wp-font-ui); font-size: 0.7rem; color: var(--wp-ink-secondary); }
.wp-desc > .wp-caption { margin-top: var(--wp-space-s); }
@media screen and (max-width: 480px) { .wp-desc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La nota de Acustudio hereda colores normales en fondo claro */
.wp-architects__note { opacity: 1; }
.wp-architects__note a { color: var(--wp-olivo); }


/* Contraste del footer sobre olivo */
.wp-footer__payments li { color: var(--wp-ink-inverse); opacity: 0.85; }
.wp-footer__copy { opacity: 0.85; }


/* Boton flotante de WhatsApp */
.wp-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform var(--wp-transition), box-shadow var(--wp-transition);
}
.wp-whatsapp:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }


/* Configurador: preview por capas cuando no existe render de la combinacion */
.wp-config__preview { position: relative; }
.wp-config__layers { position: absolute; inset: 0; aspect-ratio: auto; display: none; }
.wp-config__preview--layers .wp-config__layers { display: block; }
.wp-config__preview--layers .wp-config__image { visibility: hidden; }


/* FAQ por categorias */
.wp-faq__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--wp-space-l);
}
.wp-faq__cat {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-type-caption);
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp-cta);
  background: transparent;
  color: var(--wp-ink-primary);
  text-decoration: none;
  transition: background-color var(--wp-transition), color var(--wp-transition);
}
.wp-faq__cat:hover { background: var(--wp-cta); color: #fff; }
.wp-faq__group { scroll-margin-top: 96px; }
.wp-faq__group + .wp-faq__group { margin-top: var(--wp-space-xl); }
.wp-faq__group-title { margin: 0 0 var(--wp-space-s); padding-bottom: var(--wp-space-xs); border-bottom: 1px solid var(--wp-line); }
.wp-faq-home { background: var(--wp-bg-card); }


/* ============ Cotizador con despiece (cajón lateral) — tokens de marca ============ */
.wpc {
  --wpc-font: var(--wp-font-ui);
  --wpc-tinta: #1B1908;
  --wpc-papel: #F4EFE8;
  --wpc-papel-2: #EDE7DE;
  --wpc-acento: var(--wp-cta);
  --wpc-acento-txt: #FFFFFF;
  --wpc-suave: #6F6A60;
  --wpc-borde: #DDD6CB;
  --wpc-corte: #A6402F;
  --wpc-ok: #626A28;
  --wpc-plano-junta: #8E958F;
  --wpc-plano-hueco: #EDE7DE;
  --wpc-plano-linea: #B5B2AA;
  --wpc-radio: 0px;
  --wpc-ancho-cajon: 520px;
}
.wpc-titulo { font-family: var(--wp-font-display); font-weight: 400; font-size: 1.25rem; }
.wpc-total-cifra { font-family: var(--wp-font-display); font-weight: 500; }
.wpc-cta:hover { background: #626A28; opacity: 1; }
/* Panel elegido (cabecera del paso) */
.wpc-panel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FFF; border: 1px solid var(--wpc-borde); margin-bottom: 12px; }
.wpc-panel-chip { width: 34px; height: 48px; background-size: cover; background-position: center; flex: none; }
.wpc-panel-chip--fieltro { width: 34px; height: 34px; border-radius: 6px; }
.wpc-panel-txt { flex: 1; font-size: 13px; line-height: 1.35; }
.wpc-panel-nota { margin: 0 0 12px; font-size: 13px; color: var(--wpc-suave); }
/* Paso "Elige tu panel" */
.wpc-campo-titulo { margin: 14px 0 8px; font-family: var(--wpc-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wpc-suave); }
.wpc-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wpc-swatches--ench { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpc-sw { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: center; font-family: var(--wpc-font); }
.wpc-sw-chip { display: block; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; border: 2px solid transparent; border-radius: 6px; }
.wpc-swatches--ench .wpc-sw-chip { aspect-ratio: 1 / 2; border-radius: 0; }
.wpc-sw--on .wpc-sw-chip { border-color: var(--wpc-tinta); box-shadow: 0 0 0 2px #FFF inset; }
.wpc-sw-nombre { display: block; font-size: 10.5px; margin-top: 4px; color: var(--wpc-suave); line-height: 1.2; }
.wpc-sw--on .wpc-sw-nombre { color: var(--wpc-tinta); font-weight: 600; }


/* Cotizador integrado en la pagina (flujo B, calculadora) */
.wpc.wpc--inline {
  position: static;
  width: auto;
  max-width: none;
  height: auto;
  transform: none;
  box-shadow: none;
  z-index: auto;
  background: transparent;
  display: block;
}
.wpc.wpc--inline[hidden] { display: none; }
.wpc--inline .wpc-head { padding: 0 0 12px; }
.wpc--inline .wpc-cuerpo { overflow: visible; padding: 18px 0 8px; }
.wpc--inline .wpc-pie { padding: 12px 0 0; background: transparent; }
.wpc--inline .wpc-total { position: sticky; top: 88px; z-index: 2; }
.wpc-total-cta, .wpc-total-modo,
.wpc-total .wpc-total-modo { display: none; }  /* solo en móvil/tablet, dentro del total fijo (la 2ª regla le gana al display de .wpc-modo) */
/* Móvil/tablet: panel elegido arriba → muros → total fijo abajo con el botón → datos */
@media screen and (max-width: 899px) {
  .wpc.wpc--inline { display: flex; flex-direction: column; }
  .wpc.wpc--inline[hidden] { display: none; }
  .wpc--inline .wpc-head { order: 0; }
  .wpc--inline .wpc-sel { order: 1; padding-top: 18px; } /* aire entre la línea de pasos y "Tu panel" */
  .wpc--inline .wpc-cuerpo { order: 2; }
  .wpc--inline .wpc-total { order: 3; position: sticky; top: auto; bottom: 0; z-index: 3; margin-top: 12px; }
  .wpc--inline .wpc-pie { order: 4; }
  .wpc--inline .wpc-sel .wpc-prev { max-width: none; width: 100%; } /* la imagen del panel aprovecha todo el ancho en móvil */
  /* El total fijo lleva el botón de avance: cifra a la izquierda, acción a la derecha */
  .wpc--inline .wpc-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .wpc--inline .wpc-total > p { grid-column: 1; }
  .wpc--inline .wpc-total .wpc-total-extra { grid-column: 1 / -1; grid-row: 5; }
  .wpc--inline .wpc-total .wpc-total-modo { grid-row: 6; }
  .wpc--inline .wpc-total { padding: 10px 14px; }
  .wpc--inline .wpc-total .wpc-total-cifra { font-size: 26px; margin: 0 0 2px; }
  .wpc--inline .wpc-total .wpc-total-sub { font-size: 11.5px; line-height: 1.3; }
  .wpc--inline .wpc-total .wpc-total-cta { display: block; grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; padding: 12px 16px; }
  /* Cambio de modo dentro del bloque oscuro, con la misma apariencia (contorno claro) */
  /* Franja blanca pegada bajo el bloque oscuro (lo acompaña al fijarse, sin integrarse) */
  .wpc--inline .wpc-total .wpc-total-modo {
    display: block; grid-column: 1 / -1; grid-row: 4; width: auto;
    margin: 10px -14px -10px; padding: 11px 12px; font-size: 13px;
    color: var(--wpc-tinta); background: #FFF; border: 1px solid var(--wpc-tinta); border-top: 0;
  }
  .wpc--inline .wpc-total .wpc-total-modo:hover { background: var(--wpc-papel); color: var(--wpc-tinta); }
  .wpc--inline .wpc-total ~ .wpc-pie .wpc-cta,
  .wpc--inline .wpc-total ~ .wpc-pie .wpc-modo { display: none; } /* evita duplicados bajo el contenido (en "listo" no hay total) */
}
/* Con WP240/60 activo, el despiece reemplaza a los campos simples */
.wp-calc__panel--despiece [data-calc-zona],
.wp-calc__panel--despiece .wp-calc__output,
.wp-calc__panel--despiece .wp-calc__disclaimer,
.wp-calc__panel--despiece [data-calc-cta] { display: none; }

/* Movil: el panel de la calculadora cede padding para que el despiece respire */
@media screen and (max-width: 480px) {
  .wp-calc__panel { padding: var(--wp-space-s); }
}


/* Pagina de calculadora: sin foto, a todo el ancho */
.wp-calc--full .wp-calc__copy { margin-bottom: var(--wp-space-l); text-align: left; } /* título a una línea en escritorio */
.wp-calc--full .wp-calc__copy p { max-width: 760px; }
.wp-calc--full .wp-calc__copy > * + * { margin-top: var(--wp-space-s); }
.wp-calc--full .wp-calc__inputs,
.wp-calc--full .wp-calc__output,
.wp-calc--full .wp-calc__disclaimer,
.wp-calc--full [data-calc-cta] { max-width: 760px; }
/* Despiece integrado a lo ancho: muros y plano a la izquierda, total + accion fijos a la derecha */
@media screen and (min-width: 900px) {
  .wp-calc--full .wpc.wpc--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "head head" "cuerpo total" "cuerpo sel" "cuerpo pie";
    column-gap: var(--wp-space-xl);
    align-items: start;
  }
  .wp-calc--full .wpc--inline .wpc-head { grid-area: head; }
  .wp-calc--full .wpc--inline .wpc-cuerpo { grid-area: cuerpo; padding-top: 0; }
  .wp-calc--full .wpc--inline .wpc-total { grid-area: total; position: sticky; top: 96px; }
  .wp-calc--full .wpc--inline .wpc-sel { grid-area: sel; }
  .wp-calc--full .wpc--inline .wpc-total { position: static; }
  .wp-calc--full .wpc--inline .wpc-pie { grid-area: pie; position: static; padding-top: 12px; border-top: 0; }
  .wp-calc--full .wpc--inline .wpc-swatches--sel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wp-calc--full .wpc--inline .wpc-swatches--sel.wpc-swatches--ench { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wp-calc--full .wpc--inline .wpc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wp-calc--full .wpc--inline .wpc-grid--datos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } /* datos: máximo 2 columnas */
  .wp-calc--full .wpc--inline .wpc-grid > .wpc-campo[style*="grid-column"] { grid-column: 1 / -1; }
  .wp-calc--full .wpc--inline .wpc-swatches { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .wp-calc--full .wpc--inline .wpc-swatches--ench { grid-template-columns: repeat(4, 96px); }
}


/* Selector de panel en la columna derecha del despiece integrado */
.wpc-sel { padding: 14px 0 0; }
.wpc-sel-eyebrow { color: var(--wpc-suave); margin-bottom: 8px; }
.wpc-prev {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--wpc-prev-hex, #E6DFD2);
  border: 1px solid var(--wpc-borde);
}
.wpc-prev-felt, .wpc-prev-wood { position: absolute; inset: 0; }
.wpc-prev-felt { background-size: 360px; background-repeat: repeat; }
.wpc-prev-wood {
  background-size: cover;
  background-position: center;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 32px);
  mask-image: repeating-linear-gradient(90deg, #000 0 22px, transparent 22px 32px);
}
.wpc-sel-cap { margin: 8px 0 0; font-size: 13px; color: var(--wpc-suave); }
.wpc-swatches--sel .wpc-sw-nombre { font-size: 9.5px; }
.wpc-swatches--sel.wpc-swatches--ench .wpc-sw-chip { aspect-ratio: 1 / 1.6; }

/* Render en perspectiva de la combinacion cuando existe; si no, quedan las capas */
.wpc-prev-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Fieltros del selector lateral siempre en 5 x 2 */
.wpc .wpc-swatches--sel:not(.wpc-swatches--ench) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

/* Quitar muro desde la cabecera (muros 2 en adelante) */
.wpc-muro-quitar {
  flex: none; width: 26px; height: 26px; margin-left: 4px;
  border: 1px solid var(--wpc-borde); background: #FFF; color: var(--wpc-suave);
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: var(--wpc-radio);
}
.wpc-muro-quitar:hover { color: #FFF; background: var(--wpc-corte); border-color: var(--wpc-corte); }

/* Aberturas multiples + guardapolvo */
.wpc-ab { margin-top: 8px; }
.wpc-ab-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.wpc-ab-titulo { font-size: 12.5px; font-weight: 600; }
.wpc-ab-add { display: flex; gap: 8px; margin-top: 8px; }
.wpc-agregar--mini { margin-top: 0; padding: 9px; font-size: 13px; }
.wpc-gp { margin-top: 10px; }