@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..800;1,62..125,400..700&family=IBM+Plex+Mono:wght@400;500&family=Literata:ital,opsz,wght@0,7..72,300..700;1,7..72,400..600&display=swap');

/* =========================================================================
   SOY BUZO — Sistema de diseño 2026
   Medio de referencia sobre buceo en español.

   Se escribe SOBRE el marcado real de GeneratePress 3.6 + GP Premium 2.5
   (.site-header, .header-wrap, .main-navigation, .page-hero, .inside-article,
    .entry-content, .slideout-navigation, .site-footer) y sobre bloques de
   Gutenberg con clases .sb-* en la portada.

   Orden de carga en el sitio:
     main.min.css → uploads/generatepress/style.min.css → ESTE ARCHIVO
   Por eso casi todo se resuelve sin !important: basta con igualar o subir
   un punto la especificidad de GeneratePress (de ahí los `body .algo`,
   que ganan también a los <style> en línea de GP Premium).

   Índice
   01. Tokens
   02. Base y ritmo
   03. Cabecera, navegación y menú móvil
   04. Page hero (páginas interiores)
   05. Contenedores y retícula
   06. Tipografía de artículo
   07. Tablas, citas, listas, avisos
   08. Bloque FAQ de Rank Math
   09. Archivos y tarjetas
   10. Pie de página
   11. Portada (.sb-*)
   12. Accesibilidad, movimiento e impresión
   ========================================================================= */


/* =========================================================================
   01. TOKENS
   ========================================================================= */

:root {
  /* --- Paleta cruda -----------------------------------------------------
     La columna de agua: la luz cálida se pierde primero y abajo solo queda
     un verde-azul apagado. De ahí el eje petróleo, y el naranja de señal
     (el color que los buzos se llevan al agua porque el agua se lo quita). */
  --sb-abismo:            #05171B;
  --sb-fosa:              #08232A;
  --sb-petroleo:          #0D3A40;
  --sb-tinta:             #0C2A2E;
  --sb-turquesa:          #2E8082;
  --sb-turquesa-hondo:    #1E5F63;
  --sb-superficie:        #E7EDE9;
  --sb-espuma:            #F6FAF7;
  --sb-blanco:            #FFFFFF;
  --sb-senal:             #B33A16;  /* naranja legible sobre claro (AA) */
  --sb-senal-viva:        #E2551F;  /* naranja gráfico: filetes, marcas   */
  --sb-senal-clara:       #FF7A45;  /* naranja legible sobre oscuro (AA)  */

  /* --- Roles: modo claro ---------------------------------------------- */
  --sb-fondo:             var(--sb-superficie);
  --sb-fondo-2:           #DFE7E2;
  --sb-tarjeta:           var(--sb-espuma);
  --sb-tarjeta-2:         var(--sb-blanco);
  --sb-texto:             var(--sb-tinta);
  --sb-texto-suave:       #4A6468;
  --sb-texto-tenue:       #6C8386;
  --sb-linea:             #C7D4CE;
  --sb-linea-suave:       #D8E2DC;
  --sb-linea-fuerte:      var(--sb-turquesa-hondo);
  --sb-enlace:            var(--sb-turquesa-hondo);
  --sb-enlace-hover:      var(--sb-senal);
  --sb-acento:            var(--sb-senal);
  --sb-acento-grafico:    var(--sb-senal-viva);
  --sb-banda:             var(--sb-petroleo);
  --sb-banda-texto:       #DCE9E5;
  --sb-banda-titulo:      var(--sb-blanco);
  --sb-banda-linea:       rgba(220,233,229,.22);

  /* --- Tipografía ------------------------------------------------------ */
  --sb-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sb-lectura: 'Literata', Charter, Georgia, 'Times New Roman', serif;
  --sb-datos:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sb-t-micro: .6875rem;                                       /* 11px    */
  --sb-t-mini:  .8125rem;                                       /* 13px    */
  --sb-t-peq:   .9375rem;                                       /* 15px    */
  --sb-t-base:  clamp(1.0625rem, 1.0125rem + .22vw, 1.1875rem); /* 17–19px */
  --sb-t-lede:  clamp(1.1875rem, 1.09rem + .45vw, 1.4375rem);
  --sb-t-h4:    clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --sb-t-h3:    clamp(1.375rem, 1.24rem + .6vw, 1.75rem);
  --sb-t-h2:    clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --sb-t-h1:    clamp(2.125rem, 1.72rem + 1.8vw, 3.5rem);
  --sb-t-heroe: clamp(2.5rem, 1.4rem + 5.4vw, 6.25rem);

  --sb-alto-lectura: 1.72;
  --sb-alto-titulo:  1.08;

  /* --- Espaciado (paso 4px) ------------------------------------------- */
  --sb-e1:  .25rem;  --sb-e2:  .5rem;   --sb-e3:  .75rem;  --sb-e4: 1rem;
  --sb-e5: 1.5rem;   --sb-e6:  2rem;    --sb-e7:  2.5rem;  --sb-e8: 3rem;
  --sb-e9:  4rem;    --sb-e10: 5.5rem;  --sb-e11: 7rem;    --sb-e12: 9rem;
  --sb-banda-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Radios ---------------------------------------------------------- */
  --sb-r-xs: 2px;  --sb-r-s: 6px;  --sb-r-m: 12px;  --sb-r-l: 20px;
  --sb-r-pastilla: 999px;

  /* --- Sombras --------------------------------------------------------- */
  --sb-sombra-1: 0 1px 2px rgba(5,23,27,.05), 0 10px 24px -16px rgba(5,23,27,.35);
  --sb-sombra-2: 0 2px 4px rgba(5,23,27,.05), 0 28px 56px -32px rgba(5,23,27,.45);

  /* --- Retícula -------------------------------------------------------- */
  --sb-ancho:  1160px;
  --sb-medida: 68ch;      /* 65–75 caracteres en Literata */
  --sb-canal:  clamp(1.25rem, 4vw, 3rem);
  --sb-cabecera-alto: 76px;

  /* --- Se reescriben las variables del propio GeneratePress, para que su
         CSS dinámico (botones, menús, enlaces) herede esta paleta. ------ */
  --contrast:   var(--sb-texto);
  --contrast-2: var(--sb-petroleo);
  --contrast-3: var(--sb-texto-suave);
  --base:       var(--sb-linea);
  --base-2:     var(--sb-tarjeta);
  --base-3:     var(--sb-fondo);
  --accent:     var(--sb-senal);
  --accent-2:   var(--sb-senal-viva);
  --accent-3:   var(--sb-turquesa);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sb-fondo:          var(--sb-abismo);
    --sb-fondo-2:        #041216;
    --sb-tarjeta:        #0A2028;
    --sb-tarjeta-2:      #0C262E;
    --sb-texto:          #D6E3E0;
    --sb-texto-suave:    #9DB7B6;
    --sb-texto-tenue:    #7B9698;
    --sb-linea:          #17393F;
    --sb-linea-suave:    #113035;
    --sb-linea-fuerte:   var(--sb-turquesa);
    --sb-enlace:         #6FC3BF;
    --sb-enlace-hover:   var(--sb-senal-clara);
    --sb-acento:         var(--sb-senal-clara);
    --sb-acento-grafico: var(--sb-senal-clara);
    --sb-banda:          #071E24;
    --sb-banda-texto:    #C7DAD7;
    --sb-banda-titulo:   #EAF3F0;
    --sb-banda-linea:    rgba(199,218,215,.18);

    --sb-sombra-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -16px rgba(0,0,0,.7);
    --sb-sombra-2: 0 2px 4px rgba(0,0,0,.5), 0 28px 56px -32px rgba(0,0,0,.8);

    --contrast:   var(--sb-texto);
    --contrast-2: #0A2028;
    --contrast-3: var(--sb-texto-suave);
    --base:       var(--sb-linea);
    --base-2:     var(--sb-tarjeta);
    --base-3:     var(--sb-fondo);
    --accent:     var(--sb-senal-clara);
    --accent-2:   var(--sb-senal-clara);
    --accent-3:   var(--sb-turquesa);
  }
  html { color-scheme: dark; }
}


