/* =========================================================
   AC Mueblería — Hoja de estilos compartida
   Tema base (AC Mueblería) + variantes (Maderin / CDM)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Jost:wght@300;400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=Bubblegum+Sans&family=Merriweather:wght@400;700;900&display=swap');

:root{
  /* --- Paleta base: taller de carpintería --- */
  --espresso:      #2B2118;   /* marrón oscuro principal */
  --espresso-2:     #3A2C1F;  /* marrón medio (cards dark) */
  --espresso-3:     #241B14;  /* marrón más oscuro (footer base) */
  --paper:          #F2ECDF;  /* fondo claro tipo papel */
  --paper-2:        #E7DEC8;  /* fondo alterno (catálogo, secciones alternas) */
  --ink:            #221B14;  /* texto principal oscuro */
  --ink-soft:       #55493B;  /* texto secundario (descripciones) */
  --line:           rgba(34,27,20,.16);   /* bordes sutiles entre secciones */
  --line-strong:    rgba(34,27,20,.30);   /* bordes más marcados (cards, filtros) */
  --line-on-dark:   rgba(242,236,223,.22); /* bordes sobre fondos oscuros */

  /* --- Acento de marca: AC Mueblería (por defecto) --- */
  --accent:         #B9793F;  /* oak — botones, links, resaltes principales */
  --accent-2:       #C9A227;  /* brass — acento secundario, hover, estrellas */
  --accent-ink:     #241B14;  /* texto sobre fondos de acento claro */

  --font-display: 'Fraunces', serif;      /* fuente para títulos y marcas */
  --font-body:    'Work Sans', sans-serif; /* fuente para texto cuerpo */
  --font-mono:    'IBM Plex Mono', monospace; /* fuente mono (eyebrow, specs, badges) */

  --radius: 3px;          /* radio de bordes por defecto */
  --container: 1180px;    /* ancho máximo del contenido centrado */

  /* --- Layout responsive (compartido por los 3 temas) --- */
  --cols-features: repeat(4,1fr);  /* grid de features: 4 columnas */
  --cols-products: repeat(3,1fr);  /* grid de productos: 3 columnas */
  --cols-footer: 1.3fr 1fr 1fr;    /* grid footer: columna izquierda más ancha */
  --nav-h: 92px;                   /* altura de la barra de navegación sticky */
  --hero-pad: 30px 0 30px;         /* padding del hero desktop */
  --hero-h1: clamp(38px,5.2vw,64px); /* tamaño del título hero responsive */
  --badges-gap: 26px;              /* espacio entre badges del hero */
  --nav-mobile-bg: var(--espresso);  /* fondo del nav móvil */
  --nav-mobile-divider: var(--line-on-dark); /* separador del nav móvil */

  --wa-number: 51999999999; /* PLACEHOLDER — reemplazar por el número real de WhatsApp */
}

/* --- Variante Maderin (mobiliario infantil) --- */
body.theme-maderin{
  --ink:        #2D3466;     /* texto azul oscuro */
  --ink-soft:   #6B7199;     /* texto secundario azul grisáceo */
  --accent:     #415aa5;     /* azul medio — botones, links */
  --accent-2:   #C4D3E8;     /* azul claro — hover, acento suave */
  --accent-3:   #C4E5E8;     /* celeste — fondo footer */
  --paper:      #FDF8F4;     /* fondo blanco cálido */
  --paper-2:    #F0E8DD;     /* fondo alterno arena claro */
  --line:       rgba(45,52,102,.12);   /* bordes sutiles azulados */
  --line-strong:rgba(45,52,102,.22);   /* bordes marcados azulados */
  --font-display: 'Sour Gummy', sans-serif;             /* fuente display redondeada */
  --font-body:    'Nunito', sans-serif;                 /* cuerpo con Nunito */
  --font-mono:    'Bubblegum Sans', sans-serif;         /* mono -> Bubblegum Sans */
  --radius: 6px;   /* bordes más redondos que AC (6px vs 3px) */

  /* --- Layout responsive (solo valores desktop) --- */
  --cols-features: repeat(3,1fr);  /* features: 3 columnas (vs 4 en AC) */
  --hero-pad: 100px 0 80px;        /* más padding vertical en hero */
  --hero-h1: clamp(38px, 5vw, 55px); /* título más grande */
  --badges-gap: 28px;              /* más espacio entre badges */
  --nav-mobile-bg: rgba(253,248,244,.98); /* nav móvil casi blanco */
  --nav-mobile-divider: var(--line); /* separador sutl en nav móvil */
}

/* Maderin: eyebrows en Title Case (primera letra mayúscula, resto minúscula) */
body.theme-maderin .eyebrow{ text-transform:none; }

/* =========================== Maderin — Flat Design =========================== */

/* Nav clara — fondo blanco translúcido en vez de oscuro */
body.theme-maderin .nav {
  background: rgba(253,248,244,.95);  /* blanco cálido semitransparente */
  border-bottom: 1px solid var(--line); /* borde sutil azulado */
}
body.theme-maderin .brand { color: var(--ink); }           /* marca en azul oscuro */
body.theme-maderin .brand small { color: var(--accent); }  /* subtítulo en azul medio */
body.theme-maderin .nav-links a { color: var(--ink-soft); }       /* links en gris azulado */
body.theme-maderin .nav-links a:hover { color: var(--accent); }   /* hover azul medio */
body.theme-maderin .nav-toggle svg { color: var(--ink); } /* hamburguesa en azul oscuro */
body.theme-maderin .nav-links a {
  font-family: var(--font-display);  /* Nunito redondeada */
  font-weight: 500;
  letter-spacing: .01em;
}
body.theme-maderin .nav-cta .btn-wa {
  font-family: var(--font-display);  /* botón WhatsApp con Nunito */
}

/* Botones — azul medio en vez de marrón */
body.theme-maderin .btn-wa {
  background: var(--accent);  /* azul medio */
  color: #fff;
}
body.theme-maderin .btn-wa:hover {
  background: color-mix(in srgb, var(--accent) 82%, black); /* oscurece 18% */
}
body.theme-maderin .btn {
  border-radius: 100px;  /* completamente redondo, igual que CDM */
}
body.theme-maderin .btn-ghost-dark {
  border-color: rgba(255,255,255,.35); /* borde blanco suave sobre hero oscuro */
  color: #fff;
}
body.theme-maderin .btn-ghost-dark:hover {
  border-color: #fff;  /* borde blanco puro en hover */
  color: #fff;
}
body.theme-maderin .btn-ghost {
  border-color: var(--line-strong);  /* borde azulado marcado */
  color: var(--ink);                  /* texto azul oscuro */
}
body.theme-maderin .btn-ghost:hover {
  border-color: var(--accent);  /* borde azul medio en hover */
  color: var(--accent);          /* texto azul medio en hover */
}

/* Hero — imagen de fondo + degradado azul */
body.theme-maderin .hero {
  color: #fff;
  min-height: 100vh;                          /* fallback */
  min-height: calc(100svh - var(--nav-h));    /* pantalla completa descontando el nav */
  padding: 0 0 88px;                          /* reserva espacio para el scroll cue */
}
body.theme-maderin .hero-overlay {
  background: linear-gradient(
    to right,                        /* degradado de izquierda a derecha */
    rgba(45, 52, 102, .95) 0%,      /* azul oscuro casi opaco a la izquierda */
    rgba(45, 52, 102, .82) 20%,     /* azul oscuro */
    rgba(45, 52, 102, .55) 30%,     /* azul semitransparente */
    rgba(45, 52, 102, 0)   100%     /* transparente a la derecha */
  );
}
body.theme-maderin .hero-container {
  padding: var(--hero-pad);  /* padding responsive del :root */
}
body.theme-maderin .hero-copy { max-width: 560px; } /* ancho máximo del texto */
body.theme-maderin .parent-badge {
  border-color: rgba(255,255,255,.3); /* borde blanco suave */
}
body.theme-maderin .parent-badge .dot { background: #fff; }      /* punto blanco */
body.theme-maderin .parent-badge span { color: rgba(255,255,255,.8); } /* texto blanco suave */
body.theme-maderin .hero-copy .eyebrow { color: rgba(255,255,255,.7); font-size: 16px; } /* eyebrow blanco semitransparente */
body.theme-maderin .hero-copy .eyebrow::before { background: rgba(255,255,255,.5); } /* línea decorativa blanca */
body.theme-maderin .hero-copy h1 {
  color: #fff;
  font-size: clamp(34px, 4vw, 50px);  /* más compacto para que quepa en 2 líneas */
  line-height: 1.08;  /* interlineado ajustado */
  margin-top: 16px;
  margin-left: 0;     /* alineado flush-left (estándar CDM) */
}
body.theme-maderin .hero-copy h1 em {
  font-style: normal;  /* sin cursiva */
  color: var(--accent-2); /* azul claro en la palabra destacada */
}
body.theme-maderin .hero-hl { color: #86CED5; font-style: italic; } /* color highlight turquesa en cursiva */
body.theme-maderin .hero-copy .section-lede {
  color: rgba(255,255,255,.78);  /* texto secundario blanco */
  font-size: 17.5px;
  margin-top: 18px;
}
body.theme-maderin .hero-actions { display: flex; gap: 14px; margin-top: 32px; margin-left: 0; flex-wrap: wrap; } /* botones CTA */
body.theme-maderin .hero-badges {
  display: flex; margin-top: 48px; margin-left: 0; flex-wrap: wrap;  /* badges estadísticos */
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 22px; /* separador superior */
}
body.theme-maderin .hero-badge {
  font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.6); /* label del badge */
}
body.theme-maderin .hero-badge b {
  display: block; color: #fff; font-family: var(--font-display); /* número grande del badge */
  font-size: 20px; font-weight: 600; margin-bottom: 2px;
}

/* Eyebrow & titles en secciones claras — acento azul en vez de marrón */
body.theme-maderin section .eyebrow { color: var(--accent); }      /* texto azul */
body.theme-maderin section .eyebrow::before { background: var(--accent); } /* línea azul */

/* Sobre Maderin — features más compactas y equilibradas */
body.theme-maderin #nosotros {
  padding: 40px 0;
}
body.theme-maderin #nosotros .head-row {
  margin-bottom: 24px;
}
body.theme-maderin #nosotros .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
  background: transparent;
  border: none;
}
body.theme-maderin #nosotros .feature-card {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(45, 52, 102, 0.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.theme-maderin #nosotros .feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(45, 52, 102, 0.08);
}
body.theme-maderin #nosotros .feature-thumb {
  aspect-ratio: 16 / 9;
  max-height: 140px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
body.theme-maderin #nosotros .feature-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
body.theme-maderin #nosotros .feature-body h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
body.theme-maderin #nosotros .feature-body p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (max-width: 768px) {
  body.theme-maderin #nosotros .features-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 14px;
  }
  body.theme-maderin #nosotros .feature-thumb {
    aspect-ratio: 16 / 9;
    max-height: 150px;
  }
}

/* Catálogo — filter chips redondos (100px radius) */
body.theme-maderin .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; } /* fila de filtros */
body.theme-maderin .filter-chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 100px; /* completamente redondo */
  background: transparent; color: var(--ink-soft); transition: .2s ease;
}
body.theme-maderin .filter-chip:hover { border-color: var(--accent); color: var(--accent); } /* azul en hover */
body.theme-maderin .filter-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; /* relleno azul cuando activo */
}

