/* Akuéro y Relojes · demo BTC
   Arquetipo 5 (recorrido guiado) · Ritmo R4 (editorial asimétrico)
   Héroe H7 cortina · Efectos: cortina, pila sticky, reveal escalonado. */

:root{
  --tinta:#14100C;
  --carbon:#1E1811;
  --crema:#F4EFE7;
  --papel:#FBF8F3;
  --cuero:#A2612F;          /* acento único */
  --gris:#7C756B;
  --gris-claro:#B9B1A6;
  --linea:rgba(20,16,12,.14);
  --linea-osc:rgba(244,239,231,.16);

  --r:2px;                   /* único sistema de esquinas */
  --max:1180px;
  --pad:clamp(72px,9vw,132px);   /* R4 */
  --pad-corto:clamp(48px,6vw,84px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-.004em;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:400; letter-spacing:-.018em; margin:0}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.03}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem); line-height:1.1}
h3{font-size:1.13rem; line-height:1.3; font-weight:600; letter-spacing:-.01em}
p{margin:0}
.cont{width:min(100% - 40px,var(--max)); margin-inline:auto}

/* ---------- cinta de demo ---------- */
.cinta-demo{
  position:fixed; left:0; bottom:0; z-index:80;
  background:var(--cuero); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:8px 15px; pointer-events:none;
  border-radius:0 var(--r) 0 0;
  box-shadow:0 -2px 16px rgba(0,0,0,.30);
}

/* ---------- barra ---------- */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; gap:28px;
  padding:16px clamp(20px,4vw,44px);
  background:rgba(20,16,12,.30);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(255,255,255,.10);
  color:var(--crema);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.barra.solida{background:rgba(20,16,12,.94)}
.marca{text-decoration:none; display:flex; flex-direction:column; line-height:1; margin-right:auto}
.marca-a{font-family:Fraunces,Georgia,serif; font-size:1.22rem; letter-spacing:.01em}
.marca-b{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.72; margin-top:4px}
.barra-nav{display:flex; gap:26px}
.barra-nav a{
  text-decoration:none; font-size:13.5px; letter-spacing:.03em; opacity:.86;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.barra-nav a:hover{opacity:1; border-bottom-color:var(--cuero)}
.barra-cta{
  text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.42); padding:9px 17px; border-radius:var(--r);
}
.barra-cta:hover{background:var(--cuero); border-color:var(--cuero)}