/* =========================================================================
   02. BASE Y RITMO
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body,
button, input, select, textarea {
  font-family: var(--sb-lectura);
  font-size: var(--sb-t-base);
}

body {
  background-color: var(--sb-fondo);
  color: var(--sb-texto);
  line-height: var(--sb-alto-lectura);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 16;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--sb-senal-viva); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sb-display);
  color: var(--sb-texto);
  line-height: var(--sb-alto-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
  font-variation-settings: 'wdth' 100, 'wght' 700;
}

h1 { font-size: var(--sb-t-h1); font-variation-settings: 'wdth' 108, 'wght' 720; }
h2 { font-size: var(--sb-t-h2); font-variation-settings: 'wdth' 104, 'wght' 700; }
h3 { font-size: var(--sb-t-h3); font-variation-settings: 'wdth' 100, 'wght' 660; line-height: 1.18; }
h4 { font-size: var(--sb-t-h4); font-variation-settings: 'wdth' 96,  'wght' 640; line-height: 1.25; }
h5, h6 {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sb-texto-suave);
}

a { color: var(--sb-enlace); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus { color: var(--sb-enlace-hover); }

strong, b { font-variation-settings: 'wght' 640; }

code, kbd, samp, pre { font-family: var(--sb-datos); font-size: .9em; }

hr, .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--sb-linea);
  margin-block: var(--sb-e8);
  opacity: 1;
}

/* Botones: GeneratePress los pinta de amarillo por defecto. */
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button,
.wp-block-button__link,
a.wp-block-button__link:not(.has-background) {
  font-family: var(--sb-display);
  font-size: var(--sb-t-peq);
  font-weight: 400;
  font-variation-settings: 'wdth' 92, 'wght' 620;
  letter-spacing: .02em;
  color: var(--sb-espuma);
  background-color: var(--sb-petroleo);
  border: 1px solid var(--sb-petroleo);
  border-radius: var(--sb-r-pastilla);
  padding: .7em 1.5em;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

button:not(.menu-toggle):hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.button:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
  color: var(--sb-blanco);
  background-color: var(--sb-senal);
  border-color: var(--sb-senal);
}


/* =========================================================================
   03. CABECERA, NAVEGACIÓN Y MENÚ MÓVIL
   ========================================================================= */

/* GP Premium deja .header-wrap en position:absolute sobre el page hero.
   Cuando no hay hero debajo, la cabecera necesita fondo propio o los
   enlaces claros quedan invisibles. */
.header-wrap {
  background-color: var(--sb-abismo);
  transition: background-color .25s ease;
}
.header-wrap:has(+ .page-hero),
body.home .header-wrap { background-color: transparent; }

.header-wrap .site-header,
.site-header { background: transparent; }

body .inside-header {
  padding-block: var(--sb-e4);
  align-items: center;
  gap: var(--sb-e4);
}

/* Marca */
.site-branding .main-title {
  font-family: var(--sb-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: .01em;
  margin: 0;
}
.site-header .main-title a,
.site-header a {
  color: var(--sb-blanco);
  text-decoration: none;
  font-variation-settings: 'wdth' 78, 'wght' 780;
  text-transform: uppercase;
}
.site-header .main-title a { position: relative; padding-right: .55em; }
.site-header .main-title a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: .18em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--sb-senal-viva);
}
.site-header a:hover { color: var(--sb-senal-clara); }

/* Menú principal */
.main-navigation,
.main-navigation ul ul { background-color: transparent; }

.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family: var(--sb-display);
  font-size: var(--sb-t-mini);
  font-weight: 400;
  font-variation-settings: 'wdth' 84, 'wght' 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: rgba(255,255,255,.9); }

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--sb-senal-clara);
  background-color: transparent;
}

.main-navigation .main-nav ul li a { padding-inline: .9em; }

