/* ================================================================
   CASA LUJURIA — CAPA DE DÍA
   The house with the shutters open.

   Colombia's flag isn't three equal stripes: yellow takes the top
   half, then blue, then red. So the page is built in that order —
   a yellow field for the top half of the scroll, a blue band across
   the middle, red carrying the bottom. The colours aren't decoration
   sitting on a dark room, they ARE the room, in the flag's own
   proportions.

   Loaded after casa.css. Everything here is an override; deleting
   this one <link> puts the night version back untouched.
   ================================================================ */

:root{
  /* the field */
  --sol:#e9b62b;            /* plaster amber, the ground */
  --sol-alto:#f6cf55;       /* sunlit edge */
  --sol-hondo:#c9931a;      /* the ochre in shadow */
  --crema:#fdf5e2;          /* card stock */
  --crema2:#f7e8c4;
  --tinta:#141230;          /* deep ink — everything readable */
  --azul:#0d3a94;           /* flag blue, does the structure */
  --azul-alto:#1f57cc;
  --rojo:#ce1126;           /* flag red, does the signal */
  --rojo-alto:#e8324a;

  /* flag order, top to bottom: half yellow, quarter blue, quarter red */
  --cinta:linear-gradient(90deg,var(--sol) 0 50%,var(--azul) 50% 75%,var(--rojo) 75% 100%);

  /* --- flip the inherited token set ------------------------------ */
  --wine:var(--sol); --wine2:var(--sol); --bg:var(--sol);
  --ink:var(--crema); --ink2:var(--crema2);
  --text:var(--tinta);
  --muted:rgba(20,18,48,.70);
  --muted2:rgba(20,18,48,.46);
  --line:rgba(20,18,48,.16);
  --line-strong:rgba(20,18,48,.32);
  --gold:var(--azul);       /* the "accent" slot now carries blue */
  --rouge:var(--rojo); --rouge2:var(--rojo-alto);
  --red:var(--rojo); --blue:var(--azul);
  --blush:var(--sol-alto);
  --accent:var(--rojo); --accent-2:var(--azul);
  --good:var(--azul); --warn:var(--rojo);
  --glass:rgba(253,245,226,.78); --glass-2:rgba(253,245,226,.9);
  --glow:rgba(206,17,38,.22); --glow-blue:rgba(13,58,148,.18);
  --bg-elev:var(--crema); --border:var(--line);

  /* casa.css keeps calling these; point them somewhere legible */
  --ambar:var(--sol-hondo); --ambar-alto:var(--sol-hondo);
  --carmin:var(--rojo); --carmin-alto:var(--rojo-alto);
  --cobalto:var(--azul); --cobalto-hondo:var(--azul);
  --noche:var(--tinta);
}

body{background:var(--sol) !important;color:var(--tinta) !important}

/* ---------------- the field --------------------------------------
   Sun coming in high and left, plaster soaking it up. No blur-blobs:
   this is a wall, not a nightclub. */
body.lqx::before{
  content:'';position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(120% 70% at 18% -10%,rgba(255,242,199,.85),transparent 62%),
    radial-gradient(100% 60% at 88% 8%,rgba(255,232,163,.55),transparent 60%),
    linear-gradient(180deg,var(--sol-alto) 0%,var(--sol) 34%,var(--sol-hondo) 100%);
  filter:none;animation:none;
}
/* plaster tooth — a fine diagonal grain in ink, not light */
body.lqx::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:repeating-linear-gradient(58deg,rgba(20,18,48,.055) 0 1px,transparent 1px 26px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.14) 60%,rgba(0,0,0,.3));
  animation:none;
}
.orbs,.embers,.grain{display:none !important}

/* ---------------- chrome ------------------------------------------ */
.nav{background:transparent}
.brand span{color:var(--tinta)}
.brand .casa-arco{filter:none}
.pill{
  background:rgba(253,245,226,.86) !important;
  border:1px solid rgba(20,18,48,.18) !important;
}
.pill a{color:var(--tinta) !important}
.pill a + a{border-left:1px solid rgba(20,18,48,.14)}
.pill a:hover{background:rgba(13,58,148,.12) !important}
.nav-cta{
  background:var(--rojo) !important;color:#fff !important;
  border-bottom:2px solid var(--azul) !important;
}
.nav-burger span{background:var(--tinta)}
.nav-mobile{background:var(--crema) !important}
.nav-mobile a{color:var(--tinta) !important}

