/* ==========================================================================
   PUERTAS 507 — hoja de estilos única
   Tokens portados 1:1 desde el index.css del proyecto Horizons (variables HSL).
   Cambia un token acá y cambia en todo el sitio.
   ========================================================================== */

/* ---- Colores oficiales del MANUAL DE MARCA ----
   Los tres que define el manual, con su nombre y su hex exacto:
     Black 507    #252525
     Vainilla 507 #F8F4EE
     Umber 507    #443A35

   Nota: el dorado (--accent) NO está en el manual. Lo inventó Horizons y
   se ha quedado porque atraviesa toda la web. Ver README-despliegue.md. */
:root {
  --black-507:  0 0% 14.51%;    /* #252525 */
  --vainilla:  36 41.6% 95.3%;  /* #F8F4EE */
  --umber:     20 12.4% 23.73%; /* #443A35 */

  --background: var(--vainilla);
  --foreground: 30 8% 14%;
  --card: 40 30% 98%;
  --secondary: 36 22% 90%;
  --muted: 36 18% 90%;
  --muted-foreground: 30 6% 40%;
  --accent: 34 38% 54%;
  --accent-foreground: 30 10% 12%;
  --border: 34 16% 84%;
  --dark: var(--black-507);
  --radius: 0.25rem;

  --wrap: 90rem;      /* 1440px */
  --wrap-narrow: 80rem;
  --header-h: 68px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-color: hsl(var(--border)); }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }

body {
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 400;
  overflow-x: clip;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
strong { font-weight: 600; color: hsl(var(--foreground)); }

/* --------------------------------------------------------------- tipografía */
.font-display, h1, h2, h3, .stat-n, .tile-dark-n, .presupuesto-cifra {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
em { font-style: italic; color: hsl(var(--accent)); }

/* --------------------------------------------------------------- utilidades */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }

.section { padding-block: 96px; }
.section-narrow { max-width: var(--wrap-narrow); }
.mt-12 { margin-top: 48px; }

.section-label { display: flex; align-items: center; gap: 16px; }
.section-label .rule { display: block; height: 1px; width: 40px; background: hsl(var(--accent)); flex: none; }
.section-label span:last-child {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; color: hsl(var(--accent));
}
.section-lead { margin-top: 16px; max-width: 34rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.h2-wide { max-width: 48rem; }
h2 { margin-top: 20px; }
h2.on-dark { color: #fff; }

.ico { width: 24px; height: 24px; flex: none; }
.ico-sm { width: 14px; height: 14px; flex: none; }
.ico-accent { color: hsl(var(--accent)); }

/* ------------------------------------------------------------------ botones */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  transition: filter 0.2s;
}
.btn-accent:hover { filter: brightness(1.1); }
.btn-accent-sm { padding: 14px 20px; }
.btn-block { width: 100%; padding-block: 14px; }

.btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border: 1px solid rgba(255,255,255,0.4); color: #fff;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.2s;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }

.btn-outline-accent {
  display: none; padding: 8px 20px; border: 1px solid hsl(var(--accent)); color: hsl(var(--accent));
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.2s;
}
.btn-outline-accent:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 640px) { .btn-outline-accent { display: block; } }

.btn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 9999px;
  background: hsl(var(--background) / 0.9); backdrop-filter: blur(6px);
  font-size: 0.75rem; font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  transition: background 0.2s;
}
.btn-pill:hover { background: hsl(var(--background)); }

