/* BajioIA · Residencial — hoja de estilos
   Ley de marca MAR-001: 60 % navy/ónix · 30 % blanco · 10 % cobre · Montserrat única ·
   alineación izquierda · sin cursivas en titulares · interlineado ≥ 1.3. */

@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Marca (MAR-001 §5.1) */
  --navy: #0A1F44;
  --onix: #0A0A0A;
  --cobre: #B87333;
  --crema: #F5F1E8;
  --blanco: #FFFFFF;
  /* Derivados, con el sesgo de la marca */
  --navy-hondo: #071733;      /* capa bajo el navy */
  --navy-linea: #22365C;      /* filetes sobre navy */
  --piedra: #E4DCCB;          /* filetes sobre crema */
  --tinta: #1A2336;           /* texto sobre crema */
  --tinta-suave: #596276;     /* texto secundario sobre crema */
  --niebla: #B9C1D1;          /* texto secundario sobre navy */
  --cobre-claro: #D39A63;     /* cobre legible sobre navy */
  --cobre-texto: #945A24;     /* cobre para texto chico sobre crema (4.97:1, AA) */

  --f: "Montserrat", "Open Sans", system-ui, sans-serif;
  --t-xs: .75rem; --t-s: .875rem; --t-m: 1.0625rem; --t-l: 1.3125rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-2xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --t-3xl: clamp(2.75rem, 1.5rem + 5.4vw, 5.75rem);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --sec: clamp(72px, 10vw, 152px);
  --radio: 22px;              /* fotos y tarjetas grandes */
  --radio-m: 16px;            /* tarjetas chicas, campos */
  --radio-s: 12px;            /* botones cuadrados, muestras */
  --pildora: 999px;           /* botones y chips */
  /* Sombras suaves con el tinte del navy: dos capas, una de contacto y una de ambiente */
  --sombra-s: 0 1px 2px rgba(10, 31, 68, .06), 0 6px 16px -8px rgba(10, 31, 68, .16);
  --sombra: 0 2px 4px rgba(10, 31, 68, .05), 0 22px 44px -22px rgba(10, 31, 68, .34);
  --sombra-l: 0 4px 8px rgba(10, 31, 68, .06), 0 40px 80px -36px rgba(10, 31, 68, .45);
  --sombra-osc: 0 2px 4px rgba(0, 0, 0, .18), 0 24px 48px -24px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f); font-size: var(--t-m); line-height: 1.65; color: var(--tinta); background: var(--crema); font-weight: 400; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.ceja { font-size: var(--t-xs); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cobre-texto); }
.oscuro .ceja, .portada .ceja, .linea .ceja, .hondo .ceja { color: var(--cobre-claro); }
.lead { font-size: var(--t-l); line-height: 1.55; font-weight: 300; max-width: 38ch; }
.cuerpo { max-width: 62ch; color: var(--tinta-suave); }
.oscuro { background: var(--navy); color: var(--blanco); }
.oscuro .cuerpo { color: var(--niebla); }
.hondo { background: var(--navy-hondo); color: var(--blanco); }

