/*
Theme Name: La IA que Sirve
Template: Divi
Description: Identidad de La IA que Sirve. Sistema tomado del plan: fondo frio, cuatro colores de seccion y todo lo estructural a la derecha.
Version: 2.0
*/

/* ============================================================
   TOKENS — los mismos del plan, sin reinventarlos
   ============================================================ */
:root {
  --ground:#F5F6F9;  --surface:#FFFFFF;  --surface-2:#EDEFF4;
  --ink:#14161D;     --ink-2:#565C6B;    --ink-3:#818897;
  --line:#E0E4EC;    --line-2:#CBD1DD;

  --c1:#DC3E22;  --c2:#0B8A80;  --c3:#4F3DDB;  --c4:#B8830A;  --c5:#263A6B;  --c6:#2273B5;
  --c1-soft:#FCEBE7; --c2-soft:#E3F3F1; --c3-soft:#ECE9FC; --c4-soft:#FAF0DC;

  --display:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --texto:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  --r:22px;   /* redondeo grande, decision de Sergio */

  --acento: var(--c1);   /* lo cambia la clase de seccion en el body */
}

/* Modo oscuro: el sistema del plan ya lo traia, se respeta lo que el
   lector tenga puesto en su equipo. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0F1116; --surface:#171A21; --surface-2:#1F232C;
    --ink:#F1F3F8;    --ink-2:#A7AEBD;   --ink-3:#7A8293;
    --line:#272C36;   --line-2:#363D4A;
    --c1:#FF6C4D; --c2:#2AB8AB; --c3:#8D7BFF; --c4:#EDB02E; --c5:#5C7FD6; --c6:#63B6E8;
    --c1-soft:#2E1A15; --c2-soft:#0E2622; --c3-soft:#1D1938; --c4-soft:#2C2211;
  }
}

/* ============================================================
   BASE
   ============================================================ */
body,
body.et-db #et-boc .et-l,
#page-container, #et-main-area {
  background: var(--ground) !important;
  color: var(--ink);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.14;
  text-wrap: balance;
}

a { color: var(--c1); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c3); }
strong { font-weight: 600; color: var(--ink); }

code {
  font-family: var(--mono); font-size: .9em;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px; padding: .1em .38em;
}

/* ============================================================
   LA FIRMA — todo lo estructural a la derecha.
   Los parrafos y listas NO: alineados a la derecha el borde
   izquierdo queda disparejo y en un articulo largo cuesta lectores.
   ============================================================ */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.entry-title, h1.entry-title {
  text-align: right;
}
.entry-content p, .entry-content li, .entry-content blockquote { text-align: left; }

/* el bloque se ancla a la derecha; el texto adentro sigue a la izquierda */
.entry-content p, .entry-content ul, .entry-content ol {
  max-width: 68ch; margin-left: auto; margin-right: 0;
}
.entry-content { max-width: 860px; margin: 0 auto; }

/* ============================================================
   ENCABEZADOS
   ============================================================ */
.entry-content h2 {
  font-size: clamp(25px,4.6vw,34px); font-weight: 700;
  margin: 2.5em 0 .5em; padding-bottom: .34em;
  border-bottom: 2px solid var(--ink);
}
.entry-content h2:first-child { margin-top: .4em; }

.entry-content h3 {
  font-size: clamp(19px,2.6vw,22px); font-weight: 700;
  color: var(--acento); margin: 2.1em 0 .4em;
}

/* ============================================================
   LISTAS — vineta del lado derecho.
   Divi reimprime la suya con mas peso y salian DOBLES: hay que
   matarla en varios selectores, no con una regla suelta.
   ============================================================ */
.entry-content ul, body .entry-content ul,
.et_pb_text_inner ul, .et-db #et-boc .et-l .entry-content ul {
  list-style: none !important; list-style-type: none !important;
  padding-left: 0 !important;
}
.entry-content ul li::marker, .et_pb_text_inner ul li::marker { content: "" !important; }

.entry-content ul li { position: relative; padding-right: 1.5em; margin-bottom: .5em; }
.entry-content ul li::after {
  content: ""; position: absolute; right: 2px; top: .6em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--acento);
}

/* ============================================================
   CABECERA — clara, con la pleca de 2px del plan.
   El logo es el unico bloque saturado: la audacia se gasta ahi.
   ============================================================ */
#main-header, .et-l--header {
  background: var(--ground) !important;
  box-shadow: none !important;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
#main-header .container { padding-top: 10px; padding-bottom: 10px; }

/* El logo lo sustituye el JS por sus piezas para poder animarlo.
   El <img> de Divi se queda para lectores de pantalla. */
#logo.lqs-oculto { position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.lqs-logo { display:block; width:min(210px,44vw); cursor:pointer; margin:6px 0; }
/* Divi saca el logo del flujo con position:absolute para que el menu quepa
   al lado. Al volverlo estatico ocupaba el ancho completo y empujaba el menu
   a un segundo renglon. Se resuelve con flexbox, sin pelear con sus reglas. */
#main-header .container {
  display:flex !important; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; height:auto !important;
}
#main-header .logo_container {
  position:relative !important; width:auto !important; height:auto !important;
  flex:none; float:none !important;
}
#main-header #et-top-navigation {
  float:none !important; padding:0 !important; height:auto !important;
  margin-left:auto; display:flex; align-items:center; gap:10px;
}
.lqs-lienzo { position:relative; display:block; width:100%; height:0; }
.lqs-lienzo img { position:absolute; display:block; transform-origin:50% 60%;
  will-change:transform,opacity; }

.lqs-lienzo img.cae   { animation:lqs-caer .62s cubic-bezier(.3,1.5,.5,1) both; }
.lqs-lienzo img.traza { clip-path:inset(0 100% 0 0);
  animation:lqs-trazar .9s cubic-bezier(.22,.9,.3,1) both; }

@keyframes lqs-caer{
  0%  {transform:translateY(-230%) scaleY(1.18) scaleX(.88); opacity:0}
  55% {opacity:1}
  72% {transform:translateY(0) scaleY(.8) scaleX(1.16); opacity:1}
  88% {transform:translateY(-7%) scaleY(1.05) scaleX(.97)}
  100%{transform:translateY(0) scale(1); opacity:1}
}
@keyframes lqs-trazar{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@media (prefers-reduced-motion:reduce){
  .lqs-lienzo img.cae,.lqs-lienzo img.traza{animation:none;opacity:1;clip-path:none}
}
@media (max-width:980px){ .lqs-logo{ width:min(165px,42vw); } }

#top-menu li a, .et-l--header a {
  color: var(--ink) !important;
  font-family: var(--display); font-weight: 600;
  font-size: 14px; letter-spacing: 0;
}
#top-menu li a:hover, .et-l--header a:hover { color: var(--c1) !important; opacity: 1; }
#top-menu li.current-menu-item > a { color: var(--c1) !important; }
#et-top-navigation { float: right; padding-right: 0; }
#et_top_search, #et_search_icon:before { color: var(--ink-3) !important; }