.link-accent {
  margin-top: 24px; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--accent));
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: hsl(var(--dark) / 0.95); backdrop-filter: blur(8px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
/* Isotipo oficial del manual de marca. Al ir en línea dentro del HTML
   hereda el color del texto (currentColor), así que sirve igual sobre
   fondo oscuro que sobre fondo claro sin duplicar archivos. */
.logo-mark {
  height: 30px; width: auto;      /* proporción 1330:1573 del original */
  flex: none;
  color: hsl(var(--vainilla));
}
.logo-text { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.24em; color: #fff; }

.nav-desktop { display: none; align-items: center; gap: 32px; }
.nav-desktop a {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.8); transition: color 0.2s;
}
.nav-desktop a:hover { color: #fff; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } }

.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-burger { color: #fff; display: block; }
.btn-burger .ico { width: 24px; height: 24px; }
.btn-burger .ico-close { display: none; }
.btn-burger[aria-expanded="true"] .ico-menu { display: none; }
.btn-burger[aria-expanded="true"] .ico-close { display: block; }
@media (min-width: 1024px) { .btn-burger { display: none; } }

.nav-mobile {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(255,255,255,0.1); background: hsl(var(--dark));
  padding: 0 20px 20px;
}
.nav-mobile a {
  padding-block: 10px; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.nav-mobile[hidden] { display: none; }
@media (min-width: 1024px) { .nav-mobile { display: none !important; } }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: 100dvh; overflow: hidden; background: hsl(var(--dark));
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right, hsl(var(--dark)), hsl(var(--dark) / 0.85), transparent);
}
.hero-inner { position: relative; padding-top: 112px; padding-bottom: 64px; }
.hero-copy { max-width: 42rem; color: #fff; }
.hero-copy h1 { margin-top: 32px; }
.hero-lead { margin-top: 28px; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

/* ------------------------------------------------------------------- stats */
.stats { background: hsl(var(--dark)); padding-bottom: 80px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat + .stat { border-left: 1px solid rgba(255,255,255,0.1); }
}
.stat { padding-inline: 24px; text-align: center; }
.stat-n { font-size: clamp(3rem, 5vw, 3.75rem); color: hsl(var(--accent)); }
.stat-l {
  margin: 12px auto 0; max-width: 9rem; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6);
}

/* ----------------------------------------------------------------- marquee */
.marquee {
  border-block: 1px solid rgba(255,255,255,0.1);
  background: hsl(var(--dark)); padding-block: 16px; overflow: hidden;
}
.marquee-track {
  display: flex; white-space: nowrap; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track span {
  margin-inline: 32px; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; color: rgba(255,255,255,0.7);
}
.marquee-track i { font-style: normal; color: hsl(var(--accent)); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ grids */
.grid-2 { display: grid; gap: 8px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.grid-3-sw { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-3-sw { grid-template-columns: repeat(3, 1fr); } }

.grid-4-sm { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-4-sm { grid-template-columns: repeat(4, 1fr); } }

.grid-4 { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------- soluciones */
.tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.tile:hover img { transform: scale(1.05); }
.tile-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }
.tile-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 24px; color: #fff; }
.tile-copy h3 { font-size: 1.5rem; }
.tile-link {
  margin-top: 4px; display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: hsl(var(--accent));
}
.tile-dark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; background: hsl(var(--dark)); padding: 24px; text-align: center; color: #fff;
}
.tile-dark-n { font-size: 3rem; color: hsl(var(--accent)); }
.tile-dark-l {
  margin-top: 16px; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7);
}

/* ---------------------------------------------------------------- catálogo */
.filtros { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.filtro {
  border: 1px solid hsl(var(--border)); border-radius: 9999px;
  padding: 10px 24px; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground)); transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.filtro:hover { border-color: hsl(var(--foreground) / 0.4); }
.filtro[aria-pressed="true"] { border-color: transparent; background: hsl(var(--dark)); color: #fff; }

.card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.card-img { aspect-ratio: 3 / 4; overflow: hidden; background: hsl(var(--secondary) / 0.6); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 24px; }
.card-body h3 { font-size: 1.25rem; }
.card-body p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

/* ------------------------------------------------------------ configurador */
.configurador-section {
  border-block: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.4);
  padding-block: 96px;
}
.config-intro { margin-bottom: 48px; max-width: 42rem; }

.config-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .config-grid { grid-template-columns: 1fr 1.1fr; } }

@media (min-width: 1024px) {
  .config-preview { position: sticky; top: 96px; align-self: start; }
}

.viewer-shell {
  position: relative; height: 420px; width: 100%; overflow: hidden;
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: linear-gradient(to bottom, hsl(var(--secondary)), hsl(var(--muted)));
}
#viewer { width: 100%; height: 100%; background-color: #f5f2ec; --poster-color: transparent; }

.viewer-hint {
  position: absolute; left: 12px; top: 12px; pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  border-radius: 9999px; background: hsl(var(--background) / 0.8);
  padding: 4px 12px; font-size: 0.75rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); backdrop-filter: blur(6px);
}
.viewer-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }

.viewer-ar-btn {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  border-radius: 9999px; background: hsl(var(--background) / 0.9); backdrop-filter: blur(6px);
  padding: 8px 16px; font-size: 0.75rem; font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.viewer-progress {
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: hsl(var(--border)); opacity: 1; transition: opacity 0.3s;
}
.viewer-progress.hide { opacity: 0; }
.viewer-progress-bar { height: 100%; width: 0%; background: hsl(var(--accent)); transition: width 0.2s; }

.viewer-aviso {
  position: absolute; inset-inline: 12px; bottom: 56px;
  border-radius: var(--radius); background: hsl(var(--dark) / 0.88);
  padding: 8px 12px; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.85);
}
.viewer-aviso[hidden] { display: none; }

.seleccion {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--card)); padding: 20px;
}
.seleccion-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
}
.seleccion-texto {
  margin-top: 6px; font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem; line-height: 1.35; max-width: 22rem;
}
.seleccion-nota { margin-top: 6px; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

.config-controls { display: flex; flex-direction: column; gap: 28px; }
.control-block h4 {
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: "Jost", sans-serif; font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--muted-foreground));
}
/* Aviso "3D en preparación" dentro de una opción de puerta */
.opt-pend {
  margin-left: 8px; border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.14); color: hsl(var(--muted-foreground));
  padding: 2px 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: none; white-space: nowrap;
}

