/*
Theme Name: Super Habilitado Nacional
Theme URI: https://superhabilitadonacional.com
Author: Trivix Digital
Author URI: https://trivixdigital.com
Description: Tema a medida para Super Habilitado Nacional — un proyecto en torno a la Habilitación de carácter Nacional, para quien quiere llegar a la profesión y para quien ya la ejerce. Identidad de papel crema, terracota y azul noche con las ilustraciones de la marca. Doble recorrido (Quiero ser HN / Ya soy HN), formación, recursos, el libro y campus virtual. Preparado para activar WooCommerce sin rehacer la estructura.
Version: 58
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shn
Tags: education, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =========================================================================
   1. TOKENS DE DISEÑO — identidad «Súper Habilitado Nacional»
   Papel crema, terracota del escudo, azul noche y oro.
   Todo el tema se pinta desde aquí: para mover la identidad visual
   basta con tocar este bloque.
   ========================================================================= */

:root {

	/* --- Papel: los fondos ------------------------------------------- */
	--crema:    #fbf6ee;   /* fondo general de la web */
	--crema-2:  #f5ebda;   /* secciones en tono más cálido */
	--crema-3:  #faefdc;   /* tarjetas cálidas */
	--papel:    #fdfaf3;   /* tarjetas claras (antes era blanco puro) */

	/* --- Azul noche --------------------------------------------------- */
	--azul-900: #0b2a3e;
	--azul-800: #123d58;
	--azul-700: #16465f;
	--azul-600: #1d5670;
	--azul-500: #2b6d86;
	--azul-400: #59899c;
	--azul-100: #dde8ea;
	--azul-50:  #f0f5f4;

	/* --- Terracota: el color de acción -------------------------------- */
	--terra:      #a94728;
	--terra-osc:  #8a381d;
	--terra-clar: #bb5522;
	--terra-100:  #f6e5d8;
	--terra-50:   #fbf0e7;

	/* --- Oro del escudo ------------------------------------------------ */
	--oro:      #d9a441;
	--oro-osc:  #a9761f;
	--oro-100:  #f8ecd4;

	/* --- Avisos --------------------------------------------------------- */
	--verde:    #3f7d55;
	--verde-100:#e4efe4;
	--rojo:     #b33a2b;

	/* --- Tinta: los textos ---------------------------------------------- */
	--gris-900: #2e2820;
	--gris-700: #554d42;
	--gris-500: #7e7466;
	--gris-300: #c8bca7;
	--gris-100: #ece1cd;
	--blanco:   #ffffff;

	--sombra:    0 8px 26px rgba(90, 62, 34, .09);
	--sombra-sm: 0 2px 10px rgba(90, 62, 34, .07);
	--sombra-lg: 0 18px 48px rgba(70, 46, 24, .15);

	--radio:    16px;
	--radio-sm: 10px;
	--ancho:    1180px;
	--ancho-estrecho: 820px;

	/* --- Tipografía ------------------------------------------------------
	 * Sin fuentes externas: la web no pide nada a ningún servidor de
	 * terceros (va más rápido y encaja con la política de cookies).
	 * Los títulos van en serif, que es lo que le da el aire editorial
	 * de las ilustraciones.
	 * ------------------------------------------------------------------ */
	--fuente: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
	--fuente-titulo: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Noto Serif', 'Times New Roman', serif;
	/* Antes era una caligrafía de sistema (Snell Roundhand / Segoe Script):
	   preciosa de cerca e ilegible a tamaño de frase, y distinta en cada
	   sistema operativo. Ahora es la misma serif de los títulos en cursiva,
	   que se lee bien en todos. Si algún día se quiere una manuscrita de
	   verdad, hay que alojar el archivo de la fuente en el tema (nunca por
	   Google Fonts: rompería la política de cookies). */
	--fuente-mano: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Noto Serif', 'Times New Roman', serif;

	--cabecera-alto: 90px;
	--ease: cubic-bezier(.2, .7, .3, 1);

	/* ---------------------------------------------------------------
	 * Alias del juego de nombres anterior (--shn-*).
	 *
	 * Varias plantillas se escribieron con la nomenclatura del primer
	 * tema. Sin estas equivalencias, esas declaraciones son inválidas y
	 * el navegador las tira: textos sin tamaño, cajas sin fondo. Se
	 * mantienen apuntando a los tokens buenos para no tener que revisar
	 * plantilla por plantilla.
	 * ------------------------------------------------------------ */
	--shn-navy-500:  var(--azul-800);
	--shn-oro:       var(--oro);
	--shn-ok:        var(--verde);
	--shn-alerta:    var(--rojo);
	--shn-blanco:    var(--papel);
	--shn-ink-soft:  var(--gris-700);
	--shn-linea:     var(--gris-100);
	--shn-crema-2:   var(--crema-2);
	--shn-sans:      var(--fuente);
	--shn-serif:     var(--fuente-titulo);
	--shn-r:         var(--radio-sm);
	--shn-r-lg:      var(--radio);
	--shn-shadow-sm: var(--sombra-sm);
	--shn-header-h:  var(--cabecera-alto);
	--shn-section:   clamp(3.5rem, 7vw, 5.5rem);
	--shn-fs-sm:     .92rem;
	--shn-fs-base:   1rem;
	--shn-fs-lg:     1.15rem;
	--shn-fs-3xl:    clamp(2rem, 4.5vw, 2.9rem);
}

/* =========================================================================
   2. BASE
   ========================================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: 16px;
	line-height: 1.65;
	color: var(--gris-700);
	background: var(--crema);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
	font-family: var(--fuente-titulo);
	color: var(--azul-800);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.005em;
	margin: .2em 0 .5em;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.45rem); }
h3 { font-size: 1.32rem; }
h4 { font-size: 1.12rem; }

/* Frase manuscrita: el «Un espacio para compartir el camino» de la marca. */
.shn-mano {
	display: block;
	font-family: var(--fuente-mano);
	font-weight: 400;
	font-style: italic;
	color: var(--terra);
	letter-spacing: 0;
	line-height: 1.4;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--terra); text-decoration: none; transition: color .15s; }
a:hover { color: var(--terra-clar); }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { padding-left: 1.3em; margin: 0 0 1rem; }

blockquote {
	margin: 1.8rem 0;
	padding: 1.2rem 1.5rem;
	background: var(--crema-2);
	border-left: 4px solid var(--terra);
	border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	color: var(--gris-700);
	font-style: italic;
}

code { background: var(--crema-2); padding: .12em .4em; border-radius: 4px; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--gris-100); margin: 2.5rem 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--gris-100); }
th { font-family: var(--fuente-titulo); font-weight: 700; color: var(--azul-800); background: var(--crema-2); }

::selection { background: var(--terra-100); color: var(--terra-osc); }

:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 3px; }

.shn-sr-only, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.shn-skip-link {
	position: absolute; top: -100px; left: 1rem; z-index: 999;
	background: var(--azul-800); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 8px;
}
.shn-skip-link:focus { top: 0; color: #fff; }

/* =========================================================================
   3. LAYOUT
   ========================================================================= */

.shn-wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.shn-wrap--narrow { max-width: var(--ancho-estrecho); }
.shn-wrap--wide { max-width: 1380px; }

.shn-section { padding: 4.5rem 0; }
.shn-section--tight { padding: 3rem 0; }
.shn-section--crema, .shn-section--suave { background: var(--crema-2); }
.shn-section--white { background: var(--papel); }
.shn-section--navy {
	background: var(--azul-800);
	color: #e6ddcb;
}
.shn-section--navy h1, .shn-section--navy h2,
.shn-section--navy h3, .shn-section--navy h4 { color: #fdf7ea; }
.shn-section--navy a { color: var(--oro); }

/* Franja de lema: la banda azul con la frase de la marca. */
.shn-lema {
	background: var(--azul-800);
	color: #fdf7ea;
	text-align: center;
	padding: 1.5rem 0;
	position: relative;
}
.shn-lema p {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	margin: 0;
	line-height: 1.35;
}
.shn-lema em { font-style: italic; color: var(--oro); }
.shn-lema::before, .shn-lema::after {
	content: ''; display: block; height: 1px; max-width: 900px;
	margin: 0 auto; background: rgba(217,164,65,.42);
}
.shn-lema::before { margin-bottom: 1.5rem; }
.shn-lema::after  { margin-top: 1.5rem; }

.shn-grid { display: grid; gap: 1.6rem; }
.shn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.shn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.shn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.shn-grid--6 { grid-template-columns: repeat(6, 1fr); gap: 1rem; }

/* Bloque «por qué»: texto a la izquierda, paisaje a la derecha. */
.shn-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; margin-bottom: 2.6rem; }
.shn-intro__texto { max-width: 46ch; }
.shn-intro__texto p { color: var(--gris-700); font-size: 1.05rem; }
.shn-intro__ilu img { width: 100%; height: auto; }

.shn-stack > * + * { margin-top: 1.1rem; }

/* Encabezado de sección */
.shn-shead { max-width: 760px; margin: 0 0 3rem; }
.shn-shead--center { margin-inline: auto; text-align: center; }
.shn-shead p { color: var(--gris-700); font-size: 1.08rem; margin-bottom: 0; }
.shn-shead h2 { margin-top: .1rem; }

/* Etiqueta / píldora */
.shn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	color: var(--terra);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: .9rem;
}
.shn-eyebrow::after {
	content: ''; display: block; width: 58px; height: 1px;
	background: currentColor; opacity: .5;
}
.shn-shead--center .shn-eyebrow::before {
	content: ''; display: block; width: 58px; height: 1px;
	background: currentColor; opacity: .5;
}
.shn-section--navy .shn-eyebrow { color: var(--oro); }

/* =========================================================================
   4. BOTONES Y ETIQUETAS
   ========================================================================= */

.shn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	border-radius: var(--radio-sm);
	font-family: inherit;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
	cursor: pointer;
	border: 2px solid transparent;
	text-align: center;
	transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.shn-btn:hover { transform: translateY(-2px); }
.shn-btn:active { transform: translateY(0); }