/* ============================================================
   PIE
   ============================================================ */
#main-footer, .et-l--footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--line);
}
#main-footer, #main-footer a, #footer-info { color: var(--ink-3) !important; font-size: 13.5px; }
#footer-bottom { background: transparent !important; }

/* ============================================================
   COLOR POR SECCION — la clase la pone WordPress en el body
   ============================================================ */
body.category-herramientas    { --acento: var(--c1); }
body.category-conexiones      { --acento: var(--c2); }
body.category-wordpress-divi  { --acento: var(--c3); }
body.category-lo-hicimos      { --acento: var(--c4); }

/* ============================================================
   MOVIL — 16px de guardia, sin scroll horizontal
   ============================================================ */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .entry-content p, .entry-content ul, .entry-content ol { max-width: 100%; }
  #et-top-navigation { float: none; }
  #main-header::after { width: 70vw; height: 14px; bottom: -7px; }
}
/* ============================================================
   COMPONENTES — los mismos del plan.
   Sin esto el sitio tiene los colores pero no el ORDEN: las
   tarjetas, las cajas grises y las listas metidas en un recuadro
   son lo que hace que se lea organizado.
   ============================================================ */

/* ---------- etiqueta y entradilla ---------- */
.lqs-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); margin: 0 0 10px; text-align: right;
}
.lqs-lead {
  color: var(--ink-2); max-width: 62ch;
  margin-left: auto !important; margin-right: 0 !important;
  margin-bottom: 22px; text-align: right !important;
  font-size: 1.02em;
}

/* ---------- tarjeta con pleca de color ---------- */
.lqs-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 4px solid var(--acento); border-radius: var(--r);
  padding: 22px; margin: 0 0 16px;
}
.lqs-card h3 {
  font-size: 19px !important; font-weight: 700; margin: 0 0 10px !important;
  color: var(--ink) !important; text-align: right;
}
.lqs-card .lqs-prosa { text-align: left; max-width: none; margin: 0 0 10px; }
.lqs-card .lqs-prosa:last-child { margin-bottom: 0; }

/* ---------- caja gris: el matiz, la nota al pie del bloque ---------- */
.lqs-nota {
  background: var(--surface-2); color: var(--ink-2);
  border-radius: 9px; padding: 12px 15px;
  font-size: .92em; text-align: left;
  max-width: none !important; margin: 14px 0 0 !important;
}
.lqs-nota b, .lqs-nota strong { color: var(--ink); font-weight: 600; }

/* ---------- caja de color: la salida, lo que sí conviene hacer ---------- */
.lqs-salida {
  background: var(--c2-soft); border-radius: 10px;
  padding: 14px 16px; margin: 14px 0 0; text-align: left;
  max-width: none !important;
}
.lqs-salida strong { color: var(--c2); }

/* ---------- lista DENTRO de un recuadro, viñeta a la derecha ---------- */
.lqs-lista {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid; gap: 9px; max-width: none !important;
}
.lqs-lista li {
  position: relative; padding-right: 22px; padding-left: 0;
  color: var(--ink-2); font-size: .95em;
  text-align: right !important;      /* consistente con toda la estructura */
  margin: 0 !important;
}
.lqs-lista li::after {
  content: ""; position: absolute; right: 2px; top: .58em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--acento);
}
.lqs-lista li strong { color: var(--ink); font-weight: 600; }

/* ---------- rejilla de secciones, una tarjeta por color ---------- */
.lqs-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 16px; }
@media (min-width: 640px) { .lqs-grid { grid-template-columns: 1fr 1fr; } }

.lqs-sec { border-radius: var(--r); padding: 19px; border: 1px solid var(--line); }
.lqs-sec.s1 { background: var(--c1-soft); }
.lqs-sec.s2 { background: var(--c2-soft); }
.lqs-sec.s3 { background: var(--c3-soft); }
.lqs-sec.s4 { background: var(--c4-soft); }
.lqs-sec .tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  display: block; margin-bottom: 9px; text-align: right;
}
.lqs-sec.s1 .tag { color: var(--c1); } .lqs-sec.s2 .tag { color: var(--c2); }
.lqs-sec.s3 .tag { color: var(--c3); } .lqs-sec.s4 .tag { color: var(--c4); }
.lqs-sec h3 {
  font-size: 18px !important; font-weight: 700; margin: 0 0 7px !important;
  color: var(--ink) !important; text-align: right;
}
.lqs-sec p {
  font-size: .9em; color: var(--ink-2); text-align: left;
  max-width: none !important; margin: 0 !important;
}
.lqs-sec .clave {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: .82em; font-weight: 600; color: var(--ink); text-align: right;
}

/* ---------- tarjeta numerada ---------- */
.lqs-num-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; margin: 0 0 14px;
  display: grid; gap: 12px;
}
.lqs-num-cab {
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 14px;
}
.lqs-num-cab .txt { order: 1; }
.lqs-num-cab h3 {
  font-size: 19px !important; margin: 0 !important;
  color: var(--ink) !important; text-align: right;
}
.lqs-num {
  order: 2; flex: none;
  font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1;
  color: #FFF; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; background: var(--acento);
}
.lqs-num-card .lqs-prosa {
  text-align: left; max-width: none !important; margin: 0 !important;
}