/* Product cards — misma tarjeta que features pero con precio */
body.theme-maderin .product-card {
  border: 1px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.theme-maderin .product-card:hover{
  border-color: var(--accent);               /* borde azul en hover */
  transform: translateY(-3px);                /* sube 3px */
  box-shadow: 0 18px 30px -22px rgba(65,90,165,.35); /* sombra azul sutil */
}
body.theme-maderin .product-thumb {
  aspect-ratio: 1/.92; background: var(--paper-2); /* fondo arena claro */
  position: relative; display: flex; align-items: center; justify-content: center; /* centra el SVG */
  border-bottom: 1px solid var(--line);
}
body.theme-maderin .product-thumb svg { width: 46%; height: 46%; color: var(--accent); } /* icono azul centrado */
body.theme-maderin .sample-badge {
  position: absolute; top: 10px; right: 10px; /* esquina superior derecha */
  background: var(--accent); color: #fff;     /* badge azul */
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; /* texto en mayúsculas */
  padding: 4px 10px; border-radius: 100px; /* badge redondo */
}
body.theme-maderin .product-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
body.theme-maderin .product-body h3 { font-size: 17px; font-weight: 600; }        /* nombre producto */
body.theme-maderin .product-body p.desc { font-size: 13.5px; color: var(--ink-soft); flex: 1; line-height: 1.55; } /* descripción, flex:1 para empujar specs abajo */
body.theme-maderin .product-specs {
  display: flex; gap: 14px; font-family: var(--font-body); font-size: 12px;
  color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 12px; /* separador superior */
}
body.theme-maderin .product-price { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); } /* precio grande */
body.theme-maderin .product-price small { font-family: var(--font-body); font-size: 11.5px; color: var(--ink-soft); font-weight: 400; } /* texto auxiliar del precio */

/* Section backgrounds — alterna fondo arena en secciones指定adas */
body.theme-maderin .on-paper2 { background: var(--paper-2); }

/* Footer claro — fondo celeste en vez de marrón oscuro */
body.theme-maderin footer {
  background: var(--ink);  /* azul base #2D3466 */
  color: rgba(255,255,255,.85);
  padding: 60px 0 26px;
}
body.theme-maderin .footer-brand {
  font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 700; /* marca grande */
}
body.theme-maderin .footer-grid p { font-size: 13.5px; margin-top: 12px; max-width: 34ch; color: rgba(255,255,255,.7); } /* descripción footer */
body.theme-maderin .footer-col h4 {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px; /* título columna en azul claro */
}
body.theme-maderin .footer-col a { display: block; font-size: 14px; margin-bottom: 9px; color: rgba(255,255,255,.7); } /* links crema suave */
body.theme-maderin .footer-col a:hover { color: #fff; } /* hover blanco */
body.theme-maderin .footer-grid { border-bottom: 1px solid rgba(255,255,255,.18); } /* separador sutil */
body.theme-maderin .footer-bottom {
  display: flex; justify-content: space-between; padding-top: 22px;
  font-size: 12.5px; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.5); opacity: 1; /* copyright suave */
}

/* WhatsApp flotante — azul con borde redondo, sin sombra */
body.theme-maderin .wa-float {
  background: var(--accent) !important;  /* azul medio */
  color: #fff !important;
  border-radius: 50% !important; /* circular, igual que CDM */
  box-shadow: none !important;             /* sin sombra */
}
body.theme-maderin .wa-float:hover { transform: none !important; background: color-mix(in srgb, var(--accent) 85%, black) !important; }

/* Responsive Maderin: colapsos compartidos en "Responsive unificado" (ver abajo). */
body.theme-maderin .hero-bg-img{
  object-position: 80% bottom;
}
/* Encuadre del hero por marca — mantiene al sujeto visible junto al texto */
body.theme-ac .hero-bg-img{
  object-position: 70% 42%;
}
body.theme-cdm .hero-bg-img{
  object-position: 78% 45%;
}


/* ==========================================================================
   VARIANTE CDM (Corazón de Madera) — detalles y regalos en madera
   Los colores se configuran en "Colores de marca" y las tipografías en
   "Tipografías". El resto de bloques usan esos tokens automáticamente.
   ========================================================================== */

body.theme-cdm{
  /* --- Colores de marca (configurables) --- */
  --accent:         #3F4021;   /* oliva oscuro — CTA, títulos, detalles */
  --accent-2:       #E1CBA2;   /* champán — resaltes, hero, hover */

  /* --- Neutros armonizados --- */
  --ink:            #3F4021;   /* texto oliva (mismo que accent) */
  --ink-soft:       #6B6B50;   /* texto secundario oliva grisáceo */
  --paper:          #F7F2E6;   /* fondo cremoso claro */
  --paper-2:        #E9DEC8;   /* arena — fondo alterno (catálogo) */
  --line:           rgba(63,64,33,.14);   /* bordes sutiles oliva */
  --line-strong:    rgba(63,64,33,.28);   /* bordes marcados oliva */
  --line-on-dark:   rgba(225,203,162,.25); /* bordes champán sobre fondo oscuro */
  --off-black:      #2E2F1A;   /* superficie oscura hero / nav / footer */

  /* --- Tipografías (configurables) ---
     'Unigeo Trial' es una fuente local: si el visitante no la tiene
     instalada cae a Jost (geométrica, ya cargada desde Google Fonts). */
  --font-display:   'Playfair Display', Georgia, serif; /* serif elegante para títulos */
  --font-body:      'Unigeo Trial', 'Jost', 'Work Sans', sans-serif; /* sans-serif geométrica */
  --font-mono:      'Merriweather', serif; /* mono para specs, badges */

  --radius: 8px;  /* bordes más redondos que AC (8px vs 3px) */

  /* --- Layout responsive (solo valores desktop) --- */
  --cols-features: repeat(3,1fr);        /* 3 columnas de features */
  --hero-h1: clamp(36px, 4.6vw, 60px);  /* título hero responsive */
  --nav-mobile-bg: var(--off-black);     /* nav móvil oscuro */
}

/* =========================== CDM — Hero =========================== */

body.theme-cdm .hero{
  background: var(--off-black);  /* fondo oliva muy oscuro */
  color: var(--paper);            /* texto crema */
  padding-bottom: 88px;           /* reserva espacio para el scroll cue */
}
body.theme-cdm .hero .container{
  position: relative;
  z-index: 2;                     /* sobre el overlay */
  max-width: none;                /* sin límite de ancho */
  padding: 0 clamp(28px, 6vw, 110px); /* padding horizontal responsive */
}
body.theme-cdm .hero-overlay{
  background: linear-gradient(to right, 
    rgba(46,47,26,.95) 0%,      /* oliva casi opaco a la izquierda */
    rgba(46,47,26,.82) 20%,     /* oliva oscuro */
    rgba(46,47,26,.55) 30%,     /* oliva semitransparente */
    rgba(46,47,26,0) 100%       /* transparente a la derecha */
  );
}
body.theme-cdm .hero-copy h1{
  color: var(--paper);   /* crema */
  margin-left: 0;        /* sin margen izquierdo */
  line-height: 1.1;
}
body.theme-cdm .hero-copy h1 em{
  font-style: italic;    /* cursiva para palabra destacada */
  color: var(--accent-2); /* champán */
}
body.theme-maderin .hero-copy .eyebrow { color: rgba(255,255,255,.7); }
body.theme-maderin .hero-copy .eyebrow::before { background: rgba(255,255,255,.5); }
body.theme-cdm .hero-copy .eyebrow{ color: rgba(247,242,230,.72); }  /* eyebrow crema semitransparente */
body.theme-cdm .hero-copy .eyebrow::before{ background: var(--accent-2); } /* línea decorativa champán */
body.theme-cdm .hero-copy .section-lede{ color: rgba(247,242,230,.78); }   /* subtítulo crema */
body.theme-cdm .hero-actions{ margin-left: 0; }
body.theme-cdm .hero-badges{
  margin-left: 0;
  border-top-color: var(--line-on-dark); /* separador champán */
}
body.theme-cdm .hero-badge{ color: rgba(247,242,230,.6); } /* label badge crema suave */
body.theme-cdm .hero-badge b{ color: var(--paper); }        /* número badge crema puro */

body.theme-cdm .parent-badge{ border-color: var(--line-on-dark); } /* borde champán */
body.theme-cdm .parent-badge .dot{ background: var(--accent-2); }  /* punto champán */
body.theme-cdm .parent-badge span{ color: rgba(247,242,230,.78); } /* texto crema */

/* CTA sobre hero oscuro: champán sobre oliva (inverso a AC) */
body.theme-cdm .hero-actions .btn-wa{
  background: var(--accent-2);  /* champán */
  color: var(--accent);         /* oliva oscuro */
}
body.theme-cdm .hero-actions .btn-wa:hover{
  background: color-mix(in srgb, var(--accent-2) 85%, white); /* se aclara 15% */
}

/* =========================== CDM — Hero layout =========================== */

body.theme-cdm .hero-grid{
  display: grid;
  grid-template-columns: 1fr;  /* una columna por defecto */
  gap: clamp(40px, 5vw, 80px); /* espacio responsive entre columnas */
  align-items: center;
}
/* =========================== CDM — Nav =========================== */

body.theme-cdm .nav{
  background: rgba(46,47,26,.94); /* oliva oscuro semitransparente */
  border-bottom: 1px solid var(--line-on-dark); /* borde champán */
}
body.theme-cdm .brand{ color: var(--paper); }         /* marca crema */
body.theme-cdm .brand-logo{ height: 56px; object-fit: contain; } /* logo delimitado */
body.theme-cdm .brand span{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;   /* subtítulo en mayúsculas */
  color: var(--accent-2);      /* champán */
}
body.theme-cdm .nav-links a{ color: rgba(247,242,230,.75); }  /* links crema suave */
body.theme-cdm .nav-links a:hover{ color: var(--paper); }       /* hover crema puro */
body.theme-cdm .nav-toggle svg{ color: var(--paper); }          /* hamburguesa crema */
body.theme-cdm .nav-cta .btn-wa{
  background: var(--accent-2);  /* champán */
  color: var(--accent);         /* oliva */
}
body.theme-cdm .nav-cta .btn-wa:hover{
  background: color-mix(in srgb, var(--accent-2) 85%, white);
}

/* =========================== CDM — Botones =========================== */

body.theme-cdm .btn{ border-radius: 100px; } /* completamente redondo */
body.theme-cdm .btn:hover{ transform: translateY(-1px); } /* sube 1px en hover */
body.theme-cdm .btn:active{ transform: translateY(0) scale(.97); } /* se achica al clickear */
body.theme-cdm .btn-wa{
  background: var(--accent);  /* oliva oscuro */
  color: #fff;
}
body.theme-cdm .btn-wa:hover{
  background: color-mix(in srgb, var(--accent) 85%, black); /* oscurece 15% */
}
body.theme-cdm .btn-ghost-dark:hover{ border-color: var(--accent-2); color: var(--accent-2); } /* champán en hover */

/* =========================== CDM — Sobre CDM (features) =========================== */

body.theme-cdm .features-grid{
  display: grid;
  gap: 24px;
  background: transparent;  /* sin fondo en el grid */
  border: none;
  margin-top: 8px;
}
body.theme-cdm .feature-card{
  background: var(--paper);         /* fondo cremoso */
  border: 1px solid var(--line);
  border-radius: var(--radius);     /* 8px redondeado */
  padding: 30px 28px;               /* relleno generoso */
  transition: border-color .2s ease, transform .2s ease;
}
body.theme-cdm .feature-card:hover{
  border-color: var(--accent);  /* borde oliva en hover */
  transform: translateY(-3px);  /* sube 3px (efecto elevación) */
}
body.theme-cdm .feature-icon{
  width: 34px; height: 34px;
  color: var(--accent);         /* icono oliva */
  margin-bottom: 14px;
}
body.theme-cdm .feature-num{
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);         /* número oliva */
}
body.theme-cdm .feature-card h3{
  font-family: var(--font-display);  /* Playfair Display serif */
  font-size: 20px;
  font-weight: 600;
  margin-top: 16px;
}
body.theme-cdm .feature-card p{
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);       /* texto oliva suave */
}