.shn-btn--primary { background: var(--terra); color: #fdf6ee; }
.shn-btn--primary:hover { background: var(--terra-clar); color: #fff; box-shadow: var(--sombra-sm); }

.shn-btn--navy, .shn-btn--gold { background: var(--azul-800); color: #fdf6ee; }
.shn-btn--navy:hover, .shn-btn--gold:hover { background: var(--azul-700); color: #fff; box-shadow: var(--sombra-sm); }

.shn-btn--oro { background: var(--oro); color: #3d2c08; }
.shn-btn--oro:hover { background: var(--oro-osc); color: #fff; }

.shn-btn--ghost, .shn-btn--outline { background: transparent; color: var(--terra); border-color: var(--terra); }
.shn-btn--ghost:hover { background: var(--terra); color: #fdf6ee; }

.shn-btn--light { background: var(--papel); color: var(--azul-800); }
.shn-btn--light:hover { background: var(--papel); color: var(--azul-900); }

.shn-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.shn-btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.shn-btn--sm { padding: .55rem 1.05rem; font-size: .88rem; }
.shn-btn--lg { padding: 1.05rem 2.1rem; font-size: 1.08rem; }
.shn-btn--block { display: flex; width: 100%; }

.shn-btn[aria-disabled="true"], .shn-btn--disabled {
	opacity: .6; cursor: not-allowed; pointer-events: none; transform: none;
	background: var(--gris-100); color: var(--gris-500); border-color: transparent;
}

.shn-btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.shn-btns--center { justify-content: center; }

.shn-tag {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	padding: .3rem .75rem; border-radius: 20px;
	background: var(--terra-100); color: var(--terra-osc);
}
.shn-tag--gold { background: var(--oro-100); color: var(--oro-osc); }
.shn-tag--free { background: var(--verde-100); color: var(--verde); }
.shn-tag--soon { background: var(--gris-100); color: var(--gris-500); }

/* =========================================================================
   5. BARRA SUPERIOR Y CABECERA
   ========================================================================= */

.shn-header {
	background: var(--crema);
	border-bottom: 1px solid rgba(190, 160, 115, .28);
	position: sticky;
	top: 0;
	z-index: 200;
}
.shn-header.is-stuck { box-shadow: var(--sombra-sm); }
.shn-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--cabecera-alto); gap: 1rem;
}

/* Marca: escudo + rótulo. Si se sube un logo por Personalizar, manda ese. */
.shn-brand { display: flex; align-items: center; gap: .7rem; color: var(--terra); flex-shrink: 0; min-width: 0; }
.shn-brand:hover { color: var(--terra-clar); }
.shn-brand > img, .shn-brand__subido { max-height: 62px; width: auto; }
.shn-brand__escudo { height: 48px; width: auto; flex-shrink: 0; }
.shn-brand__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.shn-brand__rotulo { height: 54px; width: auto; display: block; }
.shn-brand__tag {
	display: block; font-family: var(--fuente-mano); font-style: italic;
	font-size: .92rem; font-weight: 400; color: var(--gris-500); letter-spacing: .01em;
	margin-top: .12rem;
}

/* Navegación */
.shn-nav { display: none; }
@media (min-width: 1024px) { .shn-nav { display: block; } }

.shn-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; align-items: center; }
.shn-nav li { position: relative; }
.shn-nav a {
	display: block; padding: .5rem .7rem; border-radius: 8px;
	color: var(--azul-800); font-weight: 600; font-size: .94rem; white-space: nowrap;
	position: relative;
}
.shn-nav > ul > li > a::before {
	content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .14rem; height: 2px;
	background: var(--terra); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.shn-nav a:hover,
.shn-nav .current-menu-item > a,
.shn-nav .current-menu-ancestor > a,
.shn-nav .current_page_item > a { color: var(--terra); }
.shn-nav > ul > li > a:hover::before,
.shn-nav > ul > li.current-menu-item > a::before,
.shn-nav > ul > li.current-menu-ancestor > a::before,
.shn-nav > ul > li.current_page_item > a::before { transform: scaleX(1); }

.shn-nav .menu-item-has-children > a::after {
	content: ''; display: inline-block; width: .36em; height: .36em; margin-left: .45em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease);
}
.shn-nav .menu-item-has-children:hover > a::after { transform: translateY(0) rotate(225deg); }

.shn-nav .sub-menu {
	position: absolute; top: calc(100% + .4rem); left: 0;
	min-width: 270px; flex-direction: column; align-items: stretch; gap: 0;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-radius: var(--radio); box-shadow: var(--sombra); padding: .5rem;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.shn-nav li:hover > .sub-menu, .shn-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.shn-nav .sub-menu a { padding: .6rem .8rem; font-weight: 500; }

.shn-header__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.shn-burger {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 44px; padding: 0 10px;
	background: none; border: 0; cursor: pointer;
}
@media (min-width: 1024px) { .shn-burger { display: none; } }
.shn-burger span { display: block; width: 26px; height: 3px; background: var(--terra); border-radius: 3px; transition: transform .25s var(--ease), opacity .2s; }
.shn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.shn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.shn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.shn-mobile {
	position: fixed; inset: var(--cabecera-alto) 0 0; z-index: 190;
	background: var(--crema); padding: 1.5rem 20px 3rem; overflow-y: auto;
	transform: translateX(100%); transition: transform .3s var(--ease);
}
.shn-mobile.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .shn-mobile { display: none; } }
.shn-mobile ul { list-style: none; margin: 0; padding: 0; }
.shn-mobile li { border-bottom: 1px solid var(--gris-100); }
.shn-mobile > ul > li > a { font-size: 1.12rem; font-weight: 700; color: var(--azul-800); }
.shn-mobile a { display: block; padding: .85rem .2rem; }
.shn-mobile .sub-menu { padding-left: .9rem; padding-bottom: .4rem; }
.shn-mobile .sub-menu li { border-bottom: 0; }
.shn-mobile .sub-menu a { padding: .45rem .2rem; font-size: .95rem; font-weight: 500; color: var(--gris-700); }
.shn-mobile__cta { margin-top: 2rem; display: grid; gap: .75rem; }

body.shn-nav-open { overflow: hidden; }

/* =========================================================================
   6. HERO
   ========================================================================= */

.shn-hero {
	background: var(--crema);
	color: var(--gris-700);
	padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(2.5rem, 5vw, 4rem);
	position: relative;
	overflow: hidden;
}
.shn-hero__inner {
	position: relative; display: grid;
	grid-template-columns: 1.04fr .96fr; gap: 2.5rem; align-items: center;
}
.shn-hero h1 {
	color: var(--azul-800);
	font-size: clamp(2.4rem, 5.6vw, 4.05rem);
	line-height: 1.02;
	margin: 0 0 .7rem;
}
.shn-hero h1 .terra { display: block; color: var(--terra); }
.shn-hero .shn-mano { font-size: clamp(1.25rem, 2.6vw, 1.85rem); margin-bottom: 1.1rem; }
.shn-hero__lead { font-size: 1.07rem; color: var(--gris-700); margin-bottom: 1.7rem; max-width: 48ch; }
.shn-hero__media { align-self: end; }
.shn-hero__media img { width: 100%; height: auto; }

.shn-hero__stats { display: flex; gap: 1.5rem 2.4rem; margin-top: 2.2rem; flex-wrap: wrap; }
.shn-hero__stat { display: flex; flex-direction: column; }
.shn-hero__stat strong { font-family: var(--fuente-titulo); font-size: 1.8rem; color: var(--terra); font-weight: 700; line-height: 1.1; }
.shn-hero__stat span { font-size: .9rem; color: var(--gris-500); }

.shn-hero__figure {
	background: var(--papel);
	border: 1px solid var(--gris-100);
	border-radius: var(--radio);
	padding: 1.8rem;
	box-shadow: var(--sombra-sm);
}
.shn-hero__figure h3 { margin-top: 0; }

/* Filas de check */
.shn-checks { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.shn-check-row { display: flex; align-items: flex-start; gap: .7rem; color: var(--gris-700); }
.shn-check-row .ok { color: var(--terra); font-weight: 900; flex-shrink: 0; line-height: 1.5; }
.shn-section--navy .shn-check-row { color: #e6ddcb; }
.shn-section--navy .shn-check-row .ok { color: var(--oro); }
.shn-checks--claro .shn-check-row { color: var(--gris-700); }
.shn-checks--claro .ok { color: var(--terra); }

/* Cabecera de páginas interiores */
.shn-pagehero { background: var(--crema-2); border-bottom: 1px solid var(--gris-100); padding: 3.2rem 0; }
.shn-pagehero h1 { margin: 0 0 .4rem; }
.shn-pagehero__mano { display: block; font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin-bottom: .1rem; }
.shn-pagehero p { color: var(--gris-700); font-size: 1.08rem; max-width: 66ch; margin-bottom: 0; }
.shn-pagehero--navy {
	background: var(--azul-800);
	border-bottom: 0; color: #e6ddcb; padding: 3.5rem 0;
}
.shn-pagehero--navy h1 { color: #fdf7ea; }
.shn-pagehero--navy p { color: #ddd2bd; }
.shn-pagehero--navy .shn-breadcrumb,
.shn-pagehero--navy .shn-breadcrumb a { color: #c2b49c; }
.shn-pagehero--navy .shn-breadcrumb a:hover { color: var(--oro); }

.shn-breadcrumb { color: var(--gris-500); font-size: .88rem; margin-bottom: .5rem; }
.shn-breadcrumb a { color: var(--gris-500); }
.shn-breadcrumb a:hover { color: var(--terra); }
.shn-breadcrumb span { margin: 0 .4em; opacity: .55; }

/* =========================================================================
   7. LAS DOS PUERTAS
   ========================================================================= */

.shn-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }

.shn-door {
	display: flex; flex-direction: column;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-radius: var(--radio); padding: 2rem;
	box-shadow: var(--sombra-sm);
	color: inherit;
	transition: transform .15s, box-shadow .15s;
	position: relative; overflow: hidden;
}
.shn-door::before {
	content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--terra);
}
.shn-door--gold::before { background: var(--azul-800); }
.shn-door:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.shn-door__icon {
	width: 56px; height: 56px; border-radius: 14px;
	display: grid; place-items: center; font-size: 1.6rem;
	background: var(--terra-50); color: var(--terra);
	margin-bottom: 1rem;
}
.shn-door--gold .shn-door__icon { background: var(--azul-100); color: var(--azul-800); }

/* Ilustración dentro de la puerta (las dos tarjetas de la portada). */
.shn-door__ilu { margin: -.6rem 0 .9rem; }
.shn-door__ilu img { width: 100%; height: auto; border-radius: var(--radio-sm); }
.shn-door--con-ilu { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 1.4rem; align-items: start; }
.shn-door--con-ilu .shn-door__ilu { grid-row: 1 / span 5; margin: 0; align-self: center; }

.shn-door h3 { margin: .2rem 0 .6rem; font-size: clamp(1.3rem, 2.1vw, 1.62rem); line-height: 1.15; }
.shn-door p { color: var(--gris-700); margin-bottom: 1.3rem; font-size: .97rem; }

.shn-door__list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.shn-door__list li {
	padding: .35rem 0; color: var(--gris-700); font-size: .93rem;
	display: flex; gap: .5rem; align-items: flex-start;
}
.shn-door__list li::before { content: '✔'; color: var(--terra); font-weight: 900; flex-shrink: 0; }
.shn-door--gold .shn-door__list li::before { color: var(--azul-600); }

.shn-door__link { margin-top: auto; font-weight: 700; color: var(--terra); display: inline-flex; align-items: center; gap: .4rem; }
.shn-door__link::after { content: '→'; transition: transform .18s var(--ease); }
.shn-door:hover .shn-door__link::after { transform: translateX(4px); }

/* =========================================================================
   8. TARJETAS
   ========================================================================= */

/* Tarjeta de característica (icono + texto) */
.shn-feature {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: 1.8rem; box-shadow: var(--sombra-sm);
	transition: transform .15s, box-shadow .15s;
}
.shn-feature:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.shn-feature__icon {
	width: 54px; height: 54px; border-radius: 14px;
	display: grid; place-items: center; font-size: 1.55rem;
	background: transparent; color: var(--terra);
	margin-bottom: .6rem;
}
/* Variante de la portada: tarjeta cálida, centrada, sin caja en el icono. */
.shn-feature--centro { text-align: center; background: var(--crema-3); border-color: rgba(190,160,115,.30); }
.shn-feature--centro .shn-feature__icon { margin-inline: auto; }
.shn-feature--centro h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.shn-feature--centro p { font-size: .88rem; line-height: 1.5; }
.shn-grid--6 .shn-feature { padding: 1.4rem 1rem; }
.shn-feature h3 { margin: .2rem 0 .5rem; font-size: 1.2rem; }
.shn-feature p { color: var(--gris-700); margin: 0; font-size: .97rem; }

/* Tarjeta de catálogo con cabeza de color */
.shn-card {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	overflow: hidden; box-shadow: var(--sombra-sm);
	display: flex; flex-direction: column;
	transition: transform .15s, box-shadow .15s;
}
.shn-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.shn-card__head {
	background: var(--azul-800);
	color: #fdf7ea; padding: 1.4rem 1.5rem; position: relative;
}
.shn-card__head--gold { background: var(--terra); }
.shn-card__head .shn-card__kicker {
	font-size: .76rem; opacity: .88; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
	display: block; margin-bottom: .25rem;
}
.shn-card__head h3 { color: #fdf7ea; margin: 0; font-size: 1.22rem; }
.shn-card__head h3 a { color: #fdf7ea; }
.shn-card__head h3 a:hover { color: var(--oro); }

.shn-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--crema-2); overflow: hidden; }
.shn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.shn-card:hover .shn-card__media img { transform: scale(1.04); }
.shn-card__media--book { aspect-ratio: 3 / 4; background: var(--crema-2); }
.shn-card__media--book img { object-fit: contain; padding: 1.2rem; }
.shn-card__ph {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-family: var(--fuente-titulo);
	font-size: 2.6rem; font-weight: 700; color: var(--terra); opacity: .28;
	background: var(--crema-2);
}
.shn-card__badges { position: absolute; top: .8rem; left: .8rem; display: flex; gap: .4rem; flex-wrap: wrap; z-index: 2; }

.shn-card__body { padding: 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.shn-card__meta {
	display: flex; flex-wrap: wrap; gap: .3rem .9rem;
	font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; font-weight: 600;
	color: var(--gris-500); margin-bottom: .6rem;
}
.shn-card__body h3, .shn-card__body h4 { margin: 0 0 .5rem; font-size: 1.18rem; }
.shn-card__body h3 a { color: var(--azul-800); }
.shn-card__body h3 a:hover { color: var(--terra); }
.shn-card p { color: var(--gris-700); font-size: .95rem; margin-bottom: 1.1rem; }

.shn-card__datos { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.shn-card__datos li {
	padding: .32rem 0; color: var(--gris-700); font-size: .92rem;
	display: flex; gap: .5rem; align-items: flex-start;
}
.shn-card__datos li::before { content: '✔'; color: var(--terra); font-weight: 900; flex-shrink: 0; }

.shn-card__foot {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--gris-100);
}
.shn-card__price { font-family: var(--fuente-titulo); font-size: 1.55rem; font-weight: 700; color: var(--terra); line-height: 1; }
.shn-card__price small { font-size: .55em; color: var(--gris-500); font-weight: 500; }
.shn-card__price--free { color: var(--verde); font-size: 1.25rem; }

.shn-soon-note { font-size: .82rem; color: var(--gris-500); font-style: italic; margin-top: .5rem; width: 100%; }

/* Listado compacto */
.shn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.shn-list li { margin: 0; }
.shn-list__item {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem 1.3rem;
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	box-shadow: var(--sombra-sm); color: inherit;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shn-list__item:hover { transform: translateX(4px); box-shadow: var(--sombra); border-color: var(--terra-100); }
.shn-list__ico {
	flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
	display: grid; place-items: center; font-size: 1.25rem;
	background: var(--terra-50); color: var(--terra);
}
.shn-list__txt { flex: 1; min-width: 0; }
.shn-list__txt strong { display: block; font-weight: 700; color: var(--azul-800); font-size: 1rem; }
.shn-list__txt span { font-size: .92rem; color: var(--gris-700); }

/* =========================================================================
   9. PASOS
   ========================================================================= */

.shn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.shn-steps--3 { grid-template-columns: repeat(3, 1fr); }

/* Por defecto: tarjeta blanca alineada a la izquierda. */
.shn-step {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: 1.7rem 1.6rem; box-shadow: var(--sombra-sm);
	transition: transform .15s, box-shadow .15s;
}
.shn-step:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.shn-step h3, .shn-step h4 { font-size: 1.12rem; margin: 0 0 .4rem; }
.shn-step p { color: var(--gris-700); font-size: .95rem; margin: 0; }

.shn-step__num {
	width: 48px; height: 48px; border-radius: 50%; margin: 0 0 .9rem;
	display: grid; place-items: center; font-family: var(--fuente-titulo);
	font-size: 1.25rem; font-weight: 700; color: #fdf6ee;
	background: var(--terra);
	box-shadow: var(--sombra-sm);
}

/* Variante limpia y centrada, para fondos de color. */
.shn-steps--plain .shn-step {
	background: none; border: 0; box-shadow: none; text-align: center; padding: 0;
}
.shn-steps--plain .shn-step:hover { transform: none; box-shadow: none; }
.shn-steps--plain .shn-step__num { width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto 1rem; }
.shn-steps--plain .shn-step h3, .shn-steps--plain .shn-step h4 { color: #fdf7ea; }
.shn-steps--plain .shn-step p { color: #ddd2bd; }

/* Subescalas */
.shn-subescalas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.shn-subescala {
	display: flex; flex-direction: column;
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	overflow: hidden; box-shadow: var(--sombra-sm); color: inherit;
	transition: transform .15s, box-shadow .15s;
}
.shn-subescala:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.shn-subescala__head {
	background: var(--azul-800);
	color: #fdf7ea; padding: 1.3rem 1.5rem;
}
.shn-subescala__code { font-size: .76rem; opacity: .88; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.shn-subescala__head h4 { color: #fdf7ea; margin: .25rem 0 0; font-size: 1.2rem; }
.shn-subescala__body { padding: 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.shn-subescala p { color: var(--gris-700); font-size: .95rem; margin-bottom: 1.1rem; }

/* =========================================================================
   10. BARRAS DE PROGRESO (escaparate del campus)
   ========================================================================= */

.shn-progress-card { background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.shn-progress-card__head {
	background: var(--azul-800);
	color: #fdf7ea; padding: 1.4rem 1.5rem; font-weight: 700; font-size: 1.08rem;
	display: flex; align-items: center; gap: .6rem;
}
.shn-progress-card__body { padding: 1.5rem; }
.shn-progress { margin-bottom: 1.05rem; }
.shn-progress:last-child { margin-bottom: 0; }
.shn-progress__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .32rem; }
.shn-progress__top b { color: var(--azul-800); }
.shn-progress__bar { height: 9px; background: var(--gris-100); border-radius: 6px; overflow: hidden; }
.shn-progress__fill { height: 100%; border-radius: 6px; }

/* =========================================================================
   11. LIBRO
   ========================================================================= */

.shn-book { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.shn-book--reverse .shn-book__media { order: 2; }

.shn-book__media img {
	width: 100%; max-width: 330px; margin-inline: auto;
	border-radius: 4px 10px 10px 4px;
	box-shadow: -6px 0 0 rgba(90,62,34,.14), var(--sombra-lg);
	transform: rotate(-1.5deg); transition: transform .35s var(--ease);
}
.shn-book__media img:hover { transform: rotate(0) translateY(-4px); }
.shn-book__ph {
	max-width: 330px; margin-inline: auto; aspect-ratio: 3/4;
	display: grid; place-items: center; text-align: center; padding: 2rem;
	background: var(--azul-800);
	color: #fdf7ea; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.18rem; line-height: 1.35;
	border-radius: 4px 10px 10px 4px;
	box-shadow: -6px 0 0 rgba(90,62,34,.14), var(--sombra-lg);
}
.shn-book__price { font-family: var(--fuente-titulo); font-size: 2.1rem; font-weight: 700; color: var(--terra); margin-bottom: 1.2rem; }
.shn-book__price small { font-size: .42em; color: var(--gris-500); font-weight: 500; margin-left: .4rem; }
.shn-book__specs {
	display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
	margin: 1.4rem 0; padding: 1rem 0;
	border-top: 1px solid var(--gris-100); border-bottom: 1px solid var(--gris-100);
	font-size: .95rem; color: var(--gris-700);
}
.shn-book__specs strong { color: var(--azul-800); }

.shn-ext-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--gris-500); margin-top: .85rem; }

/* =========================================================================
   12. AUTORA
   ========================================================================= */

.shn-author { display: grid; grid-template-columns: .75fr 1.25fr; gap: 3rem; align-items: start; }
.shn-author__photo {
	position: relative; border-radius: var(--radio); overflow: hidden;
	aspect-ratio: 4/5; background: var(--crema-2); box-shadow: var(--sombra);
}
.shn-author__photo img { width: 100%; height: 100%; object-fit: cover; }
.shn-author__photo::after {
	content: ''; position: absolute; inset: auto 0 0 0; height: 6px;
	background: linear-gradient(90deg, var(--terra), var(--oro));
}
.shn-author__quote {
	background: var(--crema-2); border-left: 4px solid var(--terra);
	border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	padding: 1.3rem 1.5rem; margin-bottom: 1.7rem;
	font-family: var(--fuente-titulo);
	font-size: 1.16rem; font-style: italic; color: var(--azul-800); line-height: 1.5;
}

.shn-timeline { list-style: none; padding: 0; margin: 0; }
.shn-timeline li { position: relative; padding: 0 0 1.4rem 1.85rem; border-left: 2px solid var(--gris-100); }
.shn-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.shn-timeline li::before {
	content: ''; position: absolute; left: -7px; top: .35em;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--crema); border: 3px solid var(--terra);
}
.shn-timeline strong { display: block; color: var(--azul-800); font-weight: 700; }
.shn-timeline span { font-size: .94rem; color: var(--gris-700); }

/* =========================================================================
   13. ACORDEÓN
   ========================================================================= */

.shn-accordion { border-top: 1px solid var(--gris-100); }
.shn-accordion__item { border-bottom: 1px solid var(--gris-100); }
.shn-accordion__btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 1.25rem .25rem; background: none; border: 0;
	font-family: var(--fuente-titulo); font-size: 1.1rem; font-weight: 700; color: var(--azul-800);
	text-align: left; cursor: pointer;
}
.shn-accordion__btn:hover { color: var(--terra); }
.shn-accordion__btn::after {
	content: ''; flex-shrink: 0; width: 11px; height: 11px;
	border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease);
}
.shn-accordion__btn[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-3px); }
.shn-accordion__panel { display: none; padding: 0 .25rem 1.4rem; color: var(--gris-700); }
.shn-accordion__panel.is-open { display: block; }

/* =========================================================================
   14. CTA, AVISOS, FORMULARIOS
   ========================================================================= */

.shn-cta {
	background: var(--azul-800);
	color: #e6ddcb; text-align: center; border-radius: var(--radio);
	padding: 3.2rem 2rem; position: relative; overflow: hidden;
}
.shn-cta::after {
	content: ''; position: absolute; right: -120px; top: -120px;
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(217,164,65,.22), transparent 70%);
	pointer-events: none;
}
.shn-cta > * { position: relative; z-index: 1; }
.shn-cta h2 { color: #fdf7ea; }
.shn-cta p { color: #ddd2bd; max-width: 62ch; margin: 0 auto 1.6rem; font-size: 1.1rem; }

.shn-notice {
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.15rem 1.35rem;
	background: var(--oro-100); border-left: 4px solid var(--oro);
	border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	font-size: .95rem; color: #5d4517;
}
.shn-notice strong { color: var(--oro-osc); }
.shn-notice--info { background: var(--terra-50); border-left-color: var(--terra); color: var(--gris-700); }
.shn-notice--info strong { color: var(--terra-osc); }

.shn-form { display: grid; gap: 1.1rem; }
.shn-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .shn-form__row--2 { grid-template-columns: 1fr 1fr; } }

.shn-field { display: grid; gap: .4rem; }
.shn-field label { font-size: .93rem; font-weight: 700; color: var(--azul-800); }
.shn-field .req { color: var(--rojo); }

input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], input[type=number], select, textarea {
	width: 100%; font-family: inherit; font-size: 1rem; color: var(--gris-900);
	padding: .8rem 1rem; background: var(--papel);
	border: 2px solid var(--gris-300); border-radius: var(--radio-sm);
	transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
	outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(169,71,40,.16);
}
textarea { min-height: 150px; resize: vertical; }
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a94728' stroke-width='2' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
	padding-right: 2.6rem;
}
.shn-check { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; color: var(--gris-700); }
.shn-check input { width: auto; margin-top: .3em; flex-shrink: 0; }

.shn-login-card {
	max-width: 440px; margin-inline: auto; background: var(--papel);
	border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: 2.2rem; box-shadow: var(--sombra);
}
.shn-login-card .login-username, .shn-login-card .login-password { margin-bottom: 1.1rem; }
.shn-login-card label { display: block; font-size: .93rem; font-weight: 700; color: var(--azul-800); margin-bottom: .4rem; }
.shn-login-card .login-remember { margin: .25rem 0 1.3rem; }
.shn-login-card .login-remember label { display: flex; align-items: center; gap: .55rem; font-weight: 500; color: var(--gris-700); margin: 0; }
.shn-login-card .login-remember input { width: auto; }
.shn-login-card .login-submit input[type=submit] {
	width: 100%; font-family: inherit; font-weight: 600; font-size: 1rem;
	padding: .85rem 1.6rem; background: var(--terra); color: #fdf6ee;
	border: 2px solid var(--terra); border-radius: var(--radio-sm); cursor: pointer;
	transition: background .15s;
}
.shn-login-card .login-submit input[type=submit]:hover { background: var(--terra-clar); }

/* =========================================================================
   15. CONTENIDO EDITORIAL
   ========================================================================= */

.shn-content > * + * { margin-top: 1.15rem; }
.shn-content > *:first-child { margin-top: 0; }
.shn-content h2 { margin-top: 2.2rem; }
.shn-content h3 { margin-top: 1.8rem; }
.shn-content img, .shn-content figure { border-radius: var(--radio-sm); }
.shn-content figcaption { font-size: .88rem; color: var(--gris-500); text-align: center; margin-top: .5rem; }
.shn-content .alignleft { float: left; margin: .4rem 1.6rem 1.2rem 0; }
.shn-content .alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.shn-content .aligncenter { margin-inline: auto; }
.shn-content ul li::marker { color: var(--terra); }

.shn-entry-meta { font-size: .9rem; color: var(--gris-500); margin-bottom: 1.2rem; }

.shn-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.shn-pagination .page-numbers {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .7rem;
	border: 1px solid var(--gris-300); border-radius: var(--radio-sm);
	background: var(--papel); color: var(--gris-900); font-weight: 700; font-size: .93rem;
}
.shn-pagination .page-numbers:hover { border-color: var(--terra); color: var(--terra); }
.shn-pagination .current { background: var(--terra); border-color: var(--terra); color: #fdf6ee; }

.shn-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.shn-filters a {
	font-size: .93rem; font-weight: 600; padding: .5rem 1.1rem;
	border: 2px solid var(--gris-300); border-radius: 20px;
	background: var(--papel); color: var(--gris-700);
}
.shn-filters a:hover { border-color: var(--terra); color: var(--terra); }
.shn-filters a.is-active { background: var(--terra); border-color: var(--terra); color: #fdf6ee; }

.shn-empty {
	text-align: center; padding: 3.5rem 1.5rem;
	background: var(--crema-2); border: 2px dashed var(--gris-300);
	border-radius: var(--radio); color: var(--gris-700);
}
.shn-empty h3 { color: var(--azul-800); }

.shn-widget { background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.4rem; }
.shn-widget__title { font-size: 1.05rem; margin-top: 0; }

.shn-comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--gris-100); }
.shn-comments ol { list-style: none; padding: 0; }
.shn-comments .comment-body { background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio); padding: 1.3rem; margin-bottom: 1rem; }

.shn-searchform { display: flex; gap: .5rem; }
.shn-searchform input[type=search] { flex: 1; }

/* =========================================================================
   16. PIE
   ========================================================================= */

.shn-footer {
	background: var(--azul-900); color: #c3b79f; padding: 3.5rem 0 1.5rem;
	position: relative;
}
/* Franja ilustrada sobre el pie: el paisaje de la marca, difuminado por
   arriba para que no se vea el corte de la imagen. */
.shn-footer__paisaje {
	height: clamp(96px, 14vw, 190px);
	background-color: var(--crema-2);
	background-image: url('assets/img/paisaje.webp');
	background-position: center 78%;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.shn-footer a { color: #c3b79f; display: block; padding: .28rem 0; }
.shn-footer a:hover { color: var(--oro); }
.shn-footer h4 { color: #fdf7ea; font-size: 1.05rem; margin-bottom: 1rem; }

.shn-footer__nav { grid-column: span 2; }
.shn-footer__menu { columns: 2; column-gap: 2rem; }
.shn-footer__menu li { break-inside: avoid; }
.shn-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2rem; }
.shn-footer ul { list-style: none; padding: 0; margin: 0; }
.shn-footer li { margin: 0; }
.shn-footer__brand .shn-brand { margin-bottom: 1rem; }
.shn-footer__brand .shn-brand__tag { color: #a3957c; }
.shn-footer__about { font-size: .93rem; max-width: 36ch; }

.shn-footer__redes { display: flex; gap: .6rem; margin-top: 1rem; }
.shn-footer__redes a {
	width: 38px; height: 38px; border-radius: 9px; padding: 0;
	background: rgba(255,255,255,.08); display: grid; place-items: center;
}
.shn-footer__redes a:hover { background: var(--terra); color: #fdf6ee; }

.shn-footer__news p { font-size: .93rem; }
.shn-footer__news form { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.shn-footer__news input[type=email] {
	flex: 1; min-width: 150px; background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.18); color: #fff; padding: .7rem .9rem; font-size: .93rem;
}
.shn-footer__news input[type=email]::placeholder { color: #8d8069; }
.shn-footer__news input[type=email]:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(217,164,65,.2); }

.shn-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.4rem;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem;
}
.shn-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.shn-footer__legal a { display: inline; padding: 0; }

/* =========================================================================
   17. UTILIDADES
   ========================================================================= */

.shn-center { text-align: center; }
.shn-mt-0 { margin-top: 0 !important; }
.shn-mt-1 { margin-top: 1rem; }
.shn-mt-2 { margin-top: 2rem; }
.shn-mb-0 { margin-bottom: 0 !important; }
.shn-lead { font-size: 1.1rem; color: var(--gris-700); }
.shn-muted { color: var(--gris-500); }

.shn-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.shn-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shn-reveal { opacity: 1; transform: none; } }

.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
.admin-bar .shn-header { top: 32px; }
.admin-bar .shn-mobile { top: calc(var(--cabecera-alto) + 32px); }
@media (max-width: 782px) {
	.admin-bar .shn-header { top: 46px; }
	.admin-bar .shn-mobile { top: calc(var(--cabecera-alto) + 46px); }
}

/* =========================================================================
   18. RESPONSIVE
   ========================================================================= */

@media (max-width: 1180px) {
	.shn-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
	.shn-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
	h1 { font-size: 2.1rem; }
	.shn-hero { padding: 3.5rem 0 4rem; }
	.shn-hero__inner { grid-template-columns: 1fr; gap: 2.2rem; }
	.shn-hero h1 { font-size: 2.2rem; }
	.shn-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.shn-book, .shn-author, .shn-intro { grid-template-columns: 1fr; gap: 2rem; }
	.shn-hero__media { max-width: 520px; margin-inline: auto; }
	.shn-intro__ilu { max-width: 520px; margin-inline: auto; }
	.shn-door--con-ilu { grid-template-columns: 1fr; }
	.shn-door--con-ilu .shn-door__ilu { grid-row: auto; max-width: 260px; }
	.shn-book--reverse .shn-book__media { order: 0; }
	.shn-subescalas { grid-template-columns: 1fr 1fr; }
	.shn-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	.shn-section { padding: 3rem 0; }
	h1 { font-size: 1.85rem; }
	.shn-hero h1 { font-size: 1.95rem; }
	h2 { font-size: 1.55rem; }
	.shn-grid--2, .shn-grid--3, .shn-grid--4 { grid-template-columns: 1fr; }
	.shn-grid--6 { grid-template-columns: repeat(2, 1fr); }
	.shn-doors { grid-template-columns: 1fr; }
	.shn-steps, .shn-steps--3 { grid-template-columns: 1fr; }
	.shn-subescalas { grid-template-columns: 1fr; }
	.shn-footer__grid { grid-template-columns: 1fr; }
	.shn-btn--lg { padding: .9rem 1.5rem; font-size: 1rem; }
	.shn-cta { padding: 2.2rem 1.3rem; }
	.shn-shead { margin-bottom: 2rem; }
}

@media print {
	.shn-header, .shn-footer, .shn-mobile, .shn-cta, .shn-btns { display: none !important; }
	body { background: var(--papel); font-size: 11pt; }
}

/* =========================================================================
   19. OPOSITORES — ficha, desplegables de ejercicios y frase destacada
   ========================================================================= */

/* --- Ficha de datos --- */
.shn-ficha {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: 1.6rem 1.75rem; box-shadow: var(--sombra-sm);
}
.shn-ficha__tit {
	display: block; font-size: .72rem; font-weight: 800; letter-spacing: .11em;
	text-transform: uppercase; color: var(--gris-500); margin-bottom: 1.1rem;
}
.shn-ficha__fila {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .75rem 0; border-bottom: 1px solid var(--gris-100);
}
.shn-ficha__fila dt { font-size: .93rem; color: var(--gris-700); margin: 0; }
.shn-ficha__fila dd { margin: 0; font-weight: 700; color: var(--azul-800); text-align: right; }
.shn-ficha__pie {
	margin: 1.1rem 0 0; font-size: .89rem; color: var(--gris-500); line-height: 1.5;
}

/* --- Desplegables de los ejercicios --- */
.shn-ex { display: flex; flex-direction: column; gap: .9rem; }

.shn-ex__item {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	box-shadow: var(--sombra-sm); overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.shn-ex__item[open] { border-color: var(--terra-100); box-shadow: var(--sombra); }

.shn-ex__cab {
	display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
	padding: 1.25rem 1.6rem; cursor: pointer; list-style: none;
	transition: background .15s;
}
.shn-ex__cab::-webkit-details-marker { display: none; }
.shn-ex__cab:hover { background: var(--crema-2); }
.shn-ex__cab:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }

.shn-ex__nom { display: flex; flex-direction: column; gap: .1rem; }
.shn-ex__nom strong { font-size: 1.16rem; color: var(--azul-800); line-height: 1.25; }
.shn-ex__nom small { font-size: .82rem; color: var(--gris-500); }

.shn-ex__temas {
	margin-left: auto; display: flex; align-items: baseline; gap: .35rem;
	font-size: .8rem; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--gris-500);
	background: var(--crema-2); padding: .35rem .85rem; border-radius: 99px;
}
.shn-ex__temas b { font-size: 1.15rem; color: var(--azul-600); font-variant-numeric: tabular-nums; }

.shn-ex__flecha {
	width: 11px; height: 11px; flex-shrink: 0;
	border-right: 2px solid var(--gris-500); border-bottom: 2px solid var(--gris-500);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s var(--ease);
}
.shn-ex__item[open] .shn-ex__flecha { transform: rotate(-135deg) translate(-3px, -3px); }

.shn-ex__cuerpo { padding: 0 1.6rem 1.6rem; }

.shn-ex__temario {
	display: flex; gap: .9rem; align-items: flex-start;
	background: var(--crema-2); border-radius: var(--radio-sm);
	padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.shn-ex__temario strong { display: block; color: var(--azul-800); font-size: 1rem; }
.shn-ex__temario span { display: block; margin-top: .2rem; font-size: .9rem; color: var(--gris-700); }

.shn-ex__ico { color: var(--azul-500); flex-shrink: 0; line-height: 0; }

.shn-ex__pruebas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.shn-ex__prueba {
	border: 1px solid var(--gris-100); border-radius: var(--radio-sm);
	padding: 1.1rem 1.2rem; display: grid; gap: .35rem;
	grid-template-columns: auto 1fr; align-content: start;
}
.shn-ex__prueba .shn-ex__ico { grid-row: 1; }
.shn-ex__etq {
	grid-column: 2; font-size: .7rem; font-weight: 800; letter-spacing: .11em;
	text-transform: uppercase; color: var(--gris-500); align-self: center;
}
.shn-ex__val { grid-column: 1 / -1; font-size: 1.02rem; color: var(--azul-800); line-height: 1.3; }
.shn-ex__prueba p { grid-column: 1 / -1; margin: 0; font-size: .89rem; color: var(--gris-700); line-height: 1.5; }

/* --- Frase destacada --- */
.shn-frase {
	max-width: 46ch; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	text-align: center; font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	font-weight: 700; line-height: 1.4; color: var(--azul-800);
	padding-top: 1.8rem; border-top: 3px solid var(--oro); text-wrap: balance;
}

@media (max-width: 820px) {
	.shn-ex__pruebas { grid-template-columns: 1fr; }
	.shn-ex__cab { padding: 1.1rem 1.2rem; gap: .8rem; }
	.shn-ex__cuerpo { padding: 0 1.2rem 1.2rem; }
	.shn-ex__temas { margin-left: 0; order: 3; }
	.shn-ex__flecha { margin-left: auto; }
}

/* =========================================================================
   20. ICONOS EN LÍNEA — ajustes finos
   ========================================================================= */

/* El SVG es inline por defecto y arrastra el espacio del descendente:
   en bloque se centra bien dentro de su pastilla. */
.shn-feature__icon svg,
.shn-door__icon svg,
.shn-list__ico svg,
.shn-topbar__info svg,
.shn-progress-card__head svg,
.shn-notice > span:first-child svg,
.shn-hero__figure h3 svg,
.shn-btn svg { display: block; }

.shn-topbar__info svg { opacity: .7; }
.shn-notice > span:first-child { color: var(--oro-osc); line-height: 0; padding-top: .15rem; }
.shn-notice--info > span:first-child { color: var(--terra); }
.shn-hero__figure h3 { display: flex; align-items: center; gap: .55rem; }
.shn-hero__figure h3 svg { color: var(--oro); }

/* Botón del campus: el candado un punto más discreto que el texto. */
.shn-btn--campus svg { opacity: .85; }

/* =========================================================================
   21. CONTACTO — vías, formulario y panel lateral
   ========================================================================= */

.shn-contacto { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .shn-contacto { grid-template-columns: 1.35fr .8fr; } }

/* --- Atajos: correo, teléfono, tiempo de respuesta --- */

.shn-contacto__vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; }

.shn-via {
	display: flex; align-items: center; gap: 1rem;
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: 1.15rem 1.3rem; box-shadow: var(--sombra-sm);
	text-decoration: none; color: inherit;
	transition: transform .15s var(--ease), box-shadow .15s, border-color .15s;
}
a.shn-via:hover { transform: translateY(-3px); border-color: var(--terra); box-shadow: var(--sombra); }
.shn-via--info { background: var(--crema-2); border-style: dashed; box-shadow: none; }

.shn-via__ico {
	flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
	display: grid; place-items: center;
	background: var(--terra-50); color: var(--terra);
}
.shn-via__ico svg { display: block; }
.shn-via--info .shn-via__ico { background: var(--oro-100); color: var(--oro-osc); }
.shn-via__txt { min-width: 0; }
.shn-via__txt strong {
	display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gris-500); margin-bottom: .1rem;
}
.shn-via__txt span { display: block; font-weight: 600; color: var(--azul-800); font-size: .95rem; overflow-wrap: anywhere; line-height: 1.35; }
.shn-contacto__vias { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* --- Formulario --- */

.shn-form { display: flex; flex-direction: column; gap: 1.15rem; position: relative; }
.shn-form--caja {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--sombra-sm);
}

.shn-form__row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .shn-form__row--2 { grid-template-columns: 1fr 1fr; } }

.shn-field { display: flex; flex-direction: column; gap: .4rem; }
/* `hidden` es display:none en la hoja del navegador y cualquier display
   propio le gana. Sin esto, los desplegables condicionales se ven un
   instante al cargar, antes de que entre el JS. */
.shn-field[hidden] { display: none; }
.shn-field label {
	font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--azul-800);
}
.shn-field .req { color: var(--rojo); font-weight: 700; }

.shn-field input[type="text"],
.shn-field input[type="email"],
.shn-field input[type="tel"],
.shn-field select,
.shn-field textarea {
	width: 100%; font-family: inherit; font-size: 1rem; color: var(--gris-900);
	background: var(--papel); border: 1px solid var(--gris-300); border-radius: var(--radio-sm);
	padding: .78rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.shn-field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.55; }
.shn-field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--gris-500) 50%), linear-gradient(135deg, var(--gris-500) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 1.28rem, calc(100% - .8rem) 1.28rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.4rem;
}
.shn-field input:focus,
.shn-field select:focus,
.shn-field textarea:focus {
	outline: none; border-color: var(--terra);
	box-shadow: 0 0 0 3px rgba(169,71,40,.16);
}
.shn-field input::placeholder, .shn-field textarea::placeholder { color: #a1957f; }
.shn-field__ayuda { margin: .1rem 0 0; font-size: .85rem; color: var(--gris-500); }

/* El bloque que aparece según lo que elijas arriba. */
.shn-condicional {
	border-left: 3px solid var(--oro); padding-left: 1rem;
	animation: shn-aparece .25s var(--ease);
}
@keyframes shn-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shn-condicional { animation: none; } }

.shn-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--gris-700); }
.shn-check input { margin-top: .25rem; accent-color: var(--terra); flex-shrink: 0; width: 17px; height: 17px; }
.shn-check a { color: var(--terra); }