/* ── Botones ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.75rem; border: 1px solid currentColor; border-radius: var(--pildora); font-size: var(--t-s); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s; cursor: pointer; background: transparent; color: inherit; }
.btn:hover { transform: translateY(-1px); }
.btn-cobre { background: var(--cobre); border-color: var(--cobre); color: var(--blanco); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 24px -10px rgba(184,115,51,.65); }
.btn-cobre:hover { box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 16px 32px -12px rgba(184,115,51,.75); }
.btn-cobre:hover { background: #A5652A; border-color: #A5652A; }
.btn-linea { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn-linea:hover { background: var(--blanco); color: var(--navy); border-color: var(--blanco); }
.btn-linea.en-claro { border-color: rgba(10,31,68,.28); background: transparent; backdrop-filter: none; }
.crema .btn-linea:hover, .btn-linea.en-claro:hover { background: var(--navy); color: var(--blanco); border-color: var(--navy); }
.btn svg { width: 18px; height: 18px; flex: none; }
.enlace { display: inline-flex; gap: .6rem; align-items: center; font-size: var(--t-s); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--cobre); padding-bottom: .35rem; }
.enlace:hover { color: var(--cobre); }
.oscuro .enlace:hover { color: var(--cobre-claro); }

/* ── Cabecera ──────────────────────────────────────── */
.cab { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--blanco); transition: background .35s, box-shadow .35s; }
.cab { transition: background .35s, box-shadow .35s, inset .35s, border-radius .35s; }
.cab.solida, .cab.siempre { inset: 10px 12px auto 12px; border-radius: 20px; background: rgba(10, 31, 68, .88); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--sombra-osc); backdrop-filter: blur(14px) saturate(1.2); }
.cab.solida .wrap, .cab.siempre .wrap { height: 68px; }
.cab .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 1.5rem; }
.marca { display: flex; align-items: center; gap: .85rem; }
.marca img { width: 42px; height: 42px; }
.marca b { font-weight: 600; letter-spacing: .04em; font-size: 1.125rem; }
.marca small { display: block; font-size: .625rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cobre-claro); font-weight: 600; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 2.25rem; font-size: var(--t-s); font-weight: 500; letter-spacing: .06em; }
.nav a:not(.btn) { position: relative; padding: .25rem 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--cobre-claro); transition: right .3s; }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .btn { padding: .7rem 1.2rem; font-size: var(--t-xs); }
.menu-btn { display: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: inherit; width: 46px; height: 46px; border-radius: var(--pildora); cursor: pointer; }
.menu-btn span { display: block; width: 20px; height: 1px; background: currentColor; margin: 5px auto; transition: transform .3s, opacity .3s; }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav { position: fixed; inset: 96px 12px auto 12px; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; background: rgba(10, 31, 68, .97); border: 1px solid var(--navy-linea); border-radius: 22px; box-shadow: var(--sombra-osc); backdrop-filter: blur(14px); transform: translateY(-8px) scale(.98); transform-origin: top center; opacity: 0; visibility: hidden; transition: .25s; font-size: var(--t-m); }
  .cab.solida .nav, .cab.siempre .nav { inset: 88px 0 auto 0; }
  .nav a:not(.btn) { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--navy-linea); }
  .nav a:not(.btn)::after { display: none; }
  .nav a:not(.btn):last-of-type { border-bottom: 0; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
  .cab.abierto .nav { transform: none; opacity: 1; visibility: visible; }
  .cab.abierto:not(.solida) { background: transparent; }
  .cab.abierto .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .cab.abierto .menu-btn span:nth-child(2) { opacity: 0; }
  .cab.abierto .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ── Portada ───────────────────────────────────────── */
.portada { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--blanco); background: var(--navy-hondo); overflow: hidden; }
.portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: asentar 2.4s cubic-bezier(.2,.7,.2,1) forwards; }
.portada::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,23,51,.92) 0%, rgba(7,23,51,.7) 42%, rgba(7,23,51,.08) 78%),
  linear-gradient(0deg, rgba(7,23,51,.75) 0%, rgba(7,23,51,0) 45%); }