/* Submenús: tarjeta oscura, no bloque plano */
.main-navigation ul ul {
  background-color: var(--sb-fosa);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--sb-r-m);
  box-shadow: var(--sb-sombra-2);
  padding-block: var(--sb-e2);
  width: 15em;
  overflow: hidden;
}
.main-navigation ul ul li a {
  text-transform: none;
  letter-spacing: .01em;
  font-size: var(--sb-t-peq);
  font-variation-settings: 'wdth' 95, 'wght' 500;
  padding-block: .55em;
  line-height: 1.35;
}
.main-navigation ul ul li:not([class*="current-menu-"]):hover > a {
  background-color: rgba(255,255,255,.06);
}

/* Navegación pegajosa (GP Premium añade .navigation-stick) */
.main-navigation.navigation-stick,
.main-navigation.navigation-stick .inside-navigation {
  background-color: rgba(5,23,27,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.main-navigation.navigation-stick { border-bottom: 1px solid rgba(255,255,255,.1); }

/* Botón hamburguesa */
button.menu-toggle,
button.menu-toggle:hover,
button.menu-toggle:focus {
  background: transparent;
  color: rgba(255,255,255,.92);
  border: 0;
  border-radius: 0;
}
button.menu-toggle:hover { color: var(--sb-senal-clara); }

/* Menú deslizante móvil (GP Premium: #generate-slideout-menu) */
.slideout-navigation.main-navigation,
#generate-slideout-menu.slideout-navigation { background-color: var(--sb-abismo); }

#generate-slideout-menu .inside-navigation { padding-top: var(--sb-e6); }

.slideout-navigation.main-navigation .main-nav ul li a,
#generate-slideout-menu .main-nav ul li a {
  color: var(--sb-espuma);
  font-size: 1.0625rem;
  font-variation-settings: 'wdth' 88, 'wght' 620;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.08);
  line-height: 1.35;
  padding-block: .95em;
}
#generate-slideout-menu .main-nav ul ul {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width: auto;
}
#generate-slideout-menu .main-nav ul ul li a {
  color: var(--sb-texto-tenue);
  font-family: var(--sb-lectura);
  font-size: var(--sb-t-peq);
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
  padding-left: var(--sb-e5);
}
.slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.slideout-navigation.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--sb-senal-clara);
  background-color: rgba(255,255,255,.04);
}
.slideout-navigation button.slideout-exit,
.slideout-navigation button.slideout-exit:hover { color: var(--sb-espuma); background: transparent; }
.slideout-overlay { background-color: rgba(5,23,27,.6); }


/* =========================================================================
   04. PAGE HERO (páginas y entradas interiores)
   El elemento de GP Premium trae una foto de fondo por CSS en línea; se
   sustituye por una banda tipográfica que funciona sin imágenes.
   ========================================================================= */

body .page-hero {
  background-image: none;
  background-color: var(--sb-abismo);
  background-image:
    radial-gradient(120% 90% at 12% -20%, rgba(226,85,31,.20) 0%, rgba(226,85,31,0) 55%),
    linear-gradient(178deg, var(--sb-petroleo) 0%, var(--sb-fosa) 55%, var(--sb-abismo) 100%);
  color: var(--sb-banda-texto);
  text-align: left;
  padding: calc(var(--sb-cabecera-alto) + var(--sb-e9)) var(--sb-canal) var(--sb-e9);
  position: relative;
  overflow: hidden;
}

/* Filete de señal a la izquierda: la única marca gráfica del encabezado. */
body .page-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sb-senal-viva) 0%, var(--sb-turquesa) 60%, transparent 100%);
}

body .page-hero .inside-page-hero.grid-container {
  max-width: var(--sb-ancho);
  margin-inline: auto;
  padding: 0;
}

body .page-hero h1,
body .page-hero h2,
body .page-hero h3 { color: var(--sb-banda-titulo); }

body .page-hero h1 {
  font-size: var(--sb-t-h1);
  font-variation-settings: 'wdth' 88, 'wght' 740;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin: 0;
}
body .page-hero h2 {
  font-family: var(--sb-lectura);
  font-size: var(--sb-t-lede);
  font-variation-settings: 'wght' 400;
  letter-spacing: 0;
  color: var(--sb-banda-texto);
  max-width: 56ch;
  margin-top: var(--sb-e4);
  line-height: 1.5;
}
body .page-hero h3 { margin-top: var(--sb-e6); }

body .page-hero a.button {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: var(--sb-blanco);
  margin-right: var(--sb-e2);
}
body .page-hero a.button:hover,
body .page-hero a.button:focus {
  background: var(--sb-senal);
  border-color: var(--sb-senal);
}

/* En la portada el hero lo pone el contenido (bloques .sb-heroe). */
body.home .page-hero,
body.home .entry-header { display: none; }


/* =========================================================================
   05. CONTENEDORES Y RETÍCULA
   ========================================================================= */

body.one-container .container,
body.one-container .site-content { background-color: transparent; }

body.one-container:not(.home) .site-content {
  padding: var(--sb-e9) var(--sb-canal) var(--sb-e10);
}

/* Con page hero, el hero ya deja el aire superior. */
body.one-container:not(.home):has(.page-hero) .site-content { padding-top: var(--sb-e8); }

.grid-container { max-width: var(--sb-ancho); }

/* La portada gobierna sus propios anchos, sección por sección. */
body.home #page.container { max-width: 100%; padding: 0; }
body.home .site-content { padding: 0; }
body.home .inside-article { padding: 0; }
body.home .entry-content { margin-top: 0; }
body.home .entry-content { max-width: 100%; }


/* =========================================================================
   06. TIPOGRAFÍA DE ARTÍCULO
   Medida de 65–75 caracteres, jerarquía clara y ritmo vertical estable
   para textos de 2.000–4.000 palabras.
   ========================================================================= */

body.single .entry-content > *,
body.page:not(.home) .entry-content > *,
body.single .entry-header,
body.page:not(.home) .entry-header {
  max-width: var(--sb-medida);
  margin-inline: auto;
}

body.single .entry-content > .alignwide,
body.page:not(.home) .entry-content > .alignwide,
body.single .entry-content > .wp-block-table,
body.page:not(.home) .entry-content > .wp-block-table,
body.single .entry-content > #rank-math-faq,
body.page:not(.home) .entry-content > #rank-math-faq {
  max-width: min(100%, 900px);
}

