/* ==========================================================================
   EL COLMADO · capa v3 — estructura tipo «puerta» (ref. Begin Restaurante)
   Se carga DESPUÉS de colmado-v2.css: reutiliza tokens, tipografías,
   bandas, velos, carta y pedido. Aquí solo va lo nuevo de la v3.
   ========================================================================== */

/* la cabecera flota SOBRE la puerta: la foto llega al borde superior */
body.v3.home .site-head{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent}
body.v3.home{--head-over:1}

/* ── LA PUERTA: foto a sangre, pantalla completa, texto encima ──────────── */
.door{position:relative;min-height:100svh;display:grid;place-items:center start;
  overflow:hidden;background:var(--chalk)}
.door-ph{position:absolute;inset:0}
.dslide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s var(--ease)}
.dslide.on{opacity:1}
.dslide .bg{display:none}
.dslide .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dslide.wide .fg{object-position:center 46%}
/* velo superior: la cabecera siempre legible sobre la foto */
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:1;
  pointer-events:none;background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,0))}
/* velo SOLO donde hay texto: muere antes de media pantalla y deja la foto viva */
.door::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.82) 18%,
  rgba(255,255,255,.5) 32%,rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 55%)}
/* legibilidad sin relleno: halo blanco difuso pegado al texto */
.door-body{position:relative}
.door-in::before{content:"";position:absolute;inset:-9% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 58% at 46% 50%,rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.72) 46%,rgba(255,255,255,0) 78%);filter:blur(10px)}
.door-in{position:relative;z-index:2;text-align:left;
  text-shadow:0 1px 20px rgba(255,255,255,.92),0 0 46px rgba(255,255,255,.7);
  margin-left:var(--edge);max-width:min(44vw,33rem);
  padding-block:calc(var(--head-h,86px) + 1.5rem) 3rem}
.door .eyebrow{justify-content:flex-start}
.q{font-family:var(--display);font-weight:400;color:var(--ink);line-height:1.1;
  font-size:clamp(2rem,4.6vw,3.8rem);margin-top:1.1rem;text-wrap:balance}
.q b{font-weight:400;color:var(--ochre-txt)}
.door .eyebrow .v-gold{color:var(--ochre-txt)}
.opts{display:flex;align-items:flex-start;flex-direction:column;
  gap:clamp(.75rem,1.8vh,1.15rem);margin-top:clamp(1.8rem,4.5vh,3rem)}
.opts a{position:relative;font-size:.9375rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);padding-bottom:7px}
.opts a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ochre);transition:right .4s var(--ease)}
.opts a:hover::after{right:0}
.opts s{display:none}
.door-dots{position:absolute;left:var(--edge);bottom:clamp(1.4rem,4vh,2.6rem);
  z-index:2;display:flex;gap:9px}
.door-dots button{width:26px;height:2px;border:0;padding:0;background:rgba(34,30,26,.22);cursor:pointer}
.door-dots button[aria-current="true"]{background:var(--ochre-txt)}

/* móvil: la foto original entera arriba y una transición ondulada, nunca un corte recto */
@media (max-width:860px){
  .door{display:grid;place-items:end center;min-height:100svh;background:var(--chalk)}
  .door-ph{position:absolute;left:0;right:0;top:0;bottom:auto;height:80svh;z-index:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 79%,rgba(0,0,0,.72) 88%,
      rgba(0,0,0,.26) 95%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 79%,rgba(0,0,0,.72) 88%,
      rgba(0,0,0,.26) 95%,transparent 100%)}
  /* la foto sube: el sujeto queda casi centrado en la zona limpia */
  .dslide .fg{position:absolute;left:0;right:0;top:-12%;bottom:auto;height:116%;
    object-position:center 42%}
  /* barra blanca de cabecera con corte ondulado */
  .door::before{display:block;content:"";position:absolute;left:0;right:0;top:0;z-index:1;
    height:calc(var(--head-h,86px) + 4px);pointer-events:none;
    background:linear-gradient(var(--paper),var(--paper)) top/100% calc(100% - 21px) no-repeat,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C0%20H390%20V10%20C344%2C28%20306%2C4%20258%2C15%20C210%2C26%20172%2C3%20122%2C14%20C82%2C23%2044%2C8%200%2C18%20Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 22px no-repeat}
  /* la cal sube desde el pie con borde ondulado y degradado propio */
  .door::after{top:auto;bottom:0;height:46svh;background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FBF7F2%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.26%22%20stop-color%3D%22%23FBF7F2%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23FBF7F2%22%20stop-opacity%3D%22.58%22%2F%3E%3Cstop%20offset%3D%22.74%22%20stop-color%3D%22%23FBF7F2%22%20stop-opacity%3D%22.88%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FBF7F2%22%20stop-opacity%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url%28%23g%29%22%20d%3D%22M0%2C58%20C58%2C20%20108%2C70%20168%2C42%20C228%2C14%20278%2C60%20330%2C34%20C356%2C22%20372%2C30%20390%2C22%20V160%20H0%20Z%22%2F%3E%3C%2Fsvg%3E") top/100% 160px no-repeat,
    linear-gradient(var(--chalk),var(--chalk)) bottom/100% calc(100% - 158px) no-repeat}
  .door-in{position:static;margin:0;max-width:none;width:100%;text-align:center;
    padding:0 var(--gut) 5.9rem;text-shadow:none}
  .door-in::before{display:none}
  .door-body{position:static}
  .door-body::before{display:none}
  .opts .opt-menu{display:none}          /* en móvil, dos opciones */
  .door .eyebrow{position:absolute;left:0;right:0;bottom:2.9rem;margin:0;z-index:3;
    justify-content:center;font-size:.875rem;letter-spacing:.24em;color:var(--ink-2)}
  .door .q{font-size:clamp(1.55rem,6.3vw,2.05rem);margin-top:.6rem}
  .opts{align-items:center;gap:.85rem;margin-top:1.3rem}
  .opts a{font-size:.875rem;letter-spacing:.18em;padding-bottom:5px}
  .door-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:1.4rem;
    margin:0;padding:0;background:none;z-index:3}
}