.shn-form__pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.shn-form__nota { font-size: .84rem; color: var(--gris-500); }

.shn-notice--alerta { background: #f8e7e1; border-left-color: var(--rojo); color: #7a2e1b; }
.shn-notice--alerta > span:first-child { color: var(--rojo); }

/* --- Pantalla de gracias --- */

.shn-gracias {
	text-align: center; background: var(--papel);
	border: 1px solid var(--gris-100); border-top: 4px solid var(--verde);
	border-radius: var(--radio); padding: clamp(2rem, 5vw, 3.2rem);
	box-shadow: var(--sombra-sm);
}
.shn-gracias__ico {
	display: grid; place-items: center; width: 68px; height: 68px;
	margin: 0 auto 1.2rem; border-radius: 50%;
	background: var(--verde-100); color: var(--verde);
}
.shn-gracias__ico svg { display: block; }
.shn-gracias h2 { margin: 0 0 .5rem; }
.shn-gracias p { color: var(--gris-700); margin: 0 auto; max-width: 46ch; }

/* --- Panel lateral --- */

.shn-contacto__lado { display: flex; flex-direction: column; gap: 1.2rem; }

.shn-panel-lado {
	background: var(--crema-2); border-radius: var(--radio);
	padding: 1.5rem 1.6rem;
}
.shn-panel-lado h3 {
	margin: 0 0 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gris-500);
}
.shn-panel-lado .shn-accordion { border-top: 0; }
.shn-panel-lado .shn-accordion__item:last-child { border-bottom: 0; }
.shn-panel-lado .shn-accordion__btn { font-size: .96rem; padding-block: .9rem; }
.shn-panel-lado .shn-accordion__panel p { font-size: .9rem; margin: 0; }