/* =========================== CDM — Catálogo =========================== */

body.theme-cdm .on-paper2{ background: var(--paper-2); } /* fondo arena en secciones指定adas */

body.theme-cdm .filter-row{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 36px;
}
body.theme-cdm .filter-chip{
  font-family: var(--font-mono);   /* mono para filtros */
  font-size: 12.5px;
  letter-spacing: .02em;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;            /* completamente redondo */
  background: transparent;
  color: var(--ink-soft);
  transition: .2s ease;
}
body.theme-cdm .filter-chip:hover{ border-color: var(--accent); color: var(--accent); } /* oliva en hover */
body.theme-cdm .filter-chip.active{
  background: var(--accent);   /* relleno oliva */
  border-color: var(--accent);
  color: var(--paper);         /* texto crema */
  font-weight: 600;
}

body.theme-cdm .product-grid{
  display: grid;
  gap: 24px;
}
body.theme-cdm .product-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);  /* 8px redondeado */
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.theme-cdm .product-card:hover{
  border-color: var(--accent);    /* borde oliva */
  transform: translateY(-3px);    /* sube 3px */
  box-shadow: 0 18px 30px -22px rgba(46,47,26,.35); /* sombra oscura sutil */
}
body.theme-cdm .product-thumb{
  aspect-ratio: 1/.92;           /* casi cuadrado */
  background: linear-gradient(155deg, var(--paper-2), var(--paper)); /* gradiente sutil */
  position: relative;
  display: flex; align-items: center; justify-content: center; /* centra SVG */
  border-bottom: 1px solid var(--line);
}
body.theme-cdm .product-thumb svg{ width: 46%; height: 46%; color: var(--accent); } /* icono oliva */
body.theme-cdm .sample-badge{
  background: var(--accent);  /* badge oliva */
  color: var(--paper);        /* texto crema */
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;       /* badge redondo */
}
body.theme-cdm .product-body{
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 10px; flex: 1; /* rellena espacio */
}
body.theme-cdm .product-body h3{
  font-family: var(--font-display);  /* Playfair Display serif */
  font-size: 18px;
  font-weight: 600;
}
body.theme-cdm .product-body p.desc{ font-size: 13.5px; color: var(--ink-soft); flex: 1; } /* descripción, flex:1 */
body.theme-cdm .product-specs{
  display: flex; gap: 14px;
  font-family: var(--font-mono);    /* mono para especificaciones */
  font-size: 11.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line); /* separador superior */
  padding-top: 12px;
}
body.theme-cdm .product-price{
  font-family: var(--font-display); /* Playfair Display */
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);               /* oliva oscuro */
}
body.theme-cdm .product-price small{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 400;
}

/* =========================== CDM — Footer =========================== */

body.theme-cdm footer{
  background: #26271A;  /* oliva muy oscuro (casi negro) */
  color: rgba(247,242,230,.72); /* crema suave */
}
body.theme-cdm .footer-brand{
  font-family: var(--font-display);  /* Playfair Display serif */
  font-size: 21px;
  font-weight: 600;
  color: var(--paper);  /* crema puro */
}
body.theme-cdm .footer-logo{ height: 40px; object-fit: contain; } /* logo delimitado */
body.theme-cdm .footer-col h4{ color: var(--accent-2); }  /* título columna champán */
body.theme-cdm .footer-col a{ color: rgba(247,242,230,.72); } /* links crema suave */
body.theme-cdm .footer-col a:hover{ color: var(--accent-2); } /* hover champán */
body.theme-cdm .footer-grid{ border-bottom-color: var(--line-on-dark); } /* separador champán */
body.theme-cdm .footer-bottom{ color: rgba(247,242,230,.45); } /* copyright muy suave */
body.theme-cdm footer .btn-wa{
  background: var(--accent-2);  /* champán */
  color: var(--accent);         /* oliva */
}
body.theme-cdm footer .btn-wa:hover{
  background: color-mix(in srgb, var(--accent-2) 85%, white); /* se aclara */
}

/* =========================== CDM — WhatsApp flotante =========================== */

body.theme-cdm .wa-float{
  background: var(--accent);  /* oliva */
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(46,47,26,.5); /* sombra oscura */
}
body.theme-cdm .wa-float:hover{
  transform: scale(1.06);  /* se agranda 6% en hover */
  background: color-mix(in srgb, var(--accent) 85%, black); /* oscurece */
}

/* =========================== CDM — Responsive ===========================
   Colapsos compartidos en "Responsive unificado" (ver abajo). */

/* ==========================================================================
   VARIANTE AC Mueblería (Minimalista / Flat Design)
   Bordes rectos, paleta carbón/amarillo, sin sombras ni elevación
   ========================================================================== */
body.theme-ac {
  --font-display:   'Jost', sans-serif;       /* sans-serif geométrica para títulos */
  --font-mono:      'Crimson Pro', serif;      /* serif mono para变体 */
  --font-body:      'Jost', sans-serif;        /* sans-serif geométrica para cuerpo */
  --radius:         0px; /* Bordes rectos minimalistas (sin redondeo) */

  /* --- Layout responsive (solo valores desktop) --- */
  --hero-h1: clamp(36px, 4.6vw, 58px); /* título hero responsive */

  /* Paleta carbón y amarillo */
  --off-black:      #151515;    /* carbón oscuro (fondo principal) */
  --accent:         #af8f1a;    /* amarillo/dorado — acento principal */
  --accent-hover:   #957a16;    /* amarillo oscuro para hover */
  --accent-muted:   #a9965a;    /* dorado apagado para números, specs */
  --accent-dark:    #827857;    /* dorado muy oscuro */

  --paper:          #F8F8F6;    /* fondo claro casi blanco */
  --paper-2:        #EFEFEA;    /* fondo alterno gris claro */
  --ink:            #151515;    /* texto carbón */
  --ink-soft:       #59564C;    /* texto secundario gris */
  --line:           #D8D6D1;    /* bordes sutiles */
  --line-strong:    #B8B6B0;    /* bordes marcados */
  --line-on-dark:   rgba(255,255,255,0.08); /* bordes muy sutiles sobre oscuro */

  background: var(--off-black);  /* fondo carbón */
  color: var(--paper);           /* texto crema */
  font-family: var(--font-body); /* Jost */
}
body.theme-ac h1, body.theme-ac h2, body.theme-ac h3 {
  color: var(--paper);  /* todos los títulos crema */
}
body.theme-ac .section-lede {
  color: rgba(242,236,223,.7);  /* subtítulo crema suave */
}
body.theme-ac section {
  background: var(--off-black);  /* todas las secciones fondo carbón */
}
body.theme-ac .on-paper2 {
  background: #1a1a1a;
}

/* =========================== Reset =========================== */
*,*::before,*::after{ box-sizing:border-box; } /*incluye padding y border en el ancho total */
html{ scroll-behavior:smooth; } /* scroll suave al hacer clic en anchors */
body{
  margin:0;
  background:var(--paper);      /* fondo claro por defecto */
  color:var(--ink);             /* texto oscuro por defecto */
  font-family:var(--font-body); /* Work Sans */
  font-size:16px;
  line-height:1.55;             /* interlineado cómodo */
  -webkit-font-smoothing:antialiased; /* texto más suave en macOS/iOS */
}
img,svg{ display:block; max-width:100%; } /* imágenes bloque, nunca más del 100% */
a{ color:inherit; text-decoration:none; }  /* hereda color, sin subrayado */
ul{ margin:0; padding:0; list-style:none; } /* listas sin viñetas ni márgenes */
h1,h2,h3,h4,p{ margin:0; }    /* elimina márgenes por defecto */
button{ font-family:inherit; cursor:pointer; } /* hereda fuente, cursor mano */

/* Focus visible — resalta con borde amarillo al navegar con teclado (accesibilidad) */
:focus-visible{
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* Reduced motion — desactiva animaciones si el usuario lo pide en SO */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Container — centra contenido con ancho máximo (1180px) */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;               /* centrado horizontal */
  padding:0 28px;              /* margen lateral */
}

/* Eyebrow — texto mono pequeño con línea decorativa a la izquierda */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono); /* IBM Plex Mono */
  font-size:15px;
  letter-spacing:.09em;          /* espaciado entre letras */
  text-transform:uppercase;      /* todo en mayúsculas */
  color:var(--accent);
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;       /* línea de 16px de ancho */
  background:var(--accent);
  display:inline-block;
}

/* Títulos base — fuente display, peso 600, sin espaciado extra */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
body.theme-maderin h1, body.theme-maderin h2, body.theme-maderin h3 { font-weight: 500; } /* titulares Maderin más finos */
.section-title{ font-size:clamp(28px,4vw,42px); line-height:1.12; margin-top:10px; max-width:22ch; } /* título responsive */
.section-lede{ font-family:var(--font-body); font-size:16.5px; color:var(--ink-soft); max-width:52ch; margin-top:14px; } /* subtítulo */

/* Secciones — padding vertical */
section{ padding:50px 0; }
.section-tight{ padding:56px 0; } /* sección con más padding */
.on-dark{ background:var(--espresso); color:var(--paper); }   /* fondo oscuro */
.on-dark .section-lede{ color:rgba(242,236,223,.72); }       /* subtítulo crema suave */
.on-dark .eyebrow{ color:var(--accent-2); }                   /* eyebrow champán */
.on-dark .eyebrow::before{ background:var(--accent-2); }      /* línea champán */
.on-paper2{ background:var(--paper-2); }                       /* fondo alterno */

/* Head-row — título y subtítulo en fila con espacio entre ellos */
.head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;       /* se apila en móvil */
  margin-bottom:44px;  /* separación del grid de abajo */
}

/* =========================== Botones =========================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;  /* texto en una sola línea */
}
.btn:hover{ transform: translateY(-1px); } /* sube 1px en hover */
.btn-wa{
  background:var(--accent);  /* color sólido (marrón en AC, azul en Maderin, oliva en CDM) */
  color:#fff;
}
.btn-wa:hover{ background: color-mix(in srgb, var(--accent) 85%, black); } /* oscurece 15% */
.btn-ghost-dark{
  border-color: var(--line-on-dark); /* borde sutil sobre fondo oscuro */
  color: var(--paper);
}
.btn-ghost-dark:hover{ border-color: var(--accent-2); color:var(--accent-2); } /* acento secundario en hover */
.btn-ghost{
  border-color: var(--line-strong);  /* borde marcado sobre fondo claro */
  color: var(--ink);
}
.btn:hover{ border-color: var(--accent); color:var(--accent); } /* acento en hover */
.btn-sm{ padding:10px 16px; font-size:13.5px; width:100%; justify-content:center; } /* botón pequeño, ancho completo */
.btn svg{ width:16px; height:16px; flex:none; } /* icono del botón */

