/* ================================================================
   CASA LUJURIA — capa de casa
   Loads last. Three jobs:
     1. Self-hosted type. Zero third-party font calls.
     2. Swaps the thin Cormorant italic for a thick, legible brush
        script (Kaushan) so the accent lines actually read.
     3. Rebuilds the atmosphere. Casa Lujuria sits in a wine-black
        room lit by round bloom on a square grid. This one sits in a
        midnight-indigo room lit by raking diagonal shafts, with a
        warm floor glow and a three-colour ribbon running through it.
        Amber, carmine, cobalt. Same bones, different building.
   ================================================================ */

@font-face{font-family:"Kaushan Script";font-style:normal;font-weight:400;font-display:swap;
  src:url("/css/fonts/kaushan-script-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;
  src:url("/css/fonts/inter-tight-latin-900-normal.woff2") format("woff2")}

:root{
  --script:"Kaushan Script","Segoe Script",cursive;
  --ambar:#ffce00;
  --ambar-alto:#ffe066;
  --carmin:#dd0000;
  --carmin-alto:#ff4747;
  --cobalto:#ffce00;
  --cobalto-hondo:#12121a;
  --noche:#0b0b0f;

  /* ---- Schwarz Rot Gold -------------------------------------------
     The flag proper. Order is fixed by law and by every German eye:
     black on top, red in the middle, gold at the bottom. Horizontal
     runs left-to-right in the same order. Do not reorder these. */
  --flagge-schwarz:#0b0b0f;
  --flagge-rot:#dd0000;
  --flagge-gold:#ffce00;
  --cinta:linear-gradient(90deg,
    var(--flagge-schwarz) 0 33.33%,
    var(--flagge-rot)     33.33% 66.66%,
    var(--flagge-gold)    66.66% 100%);
  --flagge-quer:linear-gradient(180deg,
    var(--flagge-schwarz) 0 33.33%,
    var(--flagge-rot)     33.33% 66.66%,
    var(--flagge-gold)    66.66% 100%);
}

/* The black stripe is the site background, so a flag rendered flat
   would lose its top third. Everywhere the ribbon shows, the black
   band gets a hairline so all three stripes stay countable. */
.cinta,[class*="cinta"],.franja-flagge{
  background:var(--cinta);
  box-shadow:inset 0 0 0 .5px rgba(246,239,226,.14);
}

/* ---------------- the script face ---------------------------------
   Kaushan is a brush script: thick stroke, wide apertures, no hairlines.
   It reads at a glance where a thin didone italic does not. It also
   needs air, so every rule here buys it leading and letter-spacing. */
.page .narrow .gmast-dek p:first-child,
.ls-fb-word,
.ls-disp-media span,
.hero-serif,
.serif,
.shimmer-txt,
.ls-manifesto .serif{
  font-family:var(--script) !important;
  font-style:normal !important;
  font-weight:400 !important;
  letter-spacing:.005em;
}
.hero-serif,.ls-fb-word{line-height:1.18 !important;padding-bottom:.14em}
.hero-serif{color:var(--ambar-alto)}
.ls-manifesto::before,.ls-manifesto::after{font-family:var(--script) !important}
.ls-disp-media span{line-height:1.3}
/* script never goes uppercase — it collapses into noise */
.hero-serif,.serif,.ls-fb-word,.shimmer-txt{text-transform:none !important}

/* ---------------- atmosphere: raking light, not round bloom -------- */
@keyframes casa-shafts{0%{transform:translate3d(-4%,0,0)}50%{transform:translate3d(4%,0,0)}100%{transform:translate3d(-4%,0,0)}}
@keyframes casa-hatch{to{background-position:60px 60px}}

body.lqx::before{
  content:'';position:fixed;inset:-10% -20%;z-index:-3;
  background:
    /* three raking shafts, one per colour, thrown across the room */
    linear-gradient(102deg,transparent 14%,rgba(255,206,0,.16) 22%,transparent 30%),
    linear-gradient(102deg,transparent 40%,rgba(221,0,0,.20) 49%,transparent 58%),
    linear-gradient(102deg,transparent 66%,rgba(255,206,0,.17) 76%,transparent 85%),
    /* warm floor glow, low and wide */
    radial-gradient(120% 55% at 50% 118%,rgba(255,206,0,.16),transparent 70%),
    /* cold ceiling */
    radial-gradient(90% 60% at 50% -18%,rgba(18,38,107,.55),transparent 72%);
  filter:blur(38px);
  animation:casa-shafts 26s ease-in-out infinite;
}
body.lqx::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  /* diagonal hatch instead of a square grid */
  background-image:repeating-linear-gradient(58deg,rgba(246,239,226,.030) 0 1px,transparent 1px 30px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.06) 70%,transparent);
  animation:casa-hatch 30s linear infinite;
}

/* ---------------- la cinta: the three-colour ribbon ---------------- */
.nav{position:relative}
.nav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cinta);opacity:.85;
}
.wrap h2::before,.ls-sec-head h2::before{content:none}
.casa-cinta{display:block;height:3px;width:112px;border-radius:2px;background:var(--cinta);margin:1.15rem 0}
.casa-cinta.center{margin-left:auto;margin-right:auto}
.site-footer{position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cinta);opacity:.7}

/* ---------------- cobalt earns its keep --------------------------- */
/* LS runs warm-only. Here the cold colour does real work: it holds the
   secondary surfaces so amber and carmine stay reserved for signal. */
.ls-verdict{background:linear-gradient(180deg,rgba(255,206,0,.09),rgba(7,10,24,.55)) !important;
  border-color:rgba(255,206,0,.24) !important}
.faq{border-top:1px solid rgba(255,206,0,.22)}
.faq h3{color:var(--ambar-alto)}
.ls-author{border-left:3px solid var(--cobalto) !important}
.ls-crumb a:hover{color:var(--cobalto)}
.guide-safety{border-color:rgba(255,206,0,.35) !important;
  background:linear-gradient(180deg,rgba(255,206,0,.08),rgba(7,10,24,.4)) !important}
::selection{background:var(--carmin);color:#fff}

/* ---------------- Markenzeichen: ein Viertel, kein Bogen ---------- */
.brand svg{overflow:visible}
.brand span{letter-spacing:-.01em}
.brand .viertel-block{filter:none}

/* ---------------- house voice bits -------------------------------- */
.casa-nota{
  font-family:var(--script);font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:var(--ambar);line-height:1.5;margin:1.4rem 0;padding-left:1rem;
  border-left:2px solid rgba(255,206,0,.4);
}
.casa-aparte{
  margin:1.6rem 0;padding:1rem 1.15rem;border-radius:14px;
  background:rgba(255,206,0,.07);border:1px solid rgba(255,206,0,.2);
  font-size:.95rem;color:rgba(246,239,226,.86);
}
.casa-aparte b{color:var(--ambar-alto);font-weight:700}

@media (prefers-reduced-motion:reduce){
  body.lqx::before,body.lqx::after{animation:none}
}

/* ---------------- marquee: script, not a fallback serif -------------
   LS runs Cormorant italic here and pulls it from a CDN. Nothing is
   CDN-loaded on this site, so the marquee was landing on whatever
   system serif the browser had. Point it at the house script. */
.marquee-item,.ls-band-row .marquee-item{
  font-family:var(--script) !important;font-style:normal !important;
  font-weight:400 !important;letter-spacing:.01em;
}
.mq-dot{color:var(--carmin)}
.ls-band-row .mq-dot{color:var(--cobalto)}

/* feat cards: long Spanish badges need room, and the rank pill has to
   stop shoving the brand name onto a second line */
.feat-top{align-items:flex-start}
.feat-id h3{white-space:nowrap}
.badge.good{font-size:.66rem;letter-spacing:.06em;line-height:1.15;text-align:right;max-width:9.5rem}
.rank-pill{white-space:nowrap}

/* ---------------- script sizing inside display heads ---------------
   Kaushan's x-height runs large, so at the poster clamp it out-shouts
   Anton and wraps early. Pull it back so the two faces sit level. */
.hero-h1 .hero-serif,.wrap h2 .serif,.feat-h2 .serif,.cta-h2 .serif,
.ls-sec-head h2 .serif,.show-h2 .serif{font-size:.84em}
.ls-disp-line.serif{font-size:.86em}

/* feat cards: badge drops to its own row instead of colliding with the
   brand name — Spanish labels run longer than the English ones did */
.feat-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.55rem .7rem}
.feat-id{flex:1 1 auto;min-width:0}
.feat-id h3{white-space:normal}
.badge.good{flex:0 0 100%;order:3;justify-self:start;width:max-content;max-width:100%;
  font-size:.66rem;letter-spacing:.06em;text-align:left}

