/* ============================================================
   PUERTAS DE SEGURA
   1. Base y tokens      6. Portada: pasos y contacto
   2. Ruido             7. Catálogo
   3. Navegación         8. Ficha de puerta
   4. Hero               9. Transición (atravesar la puerta)
   5. Puerta            10. Responsive
                        11. Páginas: legales y blog
                        12. Catálogo desde Supabase: fotos y estados
   ============================================================ */

/* ---------- 1. Base y tokens ---------- */
:root{
  --ink:#14110E;
  --ink-2:#1E1A15;
  --ink-3:#2A241D;
  --paper:#F4F0E8;
  --paper-2:#E9E2D5;
  --muted:#8B8175;
  --muted-d:#9D9384;
  --brass:#9A6F3F;
  --brass-lite:#C79B62;
  --line:rgba(20,17,14,.14);
  --line-d:rgba(244,240,232,.16);

  --jamb:#DCD4C5;
  --jamb-hi:#F0EBE0;
  --jamb-lo:#B7AD9A;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);

  --pad:clamp(20px,4.4vw,68px);
  --maxw:1560px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:300; font-optical-sizing:auto; letter-spacing:-.02em; line-height:1.02; }
p{ margin:0; }
::selection{ background:var(--brass); color:#fff; }
:focus-visible{ outline:2px solid var(--brass-lite); outline-offset:3px; border-radius:2px; }

.eyebrow{
  font-size:11px; text-transform:uppercase; letter-spacing:.20em;
  font-weight:500; color:var(--muted-d);
}
em{ font-style:italic; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  height:52px; padding:0 30px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--paper); color:var(--ink); }
.btn--solid:hover{ background:var(--brass-lite); color:#231A10; }
.btn--ghost{ border:1px solid var(--line-d); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); }

/* ---------- 2. Ruido ---------- */
.grain{
  position:fixed; inset:-120px; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 16%{transform:translate(-14px,8px)} 33%{transform:translate(9px,-12px)}
  50%{transform:translate(-7px,-6px)} 66%{transform:translate(12px,10px)} 83%{transform:translate(-10px,4px)} 100%{transform:translate(0,0)}
}

/* ---------- 3. Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--pad);
  transition:background .5s var(--ease),color .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-solid{
  background:rgba(20,17,14,.72); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-d); padding-top:14px; padding-bottom:14px;
}
body[data-theme="light"] .nav{ color:var(--ink); }
body[data-theme="light"] .nav.is-solid{ background:rgba(244,240,232,.82); border-bottom-color:var(--line); }

.nav__brand{ display:flex; align-items:center; gap:11px; }
.nav__mark{ width:50px; height:50px; flex:none; }
.nav__mark svg,.nav__mark img{ width:100%; height:100%; object-fit:contain; }
.nav__name{ font-family:var(--serif); font-size:24px; letter-spacing:-.015em; }
.nav__links{ display:flex; gap:clamp(16px,1.7vw,26px); font-size:13.5px; letter-spacing:.01em; }
.nav__links a{ position:relative; padding:4px 0; opacity:.72; transition:opacity .3s; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ opacity:1; }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__tel{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--brass-lite);
  box-shadow:0 0 0 0 rgba(199,155,98,.6); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(199,155,98,0)} 100%{box-shadow:0 0 0 0 rgba(199,155,98,0)} }

/* ---------- 4. Hero ---------- */
.view{
  display:none; transform-origin:50% 38%;
  transition:transform .95s var(--ease),filter .95s var(--ease),opacity .7s ease;
}
.view.is-active{ display:block; }
/* Estado inicial al entrar por una puerta: como visto desde el umbral. */
.view.is-entering{ transform:scale(1.14); filter:blur(11px); opacity:.45; }
.view--hall{ background:var(--ink); min-height:100svh; }
/* La foto del tipo, de fondo en la cabecera: se ve, pero deja leer el titular */
.view--hall .hero__head{ position:relative; isolation:isolate; }
.head__photo{
  position:absolute; z-index:-1; inset:0;
  background-size:cover; background-position:72% 42%; background-repeat:no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(105deg,transparent 12%,#000 52%);
  mask-image:linear-gradient(105deg,transparent 12%,#000 52%);
}
.view--hall .hero__head::after{
  content:''; position:absolute; z-index:-1; inset:0;
  background:
    linear-gradient(to bottom,transparent 52%,rgba(20,17,14,.75) 82%,var(--ink) 100%),
    linear-gradient(100deg,rgba(9,7,6,.94) 0%,rgba(9,7,6,.78) 32%,rgba(9,7,6,.34) 62%,rgba(9,7,6,.12) 100%);
}

/* Vestíbulo: "Volver" y el grupo en la misma línea */
.crumbs{ display:flex; align-items:center; gap:16px; }
.crumbs .eyebrow{ padding-left:16px; border-left:1px solid var(--line-d); }
.back--dark{ color:var(--muted-d); padding:0; }
.back--dark:hover{ color:var(--paper); }

.hero{ position:relative; background:var(--ink); }

/* Cabecera: el titular a la izquierda y, a la derecha, la ficha de la
   puerta que estás señalando. Nunca se solapa con las puertas. */
.hero__head{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(250px,25vw,370px);
  align-items:end; gap:clamp(28px,4vw,80px);
  padding:clamp(84px,10.5vh,116px) var(--pad) clamp(14px,2vh,24px);
}
/* En escritorio la cabecera es compacta (titular en una línea) para que la
   fila de puertas se lleve el máximo de pantalla. */
.hero__title{
  margin:10px 0 0; font-size:clamp(34px,3.6vw,56px); letter-spacing:-.035em;
}
.hero__title em{ color:var(--brass-lite); }
@media (min-width:901px){ .hero__title br{ display:none; } }
.hero__sub{
  margin-top:10px; max-width:72ch; color:#C4BCB0; font-size:clamp(14px,1.1vw,16.5px);
  text-wrap:pretty;
}

.readout{
  border-left:1px solid var(--line-d); padding-left:clamp(18px,2vw,30px);
  min-height:120px; display:flex; flex-direction:column; justify-content:flex-end;
}
.readout__n{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lite); font-variant-numeric:tabular-nums;
}
.readout__name{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(20px,1.9vw,29px); margin-top:8px;
}
/* Dos renglones fijos: si la altura cambiara entre una opción y otra, el bloque
   (que va pegado abajo) daría un saltito en cada hover. */
.readout__tag{
  margin-top:6px; font-size:13.5px; color:var(--muted-d);
  height:calc(2 * 1.55em); overflow:hidden;
}
.readout__cta{
  margin-top:10px; min-height:1.55em; display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
}
.readout__cta svg{ width:15px; height:15px; }
/* El contenido cambia con un movimiento corto: informa, no decora. */
/* El cambio de texto es un fundido corto de todo el bloque. Antes entraba línea
   a línea y con desplazamiento, y al pasar de una puerta a otra se notaban los
   saltos. */
.readout{ transition:opacity .15s var(--ease),transform .15s var(--ease); }
.readout.is-changing{ opacity:0; transform:translateY(3px); }
/* Sin enlace (estado en reposo) la línea sigue ocupando su sitio: así el bloque
   no cambia de alto y el texto no baila al pasar de una opción a otra. */
.readout__cta.is-off{ opacity:0; visibility:hidden; }

/* Seis puertas en dos filas de tres. */
.doors{
  position:relative; display:flex; flex-direction:column;
  gap:clamp(6px,.7vw,12px); padding:0 clamp(6px,.7vw,12px) clamp(6px,.7vw,12px);
}
.doors__row{ display:flex; gap:clamp(6px,.7vw,12px); height:var(--rowh,78svh); min-height:460px; }


.panel{
  position:relative; flex:1 1 0; min-width:0; display:block;
  border:0; padding:0; overflow:hidden; border-radius:3px; cursor:pointer; isolation:isolate;
  background:linear-gradient(#17130F 0%,#0D0B09 58%,#151110 100%);
  transition:flex-grow 1s var(--ease),opacity .45s ease,transform .55s var(--ease),filter .6s var(--ease);
}
.panel__stage{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  /* marco a tono de pared: en el hero el protagonismo es de la hoja */
  --jamb:#392F26; --jamb-hi:#544738; --jamb-lo:#171310;
}
.panel__stage::before{ /* luz cenital del hueco */
  content:''; position:absolute; z-index:0; inset:0;
  background:radial-gradient(62% 42% at 50% 4%,rgba(255,226,186,.16) 0%,transparent 68%);
}
.panel__stage .door{
  /* Hueco para el rótulo en px, no en %: un margen en % se calcula sobre el
     ANCHO del panel, y con dos puertas anchas empujaba la puerta fuera por arriba. */
  position:relative; z-index:1; height:calc(100% - 126px); aspect-ratio:.46; margin-bottom:96px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.62));
  transition:transform .9s var(--ease);
}
.panel__floor{
  position:absolute; z-index:0; left:0; right:0; bottom:0; height:15%;
  background:linear-gradient(#1C1714 0%,#100D0B 55%,#080706 100%);
  box-shadow:inset 0 1px 0 rgba(244,240,232,.07);
}
.panel__shade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(8,6,5,.92) 0%,rgba(8,6,5,.52) 24%,rgba(8,6,5,.04) 52%,rgba(8,6,5,.30) 100%);
  transition:opacity .6s var(--ease);
}
.panel__meta{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  padding:clamp(18px,2vw,32px); pointer-events:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.panel__n{
  display:block; margin-bottom:12px;
  font-size:11px; letter-spacing:.22em; font-weight:500; color:var(--brass-lite);
}
.panel__name{
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.3vw,36px);
  letter-spacing:-.02em; line-height:1;
}
.panel__tag{ margin-top:7px; font-size:12.5px; color:rgba(244,240,232,.52); }
.panel__go{
  flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(244,240,232,.3); display:grid; place-items:center;
  opacity:.45; transition:opacity .35s var(--ease),background .35s ease,border-color .35s ease,color .35s ease;
}
.panel__go svg{ width:16px; height:16px; }