.portada .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(48px, 8vw, 104px); }
.portada h1 { font-size: var(--t-3xl); max-width: 13ch; margin: 1.25rem 0 1.75rem; }
.portada h1 strong { font-weight: 600; }
.portada .lead { color: #DCE2EC; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.portada .pie-foto { position: absolute; left: var(--gutter); bottom: 1rem; z-index: 2; font-size: .6875rem; letter-spacing: .08em; color: rgba(255,255,255,.55); }
@keyframes asentar { to { transform: scale(1); } }

.portada.corta { min-height: 72svh; }
.portada.corta h1 { font-size: var(--t-2xl); max-width: 16ch; }

/* ── Cifras / franja de confianza ──────────────────── */
.franja { border-top: 1px solid var(--navy-linea); }
.franja ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.franja li { padding: 1.75rem 1.5rem 1.75rem 0; border-right: 1px solid var(--navy-linea); font-size: var(--t-s); color: var(--niebla); }
.franja li:last-child { border-right: 0; }
.franja li b { display: block; color: var(--blanco); font-weight: 500; font-size: var(--t-m); margin-bottom: .2rem; }
.franja li + li { padding-left: 1.5rem; }
@media (max-width: 860px) { .franja ul { grid-template-columns: 1fr 1fr; } .franja li:nth-child(2) { border-right: 0; } .franja li:nth-child(3) { padding-left: 0; } .franja li:nth-child(n+3) { border-top: 1px solid var(--navy-linea); } }

/* ── Secciones ─────────────────────────────────────── */
.sec { padding: var(--sec) 0; }
.sec-cab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-cab h2 { font-size: var(--t-2xl); margin-top: 1rem; }
@media (max-width: 860px) { .sec-cab { grid-template-columns: 1fr; } }

/* ── Las dos líneas ────────────────────────────────── */
.lineas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.linea { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 62vw, 760px); color: var(--blanco); overflow: hidden; border-radius: var(--radio); isolation: isolate; box-shadow: var(--sombra-l); transition: box-shadow .5s, transform .5s; }
.linea:hover { transform: translateY(-3px); }
.linea img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.linea::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,23,51,.92) 0%, rgba(7,23,51,.35) 55%, rgba(7,23,51,.05) 100%); }
.linea:hover img { transform: scale(1.04); }
.linea .txt { padding: clamp(24px, 4vw, 48px); }
.linea h3 { font-size: var(--t-xl); margin: .75rem 0 1rem; }
.linea p { color: #D7DDE8; max-width: 44ch; margin-bottom: 1.75rem; }
.linea .ceja { display: inline-block; padding: .35rem .8rem; border-radius: var(--pildora); background: rgba(7, 23, 51, .82); backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .linea::before { background: linear-gradient(0deg, rgba(7,23,51,.94) 0%, rgba(7,23,51,.72) 60%, rgba(7,23,51,.5) 100%); }
  .linea .ceja { letter-spacing: .12em; font-size: .6875rem; }
  .portada::after { background: linear-gradient(0deg, rgba(7,23,51,.92) 0%, rgba(7,23,51,.78) 55%, rgba(7,23,51,.45) 100%); }
}
.linea ul { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.linea li { font-size: var(--t-xs); letter-spacing: .08em; padding: .45rem .85rem; border: 1px solid rgba(255,255,255,.22); border-radius: var(--pildora); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
@media (max-width: 860px) { .lineas { grid-template-columns: 1fr; } }

/* ── Materia: la franja de acabados ────────────────── */
.materia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 20px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--navy-linea) transparent; }
.materia figure { margin: 0; scroll-snap-align: start; }
.materia .lama { height: clamp(280px, 34vw, 420px); background-size: cover; background-position: center; border-radius: var(--radio-m); box-shadow: var(--sombra-osc); filter: saturate(.92); transition: filter .4s, transform .5s; }
.materia figure:hover .lama { filter: saturate(1.05); transform: translateY(-4px); }
.materia figcaption { padding: 1rem .25rem 0; font-size: var(--t-s); }
.materia figcaption b { display: block; font-weight: 500; }
.materia figcaption span { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--niebla); }

/* ── Proceso ───────────────────────────────────────── */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--piedra); counter-reset: paso; }
.pasos li { padding: 2rem 2rem 0 0; counter-increment: paso; }
.pasos li + li { padding-left: 2rem; border-left: 1px solid var(--piedra); }
.pasos li::before { content: counter(paso, decimal-leading-zero); display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; color: var(--cobre-texto); margin-bottom: 2.5rem; font-variant-numeric: tabular-nums; }
.pasos h3 { font-size: var(--t-l); font-weight: 500; margin-bottom: .75rem; }
.pasos p { font-size: var(--t-s); color: var(--tinta-suave); }
@media (max-width: 960px) { .pasos { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .pasos li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } .pasos li, .pasos li + li { padding: 1.75rem 0 0; border-left: 0; } .pasos li + li { border-top: 1px solid var(--piedra); } .pasos li::before { margin-bottom: 1rem; } }