.shn-pasos-mini { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.shn-pasos-mini li {
	counter-increment: paso; position: relative; padding: 0 0 1rem 2.4rem;
	font-size: .93rem; color: var(--gris-700); line-height: 1.5;
}
.shn-pasos-mini li:last-child { padding-bottom: 0; }
.shn-pasos-mini li::before {
	content: counter(paso); position: absolute; left: 0; top: -1px;
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--terra); color: #fdf6ee; font-size: .78rem; font-weight: 800;
}

/* Contador dentro de un botón: «Ver convocatorias abiertas (3)». */
.shn-btn__pill {
	display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem;
	padding: 0 .4rem; border-radius: 99px;
	background: rgba(255, 255, 255, .22); color: inherit;
	font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.shn-filters small {
	font-size: .75em; opacity: .6; font-weight: 700;
	font-variant-numeric: tabular-nums; margin-left: .15rem;
}

/* =========================================================================
   22. ÁREA PRIVADA — cabecera
   ========================================================================= */

.shn-hero-campus { position: relative; overflow: hidden; padding-block: clamp(2.8rem, 6vw, 4.2rem); }

/* Con foto: se oscurece lo justo para que el texto se lea siempre, venga la
   foto que venga. Nunca se confía en que la imagen sea oscura por su cuenta. */
.shn-hero-campus__foto {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
	opacity: .62;
}
/* Dos capas: un velo lateral que protege el texto de la izquierda y otro
   general muy suave, para que la foto se vea pero nada se pierda encima. */
.shn-hero-campus.tiene-foto::before,
.shn-hero-campus.tiene-foto::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
}
.shn-hero-campus.tiene-foto::before {
	background: linear-gradient(90deg, rgba(11,42,62,.90) 0%, rgba(11,42,62,.68) 38%, rgba(18,61,88,.24) 74%, rgba(18,61,88,.06) 100%);
}
.shn-hero-campus.tiene-foto::after {
	background: linear-gradient(180deg, rgba(11,42,62,.22) 0%, rgba(11,42,62,0) 40%, rgba(11,42,62,.28) 100%);
}
.shn-hero-campus__txt { position: relative; z-index: 2; }
/* Sombra suave: garantiza el contraste aunque la foto que suban sea muy
   clara, sin tener que oscurecerla entera. */
.shn-hero-campus.tiene-foto .shn-hero-campus__txt h1,
.shn-hero-campus.tiene-foto .shn-hero-campus__txt p,
.shn-hero-campus.tiene-foto .shn-hero-campus__rotulo {
	text-shadow: 0 1px 14px rgba(9,32,46,.55);
}

.shn-hero-campus__datos {
	margin-top: 1.7rem; padding-top: 1.3rem;
	border-top: 1px solid rgba(255,255,255,.22);
}
.shn-hero-campus__rotulo {
	display: block; margin-bottom: .6rem;
	font-size: .74rem; font-weight: 800; letter-spacing: .11em;
	text-transform: uppercase; color: #ddd2bd;
}
.shn-hero-campus__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.shn-hero-campus__chips span {
	display: inline-block; padding: .42rem .95rem;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
	border-radius: 99px; backdrop-filter: blur(4px);
	color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3;
}


/* -------------------------------------------------------------------------
 * 23. ÁREA PRIVADA — TARJETAS DE ACCESO
 *
 * Al alumno sólo se le pinta el aula que es suya, así que el número de
 * tarjetas cambia de un alumno a otro. Con flex + margin-top:auto en el botón
 * la fila queda alineada sea cual sea el largo del texto.
 * ---------------------------------------------------------------------- */