/* ---------------- type on a field --------------------------------- */
h1,h2,h3,h4,.hero-h1,.feat-h2,.cta-h2,.show-h2,.ls-disp-line{color:var(--tinta) !important}
.hero-serif{color:var(--rojo) !important}
.hero-h1 .line:not(.hero-serif){
  color:var(--tinta) !important;
  text-shadow:0 2px 0 rgba(255,246,214,.55);   /* letterpress, not glow */
}
.eyebrow{color:var(--azul) !important}
.eyebrow::before{background:linear-gradient(90deg,var(--rojo),var(--azul)) !important}
.lede,.muted,p{color:inherit}
.lede,.hero-lede{color:rgba(20,18,48,.74) !important}
a{color:var(--azul)}
a:hover{color:var(--rojo)}
.go{color:var(--azul) !important}
.shimmer .word,.shimmer-txt{
  background:linear-gradient(100deg,var(--rojo) 0%,var(--sol-hondo) 45%,var(--azul) 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
}

/* ---------------- surfaces ---------------------------------------- */
.card,.glass,.feat-card,.step-card,.cat-card,.ls-verdict,.casa-aparte{
  background:var(--crema) !important;
  border:1px solid rgba(20,18,48,.14) !important;
  box-shadow:0 10px 0 -4px rgba(20,18,48,.10),0 18px 40px rgba(120,84,10,.18) !important;
}
.card:hover,.feat-card:hover,.cat-card:hover{
  box-shadow:0 14px 0 -4px rgba(206,17,38,.22),0 22px 50px rgba(120,84,10,.22) !important;
}
.ls-verdict{border-left:4px solid var(--azul) !important}
.casa-aparte{border-left:4px solid var(--azul) !important}
.casa-nota{color:var(--rojo);border-left-color:var(--rojo)}
.feat-glow,.cta-glow,.ls-fan-sec::before{display:none !important}
.disclosure{background:rgba(206,17,38,.07) !important;border-color:rgba(20,18,48,.16) !important;
  border-left:3px solid var(--rojo) !important;color:rgba(20,18,48,.78) !important}

/* buttons keep the hard slab, restated for the light field */
.btn{background:var(--rojo) !important;color:#fff !important;border-bottom:3px solid var(--azul) !important}
.btn:hover{background:var(--rojo-alto) !important}
.btn .arrow{background:#fff !important;color:var(--rojo) !important}
.btn-ghost{background:transparent !important;color:var(--tinta) !important;
  border:1px solid rgba(20,18,48,.3) !important;border-bottom:3px solid var(--azul) !important}
.btn-ghost:hover{background:rgba(13,58,148,.10) !important}
.btn-ghost .arrow{background:var(--tinta) !important;color:var(--crema) !important}

.badge.good{background:rgba(13,58,148,.12) !important;color:var(--azul) !important;border-left:3px solid var(--azul)}
.badge.warn{background:rgba(206,17,38,.12) !important;color:var(--rojo) !important;border-left:3px solid var(--rojo)}
.rank-pill{color:var(--rojo) !important}
.avatar,.cat-ic,.ls-hc-ic{background:linear-gradient(135deg,var(--azul),var(--rojo)) !important;color:#fff !important;border:none !important}
.stat-num{color:var(--rojo) !important}
.stat + .stat::before{background:rgba(20,18,48,.18)}
.step-n{opacity:.16 !important;background:linear-gradient(160deg,var(--azul),var(--rojo)) !important}
.faq{border-top:1px solid rgba(20,18,48,.2)}
.faq h3,.faq-item summary{color:var(--tinta) !important}
.faq-item{border-bottom:1px solid rgba(20,18,48,.16)}
.faq-item summary:hover{color:var(--rojo) !important}
.faq-ic{color:var(--azul) !important;border:1px solid rgba(20,18,48,.28) !important}
.faq-item[open] .faq-ic{background:rgba(13,58,148,.14) !important}
.ls-author{background:var(--crema) !important;border-left:4px solid var(--rojo) !important}
.aav{background:var(--azul) !important;color:#fff !important}
.pull{border-left:3px solid var(--rojo)}
hr{border-top-color:rgba(20,18,48,.18)}
::selection{background:var(--azul);color:#fff}

/* the light-section blocks were already cream — just fix their accents */
.ls-lead b,.ls-lead strong{color:var(--rojo)}
.ls-scan a{color:var(--azul);text-decoration-color:rgba(13,58,148,.4)}

/* ---------------- LA BANDERA: the page in flag proportions --------
   Yellow has had the top half of the scroll. Now blue, then red. */
.marquee-sec{
  background:var(--azul) !important;border:none !important;
  padding:26px 0 !important;margin-top:0 !important;
}
.marquee-item{color:rgba(255,255,255,.92) !important}
.mq-dot,.ls-band-row .mq-dot{color:var(--sol-alto) !important}

.ls-band{background:var(--azul) !important;border:none !important}
.ls-band-row .marquee-item{color:rgba(255,255,255,.9) !important}

/* the full-bleed slot is the red quarter — no photo, just the field */
.ls-fullbleed{background:var(--rojo) !important}
.ls-fb-media{background-image:none !important;background:var(--rojo) !important}
.ls-fb-scrim,.ls-fb-overlay{background:none !important}
.ls-fb-word{color:#fff !important}
.ls-fb-bubble{background:var(--sol) !important;color:var(--tinta) !important}

/* hook bands: the flag laid down flat */
.lq-hook{
  background:linear-gradient(100deg,var(--sol) 0 42%,var(--azul) 42% 71%,var(--rojo) 71% 100%) !important;
  box-shadow:0 18px 50px rgba(120,84,10,.28) !important;
}
.lq-hook--alt{
  background:linear-gradient(100deg,var(--rojo) 0 29%,var(--azul) 29% 50%,var(--sol) 50% 100%) !important;
}
.lq-hook::before{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 18px)}
.lq-hook::after{color:rgba(20,18,48,.12)}
.lq-hook-text{color:#fff !important;text-shadow:0 3px 14px rgba(20,18,48,.35) !important}

.cta-band{
  background:var(--crema) !important;border:1px solid rgba(20,18,48,.16) !important;
  border-bottom:6px solid var(--rojo) !important;
}

/* footer sits on the red, the way the flag ends */
.site-footer{background:var(--rojo) !important;border-top:none !important;color:#fff}
.site-footer::before{background:var(--azul);height:6px;opacity:1}
.site-footer .disclosure{background:rgba(255,255,255,.10) !important;color:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.25) !important;border-left:3px solid var(--sol) !important}
.site-footer .foot-nav a{color:rgba(255,255,255,.92) !important}
.site-footer .foot-nav a:hover{color:var(--sol-alto) !important}
.site-footer .muted{color:rgba(255,255,255,.72) !important}

/* the age gate opens onto the field, not a black void */
#age-gate{background:rgba(233,182,43,.94) !important;backdrop-filter:blur(6px)}
.ag-box{background:var(--crema) !important;border:1px solid rgba(20,18,48,.2) !important;
  border-bottom:6px solid var(--rojo) !important;box-shadow:0 24px 60px rgba(120,84,10,.35) !important}
.ag-h{color:var(--tinta) !important;font-family:var(--anton);text-transform:uppercase;
  font-size:1.9rem;line-height:.95;margin:0 0 12px}
.ag-leave{color:rgba(20,18,48,.6) !important}

/* card fan reads as slides on a lightbox — give it a white mount */
.card-band .fan-card,.fan-card{box-shadow:0 14px 34px rgba(120,84,10,.34) !important}

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

/* the shimmer had a light stop in the middle, which vanished on the
   field. On the yellow it runs red into blue and never goes pale. */
.shimmer .word,.shimmer-txt,.hero-serif,.serif,.ls-fb-word{
  background:linear-gradient(100deg,var(--rojo) 0%,#8d1a4a 38%,var(--azul) 74%,var(--rojo) 100%) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.ls-fb-word{background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important}

/* ---- remates del día -------------------------------------------- */
/* the light band still had a pale stop in the middle, left over from the
   gold divider. On the field it read as a hole. Solid blue, flag order. */
.ls-band-inner{
  background:linear-gradient(90deg,var(--azul) 0 62%,var(--azul-alto)) !important;
  box-shadow:0 14px 40px rgba(120,84,10,.28) !important;
}

/* category cards: the whole card is an <a>, so the blurb was inheriting
   link colour. Body copy is ink, headings are ink, the arrow is red. */
.cat-body h3{color:var(--tinta) !important}
.cat-body p,.cat-body .lq-body{color:rgba(20,18,48,.72) !important}
.cat-body .go{color:var(--rojo) !important;font-weight:700}
.cat-thumb::after{background:linear-gradient(180deg,transparent 42%,rgba(20,18,48,.42)) !important}
.cat-ic{background:rgba(253,245,226,.9) !important;border:1px solid rgba(20,18,48,.18) !important;
  color:var(--azul) !important;border-radius:3px !important}

/* the floating handle was the last capsule on the page */
.ls-fb-bubble{border-radius:2px !important;font-weight:700;letter-spacing:.02em}

/* three-word Anton heads were kissing at .93 */
.cta-h2,.feat-h2{line-height:1.0 !important}

/* ---- teléfono: la barra seguía siendo de noche -------------------- */
@media (max-width:900px){
  header.nav{
    background:rgba(253,245,226,.94) !important;
    border-bottom:1px solid rgba(20,18,48,.16) !important;
  }
  header.nav .brand{color:var(--tinta) !important}
  .nav-burger{
    background:var(--azul) !important;border:none !important;border-radius:2px !important;
  }
  .nav-burger span{background:#fff !important}
  .nav-mobile{
    background:var(--crema) !important;border:1px solid rgba(20,18,48,.18) !important;
    border-radius:3px !important;box-shadow:0 22px 50px rgba(120,84,10,.34) !important;
  }
  .nav-mobile a{color:var(--tinta) !important;border-radius:2px !important}
  .nav-mobile a:hover,.nav-mobile a:focus{background:rgba(13,58,148,.10) !important}
  .nav-mobile .nm-cta{background:var(--rojo) !important;color:#fff !important;border-radius:2px !important}
}

/* ---- la sección de puertas seguía siendo de noche ----------------
   Era un hueco oscuro en el campo amarillo y el epígrafe azul
   encima del fondo oscuro casi no se leía. Ahora es una franja
   crema sobre el amarillo, con las puertas en los tres colores. */
.lq-lanes{
  background:linear-gradient(180deg,rgba(253,245,226,.96),rgba(247,232,196,.96)) !important;
  border-top:6px solid var(--azul) !important;
  border-bottom:6px solid var(--rojo) !important;
}
.lq-lanes .eyebrow{color:var(--rojo) !important;opacity:1}
.lq-lanes-list{border-top:1px solid rgba(20,18,48,.20) !important}
.lq-lanes-list li{border-bottom:1px solid rgba(20,18,48,.20) !important}
.lq-lanes-list a:hover{
  color:var(--tinta) !important;
  background:linear-gradient(90deg,rgba(20,18,48,.06),transparent) !important;
}

/* escenarios sobre el campo */
.cl-esc{border-top-color:var(--tinta) !important}
.cl-esc-row{border-bottom-color:rgba(20,18,48,.20) !important}
.cl-esc-n{color:var(--rojo) !important}
.cl-esc-q{color:var(--tinta) !important}
.cl-esc-row p{color:rgba(20,18,48,.82) !important}
.cl-esc-row .yesi{color:var(--azul) !important}
.cl-esc-go{color:var(--rojo) !important;border-bottom-color:var(--rojo) !important}
.cl-esc-row a[target="_blank"]{color:var(--azul) !important;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* las cuatro puertas sobre crema: el amarillo y el celeste no se leían */
.lq-lanes-list a{color:var(--azul) !important}
.lq-lanes-list li:nth-child(2) a,
.lq-lanes-list li:nth-child(4) a{color:var(--rojo) !important}
.lq-lanes-list a span{color:inherit !important}

/* la caja del autor quedaba en gris de noche sobre crema */
.ls-author{background:rgba(253,245,226,.72) !important;border:1px solid rgba(20,18,48,.18) !important;
  border-left:5px solid var(--rojo) !important;border-radius:3px !important}
.ls-author p{color:rgba(20,18,48,.82) !important}
.ls-author .aname{color:var(--tinta) !important;font-weight:800}
.ls-author .aav{background:var(--azul) !important;color:#fff !important;border-radius:3px !important}
.ls-author a{color:var(--rojo) !important;font-weight:700}

/* método y correo sobre crema: el espinazo y las hairlines eran blancos */
.cl-met-wrap{border-left-color:rgba(20,18,48,.22) !important}
.cl-met + .cl-met{border-top-color:rgba(20,18,48,.16) !important}
.cl-met-n{background:var(--azul) !important;color:var(--crema) !important}
.cl-met h3{color:var(--tinta) !important}
.cl-met p{color:rgba(20,18,48,.82) !important}
.cl-mail a{color:var(--azul) !important;border-bottom-color:var(--rojo) !important}
.cl-mail a:hover{color:var(--rojo) !important}

/* --- hubs sobre crema: las hairlines blancas y los ámbar no se leen --- */
.cl-nota{border-left-color:var(--rojo) !important;color:rgba(20,18,48,.86) !important}

.cl-tabla th,.cl-tabla td{border-bottom-color:rgba(20,18,48,.16) !important}
.cl-tabla thead th{background:var(--azul) !important;color:var(--crema) !important;
  border-bottom-color:var(--rojo) !important}
.cl-tabla tbody th{color:var(--azul) !important}
.cl-tabla tbody td{color:rgba(20,18,48,.84) !important}
.cl-tabla tbody tr:nth-child(even){background:rgba(20,18,48,.045) !important}

.cl-fichas{border-top-color:var(--rojo) !important}
.cl-ficha{border-bottom-color:rgba(20,18,48,.16) !important}
.cl-ficha + .cl-ficha{border-left-color:rgba(20,18,48,.16) !important}
.page .narrow .cl-ficha h3{color:var(--azul) !important}
.cl-ficha p{color:rgba(20,18,48,.84) !important}

.cl-filtro-item{border-top-color:rgba(20,18,48,.18) !important}
.cl-filtro-item:last-child{border-bottom-color:rgba(20,18,48,.18) !important}
.cl-filtro-q{color:var(--tinta) !important}
.cl-filtro-q::before{color:var(--rojo) !important}
.cl-filtro-a{color:rgba(20,18,48,.84) !important}

.cl-cat{border-bottom-color:rgba(20,18,48,.16) !important}
.cl-cat-n{color:var(--azul) !important;opacity:1 !important}
.cl-cat p{color:rgba(20,18,48,.84) !important}

/* --- posiciones y ranking sobre crema --- */
.cl-pos{border-top-color:rgba(20,18,48,.16) !important}
.cl-pos:last-child{border-bottom-color:rgba(20,18,48,.16) !important}
.page .narrow .cl-pos h3{color:var(--tinta) !important}
.cl-pos-que{color:var(--azul) !important}
.cl-pos-dl dt{color:var(--rojo) !important;border-left-color:var(--rojo) !important}
.cl-pos-dl dd{color:rgba(20,18,48,.84) !important}

.cl-rk-wrap{border-top-color:var(--rojo) !important}
.cl-rk{border-bottom-color:rgba(20,18,48,.16) !important}
.cl-rk-n{color:var(--azul) !important}
.cl-rk-cat a{color:var(--rojo) !important;border-bottom-color:rgba(206,17,38,.45) !important}
.cl-rk-cat a:hover{color:var(--tinta) !important;border-bottom-color:var(--tinta) !important}
.cl-rk-ver{color:rgba(20,18,48,.86) !important}
.cl-rk-para,.cl-rk-pero{color:rgba(20,18,48,.84) !important}
.cl-rk-para strong{color:var(--azul) !important}
.cl-rk-pero{border-left-color:var(--rojo) !important}
.cl-rk-pero strong{color:var(--rojo) !important}

/* --- baraja del hero y flechita sobre crema --- */
.hd-face{box-shadow:0 18px 40px rgba(20,18,48,.28), 0 0 0 1px rgba(20,18,48,.34) !important}
.hd-card:hover .hd-face,.hd-card:focus-visible .hd-face{
  box-shadow:0 26px 56px rgba(20,18,48,.34), 0 0 0 2px var(--tinta) !important;
}
/* de día el nombre sigue yendo encima de la carta, que es de color:
   blanco. Solo cuando se baja al pie (teléfono) pasa a tinta. */
@media (max-width:900px){
  .hd-tit{color:rgba(20,18,48,.72) !important}
  .hd-card:hover .hd-tit,.hd-card:focus-visible .hd-tit{color:var(--tinta) !important}
}
.hd-card:focus-visible .hd-face{outline-color:var(--tinta) !important}
.hs-txt{color:var(--azul) !important}
.hs-rail{background:linear-gradient(180deg, rgba(13,58,148,.5), rgba(13,58,148,0)) !important}
.hs-dot{background:var(--azul) !important;box-shadow:0 0 10px rgba(13,58,148,.55) !important}
.hs-chev{border-right-color:var(--rojo) !important;border-bottom-color:var(--rojo) !important}