/* =========================== Nav =========================== */
.nav{
  position:sticky; top:0; z-index:50;  /* se pega arriba al hacer scroll */
  background: rgba(43,33,24,.92);      /* marrón oscuro semitransparente */
  backdrop-filter: blur(6px);          /* desenfoque detrás */
  border-bottom:1px solid var(--line-on-dark); /* borde sutil */
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:var(--container); margin:0 auto; /* centrado */
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  color:var(--paper);  /* marca crema */
}
.brand-logo{
  height:60px;
  object-fit:contain; /* logo no se deforma */
}
.brand small{
  font-family:var(--font-mono); font-weight:400; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); /* subtítulo champán */
}
.nav-links{ display:contents; gap:30px; align-items:center; }
.nav-links a{
  font-family:var(--font-mono); font-size:16px; color:rgba(244, 241, 233, 0.78); font-weight:0;
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--paper); } /* crema puro en hover */
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; padding:6px; } /* hamburguesa oculta en desktop */
.nav-toggle svg{ width:24px; height:24px; color:var(--paper); }

/* Nav responsive — menú hamburguesa en móvil */
@media (max-width: 860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; /* debajo del nav */
    background: var(--nav-mobile-bg); flex-direction:column; align-items:flex-start;
    gap:0; padding:8px 28px 18px; border-bottom:1px solid var(--nav-mobile-divider);
    display:none;  /* oculto por defecto */
  }
  .nav-links.open{ display:flex; }  /* se muestra con la clase .open */
  .nav-links a{ padding:12px 0; width:100%; border-bottom:1px solid var(--nav-mobile-divider); } /* links apilados */
  .nav-toggle{ display:block; }     /* se muestra la hamburguesa */
  .nav-cta .btn span.long{ display:none; } /* oculta texto largo del botón */
}

/* =========================== Hero =========================== */
.hero{
  position:relative;
  min-height:100vh;                            /* fallback navegadores sin svh */
  min-height:calc(100svh - var(--nav-h));      /* pantalla completa descontando el nav */
  background:var(--off-black); /* fondo oscuro por defecto */
  color:var(--paper);
  overflow:hidden;            /* recorta imagen de fondo */
  display:flex;
  align-items:center;         /* centra verticalmente */
}
.hero-bg{
  position:absolute; inset:0; z-index:0;  /* detrás de todo */
}
.hero-bg picture{
  display:block; width:100%; height:100%; /* <picture> ocupa todo el hero */
}
.hero-bg-img{
  width:100%; height:100%;
  object-fit:cover;   /* imagen cubre todo el hero sin deformarse */
  display:block;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;  /* sobre la imagen */
  background:linear-gradient(to right, rgba(21,21,21,0.92) 0%, rgba(21,21,21,0.6) 45%, transparent 100%); /* degradado carbón a transparente */
}
.hero-container{
  position:relative; z-index:2;  /* sobre el overlay */
  width:100%;
  padding: var(--hero-pad);      /* padding responsive del :root */
}
.hero-copy{
  max-width:640px;  /* ancho máximo del texto del hero */
}
.hero-copy h1{
  color:var(--paper);
  font-size: var(--hero-h1);  /* clamp responsive del :root */
  line-height:1.04;           /* interlineado ajustado para títulos grandes */
  margin-top:5px;
}
.hero-copy h1 em{ font-style:normal; color:var(--accent); } /* palabra destacada en acento */
.hero-copy p.section-lede{ margin-top:20px; color:rgba(242,236,223,.75); font-size:17.5px; max-width:46ch; } /* subtítulo crema */
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; } /* botones CTA */
.hero-badges{
  display:flex; gap: var(--badges-gap); margin-top:52px; flex-wrap:wrap;
  border-top:1px solid var(--line-on-dark); padding-top:24px; /* separador superior */
}
.hero-badge{ font-family:var(--font-mono); font-size:15px; color:rgba(242,236,223,.6); letter-spacing:.03em; } /* label badge */
.hero-badge b{ display:block; color:var(--paper); font-family:var(--font-display); font-size:22px; font-weight:600; } /* número badge */

/* Hero grid — wrapper compartido (estándar CDM): 1 columna, centrado vertical */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;  /* una columna por defecto */
  gap:clamp(40px, 5vw, 80px); /* espacio responsive entre columnas */
  align-items:center;
}
/* Hero full-bleed (estándar CDM): contenedor sin tope de ancho + padding lateral responsive */
body.theme-maderin .hero .container,
body.theme-ac .hero .container{
  position:relative;
  z-index:2;                     /* sobre el overlay */
  max-width:none;                /* sin límite de ancho */
  padding: 0 clamp(28px, 6vw, 110px); /* padding horizontal responsive */
}

/* Microcopy bajo los CTA del hero — refuerza la conversión */
.hero-microcopy{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(242,236,223,.62);
}
body.theme-maderin .hero-microcopy{ font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.62); }
body.theme-cdm .hero-microcopy{ color:rgba(247,242,230,.6); }

/* Indicador de scroll — invita a bajar al primer viewport */
.hero-scroll-cue{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:rgba(242,236,223,.6);
  transition:color .2s ease;
}
.hero-scroll-cue-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-scroll-cue svg{
  width:20px; height:20px;
  animation:heroCueBounce 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover{ color:var(--accent); }
body.theme-maderin .hero-scroll-cue{ color:rgba(255,255,255,.6); }
body.theme-maderin .hero-scroll-cue:hover{ color:#fff; }
body.theme-cdm .hero-scroll-cue{ color:rgba(247,242,230,.6); }
body.theme-cdm .hero-scroll-cue:hover{ color:var(--accent-2); }

@keyframes heroCueBounce{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(5px); opacity:1; }
}

/* =========================== Features =========================== */
.features-grid{
  display:grid; grid-template-columns: var(--cols-features); gap:1px; /* 1px de separación */
  background:var(--line); border:1px solid var(--line); margin-top:8px; /* fondo = color de borde = separación visual */
}
.feature-card{ background:var(--paper); padding:32px 26px; position:relative; overflow:hidden; }
.feature-img{
  position:absolute; inset:0;  /* cubre toda la tarjeta */
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.03); /* oculta y ligeramente agrandada */
  transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1), transform 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index:0;  /* detrás del contenido */
}
.feature-img::after{
  content:""; position:absolute; inset:0;
  background:rgba(21,21,21,0.75); /* oscurece la imagen para legibilidad */
}
.feature-card:hover .feature-img{ opacity:1; transform:scale(1); } /* imagen aparece en hover */
.feature-card > *:not(.feature-img){ position:relative; z-index:1; } /* contenido sobre la imagen */
.feature-num{ font-family:var(--font-mono); font-size:16px; color:var(--accent); } /* número de feature */
.feature-card h3{ font-size:19px; margin-top:16px; }
.feature-card p{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.feature-icon{ width:34px; height:34px; color:var(--accent); margin-bottom:14px; } /* icono acento */

/* =========================== Portafolio / catálogo (grillas) =========================== */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; } /* fila de filtros */
.filter-chip{
  font-family:var(--font-mono); font-size:13x; letter-spacing:.02em;
  padding:8px 16px; border:1px solid var(--line-strong); border-radius:100px; /* completamente redondo */
  background:transparent; color:var(--ink-soft); transition:.15s ease;
}
.filter-chip:hover{ border-color:var(--accent); color:var(--accent); }
.filter-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); } /* activo = fondo sólido */

.work-grid, .product-grid{
  display:grid; grid-template-columns: var(--cols-products); gap:26px;
}
.work-card{
  border:1px solid var(--line); background:var(--paper); overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(34,27,20,.35); } /* sube y sombra */
.work-thumb{
  aspect-ratio:1/1; background: linear-gradient(155deg, var(--paper-2), var(--paper)); /* gradiente sutil */
  position:relative; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.work-thumb svg{ width:44%; height:44%; color:var(--ink-soft); opacity:.85; } /* placeholder icon */
.work-thumb img{ width:100%; height:100%; object-fit:cover; } /* imagen real cubre todo */
.work-tag{
  position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10.5px; /* esquina sup izquierda */
  letter-spacing:.05em; text-transform:uppercase; background:var(--espresso); color:var(--paper);
  padding:4px 9px; border-radius:2px; /* badge pequeño */
}
.work-body{ padding:20px 22px 22px; }
.work-body h3{ font-size:17px; }
.work-body p{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
.work-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line); /* separador */
  font-family:var(--font-mono); font-size:15px; color:var(--accent); /* precio en acento */
}

/* =========================== Proceso =========================== */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px; position:relative; } /* 4 pasos en fila */
.process-step{ position:relative; padding:0 22px 0 0; }

.process-num{
  font-family:var(--font-mono); font-size:13px; color:var(--accent);
  width:34px; height:34px; border:1px solid var(--accent); border-radius:50%; /* círculo con número */
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.process-step h3{ font-size:16.5px; }
.process-step p{ font-size:13.5px; color:var(--ink-soft); margin-top:8px; }

/* =========================== Testimonios =========================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } /* 3 columnas */
.testi-card{ background:var(--paper); border:1px solid var(--line); padding:28px; }
.testi-stars{ color:var(--accent-2); font-size:13px; letter-spacing:2px; } /* estrellas doradas */
.testi-card p.quote{ margin-top:16px; font-family:var(--font-display); font-size:17px; line-height:1.4; color:var(--ink); } /* cita */
.testi-who{ margin-top:18px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); } /* autor */
.testi-note{ margin-top:28px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); opacity:.75; } /* nota adicional */

/* =========================== Marcas (submarcas) =========================== */
.brands-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } /* 3 columnas */
.brand-card{
  background:var(--espresso-2); border:1px solid var(--line-on-dark); /* fondo marrón oscuro */
  padding:30px 26px; display:flex; flex-direction:column; gap:14px; min-height:100%; /* altura mínima igual */
  transition: border-color .2s ease, transform .2s ease;
}
.brand-card:hover{ border-color:var(--accent-2); transform:translateY(-3px); } /* sube y borde champán */
.brand-card .tag{ font-family:var(--font-mono); font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); } /* etiqueta champán */
.brand-card h3{ color:var(--paper); font-size:22px; }
.brand-logo{ height:45px; width:auto; object-fit:contain; } /* logo delimitado */
.brand-card p{ color:rgba(242,236,223,.68); font-size:14px; flex:1; } /* descripción, flex:1 para empujar "go" abajo */
.brand-card .go{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--paper); } /* enlace "ver más" */
.brand-card .go svg{ width:15px; height:15px; transition:transform .2s ease; }
.brand-card:hover .go svg{ transform:translateX(4px); } /* flecha se mueve a la derecha */

/* =========================== Footer =========================== */
footer{ background:var(--espresso-3); color:rgba(242,236,223,.7); padding:60px 0 26px; } /* fondo marrón muy oscuro */
.footer-grid{ display:grid; grid-template-columns: var(--cols-footer); gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-on-dark); } /* 3 columnas */
.footer-brand{ font-family:var(--font-display); font-size:20px; color:var(--paper); font-weight:700; } /* marca footer */
.footer-grid p{ font-size:12px; margin-top:12px; max-width:40ch; } /* descripción footer */
.footer-col h4{ font-family:var(--font-mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin-bottom:14px; } /* título columna champán */
.footer-col a, .footer-col li{ display:block; font-size:14px; margin-bottom:9px; color:rgba(242,236,223,.72); } /* links crema */
.footer-col a:hover{ color:var(--paper); } /* hover crema puro */
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px; color:rgba(242,236,223,.45); } /* copyright muy suave */

/* =========================== WhatsApp flotante =========================== */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60; /* fijo abajo a la derecha */
  width:56px; height:56px; border-radius:50%;            /* circular */
  background:#3DA45E; color:#fff;                        /* verde WhatsApp */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.4);           /* sombra oscura */
  transition: transform .18s ease;
}
.wa-float:hover{ transform:scale(1.06); } /* se agranda 6% en hover */
.wa-float svg{ width:27px; height:27px; } /* icono WhatsApp */