.nota-medidas {
  border-left: 2px solid hsl(var(--accent));
  padding: 4px 0 4px 16px;
}
.nota-medidas p {
  font-size: 0.8125rem; line-height: 1.6; color: hsl(var(--muted-foreground));
}

/* opciones (pills) */
.opt {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); padding: 8px 14px;
  text-align: left; font-size: 0.875rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.opt:hover { border-color: hsl(var(--foreground) / 0.3); }
.opt[aria-pressed="true"] {
  border-color: hsl(var(--accent)); background: hsl(var(--accent) / 0.1);
  color: hsl(var(--foreground)); box-shadow: inset 0 0 0 1px hsl(var(--accent));
}
.opt .opt-t { display: block; }
.opt .opt-d { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.7; }

.opt-sw { display: flex; align-items: center; gap: 8px; }
.opt-sw .sw {
  width: 20px; height: 20px; flex: none; border-radius: 9999px;
  border: 1px solid hsl(var(--border));
}

/* ---- Acordeón de acabados (colecciones desplegables) ---- */
.acordeon { display: flex; flex-direction: column; gap: 8px; }
.acordeon .col {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); overflow: hidden;
}
.acordeon .col > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; min-height: 44px;
  font-family: "Jost", sans-serif; font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--foreground));
}
.acordeon .col > summary::-webkit-details-marker { display: none; }
.acordeon .col > summary .col-n {
  font-weight: 400; font-size: 0.75rem; letter-spacing: 0.02em;
  text-transform: none; color: hsl(var(--muted-foreground));
}
.acordeon .col > summary .chev { transition: transform 0.2s; color: hsl(var(--muted-foreground)); }
.acordeon .col[open] > summary .chev { transform: rotate(180deg); }
.acordeon .col[open] > summary { border-bottom: 1px solid hsl(var(--border)); }

.swgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px;
}
@media (min-width: 640px) { .swgrid { grid-template-columns: repeat(5, 1fr); } }
.sw-item {
  position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background-size: cover; background-position: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sw-item:hover { transform: scale(1.06); box-shadow: 0 2px 8px hsl(var(--foreground) / 0.2); }
.sw-item[aria-pressed="true"] {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 2px hsl(var(--accent)), 0 2px 8px hsl(var(--foreground) / 0.25);
}
.sw-item[aria-pressed="true"]::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.sw-name {
  padding: 0 12px 10px; font-size: 0.75rem; color: hsl(var(--muted-foreground));
}

/* ---- Acordeón de modelos (línea → modelos con miniatura) ---- */
.modgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
@media (min-width: 640px) { .modgrid { grid-template-columns: repeat(3, 1fr); } }
.mod-item {
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: hsl(var(--background)); text-align: left; padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mod-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mod-item .mod-n {
  display: block; padding: 7px 8px; font-size: 0.75rem; line-height: 1.3;
  color: hsl(var(--foreground));
}
.mod-item .mod-cat {
  display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 400;
  color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- Control de "veta de la madera" (visible para el cliente en el visor) ---- */
.veta-control {
  position: absolute; bottom: 12px; left: 12px; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  background: hsl(var(--card) / 0.92); border: 1px solid hsl(var(--border));
  padding: 8px 14px; border-radius: 9999px;
  box-shadow: 0 2px 10px hsl(var(--foreground) / 0.12);
}
.veta-label {
  font-family: "Jost", sans-serif; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.veta-control input[type="range"] {
  width: 100px; accent-color: hsl(var(--accent)); cursor: pointer;
}
@media (max-width: 640px) {
  .veta-control { bottom: 8px; left: 8px; padding: 6px 10px; gap: 6px; }
  .veta-label { font-size: 0.625rem; }
  .veta-control input[type="range"] { width: 78px; }
}
.mod-item:hover { border-color: hsl(var(--foreground) / 0.3); }
.mod-item[aria-pressed="true"] {
  border-color: hsl(var(--accent)); box-shadow: 0 0 0 1px hsl(var(--accent));
}
.mod-item .pend {
  display: inline-block; margin-top: 3px; border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.14); color: hsl(var(--muted-foreground));
  padding: 1px 6px; font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
}

/* ----------------------------------------------------------------- empresa */
.empresa-grid { display: grid; align-items: center; gap: 56px; }
@media (min-width: 1024px) { .empresa-grid { grid-template-columns: repeat(2, 1fr); } }
/* ---- Proporción del vídeo de la sección Nosotros ----
   ⬇️ CAMBIA SOLO ESTE NÚMERO para probar otra proporción. ⬇️

     16 / 9  → panorámico, sin recorte (es la forma real del vídeo)
      4 / 3  → equilibra mejor con la columna de texto, recorta 25%
      1 / 1  → cuadrado, recorta 44%
      4 / 5  → vertical, recorta 55% (pierde el contexto en planos generales)

   Puesto ahora: 16 / 9, la forma real del vídeo, sin recortar nada.

   OJO: el vídeo original es 848x478 (16:9 horizontal). Cualquier proporción
   más vertical se consigue RECORTANDO los lados con object-fit: cover, no
   estirando. En 4:5 se pierde el 55% del ancho: en los planos generales de
   fábrica eso deja fuera casi todo el contexto.

   No hace falta reencodear nada para cambiarlo: el recorte lo hace el
   navegador. Cuando decidas la definitiva, se puede reencodear el vídeo ya
   recortado y bajaría de 8,2 MB a unos 4-5 MB. */
.empresa-video {
  --proporcion-video: 16 / 9;

  position: relative; width: 100%;
  aspect-ratio: var(--proporcion-video);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--dark));
  overflow: hidden;
}
.empresa-media {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Qué parte se conserva al recortar. `center` mantiene el medio; si algún
     encuadre importante queda a un lado, se ajusta aquí (ej. `40% center`). */
  object-position: center;
  display: block;
  background: hsl(var(--dark));
}
/* El controlador nativo del navegador ya trae play, volumen y pantalla
   completa: no se reinventa, solo se le da un foco visible coherente. */
.empresa-media:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }
.empresa-features { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 640px) { .empresa-features { grid-template-columns: repeat(4, 1fr); } }
.feature { border-top: 1px solid hsl(var(--border)); padding-top: 16px; }
.feature svg { color: hsl(var(--accent)); }
.feature p {
  margin-top: 12px; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--muted-foreground));
}