@media (hover:hover){
  .doors__row:hover .panel{ flex-grow:.92; filter:saturate(.82) brightness(.82); }
  .doors__row:hover .panel:hover{ flex-grow:1.16; filter:none; }
  .panel:hover .panel__shade{ opacity:.55; }
  .panel:hover .panel__go{ opacity:1; background:var(--paper); color:var(--ink); border-color:var(--paper); }
  .panel:hover .panel__stage .door{ transform:translateY(-8px); }
}
.doors.is-leaving .panel{ opacity:0; transform:translateY(18px) scale(.97); }
.doors.is-leaving .panel.is-chosen{ opacity:0; transform:none; transition:opacity .18s ease .12s; }


/* Los paneles y las tarjetas se montan con <span> dentro de <button> */
.panel__name,.panel__tag,.card__finish,.panel__meta > span{ display:block; }
.panel__go{ display:grid; }

/* ---------- 5. Puerta ---------- */
.door{
  position:relative; background:var(--jamb);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.door__void{
  position:absolute; inset:11px;
  background:
    radial-gradient(120% 70% at 50% 100%,rgba(255,232,196,.85) 0%,rgba(196,152,96,.34) 34%,transparent 68%),
    #0A0806;
}
.door__leaf{
  position:absolute; inset:11px; transform-origin:9% 50%;
  backface-visibility:hidden; will-change:transform;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
}
.door__leaf > svg,.door__leaf > img{ width:100%; height:100%; object-fit:cover; }
.door__jamb{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:
    inset 0 0 0 11px var(--jamb),
    inset 0 0 0 12px rgba(0,0,0,.22),
    inset 13px 0 14px -13px rgba(0,0,0,.40),
    inset -13px 0 14px -13px rgba(0,0,0,.28),
    inset 0 16px 16px -15px rgba(0,0,0,.45);
}
.door__jamb::before{
  content:''; position:absolute; inset:0;
  border-left:1px solid var(--jamb-hi); border-top:1px solid var(--jamb-hi);
  border-right:1px solid var(--jamb-lo); border-bottom:1px solid var(--jamb-lo);
}

/* ---------- 6. Portada: pasos y contacto ---------- */
.strip{
  background:var(--paper); color:var(--ink);
  padding:clamp(64px,10vh,132px) var(--pad);
}
.strip__lead{ max-width:760px; }
.strip__title{
  margin-top:16px; font-size:clamp(28px,3.6vw,52px); letter-spacing:-.03em; line-height:1.06;
}
.steps{
  list-style:none; margin:clamp(40px,6vh,76px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,60px);
}
.step{ border-top:1px solid var(--line); padding-top:22px; }
.step__n{
  display:block; font-size:11px; letter-spacing:.22em; font-weight:500; color:var(--brass);
}
.step h3{ margin:16px 0 10px; font-size:clamp(19px,1.7vw,25px); letter-spacing:-.02em; }
.step p{ color:#6E655A; font-size:14.5px; max-width:38ch; }

.cta{ background:var(--ink-2); padding:clamp(72px,12vh,150px) var(--pad); }
.cta__inner{ max-width:var(--maxw); margin:0 auto; }
.cta__title{
  margin:16px 0 34px; font-size:clamp(30px,4.4vw,64px); letter-spacing:-.032em;
}
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.foot{
  background:var(--ink); border-top:1px solid var(--line-d);
  padding:clamp(48px,7vh,84px) var(--pad) 34px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  font-size:14px; color:var(--muted-d);
}
.foot__brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:21px; color:var(--paper); margin-bottom:12px; letter-spacing:-.015em; }
.foot__brand img{ width:40px; height:40px; flex:none; object-fit:contain; }
.foot__h{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin-bottom:14px; }
.foot a:hover{ color:var(--paper); }
.foot__bottom{
  grid-column:1/-1; margin-top:clamp(30px,5vh,56px); padding-top:22px;
  border-top:1px solid var(--line-d); font-size:12px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
/* La firma del estudio va pegada al copyright; los enlaces legales, a la derecha. */
.foot__credit{ margin-right:auto; }
.foot__credit a{ color:var(--brass-lite); }
.foot__credit a:hover{ color:var(--paper); }

/* Aparición al hacer scroll */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease),transform .9s var(--ease); }