/* full-bleed slot carries a real house plate, so kill the placeholder tag */
.ls-fullbleed::after{content:none}
.ls-fb-media{background-image:linear-gradient(180deg,rgba(11,11,15,.18),rgba(11,11,15,.42)),url("/img/fullbleed.jpg") !important;
  background-size:cover !important;background-position:center !important}

/* ---------------- los números de los pasos -------------------------
   poster.css blows .step-n up to ~104px and paints it a solid gradient,
   which in Spanish (longer headings) lands right on top of the h3.
   Push it behind the text, dim it, and give the card a right gutter. */
.step-card{position:relative;overflow:hidden}
.step-n{
  z-index:0 !important;opacity:.22 !important;
  top:6px !important;right:10px !important;
  background:linear-gradient(160deg,var(--ambar),var(--carmin)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  pointer-events:none;
}
.step-card h3,.step-card p{position:relative;z-index:1}
.step-card h3{padding-right:3.2rem}

/* Anton at .86 leading is fine for one line; Spanish headings run to two
   or three, so give the multi-line ones a hair more air. */
.faq h2,.cta-h2,.ls-sec-head h2{line-height:.93 !important}

/* ================================================================
   SIN PÍLDORAS — kill the capsule
   Every button, badge and nav chip shipped as a 999px capsule. That
   radius is the single most template-looking thing on the internet
   right now, so none of it survives here. The house shape is a hard
   rectangle with a 2px break, squared arrows, and the cinta doing the
   work the rounded edge used to do.
   ================================================================ */
.btn,.btn-red,.btn-ghost,.btn-gold,.nav-cta,.nm-cta,.badge,.rank-pill,
.soon-badge,.pill,.pill a,.pill .soon,.bubble,.tag,.faq-ic,.chip,.tp-pill{
  border-radius:2px !important;
}

/* primary: solid carmine slab, amber rule underneath, no soft glow */
.btn{
  padding:14px 26px !important;
  font-weight:700 !important;letter-spacing:.04em;
  text-transform:uppercase;font-size:.86rem !important;
  box-shadow:none !important;
  border-bottom:3px solid var(--ambar) !important;
  transition:transform .14s ease,background .14s ease,border-color .14s ease !important;
}
.btn:hover{transform:translateY(-2px) !important;border-bottom-color:var(--ambar-alto) !important}
.btn .arrow{border-radius:2px !important;width:22px !important;height:22px !important}

.btn-ghost{
  border:1px solid var(--line-strong) !important;border-bottom:3px solid var(--cobalto) !important;
  background:transparent !important;
}
.btn-ghost:hover{background:rgba(255,206,0,.10) !important;border-bottom-color:var(--cobalto) !important}
.btn-gold{border:1px solid rgba(255,206,0,.5) !important;border-bottom:3px solid var(--ambar) !important}

/* nav: a flat bar with hairline dividers, not a floating capsule */
.pill{
  background:rgba(23,23,30,.62) !important;
  border:1px solid var(--line) !important;border-bottom:2px solid transparent !important;
  padding:0 !important;overflow:hidden;
  border-image:none;
}
.pill a{padding:10px 15px !important;border-radius:0 !important}
.pill a + a{border-left:1px solid rgba(246,239,226,.10)}
.pill a:hover{background:rgba(255,206,0,.16) !important}
.nav-cta{
  padding:9px 16px !important;border-bottom:2px solid var(--ambar) !important;
  font-weight:700;letter-spacing:.03em;
}

/* labels read as printed tags now, not lozenges */
.badge,.rank-pill,.soon-badge{border-radius:2px !important}
.badge.good{border-left:3px solid var(--ambar)}
.badge.warn{border-left:3px solid var(--carmin)}
.rank-pill{border-radius:0 !important}

/* the FAQ toggle stops being a bubble */
.faq-ic{border-radius:2px !important}

/* speech tags keep their tails but lose the round */
.bubble,.tag{border-radius:2px !important}

/* ================================================================
   ESCALA — Ian quería todo más grande, la portada primero.
   poster.css fija los clamps; aquí se suben sin tocar ese archivo.
   ================================================================ */
.hero-h1{font-size:clamp(58px,11.4vw,150px) !important}
.wrap h2,.ls-sec-head h2,.feat-h2,.cta-h2,.faq h2,.ls-disp-h2{
  font-size:clamp(48px,8.2vw,108px) !important;
}
body{font-size:18px}
.lede,.hero-lede{font-size:clamp(1.16rem,1.7vw,1.42rem) !important;line-height:1.5}
.feat-blurb,.cat-body p,.step-card p,.ls-scan li,.faq-item p{font-size:1.03rem}
.eyebrow{font-size:.8rem;letter-spacing:.24em}
.btn,.btn-ghost{font-size:.94rem !important;padding:16px 30px !important}
.stat-num{font-size:clamp(44px,5.4vw,76px) !important}
.lq-lanes-list a{font-size:clamp(38px,7.8vw,92px) !important}

/* ================================================================
   ESCENARIOS — filas, no tarjetas. Deliberadamente otro esqueleto
   que el resto de la página: aquí manda el texto, no la caja.
   ================================================================ */
.cl-esc{border-top:2px solid var(--tinta,#0b0b0f);margin-top:1.6rem}
.cl-esc-row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);
  align-items:start;padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid rgba(11,11,15,.18);
}
.cl-esc-n{
  font-family:var(--script);font-size:clamp(46px,6.6vw,88px);line-height:.8;
  color:var(--carmin);opacity:.85;padding-top:.12em;
}
.cl-esc-q{
  font-family:var(--anton);text-transform:uppercase;
  font-size:clamp(24px,3.2vw,40px);line-height:1.02;letter-spacing:-.01em;
  margin:0 0 .5rem;
}
.cl-esc-row p{margin:0 0 .7rem;font-size:1.06rem;line-height:1.55;max-width:64ch}
.cl-esc-row .yesi{font-family:var(--script);font-size:1.24em;line-height:1.1}
.cl-esc-go{
  display:inline-block;font-weight:700;font-size:.94rem;letter-spacing:.01em;
  border-bottom:2px solid var(--carmin);padding-bottom:1px;
}
@media (max-width:640px){
  .cl-esc-row{grid-template-columns:1fr;gap:6px;padding:24px 0}
  .cl-esc-n{font-size:52px;padding-top:0}
  .cl-esc-row p{font-size:1rem}
}

/* ================================================================
   TELÉFONO — el piso de 58px sacaba la palabra más larga
   ("NOSOTROS.") fuera de la pantalla en 360-390px. Se baja el piso
   y se deja que la palabra corte si hace falta.
   ================================================================ */
@media (max-width:640px){
  .hero-h1{font-size:clamp(40px,12.2vw,64px) !important;line-height:.96 !important}
  .hero-h1 .line,.hero-h1 .word{overflow-wrap:anywhere;word-break:normal}
  .wrap h2,.ls-sec-head h2,.feat-h2,.cta-h2,.faq h2,.ls-disp-h2{
    font-size:clamp(34px,9.2vw,58px) !important;line-height:1.0 !important;
  }
  .lq-lanes-list a{font-size:clamp(30px,8.6vw,54px) !important}
  .stat-num{font-size:clamp(38px,11vw,58px) !important}
  .lede,.hero-lede{font-size:1.08rem !important}
  .btn,.btn-ghost{font-size:.9rem !important;padding:14px 22px !important}
  .cl-esc-q{font-size:clamp(21px,6.2vw,30px) !important}
}
@media (max-width:390px){
  .hero-h1{font-size:clamp(36px,11.4vw,52px) !important}
}
.yesi{margin-right:.32em}

/* ================================================================
   MÉTODO — pasos numerados de /sobre-nosotros/. Otro esqueleto más:
   ni tarjetas (portada) ni filas de prosa (escenarios). Aquí el
   número va en bloque sólido y las filas cuelgan de un espinazo.
   ================================================================ */
.cl-met-wrap{
  margin:1.7rem 0 0;padding-left:clamp(14px,2.4vw,26px);
  border-left:2px solid rgba(255,255,255,.16);
}
.cl-met{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(14px,2.2vw,28px);align-items:start;
  padding:clamp(20px,2.6vw,32px) 0;
}
.cl-met + .cl-met{border-top:1px solid rgba(255,255,255,.12)}
.cl-met-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5em;padding:.28em .42em;
  font-family:var(--anton,inherit);font-size:clamp(19px,2vw,26px);
  line-height:1;letter-spacing:.02em;
  background:var(--carmin);color:#fff;
  margin-left:calc(-1 * clamp(14px,2.4vw,26px) - 2px - 1.25em);
}
/* el h3 del sitio es sans a propósito (poster-content.css) — aquí se respeta
   y solo se le quita el margen de arriba para que alinee con el número. */