body:not(.home) .entry-content > * + * { margin-top: var(--sb-e5); }

body:not(.home) .entry-content p {
  margin: 0 0 var(--sb-e5);
  hanging-punctuation: first last;
}

body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3,
body:not(.home) .entry-content > h4 { margin-bottom: var(--sb-e4); }

body:not(.home) .entry-content h2 {
  margin-top: var(--sb-e9);
  padding-top: var(--sb-e5);
  border-top: 1px solid var(--sb-linea);
  position: relative;
  font-variation-settings: 'wdth' 92, 'wght' 720;
  letter-spacing: -.02em;
}
body:not(.home) .entry-content h2::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--sb-senal-viva);
}

body:not(.home) .entry-content h3 {
  margin-top: var(--sb-e7);
  color: var(--sb-turquesa-hondo);
  font-variation-settings: 'wdth' 98, 'wght' 660;
}
@media (prefers-color-scheme: dark) {
  body:not(.home) .entry-content h3 { color: #7FCFCB; }
}

body:not(.home) .entry-content h4 {
  margin-top: var(--sb-e6);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-peq);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-texto-suave);
}

/* Primer párrafo: entradilla. Vale como resumen citable (BLUF). */
body.single .entry-content > p:first-of-type {
  font-size: var(--sb-t-lede);
  line-height: 1.55;
  color: var(--sb-texto);
  font-variation-settings: 'wght' 420;
}

body:not(.home) .inside-article .entry-content a {
  color: var(--sb-enlace);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sb-enlace) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body:not(.home) .inside-article .entry-content a:hover,
body:not(.home) .inside-article .entry-content a:focus {
  color: var(--sb-enlace-hover);
  text-decoration-color: currentColor;
}

/* Metadatos de entrada */
.entry-meta,
.entry-meta a {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  letter-spacing: .04em;
  color: var(--sb-texto-tenue);
  text-transform: none;
}
.entry-meta a { text-decoration: none; border-bottom: 1px solid var(--sb-linea); }
.entry-meta a:hover { color: var(--sb-acento); border-bottom-color: currentColor; }
.entry-header .entry-meta { margin-bottom: var(--sb-e6); }
footer.entry-meta { margin-top: var(--sb-e8); padding-top: var(--sb-e4); border-top: 1px solid var(--sb-linea); }


/* =========================================================================
   07. TABLAS, CITAS, LISTAS Y AVISOS
   ========================================================================= */

body:not(.home) .entry-content ul,
body:not(.home) .entry-content ol { margin: 0 0 var(--sb-e5); padding-left: 1.35em; }
body:not(.home) .entry-content li { margin-bottom: var(--sb-e3); }
body:not(.home) .entry-content li::marker { color: var(--sb-senal-viva); font-variation-settings: 'wght' 700; }
body:not(.home) .entry-content ul ul,
body:not(.home) .entry-content ol ol { margin-top: var(--sb-e3); margin-bottom: 0; }

body:not(.home) .entry-content blockquote,
body:not(.home) .entry-content .wp-block-quote {
  margin: var(--sb-e7) 0;
  padding: 0 0 0 var(--sb-e5);
  border-left: 3px solid var(--sb-senal-viva);
  font-size: var(--sb-t-lede);
  line-height: 1.5;
  font-style: normal;
  color: var(--sb-texto);
}
body:not(.home) .entry-content blockquote p:last-child { margin-bottom: 0; }
body:not(.home) .entry-content blockquote cite,
body:not(.home) .entry-content .wp-block-quote cite {
  display: block;
  margin-top: var(--sb-e3);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  font-style: normal;
  letter-spacing: .04em;
  color: var(--sb-texto-tenue);
}

/* Tablas: registro de instrumento, cifras alineadas y tabulares. */
body:not(.home) .entry-content .wp-block-table,
body:not(.home) .entry-content figure.wp-block-table { overflow-x: auto; }

body:not(.home) .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sb-display);
  font-size: var(--sb-t-peq);
  font-variation-settings: 'wdth' 96, 'wght' 450;
  font-variant-numeric: tabular-nums;
  background: var(--sb-tarjeta);
  border: 1px solid var(--sb-linea);
  border-radius: var(--sb-r-s);
  overflow: hidden;
}
body:not(.home) .entry-content th {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--sb-banda-texto);
  background: var(--sb-petroleo);
  padding: .85em 1em;
  border: 0;
}
body:not(.home) .entry-content td {
  padding: .8em 1em;
  border: 0;
  border-top: 1px solid var(--sb-linea-suave);
  vertical-align: top;
}
body:not(.home) .entry-content tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--sb-linea-suave) 40%, transparent);
}

body:not(.home) .entry-content .wp-block-table figcaption,
body:not(.home) .entry-content figcaption {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  color: var(--sb-texto-tenue);
  margin-top: var(--sb-e3);
}

/* Grupo de Gutenberg con fondo: caja de aviso o de resumen. */
body:not(.home) .entry-content .wp-block-group.has-background {
  border-radius: var(--sb-r-m);
  padding: var(--sb-e6);
  border: 1px solid var(--sb-linea);
}

body:not(.home) .entry-content pre {
  background: var(--sb-fosa);
  color: var(--sb-espuma);
  padding: var(--sb-e5);
  border-radius: var(--sb-r-s);
  overflow-x: auto;
}
body:not(.home) .entry-content :not(pre) > code {
  background: color-mix(in srgb, var(--sb-turquesa) 14%, transparent);
  padding: .15em .4em;
  border-radius: var(--sb-r-xs);
}

body:not(.home) .entry-content img,
.wp-block-image img { border-radius: var(--sb-r-s); height: auto; }


/* =========================================================================
   08. BLOQUE FAQ DE RANK MATH
   Marcado real: #rank-math-faq .rank-math-list .rank-math-list-item >
   h3.rank-math-question + .rank-math-answer
   ========================================================================= */

#rank-math-faq.rank-math-block {
  margin-top: var(--sb-e7);
  border-top: 1px solid var(--sb-linea);
}