/* ----------------------------------------------------------------- tiendas */
.tiendas {
  border-block: 1px solid rgba(255,255,255,0.1);
  background: hsl(var(--dark)); padding-block: 96px; color: #fff;
}
.tiendas-grid {
  display: grid; gap: 1px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
}
@media (min-width: 640px) { .tiendas-grid { grid-template-columns: repeat(3, 1fr); } }
.tienda { background: hsl(var(--dark)); padding: 32px; }
.tienda h3 { margin-top: 16px; font-size: 1.5rem; }
.tienda-d { margin-top: 8px; font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.tienda-dir {
  margin-top: 10px; font-style: normal;
  font-size: 0.8125rem; line-height: 1.5;
  color: rgba(255,255,255,0.5);
}
.tienda-t {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; color: rgba(255,255,255,0.8);
}
.tienda-t a:hover { color: hsl(var(--accent)); }
.tienda-t + .tienda-t { margin-top: 6px; }
.tienda-t a { word-break: break-word; }

/* ---------------------------------------------------------------- contacto */
.contacto-grid { display: grid; gap: 56px; }
@media (min-width: 1024px) { .contacto-grid { grid-template-columns: repeat(2, 1fr); } }
.contacto-list { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; font-size: 0.875rem; }
.contacto-list li { display: flex; align-items: center; gap: 12px; }
.contacto-list a:hover { color: hsl(var(--accent)); }

.form-card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 24px; }
@media (min-width: 640px) { .form-card { padding: 32px; } }
#form-contacto { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: hsl(var(--muted-foreground));
}
.field input, .field textarea {
  border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  padding: 10px 14px; font-size: 0.875rem; outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.field input:focus, .field textarea:focus {
  border-color: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--accent) / 0.4);
}
.field textarea { resize: vertical; }
.field input:user-invalid, .field textarea:user-invalid { border-color: hsl(0 60% 45%); }

.form-ok {
  display: flex; min-height: 300px; height: 100%; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.form-ok[hidden] { display: none; }
.form-ok-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 9999px;
  background: hsl(var(--accent) / 0.15); color: hsl(var(--accent));
}
.form-ok h3 { margin-top: 16px; font-size: 1.5rem; }
.form-ok p { margin-top: 8px; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid rgba(255,255,255,0.1); background: hsl(var(--dark)); color: #fff; }
.footer-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 24px; padding-block: 56px;
}
@media (min-width: 640px) { .footer-inner { flex-direction: row; align-items: center; } }
.footer-desc { margin-top: 16px; max-width: 24rem; font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; }
.footer-nav a {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.7); transition: color 0.2s;
}
.footer-nav a:hover { color: #fff; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.1); padding-block: 20px;
  text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.4);
}