.page .narrow .cl-met h3{
  font-size:clamp(20px,1.8vw,26px) !important;
  line-height:1.2;margin:0 0 .45rem !important;
}
.cl-met p{margin:0;font-size:1.05rem;line-height:1.58;max-width:62ch}

/* el correo de /contacto/ es el objeto de la página, no una línea más */
.cl-mail{
  margin:1.4rem 0 2.2rem;font-family:var(--anton,inherit);
  font-size:clamp(24px,4.4vw,46px);line-height:1.05;
  letter-spacing:-.01em;word-break:break-word;
}
.cl-mail a{
  color:var(--ambar);border-bottom:3px solid var(--carmin);
  padding-bottom:2px;text-decoration:none;
}
.cl-mail a:hover{color:var(--ambar-alto)}

@media (max-width:640px){
  .cl-met-wrap{padding-left:0;border-left:0}
  .cl-met{grid-template-columns:1fr;gap:8px}
  .cl-met-n{margin-left:0;justify-self:start;min-width:0}
  .cl-met p{font-size:1rem}
}

/* ================================================================
   HUBS — cada categoría trae su propio esqueleto a propósito.
   Nada de repetir la misma rejilla cuatro veces: eso es justo lo
   que Google llama contenido a escala.
   ================================================================ */

/* --- nota al margen, común a los cuatro --- */
.cl-nota{
  border-left:4px solid var(--ambar);padding:.7rem 0 .7rem 1rem;
  margin:1.4rem 0 0;font-size:1.02rem;line-height:1.55;
  color:var(--ambar-alto);
}