/* =========================== Catálogo de productos (Maderin / CDM) =========================== */
.product-card{
  border:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden;
}
.product-thumb{
  aspect-ratio: 1 / 1; background:linear-gradient(155deg,var(--paper-2),var(--paper)); /* gradiente sutil */
  position:relative; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);
  overflow: hidden;
}
.product-thumb svg{ width:46%; height:46%; color:var(--accent); } /* icono placeholder */
.sample-badge{
  position:absolute; top:10px; right:10px; background:rgba(34,27,20,.82); color:var(--paper); /* badge oscuro */
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:2px;
}
.product-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3{ font-size:17px; }
.product-body p.desc{ font-size:13.5px; color:var(--ink-soft); flex:1; } /* flex:1 empuja specs abajo */
.product-specs{ display:flex; gap:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; }
.product-price{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); }
.product-price small{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); font-weight:400; } /* texto auxiliar */

/* =========================== Sub-brand hero band =========================== */
.parent-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 8px;
  border:1px solid var(--line-on-dark); border-radius:100px; margin-bottom:22px; /* badge redondo */
}
.parent-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); } /* punto dorado */
.parent-badge span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:rgba(242,236,223,.75); } /* texto crema */

/* =========================== Modulax external card =========================== */
.modulax-band{
  border:1px dashed var(--line-on-dark); padding:26px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; /* borde punteado */
}

/* =========================== Reveal on scroll (IntersectionObserver) =========================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal en tarjetas de características, productos y badges */
.feature-card.reveal,
.product-card.reveal,
.hero-badge.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card.reveal.in-view,
.product-card.reveal.in-view,
.hero-badge.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =========================== Responsive unificado (AC / Maderin / CDM) =========================== */
@media (max-width: 980px){
  :root{
    --cols-features: repeat(2,1fr);  /* features: 2 columnas */
    --cols-products: repeat(2,1fr);  /* productos: 2 columnas */
    --cols-footer: 1fr;              /* footer: 1 columna */
    --hero-pad: 80px 0 60px;         /* padding hero tablets */
  }
  body.theme-cdm, body.theme-maderin{ --cols-features: repeat(2,1fr); }
  body.theme-cdm{ --hero-h1: clamp(32px, 6vw, 44px); }   /* título CDM más pequeño */
  body.theme-maderin{ --hero-pad: 0px 200px 0px 30px; }   /* Maderin: más padding derecho */
  body.theme-ac{ --hero-pad: 0px 100px 0px 30px; }        /* AC: padding derecho moderado */

  .hero-overlay{
    background:linear-gradient(to right, rgba(21,21,21,0.88) 0%, rgba(21,21,21,0.5) 60%, transparent 100%); /* más transparente */
  }
  .footer-grid{ gap:28px; }                               /* menos espacio entre columnas */
  .process-row{ grid-template-columns:repeat(2,1fr); row-gap:40px; } /* proceso: 2 columnas */
  .process-step:nth-child(2)::after{ display:none; }      /* oculta línea conectora */
  .testi-grid{ grid-template-columns:1fr; }               /* testimonios: 1 columna */
  .brands-grid{ grid-template-columns:1fr; }              /* marcas: 1 columna */
  .hero-grid{ grid-template-columns:1fr; gap:40px; }      /* hero grid: 1 columna */

  body.theme-cdm .hero-overlay{
    background: linear-gradient(to right, 
      rgba(46,47,26,0.95) 0%,      /* oliva casi opaco */
      rgba(46,47,26,0.8) 20%,      /* oliva oscuro */
      rgba(46,47,26,0.3) 40%,      /* más transparente */
      rgba(46,47,26,0) 100%        /* transparente */
    );
  }
  body.theme-maderin .hero-overlay{
    background: linear-gradient(to right, 
      rgba(45,52,102,0.95) 0%,     /* azul casi opaco */
      rgba(45,52,102,0.8) 20%,     /* azul oscuro */
      rgba(45,52,102,0.3) 40%,     /* más transparente */
      rgba(45,52,102,0) 100%       /* transparente */
    );
  }
  body.theme-cdm .hero-grid{ gap: 40px; }
}
@media (max-width: 600px){
  :root{
    --cols-features: 1fr;  /* features: 1 columna */
    --cols-products: 1fr;  /* productos: 1 columna */
    --cols-footer: 1fr;    /* footer: 1 columna */
    --hero-pad: 100px 0 50px;        /* más padding arriba */
    --hero-h1: clamp(30px, 8vw, 42px); /* título más grande en % */
    --badges-gap: 20px;              /* menos espacio entre badges */
  }
  body.theme-cdm, body.theme-maderin{ --cols-features: 1fr; }
  body.theme-cdm{ --hero-h1: clamp(32px, 6vw, 44px); }
  body.theme-maderin{ --hero-pad: 0px 100px 0px 10px; --hero-h1: clamp(28px, 7vw, 38px); --badges-gap: 20px; }
  body.theme-ac{ --hero-pad: 0px 100px 0px 30px; }

  .hero-overlay{
    background:linear-gradient(to bottom, rgba(21,21,21,0.85) 0%, rgba(21,21,21,0.6) 50%, rgba(21,21,21,0.9) 100%); /* gradiente vertical */
  }
  section{ padding:64px 0; }       /* más padding vertical en móvil */
  .hero-visual{ display:none; }    /* oculta imagen decorativa del hero */

  body.theme-cdm .hero-overlay{
    background: linear-gradient(to bottom, rgba(46,47,26,.82) 0%, rgba(46,47,26,.66) 45%, rgba(46,47,26,.9) 100%);
  }
  body.theme-maderin .hero-overlay{
    background: linear-gradient(to bottom, rgba(45,52,102,.82) 0%, rgba(45,52,102,.64) 45%, rgba(45,52,102,.9) 100%);
  }
  body.theme-maderin .hero-bg-img{
    object-position: 68% 32%;  /* mantiene el mueble y a la niña en cuadro */
  }
  body.theme-cdm .hero-bg-img{
    object-position: 72% 30%;  /* mantiene el organizador en cuadro */
  }
  body.theme-ac .hero-bg-img{
    object-position: 72% 30%;  /* mantiene al carpintero en cuadro */
  }
}

/* ==========================================================================
   MINIMALIST FLAT DESIGN & TIMELINE (EXCLUSIVO AC MUEBLERÍA)
   Bordes rectos, sin sombras, sin elevación; hover solo cambia borde
   ========================================================================== */

/* Botones Flat — bordes rectos (10px), sin elevación en hover */
body.theme-ac .btn {
  border-radius: 10px !important;  /* recto en vez de redondo */
}
body.theme-ac .btn:hover {
  transform: none !important;       /* sin movimiento en hover */
}
body.theme-ac .btn-wa {
  background: var(--accent);  /* amarillo/dorado */
  color: #fff;
}
body.theme-ac .btn-wa:hover {
  background: var(--accent-hover);  /* amarillo oscuro */
}
body.theme-ac .btn-ghost-dark {
  border-color: var(--line-strong);  /* borde gris sobre fondo oscuro */
  color: var(--paper);
}
body.theme-ac .btn-ghost-dark:hover {
  border-color: var(--accent);  /* borde amarillo en hover */
  color: var(--accent);
}
body.theme-ac .btn-ghost {
  border-color: var(--line-on-dark);  /* borde muy sutil */
  color: var(--paper);
}
body.theme-ac .btn-ghost:hover {
  border-color: var(--accent);  /* borde amarillo en hover */
  color: var(--accent);
}

/* Nav Flat — carbón opaco, sin sombra, links con Jost */
body.theme-ac .nav {
  background: rgba(21, 21, 21, 0.96);  /* carbón casi opaco */
  border-bottom: 1px solid var(--line-on-dark);
  box-shadow: none !important;           /* sin sombra */
}
body.theme-ac .brand span {
  color: var(--accent) !important;  /* subtítulo amarillo */
}
body.theme-ac .nav-links a {
  font-family: var(--font-display);  /* Jost en vez de mono */
  font-weight: 500;
  letter-spacing: .01em;
}
body.theme-ac .nav-cta .btn-wa {
  font-family: var(--font-display);  /* botón con Jost */
}
body.theme-ac .nav-links a:hover {
  color: var(--accent);  /* hover amarillo */
}

/* Hero Flat — carbón puro, acentos amarillos, pantalla completa */
body.theme-ac .hero {
  background: var(--off-black);  /* carbón */
  min-height: 100vh;                          /* fallback */
  min-height: calc(100svh - var(--nav-h));    /* pantalla completa descontando el nav */
  padding: 56px 0 72px;
  box-sizing: border-box;
}
body.theme-ac .hero-copy h1 em {
  color: var(--accent);  /* palabra destacada amarilla */
}
body.theme-ac .hero-badges {
  border-color: var(--line-on-dark);  /* separador muy sutil */
  margin-top: 30px;
  padding-top: 18px;
  gap: 36px;
}
body.theme-ac .hero-actions {
  margin-top: 24px;
}
body.theme-ac .hero-badge b {
  color: var(--accent);  /* número del badge amarillo */
}

/* =========================== AC — Hero rediseñado (tipografía + full-bleed) =========================== */

body.theme-ac .hero-copy {
  max-width: 600px;  /* ancho máximo del texto */
}
body.theme-ac .hero-copy .eyebrow {
  color: var(--accent);  /* eyebrow amarillo */
}
body.theme-ac .hero-copy .eyebrow::before {
  background: var(--accent);  /* línea decorativa amarilla */
}
body.theme-ac .hero-copy h1 {
  margin-left: 0;  /* sin indentación */
}
body.theme-ac .hero-copy h1 em {
  font-family: var(--font-mono);   /* mono para la palabra destacada */
  font-style: italic;              /* cursiva */
  color: var(--accent);
  font-size: 1.07em;               /* ligeramente más grande */
  line-height: 1.15;
}
body.theme-ac .hero-copy .section-lede {
  color: rgba(242,236,223,.85);  /* crema más visible */
  max-width: 44ch;
}
body.theme-ac .hero-actions {
  margin-left: 0;  /* sin indentación */
}
body.theme-ac .hero-badges {
  margin-left: 0;
}