/* ------------------------------------------------- reveals (ex framer-motion)
   Todo va colgado de `.js`, que añade un script inline en el <head>.
   Sin JS no hay opacity:0 → el contenido se ve, no desaparece.            */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.js .reveal-x { transform: translateX(-20px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* El hero es contenido above-the-fold: se anima con CSS puro, sin depender de
   IntersectionObserver ni de requestAnimationFrame. `both` fija el estado final. */
.js .reveal-now {
  opacity: 0;
  animation: reveal-in 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal-now { opacity: 1; animation: none; }
  .tile img, .card-img img { transition: none; }
}

/* ==========================================================================
   FORMULARIO — campos de medidas, WhatsApp, errores
   ========================================================================== */

/* Trampa anti-bot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.medidas { border: 0; padding: 0; margin: 0; }
.medidas legend {
  padding: 0; margin-bottom: 10px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: hsl(var(--muted-foreground));
}
.medidas legend span {
  display: block; margin-top: 3px;
  font-size: 0.6875rem; font-weight: 400; text-transform: none;
  letter-spacing: 0; opacity: 0.8;
}

.form-row-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }

.form-error {
  border-left: 3px solid hsl(var(--destructive, 0 60% 45%));
  background: hsl(0 60% 45% / 0.07);
  padding: 10px 14px; font-size: 0.8125rem; color: hsl(0 60% 34%);
}
.form-error[hidden] { display: none; }

.form-acciones { display: grid; gap: 10px; }

.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; background: #25d366; color: #06301a;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; transition: filter 0.2s;
}
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn-whatsapp svg { width: 18px; height: 18px; }

.form-legal {
  font-size: 0.6875rem; line-height: 1.6; color: hsl(var(--muted-foreground));
}

/* Que el botón deshabilitado se note */
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Foco visible en teclado: accesibilidad y también SEO indirecto (Core Web Vitals
   no lo mide, pero las auditorías de accesibilidad sí). */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE — ajustes finos por debajo de tablet
   ========================================================================== */

@media (max-width: 900px) {
  /* En columna, el visor pegajoso estorba: molesta al hacer scroll */
  .config-preview { position: static !important; }
}

@media (max-width: 640px) {
  .section { padding-block: 64px; }
  .configurador-section, .tiendas { padding-block: 64px; }

  /* El visor 3D más bajo: en móvil 420px se come toda la pantalla */
  .viewer-shell { height: 340px; }

  /* Medidas en 2 columnas + cantidad abajo, en vez de 3 apretadas */
  .form-row-3 { grid-template-columns: repeat(2, 1fr); }
  .form-row-3 .field:last-child { grid-column: 1 / -1; }

  /* La tarjeta de selección se apila */
  .seleccion { flex-direction: column; align-items: stretch; }
  .seleccion .btn-accent-sm { width: 100%; }
  .seleccion-texto { max-width: none; font-size: 1.125rem; }

  /* Rótulos de sección: 0.24em de tracking en pantalla estrecha rompe línea */
  .section-label span:last-child { letter-spacing: 0.16em; }
  .stat-l, .tile-dark-l { letter-spacing: 0.08em; }

  /* Los CTA del hero, a ancho completo: más fáciles de tocar */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-accent, .hero-cta .btn-ghost-light { width: 100%; }

  .empresa-features { gap: 20px; }
  .footer-inner { padding-block: 40px; }
}

/* Área táctil mínima cómoda en pantallas de dedo.
   La recomendación de accesibilidad es 44x44 px: por debajo de eso el dedo
   falla y la gente abandona. */
@media (pointer: coarse) {
  .opt { padding-block: 11px; }
  .filtro { padding-block: 13px; }
  .nav-mobile a { padding-block: 13px; }

  /* El burger medía 26px y el botón Reiniciar 34px: demasiado pequeños. */
  .btn-burger { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin-right: -8px; }
  .btn-pill { min-height: 44px; padding-inline: 16px; }
  .viewer-ar-btn { min-height: 44px; }
}

/* Aviso destacado: solo se usa cuando la página se abre por file:// y el
   navegador bloquea el .glb. Ocupa más para que no pase desapercibido. */
.viewer-aviso-fuerte {
  inset-block: auto 12px;
  background: hsl(var(--dark) / 0.94);
  padding: 12px 14px; font-size: 12px;
}
.viewer-aviso-fuerte strong { color: hsl(var(--accent)); display: block; margin-bottom: 4px; }
.viewer-aviso-fuerte code {
  background: rgba(255,255,255,0.12); padding: 1px 5px; border-radius: 3px;
  font-size: 11px;
}

/* ==========================================================================
   VENTANA "COTIZAR" del visor 3D
   <dialog> nativo: el atrapado de foco, la tecla Esc y el fondo inerte los
   pone el navegador. Aquí solo va el aspecto.
   ========================================================================== */

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  overflow: visible;
}
.modal::backdrop {
  background: hsl(var(--dark) / 0.72);
  backdrop-filter: blur(3px);
}

#modal-cuerpo, .modal-ok {
  padding: 28px 24px 24px;
  max-height: min(88vh, 900px);
  overflow-y: auto;
}
@media (min-width: 640px) { #modal-cuerpo, .modal-ok { padding: 32px; } }
.modal-ok[hidden], #modal-cuerpo[hidden] { display: none; }

.modal-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 9999px;
  color: hsl(var(--muted-foreground));
  transition: background 0.2s, color 0.2s;
}
.modal-cerrar:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.modal-cerrar svg { width: 18px; height: 18px; }