/* --- 1. COMPAÑERAS IA: tabla de lo que se paga de verdad --- */
.cl-tabla-wrap{overflow-x:auto;margin:1.5rem 0 .6rem;-webkit-overflow-scrolling:touch}
.cl-tabla{width:100%;border-collapse:collapse;font-size:1rem;min-width:640px}
.cl-tabla th,.cl-tabla td{
  text-align:left;vertical-align:top;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.cl-tabla thead th{
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.02em;
  font-size:.86rem;background:var(--cobalto-hondo);color:#fff;
  border-bottom:2px solid var(--ambar);
}
.cl-tabla tbody th{font-weight:800;color:var(--ambar);width:22%}
.cl-tabla tbody td:first-of-type{width:26%;font-weight:600}
.cl-tabla tbody tr:nth-child(even){background:rgba(255,255,255,.035)}

/* --- 2. CAMS: fichas, dos columnas, sin tarjeta con borde redondo --- */
.cl-fichas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;margin:1.5rem 0 .4rem;border-top:2px solid var(--carmin);
}
.cl-ficha{
  padding:clamp(18px,2.2vw,26px) clamp(0px,1.4vw,22px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.cl-ficha + .cl-ficha{border-left:1px solid rgba(255,255,255,.13)}
.page .narrow .cl-ficha h3{margin:0 0 .4rem !important;font-size:1.12rem !important;color:var(--ambar)}
.cl-ficha p{margin:0;font-size:1.01rem;line-height:1.55}

/* --- 3. CITAS: filtro, pregunta grande y respuesta colgando --- */
.cl-filtro{margin:1.6rem 0 .4rem;counter-reset:filtro}
.cl-filtro-item{
  padding:clamp(18px,2.4vw,28px) 0;border-top:1px solid rgba(255,255,255,.15);
}
.cl-filtro-item:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.cl-filtro-q{
  counter-increment:filtro;
  font-family:var(--anton);text-transform:uppercase;
  font-size:clamp(20px,2.4vw,30px);line-height:1.06;letter-spacing:-.01em;
  margin:0 0 .5rem;padding-left:2.2em;position:relative;
}
.cl-filtro-q::before{
  content:counter(filtro,decimal-leading-zero);
  position:absolute;left:0;top:.06em;
  color:var(--carmin);font-size:.86em;
}
.cl-filtro-a{margin:0;padding-left:2.2em;font-size:1.04rem;line-height:1.56;max-width:66ch}

/* --- 4. ESTUDIOS: catálogo, entradas largas numeradas --- */
.cl-cat-wrap{margin:1.6rem 0 .4rem}
.cl-cat{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.4vw,30px);
  align-items:start;padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.cl-cat-n{
  font-family:var(--script);font-size:clamp(34px,4.4vw,62px);line-height:.8;
  color:var(--cobalto);opacity:.9;padding-top:.1em;
}
.page .narrow .cl-cat h3{margin:0 0 .4rem !important;font-size:clamp(19px,1.7vw,25px) !important}
.cl-cat p{margin:0 0 .85rem;font-size:1.03rem;line-height:1.56;max-width:64ch}
.cl-cat .btn-ghost{font-size:.86rem;padding:9px 16px}

@media (max-width:640px){
  .cl-ficha + .cl-ficha{border-left:0}
  .cl-ficha{padding-left:0;padding-right:0}
  .cl-filtro-q{padding-left:0;font-size:clamp(19px,5.6vw,26px)}
  .cl-filtro-q::before{position:static;display:block;margin-bottom:.1em}
  .cl-filtro-a{padding-left:0;font-size:1rem}
  .cl-cat{grid-template-columns:1fr;gap:2px}
  .cl-cat-n{font-size:38px}
  .cl-tabla{font-size:.95rem}
}

/* ================================================================
   POSICIONES — fichas técnicas. Esqueleto propio: sin números, sin
   tabla, sin rejilla de tarjetas. Cada ficha es un artículo con una
   lista de definición adentro, que es lo que de verdad es.
   ================================================================ */
.cl-pos-wrap{margin:1.6rem 0 .4rem}
.cl-pos{
  padding:clamp(22px,2.8vw,34px) 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.cl-pos:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.page .narrow .cl-pos h3{
  margin:0 0 .25rem !important;
  font-size:clamp(20px,1.9vw,27px) !important;
  color:var(--ambar);
}
.cl-pos-que{
  margin:0 0 1rem;font-family:var(--script);
  font-size:clamp(19px,2.1vw,27px);line-height:1.15;
  color:var(--cobalto);
}
.cl-pos-dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:.45rem clamp(14px,1.8vw,24px);align-items:baseline;
}
.cl-pos-dl dt{
  font-family:var(--anton,inherit);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.06em;line-height:1.5;
  color:var(--carmin-alto);white-space:nowrap;
  border-left:3px solid var(--carmin);padding-left:.6rem;
}
.cl-pos-dl dd{margin:0;font-size:1.04rem;line-height:1.56;max-width:62ch}

/* ================================================================
   LO MEJOR — ranking. Ni tarjetas ni tabla: dos columnas, el puesto
   y la categoría a la izquierda como una etiqueta de archivo, el
   veredicto y el pero a la derecha.
   ================================================================ */
.cl-rk-wrap{margin:1.6rem 0 .4rem;border-top:3px solid var(--carmin)}
.cl-rk{
  display:grid;grid-template-columns:clamp(88px,12vw,140px) 1fr;
  gap:clamp(14px,2.4vw,32px);
  padding:clamp(22px,2.8vw,34px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.cl-rk-pos{display:flex;flex-direction:column;gap:.3rem;padding-top:.1em}
.cl-rk-n{
  font-family:var(--anton,inherit);font-size:clamp(38px,5.4vw,68px);
  line-height:.82;color:var(--ambar);letter-spacing:-.02em;
}
.cl-rk-cat a{
  font-family:var(--anton,inherit);text-transform:uppercase;
  font-size:.74rem;letter-spacing:.07em;line-height:1.3;
  color:var(--cobalto);text-decoration:none;
  border-bottom:1px solid rgba(255,206,0,.5);
}
.cl-rk-cat a:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.page .narrow .cl-rk h3{margin:0 0 .4rem !important;font-size:clamp(20px,1.9vw,27px) !important}
.cl-rk-ver{margin:0 0 .7rem;font-size:1.05rem;line-height:1.56;max-width:62ch}
.cl-rk-para,.cl-rk-pero{margin:0 0 .5rem;font-size:1rem;line-height:1.52;max-width:62ch}
.cl-rk-para strong{color:var(--ambar-alto)}
.cl-rk-pero{
  border-left:3px solid var(--carmin);padding-left:.85rem;
  color:rgba(255,255,255,.86);
}
.cl-rk-pero strong{color:var(--carmin-alto)}
.cl-rk .btn{margin-top:.7rem}

@media (max-width:640px){
  .cl-pos-dl{grid-template-columns:1fr;gap:.15rem}
  .cl-pos-dl dt{margin-top:.7rem}
  .cl-pos-dl dd{font-size:1rem}
  .cl-rk{grid-template-columns:1fr;gap:.4rem}
  .cl-rk-pos{flex-direction:row;align-items:baseline;gap:.8rem}
  .cl-rk-n{font-size:40px}
}

/* ================================================================
   HERO EN AFICHE — todo en un solo eje, centrado.
   Antes esto era una parrilla de dos columnas: la marca a la
   izquierda y la baraja a la derecha. Se veía partido y las cartas
   quedaban aplastadas contra un cuadrante angosto. Ahora manda el
   nombre — CASA / LUJURIA en Anton, del ancho de la página — y las
   cinco cartas van debajo, en fila, una al lado de la otra.
   ================================================================ */
.hero-split{
  display:flex;flex-direction:column;align-items:center;
  gap:0;text-align:center;
}
.hero-col{min-width:0;width:100%}
.hero-h1.hero-mark{
  font-size:clamp(38px,13.1vw,186px) !important;
  line-height:.9 !important;white-space:nowrap;letter-spacing:-.02em;
  margin:0 0 .1em;text-align:center;
}
.hero-mark .line{display:block}
.hero-firma{
  margin:0 0 .3rem;font-family:var(--script);
  font-size:clamp(26px,3.1vw,44px);line-height:1.06;
  color:var(--carmin);text-align:center;
}
.hero-tag{
  margin:0 0 clamp(11px,1.2vw,16px);
  font-family:"Inter Tight",system-ui,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(13px,1.32vw,19px);line-height:1.45;
  color:var(--cobalto-hondo);text-align:center;
}
.hero-split .hero-lede{
  text-align:center;margin:0 auto clamp(16px,1.8vw,24px) !important;
  max-width:74ch;
}
.hero-split .hero-cta{justify-content:center;margin:0}
/* las burbujas de chat sobraban: con la baraja al lado, ensuciaban */
.hero-sec .bubble{display:none !important}

/* ================================================================
   BARAJA DEL HERO — las cinco cartas son la navegación.
   Son <a> de verdad: se pueden tabular, tienen foco visible y
   funcionan sin JavaScript. El JS solo agrega el paralaje del
   cursor, que es adorno.
   La cara de cada carta es un degradado provisional. Si la tupla
   de DECK trae ruta de imagen, --img la pisa y el degradado ya no
   se ve. Ese es todo el cambio que hay que hacer cuando llegue la
   foto de verdad.
   ================================================================ */
.hero-deck{
  display:flex;min-width:0;position:relative;z-index:5;margin:0;
}
.hd-card{
  --rot:0deg;--dx:0px;--lift:0px;
  position:relative;flex:0 0 auto;display:block;text-decoration:none;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}

/* --- ESCRITORIO: la baraja se tiende en fila -------------------
   Antes caía en vertical, amontonada, porque vivía en una columna
   angosta al lado del texto. De cada carta asomaba una franja y no
   se distinguía la foto. Ahora la baraja está tendida sobre la
   mesa: cinco cartas completas, una al lado de la otra, con una
   inclinación mínima para que se note que son naipes y no cajones.
   -------------------------------------------------------------- */
@media (min-width:901px){
  .hero-deck{
    flex-direction:row;align-items:flex-end;justify-content:center;
    width:100%;padding:0;perspective:none;
    gap:clamp(9px,1.05vw,16px);
    margin-top:clamp(20px,2.3vw,32px);
  }
  .hero-sec .hero-wrap{
    padding-top:clamp(72px,5vw,80px) !important;
    max-width:min(1290px, calc(100vw - 56px)) !important;
  }
  .hd-card{
    flex:1 1 0;min-width:0;width:auto;margin:0;
    transform-origin:50% 100%;
    transform:translateY(var(--lift)) rotate(var(--rot));
  }
  /* la inclinación se fue: cinco cartas torcidas a distinta altura se
     veían desordenadas, no barajadas. Fila recta. */
  .hero-deck .hd-card{--rot:0deg;--lift:0px}
  .hd-card:hover,.hd-card:focus-visible{--lift:-10px;z-index:9}
  /* con la carta entera a la vista, el rótulo se va abajo: arriba
     está la foto y ahí es donde uno mira primero */
  .hero-deck .hd-tit{
    top:auto;bottom:clamp(11px,1.05vw,17px);
    font-size:clamp(13px,1.18vw,19px);
  }
  .hero-deck .hd-n{top:2px;right:9px}
  /* el vaivén se fue. Movía la cara de la carta pero no el rótulo,
     que ahora va pegado al pie: la banda se despegaba de la foto
     unos pixeles y se veía el defecto. Una baraja tendida sobre la
     mesa tampoco se mueve. */
}

.hd-face{
  position:relative;display:block;width:100%;aspect-ratio:3/4;
  border-radius:18px 5px 18px 5px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.34), transparent 60%),
    linear-gradient(158deg, var(--c1), var(--c2));
  box-shadow:0 20px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(255,206,0,.28);
  transition:box-shadow .35s ease, filter .35s ease;
}
/* si hay foto, la foto manda */
.hd-face[data-img]{background:var(--img) center/cover no-repeat}
/* trama diagonal: deja claro que es relleno, no obra de arte */
/* la trama diagonal se fue: ensuciaba la carta y no aportaba nada.
   El degradado limpio ya se lee como "aqui falta la foto". */
.hd-face::before{display:none}
/* el número queda de marca de agua: ordena la baraja sin pelear con
   el nombre, que es lo que la gente sí tiene que leer */
.hd-n{
  position:absolute;z-index:2;right:6px;top:-6px;
  font-family:var(--anton,inherit);font-size:clamp(44px,4.9vw,72px);
  line-height:.9;color:rgba(255,255,255,.2);
}
/* ---- LO QUE VA ESCRITO EN LA CARTA -------------------------------
   La franja de arriba de cada carta es la única que no queda tapada
   por la carta siguiente, así que ahí va todo: el número de agua, el
   nombre de la sección en Anton y el renglón en script. Cuando entre
   la foto, esto queda encima de la foto y sigue leyéndose gracias al
   velo oscuro de ::after.
   ------------------------------------------------------------------ */
.hd-face::after{
  content:"";position:absolute;left:0;right:0;top:0;height:62%;
  background:linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.16) 62%, transparent);
  pointer-events:none;
}
/* CON FOTO NO HAY VELO. La foto se ve entera, sin trama ni sombra
   encima. El rótulo se defiende solo con su propio contorno oscuro,
   que es lo único que toca la imagen. */
