/* ============================================================
   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:34px; height:34px; flex:none; }
.nav__mark svg,.nav__mark img{ width:100%; height:100%; object-fit:contain; }
.nav__name{ font-family:var(--serif); font-size:19px; 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{ font-family:var(--serif); font-size:21px; color:var(--paper); margin-bottom:12px; letter-spacing:-.015em; }
.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; }

/* 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; }
}