/* Tarjetas Flat (Sin Sombras, Sin Elevación) — fondo carbón, bordes rectos */
body.theme-ac .features-grid {
  background: var(--line-on-dark);  /* fondo sutil entre tarjetas */
  border: 1px solid var(--line-on-dark);
}
body.theme-ac .feature-card,
body.theme-ac .work-card,
body.theme-ac .testi-card,
body.theme-ac .product-card {
  border: 1px solid var(--line-on-dark);  /* borde muy sutil */
  background: #1c1c1c;                    /* carbón oscuro */
  border-radius: 0px !important;          /* sin redondeo */
  box-shadow: none !important;            /* sin sombra */
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
body.theme-ac .work-card:hover,
body.theme-ac .testi-card:hover {
  transform: none !important;  /* sin elevación */
  border-color: var(--accent); /* solo cambia borde a amarillo */
  box-shadow: none !important;
}
body.theme-ac .feature-card h3,
body.theme-ac .work-body h3,
body.theme-ac .testi-card p.quote {
  color: var(--paper);  /* títulos crema */
}
body.theme-ac .work-body p,
body.theme-ac .testi-who,
body.theme-ac .testi-note {
  color: rgba(242,236,223,.6);  /* texto crema suave */
}
body.theme-ac .feature-num {
  color: var(--accent-muted);  /* número dorado apagado */
}
body.theme-ac .feature-icon {
  color: var(--accent);  /* icono amarillo */
}
body.theme-ac .work-thumb {
  border-radius: 0px !important;  /* sin redondeo */
  border-color: var(--line-on-dark);
  background: #222;               /* carbón oscuro */
}
body.theme-ac .work-thumb svg {
  color: rgba(242,236,223,.3);  /* placeholder muy suave */
}
body.theme-ac .work-tag {
  border-radius: 0px;              /* badge rectangular */
  background: var(--accent);       /* amarillo */
  color: var(--off-black);         /* texto carbón */
  font-weight: 600;
}
body.theme-ac .work-meta {
  border-color: var(--line-on-dark);
  color: var(--accent-muted);  /* precio dorado apagado */
}

/* ==========================================================================
   CARRUSEL DE FOTOS LIMPIO Y MODAL DE PROYECTOS (Trabajos Realizados)
   ========================================================================== */

/* Contenedor del Carrusel con flechas laterales flotantes */
.works-carousel-wrapper {
  position: relative;
  width: 100%;
  margin-top: 18px;
}

/* Flechas flotantes en los laterales de la galería */
.carousel-float-arrow {
  position: absolute;
  top: calc(50% - 24px);
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  touch-action: manipulation;
}

.carousel-float-arrow.prev {
  left: -22px;
}

.carousel-float-arrow.next {
  right: -22px;
}

.carousel-float-arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.carousel-float-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #121212;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(175, 143, 26, 0.45);
}

.carousel-float-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-float-arrow:disabled,
.carousel-float-arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

.works-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  padding: 8px 4px 6px;
  cursor: grab;
  user-select: none;
}

.works-carousel-viewport::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.works-carousel-viewport:active {
  cursor: grabbing;
}

.works-carousel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  align-items: stretch;
}

/* Tarjetas de Proyectos en el Carrusel */
.project-card {
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
  background: #171717;
  border: 1px solid var(--line-on-dark);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  text-align: left;
  outline: none;
}

.project-card:hover,
.project-card:focus-visible {
  border-color: rgba(175, 143, 26, 0.7);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(175, 143, 26, 0.3);
}

.project-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: brightness(0.92);
}

.project-card:hover .project-card-img {
  transform: scale(1.06);
  filter: brightness(1.02);
}

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.6) 0%, rgba(15,15,15,0.05) 40%, rgba(15,15,15,0.7) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.project-badge-top {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.p-badge-cat {
  background: var(--accent);
  color: #121212;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.p-badge-num {
  background: rgba(18,18,18,0.8);
  backdrop-filter: blur(6px);
  color: rgba(242,236,223,0.85);
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 2px 6px;
}

.project-card-action-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  opacity: 0.85;
  transform: translateY(2px);
  transition: all 0.25s ease;
}

.project-card:hover .project-card-action-hint {
  opacity: 1;
  transform: translateY(0);
}

.action-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  transition: all 0.2s ease;
}

.project-card:hover .action-hint-pill {
  background: var(--accent);
  color: #121212;
  border-color: var(--accent);
}

.project-card:hover .action-hint-pill svg {
  color: #121212;
}

.project-card-footer {
  padding: 14px 16px;
  background: #181818;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
}

.p-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.p-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.p-card-sub {
  font-size: 12px;
  color: rgba(242,236,223,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-muted);
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 4px 7px;
}

.p-card-loc svg {
  color: var(--accent);
}

/* Barra inferior del carrusel: Barra de estado / Dots interactivos */
.carousel-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 0 4px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.carousel-dot {
  width: 18px;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

.carousel-dot:hover {
  background: rgba(255,255,255,0.45);
}

.carousel-dot.active {
  background: var(--accent);
  width: 34px;
}

.carousel-hint-mobile {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(242,236,223,0.5);
}

/* ==========================================================================
   MODAL EMERGENTE CON FICHA TÉCNICA DEL PROYECTO
   ========================================================================== */
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.project-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 0 0 1px rgba(175, 143, 26, 0.2);
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dark) transparent;
}

.project-modal.active .project-modal-dialog {
  transform: scale(1) translateY(0);
}

/* Botón de cierre en esquina */
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26,26,26,0.9);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

.modal-close-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #121212;
  transform: rotate(90deg);
}

/* Contenido Grid 2 Columnas */
.modal-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: unset;
  align-items: stretch;
}

/* Columna Izquierda: Fotografía */
.modal-media-col {
  background: #0f0f0f;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line-on-dark);
}

.modal-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.6) 0%, rgba(15,15,15,0.02) 40%, rgba(15,15,15,0.7) 100%);
  pointer-events: none;
}

.modal-badge-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

/* Barra de navegación interna del modal (Anterior / Siguiente) */
.modal-nav-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #131313;
  border-top: 1px solid var(--line-on-dark);
}

.modal-nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(242,236,223,0.8);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.modal-nav-arrow svg {
  width: 14px;
  height: 14px;
}

.modal-nav-arrow:hover {
  border-color: var(--accent);
  background: rgba(175, 143, 26, 0.15);
  color: var(--accent);
}

.modal-nav-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.modal-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-nav-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Columna Derecha: Información y Ficha Técnica */
.modal-info-col {
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #171717;
}

.modal-header {
  margin-bottom: 12px;
}

.modal-pretitle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

.modal-title {
  font-size: clamp(22px, 2.5vw, 28px);
  color: var(--paper);
  margin: 0 0 4px;
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 14.5px;
  color: var(--accent-muted);
  font-weight: 500;
  margin: 0;
}

.modal-desc {
  font-size: 14px;
  color: rgba(242,236,223,0.75);
  line-height: 1.6;
  margin: 12px 0 16px;
}

/* Sección Ficha Técnica */
.modal-specs-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  margin-bottom: 20px;
}

.specs-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(242,236,223,0.5);
  margin-bottom: 10px;
}

.modal-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-spec-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.modal-spec-card:hover {
  border-color: rgba(175, 143, 26, 0.4);
}

.m-spec-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(175, 143, 26, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-spec-icon svg {
  width: 15px;
  height: 15px;
}

.m-spec-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m-spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(242,236,223,0.45);
}

.m-spec-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.3;
}

/* Botón Cotizar dentro del Modal */
.modal-actions {
  margin-top: auto;
}

.modal-btn-wa {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 14px;
  background: var(--accent);
  color: #121212;
  font-weight: 700;
  border: 1px solid var(--accent);
  box-shadow: none;
  min-height: 48px;
  touch-action: manipulation;
}

.modal-btn-wa:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #121212;
  transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE PARA CARRUSEL Y MODAL
   ========================================================================== */
@media (max-width: 1240px) {
  .carousel-float-arrow.prev {
    left: -8px;
  }
  .carousel-float-arrow.next {
    right: -8px;
  }
}

@media (max-width: 980px) {
  .carousel-float-arrow {
    display: inline-flex;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    top: 40%;
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  }
  .carousel-float-arrow.prev {
    left: 4px;
  }
  .carousel-float-arrow.next {
    right: 4px;
  }
  .carousel-float-arrow svg {
    width: 16px;
    height: 16px;
  }
  .works-carousel-wrapper {
    overflow-x: clip;
    max-width: 100%;
  }
  .works-carousel-viewport {
    padding: 6px 2px 4px;
    max-width: 100%;
  }
  .project-card {
    flex: 0 0 220px;
    width: 220px;
    max-width: 80vw;
  }
  .carousel-bottom-bar {
    justify-content: center;
    margin-top: 6px;
    gap: 8px;
  }
  .project-modal-dialog {
    max-width: 480px;
  }
  .modal-content-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: unset;
    width: 100%;
  }
  .modal-media-col {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line-on-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-img-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    min-height: unset;
    max-height: unset;
  }
  .modal-info-col {
    padding: 20px 18px 18px;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .carousel-float-arrow {
    display: inline-flex;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    top: 38%;
    background: rgba(18, 18, 18, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }
  .carousel-float-arrow.prev {
    left: 2px;
  }
  .carousel-float-arrow.next {
    right: 2px;
  }
  .carousel-float-arrow svg {
    width: 15px;
    height: 15px;
  }
  .works-carousel-wrapper {
    overflow-x: clip;
    max-width: 100%;
  }
  .works-carousel-viewport {
    padding: 4px 0 4px;
    max-width: 100%;
  }
  .project-card {
    flex: 0 0 clamp(190px, 66vw, 220px);
    width: clamp(190px, 66vw, 220px);
    max-width: 80vw;
    box-sizing: border-box;
  }
  .project-card-media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden;
  }
  .project-card-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
  }
  .works-carousel-track {
    gap: 12px;
  }
  .carousel-bottom-bar {
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    padding: 0;
  }
  .project-modal {
    padding: 8px;
    box-sizing: border-box;
  }
  .project-modal-dialog {
    width: 100%;
    max-width: 360px;
    max-height: 92vh;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .modal-media-col {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .modal-img-wrap {
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: none;
    min-height: unset;
    max-height: unset;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  .modal-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .modal-nav-toolbar {
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
  }
  .modal-info-col {
    padding: 18px 16px 18px;
    width: 100%;
    box-sizing: border-box;
  }
  .modal-specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .modal-spec-card {
    padding: 8px 10px;
    gap: 8px;
    min-width: 0;
    box-sizing: border-box;
  }
  .m-spec-val {
    font-size: 11.5px;
    word-break: break-word;
  }
}

@media (max-width: 440px) {
  .modal-specs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .modal-close-btn {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
  .modal-close-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Filtros Flat — bordes rectos (5px), activo amarillo */
body.theme-ac .filter-chip {
  border-radius: 5px !important;  /* casi recto */
  border-color: var(--line-on-dark);
  color: rgba(242,236,223,.6);
}
body.theme-ac .filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);  /* amarillo en hover */
}
body.theme-ac .filter-chip.active {
  background: var(--accent);   /* relleno amarillo */
  border-color: var(--accent);
  color: var(--off-black);     /* texto carbón */
  font-weight: 600;
}

/* Testimonios — estrellas amarillas */
body.theme-ac .testi-stars {
  color: var(--accent);
}

/* Marcas Flat — fondo carbón, bordes rectos, hover solo borde */
body.theme-ac .brand-card {
  background: #1c1c1c;                    /* carbón oscuro */
  border: 1px solid var(--line-on-dark);
  border-radius: 0px !important;          /* sin redondeo */
  transition: border-color 0.25s ease;
}
body.theme-ac .brand-card:hover {
  border-color: var(--accent);  /* borde amarillo */
  transform: none !important;   /* sin elevación */
}
body.theme-ac .brand-card .tag {
  color: var(--accent);  /* etiqueta amarilla */
}
body.theme-ac .brand-card .go svg {
  color: var(--accent);  /* flecha amarilla */
}
body.theme-ac .brand-card:hover .go svg {
  transform: translateX(4px);  /* flecha se mueve a la derecha */
}

/* WhatsApp Flotante Flat — borde circular (100px), fondo amarillo */
body.theme-ac .wa-float {
  border-radius: 100px !important;  /* completamente redondo */
  background: var(--accent) !important;  /* amarillo */
  color: var(--off-black) !important;    /* icono carbón */
  box-shadow: none !important;           /* sin sombra */
  border: 1px solid var(--off-black);    /* borde carbón */
}
body.theme-ac .wa-float:hover {
  transform: none !important;           /* sin escala en hover */
  background: var(--accent-hover) !important; /* amarillo oscuro */
}

/* Footer Flat — carbón, bordes sutiles */
body.theme-ac footer {
  background: var(--off-black);  /* carbón */
  border-top: 1px solid var(--line-on-dark);
}
body.theme-ac .footer-col h4 {
  color: var(--accent);  /* títulos columna amarillos */
}
body.theme-ac .footer-col a:hover {
  color: var(--accent);  /* links hover amarillo */
}
body.theme-ac .footer-grid {
  border-color: var(--line-on-dark);  /* separador sutil */
}
body.theme-ac .footer-logo {
  height: 40px; object-fit: contain;  /* logo delimitado */
}

/* Prevent scroll bleed during pin — evita desborde del timeline */
body.theme-ac #proceso {
  overflow: hidden;
  position: relative;
}

@media (min-width: 981px) {
  /* Elegirnos Desktop — Sección amplia, imponente y perfectamente encuadrada */
  body.theme-ac #elegirnos {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0 110px;
    box-sizing: border-box;
  }
  body.theme-ac #elegirnos .head-row {
    margin-bottom: 36px;
  }
  body.theme-ac #elegirnos .features-container {
    max-width: 1320px;
    width: 100%;
  }
  body.theme-ac #elegirnos .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    background: transparent;
    border: none;
    margin-top: 0;
  }
  body.theme-ac #elegirnos .feature-card {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: unset;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #191919;
    border: 1px solid var(--line-on-dark);
    border-radius: 8px !important;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  }

  body.theme-ac #elegirnos .feature-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
    pointer-events: none;
  }
  body.theme-ac #elegirnos .feature-card .feature-icon {
    width: 38px;
    height: 38px;
    color: var(--accent);
    margin: 0;
    transition: transform 0.4s ease, color 0.3s ease;
  }
  body.theme-ac #elegirnos .feature-card .feature-num {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin: 0;
  }

  body.theme-ac #elegirnos .feature-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.theme-ac #elegirnos .feature-card .feature-title,
  body.theme-ac #elegirnos .feature-card h3 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 8px 0;
    color: var(--paper);
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease, text-shadow 0.4s ease;
    will-change: transform;
  }
  body.theme-ac #elegirnos .feature-card .feature-desc,
  body.theme-ac #elegirnos .feature-card p {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    color: rgba(242, 236, 223, 0.75);
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: transform, opacity;
  }

  body.theme-ac #elegirnos .feature-card .feature-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
  }
  body.theme-ac #elegirnos .feature-card[data-feature-index="0"] .feature-img { background-image: url('/public/ac_muebleria/diseño.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="1"] .feature-img { background-image: url('/public/ac_muebleria/materiales.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="2"] .feature-img { background-image: url('/public/ac_muebleria/fabricacion.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="3"] .feature-img { background-image: url('/public/ac_muebleria/instalacion.png'); }
  body.theme-ac #elegirnos .feature-card .feature-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0.12) 42%, rgba(12, 12, 12, 0.88) 100%);
  }

  /* Hover en Desktop: la imagen se oculta y aparece la info sobre el fondo oscuro */
  body.theme-ac #elegirnos .feature-card:hover {
    border-color: rgba(175, 143, 26, 0.4);
    transform: translateY(-3px);
  }
  body.theme-ac #elegirnos .feature-card:hover .feature-img {
    opacity: 0;
  }
  body.theme-ac #elegirnos .feature-card:hover .feature-card-body {
    opacity: 1;
    transform: translateY(0);
  }

  body.theme-ac #proceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    box-sizing: border-box;
  }
  body.theme-ac #proceso .container {
    width: 100%;
  }
}