.hd-face[data-img]::after{display:none}
/* EL ROTULO SE PLANTA EN SU PROPIA BANDA, AL PIE DE LA CARTA.
   Suelto sobre la foto no se leía: en las zonas claras el blanco
   desaparecía y el contorno negro, a tamaño chico, dejaba el nombre
   pareciendo negro. La banda es angosta y va pegada al borde de
   abajo: tapa el filo de la foto, no la foto. */
.hd-face[data-img] + .hd-tit{
  top:auto;bottom:0;left:0;right:0;
  padding:.62em clamp(9px,.85vw,14px) .55em;
  background:linear-gradient(180deg, rgba(6,5,16,0), rgba(6,5,16,.9) 46%, rgba(6,5,16,.95));
  border-radius:0 0 5px 18px;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
/* el renglón en script era el relleno de la carta sin foto. Con foto
   sobra: es una línea más encima de la imagen. */
.hd-face[data-img] .hd-glifo{display:none}
/* el número de agua era del reparto viejo, cuando las cartas estaban
   amontonadas y había que saber cuál era cuál. Sobre la foto queda
   como una marca de agua de banco de imágenes. Fuera. */
.hd-face[data-img] .hd-n{display:none}
.hd-tit{
  position:absolute;z-index:3;left:0;right:0;
  top:clamp(12px,1.25vw,18px);
  padding:0 clamp(10px,1vw,15px);
  display:flex;align-items:baseline;gap:.42em;
  font-family:var(--anton,inherit);text-transform:uppercase;
  font-size:clamp(14px,1.42vw,21px);letter-spacing:.02em;line-height:1.04;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hd-go{
  font-style:normal;flex:0 0 auto;
  color:var(--ambar-alto);font-size:.86em;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.hd-card:hover .hd-go,.hd-card:focus-visible .hd-go{transform:translateX(5px)}
/* el renglón en script: son las palabras de la casa, no relleno */
.hd-glifo{
  position:absolute;z-index:3;left:clamp(10px,1vw,15px);right:clamp(8px,.8vw,12px);
  top:clamp(40px,3.9vw,56px);
  font-family:var(--script);font-size:clamp(15px,1.6vw,23px);
  line-height:1.05;color:var(--ambar-alto);
  text-shadow:0 2px 10px rgba(0,0,0,.66);
}
.hd-card:hover .hd-face,.hd-card:focus-visible .hd-face{
  box-shadow:0 30px 66px rgba(0,0,0,.6), 0 0 0 2px var(--ambar);
  filter:saturate(1.15) brightness(1.08);
}
.hd-card:focus{outline:none}
.hd-card:focus-visible .hd-face{outline:2px solid var(--ambar);outline-offset:3px}

/* ---- la flechita: que se sepa que hay más abajo ---- */
.hero-sec{padding-bottom:clamp(26px,2.8vw,44px) !important}
.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  width:max-content;margin:clamp(12px,1.5vw,20px) auto 0;
  text-decoration:none;color:inherit;opacity:.72;
  transition:opacity .3s ease, transform .3s ease;
}
.hero-scroll:hover,.hero-scroll:focus-visible{opacity:1;transform:translateY(3px)}
.hs-txt{
  font-family:var(--anton,inherit);text-transform:uppercase;
  font-size:.66rem;letter-spacing:.22em;color:var(--ambar-alto);
}
.hs-rail{
  position:relative;display:block;width:1px;height:40px;
  background:linear-gradient(180deg, rgba(255,206,0,.55), rgba(255,206,0,0));
}
.hs-dot{
  position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--ambar);
  box-shadow:0 0 10px rgba(255,206,0,.9);
  animation:hsFall 2.2s cubic-bezier(.55,0,.35,1) infinite;
}
@keyframes hsFall{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{transform:translateY(36px);opacity:0}
}
.hs-chev{
  display:block;width:11px;height:11px;margin-top:-4px;
  border-right:2px solid var(--carmin-alto);border-bottom:2px solid var(--carmin-alto);
  transform:rotate(45deg);
}
@media (prefers-reduced-motion: reduce){
  .hs-dot{animation:none;opacity:1}
  .hd-card{transition:none}
}

/* ---- tableta y abajo: se apila, y la baraja pasa al final ---- */
@media (max-width:900px){
  .hero-split{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:0;
  }
  .hero-h1.hero-mark,.hero-firma,.hero-tag,
  .hero-split .hero-lede{text-align:center}
  .hero-split .hero-lede{margin-left:auto !important;margin-right:auto !important}
  .hero-split .hero-cta{justify-content:center}
  /* el abanico en miniatura no servía: cinco naipes de 100 px en un
     teléfono son cinco manchas. Aquí se abre en cuadrícula de dos, con
     la quinta atravesada de lado a lado. Las fotos se ven. */
  .hero-deck{
    order:2;margin-top:clamp(22px,4.4vw,34px);padding:0;
    flex-flow:row wrap;justify-content:center;align-items:stretch;
    gap:clamp(8px,2.3vw,12px);width:100%;perspective:none;
  }
  .hd-card{
    flex:0 0 calc(50% - clamp(4px,1.15vw,6px));
    width:auto;margin:0;transform:none;
  }
  .hd-card:nth-child(5){flex-basis:100%}
  .hero-deck .hd-face{aspect-ratio:4/5}
  .hero-deck .hd-card:nth-child(5) .hd-face{aspect-ratio:16/9}
  .hd-card:hover,.hd-card:focus-visible{transform:none}
  /* el rótulo va abajo, sobre la esquina, y ya cabe entero */
  .hero-deck .hd-tit{
    top:auto;bottom:9px;padding:0 10px;display:flex;
    font-size:13.5px;letter-spacing:.015em;line-height:1.15;
    overflow-wrap:anywhere;
  }
  .hd-n{display:none}
  .hd-face::after{height:52%}
}

/* tableta: caben tres por fila. En dos columnas las cartas se ponían
   enormes y el hero se estiraba casi dos mil pixeles. */
@media (min-width:601px) and (max-width:900px){
  .hd-card{flex:0 0 calc(33.333% - clamp(6px,1.6vw,9px))}
  .hd-card:nth-child(5){flex-basis:calc(33.333% - clamp(6px,1.6vw,9px))}
  .hero-deck .hd-card:nth-child(5) .hd-face{aspect-ratio:4/5}
  .hero-deck .hd-tit{font-size:15px}
}
@media (max-width:900px){
  .hero-h1.hero-mark{margin-bottom:.24em}
}

/* ================================================================
   LA BARRA DE ARRIBA — la píldora venía centrada con position:absolute,
   así que entre los 900 y los 1280 px se le montaba encima al logotipo
   y "Casa Lujuria" quedaba cortado en "Casa Luj". En ese tramo la
   píldora deja de flotar y se alinea a la derecha: así no hay manera
   de que se pisen.
   ================================================================ */
@media (min-width:901px) and (max-width:1279px){
  header.nav .brand{font-size:1.1rem !important}
  header.nav nav.pill{
    position:static !important;transform:none !important;
    margin-left:auto !important;
  }
  header.nav nav.pill a{padding:9px 11px !important;font-size:.8rem !important}
  header.nav a.nav-cta{
    margin-left:10px !important;padding:8px 13px !important;font-size:.84rem !important;
  }
}

/* ================================================================
   LA FACHADA — el hero deja de ser un alambrado.
   Estaba correcto y estaba muerto: un nombre plano, una frase, un
   botón y cinco rectángulos. Correcto no es lo mismo que tener
   cara. Casa Lujuria es una casa, y una casa se anuncia desde la
   fachada: el sol detrás, el nombre pintado a mano con la tinta
   corrida, la cinta tricolor y cinco puertas de arco.
   Todo esto es CSS puro. Ni una etiqueta nueva, ni un kilobyte de
   JavaScript, así que no hay que regenerar las 14 páginas.
   ================================================================ */

/* --- 1. EL SOL DETRAS DE LA CASA --------------------------------
   Rayos en abanico saliendo de un punto alto y central, justo
   detrás del nombre. Es el recurso del afiche de feria de toda la
   vida: llena el fondo sin meter una sola imagen. La máscara los
   apaga hacia afuera para que no lleguen nunca a los bordes ni
   compitan con las fotos.
   El overflow:hidden no es adorno: el disco de rayos mide 190vmax
   y sin él aparecería barra de desplazamiento horizontal.
   ---------------------------------------------------------------- */
.hero-sec{position:relative;overflow:hidden;isolation:isolate}
.hero-sec::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:clamp(150px,17vw,300px);
  width:190vmax;height:190vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 6deg,
    rgba(255,255,255,.17) 0deg 4.6deg,
    rgba(255,255,255,0) 4.6deg 12deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 4%,rgba(0,0,0,.6) 30%,transparent 62%);
          mask-image:radial-gradient(closest-side,#000 4%,rgba(0,0,0,.6) 30%,transparent 62%);
}
/* y un rescoldo cálido en el mismo punto, para que el nombre no
   flote sobre un amarillo liso */