/* ── CAPÍTULO: titular-pregunta centrado con mucho aire ──────────────────── */
.chapter{padding-block:clamp(1.4rem,3.5vh,2.6rem) 0;text-align:center}
.sec:has(.chapter){padding-top:clamp(1.4rem,3vw,2.2rem);padding-bottom:0}
.sec:has(.arches){padding-top:clamp(1.6rem,3.5vw,2.6rem)}
.chapter .q{font-size:clamp(1.8rem,4.2vw,3.3rem)}
.chapter .lead{margin:1.2rem auto 0;max-width:min(62ch,54rem);text-wrap:balance}
.chapter .orn{margin-top:clamp(1.4rem,3vh,2rem)}

/* ── ARCOS: la tarjeta de la v3 (arco encalado mediterráneo) ─────────────── */
.arches{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(1.4rem,3.4vw,2.8rem)}
.arch{display:block;text-align:center}
.arch .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--chalk);
  border-radius:30px 24px 32px 26px / 26px 32px 24px 30px;
  box-shadow:0 24px 60px -34px rgba(34,30,26,.28);
  transition:border-radius .6s var(--ease),box-shadow .5s var(--ease)}
.arch:hover .ph{border-radius:24px 32px 26px 30px / 32px 24px 30px 26px;
  box-shadow:0 30px 70px -32px rgba(34,30,26,.34)}
.arch .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease)}
.arch:hover .ph img{transform:scale(1.05)}
.arch b{display:block;font-family:var(--display);font-weight:400;color:var(--gold-h);
  font-size:clamp(1.25rem,2.2vw,1.7rem);margin-top:1.15rem;line-height:1.2}
.arch span{display:block;color:var(--ink-3);font-size:.9375rem;margin-top:.3rem}
.arch .soon{margin-top:.7rem}

/* ── PÍLDORA (eco del botón «Book» de la referencia) ─────────────────────── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:46px;padding:0 26px;border:1px solid var(--line);border-radius:999px;
  font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.pill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pill-gold{border-color:var(--ochre);color:var(--ochre-txt)}
.pill-row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(.8rem,2vw,1.4rem)}
body.v3 .btn-book{border-radius:999px}
body.v3 .btn{border-radius:999px}

@media (max-width:700px){
  .opts{flex-direction:column;gap:1.15rem}
  .opts s{display:none}
  .arches{grid-template-columns:1fr 1fr;gap:1rem 1rem}
  .arch .ph{aspect-ratio:1;border-radius:22px 18px 24px 20px / 20px 24px 18px 22px}
  .arch b{font-size:1.2rem;margin-top:.8rem}
  .arch span{font-size:.875rem}
  .sec:has(.arches){padding-top:1.2rem}
}

/* v19 · artículos visibles pero no disponibles para compra */
.dish-card.soldout,.dish-row.soldout,.ord-row.soldout{opacity:.62}
.dish-card.soldout .ph img{filter:grayscale(1)}
.dish-na,.ord-na{display:inline-block;margin-top:.3rem;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A6402E}
.dish-card .dish-na{margin-top:.4rem}
.ord-row.soldout .ord-price{text-decoration:line-through;opacity:.6}