/* timeline interactivo "Cómo trabajamos" — Desktop horizontal */
body.theme-ac .process-timeline-container {
  position: relative;
  display: flex;
  justify-content: space-between;  /* pasos repartidos */
  align-items: flex-start;
  max-width: 1140px;
  margin: 50px auto 0;
  padding: 0 20px;
}

/* Línea horizontal (desktop) — se llena con scroll de centro de dot 1 a centro de dot 5 */
body.theme-ac .process-h-line {
  position: absolute;
  top: 27px;            /* centrada con los dots de 55px (55/2 = 27.5px) */
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--line-on-dark);  /* línea base sutil */
  z-index: 0;
}
body.theme-ac .process-h-line-progress {
  position: absolute;
  left: 0; top: 0;
  width: 0%; height: 100%;  /* comienza vacía, se llena con JS */
  background: var(--accent); /* amarillo */
}

/* Línea vertical (oculta en desktop) */
body.theme-ac .process-timeline-line {
  display: none;
}

/* Steps horizontales — centrados con dot + texto */
body.theme-ac .process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  flex: 1;             /* cada paso ocupa el mismo espacio */
  position: relative;
  margin-bottom: 0;
}
body.theme-ac .process-dot {
  width: 55px;
  height: 55px;
  border-radius: 100px;         /* circular */
  background: #1c1c1c;          /* carbón */
  border: 1px solid var(--line-on-dark);
  color: rgba(242,236,223,.6);  /* número gris suave */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  z-index: 2;                   /* sobre la línea */
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
body.theme-ac .process-content {
  padding-top: 0;
  opacity: 0.35;               /* contenido suave por defecto */
  transform: translateY(8px);  /* desplazado abajo */
  transition: opacity 0.35s ease, transform 0.35s ease;
  max-width: 175px;
}
body.theme-ac .process-content h3 {
  font-size: 16px;
  margin-bottom: 6px;
  font-family: var(--font-display);  /* Jost */
  color: var(--paper);
}
body.theme-ac .process-content p {
  color: rgba(249, 247, 241, 0.6);  /* texto crema suave */
  font-size: 13.5px;
  line-height: 1.5;
}

/* Step activo — borde amarillo, contenido visible */
body.theme-ac .process-step.active .process-dot {
  background: #151515;
  border-color: var(--accent);  /* borde amarillo */
  color: var(--accent);         /* número amarillo */
  box-shadow: 0 0 16px rgba(175, 143, 26, 0.35);
  transform: scale(1.06);
}
body.theme-ac .process-step.active .process-content {
  opacity: 1;                  /* contenido completamente visible */
  transform: translateY(0);    /* sin desplazamiento */
}

/* --- Mobile y Tablet: vertical (pasos apilados y tarjetas verticales) --- */
@media (max-width: 980px) {
  body.theme-ac .hero {
    min-height: 100vh;                          /* fallback */
    min-height: calc(100svh - var(--nav-h));    /* pantalla completa descontando el nav */
    padding: 48px 0 72px;
  }
  body.theme-ac .hero-badges {
    margin-top: 24px;
    padding-top: 16px;
    gap: 24px;
  }

  /* Elegirnos en móvil: todos los cards en forma vertical con desplazamiento fluido */
  body.theme-ac #elegirnos {
    min-height: auto;
    display: block;
    padding: 60px 0 70px;
    box-sizing: border-box;
    overflow: visible;
  }
  body.theme-ac #elegirnos .features-container {
    margin-top: 28px;
    display: block;
    padding: 0 16px;
    perspective: none;
  }
  body.theme-ac #elegirnos .features-grid {
    position: static;
    width: 100%;
    max-width: 540px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: none;
    background: transparent;
    margin: 0 auto;
  }
  body.theme-ac #elegirnos .feature-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px 22px 24px;
    background: #191919;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-radius: 8px !important;
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  }
  body.theme-ac #elegirnos .feature-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 18px;
    pointer-events: none;
  }
  body.theme-ac #elegirnos .feature-card .feature-icon {
    width: 36px;
    height: 36px;
    margin: 0;
    color: var(--accent);
  }
  body.theme-ac #elegirnos .feature-card .feature-num {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
  }
  body.theme-ac #elegirnos .feature-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    width: 100%;
    pointer-events: none;
  }
  body.theme-ac #elegirnos .feature-card .feature-title,
  body.theme-ac #elegirnos .feature-card h3 {
    font-size: 20px;
    line-height: 1.28;
    margin: 0 0 8px 0;
    color: var(--paper);
    transform: translateY(0);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, text-shadow 0.35s ease;
    will-change: transform;
  }
  body.theme-ac #elegirnos .feature-card .feature-desc,
  body.theme-ac #elegirnos .feature-card p {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    color: rgba(242, 236, 223, 0.78);
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: transform, opacity;
  }
  body.theme-ac #elegirnos .feature-card .feature-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.55s ease, transform 0.65s ease;
    z-index: 0;
  }
  body.theme-ac #elegirnos .feature-card[data-feature-index="0"] .feature-img { background-image: url('/public/ac_muebleria/diseño.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="1"] .feature-img { background-image: url('/public/ac_muebleria/materiales.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="2"] .feature-img { background-image: url('/public/ac_muebleria/fabricacion.png'); }
  body.theme-ac #elegirnos .feature-card[data-feature-index="3"] .feature-img { background-image: url('/public/ac_muebleria/instalacion.png'); }
  body.theme-ac #elegirnos .feature-card .feature-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.78) 0%, rgba(16, 16, 16, 0.25) 42%, rgba(12, 12, 12, 0.94) 100%);
  }

  /* Estado Descubierto / Revelado en Móvil (activado al pasar la mitad de la pantalla) */
  body.theme-ac #elegirnos .feature-card.is-discovered {
    border-color: rgba(175, 143, 26, 0.85);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
  }
  body.theme-ac #elegirnos .feature-card.is-discovered .feature-img {
    opacity: 1;
    transform: scale(1);
  }
  body.theme-ac #elegirnos .feature-card.is-discovered .feature-desc {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  body.theme-ac #elegirnos .feature-card.is-discovered .feature-title,
  body.theme-ac #elegirnos .feature-card.is-discovered h3 {
    transform: translateY(var(--title-travel, 70px));
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  }

  body.theme-ac .process-h-line { display: none; } /* oculta línea horizontal */

  body.theme-ac .process-timeline-container {
    display: block;           /* apila los pasos */
    max-width: 760px;
    margin: 44px auto 0;
    padding: 0;
    position: relative;
  }
  body.theme-ac .process-row {
    display: none;            /* oculta la grilla */
  }
  body.theme-ac .process-timeline-line {
    display: block;           /* muestra línea vertical */
    position: absolute;
    left: 26.5px;             /* Dot 55px: 55/2 = 27.5px - 1px (medio ancho línea) = 26.5px (exactamente al centro) */
    top: 27px;                /* centro del primer dot */
    bottom: 27px;             /* centro del último dot */
    width: 2px;
    background: var(--line-on-dark); /* línea base sutil */
    z-index: 0;
  }
  body.theme-ac .process-timeline-line-progress {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 0%;  /* comienza vacía, controlada por GSAP */
    background: var(--accent);
  }
  body.theme-ac .process-step {
    display: flex;
    flex-direction: row;      /* dot a la izquierda, texto a la derecha */
    align-items: flex-start;
    gap: 28px;
    text-align: left;
    margin-bottom: 52px;     /* espacio entre pasos */
    position: relative;
  }
  body.theme-ac .process-step:last-child {
    margin-bottom: 0;
  }
  body.theme-ac .process-dot {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;           /* tamaño fijo exacto */
    font-size: 17px;
    margin-bottom: 0;
    z-index: 2;
  }
  body.theme-ac .process-content {
    flex: 1;                  /* ocupa todo el espacio restante */
    padding-top: 6px;
    max-width: none;          /* sin límite de ancho */
  }
  body.theme-ac .process-content h3 { font-size: 18px; }
  body.theme-ac .process-content p { font-size: 14.5px; }
}