/* ---------- 7. Catálogo ---------- */
.view--catalog{
  background:var(--paper); color:var(--ink); min-height:100svh;
  padding:clamp(96px,13vh,140px) var(--pad) 0;
}
/* Cabecera del catálogo: textos a la izquierda, foto de la categoría a la derecha */
.cat__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(230px,23vw,330px);
  gap:clamp(28px,4vw,64px); align-items:end;
  padding-bottom:clamp(28px,4vh,46px); border-bottom:1px solid var(--line);
}
.cat__top.is-plain{ grid-template-columns:minmax(0,1fr); }
.cat__cover{
  margin:0; aspect-ratio:3/4; overflow:hidden; border-radius:2px;
  background:linear-gradient(#E7E3DA,#D6CEBE);
}
.cat__top.is-plain .cat__cover{ display:none; }
.cat__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* La de plegables es apaisada: se centra un poco más arriba al recortarla */
.cat__cover img[src*="plegables"]{ object-position:50% 40%; }

.cat__head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,72px);
  align-items:start;
}
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.04em; color:#6E655A;
  transition:color .3s,gap .4s var(--ease); padding:6px 0;
}
.back svg{ width:17px; height:17px; }
.back:hover{ color:var(--ink); gap:14px; }
.cat__titles{ max-width:900px; }
.cat__title{ margin:12px 0 14px; font-size:clamp(34px,5vw,70px); letter-spacing:-.035em; }
.cat__sub{ color:#6E655A; max-width:56ch; font-size:15.5px; }
.chips{
  grid-column:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;
}
.chips:empty{ display:none; }
.chip{
  height:38px; padding:0 18px; border-radius:999px; border:1px solid var(--line);
  font-size:13px; color:#6E655A; transition:all .35s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.grid{
  max-width:var(--maxw); margin:clamp(34px,5vh,60px) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,44px) clamp(16px,2.2vw,38px);
}
.card{ text-align:left; display:block; width:100%; }
.card__stage{
  position:relative; aspect-ratio:5/8; overflow:hidden; border-radius:2px;
  display:grid; place-items:end center;
  --jamb:#C7BDA8; --jamb-hi:#DDD5C5; --jamb-lo:#94886F;
  background:
    radial-gradient(88% 52% at 50% 6%,#FDFBF6 0%,transparent 60%),
    linear-gradient(to bottom,#E7E3DA 0%,#DAD3C4 60%,#CBC2AF 100%);
  transition:background .6s var(--ease);
}
.card__stage::after{ /* rodapié */
  content:''; position:absolute; left:0; right:0; bottom:0; height:5.5%;
  background:linear-gradient(to bottom,#CFC5B2,#BEB3A0);
  box-shadow:0 -1px 0 rgba(0,0,0,.10);
}
.card__stage .door{
  position:relative; z-index:1; height:92%; aspect-ratio:.47; margin-bottom:3.6%;
  transition:transform .8s var(--ease),filter .8s var(--ease);
  filter:drop-shadow(0 24px 26px rgba(56,42,26,.30)) drop-shadow(0 2px 5px rgba(56,42,26,.22));
}
.card__hover{
  position:absolute; z-index:2; inset:auto 0 0 0; padding:18px;
  display:flex; justify-content:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.card__hover span{
  background:var(--ink); color:var(--paper); border-radius:999px;
  padding:9px 20px; font-size:12px; letter-spacing:.06em;
}
.card__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:18px; padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease);
}
.card__name{ font-family:var(--serif); font-size:clamp(19px,1.6vw,26px); font-weight:300; letter-spacing:-.02em; }
.card__ref{ font-size:11.5px; letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; }
.card__finish{ margin-top:9px; font-size:13.5px; color:#6E655A; }
@media (hover:hover){
  .card:hover .card__stage{ background:radial-gradient(88% 52% at 50% 6%,#FFFEFB 0%,transparent 62%),linear-gradient(to bottom,#EFEBE2,#E2DBCC 60%,#D3CAB7); }
  .card:hover .card__stage .door{ transform:translateY(-9px) scale(1.02); filter:drop-shadow(0 34px 38px rgba(56,42,26,.32)) drop-shadow(0 2px 5px rgba(56,42,26,.22)); }
  .card:hover .card__hover{ opacity:1; transform:none; }
  .card:hover .card__meta{ border-bottom-color:var(--ink); }
}
.card.is-hidden{ display:none; }

.cat__foot{
  max-width:var(--maxw); margin:clamp(70px,11vh,140px) auto 0;
  border-top:1px solid var(--line); padding:clamp(46px,7vh,90px) 0 clamp(60px,9vh,110px);
  text-align:center;
}
.cat__foot h3{ font-size:clamp(26px,3.4vw,46px); letter-spacing:-.03em; }
.cat__foot p{ margin:16px auto 30px; max-width:46ch; color:#6E655A; font-size:15px; }
.cat__foot .btn--solid{ background:var(--ink); color:var(--paper); }
.cat__foot .btn--solid:hover{ background:var(--brass); color:#fff; }

/* ---------- 8. Ficha de puerta ---------- */
/* Diálogo centrado: aparece en su sitio, no sube desde abajo. */
.sheet{
  position:fixed; inset:0; z-index:1000; display:none;
  place-items:center; padding:clamp(16px,4vw,56px);
}
.sheet.is-open{ display:grid; }
.sheet__scrim{
  position:absolute; inset:0; background:rgba(12,10,8,.72);
  backdrop-filter:blur(6px); opacity:0; transition:opacity .35s ease;
}
.sheet.is-in .sheet__scrim{ opacity:1; }
.sheet__card{
  position:relative; width:min(960px,100%); max-height:calc(100svh - 32px); overflow:auto;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  background:var(--paper); color:var(--ink); border-radius:6px;
  box-shadow:0 40px 120px rgba(0,0,0,.45);
  opacity:0; transform:scale(.97);
  transition:opacity .28s ease,transform .45s var(--ease);
}
.sheet.is-in .sheet__card{ opacity:1; transform:none; }
.sheet__x{
  position:absolute; top:16px; right:16px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,17,14,.06); transition:background .3s;
}
.sheet__x:hover{ background:rgba(20,17,14,.14); }
.sheet__x svg{ width:18px; height:18px; }
.sheet__img{
  display:grid; place-items:center;
  padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  background:
    radial-gradient(90% 60% at 50% 12%,#FBF8F2 0%,transparent 62%),
    linear-gradient(to bottom,#E7E3DA 0%,#D6CEBE 100%);
  --jamb:#C7BDA8; --jamb-hi:#DDD5C5; --jamb-lo:#94886F;
}
.sheet__img .door{
  height:min(500px,calc(100svh - 190px)); aspect-ratio:.47;
  filter:drop-shadow(0 24px 26px rgba(56,42,26,.28)) drop-shadow(0 2px 5px rgba(56,42,26,.2));
}
.sheet__body{
  padding:clamp(32px,4.4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
.sheet__name{ margin:14px 0 18px; font-size:clamp(34px,3.6vw,52px); letter-spacing:-.032em; }
.sheet__desc{ color:#6E655A; font-size:16px; line-height:1.65; max-width:40ch; }
.sheet__ref{
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
}
.sheet__ref span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.sheet__ref strong{ font-weight:500; font-size:16px; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.sheet__cta{ margin-top:28px; width:100%; background:var(--ink); color:var(--paper); }
.sheet__cta:hover{ background:var(--brass); color:#fff; }

/* ---------- 9. Transición: atravesar la puerta ---------- */
.portal{
  position:fixed; inset:0; z-index:950; display:none;
  perspective:1500px; perspective-origin:50% 46%;
}
.portal.is-on{ display:block; }

.portal__bg{
  position:absolute; inset:0; background:#0A0806; opacity:0;
  transition:opacity .5s ease;
}
.portal.is-dim .portal__bg{ opacity:.93; }
.portal.is-through .portal__bg{ opacity:0; transition:opacity .8s ease .12s; }
.portal.is-wipe .portal__bg{ opacity:1; transition:opacity .34s ease; }
.portal.is-wipe.is-unwipe .portal__bg{ opacity:0; transition:opacity .5s ease; }

.portal__scene{
  position:absolute; transform-style:preserve-3d;
  transition:left .6s var(--ease-io),top .6s var(--ease-io),
             width .6s var(--ease-io),height .6s var(--ease-io),
             transform .92s cubic-bezier(.44,0,.76,.36);
  will-change:left,top,width,height,transform;
}
.portal .door{
  /* sin fondo propio: el marco lo pinta .door__jamb, así al atravesarla
     no queda un panel opaco tapando el catálogo */
  width:100%; height:100%; background:none; transform-style:preserve-3d;
  /* mismo marco que el hero, para que el paso sea continuo */
  --jamb:#392F26; --jamb-hi:#544738; --jamb-lo:#171310;
}

/* Lo que hay al otro lado: una habitación con suelo, paredes y luz cálida.
   El corte del 68% hace de línea donde el suelo se encuentra con la pared. */
.portal .door__void{
  background:
    linear-gradient(to right,rgba(18,12,7,.88) 0%,rgba(18,12,7,.30) 20%,rgba(18,12,7,0) 42%),
    linear-gradient(to left,rgba(18,12,7,.66) 0%,rgba(18,12,7,0) 30%),
    linear-gradient(to bottom,rgba(14,9,5,.92) 0%,rgba(14,9,5,.28) 13%,rgba(14,9,5,0) 26%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 67.4%,rgba(255,236,206,.30) 68%,
      rgba(146,104,62,.62) 70%,rgba(74,49,27,.86) 84%,rgba(38,25,14,.95) 100%),
    radial-gradient(50% 34% at 57% 50%,
      rgba(255,248,232,1) 0%,rgba(244,214,170,.96) 24%,
      rgba(168,124,80,.72) 56%,rgba(58,38,22,.92) 88%,#0B0907 100%);
  opacity:0; transition:opacity .7s ease .1s;
}
.portal.is-swinging .door__void{ opacity:1; }
.portal.is-through .door__void{ opacity:0; transition:opacity .52s ease; }
.portal.is-through .door__jamb{ opacity:0; transition:opacity .42s ease .3s; }
.portal.is-through .door__leaf{ transform:rotateY(-80deg); opacity:0; transition:transform .8s ease,opacity .5s ease .18s; }

.portal .door__leaf{
  transform-origin:6% 50%; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:transform .95s cubic-bezier(.32,.66,.26,1),box-shadow .95s ease;
}
.portal.is-swinging .door__leaf{
  transform:rotateY(-74deg); box-shadow:44px 26px 100px rgba(0,0,0,.62);
}
/* Entras: el marco te pasa de largo y quedas dentro. */
.portal.is-through .portal__scene{ transform:translateZ(1040px); }

/* ---------- 10. Responsive ---------- */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}

/* Tableta y móvil: las seis puertas se apilan una debajo de otra,
   cada una con su ficha justo abajo. */
@media (max-width:900px){
  .foot{ grid-template-columns:repeat(2,1fr); gap:28px 24px; }
  .steps{ grid-template-columns:1fr; gap:0; }
  .step{ padding:22px 0; border-top:1px solid var(--line); }
  .step p{ max-width:52ch; }
  .cat__top{ grid-template-columns:1fr; gap:26px; }
  .cat__cover{ aspect-ratio:4/3; }
  .cat__head{ grid-template-columns:1fr; gap:18px; }
  .chips{ grid-column:1; margin-top:6px; }
  .nav__links{ display:none; }

  .hero__head{ grid-template-columns:1fr; padding:104px var(--pad) 0; }
  .hero__title{ margin-top:14px; font-size:clamp(38px,5.2vw,74px); }
  .hero__sub{ margin-top:18px; max-width:44ch; }
  .readout{ display:none; }
  .doors{ padding:34px var(--pad) 0; gap:10px; }
  .doors__row{ display:contents; }
  .panel{ flex:0 0 auto; display:grid; grid-template-rows:auto auto; min-height:0; cursor:pointer; }
  .panel__stage{ position:relative; inset:auto; height:40svh; min-height:278px; }
  .panel__stage .door{ height:90%; margin-bottom:8%; }
  .panel__shade{ background:linear-gradient(to top,rgba(8,6,5,.5),transparent 40%); }
  .panel__meta{ position:relative; padding:20px 22px 26px; }
  .panel__tag,.panel__go{ opacity:1; transform:none; }
}
@media (max-width:760px){
  .grid{ grid-template-columns:1fr; gap:34px; }
  .card__stage{ aspect-ratio:3/4; }
  .sheet{ padding:12px; }
  .sheet__card{ grid-template-columns:1fr; }
  .sheet__img{ padding:28px 20px; }
  .sheet__img .door{ height:min(300px,40svh); }
  .sheet__body{ padding:26px 22px 30px; }
}
@media (max-width:520px){
  .foot{ grid-template-columns:1fr; }
  .nav__tel span.dot{ display:none; }
}

/* ---------- 11. Páginas: legales y blog ---------- */
body.page{ background:var(--paper); color:var(--ink); }
.page__main{ padding:clamp(104px,14vh,150px) var(--pad) clamp(72px,11vh,130px); }

.page-head{
  max-width:var(--maxw); margin:0 auto;
  padding-bottom:clamp(28px,4vh,44px); border-bottom:1px solid var(--line);
}
.page-title{ margin:14px 0 0; font-size:clamp(38px,5.2vw,74px); letter-spacing:-.035em; text-wrap:balance; }
.page-title em{ color:var(--brass); }
.page-lead{ margin-top:18px; max-width:58ch; color:#6E655A; font-size:clamp(15px,1.25vw,18px); text-wrap:pretty; }
.page-meta{ margin-top:14px; font-size:13px; color:var(--muted); }

/* Legales: pestañas entre documentos */
.legal-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.legal-tabs a{
  display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); font-size:13px; color:#6E655A;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.legal-tabs a:hover{ border-color:var(--ink); color:var(--ink); }
.legal-tabs a[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* Legales: índice fijo a la izquierda y texto a la derecha */
.doc{
  max-width:var(--maxw); margin:clamp(36px,6vh,64px) auto 0;
  display:grid; grid-template-columns:minmax(190px,250px) minmax(0,1fr);
  gap:clamp(32px,6vw,110px); align-items:start;
}
/* Sin esto, una tabla ancha ensancha la columna y la página entera se sale en móvil:
   la tabla tiene que desplazarse dentro de su .table-wrap. */
.doc > *{ min-width:0; }
.doc__toc{ position:sticky; top:96px; }
.doc__toc-h{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.doc__toc ol{ list-style:none; margin:14px 0 0; padding:0; border-left:1px solid var(--line); counter-reset:toc; }
.doc__toc li{ counter-increment:toc; }
.doc__toc a{
  display:flex; gap:10px; padding:7px 0 7px 16px; margin-left:-1px;
  border-left:1px solid transparent; font-size:13.5px; line-height:1.35; color:#6E655A;
  transition:color .3s,border-color .3s;
}
.doc__toc a::before{
  content:counter(toc,decimal-leading-zero); flex:none; padding-top:1px;
  font-size:10.5px; letter-spacing:.08em; color:var(--muted); font-variant-numeric:tabular-nums;
}
.doc__toc a:hover{ color:var(--ink); border-left-color:var(--ink); }

/* Texto largo: legales y artículos */
.prose{ max-width:70ch; font-size:16.5px; line-height:1.72; color:#3D362E; }
.prose section + section{ margin-top:52px; }
.prose h2{
  margin:52px 0 16px; font-size:clamp(24px,2.2vw,31px); line-height:1.15;
  letter-spacing:-.025em; color:var(--ink); text-wrap:balance; scroll-margin-top:100px;
}
.prose section > h2:first-child,.prose > h2:first-child{ margin-top:0; }
.prose h3{ margin:28px 0 8px; font-family:var(--sans); font-weight:600; font-size:1em; letter-spacing:0; color:var(--ink); }
.prose p{ margin:0 0 16px; text-wrap:pretty; }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:1.25em; }
.prose li{ margin:7px 0; padding-left:.2em; }
.prose li::marker{ color:var(--brass); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--brass-lite); transition:text-decoration-color .3s;
}
.prose a:hover{ text-decoration-color:var(--ink); }
.facts{ margin:6px 0 22px; border-top:1px solid var(--line); }
.facts div{ display:grid; grid-template-columns:minmax(130px,190px) 1fr; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.facts dt{ padding-top:3px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.facts dd{ margin:0; color:var(--ink); }
.note{ margin:4px 0 20px; padding:18px 22px; background:#EAE3D5; border-left:2px solid var(--brass); }
.table-wrap{ overflow-x:auto; margin:8px 0 22px; }
.prose table{ width:100%; min-width:520px; border-collapse:collapse; font-size:14.5px; line-height:1.55; }
.prose th{
  padding:10px 16px 10px 0; text-align:left; font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--ink);
}
.prose td{ padding:12px 16px 12px 0; vertical-align:top; border-bottom:1px solid var(--line); }
.prose td:first-child{ color:var(--ink); }

/* Blog: portadas dibujadas, como las tarjetas del catálogo */
.cover{
  position:relative; overflow:hidden; border-radius:2px;
  display:flex; align-items:flex-end; justify-content:center; gap:8%;
  background:
    radial-gradient(88% 52% at 50% 6%,#FDFBF6 0%,transparent 60%),
    linear-gradient(to bottom,#E7E3DA 0%,#DAD3C4 60%,#CBC2AF 100%);
  --jamb:#C7BDA8; --jamb-hi:#DDD5C5; --jamb-lo:#94886F;
}
.cover::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:6%;
  background:linear-gradient(to bottom,#CFC5B2,#BEB3A0); box-shadow:0 -1px 0 rgba(0,0,0,.10);
}
.cover .door{
  position:relative; z-index:1; height:82%; aspect-ratio:.47; margin-bottom:4.6%;
  filter:drop-shadow(0 22px 24px rgba(56,42,26,.28)) drop-shadow(0 2px 5px rgba(56,42,26,.2));
  transition:transform .8s var(--ease);
}

.posts{
  max-width:var(--maxw); margin:clamp(36px,6vh,64px) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,56px) clamp(16px,2.2vw,38px);
}
.post-card{ display:block; }
.post-card .cover{ aspect-ratio:4/3; }
.post-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:18px;
  font-size:12.5px; color:var(--muted);
}
.post-card__cat{ font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.post-card__title{
  display:block; margin-top:10px; font-family:var(--serif); font-weight:300;
  font-size:clamp(22px,1.9vw,28px); line-height:1.14; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
}
.post-card__excerpt{ display:block; margin-top:10px; font-size:15px; line-height:1.6; color:#6E655A; text-wrap:pretty; }
.post-card__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding-bottom:3px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--line); transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.post-card__more svg{ width:14px; height:14px; }
@media (hover:hover){
  .post-card:hover .cover .door{ transform:translateY(-8px); }
  .post-card:hover .post-card__more{ border-color:var(--ink); gap:12px; }
}

/* Artículo */
.post-head{ max-width:1080px; margin:0 auto; }
.post-crumbs{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.post-crumbs a{ color:#6E655A; transition:color .3s; }
.post-crumbs a:hover{ color:var(--ink); }
.post-head .page-title{ max-width:20ch; font-size:clamp(36px,4.6vw,64px); }
.post-meta{ margin-top:18px; font-size:13px; color:var(--muted); }
.post-cover{ max-width:1080px; margin:clamp(30px,5vh,52px) auto 0; aspect-ratio:2/1; }
.post-body{ max-width:1080px; margin:clamp(40px,7vh,76px) auto 0; }
.post-body .prose{ margin:0 auto; max-width:68ch; font-size:17.5px; }
.post-cta{
  max-width:68ch; margin:60px auto 0; padding:clamp(26px,3.6vw,42px);
  background:var(--ink); color:var(--paper); border-radius:4px;
}
.post-cta h2{ margin:10px 0; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.025em; text-wrap:balance; }
.post-cta p{ max-width:50ch; color:var(--muted-d); }
.post-cta .cta__actions{ margin-top:24px; }
.related{
  max-width:var(--maxw); margin:clamp(72px,11vh,124px) auto 0;
  padding-top:clamp(34px,5vh,52px); border-top:1px solid var(--line);
}
.related__h{ font-size:clamp(26px,3vw,40px); letter-spacing:-.03em; }
.related .posts{ margin-top:clamp(24px,4vh,40px); grid-template-columns:repeat(2,1fr); }

@media (max-width:1180px){
  .posts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .doc{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .doc__toc{ position:static; }
  .facts div{ grid-template-columns:1fr; gap:4px; }
}
@media (max-width:760px){
  .page__main{ padding-top:100px; }
  .posts,.related .posts{ grid-template-columns:1fr; }
  .post-cover{ aspect-ratio:4/3; }
  .post-body .prose{ font-size:16.5px; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 12. Catálogo desde Supabase: fotos y estados ---------- */

/* Fotos reales del catálogo: llenan la tarjeta y se recortan para que todas
   tengan la misma forma, vengan como vengan (verticales, cuadradas o de
   ambiente). Nada de multiply: estas fotos traen fondo propio. */
.card__stage .photo{
  position:absolute; z-index:1; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  transition:transform .9s var(--ease);
}
@media (hover:hover){ .card:hover .card__stage .photo{ transform:scale(1.035); } }
/* En la ficha sí se ve la foto entera, sin recortar. */
.sheet__img .photo{
  display:block; width:100%; height:min(520px,calc(100svh - 190px));
  object-fit:contain;
}
.sheet__ref[hidden],.sheet__desc:empty,.cat__sub:empty{ display:none; }

/* Mientras llegan los datos */
@keyframes ghostPulse{ 50%{ opacity:.45; } }
body.is-booting .view{ visibility:hidden; }
.panel--ghost{ flex:1 1 0; cursor:default; }
.panel--ghost::after{
  content:''; position:absolute; left:50%; bottom:13%; transform:translateX(-50%);
  width:min(34%,250px); height:62%;
  border:1px solid rgba(244,240,232,.08); background:rgba(244,240,232,.025);
  animation:ghostPulse 1.6s ease-in-out infinite;
}
.card--ghost{ pointer-events:none; }
.card--ghost .card__stage{ animation:ghostPulse 1.6s ease-in-out infinite; }
.ghost-line{
  display:block; width:62%; height:12px; margin-top:18px; border-radius:2px;
  background:var(--line); animation:ghostPulse 1.6s ease-in-out infinite;
}
.ghost-line--short{ width:34%; margin-top:10px; }

/* Sin fotos o con error */
.state{ grid-column:1/-1; padding:clamp(40px,8vh,96px) 0; text-align:center; }
.state__h{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.6vw,34px); letter-spacing:-.02em; color:var(--ink); }
.state p:not(.state__h){ margin:12px auto 26px; max-width:46ch; color:#6E655A; }
.state .cta__actions{ justify-content:center; }
.state .btn--solid{ background:var(--ink); color:var(--paper); }
.state .btn--solid:hover{ background:var(--brass); color:#fff; }
.btn--line{ border:1px solid var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); }
.doors__state{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; text-align:center; color:var(--muted-d);
  border:1px solid var(--line-d); border-radius:3px;
}
.doors__state-h{ margin-bottom:10px; font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.2vw,30px); color:var(--paper); }
.doors__state .cta__actions{ margin-top:24px; justify-content:center; }

@media (max-width:900px){
  .panel--ghost{ min-height:40svh; }
  .doors__state{ min-height:40svh; }
}

/* Menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.15s!important; }
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .portal.is-swinging .door__leaf{ transform:none; }
  .portal.is-through .portal__scene{ transform:none; }
}

/* ---------- 13. Aviso de cookies ----------
   Discreto, abajo a la izquierda, por debajo de la transición de las
   puertas. Solo se pinta si hay algo que consentir (ver cookies.js). */
.cookies{
  position:fixed; z-index:940; left:clamp(12px,2vw,26px); bottom:clamp(12px,2vw,26px);
  width:min(392px, calc(100vw - 24px));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:3px;
  box-shadow:0 18px 44px rgba(20,17,14,.22);
  padding:18px 20px 16px;
  opacity:0; transform:translateY(14px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.cookies.is-on{ opacity:1; transform:none; }
.cookies__txt{ font-size:13.5px; line-height:1.55; color:var(--ink); margin:0 0 14px; }
.cookies__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.cookies__btn{
  font:500 13px/1 var(--sans); color:var(--ink);
  padding:10px 20px; border:1px solid var(--ink); border-radius:999px;
  background:transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.cookies__btn:hover{ background:var(--ink); color:var(--paper); }
.cookies__btn--si{ background:var(--ink); color:var(--paper); }
.cookies__btn--si:hover{ background:var(--ink-3); }
.cookies__link{ font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.cookies__link:hover{ color:var(--ink); }

/* Un botón que parece un enlace, para «cambiar mis preferencias». */
.linkish{
  font:inherit; color:var(--brass); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.linkish:hover{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .cookies{ transition:opacity .2s linear; transform:none; }
}

/* ---------- 14. Modo claro (por defecto) ----------
   <html> arranca con data-modo="claro"; el botón del sol/luna (nav) lo quita
   o lo pone y recuerda la elección (ver modo.js). La portada, el vestíbulo, el contacto y el pie pasan a papel;
   las puertas quedan en una estancia clara, como las tarjetas del catálogo. */
.modo{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-d); opacity:.8;
  transition:opacity .3s,border-color .3s var(--ease),transform .5s var(--ease);
}
.modo:hover{ opacity:1; border-color:currentColor; }
.modo svg{ width:17px; height:17px; }
.modo__sol{ display:none; }
.nav__right{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); }
body[data-theme="light"] .modo{ border-color:var(--line); }

html[data-modo="claro"]{ color-scheme:light; }
html[data-modo="claro"] .modo__sol{ display:block; }
html[data-modo="claro"] .modo__luna{ display:none; }
html[data-modo="claro"] .modo{ border-color:var(--line); }

html[data-modo="claro"] body{ background:var(--paper); color:var(--ink); }
html[data-modo="claro"] .grain{ opacity:.035; }
html[data-modo="claro"] .eyebrow{ color:#7A7064; }
html[data-modo="claro"] :focus-visible{ outline-color:var(--brass); }

/* Navegación */
html[data-modo="claro"] .nav{ color:var(--ink); }
html[data-modo="claro"] .nav.is-solid{ background:rgba(244,240,232,.84); border-bottom-color:var(--line); }
html[data-modo="claro"] .dot{ background:var(--brass); }

/* Botones sobre papel */
html[data-modo="claro"] .btn--solid{ background:var(--ink); color:var(--paper); }
html[data-modo="claro"] .btn--solid:hover{ background:var(--brass); color:#fff; }
html[data-modo="claro"] .btn--ghost{ border-color:rgba(20,17,14,.28); color:var(--ink); }
html[data-modo="claro"] .btn--ghost:hover{ border-color:var(--ink); }

/* Portada y vestíbulo */
html[data-modo="claro"] .hero,
html[data-modo="claro"] .view--hall{ background:var(--paper); }
html[data-modo="claro"] .hero__title em{ color:var(--brass); }
html[data-modo="claro"] .hero__sub{ color:#5E564B; }
html[data-modo="claro"] .readout{ border-left-color:var(--line); }
html[data-modo="claro"] .readout__n{ color:var(--brass); }
html[data-modo="claro"] .readout__tag{ color:#6E655A; }
html[data-modo="claro"] .readout__cta{ color:var(--ink); }
html[data-modo="claro"] .crumbs .eyebrow{ border-left-color:var(--line); }
html[data-modo="claro"] .back--dark{ color:#6E655A; }
html[data-modo="claro"] .back--dark:hover{ color:var(--ink); }
html[data-modo="claro"] .head__photo{ opacity:.9; }
html[data-modo="claro"] .view--hall .hero__head::after{
  background:
    linear-gradient(to bottom,transparent 52%,rgba(244,240,232,.75) 82%,var(--paper) 100%),
    linear-gradient(100deg,rgba(244,240,232,.97) 0%,rgba(244,240,232,.86) 34%,rgba(244,240,232,.36) 64%,rgba(244,240,232,.08) 100%);
}

/* Las puertas: pared clara, luz de mañana y suelo de madera clara */
html[data-modo="claro"] .panel{
  background:linear-gradient(#EDE8DF 0%,#E2DBCE 58%,#D8D0C0 100%);
}
html[data-modo="claro"] .panel__stage,
html[data-modo="claro"] .portal .door{ --jamb:#CFC5B2; --jamb-hi:#E6DFD2; --jamb-lo:#9E927C; }
html[data-modo="claro"] .panel__stage::before{
  background:radial-gradient(62% 42% at 50% 4%,rgba(255,255,255,.75) 0%,transparent 68%);
}
html[data-modo="claro"] .panel__stage .door{
  filter:drop-shadow(0 26px 30px rgba(56,42,26,.30)) drop-shadow(0 2px 5px rgba(56,42,26,.22));
}
html[data-modo="claro"] .panel__floor{
  background:linear-gradient(#D3C9B6 0%,#C6BAA4 55%,#B9AC94 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.08);
}
html[data-modo="claro"] .panel__shade{
  background:linear-gradient(to top,rgba(244,240,232,.9) 0%,rgba(244,240,232,.55) 12%,rgba(244,240,232,0) 22%);
}
html[data-modo="claro"] .panel__meta{ color:var(--ink); }
html[data-modo="claro"] .panel__n{ color:var(--brass); }
html[data-modo="claro"] .panel__tag{ color:#6E655A; }
html[data-modo="claro"] .panel__go{ border-color:rgba(20,17,14,.3); opacity:.6; }
@media (hover:hover){
  html[data-modo="claro"] .doors__row:hover .panel{ filter:saturate(.85) brightness(.94); }
  html[data-modo="claro"] .doors__row:hover .panel:hover{ filter:none; }
  html[data-modo="claro"] .panel:hover .panel__go{ background:var(--ink); color:var(--paper); border-color:var(--ink); opacity:1; }
}
html[data-modo="claro"] .panel--ghost::after{ border-color:rgba(20,17,14,.10); background:rgba(20,17,14,.03); }
html[data-modo="claro"] .doors__state{ color:#6E655A; border-color:var(--line); }
html[data-modo="claro"] .doors__state-h{ color:var(--ink); }

/* "Cómo trabajamos" se separa del hero con un tono algo más hondo */
html[data-modo="claro"] .strip{ background:var(--paper-2); }
html[data-modo="claro"] .step{ border-top-color:rgba(20,17,14,.18); }

/* Contacto y pie */
html[data-modo="claro"] .cta{ background:#EFE9DE; border-top:1px solid var(--line); }
html[data-modo="claro"] .foot{ background:var(--paper); border-top-color:var(--line); color:#6E655A; }
html[data-modo="claro"] .foot__brand{ color:var(--ink); }
html[data-modo="claro"] .foot__h{ color:#8B8175; }
html[data-modo="claro"] .foot a:hover{ color:var(--ink); }
html[data-modo="claro"] .foot__bottom{ border-top-color:var(--line); color:#8B8175; }
html[data-modo="claro"] .foot__credit a{ color:var(--brass); }
html[data-modo="claro"] .foot__credit a:hover{ color:var(--ink); }

/* Transición: se atenúa hacia papel, no hacia negro */
html[data-modo="claro"] .portal__bg{ background:var(--paper); }

@media (max-width:900px){
  html[data-modo="claro"] .panel__shade{ background:linear-gradient(to top,rgba(244,240,232,.6),transparent 40%); }
}
/* Barra de arriba: el nombre y el teléfono nunca se parten en dos líneas.
   Con el botón del modo, los ocho enlaces solo caben holgados desde 1181px;
   por debajo se ocultan (en la portada las propias puertas hacen de menú). */
.nav__name,.nav__tel{ white-space:nowrap; }
.nav__brand{ min-width:0; }
.nav__tel-ico{ display:none; }
@media (max-width:1180px){
  .nav__links{ display:none; }
}
@media (max-width:520px){
  .modo{ width:34px; height:34px; }
  .nav{ gap:12px; }
  .nav__right{ gap:10px; }
  .nav__mark{ width:40px; height:40px; }
  .nav__name{ font-size:21px; }
  .nav__tel{ font-size:13px; }
}
/* Móviles estrechos: el teléfono pasa a ser un botón redondo con icono,
   igual que el del modo, para que no choque con el nombre. */
@media (max-width:400px){
  .nav__num,.nav__tel .dot{ display:none; }
  .nav__tel-ico{ display:block; width:16px; height:16px; }
  .nav__tel{
    width:34px; height:34px; border-radius:50%; justify-content:center; gap:0;
    border:1px solid var(--line-d);
  }
  html[data-modo="claro"] .nav__tel,body[data-theme="light"] .nav__tel{ border-color:var(--line); }
}
@media (max-width:340px){
  .nav__name{ font-size:19px; }
  .nav__mark{ width:36px; height:36px; }
}

/* ---------- 15. Catálogo y ficha en modo oscuro ----------
   El catálogo nació claro. En modo oscuro (sin data-modo="claro") pasa a
   tinta, igual que la portada, para que el modo elegido se mantenga al
   entrar en una categoría y al abrir la ficha de una puerta. */
html:not([data-modo="claro"]) body[data-theme="light"] .nav{ color:var(--paper); }
html:not([data-modo="claro"]) body[data-theme="light"] .nav.is-solid{ background:rgba(20,17,14,.72); border-bottom-color:var(--line-d); }
html:not([data-modo="claro"]) body[data-theme="light"] .modo{ border-color:var(--line-d); }
html:not([data-modo="claro"]) .view--catalog{ background:var(--ink); color:var(--paper); }
html:not([data-modo="claro"]) .cat__top{ border-bottom-color:var(--line-d); }
html:not([data-modo="claro"]) .cat__cover{ background:linear-gradient(#221D17,#15120F); }
html:not([data-modo="claro"]) .back,
html:not([data-modo="claro"]) .cat__sub,
html:not([data-modo="claro"]) .card__finish,
html:not([data-modo="claro"]) .cat__foot p,
html:not([data-modo="claro"]) .state p:not(.state__h){ color:#B4AB9E; }
html:not([data-modo="claro"]) .back:hover{ color:var(--paper); }
html:not([data-modo="claro"]) .chip{ border-color:var(--line-d); color:#B4AB9E; }
html:not([data-modo="claro"]) .chip:hover{ border-color:var(--paper); color:var(--paper); }
html:not([data-modo="claro"]) .chip.is-on{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
html:not([data-modo="claro"]) .card__stage{
  --jamb:#392F26; --jamb-hi:#544738; --jamb-lo:#171310;
  background:radial-gradient(88% 52% at 50% 6%,rgba(255,226,186,.12) 0%,transparent 60%),linear-gradient(#1E1A15,#14110E);
}
html:not([data-modo="claro"]) .card__stage::after{ background:linear-gradient(#221C16,#171310); box-shadow:0 -1px 0 rgba(244,240,232,.06); }
html:not([data-modo="claro"]) .card__hover span{ background:var(--paper); color:var(--ink); }
@media (hover:hover){
  html:not([data-modo="claro"]) .card:hover .card__stage{ background:radial-gradient(88% 52% at 50% 6%,rgba(255,226,186,.18) 0%,transparent 62%),linear-gradient(#241F19,#17130F); }
  html:not([data-modo="claro"]) .card:hover .card__meta{ border-bottom-color:var(--paper); }
}
html:not([data-modo="claro"]) .cat__foot{ border-top-color:var(--line-d); }
html:not([data-modo="claro"]) .cat__foot .btn--solid,
html:not([data-modo="claro"]) .state .btn--solid{ background:var(--paper); color:var(--ink); }
html:not([data-modo="claro"]) .cat__foot .btn--solid:hover,
html:not([data-modo="claro"]) .state .btn--solid:hover{ background:var(--brass-lite); color:#231A10; }
html:not([data-modo="claro"]) .state__h{ color:var(--paper); }
html:not([data-modo="claro"]) .btn--line{ border-color:var(--paper); color:var(--paper); }
html:not([data-modo="claro"]) .btn--line:hover{ background:var(--paper); color:var(--ink); }
html:not([data-modo="claro"]) .ghost-line{ background:var(--line-d); }

html:not([data-modo="claro"]) .sheet__card{ background:var(--ink-2); color:var(--paper); box-shadow:0 40px 120px rgba(0,0,0,.7); }
html:not([data-modo="claro"]) .sheet__x{ background:rgba(244,240,232,.08); }
html:not([data-modo="claro"]) .sheet__x:hover{ background:rgba(244,240,232,.16); }
html:not([data-modo="claro"]) .sheet__img{
  --jamb:#392F26; --jamb-hi:#544738; --jamb-lo:#171310;
  background:radial-gradient(90% 60% at 50% 12%,rgba(255,226,186,.10) 0%,transparent 62%),linear-gradient(#1A1612,#100D0B);
}
html:not([data-modo="claro"]) .sheet__desc{ color:#B4AB9E; }
html:not([data-modo="claro"]) .sheet__ref{ border-top-color:var(--line-d); }
html:not([data-modo="claro"]) .sheet__cta{ background:var(--paper); color:var(--ink); }
html:not([data-modo="claro"]) .sheet__cta:hover{ background:var(--brass-lite); color:#231A10; }

/* ---------- 16. Fotos del catálogo sin recortar ----------
   Todas las tarjetas con foto tienen el mismo marco 3:4 y la foto se ve
   entera dentro (sin recortar), así la rejilla queda uniforme. Las puertas
   dibujadas (sin foto o si falla la carga) mantienen su marco 5:8. */
.grid{ align-items:start; }
.card__stage:has(> .photo){ aspect-ratio:3/4; display:block; background:linear-gradient(#E7E3DA,#D6CEBE); }
.card__stage:has(> .photo)::after{ display:none; }
.card__stage > .photo{ position:static; display:block; width:100%; height:100%; object-fit:contain; object-position:50% 50%; }

/* ---------- 17. Fotos de tipos y categorías (CRM) ----------
   Con foto subida, el panel la enseña en un marco 3:4 igual para todas
   (recortada al centro), en el sitio donde iría la puerta dibujada. */
.panel__photo{
  position:relative; z-index:1; display:block;
  height:calc(100% - 126px); aspect-ratio:3/4; width:auto; max-width:calc(100% - 40px);
  margin-bottom:96px; object-fit:cover; object-position:50% 50%;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
  transition:transform .9s var(--ease);
}
html[data-modo="claro"] .panel__photo{
  filter:drop-shadow(0 26px 30px rgba(56,42,26,.30)) drop-shadow(0 2px 5px rgba(56,42,26,.22));
}
@media (hover:hover){ .panel:hover .panel__photo{ transform:translateY(-8px); } }
@media (max-width:900px){
  .panel__photo{ height:90%; margin-bottom:8%; }
}

/* Foto de cabecera del catálogo: entera, con su proporción, sin recortar. */
.cat__cover{ aspect-ratio:auto; background:none; }
.cat__cover img{ height:auto; object-fit:initial; }
@media (max-width:900px){
  .cat__cover img{ width:auto; max-width:100%; max-height:60svh; }
}

/* ---------- 18. Rótulo de cada puerta ----------
   Número, nombre y frase van centrados como un bloque bajo la puerta (antes
   el <button> centraba cada línea por su cuenta y quedaban escalonadas). La
   flecha va aparte, a la derecha, y el texto deja su hueco a los dos lados
   para seguir centrado respecto a la puerta. En escritorio el «01 — Tipo»
   se quita: pisaba el pie de las fotos. */
.panel__meta{ justify-content:center; text-align:center; }
.panel__meta > span:first-child{ flex:1; min-width:0; padding:0 58px; }
.panel__go{ position:absolute; right:clamp(18px,2vw,32px); bottom:clamp(18px,2vw,32px); }
@media (min-width:901px){
  .panel__n{ display:none; }
}
@media (max-width:900px){
  .panel__go{ right:22px; bottom:26px; }
}

/* La flecha, centrada en su círculo. `.panel__meta > span` (que pone los
   rótulos en bloque) pesaba más que `.panel__go` y la dejaba arriba. */
.panel__meta > .panel__go{ display:grid; place-items:center; }

/* ---------- 16. Reseñas de Google (prueba social) ---------- */

.estrellas{ display:inline-flex; gap:2px; vertical-align:-.18em; }

/* La banda de la portada, entre las puertas y «Cómo trabajamos». */
.social{
  background:var(--paper-2); color:var(--ink);
  padding:clamp(26px,3.4vh,40px) var(--pad);
  border-bottom:1px solid var(--line);
}
.social__in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(22px,3.4vw,54px);
}
.social__score{ display:flex; align-items:center; gap:14px; }
.social__num{
  font-family:var(--serif); font-size:clamp(34px,4vw,50px); line-height:1;
  letter-spacing:-.03em; color:var(--ink);
}
.social__meta{ margin-top:5px; font-size:12.5px; color:var(--muted); }
.social__claim{ flex:1 1 260px; font-size:14px; line-height:1.5; color:var(--ink); max-width:420px; }
.social__link{
  display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  font-size:13.5px; color:var(--brass); border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.social__link svg{ width:17px; height:17px; transition:transform .3s var(--ease); }
.social__link:hover{ color:var(--ink); border-color:var(--line); }
.social__link:hover svg{ transform:translateX(4px); }

/* Reseñas destacadas: solo salen si se han pegado reseñas reales. */
.social__cards{
  max-width:var(--maxw); margin:clamp(20px,2.6vh,30px) auto 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(12px,1.4vw,20px);
}
.social__card{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:18px 20px;
}
.social__card blockquote{ margin:10px 0 12px; font-size:14px; line-height:1.6; color:var(--ink); }
.social__card figcaption{ font-size:12.5px; color:var(--muted); }

/* La línea corta, al lado de las llamadas a la acción. */
.resenas-linea{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted);
}
.resenas-linea strong{ color:inherit; font-weight:600; }
.resenas-linea:hover{ color:var(--ink); }

/* En modo oscuro, donde el fondo es tinta, el dorado claro se ve mejor.
   La banda de la portada es de papel en los dos modos, así que no entra aquí. */
/* La tarjeta del blog es oscura en los dos modos. */
.post-cta .resenas-linea{ color:var(--muted-d); --estrella:var(--brass-lite); --estrella-off:rgba(199,155,98,.26); }
.post-cta .resenas-linea:hover{ color:var(--paper); }

html:not([data-modo="claro"]) .cta .resenas-linea,
html:not([data-modo="claro"]) .cat__social .resenas-linea,
html:not([data-modo="claro"]) .sheet__social .resenas-linea{
  color:var(--muted-d); --estrella:var(--brass-lite); --estrella-off:rgba(199,155,98,.26);
}
html:not([data-modo="claro"]) .cta .resenas-linea:hover,
html:not([data-modo="claro"]) .cat__social .resenas-linea:hover,
html:not([data-modo="claro"]) .sheet__social .resenas-linea:hover{ color:var(--paper); }

/* Huecos de la línea corta según dónde se meta. */
.cta__social{ margin:0 0 22px; }
.post-cta .cta__social{ margin:6px 0 18px; }
.cat__social{ margin-top:14px; }
.sheet__social{ margin-top:16px; }

@media (max-width:720px){
  .social__link{ margin-left:0; }
  .social__claim{ order:3; }
}