/* ---------- botones ---------- */
.btn{
  display:inline-block; text-decoration:none; border-radius:var(--r);
  font-size:14.5px; font-weight:600; letter-spacing:.015em; padding:14px 26px;
}
.btn-lleno{background:var(--cuero); color:#fff}
.btn-lleno:hover{background:#8C5127}
.btn-linea{border:1px solid var(--linea); color:var(--tinta)}
.btn-linea:hover{border-color:var(--cuero); color:var(--cuero)}
.btn-grande{padding:17px 34px; font-size:16px}

/* ---------- HÉROE · CORTINA (la foto se queda, el contenido sube) ---------- */
.cortina{
  position:sticky; top:0; z-index:0;
  height:100svh; min-height:560px; overflow:hidden;
  display:grid; place-items:end start;
}
.cortina-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:52% 42%;
}
.cortina-velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,12,.62) 0%,rgba(20,16,12,.30) 34%,rgba(20,16,12,.86) 100%);
}
.cortina-txt{
  position:relative; color:var(--crema);
  padding:0 clamp(20px,5vw,72px) clamp(64px,9vh,104px);
  max-width:min(900px,92vw);
}
.cortina-txt h1{color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.bajada{
  margin:20px 0 30px; font-size:clamp(1.02rem,1.6vw,1.16rem);
  color:rgba(244,239,231,.90); max-width:34em;
}

/* el contenido sube por encima de la cortina */
.sobre-cortina{position:relative; z-index:2; background:var(--papel)}

/* ---------- LAS DOS PUERTAS ---------- */
.puertas{display:grid; grid-template-columns:1fr 1fr; background:var(--tinta)}
.puerta{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  min-height:clamp(340px,52vh,520px);
  border-right:1px solid rgba(255,255,255,.10);
}
.puerta:last-child{border-right:0}
.puerta img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) brightness(.62);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.puerta:hover img{transform:scale(1.045); filter:saturate(1) brightness(.72)}
.puerta-cara{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  gap:12px; padding:clamp(28px,4vw,52px); color:var(--crema);
  background:linear-gradient(180deg,rgba(20,16,12,0) 30%,rgba(20,16,12,.78) 100%);
}
.puerta-cara h2{color:#fff; font-size:clamp(2rem,3.6vw,2.9rem)}
.puerta-cara p{color:rgba(244,239,231,.84); font-size:15px; max-width:30em}
.puerta-link{
  font-size:13.5px; letter-spacing:.01em; color:var(--cuero);
  font-weight:600; margin-top:4px;
}
.puerta:hover .puerta-link{color:#C9843F}

/* ---------- RELOJES · fichas ---------- */
.relojes{background:var(--tinta); color:var(--crema); padding:var(--pad) 0}
.rel-cabeza{max-width:46em}
.rel-cabeza h2{color:#fff}
.rel-cabeza p{margin-top:16px; color:var(--gris-claro); font-size:1.04rem}
.rejilla-rel{
  margin-top:clamp(44px,5vw,68px);
  display:grid; gap:1px; background:rgba(244,239,231,.13);
  grid-template-columns:repeat(4,1fr); border:1px solid rgba(244,239,231,.13);
}
.ficha{background:var(--tinta); padding:0; display:flex; flex-direction:column}
.ficha-foto{aspect-ratio:1/1; overflow:hidden; background:#0F0C09}
.ficha-foto img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ficha:hover .ficha-foto img{transform:scale(1.05)}
.ficha-txt{padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
.ficha-txt h3{color:#fff}
.ficha-det{font-size:13.4px; color:var(--gris-claro); line-height:1.5}
.ficha-precio{
  font-family:Fraunces,Georgia,serif; font-size:1.32rem; color:var(--cuero);
  margin-top:auto; padding-top:8px;
}
.ficha-fin{font-size:12.4px; color:var(--gris-claro); opacity:.82; margin-top:-4px}
.ficha-cta{
  align-self:flex-start; margin-top:6px; text-decoration:none;
  font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--crema);
  border-bottom:1px solid rgba(244,239,231,.34); padding-bottom:2px;
}
.ficha-cta:hover{color:var(--cuero); border-bottom-color:var(--cuero)}
.rel-pie{margin-top:36px; color:var(--gris-claro); font-size:15px; max-width:44em}

/* ---------- CÓMO SE PIDE · pila sticky ---------- */
.pedido{background:var(--crema); padding:var(--pad) 0}
.pedido-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(36px,6vw,88px); align-items:start}
.pedido-fijo{position:sticky; top:120px}
.pedido-fijo p{margin:18px 0 28px; color:var(--gris); font-size:1.02rem; max-width:26em}
.pila{list-style:none; margin:0; padding:0}
.pila-carta{
  position:sticky; background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:clamp(26px,3vw,38px); box-shadow:0 -2px 0 var(--papel), 0 18px 40px -30px rgba(20,16,12,.5);
}
.pila-carta + .pila-carta{margin-top:22px}
.pila-carta:nth-child(1){top:112px}
.pila-carta:nth-child(2){top:132px}
.pila-carta:nth-child(3){top:152px}
.pila-carta:nth-child(4){top:172px}
.pila-n{
  display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cuero); font-weight:600; margin-bottom:12px;
}
.pila-carta h3{font-size:1.32rem; font-weight:400}
.pila-carta p{margin-top:10px; color:var(--gris); font-size:15.5px}

/* ---------- CUERO · lista de precios ---------- */
.cuero{background:var(--papel); padding:var(--pad) 0}
.cuero-cabeza{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center}
.cuero-cabeza p{margin-top:16px; color:var(--gris); font-size:1.04rem; max-width:32em}
.cuero-vitrina{margin:0; border-radius:var(--r); overflow:hidden}
.cuero-vitrina img{width:100%; aspect-ratio:4/3; object-fit:cover}
.lista{list-style:none; margin:clamp(44px,5vw,68px) 0 0; padding:0; border-top:1px solid var(--linea)}
.lista-it{
  display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:clamp(18px,3vw,34px);
  align-items:center; padding:20px 4px; border-bottom:1px solid var(--linea);
  transition:background .25s ease;
}
.lista-it:hover{background:rgba(162,97,47,.05)}
.lista-it img{width:120px; height:120px; object-fit:cover; border-radius:var(--r)}
.lista-txt p{margin-top:4px; color:var(--gris); font-size:14px}
.lista-precio{
  font-family:Fraunces,Georgia,serif; font-size:1.16rem; color:var(--cuero); white-space:nowrap;
}
.cuero-pie{margin-top:32px; color:var(--gris); font-size:15px; max-width:42em}

/* ---------- ENTREGAS ---------- */
.entregas{background:var(--crema); padding:var(--pad) 0}
.ent-tit{max-width:20em}
.ent-fila{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding:clamp(34px,4vw,54px) 0; border-bottom:1px solid var(--linea);
}
.ent-fila:first-of-type{border-top:1px solid var(--linea); margin-top:clamp(34px,4vw,54px)}
.ent-fila--inv > figure{order:2}
.ent-fila figure{margin:0; border-radius:var(--r); overflow:hidden}
.ent-fila figure img{width:100%; aspect-ratio:1/1; object-fit:cover}
.ent-fila p{margin-top:12px; color:var(--gris); font-size:1.01rem; max-width:36em}
.ent-fila h3{font-family:Fraunces,Georgia,serif; font-size:clamp(1.35rem,2.1vw,1.75rem); font-weight:400}

/* ---------- FAQ ---------- */
.faq{background:var(--papel); padding:var(--pad) 0}
.faq-grid{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(32px,6vw,84px); align-items:start}
.faq-lista{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-weight:500; font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:29px; width:11px; height:11px;
  border-right:1.5px solid var(--cuero); border-bottom:1.5px solid var(--cuero);
  transform:rotate(45deg); transition:transform .28s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); top:33px}
.faq details p{padding:0 40px 22px 0; color:var(--gris); font-size:15.5px}

/* ---------- CIERRE ---------- */
.cierre{background:var(--tinta); color:var(--crema); padding:var(--pad) 0; text-align:center}
.cierre h2{color:#fff}
.cierre > .cont > p{margin:18px auto 32px; color:var(--gris-claro); max-width:34em}
.cierre-tel{
  margin-top:26px !important; font-family:Fraunces,Georgia,serif; font-size:1.3rem;
  color:var(--crema) !important;
}

/* ---------- PIE ---------- */
.pie{background:#0F0C09; color:var(--gris-claro); padding:var(--pad-corto) 0 32px; font-size:14.5px}
.pie-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--cuero)}
.pie-marca{font-family:Fraunces,Georgia,serif; font-size:1.2rem; color:var(--crema); margin-bottom:8px}
.pie-tit{color:var(--crema); font-weight:600; margin-bottom:10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.pie-grid p + p{margin-top:5px}
.pie-nota{
  width:min(100% - 40px,var(--max)); margin:36px auto 0; padding-top:22px;
  border-top:1px solid rgba(244,239,231,.12); font-size:12.5px; opacity:.62;
}

/* ---------- WhatsApp flotante ---------- */
.flota{
  position:fixed; right:18px; bottom:18px; z-index:75;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--cuero); color:#fff; text-decoration:none;
  padding:12px 18px; border-radius:var(--r);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  box-shadow:0 10px 30px -12px rgba(20,16,12,.75);
}
.flota:hover{background:#8C5127}

/* ---------- reveal escalonado ---------- */
.rv{opacity:0; transform:translateY(16px)}
.rv.vista{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
html.no-js .rv{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .rejilla-rel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body{font-size:16px}
  .barra{gap:16px; padding:13px 18px}
  .barra-nav{display:none}
  .puertas{grid-template-columns:1fr}
  .puerta{min-height:300px; border-right:0; border-bottom:1px solid rgba(255,255,255,.10)}
  .pedido-grid,.cuero-cabeza,.faq-grid{grid-template-columns:1fr}
  .pedido-fijo{position:static}
  .pila-carta{position:static !important; margin-top:16px}
  .ent-fila{grid-template-columns:1fr; gap:22px}
  .ent-fila--inv > figure{order:0}
  .ent-fila figure img{aspect-ratio:4/3}
  .pie-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cortina{min-height:520px}
  .cortina-txt{padding-bottom:clamp(48px,8vh,80px)}
  .rejilla-rel{grid-template-columns:1fr}
  .ficha-foto{aspect-ratio:4/3}
  .lista-it{grid-template-columns:64px minmax(0,1fr); row-gap:8px; padding:16px 2px}
  .lista-it img{width:64px; height:64px}
  .lista-precio{grid-column:2; justify-self:start}
  .pie-grid{grid-template-columns:1fr}
  .cinta-demo{font-size:9.5px; padding:7px 12px}
  .flota span{display:none}
  .flota{padding:14px; right:14px; bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv{opacity:1 !important; transform:none !important}
  .cortina{position:static; height:auto; min-height:0}
  .cortina-img{position:relative; height:auto; max-height:70svh}
  .pila-carta{position:static !important}
  .pedido-fijo{position:static}
}