@media (max-width: 600px) {
  body.theme-ac .process-timeline-container {
    padding: 0;
    margin: 32px auto 0;
  }
  body.theme-ac .process-timeline-line {
    left: 21px;               /* Dot 44px: 44/2 = 22px - 1px = 21px (exactamente al centro) */
    top: 22px;
    bottom: 22px;
  }
  body.theme-ac .process-step {
    gap: 20px;                /* espacio entre dot y texto */
    margin-bottom: 38px;
  }
  body.theme-ac .process-step:last-child {
    margin-bottom: 0;
  }
  body.theme-ac .process-dot {
    width: 44px;              /* dot proporcionado para móvil */
    height: 44px;
    flex: 0 0 44px;
    font-size: 14px;
  }
  body.theme-ac .process-content {
    padding-top: 3px;
  }
  body.theme-ac .process-content h3 { font-size: 16.5px; }
  body.theme-ac .process-content p { font-size: 13.5px; }
}

/* =========================== Back to Top & Floating UX =========================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 88px;
  z-index: 59;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-3px);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* WhatsApp Floating Tooltip & Wrap */
.wa-float-wrap {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-float-tooltip {
  background: rgba(21, 21, 21, 0.92);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}
.wa-float-wrap:hover .wa-float-tooltip {
  opacity: 1;
  transform: translateX(0);
}
.wa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  box-shadow: 0 0 8px #25D366;
}
@media (max-width: 600px) {
  .wa-float-tooltip {
    display: none;
  }
  .back-to-top {
    right: 80px;
    bottom: 22px;
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   MADERIN E-COMMERCE CATALOG & COMPACT PRODUCT GRID
   ========================================================================== */

.maderin-catalog-section {
  padding: 80px 0 100px;
}

.catalog-header-row {
  margin-bottom: 32px;
}

/* Control Bar: Categories, Search, Sort & Counter */
.catalog-control-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
  background: var(--paper);
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(45, 52, 102, 0.08);
  box-shadow: 0 4px 20px rgba(45, 52, 102, 0.03);
}

.catalog-categories-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.catalog-categories-row .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.catalog-categories-row .filter-chip:hover {
  background: #e4dbcf;
  transform: translateY(-1px);
}

.catalog-categories-row .filter-chip.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(65, 90, 165, 0.28);
}

.catalog-categories-row .filter-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  background: rgba(45, 52, 102, 0.12);
  color: inherit;
}

.catalog-categories-row .filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.catalog-utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(45, 52, 102, 0.06);
}

/* Search Bar */
.catalog-search-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 440px;
}

.catalog-search-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ink-soft);
  pointer-events: none;
}

.catalog-search-input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid rgba(45, 52, 102, 0.12);
  border-radius: 999px;
  outline: none;
  transition: all 0.2s ease;
}

.catalog-search-input:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(65, 90, 165, 0.15);
}

.catalog-search-wrap .search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(45, 52, 102, 0.1);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.catalog-search-wrap .search-clear-btn:hover {
  background: rgba(45, 52, 102, 0.2);
}

/* Sort Select */
.catalog-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-sort-wrap .sort-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.catalog-sort-select {
  height: 40px;
  padding: 0 32px 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D3466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid rgba(45, 52, 102, 0.12);
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}

.catalog-sort-select:focus {
  border-color: var(--accent);
}

.catalog-results-count {
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: auto;
  white-space: nowrap;
}

.catalog-results-count strong {
  color: var(--ink);
}

/* Compact Product Grid */
.compact-ecom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

@media (min-width: 1200px) {
  .compact-ecom-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .compact-ecom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 380px) {
  .compact-ecom-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact Product Card */
.compact-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 16px;
  border: 1px solid rgba(45, 52, 102, 0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  position: relative;
}

.compact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 52, 102, 0.08);
  border-color: rgba(65, 90, 165, 0.3);
}

.compact-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Thumbnail 1:1 ratio */
.compact-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f7f2ea;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(45, 52, 102, 0.05);
}

.compact-thumb .thumb-icon-wrap {
  width: 58%;
  height: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

.compact-card:hover .thumb-icon-wrap {
  transform: scale(1.08);
}

.compact-thumb .thumb-icon-wrap svg {
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.compact-thumb .sample-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(45, 52, 102, 0.06);
}

.compact-thumb .sample-badge.promo {
  background: #ffecd9;
  color: #c05621;
  border-color: rgba(192, 86, 33, 0.2);
}

/* Quick Hint Pill */
.thumb-quick-hint {
  position: absolute;
  inset: 0;
  background: rgba(45, 52, 102, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.compact-card:hover .thumb-quick-hint {
  opacity: 1;
}

.quick-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(4px);
  transition: transform 0.2s ease;
}

.compact-card:hover .quick-hint-pill {
  transform: translateY(0);
}

/* Card Body */
.compact-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.p-card-cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}

.p-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.p-card-rating .stars {
  color: #f59e0b;
  letter-spacing: -1px;
  font-size: 11px;
}

.p-card-rating .rating-val {
  font-weight: 800;
  color: var(--ink);
  font-size: 11px;
}

.p-card-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
}

.compact-body .desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-specs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.spec-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid rgba(45, 52, 102, 0.05);
}

/* Footer: Price + Actions */
.product-footer-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(45, 52, 102, 0.06);
}

.p-pricing {
  display: flex;
  flex-direction: column;
}

.p-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.p-current-price {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.p-old-price {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: line-through;
}

.p-discount-tag {
  font-size: 10px;
  font-weight: 800;
  color: #15803d;
  margin-top: 2px;
}

.p-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-outline-maderin {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-outline-maderin:hover {
  background: var(--accent);
  color: #ffffff;
}

.btn-wa-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.btn-wa-icon svg {
  width: 17px;
  height: 17px;
}

.btn-wa-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

/* Empty State */
.catalog-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--paper);
  border-radius: 18px;
  border: 1px dashed rgba(45, 52, 102, 0.15);
  margin-top: 24px;
}

.catalog-empty-state .empty-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.catalog-empty-state h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
}

.catalog-empty-state p {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 400px;
  margin: 0 auto 20px;
}

/* ==========================================================================
   MADERIN E-COMMERCE PRODUCT MODAL
   ========================================================================== */

.ecom-product-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.ecom-product-modal.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.ecom-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 30, 60, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}

.ecom-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  background: var(--paper);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(25, 30, 60, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ecom-product-modal.open .ecom-modal-dialog {
  transform: translateY(0) scale(1);
}

/* Close Button */
.ecom-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid rgba(45, 52, 102, 0.1);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ecom-modal-close:hover {
  background: var(--ink);
  color: #ffffff;
  transform: rotate(90deg);
}

.ecom-modal-close svg {
  width: 20px;
  height: 20px;
}

/* Modal Grid */
.ecom-modal-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 520px;
}

@media (max-width: 768px) {
  .ecom-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Column: Media & Navigation */
.ecom-modal-media-col {
  background: var(--paper-2);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid rgba(45, 52, 102, 0.08);
}

.ecom-main-preview {
  position: relative;
  background: var(--paper);
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid rgba(45, 52, 102, 0.06);
  box-shadow: 0 4px 16px rgba(45, 52, 102, 0.04);
}

.preview-badge-stack {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.preview-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffecd9;
  color: #c05621;
  border: 1px solid rgba(192, 86, 33, 0.2);
}

.preview-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
}

.preview-visual {
  width: 65%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-visual svg {
  width: 100%;
  height: 100%;
  color: var(--accent);
  filter: drop-shadow(0 4px 12px rgba(65, 90, 165, 0.15));
}

.preview-color-indicator {
  position: absolute;
  bottom: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

.preview-color-indicator strong {
  color: var(--ink);
}

/* Modal Nav Bar */
.ecom-modal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(45, 52, 102, 0.06);
}

.modal-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.modal-nav-btn:hover {
  background: var(--paper-2);
  color: var(--accent);
}

.modal-nav-btn svg {
  width: 16px;
  height: 16px;
}

.modal-nav-counter {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Guarantees List */
.ecom-guarantees-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.guarantee-item svg {
  width: 16px;
  height: 16px;
  color: #15803d;
  flex-shrink: 0;
}

/* Right Column: Info & WhatsApp */
.ecom-modal-info-col {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 500px) {
  .ecom-modal-info-col {
    padding: 24px 20px;
  }
}

.header-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.m-cat-tag {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.m-sku {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.ecom-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

.ecom-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.stars-gold {
  color: #f59e0b;
  letter-spacing: -1px;
}

.rating-num {
  font-weight: 800;
  color: var(--ink);
}

.rating-reviews {
  color: var(--ink-soft);
}

/* Price Box */
.ecom-price-box {
  background: var(--paper-2);
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(45, 52, 102, 0.06);
}

.price-main-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price-current {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.price-old {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: line-through;
}

.price-discount-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #dcfce7;
  color: #15803d;
}

.price-note {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.ecom-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Options */
.ecom-option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  gap: 6px;
}

.option-label strong {
  color: var(--accent);
}

.color-swatches-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(45, 52, 102, 0.15);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.2s ease;
}

.color-swatch-btn:hover {
  border-color: var(--accent);
}

.color-swatch-btn.active {
  border-color: var(--accent);
  background: var(--accent-2);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(65, 90, 165, 0.2);
}

.swatch-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Quantity Picker */
.quantity-picker {
  display: inline-flex;
  align-items: center;
  background: var(--paper-2);
  border-radius: 10px;
  border: 1px solid rgba(45, 52, 102, 0.12);
  padding: 3px;
  width: fit-content;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.qty-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}

.qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-display {
  min-width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Specs Grid */
.ecom-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 500px) {
  .ecom-specs-grid {
    grid-template-columns: 1fr;
  }
}

.ecom-spec-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: 10px;
  border: 1px solid rgba(45, 52, 102, 0.05);
}

.ecom-spec-card .spec-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.ecom-spec-card .spec-icon svg {
  width: 16px;
  height: 16px;
}

.ecom-spec-card .spec-text {
  display: flex;
  flex-direction: column;
}

.ecom-spec-card .spec-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.ecom-spec-card .spec-val {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

/* CTA Action */
.ecom-actions-wrap {
  margin-top: 6px;
}

.btn-ecom-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.btn-ecom-cta svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   MODAL DE COTIZACIÓN (AC Mueblería) — cotizador express
   ========================================================================== */
.quote-modal-dialog {
  max-width: 620px;
}
.quote-modal-body {
  padding: 34px 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-modal-body .modal-header { margin-bottom: 0; }
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quote-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(242,236,223,.6);
}
.quote-req { color: var(--accent); }
.quote-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-chip {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--line-on-dark);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: rgba(242,236,223,.72);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.quote-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.quote-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--off-black);
  font-weight: 600;
}
.quote-chips.quote-chips-error .quote-chip { border-color: rgba(224,164,164,.55); }
.quote-dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quote-dim {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-dim > span {
  font-size: 12px;
  color: rgba(242,236,223,.55);
}
.quote-input,
.quote-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--paper);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.quote-input::placeholder,
.quote-textarea::placeholder { color: rgba(242,236,223,.34); }
.quote-input:focus,
.quote-textarea:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.06);
}
.quote-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}
.quote-hint {
  margin: 0;
  font-size: 12.5px;
  color: #e3a7a7;
}
.quote-modal-body .modal-actions { margin-top: 4px; }

@media (max-width: 560px) {
  .quote-modal-body { padding: 30px 20px 24px; }
  .quote-dim-grid { grid-template-columns: 1fr; }
}