/* WAYLA · paleta "Carbón, piedra y nogal" */
:root {
  --wayla-carbon:    #181818; /* carbón: fondo oscuro, textos sobre claro */
  --wayla-champagne: #8E6A4B; /* nogal: acentos, botones y destacados sobre oscuro */
  --wayla-alpaca:    #E6E3DD; /* piedra clara: fondos claros y textos sobre oscuro */
  --wayla-laton:     #5E412C; /* nogal oscuro: acentos sobre claro */
  --wayla-bosque:    #222222; /* carbón claro: para alternar secciones oscuras */
  --wayla-piedra:    #A19A8F; /* piedra: el logo sobre oscuro */

  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tracking-kicker: 0.35em;
  --radius: 4px;

  /* derivados */
  --carbon-2: #212121;
  --texto-claro: rgba(230, 227, 221, .72);
  --texto-oscuro: rgba(24, 24, 24, .74);
  --linea-oscuro: rgba(230, 227, 221, .14);
  --linea-claro: rgba(24, 24, 24, .14);
  --alto-nav: 72px;
}

* { box-sizing: border-box; }
/* Lo que está oculto no se muestra ni recibe clics, aunque su estilo diga otra cosa */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--alto-nav); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--wayla-carbon);
  color: var(--wayla-alpaca);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-abierto { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: .01em; margin: 0; }