.modal-kicker {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: hsl(var(--accent));
}
.modal h3 {
  margin-top: 8px; font-size: 1.625rem; line-height: 1.2;
  padding-right: 32px;
}

/* La configuración elegida, destacada: es lo que da contexto al envío */
.modal-config {
  margin: 20px 0 22px;
  border-left: 3px solid hsl(var(--accent));
  background: hsl(var(--secondary) / 0.55);
  padding: 12px 16px;
}
.modal-config-lbl {
  display: block; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: hsl(var(--muted-foreground));
}
.modal-config p {
  margin-top: 5px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.0625rem; line-height: 1.4;
}

#form-cotizar { display: flex; flex-direction: column; gap: 14px; }
.opcional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }

.modal-ok {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 4px;
  min-height: 300px;
}
.modal-ok h3 { margin-top: 16px; padding-right: 0; }
.modal-ok p { margin-top: 6px; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.modal-ok .btn-accent { margin-top: 24px; }

@media (max-width: 640px) {
  .modal { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 12px 12px 0 0; margin: auto auto 0; }
  .modal h3 { font-size: 1.375rem; }
  #modal-cuerpo, .modal-ok { max-height: 92vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* Botón "Activar sonido" sobre el vídeo.
   Hace falta porque el vídeo arranca en silencio a la fuerza: ningún navegador
   permite autoreproducir con sonido. Sin este botón, mucha gente no se daría
   cuenta de que el vídeo tiene audio. */
.btn-sonido {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  background: hsl(var(--dark) / 0.82);
  backdrop-filter: blur(6px);
  padding: 9px 16px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; color: #fff;
  transition: background 0.2s, transform 0.2s;
}
.btn-sonido:hover { background: hsl(var(--dark) / 0.95); }
.btn-sonido:active { transform: scale(0.97); }
.btn-sonido[hidden] { display: none; }
.btn-sonido svg { width: 16px; height: 16px; color: hsl(var(--accent)); }

@media (max-width: 640px) {
  .btn-sonido { left: 8px; top: 8px; padding: 8px 12px; font-size: 0.6875rem; }
  .btn-sonido svg { width: 14px; height: 14px; }
}
@media (pointer: coarse) { .btn-sonido { min-height: 40px; } }

/* Aviso cuando un filtro del catálogo aún no tiene modelos con foto. */
.catalogo-vacio {
  grid-column: 1 / -1;
  border-left: 3px solid hsl(var(--accent));
  background: hsl(var(--secondary) / 0.5);
  padding: 20px 24px;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
}

/* Con 9 filtros la fila se hace larga: en móvil se desliza en horizontal
   en vez de apilarse en 4 líneas y empujar el catálogo fuera de pantalla. */
@media (max-width: 900px) {
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Sangrado hasta el borde: se ve que hay más filtros a la derecha. */
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; scroll-snap-align: start; }
}

/* ==========================================================================
   BLOG Y NOTICIAS
   ========================================================================== */

.blog-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.blog-todos {
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid hsl(var(--accent));
  padding-bottom: 4px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: hsl(var(--accent));
  transition: gap 0.2s;
}
.blog-todos:hover { gap: 14px; }

.grid-blog { display: grid; gap: 24px; }
@media (min-width: 700px)  { .grid-blog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-blog { grid-template-columns: repeat(3, 1fr); } }

.post { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.post-enlace { display: flex; flex-direction: column; height: 100%; }
.post-img { aspect-ratio: 16 / 10; overflow: hidden; background: hsl(var(--secondary) / 0.6); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post:hover .post-img img { transform: scale(1.04); }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.post-meta {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: hsl(var(--accent));
}
.post-body h3 { font-size: 1.3125rem; line-height: 1.25; }
.post-resumen { font-size: 0.875rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }

@media (max-width: 640px) {
  .blog-cabecera { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================================
   PÁGINAS DEL BLOG (blog/index.html y blog/<slug>.html)
   ========================================================================== */

.pagina-blog main { padding-top: var(--header-h); }

.articulo-wrap { max-width: 46rem; padding-block: 56px 96px; }

.miga {
  display: flex; gap: 10px; align-items: center;
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
}
.miga a:hover { color: hsl(var(--accent)); }

.articulo-meta {
  margin-top: 32px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: hsl(var(--accent));
}
.articulo h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1;
}
.articulo-entradilla {
  margin-top: 20px;
  font-size: 1.125rem; line-height: 1.7;
  color: hsl(var(--muted-foreground));
}

.articulo-portada { margin-top: 40px; }
.articulo-portada img {
  width: 100%; max-height: 520px; object-fit: cover;
  border: 1px solid hsl(var(--border));
}

/* Cuerpo del artículo: medida de línea cómoda para leer seguido. */
.articulo-cuerpo { margin-top: 40px; font-size: 1.0625rem; line-height: 1.8; }
.articulo-cuerpo > * + * { margin-top: 22px; }
.articulo-cuerpo h2 {
  margin-top: 44px;
  font-size: 1.625rem; line-height: 1.25;
}
.articulo-cuerpo ul, .articulo-cuerpo ol { padding-left: 22px; }
.articulo-cuerpo ul { list-style: disc; }
.articulo-cuerpo ol { list-style: decimal; }
.articulo-cuerpo li + li { margin-top: 8px; }
.articulo-cuerpo li::marker { color: hsl(var(--accent)); }
.articulo-cuerpo a { color: hsl(var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.articulo-cuerpo img { width: 100%; border: 1px solid hsl(var(--border)); }
.articulo-cuerpo blockquote {
  border-left: 3px solid hsl(var(--accent));
  padding: 4px 0 4px 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem; line-height: 1.5;
}

.articulo-cta {
  margin-top: 56px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--secondary) / 0.5);
  padding: 28px;
}
.articulo-cta p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.375rem; line-height: 1.3; max-width: 22rem;
}

.articulo-volver {
  margin-top: 40px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s;
}
.articulo-volver:hover { color: hsl(var(--accent)); }

/* Listado del blog */
.blog-intro { padding-block: 56px 0; }
.blog-listado { padding-block: 40px 96px; }
.blog-vacio {
  border-left: 3px solid hsl(var(--accent));
  background: hsl(var(--secondary) / 0.5);
  padding: 24px;
  color: hsl(var(--muted-foreground)); line-height: 1.7;
}

@media (max-width: 640px) {
  .articulo-wrap { padding-block: 32px 64px; }
  .articulo-cuerpo { font-size: 1rem; }
  .articulo-cta { flex-direction: column; align-items: stretch; padding: 22px; }
  .articulo-cta .btn-accent { width: 100%; }
}