/* El bloque se sirve como acordeón: un <input type="checkbox"> invisible
   sobre el <h3> y las respuestas con max-height:0. En un medio de consulta
   las respuestas se leen siempre, así que se desactiva el plegado. */
#rank-math-faq .rank-math-list-item { position: relative; padding: var(--sb-e5) 0; border-bottom: 1px solid var(--sb-linea); }
#rank-math-faq .rank-math-list-item input { display: none; }

#rank-math-faq .rank-math-list-item h3.rank-math-question,
h3.rank-math-question {
  margin: 0 0 var(--sb-e3);
  padding: 0 0 0 1.9rem;
  background: transparent;
  cursor: default;
  position: relative;
  font-family: var(--sb-display);
  font-size: var(--sb-t-h4) !important;
  font-weight: 400 !important;
  font-variation-settings: 'wdth' 96, 'wght' 660;
  line-height: 1.3;
  color: var(--sb-texto);
}

/* El triángulo del plugin se reemplaza por un rombo de señal. */
#rank-math-faq .rank-math-list-item h3.rank-math-question::before,
h3.rank-math-question::before {
  content: '';
  position: absolute;
  left: .3rem;
  top: .55em;
  width: .55rem;
  height: .55rem;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: var(--sb-senal-viva);
  transform: rotate(45deg);
}
#rank-math-faq .rank-math-list-item input:checked + h3.rank-math-question::before { transform: rotate(45deg); }

#rank-math-faq .rank-math-answer,
#rank-math-faq .rank-math-list-item input:checked + h3 ~ .rank-math-answer {
  max-height: none;
  overflow: visible;
  padding: 0 0 0 1.9rem;
  color: var(--sb-texto-suave);
}
.rank-math-answer p { margin-bottom: var(--sb-e3); }
.rank-math-answer p:last-child { margin-bottom: 0; }


/* =========================================================================
   09. ARCHIVOS Y TARJETAS
   En los archivos de categoría GeneratePress imprime un <article> por
   entrada dentro de .site-main; se convierte en una retícula de fichas.
   ========================================================================= */

body.archive .site-main,
body.blog .site-main,
body.search-results .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--sb-e5);
  align-items: start;
}

body.archive .site-main > .page-header,
body.blog .site-main > .page-header,
body.archive .site-main > .paging-navigation,
body.blog .site-main > .paging-navigation,
body.search-results .site-main > .paging-navigation { grid-column: 1 / -1; }

body.archive .site-main > article,
body.blog .site-main > article,
body.search-results .site-main > article { margin: 0; padding: 0; }

body.archive .site-main .inside-article,
body.blog .site-main .inside-article,
body.search-results .site-main .inside-article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sb-e3);
  background: var(--sb-tarjeta);
  border: 1px solid var(--sb-linea);
  border-radius: var(--sb-r-m);
  padding: var(--sb-e5);
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.archive .site-main .inside-article::before,
body.blog .site-main .inside-article::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: var(--sb-senal-viva);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
body.archive .site-main .inside-article:hover,
body.blog .site-main .inside-article:hover,
body.archive .site-main .inside-article:focus-within {
  border-color: var(--sb-linea-fuerte);
  transform: translateY(-2px);
  box-shadow: var(--sb-sombra-1);
}
body.archive .site-main .inside-article:hover::before,
body.blog .site-main .inside-article:hover::before,
body.archive .site-main .inside-article:focus-within::before { transform: scaleX(1); }

body.archive .site-main .entry-header,
body.blog .site-main .entry-header { margin: 0; max-width: none; }

body.archive .entry-title,
body.blog .entry-title,
body.search-results .entry-title {
  font-size: var(--sb-t-h4);
  line-height: 1.22;
  margin: 0 0 var(--sb-e2);
  font-variation-settings: 'wdth' 94, 'wght' 680;
}
body.archive .entry-title a,
body.blog .entry-title a,
body.search-results .entry-title a { color: var(--sb-texto); text-decoration: none; }
body.archive .entry-title a:hover,
body.blog .entry-title a:hover { color: var(--sb-acento); }

body.archive .entry-header .entry-meta,
body.blog .entry-header .entry-meta,
body.search-results .entry-header .entry-meta { margin-bottom: 0; }

body.archive .entry-summary,
body.blog .entry-summary,
body.archive .entry-summary p,
body.blog .entry-summary p {
  font-size: var(--sb-t-peq);
  line-height: 1.6;
  color: var(--sb-texto-suave);
  margin: 0;
  flex: 1 1 auto;
}
body.archive .entry-summary p,
body.blog .entry-summary p { margin: 0; }

a.read-more {
  display: inline-block;
  margin-top: var(--sb-e2);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  letter-spacing: .04em;
  color: var(--sb-acento);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

body.archive .site-main footer.entry-meta,
body.blog .site-main footer.entry-meta {
  margin: 0;
  padding-top: var(--sb-e3);
  border-top: 1px solid var(--sb-linea-suave);
  font-size: var(--sb-t-micro);
}

/* Paginación */
.paging-navigation .nav-links,
.nav-links { display: flex; flex-wrap: wrap; gap: var(--sb-e2); align-items: center; }
.paging-navigation .page-numbers {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  padding: .5em .85em;
  border: 1px solid var(--sb-linea);
  border-radius: var(--sb-r-s);
  text-decoration: none;
  color: var(--sb-texto-suave);
}
.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
  background: var(--sb-petroleo);
  border-color: var(--sb-petroleo);
  color: var(--sb-espuma);
}

/* Navegación entre entradas */
.post-navigation .nav-previous a,
.post-navigation .nav-next a { text-decoration: none; font-family: var(--sb-display); }


/* =========================================================================
   10. PIE DE PÁGINA
   ========================================================================= */

.site-footer { background-color: var(--sb-abismo); color: var(--sb-banda-texto); }

.footer-widgets { background-color: transparent; }
.footer-widgets-container { padding: var(--sb-e9) var(--sb-canal) var(--sb-e7); }
.inside-footer-widgets { gap: var(--sb-e6); }

