/* ================================================================
   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:#f2b233;
  --ambar-alto:#ffd677;
  --carmin:#e5223f;
  --carmin-alto:#ff5f70;
  --cobalto:#2f6bff;
  --cobalto-hondo:#12266b;
  --noche:#050814;
  --cinta:linear-gradient(90deg,var(--ambar) 0 33.33%,var(--carmin) 33.33% 66.66%,var(--cobalto) 66.66% 100%);
}

/* ---------------- 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(242,178,51,.16) 22%,transparent 30%),
    linear-gradient(102deg,transparent 40%,rgba(229,34,63,.20) 49%,transparent 58%),
    linear-gradient(102deg,transparent 66%,rgba(47,107,255,.17) 76%,transparent 85%),
    /* warm floor glow, low and wide */
    radial-gradient(120% 55% at 50% 118%,rgba(242,178,51,.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(47,107,255,.09),rgba(7,10,24,.55)) !important;
  border-color:rgba(47,107,255,.24) !important}
.faq{border-top:1px solid rgba(47,107,255,.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(242,178,51,.35) !important;
  background:linear-gradient(180deg,rgba(242,178,51,.08),rgba(7,10,24,.4)) !important}
::selection{background:var(--carmin);color:#fff}

/* ---------------- brand mark: an arch, not a diamond -------------- */
.brand svg{overflow:visible}
.brand span{letter-spacing:-.01em}
.brand .casa-arco{filter:drop-shadow(0 0 10px rgba(229,34,63,.45))}

/* ---------------- 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(242,178,51,.4);
}
.casa-aparte{
  margin:1.6rem 0;padding:1rem 1.15rem;border-radius:14px;
  background:rgba(47,107,255,.07);border:1px solid rgba(47,107,255,.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(5,8,20,.18),rgba(5,8,20,.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(47,107,255,.10) !important;border-bottom-color:var(--cobalto) !important}
.btn-gold{border:1px solid rgba(242,178,51,.5) !important;border-bottom:3px solid var(--ambar) !important}

/* nav: a flat bar with hairline dividers, not a floating capsule */
.pill{
  background:rgba(16,26,51,.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(47,107,255,.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,#141230);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(20,18,48,.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(47,107,255,.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 PARTIDO — la marca a la izquierda, la baraja a la derecha.
   La izquierda es el afiche: CASA / LUJURIA en Anton, la firma en
   script y la línea azul debajo. Nada más. Todo el movimiento vive
   en el cuadrante derecho, que es donde está la baraja.
   ================================================================ */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(24px,4vw,64px);
  text-align:left;
}
.hero-col{min-width:0}
.hero-h1.hero-mark{
  font-size:clamp(56px,8.6vw,132px) !important;
  line-height:.86 !important;letter-spacing:-.015em;
  margin:0 0 .16em;text-align:left;
}
.hero-mark .line{display:block}
.hero-firma{
  margin:0 0 .5rem;font-family:var(--script);
  font-size:clamp(30px,3.9vw,58px);line-height:1.1;
  color:var(--carmin);text-align:left;
}
.hero-tag{
  margin:0 0 clamp(18px,2.2vw,30px);
  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:left;
}
.hero-split .hero-lede{
  text-align:left;margin:0 0 clamp(18px,2.2vw,28px) !important;
  max-width:46ch;
}
.hero-split .hero-cta{justify-content:flex-start;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 cae en vertical --------------------
   La columna de la derecha es alta y angosta, así que la baraja
   también cae hacia abajo, no de lado. El paralaje del cursor
   sigue el mismo eje: las cartas de más abajo se mueven más.
   La que uno señala sale hacia la derecha y deja el rótulo a la
   izquierda, que es donde hay aire.
   -------------------------------------------------------------- */
@media (min-width:901px){
  .hero-deck{
    flex-direction:column;align-items:center;
    padding:clamp(10px,1.4vw,22px) 0 clamp(14px,1.8vw,26px);
    perspective:1100px;
  }
  .hd-card{
    width:clamp(120px,13.6vw,178px);
    margin-top:clamp(-150px,-10.8vw,-92px);
    transform-origin:50% 50%;
    transform:
      translate3d(
        calc(var(--dx) + var(--mx,0) * 7px),
        calc(var(--my,0) * (var(--i) - 2) * 7px),
        0)
      rotate(var(--rot)) rotateX(calc(var(--my,0) * -5deg));
  }
  .hd-card:first-child{margin-top:0}
  .hero-deck .hd-card:nth-child(1){--rot:-8deg;--dx:-86px}
  .hero-deck .hd-card:nth-child(2){--rot:-4deg;--dx:-43px}
  .hero-deck .hd-card:nth-child(3){--rot:0deg;--dx:0px}
  .hero-deck .hd-card:nth-child(4){--rot:4deg;--dx:43px}
  .hero-deck .hd-card:nth-child(5){--rot:8deg;--dx:86px}
  .hd-card:hover,.hd-card:focus-visible{
    --rot:0deg;z-index:9;
    transform:translate3d(calc(var(--dx) + 26px),-6px,0) scale(1.06);
  }
  /* el vaivén va en el eje vertical y desfasado carta por carta,
     que es como cae una baraja de verdad */
  .hd-face{
    animation:hdOnda 6.4s ease-in-out infinite;
    animation-delay:calc(var(--i) * -.9s);
  }
  @keyframes hdOnda{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (prefers-reduced-motion: reduce){.hd-face{animation:none}}
}

.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(242,178,51,.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 */
.hd-face::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(58deg, rgba(0,0,0,.16) 0 2px, transparent 2px 11px);
  mix-blend-mode:overlay;
}
.hd-face[data-img]::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;
}
.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(18px,2.2vw,30px) 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(242,178,51,.55), rgba(242,178,51,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(242,178,51,.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}
  .hero-deck{order:2;margin-top:clamp(28px,5vw,40px);padding-bottom:0}
  /* en el teléfono el nombre va escrito en la carta y se inclina con
     ella, como en un abanico de naipes de verdad. Debajo se veía
     torcido y se chocaba con la flechita. */
  .hd-tit{
    top:7px;padding:0 6px;display:block;
    font-size:8.5px;letter-spacing:.01em;line-height:1.2;
    overflow-wrap:anywhere;
  }
  /* el número se sale: en el abanico la carta siguiente lo tapa y
     quedaban unos sí y otros no */
  .hd-glifo,.hd-go,.hd-n{display:none}
  .hd-face::after{height:52%}
  .hd-card{
    width:clamp(74px,20.4vw,104px);margin-left:-12px;
    transform:translateY(var(--lift)) rotate(var(--rot));
  }
  .hd-card:first-child{margin-left:0}
  .hd-card:hover,.hd-card:focus-visible{--lift:-14px;--rot:0deg;z-index:9}
  .hero-deck{perspective:none;align-items:flex-start}
  .hero-deck .hd-card:nth-child(1){--rot:-10deg;--lift:18px}
  .hero-deck .hd-card:nth-child(2){--rot:-5deg;--lift:6px}
  .hero-deck .hd-card:nth-child(4){--rot:5deg;--lift:6px}
  .hero-deck .hd-card:nth-child(5){--rot:10deg;--lift:18px}
}
@media (max-width:640px){
  .hero-h1.hero-mark{font-size:clamp(46px,15vw,72px) !important}
  .hero-firma{font-size:clamp(26px,8.4vw,40px)}
  .hero-tag{font-size:12.5px;letter-spacing:.04em}
}

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