.shn-accesos .shn-card--acceso {
	display: flex; flex-direction: column;
	padding: 1.6rem 1.5rem 1.5rem;
}
.shn-card--acceso__ico { display: block; line-height: 0; }
.shn-card--acceso h3 {
	margin: .85rem 0 .35rem;
	font-size: var(--shn-fs-lg, 1.15rem); line-height: 1.3;
}
.shn-card--acceso p {
	margin: 0 0 1.25rem;
	font-size: var(--shn-fs-sm, .93rem); color: var(--shn-ink-soft, #554d42);
}
.shn-card--acceso .shn-btn,
.shn-card--acceso .shn-tag {
	margin-top: auto; align-self: stretch; text-align: center;
}
.shn-card--acceso .shn-tag { padding-block: .6rem; }

/* -------------------------------------------------------------------------
 * 24. PERFIL DEL ALUMNO
 *
 * Sustituye a wp-admin/profile.php. Dos columnas en escritorio (foto y cuenta
 * a un lado, formularios al otro) y una sola en móvil.
 * ---------------------------------------------------------------------- */

.shn-notice--ok { background: var(--verde-100); border-left-color: var(--verde); color: #2f5f42; }
.shn-notice--ok > span:first-child { color: var(--verde); }
.shn-perfil__aviso { margin-bottom: 1.5rem; }

.shn-btn--claro {
	border-color: rgba(255,255,255,.45); color: #fff;
}
.shn-btn--claro:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* Avatar ------------------------------------------------------------- */
.shn-avatar {
	display: block; border-radius: 50%; object-fit: cover;
	border: 4px solid var(--papel); box-shadow: 0 10px 26px rgba(90,62,34,.16);
}
.shn-avatar--inicial {
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--azul-700), var(--azul-900));
	color: #fff; font-weight: 800; letter-spacing: .02em;
}

/* Rejilla -------------------------------------------------------------- */
.shn-perfil { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 900px) {
	.shn-perfil { grid-template-columns: 320px 1fr; gap: 2rem; }
	.shn-perfil__lado { position: sticky; top: 1.5rem; }
}
.shn-perfil__lado { display: grid; gap: 1.2rem; }
.shn-perfil__main { display: grid; gap: 1.6rem; }

/* Tarjeta de la foto --------------------------------------------------- */
.shn-perfil__foto { padding: 1.8rem 1.5rem; text-align: center; }
.shn-perfil__foto .shn-avatar { margin: 0 auto .9rem; }
.shn-perfil__foto h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.shn-perfil__usuario { margin: .15rem 0 0; font-size: .9rem; color: var(--gris-500); }

.shn-perfil__chips {
	display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
	margin-top: 1rem;
}
.shn-perfil__chips span {
	padding: .3rem .7rem; border-radius: 99px;
	background: var(--crema-2); color: var(--azul-800);
	font-size: .8rem; font-weight: 600; line-height: 1.3;
}