.site-footer .widget-title,
.footer-widgets .widget-title {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-turquesa);
  margin-bottom: var(--sb-e4);
}
.site-footer p,
.site-footer li {
  font-size: var(--sb-t-peq);
  line-height: 1.6;
  color: var(--sb-banda-texto);
}
.site-footer p strong { color: var(--sb-blanco); }
.site-footer a { color: var(--sb-espuma); text-decoration: none; border-bottom: 1px solid var(--sb-banda-linea); }
.site-footer a:hover { color: var(--sb-senal-clara); border-bottom-color: currentColor; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--sb-e2); }

.site-info {
  border-top: 1px solid var(--sb-banda-linea);
  background: transparent;
}
.inside-site-info {
  padding: var(--sb-e5) var(--sb-canal);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  letter-spacing: .06em;
  color: var(--sb-texto-tenue);
}
.site-info .copyright-bar { color: inherit; }


/* =========================================================================
   11. PORTADA — bloques .sb-*
   Cada sección es una retícula de tres columnas: canal, contenido, canal.
   Los hijos caen solos en la columna de contenido; .sb-completo se sale a
   sangre sin necesitar alignfull.
   ========================================================================= */

.sb-seccion {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--sb-canal), 1fr)
    [content-start] minmax(0, var(--sb-ancho)) [content-end]
    minmax(var(--sb-canal), 1fr) [full-end];
  padding-block: var(--sb-banda-y);
  border-top: 1px solid var(--sb-linea);
}
.sb-seccion > * { grid-column: content; margin-block: 0; max-width: none; }
.sb-seccion > .sb-completo { grid-column: full; }

/* Rótulos y títulos de sección --------------------------------------- */
.sb-kicker {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-turquesa-hondo);
  margin: 0 0 var(--sb-e3);
  display: flex;
  align-items: center;
  gap: .7em;
}
.sb-kicker::before {
  content: '';
  width: 1.6rem;
  height: 2px;
  background: var(--sb-senal-viva);
  flex: none;
}
@media (prefers-color-scheme: dark) { .sb-kicker { color: var(--sb-turquesa); } }

.sb-titulo {
  font-size: var(--sb-t-h2);
  margin: 0 0 var(--sb-e4);
  max-width: 20ch;
  font-variation-settings: 'wdth' 96, 'wght' 720;
  letter-spacing: -.025em;
}

.sb-lede {
  font-size: var(--sb-t-lede);
  line-height: 1.5;
  color: var(--sb-texto-suave);
  max-width: 56ch;
  margin: 0 0 var(--sb-e6);
}

.sb-seccion > .sb-pie {
  margin-top: var(--sb-e6);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  letter-spacing: .04em;
}
.sb-pie a { color: var(--sb-acento); text-decoration: none; border-bottom: 1px solid currentColor; }
.sb-lede + .sb-pie { margin-top: 0; }

/* --- Hero ------------------------------------------------------------- */
.sb-heroe {
  background-color: var(--sb-abismo);
  background-image:
    radial-gradient(100% 80% at 8% -10%, rgba(226,85,31,.22) 0%, rgba(226,85,31,0) 58%),
    linear-gradient(176deg, #10454C 0%, var(--sb-fosa) 52%, var(--sb-abismo) 100%);
  color: var(--sb-banda-texto);
  border-top: 0;
  padding-block: calc(var(--sb-cabecera-alto) + var(--sb-e9)) var(--sb-e9);
  position: relative;
  overflow: hidden;
}
.sb-heroe::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sb-senal-viva) 0%, var(--sb-turquesa) 55%, transparent 100%);
}
.sb-heroe .sb-kicker { color: var(--sb-turquesa); }

.sb-heroe__titulo {
  font-family: var(--sb-display);
  font-size: var(--sb-t-heroe);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--sb-blanco);
  margin: 0 0 var(--sb-e6);
  text-wrap: nowrap;
}
/* La firma de la casa: el titular se comprime al descender, como el
   volumen de un gas al bajar (Boyle). Eje wdth de Archivo, 3 pasos. */
.sb-heroe__titulo span {
  display: block;
  animation: sb-emerge .8s cubic-bezier(.2,.7,.3,1) backwards;
}
.sb-heroe__l1 { font-variation-settings: 'wdth' 122, 'wght' 560; color: #EAF3F0; animation-delay: .05s; }
.sb-heroe__l2 { font-variation-settings: 'wdth' 96,  'wght' 680; color: #BFD8D4; animation-delay: .18s; }
.sb-heroe__l3 { font-variation-settings: 'wdth' 70,  'wght' 800; color: var(--sb-senal-clara); animation-delay: .31s; }

@keyframes sb-emerge {
  from { opacity: 0; transform: translateY(.35em); }
  to   { opacity: 1; transform: none; }
}

.sb-heroe__deck {
  font-size: var(--sb-t-lede);
  line-height: 1.55;
  color: var(--sb-banda-texto);
  max-width: 54ch;
  margin: 0 0 var(--sb-e6);
}

.sb-acciones { display: flex; flex-wrap: wrap; gap: var(--sb-e3); margin: 0; }
.sb-acciones a {
  display: inline-block;
  font-family: var(--sb-display);
  font-size: var(--sb-t-peq);
  font-variation-settings: 'wdth' 92, 'wght' 620;
  letter-spacing: .02em;
  text-decoration: none;
  padding: .75em 1.6em;
  border-radius: var(--sb-r-pastilla);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--sb-blanco);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sb-acciones a:first-child { background: var(--sb-senal); border-color: var(--sb-senal); }
.sb-acciones a:hover,
.sb-acciones a:focus { background: var(--sb-blanco); border-color: var(--sb-blanco); color: var(--sb-abismo); }

/* --- Manifiesto ------------------------------------------------------- */
.sb-manifiesto { border-top: 0; }
.sb-principios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e6);
  margin: 0;
}
.sb-principio { margin: 0; }
.sb-principio h3 {
  font-size: var(--sb-t-h4);
  margin: 0 0 var(--sb-e2);
  padding-top: var(--sb-e3);
  border-top: 2px solid var(--sb-senal-viva);
  font-variation-settings: 'wdth' 92, 'wght' 680;
}
.sb-principio p { margin: 0; color: var(--sb-texto-suave); font-size: var(--sb-t-peq); line-height: 1.6; }