.hero-sec::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:clamp(120px,14vw,250px);
  width:min(1500px,145vw);height:min(1500px,145vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(255,232,170,.62), rgba(255,214,119,.24) 46%, transparent 72%);
}

/* --- 2. EL NOMBRE PINTADO ---------------------------------------
   Serigrafía mal registrada: la plancha roja y la azul quedaron
   corridas debajo de la tinta oscura. Es el defecto de imprenta
   que uno ve en los afiches de chiva y en los carteles de barrio,
   y es amarillo-azul-rojo sin necesidad de explicarlo.
   El relleno sigue siendo el azul más hondo, que es lo único que
   se lee de verdad encima del amarillo.
   ---------------------------------------------------------------- */
.hero-h1.hero-mark{
  position:relative;z-index:2;
  color:var(--cobalto-hondo) !important;
  -webkit-text-fill-color:var(--cobalto-hondo);
  text-shadow:
    .022em .026em 0 var(--carmin),
    .044em .052em 0 rgba(255,206,0,.85),
    .052em .062em 0 rgba(18,38,107,.28),
    0 .09em .16em rgba(90,50,0,.22) !important;
}

/* --- 3. LA CINTA ------------------------------------------------
   Amarillo, azul y rojo en tres tramos duros, colgada debajo del
   botón. Cierra el bloque de texto y abre el de las puertas: sin
   ella, la frase y las fotos se tocaban sin transición.
   ---------------------------------------------------------------- */
.hero-split .hero-col{position:relative;z-index:2}
.hero-split .hero-col::after{
  content:"";display:block;
  width:min(300px,58%);height:6px;
  margin:clamp(22px,2.4vw,34px) auto 0;
  background:var(--cinta);
  border-radius:99px;
  box-shadow:0 2px 0 rgba(60,30,0,.16), 0 6px 18px rgba(0,0,0,.14);
}

/* --- 4. LAS CINCO PUERTAS ---------------------------------------
   El arco es el logotipo de la casa. Las cartas dejan de ser
   rectángulos y se vuelven vanos de arco con marco dorado y filete
   azul, como una arcada de fachada colonial. El marco es sombra,
   no borde, así que no le roba un pixel a la foto.
   ---------------------------------------------------------------- */
.hd-face{
  border-radius:50% 50% 7px 7px / 27% 27% 4px 4px;
  box-shadow:
    0 0 0 3px var(--ambar),
    0 0 0 5px var(--cobalto-hondo),
    0 22px 44px rgba(60,30,0,.34),
    inset 0 -70px 90px -50px rgba(0,0,0,.85);
  transition:box-shadow .35s ease, filter .35s ease;
}
/* la foto se muda a su propia capa para poder acercarla al pasar
   el cursor: el fondo del elemento no se puede animar sin saltos */
