/* ============================================================
MINDUP · SISTEMA DE DISEÑO v3
------------------------------------------------------------
COMÚN A TODAS LAS PÁGINAS Y A TODAS LAS WEBS.
Va UNA sola vez en:
Elementor → Ajustes del sitio → CSS personalizado
(o mejor: en el style.css del child theme)
══ REGLA DE MARCA · UN SOLO NARANJA ══
#FF7900 es el único naranja del sistema. Aparece UNA vez,
en --orange. Todo lo demás se deriva de él:
· tonos claros → el mismo naranja con transparencia
· tonos oscuros → filter: brightness()
Nunca escribas otro hexadecimal naranja, ni aquí ni en las
páginas. Si un día cambia la marca, se cambia esa línea
y cambia toda la web.
============================================================ */
/* ---------- 0. LA TIPOGRAFIA ---------- */
/* Plus Jakarta Sans, alojada aquí y no en los servidores de Google.
Motivo principal: privacidad. Cargarla desde Google hacía que la
dirección IP de cada visitante llegara a un tercero solo por abrir
la página, y en una web sanitaria eso conviene evitarlo si se puede.
Se puede, y cuesta 26,7 KB.
De paso se ahorra una cadena de dos viajes: antes el navegador pedía
un CSS a fonts.googleapis.com y solo al leerlo descubría que tenía
que ir a fonts.gstatic.com a por el archivo.
Es una FUENTE VARIABLE: este único archivo cubre los cinco pesos que
usa la web, de 400 a 800. Por eso hay una sola declaración con un
rango de peso y no cinco declaraciones sueltas.
El unicode-range es el del subconjunto «latin» de Google e incluye
todo lo que necesita el español: á é í ó ú ñ ü ¿ ¡ « ». Sin él, el
navegador intentaría usar esta fuente también para alfabetos que no
contiene. */
@font-face{
font-family:"Plus Jakarta Sans";
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url(fuentes/plus-jakarta-sans-latin.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- 1. TOKENS ---------- */
:root{
/* ══ EL NARANJA. El único. ══ */
--orange:#FF7900;
--orange-rgb:255,121,0;
/* Derivados del MISMO naranja (transparencia, no otro color) */
--orange-soft:rgba(var(--orange-rgb),.07); /* fondos de sección */
--orange-tint:rgba(var(--orange-rgb),.14); /* fondos de icono */
--orange-line:rgba(var(--orange-rgb),.30); /* bordes */
--orange-veil:rgba(var(--orange-rgb),.18); /* subrayados */
/* Neutros cálidos */
--ink:#141210; /* titulares · 18,7:1 */
--ink-2:#1E1B18; /* superficies oscuras secundarias */
--body:#55504A; /* texto · 7,98:1 sobre blanco */
--muted:#756E66; /* texto terciario · 5,03:1 */
--line:#EAE4DD;
--line-2:#F3EEE8;
--cream:#FBF8F4;
--white:#FFFFFF;
/* Tipografía */
--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
/* Ritmo */
--wrap:1180px;
--gutter:24px;
--sec:clamp(72px,7.5vw,112px);
/* Radios */
--r-sm:12px;
--r:18px;
--r-lg:26px;
--r-xl:34px;
--r-pill:100px;
/* Sombras en dos capas */
--sh-sm:0 1px 2px rgba(20,18,16,.05), 0 4px 12px rgba(20,18,16,.05);
--sh:0 2px 4px rgba(20,18,16,.04), 0 14px 30px rgba(20,18,16,.08);
--sh-lg:0 4px 8px rgba(20,18,16,.05), 0 28px 56px rgba(20,18,16,.12);
/* Verde oficial de WhatsApp. No es "otro naranja": es el color
de marca de un tercero, igual que el logo de Google. */
--wa:#25D366;
--wa-rgb:37,211,102;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- 2. RESET ---------- */
/* El box-sizing sí es global: es inocuo y Elementor hace lo mismo.
El vaciado de márgenes NO: aplicado a todo el documento descoloca
cualquier página que no sea nuestra. Se limita a lo que montamos
nosotros — la cabecera (.mindup-header) y el resto (.mindup). */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0} /* el navegador le pone 8px al body: fuera */
:where(.mindup-header,.mindup),
:where(.mindup-header,.mindup) :where(*,*::before,*::after){margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
font-family:var(--font);
background:var(--white);
color:var(--body);
font-size:17px;
line-height:1.72;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--orange-tint);color:var(--ink)}
/* ---------- 3. TIPOGRAFÍA ---------- */
:where(.mindup-header,.mindup) :where(h1,h2,h3,h4,h5){
color:var(--ink);
font-weight:700;
letter-spacing:-.028em;
line-height:1.14;
text-wrap:balance;
}
:where(.mindup) h1{font-size:clamp(37px,4.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1.06}
:where(.mindup) h2{font-size:clamp(29px,3.5vw,45px);line-height:1.1}
:where(.mindup) h3{font-size:clamp(19px,1.5vw,21px);line-height:1.25;letter-spacing:-.02em}
:where(.mindup) h4{font-size:17px;letter-spacing:-.015em}
:where(.mindup) p{text-wrap:pretty}
:where(.mindup) :where(strong,b){color:var(--ink);font-weight:600}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.62;color:var(--body)}
.small{font-size:15px}
.txt-orange{color:var(--orange)}
/* Subrayado naranja de marca */
/* Resaltado de marca · ÚNICO estilo de subrayado del sistema.
Trazo de rotulador que cubre el tercio inferior del texto.
box-decoration-break permite que abarque varias palabras y
siga bien aunque el titular parta de línea. */
.hl{
color:var(--orange);
background:linear-gradient(180deg,transparent 60%,var(--orange-veil) 60%);
box-decoration-break:clone;-webkit-box-decoration-break:clone;
padding:0 .06em;
}
/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:880px;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--sec)}
.sec-tight{padding-block:calc(var(--sec) * .62)}
.head{max-width:730px;margin:0 auto clamp(44px,5vw,62px);text-align:center}
.head h2{margin:18px 0 16px}
.head p{font-size:clamp(17px,1.4vw,19px)}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
/* ============================================================
5. BIBLIOTECA DE COMPONENTES
Todo lo de aquí se reutiliza en cualquier página.
============================================================ */
/* 5.1 · Etiqueta / eyebrow ---------------------------------- */
.tag{
display:inline-flex;align-items:center;gap:9px;
background:var(--orange-soft);color:var(--orange);
font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
padding:8px 17px;border-radius:var(--r-pill);
border:1px solid var(--orange-line);
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.tag-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff}
.tag-light::before{background:var(--orange)}
/* 5.2 · Botones --------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font);font-weight:700;font-size:16px;line-height:1;
padding:17px 30px;border-radius:var(--r-pill);
border:2px solid transparent;cursor:pointer;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),
filter .2s,background .2s,border-color .2s,color .2s;
will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* Primario. El hover OSCURECE el mismo naranja, no usa otro color. */
/* Planos: sin sombra, el hover solo oscurece y eleva. */
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{filter:brightness(.90);transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--white)}
.btn-outline:hover,
.elementor-pagination .page-numbers:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--orange)}
.btn-white:hover{transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.32);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(.93);transform:translateY(-2px)}
.btn-wa svg{width:20px;height:20px}
.btn-wa:hover svg{transform:none}
.btn-sm{padding:13px 24px;font-size:15px}
.btn-lg{padding:20px 38px;font-size:17px}
/* 5.3 · Enlace flecha --------------------------------------- */
.go{display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-weight:700;font-size:15px}
.go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.go:hover svg{transform:translateX(4px)}
/* 5.3b · Elevación al pasar el ratón
Una sola regla para todas las tarjetas que "levantan".
------------------------------------------------------------ */
.member:hover,
.post:hover,
.feature:hover,
.elementor-posts--skin-cards .elementor-post:hover .elementor-post__card{
transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--orange-line);
}
/* 5.4 · Tarjeta base ---------------------------------------- */
.card{
background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--orange-line)}
.card-pad{padding:30px 28px}
/* 5.4b · Estado activo: pestaña, categoría, página actual --- */
.tab[aria-selected="true"],
.cat-nav a.on,
.elementor-pagination .page-numbers.current{
background:var(--orange);border-color:var(--orange);color:#fff;
}
/* 5.4c · Imagen que cubre su contenedor --------------------- */
.post.has-thumb .post-thumb img,
.gallery img,
.elementor-posts--skin-cards .elementor-post__thumbnail img{
width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);
}
/* 5.5 · Icono cuadrado -------------------------------------- */
.ic{
width:52px;height:52px;border-radius:var(--r-sm);
background:var(--orange-soft);border:1px solid var(--orange-line);
display:grid;place-items:center;flex:none;
}
.ic svg{width:24px;height:24px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-solid,
.talk-card:hover .tic{background:var(--orange);border-color:var(--orange)}
.ic-solid svg{stroke:#fff}
/* 5.6 · Check en círculo ------------------------------------ */
.tick{width:25px;height:25px;border-radius:50%;background:var(--orange);display:grid;place-items:center;flex:none;margin-top:2px}
.tick svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* 5.7 · Estrellas ------------------------------------------- */
.stars{color:var(--orange);letter-spacing:1.5px;font-size:15px;line-height:1}
/* 5.8 · Superficies ----------------------------------------- */
.bg-cream{background:var(--cream)}
.bg-soft{background:var(--orange-soft)}
.bg-dark{background:var(--ink);color:rgba(255,255,255,.74)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark strong{color:#fff}
.bg-orange{background:var(--orange);color:rgba(255,255,255,.94)}
.bg-orange h1,.bg-orange h2,.bg-orange h3,.bg-orange strong{color:#fff}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* 5.9 · Píldoras -------------------------------------------- */
.pillars{display:flex;gap:9px;flex-wrap:wrap}
.pillars span{border:1px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:9px 17px;font-size:14px;font-weight:600;color:var(--ink)}
.pillars-center{justify-content:center}
/* 5.10 · Lista de checks ------------------------------------ */
.checks{list-style:none;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;font-size:16px;line-height:1.5;transition:border-color .25s,transform .25s var(--ease)}
.checks li:hover{border-color:var(--orange-line);transform:translateX(4px)}
/* 5.11 · Acordeón / FAQ ------------------------------------- */
.acc details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;background:#fff;transition:border-color .25s,box-shadow .25s}
.acc details[open]{border-color:var(--orange-line);background:var(--cream);box-shadow:var(--sh-sm)}
.acc summary{list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;color:var(--ink);font-size:16.5px;line-height:1.4;display:flex;gap:16px;align-items:center;position:relative}
.acc summary::-webkit-details-marker{display:none}
/* Signo desnudo, sin círculo: el peso lo lleva la tarjeta. */
.acc summary::after{
content:"+";margin-left:auto;flex:none;
color:var(--orange);font-size:25px;font-weight:500;line-height:1;
width:24px;text-align:center;
transition:transform .22s var(--ease),opacity .22s;
}
.acc summary:hover::after{transform:scale(1.15)}
.acc details[open] summary::after{content:"−"}
.acc .ans{padding:0 22px 21px;font-size:16px;line-height:1.68}
.acc .ans a{color:var(--orange);font-weight:600}
/* 5.12 · Pestañas ------------------------------------------- */
.tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.tab{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:13px 24px;font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .25s var(--ease);display:flex;align-items:center;gap:10px}
.tab .n{width:23px;height:23px;border-radius:50%;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;font-size:12px;font-weight:800;transition:all .25s}
.tab:hover{border-color:var(--orange);transform:translateY(-2px)}
.tab[aria-selected="true"] .n{background:rgba(255,255,255,.26);color:#fff}
.pane{display:none;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(32px,4vw,50px);max-width:900px;margin:0 auto}
.pane.on{display:block;animation:paneIn .4s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pane h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:16px}
.pane p+p{margin-top:14px}
/* 5.14 · Reseña --------------------------------------------- */
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:27px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rev:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rev p{font-size:15.5px;line-height:1.65;margin:13px 0 20px;flex:1}
.rev .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.rev .av{width:38px;height:38px;border-radius:50%;background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.rev .who b{display:block;color:var(--ink);font-size:14.5px}
/* 5.15 · Miembro del equipo --------------------------------- */
.member{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.member .avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 15px;display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--orange);background:var(--orange-soft);border:1px solid var(--orange-line);letter-spacing:-.03em;overflow:hidden}
.member h3{font-size:17px;margin-bottom:5px}
.member .role{font-size:13.5px;line-height:1.45;color:var(--body)}
.member .col{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px}
/* 5.16 · Tarjeta de precio ---------------------------------- */
.fee{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.fee:hover{border-color:var(--orange-line);transform:translateY(-4px);box-shadow:var(--sh)}
.fee h3{font-size:17px;margin-bottom:12px}
.fee .price{font-size:38px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
.fee .price span{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.fee .dur{font-size:14px;color:var(--muted);margin-top:9px}
/* 5.17 · Aviso destacado ------------------------------------ */
.note{background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:var(--r);padding:20px 24px;font-size:15px;line-height:1.6}
.note strong{color:var(--orange)}
/* 5.18 · Tarjeta de artículo -------------------------------- */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
/* Variante con imagen destacada arriba */
.post.has-thumb{padding:0;overflow:hidden;position:relative}
.post.has-thumb .post-thumb{aspect-ratio:16/9;background:var(--orange-soft);overflow:hidden;display:block}
.post.has-thumb:hover .post-thumb img{transform:scale(1.045)}
/* Con foto, la categoría va de chip encima, igual que en el listado del blog */
.post.has-thumb .post-body .cat{
position:absolute;top:14px;left:14px;z-index:2;margin:0;
background:var(--orange);color:#fff;letter-spacing:.06em;
padding:6px 12px;border-radius:var(--r-pill);line-height:1.4;
}
.post.has-thumb .post-body h3{flex:1}
.post .cat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:11px}
.post h3{font-size:18px;line-height:1.32;margin-bottom:10px;flex:1}
.post .go{margin-top:16px}
/* 5.19 · Cita destacada
Composición centrada, sin ilustración: manda la tipografía.
------------------------------------------------------------ */
.quote-box{background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:var(--r-xl);padding:clamp(44px,5.5vw,76px) clamp(30px,5vw,68px);text-align:center;margin:0}
.quote-box .qmark{font-size:clamp(52px,6vw,76px);color:var(--orange);line-height:.5;font-weight:800;display:block;margin-bottom:clamp(20px,2.4vw,30px)}
/* 760px = cada mitad de la frase entra en una línea en escritorio */
.quote-box blockquote{border:0;padding:0;margin:0 auto;max-width:760px}
.quote-box blockquote p{font-size:clamp(22px,3.4vw,42px);line-height:1.22;letter-spacing:-.032em;font-weight:700;color:var(--ink);margin:0}
.quote-box blockquote span{display:block}
.quote-box blockquote span + span{margin-top:.16em}
.quote-box em{font-style:normal;color:var(--orange)}
.quote-box figcaption{margin-top:clamp(22px,2.4vw,30px);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
/* 5.20 · Banda rotatoria ------------------------------------ */
.rotator{background:var(--ink);padding:clamp(52px,5.5vw,72px) 0;text-align:center;position:relative;overflow:hidden}
.rotator::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;height:340px;background:radial-gradient(ellipse,rgba(var(--orange-rgb),.16),transparent 70%);pointer-events:none}
.rotator h2{color:#fff;font-size:clamp(25px,3.3vw,40px);font-weight:700;position:relative}
.rot{color:var(--orange);display:inline-block;min-width:9ch;text-align:left;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rot.out{opacity:0;transform:translateY(-8px)}
/* 5.21 · CTA final (fondo claro) ----------------------------- */
.cta{background:var(--orange-soft);border-block:1px solid var(--orange-line);text-align:center;padding:clamp(72px,7.5vw,104px) 0}
.cta h2{max-width:18ch;margin:20px auto 16px}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta p{max-width:54ch;margin:0 auto;font-size:clamp(17px,1.4vw,19px)}
.cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-tel{margin-top:18px;font-size:15px;color:var(--muted)}
.cta-tel a{color:var(--orange);font-weight:700}
.cta-reassure{display:flex;gap:14px 30px;justify-content:center;flex-wrap:wrap;margin-top:36px;padding-top:28px;border-top:1px solid var(--orange-line)}
.cta-reassure span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--body)}
.cta-reassure svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 5.22 · Hero de página ------------------------------------- */
.hero{position:relative;padding:clamp(56px,6vw,84px) 0 clamp(72px,7vw,104px);overflow:hidden;background:linear-gradient(168deg,var(--orange-soft) 0%,rgba(var(--orange-rgb),.03) 46%,var(--white) 100%)}
.hero::before{content:"";position:absolute;top:-220px;right:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(var(--orange-rgb),.11),transparent 66%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,68px);align-items:center;position:relative}
.hero h1{margin:20px 0 20px}
.hero .lede{max-width:47ch}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero-media{position:relative}
/* ![]()
real, no fondo CSS: se descubre antes, admite fetchpriority
y srcset, cuenta como LCP y Google la indexa. */
/* 4/4.5 = la proporción exacta de la foto (1000x1125): sin recorte. */
.hero-photo{aspect-ratio:4/4.5;width:100%;border-radius:var(--r-xl);object-fit:cover;object-position:center;box-shadow:var(--sh-lg);background:var(--orange-tint);display:block}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);pointer-events:none}
.hero-simple{padding-block:clamp(48px,5vw,72px) clamp(40px,4vw,60px);text-align:center}
.hero-simple .lede{max-width:60ch;margin-inline:auto}
/* 5.23 · Prueba social del hero ----------------------------- */
.trust{display:flex;align-items:center;gap:15px;margin-top:34px;flex-wrap:wrap}
.faces{display:flex;flex:none}
.faces span{width:42px;height:42px;border-radius:50%;border:3px solid #fff;background:var(--orange-tint);margin-left:-13px;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--orange);box-shadow:var(--sh-sm)}
.faces span:first-child{margin-left:0}
.trust-txt{font-size:14.5px;line-height:1.45}
.trust-txt b{color:var(--ink)}
/* 5.24 · Tarjeta flotante ----------------------------------- */
.float{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:12px;max-width:260px}
.float .fic{width:38px;height:38px;border-radius:11px;background:var(--orange-soft);display:grid;place-items:center;flex:none}
.float .fic svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.float b{display:block;color:var(--ink);font-size:14.5px;line-height:1.25;font-weight:700}
.float small{font-size:12.5px;color:var(--muted);line-height:1.3;display:block}
/* 5.25 · Banda de credenciales ------------------------------ */
.creds{border-block:1px solid var(--line);background:var(--white)}
.creds .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-block:22px;flex-wrap:wrap}
.cred{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.cred svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cred b{display:block;color:var(--ink);font-size:14px;font-weight:700}
/* 5.26 · Tarjeta de servicio -------------------------------- */
/* Las tarjetas de servicio.
Antes abrían con una banda de proporción 16:8 en crema naranja:
en rejilla de tres, 179 px de alto para un icono de 50 px. El
icono no se veía más grande, se veía más lejos. Ahora entra en el
cuerpo de la tarjeta con el mismo .ic que usa el resto de la web,
y la tarjeta adelgaza unos 130 px sin perder nada. */
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--orange-line)}
/* El icono ya no es el protagonista: marca de qué va la tarjeta y se
aparta. Al pasar por encima se rellena de naranja, que es el mismo
gesto que hacen las tarjetas de contacto. */
.svc-card .ic{margin-bottom:16px;transition:background .3s var(--ease),border-color .3s var(--ease)}
.svc-card .ic svg{transition:stroke .3s var(--ease)}
.svc-card:hover .ic{background:var(--orange);border-color:var(--orange)}
.svc-card:hover .ic svg{stroke:#fff}
.svc-body,
.post.has-thumb .post-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.svc-body h3{margin-bottom:8px}
.svc-body p{font-size:15.5px;line-height:1.6;flex:1}
/* «Saber más» se separa del texto con un filete: cierra la tarjeta y
deja claro dónde acaba la descripción y dónde empieza la acción. */
.svc-body .go{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.svc-card:hover .go svg{transform:translateX(4px)}
/* 5.27 · Tarjeta de ventaja --------------------------------- */
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.feature .ic{margin-bottom:19px}
.feature h3{margin-bottom:9px;font-size:19px}
.feature p{font-size:15.5px;line-height:1.62}
/* 5.28 · Canal de contacto ---------------------------------- */
.talk{background:var(--orange-soft);border-block:1px solid var(--orange-line)}
.talk-card{background:#fff;border:1px solid var(--orange-line);border-radius:var(--r-lg);padding:34px 28px;text-align:center;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.talk-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--orange)}
.talk-card .tic{width:54px;height:54px;border-radius:16px;background:var(--orange-soft);border:1px solid var(--orange-line);display:grid;place-items:center;margin:0 auto 18px;transition:background .3s,border-color .3s}
.talk-card .tic svg{width:24px;height:24px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.talk-card:hover .tic svg{stroke:#fff}
.talk-card h3{margin-bottom:5px}
.talk-card p{font-size:14.5px}
.talk-card b{display:block;font-size:19px;margin-top:11px;color:var(--orange);font-weight:800;letter-spacing:-.02em}
.talk-note{text-align:center;margin-top:30px;font-size:15px}
.talk-note a{color:var(--orange);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* 5.29 · Cabecera de opiniones ------------------------------ */
.g-top{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:42px}
.g-score{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 28px;display:flex;align-items:center;gap:18px;box-shadow:var(--sh-sm);flex:none}
.g-score .n{font-size:44px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.04em}
.g-score small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
/* 5.30 · Rejillas de dos columnas --------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,60px);align-items:center}
.split-a{grid-template-columns:.82fr 1.18fr;align-items:start}
.split-b{grid-template-columns:.8fr 1.2fr;align-items:start}
.split p+p{margin-top:17px}
/* 5.31 · Tira de cifras ------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-sm)}
.stat{padding:28px 22px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat > b{display:block;font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--orange);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat > span{display:block;margin-top:9px;font-size:13.5px;color:var(--muted);font-weight:600;line-height:1.35}
/* 5.32 · Galería de fotos ------------------------------------ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--orange-soft);border:1px solid var(--line);aspect-ratio:4/3;position:relative}
.gallery figure.tall{grid-row:span 2;aspect-ratio:4/6.3}
.gallery figure.wide{grid-column:span 2;aspect-ratio:8/3}
.gallery figure:hover img{transform:scale(1.04)}
.gallery .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.45}
/* 5.33 · Etiquetas pequeñas ---------------------------------- */
.tags-sm{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.tags-sm span{font-size:11.5px;font-weight:600;color:var(--body);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;line-height:1.45}
.member .tags-sm{justify-content:center}
/* 5.33b · Rejilla de equipo (nunca baja de 2 columnas) -------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 5.34 · Banda de instituciones ------------------------------ */
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos span{font-size:13.5px;font-weight:600;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px}
.logos-center{justify-content:center}
/* 5.35 · Foto real dentro del avatar ------------------------- */
/* ── Retratos del equipo ──
Tratamiento idéntico para las nueve fotos: mismo paso a blanco
y negro, mismo contraste y mismo punto de blanco, para que se
lean como una serie. El CSS iguala el TONO; lo que no puede es
corregir la exposición de cada foto por separado ni subir la
resolución (todas son 350x350 de origen). */
.member .avatar img,
.avatar-lg img,
.pro-cara img,
.quien-card .avatar img,
.author-box .av img{
width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
filter:grayscale(1) contrast(1.08) brightness(1.04) saturate(0);
}
.avatar-lg{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--orange-soft);border:1px solid var(--orange-line);display:block}
/* 5.36 · Navegación por categorías --------------------------- */
.cat-nav{display:flex;flex-wrap:wrap;gap:9px}
.cat-nav-center{justify-content:center}
.cat-nav a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 17px;font-size:14px;font-weight:600;color:var(--ink);transition:transform .22s var(--ease),border-color .22s,color .22s,box-shadow .22s}
.cat-nav a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.cat-nav em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.cat-nav a:hover em{color:var(--orange)}
.cat-nav a.on em{color:rgba(255,255,255,.75)}
/* 5.37 · LISTADO DE ARTÍCULOS
Re-estila el widget "Entradas" (skin Tarjetas) de Elementor Pro
para que use el sistema MindUp. No hay que tocar el widget:
basta con activar la paginación y subir las entradas por página.
------------------------------------------------------------ */
.elementor-posts--skin-cards.elementor-grid,
.elementor-posts--skin-cards .elementor-posts-container{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.elementor-posts--skin-cards .elementor-grid-item{margin:0;list-style:none}
.elementor-posts--skin-cards .elementor-post__card{
position:relative;background:#fff;border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
height:100%;box-shadow:none;margin:0;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.elementor-posts--skin-cards .elementor-post__thumbnail__link{display:block;overflow:hidden}
.elementor-posts--skin-cards .elementor-post__thumbnail{aspect-ratio:16/9;padding:0;border-radius:0;overflow:hidden;background:var(--orange-soft)}
.elementor-posts--skin-cards .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.045)}
/* El distintivo de categoría: el de las tarjetas del blog y el de
la imagen destacada del artículo son el mismo, literalmente la
misma regla, para que no puedan separarse con el tiempo. */
.elementor-posts--skin-cards .elementor-post__badge,
.art-badge{
z-index:1;
position:absolute;top:14px;right:14px;left:auto;margin:0;
background:var(--orange);color:#fff;
font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:6px 12px;border-radius:var(--r-pill);line-height:1.4;
}
.elementor-posts--skin-cards .elementor-post__text{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;margin:0}
.elementor-posts--skin-cards .elementor-post__title{font-family:var(--font);font-size:18px;line-height:1.32;letter-spacing:-.02em;margin:0 0 10px;font-weight:700}
.elementor-posts--skin-cards .elementor-post__title a{color:var(--ink);font-weight:700}
.elementor-posts--skin-cards .elementor-post:hover .elementor-post__title a{color:var(--orange)}
.elementor-posts--skin-cards .elementor-post__meta-data{font-size:13px;color:var(--muted);margin:0 0 9px;border:0;padding:0}
.elementor-posts--skin-cards .elementor-post__excerpt{margin:0;flex:1}
.elementor-posts--skin-cards .elementor-post__excerpt p{font-family:var(--font);font-size:15px;line-height:1.6;color:var(--body);margin:0}
.elementor-posts--skin-cards .elementor-post__read-more-wrapper{margin-top:17px}
.elementor-posts--skin-cards .elementor-post__read-more{
display:inline-flex;align-items:center;gap:7px;
color:var(--orange);font-weight:700;font-size:15px;font-family:var(--font);
}
.elementor-posts--skin-cards .elementor-post__read-more::after{content:"→";transition:transform .25s var(--ease)}
/* Área táctil mínima en móvil */
@media(max-width:680px){
.elementor-posts--skin-cards .elementor-post__read-more{min-height:44px}
}
.elementor-posts--skin-cards .elementor-post:hover .elementor-post__read-more::after{transform:translateX(4px)}
/* Paginación del widget */
.elementor-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:44px}
.elementor-pagination .page-numbers{
display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
font-size:15px;font-weight:700;color:var(--ink);
transition:border-color .22s,color .22s,background .22s,transform .22s var(--ease);
}
.elementor-pagination .page-numbers.dots{border-color:transparent;background:none}
/* ============================================================
5.38 · ARTÍCULO · cabecera
============================================================ */
.art-head{padding-block:clamp(34px,4vw,56px) clamp(24px,2.6vw,36px)}
.art-crumbs{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.art-crumbs a{color:var(--muted)}
.art-crumbs a:hover{color:var(--orange)}
.art-crumbs span{margin-inline:7px;opacity:.5}
.art-head h1{font-size:clamp(30px,4vw,48px);line-height:1.08;margin:18px 0 20px;text-transform:none}
.art-head .lede{max-width:62ch}
/* La portada vive dentro de la columna del artículo, para que
el índice quede a su altura y no debajo. */
.art-main{min-width:0}
/* La categoría se sale de la cabecera y se posa sobre la imagen,
exactamente igual que en las tarjetas del blog: mismo tamaño,
mismo peso, mismo naranja macizo. Así la categoría se comporta
igual en toda la web y la fila de arriba se queda entera para
la firma. Si una entrada no tiene imagen destacada, single.php
devuelve el rótulo a la cabecera. */
.art-cover{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--orange-soft);aspect-ratio:16/9;margin:0 0 clamp(30px,3.4vw,44px)}
.art-sin-foto{margin:0 0 clamp(24px,2.6vw,32px)}
.art-cover img{width:100%;height:100%;object-fit:cover}
/* 5.39 · ARTÍCULO · maquetación ------------------------------ */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:clamp(34px,4vw,64px);align-items:start}
.art-aside{position:sticky;top:100px;display:grid;gap:16px}
/* Índice automático (lo genera el script del pie) */
.toc{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:#fff}
.toc .toc-kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc}
.toc a{display:block;padding:8px 10px 8px 30px;border-radius:10px;font-size:14.5px;line-height:1.4;color:var(--body);position:relative;transition:background .18s,color .18s}
.toc a::before{content:counter(toc);position:absolute;left:9px;top:9px;font-size:12px;font-weight:800;color:var(--orange);opacity:.6}
.toc a.on{background:var(--orange-soft);color:var(--orange);font-weight:700}
.toc a.on::before{opacity:1}
/* Tarjeta lateral de contacto */
.aside-cta{border:1px solid var(--orange-line);background:var(--orange-soft);border-radius:var(--r-lg);padding:24px}
.aside-cta .aside-title{font-size:17px;letter-spacing:-.02em;margin-bottom:8px;text-transform:none;color:var(--ink)}
.aside-cta p{font-size:14.5px;line-height:1.55;margin-bottom:16px}
.aside-cta .btn{width:100%}
/* 5.72 · ACTIVIDADES YA CELEBRADAS
------------------------------------------------------------
Los talleres y grupos terminaron, pero el contenido explica bien
de qué iban y está enlazado desde fuera, así que no se retira: se
marca. La etiqueta va en gris y no en naranja a propósito, para
que se lea «esto ya pasó» de un vistazo y nadie rellene un
formulario de una convocatoria de 2023.
------------------------------------------------------------ */
.tag-fin{background:var(--line-2);border-color:var(--line);color:var(--muted)}
.tag-fin::before{background:var(--muted)}
.aviso-fin{
display:flex;align-items:flex-start;gap:16px;
background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
padding:20px 24px;margin-top:28px;text-align:left;
max-width:62ch;margin-inline:auto;
}
.aviso-fin .ic{width:42px;height:42px;border-radius:var(--r-sm);flex:none;background:var(--white);border:1px solid var(--line);display:grid;place-items:center}
.aviso-fin .ic svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aviso-fin b{display:block;color:var(--ink);font-size:15.5px;font-weight:700;margin-bottom:4px}
.aviso-fin p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}
.aviso-fin a{color:var(--orange);font-weight:700}
.aviso-fin a:hover{text-decoration:underline;text-underline-offset:3px}
/* La ficha de cómo funcionaba: mismo aire que .creds pero en caja */
.act-ficha{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.act-ficha div{padding:18px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.act-ficha div:nth-child(2n){border-right:0}
.act-ficha div:nth-last-child(-n+2){border-bottom:0}
.act-ficha b{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:3px}
.act-ficha span{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:620px){
.act-ficha{grid-template-columns:1fr}
.act-ficha div{border-right:0}
.act-ficha div:last-child{border-bottom:0}
.aviso-fin{flex-direction:column;gap:12px}
}
/* 5.71 · QUIÉN LO TRATA · el eslabón que faltaba
------------------------------------------------------------
Las fichas del equipo enlazaban a cien páginas de motivo, pero
ninguna página de motivo devolvía el enlace. Quien llegaba desde
Google a «TLP en Murcia» leía la página entera sin enterarse de
quién lo lleva aquí.
Las tarjetas salen de datos/equipo.js invirtiendo ese mapa, así
que nadie aparece en una página que no haya declarado en su
propia ficha. Si un motivo no lo declara nadie, el bloque no se
pinta: mejor vacío que atribuir a alguien algo que no trata.
------------------------------------------------------------ */
.quien{display:grid;gap:14px}
.quien-card{
display:flex;align-items:center;gap:18px;
background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px 22px;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.quien-card:hover{border-color:var(--orange-line);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.quien-card .avatar{width:66px;height:66px;border-radius:50%;overflow:hidden;flex:none;background:var(--orange-soft);border:1px solid var(--orange-line)}
.quien-card .avatar img{margin:0;border-radius:0}
.quien-card .datos{flex:1;min-width:0}
.quien-card b{display:block;color:var(--ink);font-size:17px;font-weight:700;letter-spacing:-.015em}
.quien-card .rol{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:2px}
.quien-card .col{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--orange);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:var(--r-pill);padding:3px 10px;margin-top:8px}
.quien-card .area{display:inline-block;font-size:12.5px;color:var(--body);margin-top:8px;margin-left:8px}
.quien-card .go-ic{width:17px;height:17px;flex:none;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.quien-card:hover .go-ic{transform:translateX(4px)}
@media(max-width:560px){
.quien-card{align-items:flex-start;gap:14px;padding:16px 18px}
.quien-card .avatar{width:54px;height:54px}
.quien-card .go-ic{display:none}
.quien-card .area{display:block;margin-left:0}
}
/* ============================================================
5.40 · PROSA · tipografía de lectura de los artículos
En Elementor: añade la clase prose en el widget
"Contenido de la entrada" -> Avanzado -> Clases CSS.
Con eso los 118 artículos adoptan esta tipografía de golpe.
============================================================ */
.prose{font-size:clamp(17px,1.45vw,19px);line-height:1.75;color:var(--body)}
.prose > *{max-width:68ch}
/* Aqui habia una entradilla: el primer parrafo mas grande y mas
oscuro. Fuera. Los articulos no empiezan por un parrafo de
entrada: empiezan por un h2, o por una cita, y el primer
que aparece es texto normal a mitad del discurso. Se veia una
letra mas grande sin motivo. El realce grande queda para las
citas, que para eso estan. */
.prose p{margin-bottom:1.15em}
.prose h2{font-size:clamp(23px,2.5vw,32px);line-height:1.2;letter-spacing:-.03em;margin:clamp(42px,4.4vw,62px) 0 clamp(13px,1.4vw,18px);scroll-margin-top:100px}
.prose h3{font-size:clamp(19px,1.85vw,23px);line-height:1.28;letter-spacing:-.022em;margin:clamp(30px,3vw,40px) 0 11px;scroll-margin-top:100px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:700}
.prose em{font-style:italic}
.prose a:not([class]){color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--orange-line)}
.prose a:not([class]):hover{text-decoration-color:var(--orange)}
.prose ul,.prose ol{list-style:none;margin:0 0 1.4em;padding:0}
.prose li{position:relative;padding-left:32px;margin-bottom:.62em}
.prose ul li::before{content:"";position:absolute;left:9px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.prose ol{counter-reset:pn}
.prose ol li{counter-increment:pn}
.prose ol li::before{content:counter(pn);position:absolute;left:0;top:.12em;width:23px;height:23px;border-radius:50%;background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);font-size:12px;font-weight:800;display:grid;place-items:center;line-height:1}
.prose blockquote{
max-width:68ch;margin:clamp(30px,3.4vw,46px) 0;
padding:clamp(24px,2.8vw,34px) clamp(26px,3vw,38px);
background:var(--orange-soft);border:1px solid var(--orange-line);
border-radius:var(--r-lg);
font-size:clamp(19px,1.9vw,24px);line-height:1.42;font-weight:600;
color:var(--ink);letter-spacing:-.02em;
text-align:center;
}
.prose blockquote p{margin:0}
.prose blockquote p + p{margin-top:14px;font-size:.66em;font-weight:700;color:var(--orange);letter-spacing:.04em;text-transform:uppercase}
.prose blockquote cite{display:block;margin-top:14px;font-size:.66em;font-style:normal;font-weight:700;color:var(--orange);letter-spacing:.04em;text-transform:uppercase}
.prose img{width:100%;border-radius:var(--r-lg);margin:clamp(28px,3vw,40px) 0;display:block}
.prose figure{margin:clamp(28px,3vw,40px) 0;max-width:none}
.prose figure img{margin:0}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:11px;text-align:center;line-height:1.5}
.prose hr{border:0;height:1px;background:var(--line);margin:clamp(36px,4vw,54px) 0}
/* 5.41 · Ficha de autor -------------------------------------- */
.author-box{display:flex;gap:22px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,32px);background:var(--cream);margin-top:clamp(44px,4.6vw,64px)}
.author-box .av{width:72px;height:72px;border-radius:50%;background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);display:grid;place-items:center;font-weight:800;font-size:23px;flex:none;overflow:hidden}
/* margin:0 y border-radius:0 NO sobran: .prose img le mete un
margen de 30 px arriba y abajo a toda imagen del articulo, y
el avatar tambien es una. Con ese margen la foto se pintaba a
70x131 dentro del circulo de 72 y salia la cara cortada. */
.author-box .av img{margin:0;border-radius:0}
.author-box .author-kicker{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.author-box h3{font-size:20px;margin-bottom:4px}
.author-box .role{font-size:14.5px;color:var(--orange);font-weight:600;margin-bottom:10px}
.author-box p{font-size:15px;line-height:1.6}
/* 5.42 · Navegación entre artículos -------------------------- */
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(34px,3.6vw,48px)}
.art-nav a{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;transition:border-color .25s,transform .25s var(--ease)}
.art-nav a:hover{border-color:var(--orange-line);transform:translateY(-3px)}
.art-nav small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.art-nav b{display:block;color:var(--ink);font-size:15.5px;line-height:1.35;font-weight:700}
.art-nav .next{text-align:right}
/* 5.43 · Tarjeta de motivos con fichas enlazadas ------------- */
.motivos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.motivos{grid-template-columns:1fr}}
.motivos-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){.motivos-3{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.motivos-3{grid-template-columns:1fr}}
.motivo{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;transition:border-color .25s}
.motivo:hover{border-color:var(--orange-line)}
.motivo h3{font-size:18px;margin-bottom:6px}
.motivo > p{font-size:15px;line-height:1.6;color:var(--muted)}
.motivo ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.motivo li{display:flex}
.motivo li a,.motivo li > span{display:inline-flex;align-items:center;min-height:38px;font-size:13.5px;font-weight:600;color:var(--body);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;line-height:1.35;transition:border-color .2s,color .2s,background .2s}
.motivo li a:hover{border-color:var(--orange-line);color:var(--orange);background:var(--white)}
@media(max-width:680px){.motivo li a,.motivo li > span{min-height:44px}}
/* 5.44 · Rótulo de subbloque dentro de una sección ---------- */
.bloque-k{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.bloque-k::after{content:"";flex:1;height:1px;background:var(--orange-line)}
.bloque-k + .motivos{margin-bottom:clamp(36px,3.8vw,52px)}
/* 5.45 · Proceso numerado ------------------------------------ */
.pasos{counter-reset:p;display:grid;gap:18px}
.paso{display:flex;gap:20px;align-items:flex-start;counter-increment:p}
.paso::before{content:counter(p);flex:none;width:42px;height:42px;border-radius:50%;background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);font-weight:800;font-size:16px;display:grid;place-items:center}
.paso h3{font-size:18px;margin-bottom:5px}
.paso p{font-size:15.5px;line-height:1.6}
/* 5.46 · Lo que sí / lo que no ------------------------------- */
.sino{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.sino{grid-template-columns:1fr}}
.sino > div{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;background:#fff}
.sino h3{font-size:18px;margin-bottom:18px}
.sino ul{list-style:none;display:grid;gap:13px}
.sino li{display:flex;gap:12px;font-size:15.5px;line-height:1.55}
.sino svg{width:17px;height:17px;flex:none;margin-top:4px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sino .si svg{stroke:var(--orange)}
.sino .no{background:var(--cream)}
.sino .no svg{stroke:var(--muted)}
/* 5.47 · Precio en una línea --------------------------------- */
.precio-linea{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;border:1px solid var(--orange-line);background:var(--orange-soft);border-radius:var(--r-lg);padding:28px 32px}
.precio-linea .cifra{font-size:clamp(30px,4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.precio-linea .cifra span{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.precio-linea p{font-size:15.5px;line-height:1.6;max-width:44ch;margin:0}
/* 5.70 · El pago de la sesión
Tres piezas para lo mismo, cada una en su sitio:
.pago-linea una línea bajo los botones del hero, para quien
entra solo a pagar y no debería tener que bajar
.pago-caja la tarjeta centrada que va debajo del precio
.pago-recibo variante troquelada de esa misma tarjeta
El importe va abierto porque depende del tipo de terapia; quien
lo comunica es recepción, no la web. */
.pago-linea{display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap;margin:34px 0 -12px;font-size:15.5px;color:var(--muted)}
.pago-linea a{font-weight:700;color:var(--orange)}
.pago-linea a:hover{background:none;text-decoration:underline;text-underline-offset:4px}
.pago-caja{text-align:center;background:var(--white);border:2px dashed var(--orange-line);border-radius:var(--r-lg);padding:clamp(30px,4vw,44px);margin-top:26px;position:relative}
/* Las dos muescas del troquel, a media altura. Van del color del
fondo de la sección; si esa sección cambiara de fondo, hay que
cambiarlas aquí también. */
.pago-caja::before,.pago-caja::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--white);transform:translateY(-50%)}
.pago-caja::before{left:-12px}
.pago-caja::after{right:-12px}
.pago-caja .ic{width:56px;height:56px;margin:0 auto 16px;border-radius:18px;background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange);display:grid;place-items:center}
.pago-caja .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pago-caja b{display:block;font-size:clamp(20px,2.2vw,25px);font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.pago-caja p{font-size:15.5px;line-height:1.6;color:var(--body);max-width:46ch;margin:0 auto 22px}
/* El troquel: dos muescas del color del fondo de la sección. Si la
sección cambiara de fondo, hay que cambiar el de las muescas. */
.pago-recibo{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--white);border:2px dashed var(--orange-line);border-radius:var(--r-lg);padding:24px 28px;margin-top:26px;position:relative}
.pago-recibo::before,.pago-recibo::after{content:"";position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--white);transform:translateY(-50%)}
.pago-recibo::before{left:-11px}
.pago-recibo::after{right:-11px}
.pago-recibo .ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}
.pago-recibo .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pago-recibo .txt{flex:1;min-width:210px}
.pago-recibo b{display:block;color:var(--ink);font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.pago-recibo p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.pago-recibo .btn{flex:none}
@media(max-width:620px){
.pago-caja .btn,.pago-recibo .btn{width:100%;justify-content:center}
}
/* 5.48 · Apunte discreto bajo un bloque ---------------------- */
.apunte{margin-top:16px;font-size:15px;line-height:1.55;color:var(--muted)}
.apunte-c{text-align:center;margin-top:24px}
/* 5.49 · Aviso con retrato al lado --------------------------- */
.note-media{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.note-media > .avatar{flex:none}
.note-media > div{flex:1;min-width:260px}
/* 5.50 · Fecha del artículo, a la derecha -------------------- */
/* 5.51 · Hero de página de servicio -------------------------- */
.svc-hero{background:linear-gradient(168deg,var(--orange-soft) 0%,rgba(var(--orange-rgb),.02) 55%,var(--white) 100%);padding:clamp(52px,5.5vw,78px) 0 clamp(40px,4vw,56px);position:relative;overflow:hidden}
.svc-hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(var(--orange-rgb),.10),transparent 68%);pointer-events:none}
.svc-hero .wrap{position:relative;text-align:center}
.svc-hero h1{margin:20px auto 18px;max-width:19ch}
.svc-hero .lede{max-width:60ch;margin-inline:auto}
.svc-hero .cta-btns{margin-top:30px}
/* 5.52 · Etiquetas y compartir del artículo ------------------ */
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.art-tags a{font-size:13px;font-weight:600;color:var(--body);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;transition:border-color .2s,color .2s;display:inline-flex;align-items:center}
.art-tags a:hover{border-color:var(--orange);color:var(--orange)}
.art-share{display:flex;align-items:center;gap:10px;margin-top:clamp(34px,3.6vw,46px);padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.art-share > span{font-size:14px;font-weight:600;color:var(--muted);margin-right:4px}
.art-share a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:border-color .22s,transform .22s var(--ease),background .22s}
.art-share a:hover{border-color:var(--orange);background:var(--orange-soft);transform:translateY(-2px)}
.art-share svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.art-tags a{min-height:44px;padding:0 18px}.art-share a{width:46px;height:46px}}
/* 5.53 · Página de libro: portada y ficha -------------------- */
.libro-hero{background:linear-gradient(168deg,var(--orange-soft) 0%,rgba(var(--orange-rgb),.02) 55%,var(--white) 100%);padding:clamp(46px,5vw,74px) 0;position:relative;overflow:hidden}
.libro-hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(var(--orange-rgb),.10),transparent 68%);pointer-events:none}
.libro-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,28%,320px);gap:clamp(30px,4vw,60px);align-items:center}
@media(max-width:860px){.libro-hero .wrap{grid-template-columns:1fr;gap:32px}}
.libro-hero h1{margin:18px 0 16px;max-width:15ch}
.libro-hero .lede{max-width:50ch}
.libro-portada{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);background:var(--white)}
.libro-portada img{width:100%;height:auto;display:block}
@media(max-width:860px){.libro-portada{max-width:250px}}
/* 5.54 · Ficha técnica --------------------------------------- */
.ficha{list-style:none;margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.ficha li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 20px;font-size:14.5px;line-height:1.4;border-bottom:1px solid var(--line-2)}
.ficha li:last-child{border-bottom:0}
.ficha b{flex:none;color:var(--muted);font-weight:600}
.ficha span{color:var(--ink);font-weight:600;text-align:right}
/* 5.55 · Dónde comprarlo ------------------------------------- */
.tiendas{display:flex;flex-wrap:wrap;gap:10px}
.tiendas a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s,transform .25s var(--ease)}
.tiendas a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.tiendas svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 5.56 · Enlace al otro libro de la colección ---------------- */
.libro-otro{display:flex;align-items:center;gap:clamp(22px,3vw,38px);padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.libro-otro:hover{border-color:var(--orange-line);transform:translateY(-4px);box-shadow:var(--sh-lg)}
.libro-otro img{flex:none;width:clamp(94px,13vw,126px);height:auto;display:block;border:1px solid var(--line);border-radius:var(--r)}
.libro-otro .txt{flex:1;min-width:0}
.libro-otro .k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.libro-otro h3{font-size:clamp(20px,2vw,25px);letter-spacing:-.028em;margin-bottom:8px}
.libro-otro p{font-size:15.5px;line-height:1.6}
.libro-otro .go{margin-top:14px}
.libro-otro:hover .go svg{transform:translateX(4px)}
@media(max-width:560px){.libro-otro{flex-direction:column;align-items:flex-start}}
/* 5.57 · Marca de WhatsApp ----------------------------------
El logotipo oficial es un glifo macizo: se rellena y no se
traza, y va siempre en el verde de la marca. Por eso necesita
reglas propias que ganen a los iconos de linea del sistema. */
svg.wa-mark{fill:var(--wa);stroke:none}
.tic svg.wa-mark,
.f-nap svg.wa-mark,
.art-share svg.wa-mark,
.ac-share svg.wa-mark{fill:var(--wa);stroke:none}
.tic.tic-wa{background:rgba(var(--wa-rgb),.10);border-color:rgba(var(--wa-rgb),.34)}
.talk-card:hover .tic.tic-wa{background:var(--wa);border-color:var(--wa)}
.talk-card:hover .tic.tic-wa svg.wa-mark{fill:#fff}
/* 5.60 · Ficha de un profesional ----------------------------- */
.pro-cara{width:clamp(124px,14vw,164px);height:clamp(124px,14vw,164px);border-radius:50%;overflow:hidden;background:var(--orange-soft);border:1px solid var(--orange-line);display:block;margin:0 auto 24px}
/* .pro-cara img hereda tamaño y B/N del bloque de retratos de arriba */
/* 5.58 · Enlaces dentro del texto corrido -------------------- */
.mindup section p a:not([class]),.mindup .ans a,.mindup .note a,.mindup .apunte a,.mindup .checks a,.mindup .sino li a{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--orange-line)}
.mindup section p a:not([class]):hover,.mindup .ans a:hover,.mindup .note a:hover,.mindup .apunte a:hover,.mindup .checks a:hover,.mindup .sino li a:hover{text-decoration-color:var(--orange)}
/* 5.59 · Enlace al servicio desde una tarjeta de tarifa ------ */
.fee .fee-link{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--orange)}
.fee .fee-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fee .fee-link:hover{text-decoration:underline;text-underline-offset:3px}
/* ---------- 5.73 · COMENTARIOS DE LAS ENTRADAS ---------- */
/* Plegados con . El navegador abre y cierra solo: aquí solo
se viste el resumen y se gira la flecha con [open]. */
.coments{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream);overflow:hidden}
.coments>summary{display:flex;align-items:center;gap:12px;padding:18px 22px;cursor:pointer;list-style:none;font-size:15px;color:var(--ink);transition:background .18s}
.coments>summary::-webkit-details-marker{display:none}
.coments>summary:hover{background:var(--orange-soft)}
.coments>summary .ic{width:20px;height:20px;flex:none;color:var(--orange)}
.coments>summary .ic svg{width:100%;height:100%;display:block}
.coments>summary b{font-weight:700}
.coments>summary .ver{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--orange)}
.coments>summary .ver::after{content:'Ver'}
.coments[open]>summary .ver::after{content:'Ocultar'}
.coments>summary .fl{width:16px;height:16px;flex:none;color:var(--orange);transition:transform .22s}
.coments[open]>summary .fl{transform:rotate(180deg)}
.coments[open]>summary{border-bottom:1px solid var(--line)}
.coments-lista{list-style:none;margin:0;padding:22px;display:grid;gap:20px;background:#fff}
.coments-lista ol.children{list-style:none;margin:18px 0 0 0;padding-left:22px;border-left:2px solid var(--line);display:grid;gap:18px}
.coments-lista li{font-size:15px;line-height:1.62}
.coments-lista .comment-body{color:var(--body)}
.coments-lista .comment-author{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.coments-lista .comment-author img{width:34px;height:34px;border-radius:50%;flex:none}
.coments-lista .comment-author .says{display:none}
.coments-lista .comment-meta{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.coments-lista .comment-meta a{color:inherit}
.coments-lista .reply{margin-top:8px;font-size:13.5px;font-weight:600}
.coments-lista .reply a{color:var(--orange)}
.coments-lista .bypostauthor>.comment-body .comment-author::after{content:'MindUp';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--orange);background:var(--orange-soft);border-radius:var(--r-pill);padding:3px 9px}
/* El formulario. WordPress pinta los campos; aquí solo se ordenan. */
.coment-form{margin-top:34px}
.coment-tit{font-size:clamp(21px,2.4vw,26px);margin-bottom:10px}
.coment-aviso{font-size:14px;color:var(--muted);margin-bottom:20px;max-width:62ch}
/* El aviso de protección de datos del formulario: tiene que estar y
tiene que leerse, pero no debe competir con el propio formulario.
Va debajo, un punto más pequeño y separado por una línea. */
.coment-datos{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
font-size:13px;line-height:1.6;color:var(--muted);max-width:70ch}
.coment-datos a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.coment-form p{margin-bottom:16px}
.coment-form label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.coment-form input[type=text],.coment-form input[type=email],.coment-form input[type=url],.coment-form textarea{
width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px;transition:border-color .18s,box-shadow .18s}
.coment-form input:focus,.coment-form textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}
.coment-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.coment-form .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--muted)}
.coment-form .comment-form-cookies-consent label{font-weight:400;margin:0;color:inherit}
.coment-form .comment-form-cookies-consent input{margin-top:3px;flex:none}
@media(min-width:700px){
.coment-form .comment-form-author,.coment-form .comment-form-email{display:inline-block;width:calc(50% - 8px)}
.coment-form .comment-form-author{margin-right:14px}
}
/* ---------- 5.74 · LO MÁS LEÍDO Y LO MÁS COMENTADO ---------- */
/* Dos columnas al final del blog. La izquierda va numerada, porque el
orden es la información; la derecha lleva la cifra de comentarios,
que se defiende sola. */
.mas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(34px,4vw,62px)}
/* Cada columna es una celda del grid: sin esto, un titular largo
la ensancha y descuadra la otra mitad. */
.mas-col{min-width:0}
.mas-tit{font-size:clamp(21px,2.2vw,26px);line-height:1.2;letter-spacing:-.02em;margin:16px 0 8px}
.mas-sub{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.mas-lista{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:none}
.mas-lista a{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:var(--r-md);
font-size:15.5px;line-height:1.45;color:var(--ink);transition:background .18s}
.mas-lista a:hover{background:#fff}
.mas-lista a:hover span:last-child{color:var(--orange)}
/* El número de orden: discreto, que no compita con el titular */
.mas-i{flex:none;width:24px;font-size:15px;font-weight:800;color:var(--orange);opacity:.55;font-variant-numeric:tabular-nums}
/* La cifra de comentarios sí es un dato, y va en pastilla */
.mas-n{flex:none;min-width:34px;text-align:center;font-size:12.5px;font-weight:700;
color:var(--orange);background:var(--orange-soft);border-radius:var(--r-pill);
padding:3px 8px;margin-top:1px;font-variant-numeric:tabular-nums}
@media(max-width:760px){
.mas-grid{grid-template-columns:1fr;gap:38px}
.mas-lista a{padding:11px 12px;font-size:15px;gap:11px}
}
/* ---------- 5.75 · PÁGINAS LEGALES ---------- */
/* Un texto legal se lee de arriba abajo y de una vez. Por eso aquí no
hay alternancia de fondos ni secciones separadas: es una sola
columna continua, con los apartados marcados por el titular y una
línea. Ocupa menos, se recorre mejor y se imprime bien. */
.legal-fecha{margin-top:20px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
font-weight:700;color:var(--muted)}
/* La ficha de datos: pares de etiqueta y valor, no una tira de sellos */
.legal-datos{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--cream);overflow:hidden}
.legal-datos > div{display:grid;grid-template-columns:150px 1fr;gap:18px;
padding:14px 22px;border-top:1px solid var(--line);align-items:baseline}
.legal-datos > div:first-child{border-top:0}
.legal-datos dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
font-weight:700;color:var(--muted)}
.legal-datos dd{margin:0;font-size:15.5px;color:var(--ink);font-weight:500}
/* El cuerpo: apartados encadenados, no secciones sueltas */
.legal-cuerpo{max-width:70ch}
.legal-cuerpo h2{font-size:clamp(21px,2.3vw,27px);line-height:1.22;letter-spacing:-.025em;
margin:clamp(38px,4vw,54px) 0 16px;padding-top:clamp(30px,3.2vw,42px);
border-top:1px solid var(--line)}
.legal-cuerpo > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-cuerpo p{font-size:16.5px;line-height:1.72;color:var(--body);margin-bottom:1em}
.legal-cuerpo p:last-child{margin-bottom:0}
.legal-cuerpo strong{color:var(--ink);font-weight:700}
.legal-cuerpo a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.legal-cuerpo .lista-tit{margin:24px 0 12px;font-size:15.5px;color:var(--ink)}
.legal-cuerpo .checks{margin-bottom:4px}
.legal-cuerpo .checks li{font-size:15.5px;line-height:1.55}
@media(max-width:600px){
.legal-datos > div{grid-template-columns:1fr;gap:4px;padding:13px 17px}
.legal-cuerpo p,.legal-cuerpo .checks li{font-size:16px}
}
/* ---------- 6. CABECERA (común a todas las páginas) ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.stuck{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(20,18,16,.06)}
.nav-in{display:flex;align-items:center;gap:22px;height:78px}
.logo{display:flex;align-items:center;color:var(--muted)}
/* El logotipo lleva su naranja fijo dentro del SVG. El color que se
hereda desde aquí es el segundo: marrón sobre claro, blanco en el pie. */
.logo .mark{height:50px;flex:none;display:block}
.logo .mark svg{height:100%;width:auto;display:block}
.menu{margin-left:auto;display:flex;align-items:center;gap:2px;list-style:none}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:5px;padding:10px 13px;font-size:14.5px;font-weight:600;color:var(--ink);border-radius:10px;transition:background .18s,color .18s}
.menu>li>a:hover,.menu>li.current>a,
.drop a:hover,
.toc a:hover{background:var(--orange-soft);color:var(--orange)}
.menu .caret{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:transform .2s}
.menu>li:hover .caret{transform:rotate(180deg)}
.drop{
position:absolute;top:calc(100% + 8px);left:0;list-style:none;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:9px;min-width:272px;box-shadow:var(--sh-lg);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* Combinador de hijo: si no, al abrir el 1er nivel se abría también el 2º. */
.menu>li:hover > .drop,.menu>li:focus-within > .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--body)}
/* ── Submenú de segundo nivel ──
Va después de .drop a propósito: comparte la clase .drop y
necesita sobrescribir su posición. */
/* Puente invisible sobre el hueco: sin esto el menú se cierra
al bajar el ratón de la barra al desplegable. */
.drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.drop .drop-2::before{top:0;bottom:0;left:-15px;right:auto;width:15px;height:auto}
@media(max-width:1200px){ .drop .drop-2::before{left:auto;right:-15px;width:15px} }
.drop li{position:relative}
.drop a{display:flex;align-items:center;gap:8px}
.caret-r{margin-left:auto;width:9px;height:9px;opacity:.5;transition:opacity .18s,transform .18s}
.has-sub:hover > a .caret-r{opacity:1;transform:translateX(2px)}
/* +15px = 9px de padding del desplegable padre + 6px de hueco */
.drop .drop-2{top:-9px;left:calc(100% + 15px);min-width:236px}
.has-sub:hover > .drop-2,
.has-sub:focus-within > .drop-2{opacity:1;visibility:visible;transform:none}
/* Si no cabe a la derecha, se abre hacia la izquierda */
@media(max-width:1200px){ .drop .drop-2{left:auto;right:calc(100% + 15px)} }
/* Móvil: segundo nivel sangrado */
.mobile .sub-2{padding-left:16px;margin:2px 0 8px;border-left:1px solid var(--line)}
.mobile .sub-2 a{font-size:15px;color:var(--muted)}
.nav .btn{padding:13px 22px;font-size:15px}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:11px;width:46px;height:46px;cursor:pointer;margin-left:auto;place-items:center}
.burger svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
/* El botón de cerrar vive dentro del cajón móvil: siempre visible ahí */
.mobile .burger{display:grid}
.mobile{display:none;position:fixed;inset:0;z-index:90;background:#fff;padding:22px var(--gutter) 40px;overflow-y:auto}
.mobile.open{display:block}
.mobile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mobile ul{list-style:none;display:grid;gap:2px}
.mobile>ul>li>a{display:block;padding:14px 4px;font-size:19px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-2)}
/* En el móvil, «Psicología» se abre y se cierra. Con once enlaces
siempre desplegados no se veía de un vistazo lo que hay debajo, y
el menú obligaba a hacer scroll para llegar a Tarifas o Contacto.
Es un botón con una clase, no un : así el estado lo
controlamos nosotros y se puede comprobar que cerrado mide cero. */
.mobile .mob-abre{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 4px;background:none;border:0;border-bottom:1px solid var(--line-2);font-family:inherit;font-size:19px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer}
.mobile .mob-abre .caret{width:20px;height:20px;flex:none;stroke:var(--orange);stroke-width:2.2;transition:transform .25s var(--ease)}
.mobile .mob-grupo.abierto .mob-abre .caret{transform:rotate(180deg)}
.mobile .mob-grupo .sub{display:none}
.mobile .mob-grupo.abierto .sub{display:block}
.mobile .sub{padding:6px 0 12px 14px;border-left:2px solid var(--orange-line);margin:6px 0 10px}
.mobile .sub a{display:block;padding:8px 0;font-size:16px;color:var(--body)}
.mobile .btn{width:100%;margin-top:24px}
/* ---------- 7. PIE (común a todas las páginas) ---------- */
.foot{background:#0C0B0A;color:rgba(255,255,255,.58);padding:clamp(56px,6vw,80px) 0 30px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.25fr;gap:44px}
.f-grid .f-head{color:#fff;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.f-grid ul{list-style:none;display:grid;gap:11px}
@media(max-width:680px){.f-grid ul li a{display:inline-flex;align-items:center;min-height:40px}}
.f-grid a:not(.btn){transition:color .18s}
.f-grid a:not(.btn):hover{color:var(--orange)}
.f-logo{display:flex;align-items:center;color:#fff;--logo-1:#fff;margin-bottom:16px}
.f-logo .mark{height:46px;flex:none;display:block}
.f-logo .mark svg{height:100%;width:auto;display:block}
.f-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.f-cta .btn{padding:13px 22px;font-size:14.5px;min-height:44px}
.f-nap{display:grid;gap:9px;margin-top:4px}
.f-nap li{display:flex;gap:10px;align-items:flex-start}
.f-nap a,.f-nap span{display:inline-flex;align-items:center;min-height:26px}
@media(max-width:680px){.f-nap a{min-height:44px}}
.f-nap svg{width:15px;height:15px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.f-legal{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.42);margin-top:18px;max-width:38ch}
/* Sellos institucionales, centrados dentro de la barra inferior */
/* Los laterales reparten el espacio a partes iguales, así los
sellos quedan centrados en la barra aunque midan distinto. */
.f-bottom > span{flex:1 1 0}
.f-bottom > span:last-child{text-align:right}
.f-logos{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;flex:0 0 auto}
.f-logos img{height:26px;width:auto;opacity:.45;filter:grayscale(1) brightness(2.4);transition:opacity .25s,filter .25s}
.f-logos img:hover{opacity:.9;filter:grayscale(0) brightness(1)}
.f-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}
.f-bottom a:hover{color:var(--orange)}
.wa{
position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;
background:var(--wa);display:grid;place-items:center;z-index:70;
box-shadow:0 6px 14px rgba(0,0,0,.16),0 14px 34px rgba(var(--wa-rgb),.34);
transition:transform .25s var(--ease);
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px;fill:#fff}
/* Los cortes de la marca toman el color del fondo sobre el que va */
.foot .mark svg g{stroke:#0C0B0A}
/* ---------- 8. ANIMACIÓN DE ENTRADA ----------
RED DE SEGURIDAD: el contenido solo se oculta si el script del
pie ha llegado a marcar . Si el JS falla,
no carga o el navegador no soporta IntersectionObserver, todo
se ve con normalidad en lugar de quedarse en blanco.
--------------------------------------------------- */
.rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}
/* ---------- 8b. ICONOS SVG · valores por defecto ----------
Evita repetir fill/stroke-linecap/stroke-linejoin en cada
componente: el icono solo declara su color y su grosor.
--------------------------------------------------------- */
.ic svg,.fic svg,.tic svg,.sic svg,.cred svg,
.tick svg,.caret,.burger svg{
fill:none;stroke-linecap:round;stroke-linejoin:round;
}
/* ---------- 9. ACCESIBILIDAD ---------- */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
/* ---------- 10. RESPONSIVE ---------- */
@media(max-width:1040px){
.g-3,.g-4{grid-template-columns:repeat(2,1fr)}
.hero-grid,.split,.split-a,.split-b{grid-template-columns:1fr}
.art-grid{grid-template-columns:1fr}
.art-aside{position:static;order:-1}
.prose > *{max-width:none}
.float{display:none}
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery figure.wide{grid-column:span 2}
.elementor-posts--skin-cards.elementor-grid,
.elementor-posts--skin-cards .elementor-posts-container{grid-template-columns:repeat(2,1fr)}
.menu{display:none}
.nav .btn{display:none}
.burger{display:grid}
.f-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:680px){
body{font-size:16px}
.f-bottom{flex-direction:column;text-align:center}
.f-logos img{height:22px}
:root{--gutter:20px}
.g-2,.g-3,.g-4,.f-grid,.art-nav{grid-template-columns:1fr}
/* Área táctil mínima en secundarios */
.toc a{min-height:44px;display:flex;align-items:center}
.toc a::before{top:50%;transform:translateY(-50%)}
.art-nav .next{text-align:left}
.author-box{flex-direction:column;gap:16px}
.stat-row{grid-template-columns:1fr}
.stat{border-right:0;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0}
.elementor-posts--skin-cards.elementor-grid,
.elementor-posts--skin-cards .elementor-posts-container{grid-template-columns:1fr}
.gallery figure.tall{grid-row:span 1;aspect-ratio:4/3}
.btn{width:100%}
.btn-inline{width:auto}
/* Los pares de botones —hero y cierres— van a su ancho y centrados.
A ancho completo, dos botones apilados ocupaban media pantalla y
pesaban más que el titular. Los que sí deben ir anchos (el menú,
la barra lateral, la caja de pago) lo piden por su cuenta. */
.cta-btns .btn{width:auto}
}
@media(max-width:760px){
.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}
/* En tarjetas estrechas las píldoras no caben: pasan a lista de texto */
.member .tags-sm{display:block;text-align:center;margin-top:10px}
.member .tags-sm span{display:inline;background:none;border:0;padding:0;font-size:12px;color:var(--muted)}
.member .tags-sm span:not(:last-child)::after{content:" · ";color:var(--orange)}
}
@media(max-width:600px){
/* En el móvil, dos columnas dejaban las fichas tan estrechas que el
nombre y el cargo partían por cualquier sitio. Pero a una columna,
con la foto centrada, ocho fichas eran tres pantallas de scroll.
Así que a una columna y en horizontal: la foto a la izquierda y
los datos a la derecha, alineados a la izquierda. */
.team-grid{grid-template-columns:1fr;gap:10px}
.member{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px}
.member .avatar{width:64px;height:64px;margin:0;flex:none}
.member .datos{flex:1;min-width:0}
.member h3{font-size:16.5px;margin-bottom:2px}
.member .role{font-size:12.5px}
.member .col{margin-top:7px;margin-right:8px}
.member .tags-sm{margin-top:6px;text-align:left}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.rv-on .rv{opacity:1;transform:none}
}
/* ---------- 11. COMPATIBILIDAD ELEMENTOR ---------- */
.mindup{isolation:isolate}
/* La cabecera NO debe crear contenedor propio: si lo hace,
position:sticky de .nav solo funciona dentro de sus 121px
de alto y la barra desaparece al hacer scroll.
display:contents la disuelve y .nav se pega contra el body.
⚠️ En Elementor esto no basta (sus propios wrappers vuelven a
crear el contenedor): hay que activar además
Motion Effects → Sticky: Arriba en el contenedor de la cabecera. */
.mindup-header{display:contents}
.elementor-widget-html .mindup-full{margin-inline:calc(50% - 50vw);width:100vw}
/* 5.61 · La ficha del artículo · una sola línea bajo el titular
Tres datos y nada más: quién lo firma, cuándo y cuánto cuesta
leerlo. Antes esto era un bloque con avatar, cargo y dos filas
encima del título; ocupaba como un párrafo y competía con el
titular, que es lo único que tiene que ganar ahí arriba.
Un solo tratamiento tipográfico para los tres: mismo tamaño,
mismo color apagado. Lo único naranja son los iconos, que es
lo que separa los bloques sin necesidad de puntos ni barras. */
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.art-meta > span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.art-meta svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--orange);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Titulares que se pasan por unos píxeles: que la línea reparta en
vez de soltar una palabra huérfana. Con 118 artículos, títulos
de más de 100 caracteres los hay. */
.art-head h1{text-wrap:balance}
/* 5.62 · La cita dentro de un artículo
Mismo componente que las citas del resto de la web —mismo tinte,
mismas comillas, mismo pie en versalitas naranjas—, solo que a
escala de columna de lectura: a 42px se comería el texto. */
.prose .quote-box{padding:clamp(30px,3.4vw,44px) clamp(26px,3.2vw,40px);margin:clamp(30px,3.4vw,46px) 0}
.prose .quote-box blockquote{background:none;border:0;border-radius:0;padding:0;margin:0 auto;max-width:760px;font-weight:700;letter-spacing:-.032em}
.prose .quote-box em{font-style:normal;color:var(--orange)}
.prose .quote-box .qmark{font-size:clamp(40px,4vw,52px);margin-bottom:clamp(14px,1.6vw,20px)}
.prose .quote-box blockquote p{font-size:clamp(19px,2.1vw,27px);line-height:1.3}
.prose .quote-box figcaption{margin-top:clamp(16px,1.8vw,22px)}
/* 5.63 · El enlace contextual del cierre de artículo
Lleva a la terapia que toca según la categoría. No usa .go
porque el naranja sobre el tinte del cierre da 2,46:1 y no pasa
AA. Aquí el texto va en tinta —17:1— y el naranja se queda donde
sí funciona: el subrayado y la flecha. El naranja sigue siendo
uno solo; lo que cambia es el papel que hace. */
.cta-mas{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;font-size:15.5px;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px;padding:8px 4px}
.cta-mas svg{width:16px;height:16px;flex:none;stroke:var(--orange);transition:transform .25s var(--ease)}
.cta-mas:hover{color:var(--orange)}
.cta-mas:hover svg{transform:translateX(4px)}
/* 5.64 · La voz de la directora
La única ficha del equipo que habla en primera persona. Va justo
después de las credenciales: primero se acredita quién es y luego
habla ella. Reutiliza la caja de cita del resto de la web, pero
con la comilla de apertura del sistema, la misma que marca las
citas del home y de los artículos. */
.voz{background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:var(--r-xl);padding:clamp(30px,3.6vw,46px) clamp(26px,3.4vw,52px);text-align:center;margin:0}
.voz .qmark{display:block;font-size:clamp(44px,4.6vw,60px);line-height:.5;font-weight:800;color:var(--orange);margin-bottom:clamp(20px,2.2vw,28px)}
.voz blockquote{border:0;margin:0 auto;padding:0;max-width:60ch;font-size:clamp(17px,1.9vw,22px);line-height:1.5;font-weight:600;letter-spacing:-.016em;color:var(--ink)}
.voz figcaption{margin-top:clamp(16px,1.8vw,22px);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
/* 5.65 · Formación por bloques
Con once hitos seguidos, la licenciatura pesaba igual que la
supervisión continua. El rótulo separa el núcleo de lo demás:
es información, no decoración. */
.form-rotulo{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.form-rotulo + .checks{margin-bottom:26px}
.checks + .form-rotulo{margin-top:4px}
/* 5.66 · Encabezado de sección alineado a la izquierda
El hermano de .head, que va centrado. Se usaba en once páginas
—las ocho fichas del equipo y los motivos con rejilla— y nunca
llegó a escribirse: sin reglas, el navegador dejaba los tres
elementos pegados y el párrafo corriendo el ancho entero.
Mismo ritmo vertical que .head, para que las dos variantes se
sientan la misma pieza. */
.sec-head{margin:0 0 clamp(36px,4vw,52px)}
.sec-head h2{margin:18px 0 14px}
.sec-head p{font-size:clamp(17px,1.4vw,19px);max-width:68ch}
.sec-head p + p{margin-top:13px}
/* 5.67 · El icono de la lista de formación
Un birrete en vez del visto: son títulos, no una lista de cosas
comprobadas. Va un punto más grande y con el trazo más fino que el
visto, porque tiene el doble de detalle y a 13 px se emborrona. */
.tick-aca svg{width:15px;height:15px;stroke-width:1.9}
/* 5.68 · Encuadre del retrato de cada profesional
Todos los originales son cuadrados de 350 px, pero cada uno está
hecho de una manera y el sujeto no siempre cae en el centro. El
recorte por defecto va al 50/50; aquí se corrige el de quien lo
necesite, sin tocar la foto ni meter estilos en el HTML.
Para ajustar uno: .pro- img{object-position:X% Y%}
El primer número mueve a izquierda o derecha, el segundo arriba
o abajo. En retratos suele bajar al 35-40% vertical, porque la
cara está en la mitad de arriba. */
/* ---------- 5.76 · SIGUE LEYENDO ---------- */
/* El párrafo de enlaces que cierra cada entrada del blog. Va después
del texto, nunca dentro: ni una palabra de lo escrito se toca.
Se distingue del cuerpo lo justo para que se lea como una nota del
final y no como publicidad metida en medio: fondo crema, una línea
naranja a la izquierda y el cuerpo un punto más pequeño. El rótulo
lo pone el CSS porque no aporta nada al contenido; los enlaces sí,
y esos van en el HTML. */
.prose .sigue-leyendo{position:relative;margin:clamp(34px,3.6vw,46px) 0 0;
padding:20px 24px 21px;border-radius:var(--r-lg);background:var(--cream);
border:1px solid var(--line);border-left:3px solid var(--orange);
font-size:16px;line-height:1.66;color:var(--body)}
.prose .sigue-leyendo::before{content:"Sigue leyendo";display:block;margin-bottom:8px;
font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
color:var(--muted)}
.prose .sigue-leyendo a{font-weight:600}
@media (max-width:600px){
.prose .sigue-leyendo{padding:17px 18px 18px;font-size:15.5px}
}
/* ---------- 5.77 · AMPLIAR LAS FOTOS DEL CENTRO ---------- */
/* El botón de ampliar y el visor no se estilan aquí: sus reglas van en
línea en partials/footer.html, al lado del script que los crea. El
porqué, explicado allí. */
/* La banda de tres fotos de la portada. La rejilla base es de cuatro
columnas; aquí hacen falta tres, y algo más altas, porque no son
una galería sino una muestra. */
.gallery.gal-3{grid-template-columns:repeat(3,1fr);gap:16px}
.gallery.gal-3 figure{aspect-ratio:4/3.2}
@media (max-width:600px){
.gallery.gal-3{grid-template-columns:repeat(2,1fr)}
/* En dos columnas la tercera se quedaría sola y descuadrada:
ocupa el ancho entero y hace de remate. */
.gallery.gal-3 figure:nth-child(3):last-child{grid-column:span 2;aspect-ratio:16/9}
}