/* --- Matriz de secciones (la firma estructural: 9 celdas, como una
       tabla de buceo) ------------------------------------------------- */
.sb-matriz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--sb-linea);
  border: 1px solid var(--sb-linea);
  border-radius: var(--sb-r-m);
  overflow: hidden;
  margin: 0;
}
.sb-celda {
  margin: 0;
  background: var(--sb-tarjeta);
  padding: var(--sb-e5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sb-e2);
  transition: background-color .2s ease;
}
.sb-celda::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sb-senal-viva);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.sb-celda:hover,
.sb-celda:focus-within { background: var(--sb-tarjeta-2); }
.sb-celda:hover::before,
.sb-celda:focus-within::before { transform: scaleX(1); }

.sb-celda h3 {
  margin: 0;
  font-size: var(--sb-t-h4);
  font-variation-settings: 'wdth' 92, 'wght' 680;
  line-height: 1.2;
}
.sb-celda h3 a { color: var(--sb-texto); text-decoration: none; }
.sb-celda h3 a::after { content: ''; position: absolute; inset: 0; }
.sb-celda:hover h3 a { color: var(--sb-acento); }
.sb-celda p {
  margin: 0;
  font-size: var(--sb-t-peq);
  line-height: 1.55;
  color: var(--sb-texto-suave);
}

/* --- Pilares ---------------------------------------------------------- */
.sb-pilares { background: var(--sb-fondo-2); }
.sb-lista-pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--sb-linea);
}
.sb-pilar {
  margin: 0;
  padding: var(--sb-e5) 0;
  border-bottom: 1px solid var(--sb-linea);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e1);
  align-content: start;
  transition: padding-left .25s ease;
}
.sb-pilar:hover { padding-left: var(--sb-e3); }
.sb-pilar__seccion {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-texto-tenue);
  margin: 0;
}
.sb-pilar h3 {
  margin: 0;
  font-size: var(--sb-t-h4);
  font-variation-settings: 'wdth' 94, 'wght' 680;
  line-height: 1.2;
}
.sb-pilar h3 a { color: var(--sb-texto); text-decoration: none; }
.sb-pilar h3 a::after { content: ''; position: absolute; inset: 0; }
.sb-pilar:hover h3 a { color: var(--sb-acento); }
.sb-pilar p:last-child {
  margin: 0;
  font-size: var(--sb-t-peq);
  line-height: 1.55;
  color: var(--sb-texto-suave);
}

/* --- Destinos --------------------------------------------------------- */
.sb-rejilla-destinos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e4);
  margin: 0;
}
.sb-destino {
  margin: 0;
  background: var(--sb-tarjeta);
  border: 1px solid var(--sb-linea);
  border-left: 3px solid var(--sb-turquesa);
  border-radius: var(--sb-r-s);
  padding: var(--sb-e4) var(--sb-e5);
  position: relative;
  transition: border-left-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sb-destino:hover,
.sb-destino:focus-within {
  border-left-color: var(--sb-senal-viva);
  transform: translateY(-2px);
  box-shadow: var(--sb-sombra-1);
}
.sb-destino h3 {
  margin: 0 0 var(--sb-e1);
  font-size: var(--sb-t-h4);
  font-variation-settings: 'wdth' 94, 'wght' 680;
  line-height: 1.2;
}
.sb-destino h3 a { color: var(--sb-texto); text-decoration: none; }
.sb-destino h3 a::after { content: ''; position: absolute; inset: 0; }
.sb-destino:hover h3 a { color: var(--sb-acento); }
.sb-destino__pais {
  margin: 0 0 var(--sb-e2);
  font-family: var(--sb-datos);
  font-size: var(--sb-t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-texto-tenue);
}
.sb-destino p:last-child {
  margin: 0;
  font-size: var(--sb-t-peq);
  line-height: 1.5;
  color: var(--sb-texto-suave);
}

/* --- Autoridad (E-E-A-T) ---------------------------------------------- */
.sb-autoridad {
  background-color: var(--sb-petroleo);
  background-image: linear-gradient(168deg, var(--sb-petroleo) 0%, var(--sb-fosa) 100%);
  color: var(--sb-banda-texto);
  border-top: 0;
}
.sb-autoridad .sb-kicker { color: var(--sb-turquesa); }
.sb-autoridad .sb-titulo { color: var(--sb-banda-titulo); max-width: 22ch; }
.sb-autoridad p { color: var(--sb-banda-texto); }
.sb-autoridad .sb-lede { color: var(--sb-banda-texto); }

.sb-fuentes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e5);
  margin: var(--sb-e6) 0 0;
  padding-top: var(--sb-e6);
  border-top: 1px solid var(--sb-banda-linea);
}
.sb-fuente { margin: 0; }
.sb-fuente dt,
.sb-fuente h3,
.sb-fuente__sigla {
  font-family: var(--sb-datos);
  font-size: var(--sb-t-mini);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-turquesa);
  margin: 0 0 var(--sb-e1);
}
.sb-fuente p { margin: 0; font-size: var(--sb-t-peq); line-height: 1.55; }

.sb-salidas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-e4);
  margin: var(--sb-e7) 0 0;
}
.sb-salida {
  margin: 0;
  padding: var(--sb-e5);
  border: 1px solid var(--sb-banda-linea);
  border-radius: var(--sb-r-m);
  background: rgba(255,255,255,.04);
  font-size: var(--sb-t-peq);
  line-height: 1.6;
}
.sb-salida a {
  color: var(--sb-blanco);
  text-decoration: underline;
  text-decoration-color: var(--sb-senal-clara);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.sb-salida a:hover { color: var(--sb-senal-clara); }

/* --- Cierre ----------------------------------------------------------- */
.sb-cierre .sb-titulo { max-width: 24ch; }


/* --- Puntos de ruptura de la portada ---------------------------------- */
@media (min-width: 600px) {
  .sb-principios { grid-template-columns: repeat(3, 1fr); }
  .sb-matriz { grid-template-columns: repeat(2, 1fr); }
  .sb-rejilla-destinos { grid-template-columns: repeat(2, 1fr); }
  .sb-fuentes { grid-template-columns: repeat(3, 1fr); }
  .sb-salidas { grid-template-columns: repeat(2, 1fr); }
  .sb-pilar { grid-template-columns: 10rem 1fr; column-gap: var(--sb-e5); }
  .sb-pilar__seccion { grid-row: span 2; padding-top: .35em; }
}

@media (min-width: 900px) {
  .sb-matriz { grid-template-columns: repeat(3, 1fr); }
  .sb-rejilla-destinos { grid-template-columns: repeat(4, 1fr); }
  .sb-heroe__deck { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); }
  .sb-titulo { font-size: var(--sb-t-h1); }
}