/* ---------- fila con dato a la derecha ---------- */
.lqs-fila {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: 15px 17px; margin: 0 0 10px;
  display: flex; gap: 13px; align-items: baseline; justify-content: flex-end;
  flex-wrap: wrap;
}
.lqs-fila .n {
  order: 2; flex: none; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.lqs-fila .d {
  order: 1; font-size: .9em; color: var(--ink-2);
  text-align: left; max-width: none !important; margin: 0 !important;
}

/* ---------- bloque oscuro: el remate ---------- */
.lqs-oscuro {
  background: var(--ink); color: #F1F3F8;
  border-radius: var(--r); padding: 26px 22px; margin: 22px 0 0;
}
.lqs-oscuro h3 {
  color: #FFF !important; margin: 0 0 6px !important;
  font-size: 22px !important; text-align: right;
}
.lqs-oscuro .lqs-eyebrow { color: #7A8293; }
.lqs-oscuro p {
  color: #C9D0DC; text-align: left;
  max-width: none !important; margin: 0 !important;
}
.lqs-oscuro .lqs-lista li { color: #C9D0DC; }
.lqs-oscuro .lqs-lista li strong { color: #FFF; }
.lqs-oscuro .lqs-lista li::after { background: var(--c1); }

/* en modo oscuro el bloque negro se perderia: se aclara un paso */
@media (prefers-color-scheme: dark) {
  .lqs-oscuro { background: #05060A; border: 1px solid var(--line); }
}

@media (max-width: 767px) {
  .lqs-card, .lqs-num-card, .lqs-oscuro { padding: 17px; }
  .lqs-num { width: 38px; height: 38px; font-size: 22px; }
}

/* ------------------------------------------------------------
   La pleca pegada al encabezado: Divi le mete 58px de padding-top al
   contenedor del contenido y dejaba un hueco entre el menu y la pleca.
   Solo en la portada, que es donde la pleca abre la pagina.
   ------------------------------------------------------------ */
body.home #main-content .container { padding-top: 0 !important; }
body.home .lqs-tira { margin-top: 0; }

/* ------------------------------------------------------------
   wpautop convierte los saltos de linea del contenido en <br>, y dentro de
   una rejilla cada <br> se vuelve una CELDA: metia 3 filas vacias y inflaba
   la pleca de 36px a 172px. Se anulan en los tres apilados.
   ------------------------------------------------------------ */
.lqs-tira .rot br,
.lqs-titular .rotq br,
.lqs-slider > br { display:none !important; }

/* ============================================================
   HOME — barra negra, titular rotatorio y tarjeta de hallazgo.
   Salen de la maqueta aprobada el 20-sep (mezcla de las 3 propuestas).
   ============================================================ */

/* ---------- barra negra: lo verificado esta semana ----------
   Va de lado a lado, igual que el slider. En el celular el texto no cabe
   en un renglon: en vez de cortarlo con puntos suspensivos, se parte en
   DOS PISOS (etiqueta arriba, dato abajo) y se deja envolver a 2 lineas. */
.lqs-tira {
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  background:var(--ink); color:#F1F3F8;
  margin-inline: calc(50% - 50vw);
  padding: 11px max(18px, calc(50vw - 430px));
  border-radius: 0;
  margin-bottom: 22px;
}
.lqs-tira .etq {
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:#7A8293; flex:none; order:2; white-space:nowrap;
}
/* Apilado en rejilla. UNA fila explicita: con solo grid-area:1/1 el navegador
   generaba filas implicitas vacias (4 filas para 4 textos apilados) y la pleca
   se inflaba a 172px para 36px de texto. */
.lqs-tira .rot {
  display:grid; grid-template-rows:auto; grid-template-columns:100%;
  flex:1; order:1; min-width:0;
}
.lqs-tira .rot span {
  grid-row:1; grid-column:1; opacity:0; visibility:hidden;
  transition:opacity .5s, visibility .5s;
  font-size:13px; text-align:right;
  max-width:none !important; margin:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lqs-tira .rot span.on { opacity:1; visibility:visible; }

@media (max-width:767px){
  .lqs-tira {
    flex-direction:column; align-items:flex-end; gap:5px;
    padding-block:10px 12px;
  }
  .lqs-tira .etq { order:1; }          /* la etiqueta va ARRIBA */
  /* flex:1 servia para ganar ANCHO en fila; al girar a columna hace crecer
     el alto y la pleca se inflaba a 172px para 36px de texto. */
  .lqs-tira .rot { order:2; width:100%; flex:none; }
  .lqs-tira .rot span {
    white-space:normal;                 /* que envuelva en vez de cortarse */
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    line-height:1.35; font-size:13.5px;
  }
}

/* ---------- titular en forma de pregunta ---------- */
.lqs-titular { margin:0 0 18px; }
.lqs-titular .rotq { display:grid; grid-template-rows:auto; grid-template-columns:100%; }
.lqs-titular .q { grid-row:1; grid-column:1; opacity:0; visibility:hidden;
  transition:opacity .5s, visibility .5s; }
.lqs-titular .q.on { opacity:1; visibility:visible; }
.lqs-titular h2 {
  font-size:clamp(22px,4.8vw,36px) !important; font-weight:800;
  margin:0 0 8px !important; padding:0 !important; border:0 !important;
}
.lqs-titular .sub {
  font-size:15px; color:var(--ink-2); text-align:left;
  max-width:60ch; margin-left:auto !important; margin-right:0 !important;
}

/* ---------- la tarjeta de hallazgo que rota ---------- */
/* Las tarjetas se apilan en la MISMA celda de una rejilla: asi el contenedor
   mide lo que mide la mas alta. Con position:absolute y altura fija, la
   tarjeta larga se desbordaba y se encimaba con lo de abajo. */
.lqs-slider { display:grid; margin:0 0 6px; }
.lqs-slide {
  grid-row:1; grid-column:1; opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility .55s;
  display:grid; grid-template-columns:1fr; gap:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px;
}
.lqs-slide.on { opacity:1; visibility:visible; }
@media (min-width:640px){ .lqs-slide{ grid-template-columns:1.25fr .85fr; align-items:center; } }
.lqs-slide .foto { order:2; border-radius:16px; overflow:hidden; aspect-ratio:3/2; background:var(--surface-2); }
.lqs-slide .foto img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.7); }
.lqs-slide .txt { order:1; }
.lqs-slide h3 {
  font-size:clamp(15px,3vw,19px) !important; font-weight:800;
  color:var(--ink) !important; margin:0 0 6px !important; text-align:right;
}
.lqs-slide p { font-size:14px; color:var(--ink-2); text-align:left; max-width:none !important; margin:0 !important; }

.lqs-sello {
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; padding:5px 11px;
  border-radius:100px; margin-bottom:9px;
}
.lqs-sello.si  { background:var(--c2-soft); color:var(--c2); }
.lqs-sello.no  { background:var(--c1-soft); color:var(--c1); }
.lqs-sello.med { background:var(--c4-soft); color:var(--c4); }

.lqs-cifra {
  font-family:var(--display); font-weight:800; font-size:clamp(28px,6vw,44px);
  line-height:1; color:var(--c1); margin-bottom:6px;
}
.lqs-puntos { display:flex; gap:6px; justify-content:flex-end; margin:0 0 26px; }
.lqs-punto {
  width:24px; height:4px; border-radius:2px; background:var(--line-2);
  transition:background .3s; cursor:pointer;
}
.lqs-punto.on { background:var(--c1); }

/* ---------- las 4 secciones: MAZO DE CARTAS ----------
   Se encabalgan como naipes y la que recibe el cursor sale al frente.
   Funciona porque el contenido de estas tarjetas esta alineado a la
   DERECHA: la parte que queda tapada es el margen izquierdo, no el texto. */
.lqs-grid4 { display:grid; grid-template-columns:1fr; gap:11px; margin:0 0 8px; }
@media (min-width:560px) and (max-width:899px){ .lqs-grid4{ grid-template-columns:1fr 1fr; } }

.lqs-grid4 .lqs-sec {
  position:relative; padding:16px 17px;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.lqs-grid4 .lqs-sec h3 { font-size:15px !important; margin:0 0 4px !important; }
.lqs-grid4 .lqs-sec p  { font-size:13px; }

@media (min-width:900px){
  .lqs-grid4 { display:flex; gap:0; align-items:stretch; padding-left:38px; }
  .lqs-grid4 .lqs-sec {
    flex:1 1 0; min-width:0;
    margin-left:-38px;                  /* el encabalgado */
    box-shadow:-8px 0 20px rgba(20,22,29,.07);
  }
  /* las de la derecha encima de las de la izquierda */
  .lqs-grid4 .lqs-sec:nth-child(1){ z-index:1 }
  .lqs-grid4 .lqs-sec:nth-child(2){ z-index:2 }
  .lqs-grid4 .lqs-sec:nth-child(3){ z-index:3 }
  .lqs-grid4 .lqs-sec:nth-child(4){ z-index:4 }

  .lqs-grid4 .lqs-sec:hover,
  .lqs-grid4 .lqs-sec:focus-within {
    transform: translateY(-14px) scale(1.04);
    z-index:10;
    box-shadow: 0 16px 38px rgba(20,22,29,.18);
  }
}

@media (prefers-reduced-motion:reduce){
  .lqs-grid4 .lqs-sec { transition:none }
  .lqs-grid4 .lqs-sec:hover { transform:none }
}


/* ============================================================
   SLIDER A SANGRE — version definitiva (Sergio, 20-sep)
   Se sale de la columna de lectura con margenes negativos.
   Ojo: 100vw incluye la barra de desplazamiento, por eso se usa
   calc(50% - 50vw) sobre el contenedor y NO width:100vw, que mete
   scroll horizontal en escritorio.
   ============================================================ */
#et-main-area { overflow-x: clip; }  /* clip, no hidden: hidden mata position:sticky */

.lqs-slider {
  margin-inline: calc(50% - 50vw);
  width: auto;
}
.lqs-slide {
  border-radius: 0;          /* a sangre y redondeado se pelean */
  border-left: 0; border-right: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
@media (min-width:640px){
  /* Dos avisos que costaron dos pasadas:
     1) el contenedor mide lo que la tarjeta MAS ALTA, asi que la fila tiene
        que estirarse (minmax(0,1fr)) o abajo queda un hueco gris;
     2) con `order` + colocacion automatica las piezas se fueron a DOS filas.
        Se colocan EXPLICITAMENTE y se acaba la ambiguedad. */
  .lqs-slide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(260px, 1fr);
    align-items: stretch;
  }
  .lqs-slide .foto { grid-column: 1; grid-row: 1; order: 0; }
  .lqs-slide .txt  { grid-column: 2; grid-row: 1; order: 0; }
}
.lqs-slide .foto {
  border-radius: 0; aspect-ratio: auto; min-height: 260px;
}
.lqs-slide .txt {
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px max(18px, calc(50vw - 430px)) 26px 26px;   /* el texto vuelve a la columna de lectura */
}
/* En un contenedor flex los hijos se estiran a lo ancho por omision: el sello
   se convertia en una barra de lado a lado. Se le dice que no crezca. */
.lqs-slide .txt > .lqs-sello { align-self: flex-end; }
.lqs-puntos {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(18px, calc(50vw - 430px));
  margin-top: 10px; margin-bottom: 26px;
}
@media (max-width:639px){
  .lqs-slide .txt { padding: 20px 18px 24px; }
  .lqs-slide .foto { min-height: 190px; }
}

/* ═══════════════ FORMULARIO DE CONTACTO ═══════════════ */
.lqs-form-caja{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:44px 40px; margin:56px 0; text-align:right;
}
.lqs-form-caja h2{ margin:.2em 0 .5em; }
.lqs-form-caja .lqs-lead{ margin-bottom:28px; }
.lqs-form{ max-width:560px; margin-left:auto; }
.lqs-campo{ margin:0 0 20px; }
/* Divi fuerza text-align:left en label — hay que ganarle: en este portal
   TODO va a la derecha, y una etiqueta suelta a la izquierda se nota. */
.lqs-campo label{
  display:block; font-family:var(--texto); font-size:.86rem; font-weight:600;
  color:var(--ink-2); letter-spacing:.02em; margin-bottom:7px;
  text-align:right !important;
}
.lqs-campo label span{ font-weight:400; color:var(--ink-3); }
.lqs-campo input, .lqs-campo textarea{
  width:100%; box-sizing:border-box; padding:14px 16px;
  font-family:var(--texto); font-size:1rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-2); border-radius:12px;
  text-align:right; transition:border-color .15s, background .15s;
}
.lqs-campo textarea{ resize:vertical; min-height:130px; line-height:1.55; }
.lqs-campo input:focus, .lqs-campo textarea:focus{
  outline:none; border-color:var(--c3); background:var(--surface);
  box-shadow:0 0 0 3px rgba(79,61,219,.12);
}
.lqs-campo input::placeholder{ color:var(--ink-3); }

/* la trampa para robots: fuera de pantalla, no display:none — hay bots que lo detectan */
.lqs-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lqs-form-pie{
  display:flex; align-items:center; justify-content:flex-end; gap:18px;
  flex-wrap:wrap; margin:26px 0 0;
}
.lqs-form-pie span{ font-size:.82rem; color:var(--ink-3); }
.lqs-form button{
  font-family:var(--display); font-weight:800; font-size:1.02rem; color:#fff;
  background:var(--c3); border:0; border-radius:999px; padding:15px 40px;
  cursor:pointer; transition:transform .15s, background .15s;
}
.lqs-form button:hover{ background:#3F2FC0; transform:translateY(-2px); }
.lqs-form button:active{ transform:none; }

.lqs-form-error{
  background:#FDECE8; border:1px solid var(--c1); border-radius:12px;
  padding:14px 18px; margin:0 0 24px; color:#8E2314; font-size:.94rem;
}

@media (max-width:640px){
  .lqs-form-caja{ padding:30px 22px; }
  .lqs-form-pie{ justify-content:stretch; }
  .lqs-form button{ width:100%; }
}


/* «Escríbenos» del menu: que se VEA bajar, no que salte de golpe.
   scroll-behavior basta y no necesita JS. scroll-margin-top deja aire
   para que el encabezado fijo de Divi no tape el titulo al llegar. */
html{ scroll-behavior:smooth; }
#contacto{ scroll-margin-top:110px; }

/* Al llegar, la tarjeta se anuncia un momento: si no, uno aterriza y no
   sabe si ya llego. */
@keyframes lqs-aterriza{
  0%   { box-shadow:0 0 0 0 rgba(79,61,219,0); transform:translateY(10px); }
  22%  { box-shadow:0 0 0 6px rgba(79,61,219,.22); transform:translateY(0); }
  100% { box-shadow:0 0 0 0 rgba(79,61,219,0); transform:translateY(0); }
}
#contacto:target{ animation:lqs-aterriza 1.5s ease-out; }

/* Quien pidio menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  #contacto:target{ animation:none; }
}

/* ═══════════════ TABLAS DE DATOS EN LAS NOTAS ═══════════════ */
.lqs-tabla{
  width:100%; border-collapse:collapse; margin:32px 0;
  font-family:var(--texto); font-size:.97rem;
}
.lqs-tabla th{
  font-family:var(--texto); font-size:.78rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); text-align:right;
  padding:0 16px 10px; border-bottom:2px solid var(--line-2);
}
.lqs-tabla th:first-child{ text-align:left; }
.lqs-tabla td{
  padding:15px 16px; text-align:right; border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.lqs-tabla td:first-child{ text-align:left; color:var(--ink); }
.lqs-tabla td strong{ font-family:var(--display); font-weight:800; font-size:1.18rem; color:var(--ink); }
.lqs-tabla td span{ color:var(--ink-3); font-size:.86rem; }
.lqs-tabla tbody tr:last-child td{ border-bottom:0; }

@media (max-width:640px){
  .lqs-tabla{ font-size:.9rem; }
  .lqs-tabla th, .lqs-tabla td{ padding-left:8px; padding-right:8px; }
}

/* ═══════════════ PIE DE SITIO ═══════════════
   Negro, tipografía en crema. El logotipo va a la IZQUIERDA (lo pidió Sergio
   así, aunque el resto del portal vaya a la derecha) y el menú enfrente, para
   que quien baje hasta el final tenga por dónde seguir. */
.lqs-pie{
  background:var(--ink); color:#F1F2F6;
  margin-inline: calc(50% - 50vw);
  padding:52px max(24px, calc(50vw - 560px)) 40px;
}
.lqs-pie-caja{ max-width:1120px; margin:0 auto; }

.lqs-pie-arriba{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.lqs-pie-logo img{ display:block; height:64px; width:auto; }
.lqs-pie-logo{ opacity:.95; transition:opacity .15s; }
.lqs-pie-logo:hover{ opacity:1; }

.lqs-pie-menu ul{
  display:flex; flex-wrap:wrap; gap:8px 30px;
  list-style:none; margin:0; padding:0; justify-content:flex-end;
}
.lqs-pie-menu li{ margin:0; padding:0; }
.lqs-pie-menu li::before{ content:none; }        /* Divi mete viñetas en los li */
.lqs-pie-menu a{
  font-family:var(--texto); font-size:.95rem; color:#F1F2F6; text-decoration:none;
  padding:4px 0; border-bottom:1px solid transparent; transition:border-color .15s;
}
.lqs-pie-menu a:hover{ border-bottom-color:var(--c4); color:#fff; }

/* La pista del formulario: chica y discreta, pero con una flecha que no deja
   duda de hacia dónde mirar. */
.lqs-pie-pista{
  margin:34px 0 0; padding-top:24px; border-top:1px solid rgba(241,242,246,.14);
  font-family:var(--texto); font-size:.86rem; color:#9AA0AE; line-height:1.6;
}
.lqs-pie-pista a{
  color:var(--c4); text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(184,131,10,.45);
}
.lqs-pie-pista a:hover{ color:#E9A80F; border-bottom-color:#E9A80F; }
.lqs-pie-pista span{ margin-right:3px; }

.lqs-pie-legal{
  display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:space-between;
  margin:22px 0 0; font-family:var(--texto); font-size:.78rem; color:#6E7484;
}
.lqs-pie-legal a{ color:#6E7484; text-decoration:none; border-bottom:1px solid transparent; }
.lqs-pie-legal a:hover{ color:#9AA0AE; border-bottom-color:#9AA0AE; }

@media (max-width:760px){
  .lqs-pie{ padding-top:38px; padding-bottom:32px; }
  .lqs-pie-arriba{ flex-direction:column; align-items:flex-start; gap:24px; }
  .lqs-pie-logo img{ height:54px; }
  .lqs-pie-menu ul{ justify-content:flex-start; gap:6px 22px; }
  .lqs-pie-legal{ justify-content:flex-start; }
}

/* ═══════════ FORMULARIO COMPACTO DENTRO DEL PIE ═══════════
   Mismos campos, una fracción del espacio. Los dos primeros van en pareja y
   el mensaje es de dos renglones: crece solo si hace falta. */
.lqs-pie-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:start;
}
.lqs-pie-izq{ display:flex; flex-direction:column; gap:26px; }

.lqs-form-mini{ text-align:right; }
.lqs-mini-titulo{
  font-family:var(--display); font-weight:800; font-size:1.18rem;
  color:#F1F2F6; margin:0 0 4px;
}
.lqs-mini-pie{
  font-family:var(--texto); font-size:.78rem; color:#8B91A0; margin:0 0 16px;
}
.lqs-form.es-mini{ max-width:none; }
.lqs-form.es-mini .lqs-campo{ margin:0 0 10px; }
.lqs-form.es-mini .lqs-campo label{
  font-size:.72rem; color:#8B91A0; margin-bottom:4px; letter-spacing:.03em;
}
.lqs-form.es-mini .lqs-campo label span{ color:#6E7484; }
.lqs-form.es-mini .lqs-campo input,
.lqs-form.es-mini .lqs-campo textarea{
  padding:9px 12px; font-size:.9rem; border-radius:9px;
  background:rgba(255,255,255,.05); border-color:rgba(241,242,246,.18); color:#F1F2F6;
}
.lqs-form.es-mini .lqs-campo textarea{ min-height:62px; }
.lqs-form.es-mini .lqs-campo input::placeholder{ color:#6E7484; }
.lqs-form.es-mini .lqs-campo input:focus,
.lqs-form.es-mini .lqs-campo textarea:focus{
  background:rgba(255,255,255,.09); border-color:var(--c4);
  box-shadow:0 0 0 3px rgba(184,131,10,.18);
}
/* nombre y correo, en pareja */
.lqs-form.es-mini .lqs-pareja{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lqs-form.es-mini .lqs-form-pie{ margin:12px 0 0; }
.lqs-form.es-mini button{
  font-size:.92rem; padding:10px 30px; background:var(--c4); color:var(--ink);
}
.lqs-form.es-mini button:hover{ background:#E9A80F; }
.lqs-form.es-mini .lqs-form-error{
  background:rgba(220,62,34,.14); border-color:rgba(220,62,34,.5);
  color:#F0B5AA; font-size:.84rem; padding:9px 12px; margin-bottom:12px;
}

@media (max-width:860px){
  .lqs-pie-cols{ grid-template-columns:1fr; gap:34px; }
  .lqs-form-mini{ text-align:left; }
  .lqs-form.es-mini .lqs-campo label{ text-align:left !important; }
  .lqs-form.es-mini .lqs-campo input,
  .lqs-form.es-mini .lqs-campo textarea{ text-align:left; }
  .lqs-form.es-mini .lqs-form-pie{ justify-content:flex-start; }
  .lqs-form.es-mini button{ width:auto; }
}
@media (max-width:480px){
  .lqs-form.es-mini .lqs-pareja{ grid-template-columns:1fr; }
}

/* ═══════════════ ÍNDICE DE NOTAS ═══════════════ */
.lqs-notas-cab{ text-align:right; margin:8px 0 40px; }
.lqs-notas-cab h1{ margin:.1em 0 .35em; }
.lqs-notas-cab .lqs-lead{ margin-left:auto; }
.lqs-notas-cab .lqs-eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-2); }

/* Las tarjetas de TEMA, arriba — de color, para que se vea de un golpe en qué
   sección estás. El número grande es cuántas notas tiene. */
.lqs-temas{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px; margin:0 0 56px;
}
/* Flex y no grid a propósito: con 5 o 6 temas la rejilla dejaba uno solo
   colgando abajo a la izquierda. Con flex + justify-content:center, la última
   fila se centra sola cuando el número no es exacto. Pedido de Sergio 21-sep. */
.lqs-temas > .lqs-tema{ flex:0 1 calc(33.333% - 10px); }
.lqs-tema{
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; min-height:168px; text-decoration:none; text-align:right;
  background:var(--tono); border:0; border-radius:var(--r); color:#fff;
  padding:22px 22px 18px; overflow:hidden;
  transition:transform .16s, box-shadow .16s;
}
.lqs-tema:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(20,22,29,.22); }
.lqs-tema.es-actual{ outline:3px solid var(--ink); outline-offset:3px; }
.lqs-tema.tono-c1{ --tono:var(--c1); }
.lqs-tema.tono-c2{ --tono:var(--c2); }
.lqs-tema.tono-c3{ --tono:var(--c3); }
.lqs-tema.tono-c4{ --tono:var(--c4); }
.lqs-tema.tono-c5{ --tono:var(--c5); }
.lqs-tema.tono-c6{ --tono:var(--c6); }
.lqs-tema-n{
  position:absolute; top:10px; left:18px;
  font-family:var(--display); font-weight:800; font-size:4.2rem; line-height:1;
  color:rgba(255,255,255,.17);
}
.lqs-tema h2{ font-size:1.16rem; margin:0 0 6px; color:#fff; position:relative; }
.lqs-tema p{
  font-family:var(--texto); font-size:.84rem; line-height:1.45;
  color:rgba(255,255,255,.82); margin:0 0 14px; position:relative;
}
.lqs-tema-ir{
  font-family:var(--texto); font-size:.78rem; font-weight:600;
  color:#fff; position:relative;
}

/* Las tarjetas de NOTA, abajo */
/* Las notas, en rejilla: dos columnas en escritorio, una en el celular.
   En lista vertical la gente no baja; en tarjetas barre con la vista. */
.lqs-notas{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px; align-items:stretch;
}
.lqs-nota-card{ display:flex; }
.lqs-nota-card > a{ display:flex; flex-direction:column; width:100%; }
.lqs-nota-txt{ flex:1 1 auto; }
.lqs-nota-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.lqs-nota-card:hover{
  transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:0 12px 30px rgba(20,22,29,.09);
}
.lqs-nota-card > a{ display:block; text-decoration:none; padding:28px 30px 24px; text-align:right; }
.lqs-nota-card h2{ font-size:1.42rem; margin:0 0 10px; color:var(--ink); line-height:1.24; }
.lqs-nota-txt{ font-family:var(--texto); font-size:.98rem; color:var(--ink-2); margin:0 0 16px; }
.lqs-nota-pie{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--texto); font-size:.8rem; color:var(--ink-3);
}
.lqs-nota-ir{ font-weight:600; color:var(--c3); }

.lqs-paginacion{ margin:44px 0 0; text-align:right; font-family:var(--texto); }
.lqs-paginacion .page-numbers{
  display:inline-block; padding:8px 14px; margin-left:6px;
  border:1px solid var(--line-2); border-radius:10px;
  color:var(--ink-2); text-decoration:none; font-size:.9rem;
}
.lqs-paginacion .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* el menú del pie, en su columna, va a la izquierda */
.lqs-pie-izq .lqs-pie-menu ul{ justify-content:flex-start; }

@media (max-width:640px){
  .lqs-notas-cab, .lqs-tema, .lqs-nota-card > a{ text-align:left; }
  .lqs-tema-n{ position:static; display:block; margin-bottom:6px; }
  .lqs-nota-card h2{ font-size:1.2rem; }
  .lqs-nota-card > a{ padding:22px 20px 18px; }
}

/* El título de una nota comparte la columna del texto.
   Divi le deja el ancho completo del área (1080 px) mientras el contenido se
   queda en 860 y centrado: el título terminaba 110 px más a la derecha que los
   párrafos y la alineación se veía chueca. Medido el 21-sep. */
/* El título comparte la columna del texto — en NOTAS **y en PÁGINAS**.
   Al principio sólo se aplicó a .single y las páginas quedaron con el título
   110 px más ancho que su propio texto. Las reglas del sitio se aplican al
   sitio completo, no a la plantilla donde uno las descubrió. */
.single .entry-title,
.single h1.entry-title.main_title,
.page .entry-title,
.page h1.entry-title.main_title{
  max-width:860px; margin-left:auto; margin-right:auto;
  text-align:right;
  font-size:clamp(28px, 3.4vw, 42px) !important;
  line-height:1.15;
  margin-bottom:.55em;
}

/* La cejilla de cada tarjeta, del color de su tema */
.lqs-eyebrow.tono-c1{ color:var(--c1); }
.lqs-eyebrow.tono-c2{ color:var(--c2); }
.lqs-eyebrow.tono-c3{ color:var(--c3); }
.lqs-eyebrow.tono-c4{ color:var(--c4); }
.lqs-eyebrow.tono-c5{ color:var(--c5); }
.lqs-eyebrow.tono-c6{ color:var(--c6); }

@media (max-width:760px){
  .lqs-temas{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .lqs-tema{ min-height:132px; padding:16px 16px 14px; }
  .lqs-tema h2{ font-size:1rem; }
  .lqs-tema p{ display:none; }          /* en el celular estorba: basta el nombre y el número */
  .lqs-tema-n{ font-size:3.1rem; top:6px; left:12px; }
}

/* ═══════ LAS TARJETAS DE TEMA DE LA PORTADA ═══════
   Tenían fondo pastel y no coincidían con las de /notas/. Ahora usan EXACTAMENTE
   el mismo color que su tema, para que la gente reconozca la sección por color
   en cualquier página. El orden del mazo en la portada es distinto al del
   índice, así que el color va por POSICIÓN, no por número de clase:
   s1 Herramientas (morado) · s2 Conexiones (verde) · s3 WordPress y Divi (oro)
   · s4 Lo hicimos (rojo). Si algún día se reordena el mazo, se reordena esto. */
.lqs-grid4 .lqs-sec{ border:0; color:#fff; }
.lqs-grid4 .lqs-sec.s1{ background:var(--c3); }
.lqs-grid4 .lqs-sec.s2{ background:var(--c2); }
.lqs-grid4 .lqs-sec.s3{ background:var(--c4); }
.lqs-grid4 .lqs-sec.s4{ background:var(--c1); }

.lqs-grid4 .lqs-sec h3{ color:#fff !important; }
.lqs-grid4 .lqs-sec p{ color:rgba(255,255,255,.86); }
.lqs-grid4 .lqs-sec .tag,
.lqs-grid4 .lqs-sec.s1 .tag, .lqs-grid4 .lqs-sec.s2 .tag,
.lqs-grid4 .lqs-sec.s3 .tag, .lqs-grid4 .lqs-sec.s4 .tag{
  color:rgba(255,255,255,.55) !important;
}
.lqs-grid4 .lqs-sec .clave{
  color:#fff; border-top-color:rgba(255,255,255,.28);
}
@media (min-width:900px){
  /* con fondo sólido, la sombra del encabalgado tiene que ser más oscura */
  .lqs-grid4 .lqs-sec{ box-shadow:-10px 0 24px rgba(20,22,29,.20); }
  .lqs-grid4 .lqs-sec:hover,
  .lqs-grid4 .lqs-sec:focus-within{ box-shadow:0 18px 40px rgba(20,22,29,.30); }
}

/* ═══════ BOTONES DE LOS ROTADORES DE LA PORTADA ═══════
   Antes nada de la portada llevaba a su nota: se anunciaba el hallazgo y el
   lector se quedaba sin dónde leerlo. */
.lqs-ir{ margin:14px 0 0 !important; text-align:right; }
.lqs-ir a{
  display:inline-block; font-family:var(--texto); font-size:.86rem; font-weight:600;
  color:var(--c3); text-decoration:none;
  padding:7px 16px; border:1px solid var(--line-2); border-radius:999px;
  transition:background .15s, border-color .15s, color .15s;
}
.lqs-ir a:hover{ background:var(--c3); border-color:var(--c3); color:#fff; }
.lqs-ir a span{ margin-left:4px; }

/* dentro de una diapositiva el botón va alineado con su texto */
.lqs-slide .txt .lqs-ir{ text-align:right; }

/* La pleca: el renglón entero es la liga, sin que se note de más */
.lqs-tira .rot a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(241,243,248,.28);
  transition:border-color .15s, color .15s;
}
.lqs-tira .rot a:hover{ color:#fff; border-bottom-color:var(--c4); }

/* ═══════ EL CRUCE DE LAS TRANSICIONES ═══════
   Con los dos textos a medio camino se veían ENCIMADOS y parecía un error de
   maquetación. El que sale se va rápido; el que entra espera a que termine. */
.lqs-tira .rot span,
.lqs-titular .rotq .q,
.lqs-slider .lqs-slide{ transition:opacity .22s ease, visibility .22s; }
.lqs-tira .rot span.on,
.lqs-titular .rotq .q.on,
.lqs-slider .lqs-slide.on{ transition:opacity .3s ease .24s, visibility 0s .24s; }

@media (max-width:640px){
  .lqs-ir a{ font-size:.82rem; padding:6px 13px; }
}

/* ═══════ LOS NOMBRES DE LAS TARJETAS, A LA IZQUIERDA ═══════
   En el mazo de la portada cada tarjeta queda tapada POR SU DERECHA por la
   siguiente, así que un título alineado a la derecha se pierde. Va en contra
   de la firma del portal, pero entre "alineado" y "legible" gana legible.
   Pedido de Sergio, 21-sep. Mismo criterio en las tarjetas de tema de /notas/. */
.lqs-grid4 .lqs-sec h3{ text-align:left !important; }
.lqs-grid4 .lqs-sec p{ text-align:left; }
.lqs-grid4 .lqs-sec .tag{ text-align:left; }
.lqs-grid4 .lqs-sec .clave{ text-align:left; }

.lqs-tema{ text-align:left; }
.lqs-tema h2, .lqs-tema p, .lqs-tema-ir{ text-align:left; }
/* el número se va a la derecha: la izquierda ya la ocupa el nombre */
.lqs-tema-n{ left:auto; right:18px; }
@media (max-width:760px){ .lqs-tema-n{ right:12px; } }

/* Al sacar el mazo y el bloque negro del slider quedaron colgando del <article>
   y no de .entry-content, así que tomaban 1080 px contra los 860 del texto.
   Se les da la MISMA columna centrada, que es como estaban antes. */
body.home #left-area > .lqs-grid4,
body.home #left-area > .lqs-oscuro,
body.home #left-area > .lqs-puntos,
body.home article > .lqs-grid4,
body.home article > .lqs-oscuro,
body.home article > .lqs-puntos{
  max-width:860px; margin-left:auto !important; margin-right:auto !important;
}

/* Con 5 temas, minmax(210px) daba 4 columnas y dejaba uno huérfano abajo.
   A 190px caben los 5 en un renglón; cuando lleguen a 6, parte 3 y 3. */

/* El mazo de la portada lleva a su sección de notas.
   🔴 NO envolver la tarjeta en <a>: wpautop mete un </p> suelto adentro y el
   navegador cierra y reabre el enlace — cada tarjeta se parte en TRES y el
   mazo se desarma. La liga va en el <h3> y se estira por encima con ::after. */
.lqs-grid4 .lqs-sec{ position:relative; }
.lqs-grid4 .lqs-sec h3 a{ color:#fff !important; text-decoration:none; }
.lqs-grid4 .lqs-sec h3 a::after{ content:""; position:absolute; inset:0; z-index:1; }
.lqs-grid4 .lqs-sec:hover h3 a{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:899px){ .lqs-temas > .lqs-tema{ flex:0 1 calc(50% - 7px); } }
@media (max-width:420px){ .lqs-temas > .lqs-tema{ flex:1 1 100%; } }

/* ═══════ LOS PIES DE LAS TARJETAS, TODOS A LA MISMA ALTURA ═══════
   🔴 Una regla POSTERIOR volvía a poner `display:block` en el enlace de la
   tarjeta y mataba la columna flexible, así que la fecha y el «Leerla →»
   quedaban donde terminara el texto: cada tarjeta con su pie a distinta
   altura. Esta regla va al final a propósito, para ganar por orden. */
.lqs-notas .lqs-nota-card > a{
  display:flex !important; flex-direction:column; height:100%;
  padding-bottom:22px;
}
.lqs-notas .lqs-nota-txt{ flex:1 1 auto; }
.lqs-notas .lqs-nota-pie{ margin-top:auto; }

/* Aire entre las tarjetas y el pie negro: iban demasiado pegadas */
.lqs-notas{ margin-bottom:64px; }
.lqs-paginacion{ margin-bottom:56px; }

/* ═══════ EL MAZO, AHORA DE SEIS ═══════ */
.lqs-grid4 .lqs-sec.s5{ background:var(--c5); }
.lqs-grid4 .lqs-sec.s6{ background:var(--c6); }
.lqs-grid4 .lqs-sec.s5 .tag, .lqs-grid4 .lqs-sec.s6 .tag{ color:rgba(255,255,255,.55) !important; }
@media (min-width:900px){
  /* con seis, el encabalgado se achica o los nombres no caben */
  .lqs-grid4{ padding-left:24px; }
  .lqs-grid4 .lqs-sec{ margin-left:-24px; }
  .lqs-grid4 .lqs-sec:nth-child(5){ z-index:5 }
  .lqs-grid4 .lqs-sec:nth-child(6){ z-index:6 }
}
@media (min-width:560px) and (max-width:899px){ .lqs-grid4{ grid-template-columns:1fr 1fr; } }

/* ═══════ QUE NADA TOQUE EL PIE NEGRO ═══════
   El bloque negro de la portada quedaba pegado al pie: 0 px entre uno y otro.
   El aire va en #main-content, que ya es blanco, para que se vea blanco y no
   el gris del fondo de la página. */
#main-content{ background:#fff; padding-bottom:72px; }
@media (max-width:640px){ #main-content{ padding-bottom:48px; } }

/* ═══════════ RITMO VERTICAL ÚNICO PARA TODOS LOS BLOQUES ═══════════
   Cada caja se había escrito en un momento distinto y cada una traía su propio
   margen: la gris iba 14 arriba y 0 abajo, con 12 de relleno arriba y 0 abajo;
   la de color 0 y 16; la negra 22 y 0. Medido el 21-sep y unificado aquí.
   Una sola escala: relleno SIMÉTRICO y el mismo aire arriba y abajo. */
.entry-content > .lqs-card,
.entry-content > .lqs-oscuro,
.entry-content > .lqs-tabla,
.entry-content > .lqs-lista,
.entry-content > .lqs-nota,
.entry-content > .lqs-salida,
.entry-content > .lqs-num-card{
  margin-top:28px !important; margin-bottom:28px !important;
}

/* relleno simétrico dentro de cada caja */
.lqs-card{ padding:26px !important; }
.lqs-oscuro{ padding:26px !important; }
.lqs-nota{ padding:16px 18px !important; }
.lqs-salida{ padding:16px 18px !important; }

/* una caja anidada (la gris dentro de una de color) respira menos */
.lqs-card > .lqs-nota,
.lqs-oscuro > .lqs-nota,
.lqs-num-card > .lqs-nota{ margin:18px 0 0 !important; }
.lqs-card > .lqs-nota:last-child,
.lqs-num-card > .lqs-nota:last-child{ margin-bottom:0 !important; }

/* el titular de sección manda el ritmo largo; el resto queda parejo */
.entry-content > h2{ margin-top:56px !important; margin-bottom:18px !important; }
.entry-content > h2:first-child{ margin-top:0 !important; }
.entry-content > .lqs-prosa{ margin:0 0 18px !important; padding-bottom:0 !important; }
.entry-content > .lqs-lead{ margin:0 0 28px !important; padding-bottom:0 !important; }

@media (max-width:640px){
  .entry-content > .lqs-card,
  .entry-content > .lqs-oscuro,
  .entry-content > .lqs-tabla,
  .entry-content > .lqs-lista,
  .entry-content > .lqs-nota,
  .entry-content > .lqs-num-card{ margin-top:22px !important; margin-bottom:22px !important; }
  .lqs-card, .lqs-oscuro{ padding:20px !important; }
  .entry-content > h2{ margin-top:40px !important; }
}

/* ═══════════ NAVEGACIÓN ENTRE NOTAS DEL MISMO TEMA ═══════════ */
.lqs-vecinas{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:56px 0 0 !important; padding-top:34px;
  border-top:1px solid var(--line);
}
.lqs-vecina{
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; text-decoration:none;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.lqs-vecina:hover{
  transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:0 12px 28px rgba(20,22,29,.09);
}
.lqs-vecina.es-izq{ text-align:left; }
.lqs-vecina.es-der{ text-align:right; }

.lqs-vecina-rot{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--c3);
}
.lqs-vecina-tit{
  font-family:var(--display); font-weight:800; font-size:1.06rem;
  line-height:1.25; color:var(--ink);
}
.lqs-vecina-res{
  font-family:var(--texto); font-size:.86rem; line-height:1.5; color:var(--ink-2);
}
/* la que lleva al índice del tema se distingue sin gritar */
.lqs-vecina.es-indice{ background:var(--surface-2); border-style:dashed; }

@media (max-width:640px){
  .lqs-vecinas{ grid-template-columns:1fr; gap:12px; margin-top:40px !important; padding-top:26px; }
  .lqs-vecina, .lqs-vecina.es-der{ text-align:left; }
  .lqs-vecina{ padding:16px 18px; }
}
/* tema con una sola nota: la tarjeta va a lo ancho y centrada */
.lqs-vecinas.es-sola{ grid-template-columns:1fr; }
.lqs-vecinas.es-sola .lqs-vecina{ text-align:center; }