.hd-face[data-img]{background:none}
.hd-face[data-img]::before{
  content:"";display:block;position:absolute;inset:0;z-index:0;
  background:var(--img) center/cover no-repeat;
  transition:transform .75s cubic-bezier(.2,.7,.3,1);
}
.hd-card:hover .hd-face[data-img]::before,
.hd-card:focus-visible .hd-face[data-img]::before{transform:scale(1.075)}
/* el rótulo sigue su propia banda al pie, ahora con las esquinas
   del vano nuevo */
.hd-face[data-img] + .hd-tit{border-radius:0 0 7px 7px}
.hd-card:hover .hd-face,.hd-card:focus-visible .hd-face{
  box-shadow:
    0 0 0 3px var(--ambar-alto),
    0 0 0 6px var(--carmin),
    0 30px 58px rgba(60,30,0,.44),
    inset 0 -70px 90px -50px rgba(0,0,0,.8);
  filter:saturate(1.12) brightness(1.05);
}

/* --- 5. LA ARCADA -----------------------------------------------
   Las cinco puertas no van a ras: describen una bóveda. La del
   centro es la más alta y las de los extremos bajan. Es simétrico
   y por eso se lee como arquitectura y no como desorden — que es
   justo lo que fallaba cuando estaban torcidas cada una a su aire.
   ---------------------------------------------------------------- */
@media (min-width:901px){
  .hero-deck{align-items:flex-start;padding-bottom:9px}
  .hero-deck .hd-card{--arc:0px;--lift:0px}
  .hero-deck .hd-card{
    transform:translateY(calc(var(--arc) + var(--lift)));
  }
  .hero-deck .hd-card:nth-child(1),
  .hero-deck .hd-card:nth-child(5){--arc:11px}
  .hero-deck .hd-card:nth-child(2),
  .hero-deck .hd-card:nth-child(4){--arc:5px}
  .hero-deck .hd-card:nth-child(3){--arc:0px}
  .hero-deck .hd-card:hover,
  .hero-deck .hd-card:focus-visible{--lift:-13px;z-index:9}
  .hero-deck .hd-tit{bottom:clamp(9px,.9vw,15px)}
}

/* --- 6. TELEFONO ------------------------------------------------
   La quinta puerta ya no se atraviesa de lado a lado: en apaisado
   el arco queda aplastado y parece un error. Va a media caja como
   las otras cuatro, centrada, y quedan dos, dos y una.
   ---------------------------------------------------------------- */
@media (max-width:600px){
  .hero-deck .hd-card:nth-child(5){
    flex-basis:calc(50% - clamp(4px,1.15vw,6px));
  }
  .hero-deck .hd-card:nth-child(5) .hd-face{aspect-ratio:4/5}
}
@media (max-width:900px){
  .hd-face{
    box-shadow:
      0 0 0 2px var(--ambar),
      0 0 0 4px var(--cobalto-hondo),
      0 14px 30px rgba(60,30,0,.32),
      inset 0 -60px 76px -46px rgba(0,0,0,.85);
  }
  .hero-split .hero-col::after{width:min(220px,64%);height:5px}
}

/* --- 7. PISANDO LA CAPA DE DIA ----------------------------------
   dia.css carga después de este archivo y reasigna los nombres de
   color de la paleta nocturna, así que --cobalto-hondo allá no es
   azul marino sino el azul de bandera, y el nombre salía celeste.
   Aquí se usan los colores del día por su nombre real y con peso
   suficiente para ganarle a los !important de esa capa.
   ---------------------------------------------------------------- */
.hero-sec .hero-h1.hero-mark,
.hero-sec .hero-h1.hero-mark .line,
.hero-sec .hero-h1.hero-mark .word{
  color:var(--tinta) !important;
  -webkit-text-fill-color:var(--tinta) !important;
}
/* dos planchas y ya: el rojo pisado y el azul detrás. Con tres
   fantasmas el nombre vibraba y a 186px parecía error, no oficio. */
.hero-sec .hero-h1.hero-mark .line{
  text-shadow:
    .022em .026em 0 var(--rojo),
    .044em .052em 0 var(--azul),
    0 .085em .15em rgba(90,72,0,.24) !important;
}
/* Fahnenordnung: schwarz, rot, gold. Nicht vertauschen. */
.hero-split .hero-col::after{
  background:linear-gradient(90deg,
    var(--azul) 0 33.34%,
    var(--rojo) 33.34% 66.67%,
    var(--sol-alto) 66.67% 100%);
  box-shadow:0 0 0 2px rgba(11,11,15,.75), 0 7px 20px rgba(11,11,15,.18);
}
/* marco dorado con filete de tinta: dia.css lo borraba entero */
.hero-deck .hd-face{
  box-shadow:
    0 0 0 3px var(--sol-alto),
    0 0 0 6px var(--tinta),
    0 22px 44px rgba(11,11,15,.32),
    inset 0 -70px 90px -50px rgba(0,0,0,.85) !important;
}
.hero-deck .hd-card:hover .hd-face,
.hero-deck .hd-card:focus-visible .hd-face{
  box-shadow:
    0 0 0 3px #fff2c4,
    0 0 0 6px var(--rojo),
    0 30px 58px rgba(11,11,15,.42),
    inset 0 -70px 90px -50px rgba(0,0,0,.8) !important;
}
@media (max-width:900px){
  .hero-deck .hd-face{
    box-shadow:
      0 0 0 2px var(--sol-alto),
      0 0 0 4px var(--tinta),
      0 14px 30px rgba(11,11,15,.3),
      inset 0 -60px 76px -46px rgba(0,0,0,.85) !important;
  }
}

/* --- libro de gastos: la tabla de recibos de /sobre-nosotros/ --- */
.cl-tabla--gastos{min-width:820px}
.cl-tabla--gastos .cl-plata{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;white-space:nowrap}
.cl-tabla--gastos thead th:nth-child(4),.cl-tabla--gastos thead th:nth-child(5){text-align:right}
.cl-tabla--gastos tbody th{width:14%;white-space:nowrap}
.cl-tabla--gastos tfoot th,.cl-tabla--gastos tfoot td{
  border-top:2px solid var(--rojo);font-weight:800;background:rgba(255,255,255,.06)}
/* el bloque de contadores acepta 3 o 6 sin romperse */
.stats:has(> .stat:nth-child(5)){grid-template-columns:repeat(3,1fr)}

/* --- regla de la casa: la conclusión personal, en grande ---------------
   Un bloque a propósito distinto de todo lo demás: aquí no habla el sitio,
   habla Ian. Va con la regla en script grande y la explicación abajo en
   texto normal, para que se lea como una nota escrita a mano y no como
   otro párrafo más. Se reutiliza en cualquier página. */