/* =========================================================================
   12. ACCESIBILIDAD, MOVIMIENTO E IMPRESIÓN
   ========================================================================= */

:focus-visible {
  outline: 3px solid var(--sb-acento-grafico);
  outline-offset: 3px;
  border-radius: var(--sb-r-xs);
}
.sb-heroe :focus-visible,
.sb-autoridad :focus-visible,
.site-footer :focus-visible,
.main-navigation :focus-visible,
body .page-hero :focus-visible { outline-color: var(--sb-senal-clara); }

.screen-reader-text.skip-link:focus {
  background: var(--sb-senal);
  color: #fff;
  font-family: var(--sb-display);
  padding: .8em 1.2em;
  border-radius: 0 0 var(--sb-r-s) 0;
  z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sb-heroe__titulo span { animation: none; opacity: 1; transform: none; }
}

@media print {
  .header-wrap, .site-footer, .slideout-navigation, .slideout-overlay,
  body .page-hero::before, .sb-acciones { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body .page-hero { background: none; color: #000; padding: 0 0 1cm; }
  body .page-hero h1, body .page-hero h2 { color: #000; }
  .entry-content > * { max-width: none; }
  .entry-content a::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
}


/* =========================================================================
   13. IMÁGENES Y MIGAS  (añadido tras poblar el silo de imágenes)
   El sistema se diseñó sin fotos porque no había ninguna. Ahora los 214
   artículos del silo tienen imagen destacada: unos con foto real de la
   biblioteca, otros con portada tipográfica generada. Estas reglas les dan
   sitio sin romper la composición anterior.
   ========================================================================= */

/* --- Migas de pan ------------------------------------------------------ */
.soybuzo-migas {
  font-family: var(--sb-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--sb-texto-tenue);
  margin: 0 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .55rem;
  align-items: baseline;
}
.soybuzo-migas a {
  color: var(--sb-texto-suave);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.soybuzo-migas a:hover,
.soybuzo-migas a:focus-visible { color: var(--sb-enlace, var(--sb-turquesa)); border-bottom-color: currentColor; }
.soybuzo-migas-sep { color: var(--sb-senal-viva); font-size: .9em; }
/* El último tramo es el título del artículo: se recorta antes que envolver
   tres líneas en móvil, donde ya está el H1 justo encima. */
.soybuzo-migas [aria-current="page"] {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sb-texto-tenue);
}

/* --- Foto principal del artículo --------------------------------------- */
/* Solo aparece cuando la destacada es una foto real: la portada generada ya
   lleva el título dentro y repetirlo bajo el H1 se lee como un error. */
.soybuzo-foto-principal {
  margin: 0 0 2.4rem;
  position: relative;
}
.soybuzo-foto-principal img {
  display: block;
  width: 100%;
  height: clamp(220px, 42vw, 460px);
  object-fit: cover;
  border-radius: 3px;
  background: var(--sb-tarjeta, var(--sb-petroleo));
}
.soybuzo-foto-principal figcaption {
  font-family: var(--sb-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--sb-texto-tenue);
  padding-top: .6rem;
  border-top: 1px solid var(--sb-linea-suave);
  margin-top: .7rem;
}

/* --- Tarjetas de archivo ----------------------------------------------- */
/* GeneratePress imprime título, imagen y extracto en ese orden. La imagen es
   el ancla visual de la tarjeta, así que va primero. */
body:not(.home) .inside-article { display: flex; flex-direction: column; }
body:not(.home) .inside-article > .post-image { order: -1; margin: 0 0 1.15rem; }
body:not(.home) .inside-article > .entry-header { order: 0; }
body:not(.home) .inside-article > .entry-summary { order: 1; }
body:not(.home) .inside-article > .entry-meta { order: 2; }

body:not(.home) .post-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
}
body:not(.home) .post-image { overflow: hidden; border-radius: 2px; }
body:not(.home) article:hover .post-image img { transform: scale(1.025); }

@media (prefers-reduced-motion: reduce) {
  body:not(.home) .post-image img,
  body:not(.home) article:hover .post-image img { transition: none; transform: none; }
}

/* --- Limpieza de la tarjeta de archivo ---------------------------------- */
/* GeneratePress vuelca en el pie de cada tarjeta la categoría, la lista entera
   de etiquetas y el enlace de comentarios. En una parrilla de 20 tarjetas eso
   compite con el titular y alarga la tarjeta al doble. En el archivo se deja
   solo la categoría; las etiquetas siguen visibles dentro del artículo. */
body:not(.home) .entry-meta .tags-links,
body:not(.home) .entry-meta .comments-link { display: none; }

body:not(.home) .entry-meta {
  font-family: var(--sb-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--sb-texto-tenue);
  padding-top: .9rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--sb-linea-suave);
}
body:not(.home) .entry-meta a { color: var(--sb-texto-suave); text-decoration: none; }
body:not(.home) .entry-meta a:hover { color: var(--sb-enlace, var(--sb-turquesa)); }

/* El extracto se corta a cuatro líneas: todas las tarjetas miden lo mismo y la
   parrilla deja de parecer una escalera. */
body:not(.home) .entry-summary p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

/* El artículo sí muestra sus etiquetas, pero al final y sin gritar. */
.single .entry-meta .tags-links a {
  display: inline-block;
  padding: .18em .6em;
  margin: .15em .2em .15em 0;
  border: 1px solid var(--sb-linea);
  border-radius: 2px;
  font-size: .92em;
}