.shn-perfil__subir {
	display: grid; gap: .55rem; justify-items: stretch;
	margin-top: 1.4rem; padding-top: 1.3rem;
	border-top: 1px solid var(--gris-100, #ece1cd);
}
.shn-file {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .75rem 1rem; cursor: pointer;
	border: 1.5px dashed var(--gris-300, #c8bca7); border-radius: var(--radio);
	background: var(--crema-2); color: var(--azul-800);
	font-size: .9rem; font-weight: 600;
	transition: border-color .18s, background .18s;
}
.shn-file:hover { border-color: var(--terra); background: var(--terra-50); }
.shn-file svg { flex-shrink: 0; }
.shn-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shn-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.shn-perfil__subir .shn-field__ayuda { text-align: center; margin: 0; }
.shn-perfil__quitar {
	background: none; border: 0; padding: .2rem; cursor: pointer;
	color: var(--gris-500); font-size: .85rem; text-decoration: underline;
}
.shn-perfil__quitar:hover { color: var(--rojo); }

/* Tarjeta de la cuenta -------------------------------------------------- */
.shn-perfil__meta { padding: 1.5rem; }
.shn-perfil__meta h3 { margin: 0 0 1rem; font-size: 1.02rem; }
.shn-perfil__meta dl { margin: 0 0 .9rem; display: grid; gap: .6rem; }
.shn-perfil__meta dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.shn-perfil__meta dt { color: var(--gris-500); }
.shn-perfil__meta dd { margin: 0; font-weight: 600; color: var(--azul-800); overflow-wrap: anywhere; }
.shn-perfil__meta .shn-btn { margin-top: 1rem; width: 100%; text-align: center; }

/* Bloques de formulario -------------------------------------------------- */
.shn-perfil__bloque { padding: 1.8rem; }
.shn-perfil__cab {
	display: flex; gap: .9rem; align-items: flex-start;
	margin-bottom: 1.5rem; padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--gris-100, #ece1cd);
}
.shn-perfil__cab > span:first-child { color: var(--terra); line-height: 0; padding-top: .2rem; }
.shn-perfil__cab h2 { margin: 0; font-size: 1.22rem; line-height: 1.25; }
.shn-perfil__cab p { margin: .2rem 0 0; font-size: .92rem; color: var(--gris-500); }

.shn-perfil__pie {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	margin-top: 1.6rem; padding-top: 1.3rem;
	border-top: 1px solid var(--gris-100, #ece1cd);
}
.shn-perfil__pie .shn-field__ayuda { margin: 0; }

/* Los campos de contraseña y de archivo comparten el estilo de los demás. */
.shn-field input[type="password"],
.shn-field input[type="number"],
.shn-field input[type="url"] {
	padding: .8rem .95rem;
	border: 1.5px solid var(--gris-300, #c8bca7); border-radius: var(--radio);
	background: var(--papel); color: var(--azul-800); font: inherit; font-size: .97rem;
	transition: border-color .18s, box-shadow .18s;
}
.shn-field input[type="password"]:focus {
	outline: none; border-color: var(--terra);
	box-shadow: 0 0 0 4px rgba(169,71,40,.15);
}

/* -------------------------------------------------------------------------
 * 25. LOGOTIPO DEL PIE
 *
 * El fondo del pie es azul oscuro, así que el logo se pinta en blanco con
 * brightness(0) + invert(1): aplasta todos los colores a negro y luego los
 * invierte. Vale para cualquier logo, sin necesidad de subir una versión en
 * negativo ni de tocar el archivo original.
 * ---------------------------------------------------------------------- */

.shn-footer__logo {
	display: block; width: 100%; max-width: 250px;
	line-height: 0; margin-bottom: 1.35rem;
	transition: opacity .18s;
}
.shn-footer__logo img { display: block; width: 100%; height: auto; }

/* Sin versión blanca del archivo: se aplasta a negro y se invierte. */
.shn-footer__logo:not(.shn-footer__logo--nativo) img { filter: brightness(0) invert(1); }

.shn-footer__logo:hover { opacity: .82; }
.shn-footer__brand .shn-footer__logo + .shn-footer__about { margin-top: 0; }

@media (max-width: 780px) {
	.shn-footer__logo { max-width: 200px; margin-bottom: 1.1rem; }
}

/* -------------------------------------------------------------------------
 * 26. PÁGINA 404
 *
 * Pantalla completa en azul, con el «404» enorme detrás del texto a modo de
 * marca de agua. Sin tarjetas ni listas: en una página de error lo único que
 * quiere el visitante es irse a otro sitio cuanto antes.
 * ---------------------------------------------------------------------- */

.shn-404 {
	position: relative; overflow: hidden;
	display: grid; place-items: center;
	min-height: min(78vh, 720px);
	padding-block: clamp(3.2rem, 9vw, 6rem);
	background: linear-gradient(158deg, #0b2a3e 0%, #123d58 52%, #16465f 100%);
	color: #fff; text-align: center;
}

/* Halos: el mismo recurso que la pantalla de acceso, para que se reconozcan. */
.shn-404::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(720px 460px at 14% 6%, rgba(217,164,65,.17), transparent 62%),
		radial-gradient(620px 420px at 88% 94%, rgba(255,255,255,.08), transparent 60%);
}

/* El número, de fondo. aria-hidden: para un lector de pantalla es ruido. */
.shn-404__marca {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -54%);
	font-family: Lora, Georgia, 'Times New Roman', serif;
	font-size: clamp(15rem, 40vw, 30rem); font-weight: 700;
	line-height: 1; letter-spacing: -.04em;
	color: rgba(255,255,255,.045);
	user-select: none; pointer-events: none; white-space: nowrap;
}

.shn-404__txt { position: relative; z-index: 1; max-width: 660px; }

.shn-404__eyebrow {
	display: inline-block; margin-bottom: 1.1rem;
	padding: .34rem .95rem; border-radius: 99px;
	background: rgba(217,164,65,.16); border: 1px solid rgba(217,164,65,.42);
	color: var(--oro, #d9a441);
	font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

.shn-404 h1 {
	margin: 0; color: #fff;
	font-size: clamp(1.9rem, 5.2vw, 3.1rem); line-height: 1.14; letter-spacing: -.02em;
	text-wrap: balance;
}

.shn-404__lead {
	margin: 1.05rem auto 0; max-width: 33rem;
	color: rgba(255,255,255,.76); font-size: 1.05rem; line-height: 1.62;
	text-wrap: pretty;
}

/* Buscador --------------------------------------------------------------- */
.shn-404__buscador { max-width: 460px; margin: 2.2rem auto 0; }
.shn-404__buscador .shn-searchform { gap: .55rem; }
.shn-404__buscador input[type="search"] {
	flex: 1; min-width: 0;
	padding: .82rem 1.05rem;
	border: 1.5px solid rgba(255,255,255,.24); border-radius: var(--radio, 14px);
	background: rgba(255,255,255,.09); color: #fff;
	font: inherit; font-size: .98rem;
	transition: border-color .18s, background .18s, box-shadow .18s;
}
.shn-404__buscador input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
.shn-404__buscador input[type="search"]:focus {
	outline: none; background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
/* Botón del buscador en blanco: el dorado se reserva para la acción
   principal, «Ir a la portada». Dos acentos compitiendo no son un acento. */
.shn-404__buscador .shn-btn {
	flex-shrink: 0;
	background: var(--papel); border-color: #fff; color: var(--azul-800, #123d58);
	box-shadow: 0 6px 18px rgba(4,16,30,.28);
}
.shn-404__buscador .shn-btn:hover {
	background: rgba(255,255,255,.88); border-color: rgba(255,255,255,.88);
	color: var(--azul-800, #123d58);
}

.shn-404__btns { margin-top: 1.5rem; }

/* Atajos: enlaces sueltos, no tarjetas. */
.shn-404__atajos {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .3rem 1.4rem;
	margin-top: 2.6rem; padding-top: 1.7rem;
	border-top: 1px solid rgba(255,255,255,.14);
}
.shn-404__atajos a {
	color: rgba(255,255,255,.66); font-size: .9rem; font-weight: 600;
	text-decoration: none; padding: .2rem 0;
	border-bottom: 1px solid transparent; transition: color .18s, border-color .18s;
}
.shn-404__atajos a:hover {
	color: #fff; border-bottom-color: var(--oro, #d9a441);
}

@media (max-width: 560px) {
	.shn-404__buscador .shn-searchform { flex-direction: column; }
	.shn-404__buscador .shn-btn { width: 100%; }
	.shn-404__atajos { gap: .2rem 1.1rem; }
}

/* ==========================================================================
   27. TEXTOS LEGALES
   Aviso legal, privacidad y cookies. Son páginas que nadie lee por gusto:
   se entra buscando un dato concreto. Así que lo que importa no es que sean
   bonitas, es que se puedan recorrer: medida de línea corta, jerarquía clara
   entre apartados y tablas que no se salgan en el móvil.
   ========================================================================== */

.shn-legal-hero {
	background: var(--azul-800);
	color: #fff;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}
.shn-legal-hero h1 {
	color: #fff;
	margin: .4rem 0 0;
	font-size: var(--shn-fs-3xl);
}

.shn-legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/*
 * 68 caracteres de medida: por encima, el ojo pierde el renglón al saltar.
 * Se hace con una rejilla de dos columnas en lugar de un max-width porque las
 * tablas de cookies necesitan más ancho: con 68ch, un nombre como
 * «wordpress_test_cookie» se parte por la mitad y deja de leerse. El texto
 * corrido vive en la primera columna; las tablas ocupan las dos.
 */
.shn-legal__texto {
	display: grid;
	grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
	color: var(--gris-700, #554d42);
	font-size: var(--shn-fs-base);
	line-height: 1.75;
}
.shn-legal__texto > * { grid-column: 1; }

.shn-legal__texto h2 {
	margin: 2.6rem 0 .9rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--gris-100, #ece1cd);
	font-size: 1.35rem;
	color: var(--azul-800);
}
.shn-legal__texto h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.shn-legal__texto h3 {
	margin: 1.8rem 0 .6rem;
	font-size: 1.06rem;
	color: var(--terra, #a94728);
}

.shn-legal__texto p  { margin: 0 0 1.05rem; }
.shn-legal__texto ul { margin: 0 0 1.3rem; padding-left: 1.1rem; }
.shn-legal__texto li { margin-bottom: .55rem; padding-left: .2rem; }
.shn-legal__texto strong { color: var(--azul-800); font-weight: 650; }

.shn-legal__texto a {
	color: var(--terra, #a94728);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Las tablas de cookies: la única parte ancha del documento. */
.shn-legal__texto > table {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 880px;
	margin: 0 0 1.5rem;
	border-collapse: collapse;
	font-size: var(--shn-fs-sm);
	line-height: 1.55;
}
.shn-legal__texto thead th {
	background: var(--crema-2, #f5ebda);
	color: var(--azul-800);
	text-align: left;
	font-weight: 700;
}
.shn-legal__texto th,
.shn-legal__texto td {
	padding: .6rem .75rem;
	border: 1px solid var(--gris-100, #ece1cd);
	vertical-align: top;
}
.shn-legal__texto tbody td:first-child {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .85em;
	color: var(--azul-800);
	/* Que rompa sólo si no cabe de ninguna manera, no por costumbre. */
	overflow-wrap: anywhere;
}

.shn-legal__texto em {
	display: inline-block;
	margin-top: 1.5rem;
	color: var(--gris-500);
	font-size: var(--shn-fs-sm);
}

/* Saltar de un texto legal a los otros dos sin volver al pie. */
.shn-legal__otros {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	max-width: 68ch;
	margin-top: 2.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--gris-100, #ece1cd);
	font-size: var(--shn-fs-sm);
	font-weight: 600;
}
.shn-legal__otros a { color: var(--terra, #a94728); text-decoration: none; }
.shn-legal__otros a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	/* Sin sitio para la columna ancha, todo a una sola. */
	.shn-legal__texto { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	/* La tabla es lo único que puede desbordar: scrolla ella, no la página. */
	.shn-legal__texto > table { display: block; overflow-x: auto; }
	.shn-legal__texto th,
	.shn-legal__texto td { min-width: 9rem; }
	.shn-legal__texto tbody td:first-child { min-width: 11rem; }
}

/* ==========================================================================
   28. CABECERA EN PANTALLAS INTERMEDIAS
   El menú de escritorio aparecía desde 1024 px, pero sus siete enlaces y el
   botón del campus necesitan unos 1600. Entre medias —justo el ancho de un
   portátil corriente: 1280, 1366, 1440— el botón «Campus Virtual» se salía
   por la derecha. Es el botón por el que entran los alumnos.

   Dos medidas: por debajo de 1200 px, menú hamburguesa; y entre 1200 y
   1600, el menú se compacta (menos relleno, letra algo menor) para que todo
   quepa sin tocar el diseño de las pantallas grandes (1600 px o más).
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.shn-nav { display: none; }
	.shn-burger { display: inline-flex; }
	/* Respeta el atributo hidden: el panel sólo existe cuando se abre. */
	.shn-mobile:not([hidden]) { display: block; }
}

/*
 * Con el Blog el menú tiene nueve enlaces. El contenedor mide 1180 px en
 * cualquier pantalla de más de ~1220, así que la cabecera tiene que caber ahí
 * dentro también en monitores grandes: antes el tramo compacto terminaba en
 * 1600 y por encima el botón del campus sobresalía de la columna.
 */
@media (min-width: 1200px) {
	.shn-header__inner { gap: .6rem; }
	.shn-nav ul { gap: 0; }
	.shn-nav a { padding: .5rem .46rem; font-size: .9rem; }
	.shn-brand__escudo { height: 42px; }
	.shn-brand__rotulo { height: 45px; }
	.shn-brand__subido { max-height: 48px; }
	/* La firma no puede ser más ancha que el rótulo o empuja el menú. */
	.shn-brand__tag { font-size: .78rem; letter-spacing: 0; white-space: nowrap; }
	.shn-header__actions .shn-btn { padding-inline: .95rem; }
	/* Un poco más ancha que el contenido: nueve enlaces necesitan aire. */
	.shn-header .shn-wrap { max-width: 1280px; }
}

@media (min-width: 1200px) and (max-width: 1319.98px) {
	/* El último escalón: se quita la firma bajo el rótulo y se aprieta el menú. */
	.shn-nav a { padding-inline: .38rem; font-size: .85rem; }
	.shn-brand__tag { display: none; }
	.shn-brand__escudo { height: 38px; }
	.shn-brand__rotulo { height: 42px; }
	.shn-header__actions .shn-btn { padding-inline: .8rem; font-size: .84rem; }
}

/* ==========================================================================
   29. CABECERA EN EL MÓVIL
   Logo + «Campus Virtual» + hamburguesa sumaban unos 580 px: no cabían en
   ningún teléfono y la página entera se desplazaba de lado. En pantallas
   estrechas el botón se queda en el candado (el nombre sigue ahí para los
   lectores de pantalla, por el aria-label) y el logo se ajusta al hueco.
   ========================================================================== */

@media (max-width: 699.98px) {
	/* El filete del antetítulo estorba cuando el rótulo ocupa dos líneas. */
	.shn-eyebrow::before, .shn-eyebrow::after { display: none; }
	.shn-eyebrow { letter-spacing: 1.2px; }
	.shn-hero__media { max-width: 420px; }

	.shn-header__inner { gap: .5rem; }
	.shn-brand { min-width: 0; flex-shrink: 1; gap: .45rem; }
	.shn-brand__subido { max-height: 40px; max-width: 100%; }
	.shn-brand__text { min-width: 0; }
	.shn-brand__escudo { height: 36px; }
	.shn-brand__rotulo { height: 40px; max-width: 100%; object-fit: contain; object-position: left; }
	.shn-brand__tag { display: none; }
	.shn-header__actions { gap: .35rem; }
	.shn-btn--campus { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.shn-btn--campus span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.shn-btn--campus svg { opacity: 1; width: 18px; height: 18px; }
}

/* La lista de descargas de la portada: en un teléfono de 320 px la rejilla
   no dejaba encoger la tarjeta por debajo de su contenido. */
.shn-list > li { min-width: 0; }
@media (max-width: 380px) {
	.shn-list__item { padding: .95rem 1rem; gap: .75rem; }
	.shn-list__ico { width: 40px; height: 40px; }
}

/* ==========================================================================
   30. PÁGINA «YA SOY HN»
   Sigue la maqueta de Ana: cinta con el lema sobre el paisaje, tres bloques
   (libro / packs / descargables) y el detalle de los dos packs debajo.
   ========================================================================== */

/* --- Rasgos junto al texto de «Cuando ya has llegado» --- */
.shn-intro--rasgos { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; margin-bottom: 0; }
.shn-intro--rasgos .shn-intro__texto { max-width: 42ch; }

/* Cuatro tarjetas en dos filas: sueltos, los iconos parecían flotar. */
.shn-rasgos {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
}
.shn-rasgo {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
	column-gap: .8rem; row-gap: .45rem; align-items: center;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-radius: var(--radio); padding: 1rem 1.1rem;
	box-shadow: var(--sombra-sm);
	transition: transform .15s var(--ease), box-shadow .15s, border-color .15s;
}
.shn-rasgo:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--terra-100); }
.shn-rasgo__ico {
	grid-row: 1; grid-column: 1;
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--terra-50); color: var(--terra);
}
.shn-rasgo__ico svg { display: block; }
.shn-rasgo strong {
	grid-column: 2; grid-row: 1;
	font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 700;
	color: var(--azul-800); line-height: 1.2;
}
/* La descripción ocupa todo el ancho de la tarjeta: debajo del icono se
   partía en tres líneas de cuatro palabras. */
.shn-rasgo > span:last-child {
	grid-column: 1 / -1; grid-row: 2;
	font-size: .88rem; color: var(--gris-700); line-height: 1.45;
}

/* --- Cinta del lema --- */
.shn-cinta {
	position: relative; overflow: hidden;
	background: var(--crema-2);
	padding: clamp(3rem, 6vw, 4.5rem) 0;
	text-align: center;
}
.shn-cinta::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: url('assets/img/paisaje.webp'), url('assets/img/paisaje.webp');
	background-position: left -40px bottom, right -40px bottom;
	background-size: auto 74%, auto 74%;
	background-repeat: no-repeat, no-repeat;
	opacity: .4;
}
.shn-cinta__inner { position: relative; z-index: 1; }
.shn-cinta .shn-eyebrow { margin-inline: auto; }
.shn-cinta .shn-eyebrow::before {
	content: ''; display: block; width: 58px; height: 1px;
	background: currentColor; opacity: .5;
}
.shn-cinta h2 { margin: .2rem 0 1rem; text-wrap: balance; }
.shn-cinta p { color: var(--gris-700); }
.shn-cinta__firma { margin-top: 1.6rem; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.6; }

/* --- Los tres bloques --- */
.shn-tres { display: grid; grid-template-columns: 1fr 1fr 1.12fr; gap: 1.5rem; align-items: start; }

.shn-bloque {
	background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--radio);
	padding: clamp(1.4rem, 2.4vw, 1.9rem); box-shadow: var(--sombra-sm);
	display: flex; flex-direction: column; height: 100%;
}
.shn-bloque h2 { font-size: clamp(1.3rem, 1.9vw, 1.55rem); margin: 0 0 .9rem; }
.shn-bloque p { font-size: .93rem; color: var(--gris-700); }
.shn-bloque__remate { color: var(--terra); font-weight: 600; }
.shn-bloque__pie { margin-top: auto; padding-top: 1.2rem; }

/* La portada va encima del texto: en una columna de un tercio, ponerla al
   lado dejaba la lectura en una tira de cuatro palabras por línea. */
.shn-bloque__cuerpo { display: block; }
.shn-bloque__portada { margin: 0 0 1.3rem; max-width: 190px; }
.shn-bloque__portada img {
	width: 100%; height: auto; border-radius: 4px 8px 8px 4px;
	box-shadow: -4px 0 0 rgba(90,62,34,.12), var(--sombra);
}
.shn-bloque__texto p { font-size: .92rem; }

/* --- Miniaturas de los packs dentro del bloque --- */
.shn-mini-pack { margin: 0 0 1.1rem; }
.shn-mini-pack img { width: 100%; height: auto; border-radius: var(--radio-sm); }
.shn-mini-pack figcaption {
	margin-top: .6rem; text-align: center; font-size: .9rem; color: var(--gris-700);
}
.shn-mini-pack figcaption strong {
	display: block; font-family: var(--fuente-titulo); font-size: 1.08rem; color: var(--azul-800);
}
.shn-mini-pack__sub {
	display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--terra); margin: .1rem 0 .15rem;
}

/* --- Tarjeta del Kit de aterrizaje (a todo lo ancho, bajo los tres bloques) --- */
.shn-kit {
	margin-top: 1.8rem; padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--crema-3); border: 1px solid rgba(190,160,115,.35);
	border-radius: var(--radio); box-shadow: var(--sombra-sm);
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start;
}
.shn-kit__cab { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: start; }
.shn-kit__cab h3 { margin: 0 0 .3rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.shn-kit__gancho { margin: 0; font-size: .97rem; color: var(--gris-700); }
.shn-kit__portada { margin: 0; width: 148px; flex-shrink: 0; }
.shn-kit__portada img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--sombra-sm); }
.shn-kit p { font-size: .93rem; }
/* Izquierda: cabecera, párrafos y la firma. Derecha: las cuatro herramientas
   y el botón, pegado abajo para que las dos columnas cierren a la misma altura. */
.shn-kit__col { display: flex; flex-direction: column; }
.shn-kit__col > p { margin-top: .9rem; }
/* El botón, despegado del texto y siempre al fondo de su columna. */
.shn-kit__cta { margin-top: auto; padding-top: 1.05rem; padding-bottom: 1.05rem; }
.shn-kit__lista + .shn-kit__cta { margin-top: 2rem; }
.shn-kit__col > .shn-kit__cta:not(:first-child) { margin-top: 2rem; }

.shn-kit__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.shn-kit__lista li { display: flex; gap: .7rem; align-items: flex-start; }
.shn-kit__ico { color: var(--terra); line-height: 0; padding-top: .15rem; flex-shrink: 0; }
.shn-kit__ico svg { display: block; }
.shn-kit__txt strong { display: block; font-size: .96rem; color: var(--azul-800); line-height: 1.3; }
.shn-kit__txt > span { display: block; font-size: .88rem; color: var(--gris-700); line-height: 1.5; }
.shn-kit__firma { margin: 1.6rem 0 .2rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); text-align: center; }
.shn-kit__nota { text-align: center; font-size: .89rem; margin-bottom: 1.1rem; }
.shn-kit .shn-ico-lista { margin: 0; }

/* --- Detalle de cada pack ---
 * Cabecera y cierre a todo el ancho, y en medio foto y contenido a dos
 * columnas. Con foto a un lado y todo el texto al otro, la mitad de la
 * tarjeta se quedaba en blanco. */
.shn-pack {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	column-gap: clamp(1.6rem, 3vw, 2.6rem); row-gap: 1.4rem;
	align-items: start;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	background: var(--papel); border: 1px solid var(--gris-100);
	border-radius: var(--radio); box-shadow: var(--sombra-sm);
	margin-bottom: 1.8rem;
}
.shn-pack:last-child { margin-bottom: 0; }
.shn-pack__cab, .shn-pack__pie { grid-column: 1 / -1; }
.shn-pack--inv .shn-pack__foto { grid-column: 2; grid-row: 2; }
.shn-pack--inv .shn-pack__dentro { grid-column: 1; grid-row: 2; }

.shn-pack__cab h3 { margin: 0 0 .2rem; font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.shn-pack__cab p { font-size: .97rem; color: var(--gris-700); max-width: 78ch; }
.shn-pack__lema {
	font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--terra); margin-bottom: 1rem;
}

.shn-pack__foto { margin: 0; align-self: stretch; }
.shn-pack__foto img {
	width: 100%; height: 100%; min-height: 260px; object-fit: cover;
	border-radius: var(--radio-sm); box-shadow: var(--sombra);
}

.shn-pack__dentro-tit { font-weight: 700; color: var(--azul-800); margin-bottom: .5rem; }
.shn-pack__dentro .shn-card__datos { margin-bottom: 0; }
.shn-pack__dentro .shn-card__datos li { font-size: .92rem; align-items: flex-start; }

.shn-pack__pie { border-top: 1px solid var(--gris-100); padding-top: 1.3rem; }
.shn-pack__pie p { font-size: .95rem; color: var(--gris-700); }
.shn-pack__mano { font-size: 1.3rem; text-align: center; margin: 1rem 0; }
.shn-pack__coda { font-style: italic; color: var(--gris-500); }
.shn-pack__pie .shn-btns { align-items: center; margin-top: 1.1rem; }
.shn-pack__pie .shn-soon-note { width: auto; margin-top: 0; }

/* --- Cierre --- */
.shn-cierre { text-align: center; }
.shn-cierre__frase {
	font-size: clamp(1.25rem, 3vw, 1.85rem); line-height: 1.5; margin: 0;
	color: var(--terra);
}

@media (max-width: 1180px) {
	.shn-tres { grid-template-columns: 1fr 1fr; }
	.shn-tres > .shn-bloque:last-child { grid-column: 1 / -1; }
	.shn-bloque { height: auto; }
}

@media (max-width: 860px) {
	.shn-tres { grid-template-columns: 1fr; }
	.shn-kit { grid-template-columns: 1fr; }
	.shn-kit__lista { margin-bottom: 1.6rem; }
	.shn-kit__col > .shn-kit__cta:not(:first-child) { margin-top: 1.6rem; }
}

@media (max-width: 960px) {
	.shn-intro--rasgos { grid-template-columns: 1fr; }
	.shn-rasgos { max-width: 720px; margin-inline: auto; }
	.shn-pack, .shn-pack--inv { grid-template-columns: 1fr; }
	.shn-pack--inv .shn-pack__foto,
	.shn-pack--inv .shn-pack__dentro { grid-column: 1; grid-row: auto; }
	.shn-pack__foto img { min-height: 0; height: auto; }
	.shn-cinta::before { background-size: auto 62%, auto 62%; opacity: .38; }
}

@media (max-width: 700px) {
	.shn-rasgos { grid-template-columns: 1fr; }
	.shn-bloque__portada { max-width: 170px; margin-inline: auto; }
	.shn-kit__cab { grid-template-columns: 1fr; }
	.shn-kit__portada { width: 120px; }
	.shn-cinta::before { display: none; }
}


/* ==========================================================================
   31. FORMACIÓN — acceso al campus
   ========================================================================== */

.shn-aula-acceso {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: center;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-left: 5px solid var(--azul-800);
	border-radius: var(--radio); box-shadow: var(--sombra-sm);
	padding: clamp(1.5rem, 3vw, 2.4rem);
}
.shn-aula-acceso__ico {
	width: 66px; height: 66px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--crema-2); color: var(--azul-800);
}
.shn-aula-acceso__ico svg { display: block; }
.shn-aula-acceso__txt h2 { margin: .1rem 0 .6rem; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.shn-aula-acceso__txt p { margin: 0; color: var(--gris-700); font-size: .97rem; max-width: 68ch; }
.shn-aula-acceso__cta .shn-btn { white-space: nowrap; }

@media (max-width: 900px) {
	.shn-aula-acceso { grid-template-columns: auto minmax(0, 1fr); text-align: left; }
	.shn-aula-acceso__cta { grid-column: 1 / -1; }
	.shn-aula-acceso__cta .shn-btn { width: 100%; white-space: normal; }
}
@media (max-width: 560px) {
	.shn-aula-acceso { grid-template-columns: 1fr; }
	.shn-aula-acceso__ico { width: 56px; height: 56px; }
}

/* ==========================================================================
   32. OPINIONES DE LECTORES (página del libro)
   Mosaico con `columns`: las citas son de largos muy distintos y una rejilla
   normal dejaría huecos enormes debajo de las cortas.
   ========================================================================== */

.shn-opiniones { columns: 3; column-gap: 1.4rem; }

.shn-opinion {
	break-inside: avoid;
	margin: 0 0 1.4rem;
	padding: 1.7rem 1.6rem 1.4rem;
	background: var(--crema);
	border: 1px solid var(--gris-100);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
	position: relative;
	transition: transform .15s var(--ease), box-shadow .15s;
}
.shn-opinion:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

/* Las comillas de apertura, como marca de agua. */
.shn-opinion::before {
	content: '“';
	position: absolute; top: -.18em; left: .5rem;
	font-family: var(--fuente-titulo);
	font-size: 4.6rem; line-height: 1;
	color: var(--terra); opacity: .16;
	pointer-events: none;
}

.shn-opinion blockquote {
	margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
	font-family: var(--fuente-titulo);
	font-size: 1.02rem; font-style: italic; line-height: 1.55;
	color: var(--gris-900);
	position: relative;
}

.shn-opinion figcaption {
	margin-top: 1.1rem; padding-top: .9rem;
	border-top: 1px solid var(--gris-100);
}
.shn-opinion figcaption strong {
	display: block; font-family: var(--fuente-titulo);
	font-size: 1.02rem; color: var(--azul-800); line-height: 1.25;
}
.shn-opinion figcaption span {
	display: block; margin-top: .15rem;
	font-size: .76rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--terra);
}

/* Puente hacia las citas sin firma. */
.shn-opiniones__puente {
	text-align: center;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	margin: 1.4rem 0 1.8rem;
}

/* Las sueltas: más pequeñas y sobre el crema, para que no compitan con las
   firmadas y se lean como un rumor de fondo. */
.shn-opiniones--breves { columns: 3; }
.shn-opinion--breve {
	background: var(--crema-3);
	border-color: rgba(190,160,115,.32);
	box-shadow: none;
	padding: 1.3rem 1.4rem 1.2rem;
}
.shn-opinion--breve::before { font-size: 3.4rem; opacity: .14; }
.shn-opinion--breve blockquote { font-size: .95rem; color: var(--gris-700); }

@media (max-width: 1000px) {
	.shn-opiniones, .shn-opiniones--breves { columns: 2; }
}
@media (max-width: 660px) {
	.shn-opiniones, .shn-opiniones--breves { columns: 1; }
}

/* ==========================================================================
   33. CABECERA DE LA PÁGINA DEL LIBRO
   El libro es el producto: se presenta como una portada sobre un fondo cálido,
   con el precio y la compra a la vista sin bajar.
   ========================================================================== */

.shn-libro-hero {
	position: relative; overflow: hidden;
	background: var(--crema-2);
	border-bottom: 1px solid rgba(190,160,115,.3);
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
/* Un halo cálido detrás de la portada, para que el libro no flote sobre plano. */
.shn-libro-hero::before {
	content: ''; position: absolute; pointer-events: none;
	right: -6%; top: 50%; transform: translateY(-50%);
	width: min(680px, 52vw); aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217,164,65,.30), rgba(217,164,65,0) 68%);
}

.shn-libro-hero__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.shn-libro-hero h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.12; margin: 0 0 .5rem; text-wrap: balance;
}
.shn-libro-hero__sub { font-size: clamp(1.2rem, 2.4vw, 1.65rem); margin-bottom: .7rem; }
.shn-libro-hero__autora {
	font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--gris-500); margin: 0 0 1.3rem;
}
.shn-libro-hero__lead { font-size: 1.05rem; color: var(--gris-700); max-width: 52ch; }

.shn-libro-hero__datos {
	list-style: none; margin: 1.3rem 0; padding: 1rem 0;
	border-top: 1px solid rgba(160,130,90,.26);
	border-bottom: 1px solid rgba(160,130,90,.26);
	display: flex; flex-wrap: wrap; gap: .4rem 1.8rem;
	font-size: .94rem; color: var(--gris-700);
}
.shn-libro-hero__datos strong { font-family: var(--fuente-titulo); color: var(--azul-800); }

.shn-libro-hero__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.shn-libro-hero__precio {
	font-family: var(--fuente-titulo); font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 700; color: var(--terra); line-height: 1;
}
.shn-libro-hero .shn-ext-note { margin-top: 1rem; }

/* La portada: apoyada, con lomo y sombra. */
.shn-libro-hero__media { display: flex; justify-content: center; }
.shn-libro-hero__stage { position: relative; width: min(340px, 78%); }
.shn-libro-hero__stage img,
.shn-libro-hero__stage .shn-book__ph {
	width: 100%; height: auto; display: block;
	border-radius: 3px 9px 9px 3px;
	box-shadow:
		-5px 0 0 rgba(120, 86, 46, .18),
		-6px 0 0 rgba(255, 255, 255, .55),
		0 22px 44px rgba(90, 62, 34, .26);
	transform: rotate(-1.6deg);
	transition: transform .35s var(--ease);
}
.shn-libro-hero__stage:hover img { transform: rotate(0) translateY(-5px); }
/* La sombra que proyecta sobre la mesa. */
.shn-libro-hero__stage::after {
	content: ''; position: absolute; left: 6%; right: 2%; bottom: -26px; height: 26px;
	background: radial-gradient(ellipse at center, rgba(90,62,34,.26), rgba(90,62,34,0) 70%);
	pointer-events: none;
}

@media (max-width: 900px) {
	.shn-libro-hero__inner { grid-template-columns: 1fr; }
	.shn-libro-hero__media { order: -1; }
	.shn-libro-hero__stage { width: min(260px, 62%); }
	.shn-libro-hero::before { display: none; }
}

/* ==========================================================================
   34. PÁGINA DEL LIBRO — recorrido, índice y prosa
   ========================================================================== */

/* Prosa suelta, un poco más grande que el cuerpo normal. */
.shn-prosa-libro p { font-size: 1.06rem; color: var(--gris-700); }
.shn-prosa-libro__remate,
.shn-prosa-libro .shn-prosa-libro__remate {
	font-family: var(--fuente-titulo); font-style: italic;
	font-size: clamp(1.15rem, 2.2vw, 1.42rem) !important;
	color: var(--terra); line-height: 1.5;
	margin-top: 1.6rem;
}

/* --- El camino que recorre el libro --- */
.shn-camino {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
	position: relative;
}
/* El hilo que une los hitos. */
.shn-camino::before {
	content: ''; position: absolute; z-index: 0;
	left: 10%; right: 10%; top: 27px; height: 2px;
	background-image: linear-gradient(90deg, var(--terra) 60%, transparent 0);
	background-size: 12px 2px; background-repeat: repeat-x;
	opacity: .45;
}
.shn-camino__hito {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	text-align: center; padding: 0 .4rem;
}
.shn-camino__num {
	width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center; margin-bottom: .9rem;
	background: var(--terra); color: #fdf6ee;
	border: 5px solid var(--crema);
	font-family: var(--fuente-titulo); font-size: 1.15rem; font-weight: 700;
	box-shadow: var(--sombra-sm);
}
.shn-camino__hito strong {
	font-family: var(--fuente-titulo); font-size: 1.04rem; line-height: 1.25;
	color: var(--azul-800); margin-bottom: .3rem;
}
.shn-camino__sub { font-size: .86rem; color: var(--gris-500); line-height: 1.4; }

.shn-camino__meta { text-align: center; margin: 2.6rem 0 0; }
.shn-camino__meta .shn-eyebrow { justify-content: center; margin-bottom: .3rem; }
.shn-camino__meta .shn-mano { font-size: clamp(1.4rem, 3vw, 2.1rem); }

/* --- Índice --- */
.shn-indice {
	background: var(--crema); border: 1px solid var(--gris-100);
	border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.4rem);
	box-shadow: var(--sombra-sm);
}
.shn-indice__suelto {
	font-family: var(--fuente-titulo); font-style: italic;
	color: var(--gris-500); margin: 0 0 1rem;
}
.shn-indice__suelto:last-child { margin-bottom: 0; }
.shn-indice__cap { margin: 0 0 1.4rem; padding-left: 1.1rem; border-left: 2px solid var(--terra-100); }
.shn-indice__cap h3 {
	margin: 0 0 .4rem; font-size: 1.1rem; color: var(--azul-800);
	text-transform: uppercase; letter-spacing: .03em;
}
.shn-indice__cap ul { list-style: none; margin: 0; padding: 0; }
.shn-indice__cap li {
	padding: .18rem 0 .18rem 1.1rem; position: relative;
	font-size: .96rem; color: var(--gris-700);
}
.shn-indice__cap li::before {
	content: ''; position: absolute; left: 0; top: .78em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: .6;
}

/* --- Firma de tres líneas bajo un trío de tarjetas --- */
.shn-trio-firma {
	text-align: center; margin: 2.4rem 0 0;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.7;
}

/* --- Letanía «Para quienes…» --- */
.shn-letania {
	list-style: none; margin: 1.8rem 0; padding: 1.4rem 0;
	border-top: 1px solid var(--gris-100); border-bottom: 1px solid var(--gris-100);
	text-align: center;
}
.shn-letania li {
	font-family: var(--fuente-titulo); font-size: 1.12rem;
	color: var(--azul-800); line-height: 1.9;
}

@media (max-width: 1000px) {
	.shn-camino { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
	.shn-camino::before { display: none; }
}
@media (max-width: 560px) {
	.shn-camino { grid-template-columns: 1fr; }
	.shn-camino__hito { flex-direction: row; text-align: left; align-items: flex-start; gap: 1rem; }
	.shn-camino__num { margin-bottom: 0; width: 46px; height: 46px; border-width: 0; }
	.shn-camino__hito > strong, .shn-camino__sub { display: block; }
	.shn-camino__hito strong { margin-bottom: .15rem; }
}

/* ==========================================================================
   35. PASE DE DIAPOSITIVAS
   Carrusel con scroll-snap: en el móvil se pasa con el dedo sin JS, y los
   botones y el teclado sólo mueven el scroll. Sin JS sigue viéndose y
   desplazándose, así que nunca queda una caja muerta.
   ========================================================================== */

.shn-diapos { max-width: 1040px; margin-inline: auto; }

.shn-diapos__marco {
	position: relative;
	background: var(--azul-900);
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra-lg);
}

.shn-diapos__pista {
	list-style: none; margin: 0; padding: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.shn-diapos__pista::-webkit-scrollbar { display: none; }
.shn-diapos__pista:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }

.shn-diapos__dia {
	flex: 0 0 100%; margin: 0; scroll-snap-align: center;
	display: flex; align-items: center; justify-content: center;
}
.shn-diapos__dia img { width: 100%; height: auto; display: block; }

/* Flechas */
.shn-diapos__flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center;
	border: 0; cursor: pointer;
	background: rgba(253, 247, 234, .9); color: var(--azul-900);
	font-size: 1.9rem; line-height: 1; padding-bottom: .18em;
	box-shadow: var(--sombra-sm);
	transition: background .15s, opacity .15s, transform .15s;
}
.shn-diapos__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.shn-diapos__flecha--ant { left: .8rem; }
.shn-diapos__flecha--sig { right: .8rem; }
.shn-diapos__flecha[disabled] { opacity: .3; cursor: default; transform: translateY(-50%); }

/* Pantalla completa */
.shn-diapos__ampliar {
	position: absolute; top: .8rem; right: .8rem;
	width: 38px; height: 38px; border-radius: 9px;
	display: grid; place-items: center;
	border: 0; cursor: pointer; line-height: 0;
	background: rgba(253, 247, 234, .82); color: var(--azul-900);
	transition: background .15s;
}
.shn-diapos__ampliar:hover { background: #fff; }
.shn-diapos__marco:fullscreen { display: grid; place-items: center; background: var(--azul-900); }
.shn-diapos__marco:fullscreen .shn-diapos__pista { width: 100vw; }
.shn-diapos__marco:fullscreen .shn-diapos__dia img { max-height: 100vh; width: auto; max-width: 100vw; }

/* Pie: puntos y contador */
.shn-diapos__pie {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; margin-top: 1rem; flex-wrap: wrap;
}
.shn-diapos__puntos { display: flex; gap: .45rem; flex-wrap: wrap; }
.shn-diapos__puntos button {
	width: 11px; height: 11px; padding: 0; border-radius: 50%;
	border: 1px solid var(--gris-300); background: transparent;
	cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.shn-diapos__puntos button:hover { border-color: var(--terra); }
.shn-diapos__puntos button.es-activo {
	background: var(--terra); border-color: var(--terra); transform: scale(1.25);
}
.shn-diapos__cuenta {
	margin: 0; font-family: var(--fuente-titulo);
	font-size: .95rem; color: var(--gris-500); font-variant-numeric: tabular-nums;
}
.shn-diapos__cuenta strong { color: var(--azul-800); font-size: 1.15rem; }

@media (max-width: 700px) {
	.shn-diapos__flecha { width: 38px; height: 38px; font-size: 1.5rem; }
	.shn-diapos__flecha--ant { left: .4rem; }
	.shn-diapos__flecha--sig { right: .4rem; }
	.shn-diapos__pie { justify-content: center; }
}

/* ==========================================================================
   36. SOBRE MÍ
   ========================================================================== */

/* Cabecera sin foto: una sola columna, para no dejar medio héroe vacío. */
.shn-hero__inner--solo { grid-template-columns: 1fr; max-width: 62ch; }

.shn-sobre-mi__inner { align-items: center; }
.shn-sobre-mi__foto { position: relative; }
.shn-sobre-mi__foto img {
	width: 100%; height: auto; max-width: 420px; margin-inline: auto;
	display: block; border-radius: var(--radio);
	box-shadow: var(--sombra-lg);
}
.shn-sobre-mi__foto .shn-card__ph {
	display: grid; place-items: center; aspect-ratio: 4/5; max-width: 340px;
	margin-inline: auto; border-radius: var(--radio);
	background: var(--crema-2); color: var(--terra);
	font-family: var(--fuente-titulo); font-size: 5rem; opacity: .5;
}

/* La cinta cuando sólo lleva una frase. */
.shn-cinta__intro { font-size: 1.02rem; color: var(--gris-700); margin: 0; }
.shn-cinta__firma--sola {
	margin-top: 1rem; max-width: 34ch; margin-inline: auto;
	font-size: clamp(1.25rem, 2.8vw, 1.85rem); line-height: 1.5;
}

/* --- Títulos y másteres --- */
.shn-titulos {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
}
.shn-titulo {
	display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .2rem;
	align-items: start;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-radius: var(--radio); padding: 1.3rem 1.4rem;
	box-shadow: var(--sombra-sm);
	transition: transform .15s var(--ease), box-shadow .15s, border-color .15s;
}
.shn-titulo:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--terra-100); }
.shn-titulo__ico {
	grid-row: 1 / span 2;
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--terra-50); color: var(--terra);
}
.shn-titulo__ico svg { display: block; }
.shn-titulo strong {
	font-family: var(--fuente-titulo); font-size: 1.05rem;
	color: var(--azul-800); line-height: 1.3;
}
.shn-titulo > span:last-child {
	font-size: .84rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--terra);
}