/* ── Galería ───────────────────────────────────────── */
.galeria { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 14vw, 200px); gap: clamp(8px, 1.2vw, 16px); }
.galeria a { position: relative; overflow: hidden; border-radius: var(--radio-m); background: var(--navy-hondo); box-shadow: var(--sombra); }
.oscuro .galeria a { box-shadow: var(--sombra-osc); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.galeria a:hover img { transform: scale(1.05); }
.galeria .g-a { grid-column: span 7; grid-row: span 3; }
.galeria .g-b { grid-column: span 5; grid-row: span 2; }
.galeria .g-c { grid-column: span 5; grid-row: span 1; }
.galeria .g-d { grid-column: span 4; grid-row: span 2; }
.galeria .g-e { grid-column: span 4; grid-row: span 2; }
.galeria .g-f { grid-column: span 4; grid-row: span 2; }
@media (max-width: 760px) { .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; } .galeria a { grid-column: span 1 !important; grid-row: span 1 !important; } .galeria a:first-child { grid-column: span 2 !important; grid-row: span 1 !important; } }
.nota-foto { margin-top: 1.25rem; font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: .02em; }
.oscuro .nota-foto { color: var(--niebla); }

/* ── Video ─────────────────────────────────────────── */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.videos figure { margin: 0; }
.videos video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: var(--radio-m); background: var(--navy-hondo); box-shadow: var(--sombra-osc); }
.videos figcaption { font-size: var(--t-s); margin-top: .75rem; color: var(--niebla); }
@media (max-width: 860px) { .videos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .videos figure { scroll-snap-align: start; } }

/* ── Bloque dividido (texto + imagen) ──────────────── */
.dividido { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dividido.inv .dv-img { order: 2; }
.dv-img { position: relative; }
.dv-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra-l); }
.dv-txt h2 { font-size: var(--t-2xl); margin: 1rem 0 1.5rem; }
.dv-txt .cuerpo + .cuerpo { margin-top: 1rem; }
.lista-fina { list-style: none; padding: 0; margin: 2rem 0 2.25rem; border-top: 1px solid var(--piedra); }
.lista-fina li { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--piedra); font-size: var(--t-s); }
.lista-fina li span:last-child { color: var(--tinta-suave); text-align: right; }
.oscuro .lista-fina, .oscuro .lista-fina li { border-color: var(--navy-linea); }
.oscuro .lista-fina li span:last-child { color: var(--niebla); }
@media (max-width: 860px) { .dividido { grid-template-columns: 1fr; } .dividido.inv .dv-img { order: 0; } }

/* ── Tarjetas de estilo (cocinas) ──────────────────── */
.estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.estilo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio-m); margin-bottom: 1.25rem; box-shadow: var(--sombra-osc); transition: transform .5s; }
.estilo:hover img { transform: translateY(-4px); }
.sec:not(.oscuro) .estilo img { box-shadow: var(--sombra); }
.estilo h3 { font-size: var(--t-l); font-weight: 500; margin-bottom: .5rem; }
.estilo p { font-size: var(--t-s); color: var(--tinta-suave); }
@media (max-width: 960px) { .estilos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .estilos { grid-template-columns: 1fr; } }

/* ── Visualizador de colores (cocinas) ────────────── */
.visualizador { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.vz-foto { margin: 0; position: sticky; top: 96px; }
.vz-foto img { width: 100%; height: auto; border-radius: var(--radio); box-shadow: var(--sombra-l); background: var(--piedra); transition: opacity .25s; }
.vz-foto img.cargando { opacity: .55; }
.vz-foto figcaption { margin-top: .9rem; font-size: var(--t-xs); color: var(--tinta-suave); }
.vz-actual { display: grid; gap: .25rem; margin-bottom: 2rem; }
.vz-actual span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cobre-texto); }
.vz-actual b { font-size: var(--t-xl); font-weight: 300; letter-spacing: -.01em; }
.vz-grupo { margin-bottom: 2rem; }
.vz-grupo h3 { font-size: var(--t-s); font-weight: 600; margin-bottom: 1rem; }
.vz-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 1rem .5rem; }
.vz-muestra { display: grid; justify-items: center; gap: .5rem; background: none; border: 0; padding: .25rem 0; cursor: pointer; color: var(--tinta); font: inherit; }
.vz-circulo { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(10,31,68,.14), var(--sombra-s); transition: transform .2s, box-shadow .2s; }
.vz-muestra:hover .vz-circulo { transform: scale(1.06); }
.vz-muestra[aria-checked="true"] .vz-circulo { box-shadow: inset 0 0 0 1px rgba(10,31,68,.14), 0 0 0 3px var(--crema), 0 0 0 5px var(--cobre); }
.vz-etq { font-size: .6875rem; letter-spacing: .04em; text-align: center; line-height: 1.3; color: var(--tinta-suave); }
.vz-muestra[aria-checked="true"] .vz-etq { color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) {
  .visualizador { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .vz-foto { position: static; }
  .vz-foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
  .vz-foto figcaption { margin-top: .5rem; }
  .vz-actual { margin-bottom: 1rem; }
  .vz-grupo { margin-bottom: 1rem; }
  .vz-grupo h3 { margin-bottom: .5rem; }
  .vz-muestras { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .vz-muestra { scroll-snap-align: start; }
  .vz-circulo { width: 46px; height: 46px; }
}

/* ── Catálogo (accesos) ────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtros button { background: var(--blanco); border: 1px solid var(--piedra); color: var(--tinta); padding: .65rem 1.15rem; border-radius: var(--pildora); box-shadow: var(--sombra-s); transition: background .2s, color .2s; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--navy); color: var(--blanco); border-color: var(--navy); }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.producto { background: #FDFBF7; border: 1px solid rgba(228, 220, 203, .8); border-radius: var(--radio-m); box-shadow: var(--sombra-s); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; min-height: 240px; transition: box-shadow .3s, transform .3s; }
.producto:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.producto .cat { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cobre-texto); }
.producto h3 { font-size: var(--t-l); font-weight: 500; line-height: 1.25; }
.producto .modelo { font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.producto p { font-size: var(--t-s); color: var(--tinta-suave); flex: 1; }
.producto .cat, .producto .modelo { flex: 0 0 auto; }
.producto .prod-img { display: block; width: 100%; height: 150px; object-fit: contain; mix-blend-mode: multiply; margin: -.25rem 0 .75rem; }
.producto .prod-vacio { background-repeat: no-repeat; background-position: center; background-size: 56px; opacity: .14; mix-blend-mode: normal; }
.producto .specs { list-style: none; padding: 0; margin: .25rem 0 0; font-size: var(--t-xs); color: var(--tinta); display: grid; gap: .3rem; }
.producto .specs li::before { content: "— "; color: var(--cobre); }
.producto .pedir { margin-top: 1rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); align-self: flex-start; border-bottom: 1px solid var(--cobre); padding-bottom: .2rem; }
.producto[hidden] { display: none; }
.acabados { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.acabados figure { margin: 0; }
.acabados .muestra { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: var(--radio-s); box-shadow: var(--sombra-s); }
.acabados figcaption { margin-top: .7rem; font-size: var(--t-s); font-weight: 500; }
.acabados figcaption span { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--tinta-suave); }

/* ── Catálogos en PDF ─────────────────────────────── */
.catalogos-pdf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.catalogos-pdf.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.catalogos-pdf.uno { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.cat-pdf { display: flex; flex-direction: column; background: #FDFBF7; border: 1px solid rgba(228, 220, 203, .8); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .3s, box-shadow .3s; }
.cat-pdf:hover { transform: translateY(-3px); box-shadow: var(--sombra-l); }
.cat-pdf img { width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: cover; }
.cat-pdf .cp-txt { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: .45rem; }
.cat-pdf h3 { font-size: var(--t-l); font-weight: 500; }
.cat-pdf p { font-size: var(--t-s); color: var(--tinta-suave); }
.cat-pdf .cp-datos { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); font-weight: 600; }
.cat-pdf .enlace { margin-top: .5rem; justify-self: start; }
@media (max-width: 860px) { .catalogos-pdf, .catalogos-pdf.dos { grid-template-columns: minmax(0, 1fr); } }

/* ── Contacto ──────────────────────────────────────── */
.contacto { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 112px); }
.contacto h2 { font-size: var(--t-2xl); margin: 1rem 0 1.5rem; }
.datos { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; }
.datos li span { display: block; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--cobre-claro); font-weight: 600; margin-bottom: .3rem; }
.datos a:hover { color: var(--cobre-claro); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.form .ancho { grid-column: 1 / -1; }
.form label { display: grid; gap: .5rem; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--niebla); }
.form input, .form select, .form textarea { font: inherit; font-size: var(--t-m); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--blanco); background: rgba(255,255,255,.05); border: 1px solid var(--navy-linea); padding: .85rem 1rem; border-radius: var(--radio-s); width: 100%; transition: border-color .2s, background .2s, box-shadow .2s; }
.form input::placeholder, .form textarea::placeholder { color: rgba(185,193,209,.6); }
.form select option { color: var(--onix); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--niebla) 50%), linear-gradient(135deg, var(--niebla) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--cobre-claro); background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(211,154,99,.18); }
.form .nota { font-size: var(--t-xs); color: var(--niebla); text-transform: none; letter-spacing: 0; font-weight: 400; }
.acciones-form { display: flex; flex-wrap: wrap; gap: 1rem; }
.form .error { color: #F2A48B; font-size: var(--t-s); min-height: 1.2em; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } }

/* ── Pie ───────────────────────────────────────────── */
.pie { background: var(--onix); color: var(--niebla); padding: 72px 0 36px; font-size: var(--t-s); }
.pie .rej { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 48px; border-bottom: 1px solid #1d2230; }
.pie h4 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blanco); margin-bottom: 1.1rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pie a:hover { color: var(--blanco); }
.pie .marca img { width: 48px; height: 48px; }
.pie .marca b { color: var(--blanco); }
.pie .lema { margin-top: 1.25rem; max-width: 34ch; }
.pie .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 28px; font-size: var(--t-xs); }
@media (max-width: 860px) { .pie .rej { grid-template-columns: 1fr 1fr; } }

/* ── WhatsApp flotante ─────────────────────────────── */
.wa { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--cobre); color: var(--blanco); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(184,115,51,.14), 0 14px 30px -10px rgba(0,0,0,.45); transition: transform .25s, background .25s; }
.wa:hover { transform: translateY(-2px); background: #A5652A; }
.wa svg { width: 26px; height: 26px; }

/* ── Visor de fotos ────────────────────────────────── */
.visor { position: fixed; inset: 0; z-index: 100; background: rgba(7,23,51,.96); display: none; place-items: center; padding: 64px 16px; }
.visor.abierto { display: grid; }
.visor img { max-height: 84vh; width: auto; max-width: 100%; border-radius: var(--radio-m); box-shadow: var(--sombra-osc); }
.visor button { position: absolute; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); color: var(--blanco); width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.25rem; }
.visor .cerrar { top: 16px; right: 16px; }
.visor .ant { left: 16px; top: 50%; }
.visor .sig { right: 16px; top: 50%; }
.visor p { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--niebla); font-size: var(--t-xs); }

/* ── Aparición al desplazarse ──────────────────────── */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .portada > img { animation: none; transform: none; }
  .linea img, .galeria img { transition: none; }
}