.cl-regla{
  position:relative;margin:2.2rem 0 1.6rem;padding:1.9rem 1.7rem 1.5rem 2.1rem;
  background:linear-gradient(180deg,rgba(221,0,0,.16),rgba(11,11,15,.34));
  border:2px solid var(--carmin);border-left-width:10px;border-radius:2px;
  box-shadow:8px 8px 0 rgba(11,11,15,.35);
}
.cl-regla::before{
  content:"REGLA DE LA CASA";position:absolute;top:-.72rem;left:1.6rem;
  font-family:var(--anton,inherit);font-size:.72rem;letter-spacing:.14em;
  background:var(--carmin);color:#fff;padding:.28rem .6rem;line-height:1;
}
.cl-regla q{quotes:none}
.cl-regla-frase{
  font-family:var(--script);font-size:clamp(26px,3.6vw,44px);line-height:1.24;
  color:var(--ambar-alto);margin:0 0 1.1rem;padding-bottom:.1em;display:block;
}
.cl-regla p{margin:0 0 .85rem;line-height:1.6}
.cl-regla p:last-child{margin-bottom:0}
.cl-regla-firma{
  font-size:.94rem;color:rgba(255,255,255,.62);font-style:italic;
  border-top:1px solid rgba(255,255,255,.16);padding-top:.8rem;margin-top:1.1rem !important;
}
@media (max-width:640px){
  .cl-regla{padding:1.6rem 1.1rem 1.2rem 1.3rem;border-left-width:7px;box-shadow:5px 5px 0 rgba(11,11,15,.35)}
}

/* ==================================================================
   TABLAS EN MÓVIL — se rompen en tarjetas, no se arrastran de lado.
   Antes tenían min-width:640px adentro de un contenedor con scroll
   horizontal: en un teléfono había que empujar la tabla con el dedo
   para leer la tercera columna, que es justo donde está lo que
   importa. Ahora cada renglón es una tarjeta con su rótulo encima,
   y el <thead> se esconde (queda para lectores de pantalla).
   ================================================================== */
@media (max-width:760px){
  .cl-tabla-wrap{overflow:visible;margin:1.7rem 0 .8rem}
  .cl-tabla{min-width:0;width:100%;display:block;font-size:1.06rem}
  .cl-tabla thead{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cl-tabla tbody,.cl-tabla tfoot,.cl-tabla tr,
  .cl-tabla th,.cl-tabla td{display:block;width:auto}
  .cl-tabla tbody tr,.cl-tabla tfoot tr{
    margin:0 0 16px;padding:0;overflow:hidden;
    border:2px solid var(--carmin);border-left-width:9px;
    background:rgba(11,11,15,.30);
    box-shadow:5px 5px 0 rgba(11,11,15,.30);
  }
  .cl-tabla tbody tr:nth-child(even){background:rgba(11,11,15,.30)}
  .cl-tabla tbody th,.cl-tabla tfoot th{
    width:auto;font-family:var(--anton);text-transform:uppercase;
    letter-spacing:.02em;font-size:1.12rem;line-height:1.16;
    background:var(--cobalto-hondo);color:#fff;
    padding:12px 15px;border-bottom:2px solid var(--ambar);
  }
  .cl-tabla tbody td,.cl-tabla tfoot td{
    padding:12px 15px;line-height:1.5;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .cl-tabla tbody td:last-child,.cl-tabla tfoot td:last-child{border-bottom:none}
  .cl-tabla tbody td::before,.cl-tabla tfoot td::before{
    content:attr(data-th);display:block;margin-bottom:4px;
    font-family:var(--anton);font-size:.7rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ambar);
  }
  .cl-tabla tbody td:not([data-th])::before,
  .cl-tabla tfoot td:not([data-th])::before{display:none}
  .cl-tabla tbody td:first-of-type{width:auto;font-weight:400}
  .cl-nota{font-size:1.06rem}
}

/* ==================================================================
   TAMAÑO EN TELÉFONO — Ian: "text is so small on mobile".
   El bloque de arriba BAJABA la lede a 1.08rem en móvil, que es más
   chica que el cuerpo. Se invierte: en pantalla chica el cuerpo sube
   y la lede se queda por encima del cuerpo, como debe ser.
   ================================================================== */
@media (max-width:760px){
  body{font-size:19px}
  .page .narrow p,
  .page .narrow li{font-size:1.02rem;line-height:1.62}
  .feat-blurb,.cat-body p,.step-card p,.ls-scan li,.faq-item p{font-size:1.06rem}
  .cl-esc-row p{font-size:1.04rem}
  .cl-met p{font-size:1.05rem}
  .cl-ficha p{font-size:1.04rem}
  .cl-regla p{font-size:1.04rem;line-height:1.62}
}
@media (max-width:640px){
  .lede,.hero-lede{font-size:1.22rem !important;line-height:1.45}
  .ls-byline,.ls-updated{font-size:1rem}
  .faq-item summary{font-size:1.08rem}
}

/* ==================================================================
   TABLAS EN ESCRITORIO — "clunky, hard to see, not in my face".
   Antes era una rejilla plana sin marco: se confundía con el fondo.
   Ahora la tabla va adentro de un marco carmín con sombra dura,
   la cabecera pesa más y el cuerpo respira. Mismo dato, se ve.
   ================================================================== */
@media (min-width:761px){
  .cl-tabla-wrap{
    border:3px solid var(--carmin);
    box-shadow:9px 9px 0 rgba(11,11,15,.35);
    margin:2rem 0 1rem;
  }
  .cl-tabla{font-size:1.05rem}
  .cl-tabla thead th{
    font-size:.86rem;letter-spacing:.1em;padding:14px 16px;
  }
  .cl-tabla th,.cl-tabla td{padding:14px 16px;line-height:1.55}
  .cl-tabla tbody th{font-size:1.06rem;line-height:1.25}
  .cl-tabla tbody tr:hover{background:rgba(255,255,255,.06)}
}

/* alineación de las cifras: en tarjeta el rótulo y el número van
   a la izquierda como todo lo demás, si no queda descuadrado. */
@media (max-width:760px){
  .cl-tabla--gastos .cl-plata{text-align:left !important}
  .cl-tabla--gastos tfoot th{white-space:normal}
}

/* ---------------- Einwilligungsbanner -----------------------------
   Sitzt unten, nimmt eine Fahnenkante mit und geht nach einem Klick
   fuer immer weg. Kein Overlay, kein Sperrbildschirm: die Seite ist
   ohne Messung genauso benutzbar, also darf das Banner auch nichts
   blockieren. Der Ablehnen-Knopf steht bewusst gleich gross daneben. */
.lv-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  background:var(--ink,#17171e);
  border-top:3px solid transparent;
  border-image:var(--cinta) 1;
  box-shadow:0 -18px 50px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.lv-consent[data-in]{transform:none}
.lv-consent-in{
  max-width:var(--maxw,1120px);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.lv-consent-txt{
  margin:0;flex:1;min-width:260px;
  font-size:.92rem;line-height:1.5;color:var(--muted,rgba(246,239,226,.6));
}
.lv-consent-txt strong{color:var(--text,#f6efe2);font-weight:600}
.lv-consent-txt a{color:var(--ambar,#ffce00);text-decoration:underline;text-underline-offset:3px}
.lv-consent-btns{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lv-consent .btn{padding:11px 22px;font-size:.92rem}
.lv-consent .lv-no{
  background:none;border:1px solid var(--line-strong,rgba(246,239,226,.22));
  color:var(--text,#f6efe2);font:inherit;font-size:.92rem;
  padding:10px 20px;border-radius:999px;cursor:pointer;
  transition:background .16s ease;
}
.lv-consent .lv-no:hover{background:rgba(246,239,226,.08)}
@media(max-width:620px){
  .lv-consent-in{padding:16px 18px;gap:14px}
  .lv-consent-btns{width:100%}
  .lv-consent-btns .btn,.lv-consent .lv-no{flex:1;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .lv-consent{transition:none}
}