.shn-titulos__pie {
	display: flex; align-items: center; justify-content: center; gap: .6rem;
	margin: 1.6rem 0 0; text-align: center;
	font-family: var(--fuente-titulo); font-style: italic;
	font-size: 1.08rem; color: var(--azul-800);
}
.shn-titulos__pie svg { color: var(--terra); flex-shrink: 0; }

/* El bloque «por qué», con la ilustración al lado. */
.shn-intro--porque { margin-bottom: 0; align-items: center; }

@media (max-width: 860px) {
	.shn-titulos { grid-template-columns: 1fr; }
	.shn-sobre-mi__foto { max-width: 340px; margin-inline: auto; }
}

/* ==========================================================================
   37. BLOG
   Cabecera con el texto de Ana, listado de entradas una detrás de otra y la
   entrada completa con estilos para todo lo que se pueda insertar desde el
   editor de bloques.
   ========================================================================== */

/* --- Cabecera del blog --- */
.shn-blog-hero { position: relative; overflow: hidden; }
.shn-blog-hero .shn-wrap { position: relative; z-index: 1; }
.shn-blog-hero::after {
	content: ''; position: absolute; pointer-events: none;
	right: -30px; bottom: 0; width: min(560px, 46vw); height: 100%;
	background: url('assets/img/paisaje.webp') right bottom / contain no-repeat;
	opacity: .34;
	-webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
	mask-image: linear-gradient(to left, #000 55%, transparent);
}
.shn-blog-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin-bottom: .6rem; }
.shn-blog-hero .terra { color: var(--terra); }
.shn-blog-hero__sub { font-size: clamp(1.15rem, 2.3vw, 1.6rem); max-width: 34ch; margin-bottom: 1rem; line-height: 1.35; }
.shn-blog-hero p { max-width: 62ch; }