p { margin: 0; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- Superficies ---------- */
.oscuro { background: var(--wayla-carbon); color: var(--wayla-alpaca); }
.bosque { background: var(--wayla-bosque); color: var(--wayla-alpaca); }
.claro  { background: var(--wayla-alpaca); color: var(--wayla-carbon); }

/* motivo: veta ondulada sutil */
.veta {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='170'%3E%3Cpath d='M0 60 Q300 25 600 60 T1200 60' fill='none' stroke='%23E6E3DD' stroke-opacity='.035' stroke-width='14'/%3E%3C/svg%3E");
  background-size: 1200px 170px;
}
.veta-clara {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='170'%3E%3Cpath d='M0 60 Q300 25 600 60 T1200 60' fill='none' stroke='%23181818' stroke-opacity='.035' stroke-width='14'/%3E%3C/svg%3E");
  background-size: 1200px 170px;
}

.kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.oscuro .kicker, .bosque .kicker { color: var(--wayla-champagne); }
.claro .kicker { color: var(--wayla-laton); }
.dorado { color: var(--wayla-champagne); }
.filete { display: block; width: 72px; height: 1px; margin: 28px 0; }
.oscuro .filete { background: var(--wayla-champagne); }
.claro .filete { background: var(--wayla-laton); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 13px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--wayla-champagne); outline-offset: 3px;
}
.claro a:focus-visible, .claro button:focus-visible, .claro summary:focus-visible { outline-color: var(--wayla-laton); }
.btn-dorado { background: var(--wayla-champagne); color: var(--wayla-alpaca); }
.btn-dorado:hover { background: #9E7A5A; }
.btn-borde { border-color: rgba(142, 106, 75, .55); color: var(--wayla-champagne); }
.btn-borde:hover { border-color: var(--wayla-champagne); background: rgba(142, 106, 75, .08); }
.btn-oscuro { background: var(--wayla-carbon); color: var(--wayla-alpaca); }
.btn-oscuro:hover { background: #2E2E2E; }
.btn-sm { padding: 12px 18px; font-size: 12px; }
.btn-block { width: 100%; }

/* ---------- Barra superior ---------- */
.barra { background: #111111; border-bottom: 1px solid var(--linea-oscuro); }
.barra p {
  text-align: center; padding: 9px 16px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(230, 227, 221, .6);
}
.barra span { color: var(--wayla-champagne); margin: 0 .5em; }
.barra b { font-weight: inherit; }

/* ---------- Nav: menú | logo | presupuesto ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(24, 24, 24, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.con-borde { border-bottom-color: var(--linea-oscuro); }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--alto-nav); }
.logo img { height: 52px; width: auto; }
.nav-cta { justify-self: end; }
.menu-btn {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  color: var(--wayla-alpaca);
  font: 500 12px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
}
.menu-lineas { display: grid; gap: 6px; width: 26px; }
.menu-lineas span { display: block; height: 1.5px; background: var(--wayla-champagne); transition: transform .3s ease, width .3s ease; }
.menu-lineas span:last-child { width: 70%; }
.menu-btn:hover .menu-lineas span:last-child { width: 100%; }
.menu-btn[aria-expanded="true"] .menu-lineas span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lineas span:last-child { width: 100%; transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background-color: var(--wayla-carbon);
  padding-top: calc(var(--alto-nav) + 48px);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transition: opacity .3s ease;
  overflow-y: auto;
}
.menu.visible { opacity: 1; }
.menu-in { display: flex; flex-direction: column; }
.menu-in a {
  display: flex; align-items: baseline; gap: 22px;
  padding: 14px 0; text-decoration: none;
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 52px); line-height: 1.1;
  color: var(--wayla-alpaca); border-bottom: 1px solid var(--linea-oscuro);
  transition: color .2s, padding-left .3s ease;
}
.menu-in a span { font: 500 12px/1 var(--font-body); letter-spacing: .2em; color: var(--wayla-champagne); }
.menu-in a:hover { color: var(--wayla-champagne); padding-left: 10px; }
.menu-pie { display: flex; gap: 32px; padding: 40px 0 48px; }
.menu-pie a { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-claro); text-decoration: none; }
.menu-pie a:hover { color: var(--wayla-champagne); }

/* ---------- Inicio ---------- */
.hero { min-height: calc(100svh - var(--alto-nav) - 36px); display: flex; align-items: center; padding: 56px 0 72px; }
.hero-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: 1.02; }
.lead { font-size: 19px; font-weight: 300; color: var(--texto-claro); margin-bottom: 40px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.plano-card {
  margin: 0;
  background-color: var(--carbon-2);
  background-image:
    linear-gradient(rgba(142, 106, 75, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 106, 75, .05) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid rgba(142, 106, 75, .2);
  border-radius: var(--radius);
  padding: 14px 18px 16px;
}
.plano-head {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(142, 106, 75, .7);
  padding-bottom: 10px; border-bottom: 1px dashed rgba(142, 106, 75, .2); margin-bottom: 8px;
}
.plano-capas { display: grid; }
.plano-capas > svg { grid-area: 1 / 1; }
.capa-color { opacity: 0; transition: opacity 1.2s ease; }
.plano-card.terminada .capa-color { opacity: 1; }
.plano-toggle { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.plano-toggle button {
  background: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  padding: 7px 14px; font: 500 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(230, 227, 221, .5); transition: color .2s, border-color .2s;
}
.plano-toggle button[aria-checked="true"] { color: var(--wayla-champagne); border-color: rgba(142, 106, 75, .45); }

/* ---------- Cifras ---------- */
.cifras { border-top: 1px solid var(--linea-oscuro); }
.cifras-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.cifras-lista li { padding: 44px 32px 48px 0; }
.cifras-lista li + li { padding-left: 32px; border-left: 1px solid var(--linea-oscuro); }
.cifras-lista strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); color: var(--wayla-champagne); line-height: 1; margin-bottom: 14px; }
.cifras-lista span { font-size: 15px; font-weight: 300; color: var(--texto-claro); display: block; max-width: 20em; }

/* ---------- Dibujo de cocina ---------- */
.cocina { width: 100%; height: auto; overflow: visible; }
.cocina text { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; }
.linea text { fill: rgba(230, 227, 221, .5); }
.linea .cota line, .linea .cota path { stroke: rgba(230, 227, 221, .35); stroke-width: 1; fill: none; }
.linea .t { fill: none; stroke: var(--wayla-champagne); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.linea .t.fino { stroke-width: .9; stroke: rgba(142, 106, 75, .6); }
.linea .t.mesada { fill: rgba(142, 106, 75, .1); }
.linea .zocalo { fill: rgba(142, 106, 75, .12); }
.linea.animar .t { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: dibujar 1.1s cubic-bezier(.6, 0, .3, 1) forwards; animation-delay: var(--d, 0s); }
.linea.animar .t.mesada, .linea.animar .zocalo { fill-opacity: 0; animation: dibujar 1.1s cubic-bezier(.6, 0, .3, 1) forwards, rellenar .6s ease forwards; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .8s); }
.linea.animar .cota, .linea.animar text { opacity: 0; animation: aparecer .6s ease forwards; animation-delay: 2.4s; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes rellenar { to { fill-opacity: 1; } }
@keyframes aparecer { to { opacity: 1; } }

.color .caja { fill: #ECEAE5; stroke: rgba(24, 24, 24, .25); stroke-width: 1; }
.color .frente { stroke: rgba(24, 24, 24, .28); stroke-width: .8; transition: fill .35s ease; }
.color .gola { fill: #2a2a27; }
.color .mesada { fill: #E9E4DA; stroke: rgba(24, 24, 24, .18); stroke-width: .8; }
.color .zocalo { fill: #9E9C96; }
.color .artefacto { fill: #D9D7D1; stroke: #8E8C87; stroke-width: 1; }
.color .artefacto-osc { fill: #3A3A38; }
.color .tirador { stroke-linecap: round; fill: none; }
.color .grifo { fill: none; stroke: var(--wayla-laton); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.color .pared { fill: #F2F0EC; }
.color .azulejo { stroke: rgba(24, 24, 24, .07); stroke-width: 1; }
.color .fino { stroke: #8E8C87; }

/* ---------- Secciones ---------- */
.seccion { padding: 112px 0; }
.seccion-pegada { padding-top: 0; }
.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 52px); }
.sec-head p:not(.kicker) { font-size: 17px; font-weight: 300; margin-top: 18px; }
.oscuro .sec-head p:not(.kicker) { color: var(--texto-claro); }
.claro .sec-head p:not(.kicker) { color: var(--texto-oscuro); }
.sec-head-fila { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Mosaico de lo que hacemos */
.mosaico { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, minmax(250px, auto)); gap: 16px; margin-bottom: 112px; }
.tesela {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px; border-radius: var(--radius);
  background-color: var(--wayla-carbon);
  background-size: cover; background-position: center;
  color: var(--wayla-alpaca); text-decoration: none;
  isolation: isolate;
}
.tesela.veta { background-size: 1200px 170px; background-position: 0 0; }
.tesela.con-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(24, 24, 24, .85), rgba(24, 24, 24, .1) 60%); }
.tesela:first-child { grid-row: span 2; }
.tesela-icono { position: absolute; top: 30px; right: 30px; width: 64px; height: 64px; fill: none; stroke: var(--wayla-champagne); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; transition: transform .5s ease; }
.tesela:first-child .tesela-icono { width: 110px; height: 110px; }
.tesela-icono circle { fill: var(--wayla-champagne); stroke: none; }
.tesela h3 { font-size: clamp(24px, 2.4vw, 32px); }
.tesela:first-child h3 { font-size: clamp(32px, 3.6vw, 48px); }
.tesela-cabeza {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; flex: 1;
  background: none; border: 0; padding: 0; margin: 0; width: 100%;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tesela-bajada { font-size: 11px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--wayla-champagne); margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.tesela-bajada::after { content: "+"; font-size: 16px; letter-spacing: 0; line-height: 1; transition: transform .25s ease; }
.tesela.abierta .tesela-bajada::after { transform: rotate(45deg); }
.tesela:hover .tesela-icono { transform: scale(1.06); }
.tesela-detalle { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea-oscuro); }
.tesela-detalle p { font-size: 15px; font-weight: 300; color: var(--texto-claro); max-width: 30em; }
.tesela-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tesela.abierta { box-shadow: inset 0 0 0 1px rgba(142, 106, 75, .6); }
.tesela.abierta .tesela-icono { opacity: .35; }

/* Vista de una placa en una cocina */
.vista-placa {
  width: min(820px, 100% - 24px); max-height: calc(100% - 24px);
  padding: 26px; border: 1px solid var(--linea-oscuro); border-radius: var(--radius);
  background: var(--wayla-carbon); color: var(--wayla-alpaca);
}
.vista-placa::backdrop { background: rgba(0, 0, 0, .7); }
.vp-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.vp-cabeza .kicker { margin-bottom: 8px; }
.vp-cabeza h2 { font-size: clamp(26px, 4vw, 36px); }
.vp-cerrar { background: none; border: 1px solid var(--linea-oscuro); color: var(--wayla-alpaca); width: 40px; height: 40px; border-radius: var(--radius); font-size: 24px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.vp-cerrar:hover { border-color: var(--wayla-champagne); }
.vp-plano { background: #F2F0EC; border-radius: var(--radius); padding: 18px; }
.vp-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; }
.vp-pie .segmento { flex: 1 1 260px; max-width: 360px; }
.vista-placa .nota { margin-top: 14px; }

/* Formas de cocina */
.grid-formas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.forma { border-top: 1px solid var(--linea-claro); padding-top: 18px; }
.forma svg { width: 100%; height: auto; margin-bottom: 14px; }
.forma h3 { font-size: 20px; }
.ilus .piso { fill: #F1EFEB; }
.ilus .muro { fill: none; stroke: var(--wayla-carbon); stroke-width: 4; stroke-linecap: square; }
.ilus .mueble { fill: #D8CBAE; stroke: var(--wayla-carbon); stroke-width: 1.2; }
.ilus .isla { fill: var(--wayla-laton); fill-opacity: .55; stroke: var(--wayla-carbon); stroke-width: 1.2; }
.ilus .banco { fill: #F1EFEB; stroke: var(--wayla-carbon); stroke-width: 1.1; }
.ilus .sombra { fill: rgba(24, 24, 24, .08); }

/* Probador */
.probador { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-top: 72px; }
.probador-vista { background: #F2F0EC; border: 1px solid var(--linea-claro); border-radius: var(--radius); padding: 28px; display: grid; place-items: center; }
.probador-panel { background: var(--wayla-carbon); color: var(--wayla-alpaca); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 26px; }
.probador-panel .kicker { color: var(--wayla-champagne); margin-bottom: 0; }
.control-tit { font-size: 13px; font-weight: 500; letter-spacing: .06em; margin-bottom: 14px; color: var(--texto-claro); }
.control-tit span { color: var(--wayla-alpaca); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 10px; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--wayla-carbon); box-shadow: 0 0 0 1px var(--linea-oscuro); cursor: pointer; padding: 0; transition: box-shadow .15s; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 1.5px var(--wayla-champagne); }
.segmento { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea-oscuro); border-radius: var(--radius); padding: 3px; gap: 3px; }
.segmento button { border: 0; background: transparent; border-radius: 2px; padding: 11px 6px; font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-claro); cursor: pointer; transition: background .2s, color .2s; }
.segmento button[aria-checked="true"] { background: var(--wayla-champagne); color: var(--wayla-alpaca); }
.nota { font-size: 12px; font-weight: 300; color: rgba(230, 227, 221, .5); margin-top: auto; }

/* Lo de adentro */
.adentro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.adentro-ilus { margin: 0; }
.adentro-ilus svg { width: 100%; height: auto; }
.adentro-ilus figcaption { margin-top: 14px; font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: rgba(142, 106, 75, .7); }
.aj-marco { fill: #2C2C2C; stroke: var(--wayla-champagne); stroke-width: 2; }
.aj-fondo { fill: #202020; stroke: rgba(142, 106, 75, .35); stroke-width: 1; }
.aj-div { stroke: rgba(142, 106, 75, .55); stroke-width: 2; fill: none; }
.aj-cub, .aj-obj { fill: none; stroke: var(--wayla-champagne); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adentro-txt h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 36px; }
.adentro-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.adentro-lista li { border-top: 1px solid var(--linea-oscuro); padding-top: 18px; }
.adentro-lista h3 { font-size: 19px; margin-bottom: 6px; }
.adentro-lista p { font-size: 14.5px; font-weight: 300; color: var(--texto-claro); }

/* Nosotros */
.nosotros { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.definicion { text-align: center; display: flex; flex-direction: column; align-items: center; }
.definicion-icono { width: 150px; height: auto; margin-bottom: 4px; }
.definicion-palabra { font-family: var(--font-display); font-size: clamp(52px, 7vw, 88px); line-height: 1; letter-spacing: .02em; }
.definicion-tipo { font-style: italic; font-weight: 300; font-size: 17px; color: var(--wayla-laton); margin-top: 14px; }
.definicion .filete { margin: 26px auto; }
.definicion-sig { font-family: var(--font-display); font-size: 34px; }
.nosotros-txt h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 22px; }
.nosotros-txt p:not(.kicker) { font-size: 17px; font-weight: 300; color: var(--texto-oscuro); }
.nosotros-txt p + p { margin-top: 16px; }

/* Cita */
.cita { padding: 120px 0; text-align: center; }
.cita-in { max-width: 920px; }
.cita blockquote { margin: 0; }
.cita blockquote p { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.3; }
.cita footer { margin-top: 32px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--wayla-champagne); }
.cita footer span { color: rgba(230, 227, 221, .5); }

/* Inspiración */
.inspiracion-in { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.inspiracion-img { margin: 0; position: relative; }
.inspiracion-img img { width: 100%; height: auto; }
.inspiracion-img figcaption {
  position: absolute; left: 16px; bottom: 16px;
  font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
  color: var(--wayla-carbon); background: rgba(230, 227, 221, .85);
  padding: 7px 10px; border-radius: 2px;
}
.inspiracion-txt { padding: 80px 0; }
.inspiracion-txt h2 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 18px; }
.inspiracion-txt p:not(.kicker) { font-weight: 300; font-size: 17px; color: var(--texto-claro); margin-bottom: 32px; }

/* Galería de proyectos: ambiente + detalle */
.galeria { display: grid; gap: 56px; }
.proyecto { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 0; }
.proyecto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.proyecto img + img { aspect-ratio: auto; }
.proyecto:not(:has(img + img)) { grid-template-columns: 1fr; }
.proyecto figcaption { grid-column: 1 / -1; font-family: var(--font-display); font-size: 20px; display: flex; gap: 12px; align-items: baseline; }
.proyecto figcaption span { font: 500 11px/1 var(--font-body); letter-spacing: .25em; text-transform: uppercase; color: var(--wayla-laton); }

/* Materiales */
.materiales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.material img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.material h3 { font-size: 22px; margin-bottom: 6px; }
.material p { font-size: 15px; font-weight: 300; color: var(--texto-oscuro); }

.materiales-marca { margin: -28px 0 40px; font-weight: 300; color: var(--texto-oscuro); }
.materiales-marca strong { font-weight: 600; color: var(--wayla-carbon); }

/* Novedades en placas */
.lanzamiento-anterior { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--linea-oscuro); }
.lanz-sello { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-claro); }
.lanz-sello span { background: var(--wayla-champagne); color: var(--wayla-alpaca); font-weight: 600; padding: 7px 12px; border-radius: 2px; }
.lanzamiento-anterior .lanz-sello span { background: transparent; color: var(--wayla-champagne); border: 1px solid rgba(142, 106, 75, .45); }
.muestras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.muestra { display: flex; flex-direction: column; }
.muestra-placa { aspect-ratio: 3 / 4; border-radius: var(--radius); margin-bottom: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.muestra h3 { font-size: 20px; }
.muestra-acabado { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--wayla-champagne); margin: 6px 0 8px; }
.muestra-uso { font-size: 14px; font-weight: 300; color: var(--texto-claro); line-height: 1.55; flex: 1; }
.muestra-probar {
  margin-top: 14px; align-self: flex-start;
  background: none; border: 0; border-bottom: 1px solid rgba(142, 106, 75, .5); padding: 4px 0; cursor: pointer;
  font: 500 11px/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--wayla-champagne);
  transition: border-color .2s;
}
.muestra-probar::after { content: " →"; }
.muestra-probar:hover { border-color: var(--wayla-champagne); }
.muestra-foto { position: relative; margin-bottom: 18px; }
.muestra-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.muestra-chip {
  position: absolute; left: 10px; bottom: 10px; margin: 0;
  width: 34%; aspect-ratio: 1; border-radius: 2px;
  box-shadow: 0 0 0 2px var(--wayla-carbon), 0 6px 18px -6px rgba(0, 0, 0, .6);
  transition: transform .35s ease;
}
.muestra:hover .muestra-chip { transform: scale(1.12); }
.lanz-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.lanz-video { color: var(--wayla-champagne); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-underline-offset: 5px; }
.lanz-video::before { content: "▶  "; font-size: 10px; }
.nota-muestras { font-size: 13px; font-weight: 300; color: rgba(230, 227, 221, .5); }
.lanz-credito { margin-left: auto; font-size: 11px; letter-spacing: .1em; color: rgba(230, 227, 221, .4); }
.swatch-grupo { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(230, 227, 221, .5); margin: 0 0 10px; }
.swatches + .swatch-grupo { margin-top: 18px; }

/* Proceso */
.claro .pasos li { border-top-color: var(--wayla-laton); }
.claro .paso-n { color: var(--wayla-laton); }
.claro .pasos p { color: var(--texto-oscuro); }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pasos li { border-top: 1px solid var(--wayla-champagne); padding-top: 28px; }
.paso-n { display: block; font-family: var(--font-display); font-size: 44px; color: var(--wayla-champagne); line-height: 1; margin-bottom: 24px; }
.pasos h3 { font-size: 26px; margin-bottom: 10px; }
.pasos p { font-size: 15px; font-weight: 300; color: var(--texto-claro); max-width: 22em; }

/* Testimonios */
.testimonios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.testimonio { margin: 0; border-top: 1px solid var(--wayla-laton); padding-top: 24px; }
.testimonio p { font-family: var(--font-display); font-size: 20px; line-height: 1.45; }
.testimonio footer { margin-top: 18px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--wayla-laton); }

/* Estudios */
.estudios { padding: 112px 0; }
.estudios-in { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; border: 1px solid var(--linea-claro); border-radius: var(--radius); padding: 44px 48px; }
.estudios h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.estudios p:not(.kicker) { font-weight: 300; color: var(--texto-oscuro); max-width: 34em; }
.estudios .kicker { margin-bottom: 12px; }

/* Preguntas */
.faq-in { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq { border-top: 1px solid var(--linea-claro); }
.faq details { border-bottom: 1px solid var(--linea-claro); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-family: var(--font-display); font-size: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--font-body); color: var(--wayla-laton); transition: transform .25s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; font-weight: 300; color: var(--texto-oscuro); max-width: 36em; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contacto-txt h2 { font-size: clamp(34px, 4.4vw, 56px); margin-bottom: 20px; }
.contacto-txt > p:not(.kicker) { font-size: 17px; font-weight: 300; color: var(--texto-claro); max-width: 26em; }
.canales { list-style: none; padding: 0; margin: 36px 0; border-top: 1px solid var(--linea-oscuro); }
.canales li { border-bottom: 1px solid var(--linea-oscuro); }
.canales a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; text-decoration: none; font-family: var(--font-display); font-size: 22px; color: var(--wayla-alpaca); transition: color .15s; }
.canales a::after { content: "→"; font-family: var(--font-body); color: var(--wayla-champagne); transition: transform .2s; }
.canales a:hover { color: var(--wayla-champagne); }
.canales a:hover::after { transform: translateX(4px); }
.envios { font-size: 13px; letter-spacing: .06em; color: rgba(230, 227, 221, .55); }

.form { display: flex; flex-direction: column; gap: 18px; background: var(--carbon-2); border: 1px solid var(--linea-oscuro); border-radius: var(--radius); padding: 32px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-claro); }
.form em { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(230, 227, 221, .45); }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form input, .form select, .form textarea {
  font: 400 16px/1.4 var(--font-body); color: var(--wayla-alpaca);
  padding: 13px 14px; border-radius: var(--radius);
  border: 1px solid var(--linea-oscuro); background: var(--wayla-carbon);
  resize: vertical; letter-spacing: 0; text-transform: none;
}
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--wayla-champagne) 50%), linear-gradient(135deg, var(--wayla-champagne) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.form input::placeholder, .form textarea::placeholder { color: rgba(230, 227, 221, .35); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--wayla-champagne); }
.form .btn { margin-top: 6px; }

/* Pie */
.pie { background: var(--wayla-carbon); border-top: 1px solid var(--linea-oscuro); padding: 56px 0 40px; }
.pie-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.pie-logo { width: 170px; height: auto; margin-bottom: 4px; }
.pie-frase { font-family: var(--font-display); font-size: 18px; }
.pie-copy { font-size: 12px; letter-spacing: .08em; color: rgba(230, 227, 221, .45); }

/* WhatsApp flotante (en colores de la marca) */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wayla-champagne); color: var(--wayla-alpaca);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5);
  transition: transform .2s ease, background .2s ease;
}
.wa-flotante:hover { transform: scale(1.06); background: #9E7A5A; }
.wa-flotante svg { width: 26px; height: 26px; fill: currentColor; }

/* ---------- Aparición al hacer scroll (sutil, nunca deja huecos) ---------- */
.js .revelar { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar.visto { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .grid-formas { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .materiales { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .muestras { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tesela { min-height: 220px; }
  .tesela:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 300px; }
}
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-in, .inspiracion-in, .nosotros, .contacto, .adentro, .faq-in { grid-template-columns: 1fr; }
  .hero-in { gap: 44px; }
  .probador { grid-template-columns: 1fr; }
  .inspiracion-in { gap: 0; }
  .inspiracion-img { margin-inline: -16px; }
  .inspiracion-txt { padding: 56px 0 72px; }
  .nosotros, .contacto, .adentro { gap: 56px; }
  .faq-in { gap: 0; }
}
@media (max-width: 640px) {
  :root { --alto-nav: 64px; }
  .barra p { font-size: 9px; letter-spacing: .18em; }
  .barra-lugar { display: none; }
  .logo img { height: 42px; }
  .menu-txt { display: none; }
  .nav-cta { padding: 10px 12px; letter-spacing: .12em; font-size: 11px; }
  .hero { padding: 44px 0 56px; }
  .lead { font-size: 17px; }
  .acciones .btn { flex: 1 1 100%; }
  .plano-card { padding: 10px 10px 12px; }
  .cifras-lista { grid-template-columns: 1fr; }
  .cifras-lista li, .cifras-lista li + li { padding: 26px 0; border-left: 0; }
  .cifras-lista li + li { border-top: 1px solid var(--linea-oscuro); }
  .seccion { padding: 80px 0; }
  .seccion-pegada { padding-top: 0; }
  .mosaico { grid-template-columns: 1fr; gap: 12px; margin-bottom: 80px; }
  .tesela, .tesela:first-child { min-height: 190px; padding: 24px; }
  .tesela:first-child { min-height: 260px; }
  .tesela-icono { top: 22px; right: 22px; width: 52px; height: 52px; }
  .tesela:first-child .tesela-icono { width: 84px; height: 84px; }
  .grid-formas { grid-template-columns: repeat(2, 1fr); gap: 14px; row-gap: 26px; }
  .probador { margin-top: 56px; }
  .probador-vista { padding: 12px; }
  .probador-panel { padding: 24px; }
  .adentro-lista { grid-template-columns: 1fr; gap: 20px; }
  .cita { padding: 88px 0; }
  .proyecto { grid-template-columns: 1fr; }
  .materiales { grid-template-columns: 1fr; }
  .muestras { grid-template-columns: repeat(2, 1fr); gap: 14px; row-gap: 30px; }

  .pasos { grid-template-columns: 1fr; gap: 40px; }
  .estudios { padding: 80px 0; }
  .estudios-in { padding: 32px 24px; }
  .estudios .btn { width: 100%; }
  .form { padding: 22px; }
  .form-fila { grid-template-columns: 1fr; }
  .wa-flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

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

  *, *::before, *::after { animation: none !important; transition: none !important; }
  .linea.animar .t { stroke-dasharray: none; stroke-dashoffset: 0; }
  .linea.animar .t.mesada, .linea.animar .zocalo { fill-opacity: 1; }
  .linea.animar .cota, .linea.animar text { opacity: 1; }
  .js .revelar { opacity: 1; transform: none; }
}