/* --- Listado --- */
.shn-blog { padding-top: clamp(2.2rem, 4vw, 3.4rem); }
/* Tres columnas de tarjetas. Cada una es un flex en columna para que el
   «Leer más» quede siempre abajo aunque las entradillas midan distinto. */
.shn-entradas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: stretch; }

.shn-entrada {
	display: flex; flex-direction: column;
	background: var(--papel);
	border: 1px solid var(--gris-100);
	border-radius: var(--radio);
	padding: 1.3rem 1.3rem 1.4rem;
	box-shadow: var(--sombra-sm);
	transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.shn-entrada:hover { box-shadow: var(--sombra); transform: translateY(-2px); }

.shn-entrada__titulo {
	margin: 0 0 .4rem;
	font-size: 1.32rem;
	line-height: 1.2;
}
.shn-entrada__titulo a { color: var(--azul-800); }
.shn-entrada__titulo a:hover { color: var(--terra); }

.shn-entrada__meta {
	margin: 0 0 1rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--terra);
}
.shn-entrada__meta .shn-blog-meta__autor { color: var(--gris-500); }

.shn-entrada__foto {
	display: block; margin: 0 0 1.1rem; overflow: hidden;
	border-radius: var(--radio-sm); background: var(--crema-2);
	aspect-ratio: 3 / 2;
}
.shn-entrada__foto img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s var(--ease);
}
.shn-entrada:hover .shn-entrada__foto img { transform: scale(1.03); }

.shn-entrada__resumen {
	margin: 0 0 1.1rem;
	font-size: .96rem; line-height: 1.6; color: var(--gris-700);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

.shn-entrada__mas {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: .45rem;
	font-weight: 700; color: var(--terra);
	border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.shn-entrada__mas:hover { color: var(--terra-osc); border-bottom-color: currentColor; }
.shn-entrada__mas span[aria-hidden] { transition: transform .18s var(--ease); }
.shn-entrada__mas:hover span[aria-hidden] { transform: translateX(4px); }

/* --- La entrada completa --- */
.shn-articulo__cab { padding-bottom: 2.6rem; }
.shn-articulo__cab h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; text-wrap: balance; margin-bottom: .7rem; }
.shn-articulo__meta {
	margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--terra);
}
.shn-articulo__meta .shn-blog-meta__autor { color: var(--gris-500); }

/* Con foto: la fotografía sube y se monta sobre la banda de la cabecera. */
.shn-articulo__cab--con-foto { padding-bottom: 5.2rem; }
.shn-articulo__foto {
	margin: 0 0 2.4rem;
}
.shn-articulo__cab--con-foto + .shn-articulo__cuerpo .shn-articulo__foto { margin-top: -3.6rem; }
.shn-articulo__foto img {
	width: 100%; height: auto; display: block;
	border-radius: var(--radio); box-shadow: var(--sombra-lg);
	border: 5px solid var(--papel);
}
.shn-articulo__foto figcaption {
	margin-top: .7rem; text-align: center;
	font-size: .86rem; color: var(--gris-500); font-style: italic;
}

.shn-articulo__cuerpo { padding: 2.4rem 0 clamp(3rem, 6vw, 4.5rem); }
.shn-articulo__cab:not(.shn-articulo__cab--con-foto) + .shn-articulo__cuerpo { padding-top: 3rem; }

.shn-articulo__pie {
	margin-top: 3rem; padding-top: 1.8rem;
	border-top: 1px solid var(--gris-100);
}
.shn-articulo__paginas { justify-content: flex-start; margin-top: 2rem; }

/* --- Todo lo que se puede insertar desde el editor --- */
.shn-articulo__contenido { font-size: 1.08rem; line-height: 1.75; }
.shn-articulo__contenido > p { color: var(--gris-700); }
.shn-articulo__contenido h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-top: 2.6rem; }
.shn-articulo__contenido h3 { font-size: 1.3rem; margin-top: 2rem; }
.shn-articulo__contenido a:not(.wp-block-button__link):not(.wp-block-file__button) {
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.shn-articulo__contenido ol li::marker { color: var(--terra); font-weight: 700; }

/* Fotografías y pies de foto */
.shn-articulo__contenido figure { margin: 2rem 0; }
.shn-articulo__contenido figure img { border-radius: var(--radio-sm); height: auto; max-width: 100%; }
.shn-articulo__contenido figcaption,
.shn-articulo__contenido .wp-element-caption {
	margin-top: .6rem; text-align: center;
	font-size: .86rem; color: var(--gris-500); font-style: italic;
}

/* Galerías: sin bordes redondos duplicados y con un hueco cómodo */
.shn-articulo__contenido .wp-block-gallery { gap: .8rem; margin: 2rem 0; }
.shn-articulo__contenido .wp-block-gallery figure { margin: 0; }
.shn-articulo__contenido .wp-block-gallery img { border-radius: var(--radio-sm); }

/* Fotografías anchas: se salen un poco del texto, sin desbordar la pantalla. */
.shn-articulo__contenido .alignwide {
	width: min(1040px, calc(100vw - 40px));
	max-width: none;
	margin-left: 50%; transform: translateX(-50%);
}

/* Citas */
.shn-articulo__contenido blockquote,
.shn-articulo__contenido .wp-block-quote {
	margin: 2.2rem 0; padding: 1.4rem 1.7rem;
	background: var(--crema-2); border: 0; border-left: 4px solid var(--terra);
	border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	font-family: var(--fuente-titulo); font-style: italic;
	font-size: 1.2rem; line-height: 1.55; color: var(--azul-800);
}
.shn-articulo__contenido blockquote p { margin: 0 0 .6rem; color: inherit; }
.shn-articulo__contenido blockquote p:last-of-type { margin-bottom: 0; }
.shn-articulo__contenido blockquote cite,
.shn-articulo__contenido .wp-block-quote cite {
	display: block; margin-top: .8rem;
	font-family: var(--fuente); font-style: normal;
	font-size: .8rem; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--terra);
}

/* Separador */
.shn-articulo__contenido hr,
.shn-articulo__contenido .wp-block-separator {
	border: 0; height: 1px; margin: 2.8rem auto; max-width: 140px;
	background: var(--terra); opacity: .5;
}

/* Documentos descargables: bloque «Archivo» del editor */
.shn-articulo__contenido .wp-block-file {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem 1.4rem; flex-wrap: wrap;
	margin: 2rem 0; padding: 1.2rem 1.4rem;
	background: var(--papel); border: 1px solid var(--gris-100);
	border-left: 4px solid var(--terra);
	border-radius: var(--radio-sm); box-shadow: var(--sombra-sm);
	font-size: 1rem;
}
.shn-articulo__contenido .wp-block-file > a:first-child {
	font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.08rem;
	color: var(--azul-800); text-decoration: none; overflow-wrap: anywhere;
}
.shn-articulo__contenido .wp-block-file > a:first-child:hover { color: var(--terra); }
.shn-articulo__contenido .wp-block-file .wp-block-file__button {
	display: inline-flex; align-items: center; gap: .4rem;
	background: var(--terra); color: #fdf6ee;
	border-radius: var(--radio-sm); padding: .65rem 1.2rem;
	font-size: .95rem; font-weight: 600; text-decoration: none; margin: 0;
	transition: background .15s, transform .12s;
}
.shn-articulo__contenido .wp-block-file .wp-block-file__button::before { content: '↓'; font-weight: 800; }
.shn-articulo__contenido .wp-block-file .wp-block-file__button:hover { background: var(--terra-clar); color: #fff; transform: translateY(-2px); }

/* Botones del editor */
.shn-articulo__contenido .wp-block-button__link {
	background: var(--terra); color: #fdf6ee;
	border-radius: var(--radio-sm); padding: .8rem 1.5rem;
	font-weight: 600; text-decoration: none;
}
.shn-articulo__contenido .wp-block-button__link:hover { background: var(--terra-clar); color: #fff; }
.shn-articulo__contenido .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--terra); border: 2px solid var(--terra);
}

/* Tablas del editor */
.shn-articulo__contenido .wp-block-table { margin: 2rem 0; overflow-x: auto; }
.shn-articulo__contenido .wp-block-table table { margin: 0; }
.shn-articulo__contenido .wp-block-table figcaption { text-align: center; }

@media (max-width: 1000px) {
	.shn-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.shn-blog-hero::after { display: none; }
	.shn-entradas { grid-template-columns: 1fr; }
	.shn-entrada { padding: 1.2rem; }
	.shn-articulo__cab--con-foto { padding-bottom: 4.2rem; }
	.shn-articulo__cab--con-foto + .shn-articulo__cuerpo .shn-articulo__foto { margin-top: -3rem; }
	.shn-articulo__contenido .wp-block-file { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Quiero ser HN (V48): hero con el camino, subescalas y cierre
   ========================================================================= */
.shn-hero__media--camino img { mix-blend-mode: multiply; max-width: 560px; margin-left: auto; display: block; }
.shn-hero--camino .shn-hero__lead { max-width: 52ch; margin-bottom: 1rem; }
.shn-hero--camino .shn-btns { margin-top: 1.6rem; }
.shn-subescala__head { display: flex; flex-direction: column; gap: .3rem; }
.shn-subescala__lema { font-family: var(--fuente-mano, inherit); font-style: italic; color: #fdf7ea; opacity: .92; font-size: 1rem; line-height: 1.3; }
.shn-subescala__body p + p { margin-top: -.35rem; }
.shn-chips { list-style: none; margin: auto 0 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.shn-chips li { background: var(--crema-2); border: 1px solid var(--gris-100); color: var(--gris-700); font-size: .8rem; padding: .28rem .7rem; border-radius: 99px; }
.shn-empezamos { background: var(--crema); padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.shn-empezamos__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.shn-empezamos__inner > div:first-child { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); align-self: center; }
.shn-empezamos h2 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--azul-800); margin: 0 0 .8rem; }
.shn-empezamos h2 .terra { color: var(--terra); }
.shn-empezamos p { max-width: 46ch; color: var(--gris-700); font-size: 1.05rem; margin-bottom: 1.6rem; }
.shn-empezamos__ilu img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; margin-left: auto; max-width: 560px; }
@media (max-width: 800px) {
	.shn-empezamos__inner { grid-template-columns: 1fr; }
	.shn-empezamos__ilu { order: -1; }
	.shn-hero__media--camino img { margin-inline: auto; }
}

/* V54 · remate del libro: dos frases centradas, una bajo otra */
.shn-prosa-libro__remate{text-align:center}
.shn-prosa-libro__remate span{display:block}

/* V57+: avisos desplegables en Mi área */
.shn-aviso summary { list-style: none; cursor: pointer; }
.shn-aviso summary::-webkit-details-marker { display: none; }
.shn-aviso__cuerpo { padding: 1rem 1.25rem 1.25rem; margin-top: -.25rem; background: var(--shn-surface, #fffdf8); border: 1px solid var(--terra-100, #eadfce); border-top: 0; border-radius: 0 0 12px 12px; line-height: 1.65; }
.shn-aviso[open] > summary.shn-list__item { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }