/* ============================================================
   Fernando · sistema visual del sitio (manual de marca, ed. 01, oct 2026)
   Una sola fuente de estilos para todas las páginas.

   Reglas que este archivo hace cumplir:
   - Solo cuatro colores: crema, verde, marino y menta (45/25/25/5).
   - Menta nunca como texto sobre crema.
   - El marino siempre lleva grano (clase .grano).
   - Poppins es la fuente principal: titulares (700), etiquetas (600) y texto (400/500).
   - Space Grotesk es la secundaria: antetítulos, chips, cifras, contadores y el texto tachado.
   - Una sola firma: el tachado y su «Haz». Un tachado por sección.
   - Sin degradados, dorados, rojo, sombras de tarjeta ni íconos decorativos.
   ============================================================ */

/* ---------- Fuentes autoalojadas (Poppins + Space Grotesk, subconjunto latin, licencia OFL) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-italic.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2');}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  /* Tipografía: Poppins principal, Space Grotesk secundaria */
  --f-principal:'Poppins', system-ui, sans-serif;
  --f-secundaria:'Space Grotesk', 'Poppins', sans-serif;
  /* Los cuatro colores del manual */
  --crema:#F1EDE3;
  --verde:#2E6F40;
  --marino:#16213A;
  --menta:#9ADBB2;
  /* Derivados (mezclas de los cuatro, no colores nuevos) */
  --crema-2:#E8E2D4;          /* crema un tono más hondo para secciones alternas */
  --crema-claro:#FAF8F3;      /* campos de formulario */
  --tinta-suave:#4B5468;      /* marino aclarado para texto secundario (7,4:1 sobre crema) */
  --linea:#D6CDB8;            /* línea de cuaderno */
  --verde-hondo:#245733;      /* hover del verde */

  /* Roles: lo que cambia entre modo claro y oscuro */
  --fondo:var(--crema);
  --fondo-alt:var(--crema-2);
  --texto:var(--marino);
  --texto-suave:var(--tinta-suave);
  --acento:var(--verde);      /* acento legible sobre el fondo */
  --borde:var(--linea);
  --campo:var(--crema-claro);

  --ancho:1180px;
  --margen:clamp(20px, 5vw, 80px);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --trazo-verde:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 2, 70 9, 110 5 S 170 3, 198 6' fill='none' stroke='%232E6F40' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --trazo-menta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 2, 70 9, 110 5 S 170 3, 198 6' fill='none' stroke='%239ADBB2' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Modo oscuro: el mismo manual, con el marino de papel. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:var(--marino);
  --fondo-alt:#1C2946;        /* marino aclarado */
  --texto:var(--crema);
  --texto-suave:#B9BCC4;      /* crema mezclada con marino */
  --acento:var(--menta);
  --borde:#2E3A55;
  --campo:#1C2946;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--fondo); color:var(--texto);
  font-family:var(--f-principal); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img, svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button, input, select, textarea{font:inherit; color:inherit;}
h1, h2, h3, h4, h5{font-family:var(--f-principal); font-weight:700; line-height:1.15; letter-spacing:-.015em;}
h2{font-size:clamp(28px, 3.4vw, 44px);}
h3{font-size:21px; line-height:1.25;}
p{max-width:68ch;}
strong, b{font-weight:600;}
:focus-visible{outline:3px solid var(--acento); outline-offset:3px;}
::selection{background:var(--menta); color:var(--marino);}

.wrap{width:100%; max-width:calc(var(--ancho) + 2 * var(--margen)); margin:0 auto; padding:0 var(--margen);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Antetítulo: Space Grotesk 500 en versalitas (manual, p. 04). Solo al inicio de una sección. */
.antetitulo, .eyebrow{
  font-family:var(--f-secundaria); font-weight:500; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave);
  margin-bottom:16px;
}

/* El contenido siempre visible: sin entradas que aparecen al bajar. */
.reveal{opacity:1 !important; transform:none !important;}

/* Grano sobre marino o verde (manual, p. 08) */
.grano{position:relative; isolation:isolate;}
.grano::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grano); opacity:.09; mix-blend-mode:overlay;
}

/* Bloques de color fijos (no cambian con el tema) */
.bloque-marino{background-color:var(--marino); color:var(--crema); --texto:var(--crema); --texto-suave:#C3C7D0; --acento:var(--menta); --borde:rgba(241,237,227,.16);}
.bloque-verde{background-color:var(--verde); color:var(--crema); --texto:var(--crema); --texto-suave:#DCE8DE; --acento:var(--menta); --borde:rgba(241,237,227,.22);}

/* ---------- Botones y enlaces ---------- */
.btn, .btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  font-family:var(--f-principal); font-weight:600; font-size:15px;
  background:var(--marino); color:var(--crema); border:2px solid var(--marino);
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover, .btn-primary:hover{background:var(--verde); border-color:var(--verde);}
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-primary,
.bloque-marino .btn, .bloque-marino .btn-primary, .bloque-verde .btn{background:var(--menta); color:var(--marino); border-color:var(--menta);}
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn-primary:hover,
.bloque-marino .btn:hover, .bloque-marino .btn-primary:hover, .bloque-verde .btn:hover{background:var(--crema); border-color:var(--crema);}
.enlace{
  font-weight:600; color:var(--texto);
  border-bottom:2px solid var(--acento); padding-bottom:2px;
  transition:color .15s ease;
}
.enlace:hover{color:var(--acento);}
.acciones{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:32px;}

/* ---------- La firma: el tachado y su «Haz» (manual, p. 05-06) ---------- */
.tachado > span, .tachado-texto{
  background-image:var(--trazo-verde); background-repeat:no-repeat; background-position:0 58%;
  background-size:100% .32em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
:root[data-theme="dark"] .tachado > span, .bloque-marino .tachado > span, .bloque-verde .tachado > span,
:root[data-theme="dark"] .tachado-texto, .bloque-marino .tachado-texto, .bloque-verde .tachado-texto{background-image:var(--trazo-menta);}
.tachado{color:var(--texto-suave);}
.haz b, .haz-palabra{color:var(--acento);}

/* Versión de línea (secciones internas): el tachado en tono suave y el «Haz» más grande */
.tachado-linea{display:flex; flex-direction:column; gap:4px; margin-top:28px; max-width:none;}
.tachado-linea .tachado{font-family:var(--f-principal); font-size:17px;}
.tachado-linea .haz{font-family:var(--f-principal); font-weight:700; font-size:clamp(21px, 2.2vw, 26px); line-height:1.25; color:var(--texto);}

/* Animación de la portada: la línea se dibuja una sola vez (regla 7) */
/* Solo se oculta cuando site.js está listo para animar: sin JavaScript, todo se ve completo. */
[data-anim].anim-lista .tachado > span{background-size:0% .32em;}
[data-anim].anim-lista.is-on .tachado > span{animation:tachar 1.1s cubic-bezier(.65,0,.35,1) .35s forwards;}
[data-anim].anim-lista .haz{opacity:0; transform:translateY(6px);}
[data-anim].anim-lista.is-on .haz{animation:aparecer .6s ease 1.25s forwards;}
@keyframes tachar{to{background-size:100% .32em;}}
@keyframes aparecer{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  [data-anim] .tachado > span{background-size:100% .32em; animation:none !important;}
  [data-anim] .haz{opacity:1; transform:none; animation:none !important;}
}

/* ---------- Encabezado ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--fondo); border-bottom:1px solid var(--borde);
}
.masthead-inner{display:flex; align-items:center; gap:28px; min-height:72px;}
.logo{
  font-family:var(--f-principal); font-weight:700; font-size:24px; letter-spacing:-.02em;
  color:var(--acento); line-height:1; margin-right:auto;
}
.masthead nav{display:flex; align-items:center; gap:26px;}
.masthead nav a{font-size:15px; color:var(--texto-suave); transition:color .15s ease;}
.masthead nav a:hover, .masthead nav a[aria-current="page"]{color:var(--texto);}
.masthead nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--acento);}
.masthead nav .nav-cta{
  color:var(--crema); background:var(--marino); padding:10px 18px; font-weight:600; font-size:14px;
}
.masthead nav .nav-cta:hover{background:var(--verde); color:var(--crema);}
:root[data-theme="dark"] .masthead nav .nav-cta{background:var(--menta); color:var(--marino);}
.theme-toggle, .mobile-toggle{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--borde); cursor:pointer; color:var(--texto); flex:none;
}
.theme-toggle svg, .mobile-toggle svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
.mobile-toggle{display:none;}
.mobile-toggle .icon-close{display:none;}
.mobile-toggle[aria-expanded="true"] .icon-menu{display:none;}
.mobile-toggle[aria-expanded="true"] .icon-close{display:block;}

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(340px, 86vw);
  background:var(--fondo); border-left:1px solid var(--borde);
  padding:96px 28px 32px; display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%); transition:transform .25s ease; visibility:hidden;
}
.mobile-drawer.open{transform:none; visibility:visible;}
.mobile-drawer a{font-family:var(--f-principal); font-weight:600; font-size:22px; padding:12px 0; border-bottom:1px solid var(--borde);}
.mobile-drawer a.mobile-cta{margin-top:20px; border:0; background:var(--marino); color:var(--crema); text-align:center; font-size:17px; padding:16px;}
:root[data-theme="dark"] .mobile-drawer a.mobile-cta{background:var(--menta); color:var(--marino);}
.drawer-backdrop{position:fixed; inset:0; z-index:55; background:rgba(22,33,58,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;}
.drawer-backdrop.open{opacity:1; pointer-events:auto;}
body.drawer-locked{overflow:hidden;}
@media (max-width:960px){
  .masthead nav{display:none;}
  .mobile-toggle{display:flex;}
  .masthead-inner{gap:10px;}
}
@media (prefers-reduced-motion: reduce){ .mobile-drawer, .drawer-backdrop{transition:none;} }

/* ---------- Secciones ---------- */
.seccion{padding:clamp(72px, 9vw, 120px) 0;}
.seccion-alt{background:var(--fondo-alt);}
.seccion-cabeza{max-width:760px; margin-bottom:48px;}
.seccion-cabeza p{color:var(--texto-suave); margin-top:16px; font-size:18px;}

/* ---------- Portada (home) ----------
   Una sola definición, en tres tamaños: escritorio, tableta y teléfono.
   El retrato es un recorte sin fondo (fernando-recorte.webp) que se funde con el marino. */
.portada{position:relative; overflow:hidden;}
.portada-grid{display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); align-items:center;
  gap:clamp(32px, 4vw, 64px); min-height:min(760px, calc(100svh - 72px));}
.portada-copy{padding:clamp(64px, 9vh, 112px) 0 clamp(56px, 8vh, 96px);}
.portada h1{display:flex; flex-direction:column; gap:10px;}
.portada h1 .tachado{font-family:var(--f-secundaria); font-weight:500; font-size:clamp(22px, 2.4vw, 32px); line-height:1.2; color:rgba(241,237,227,.62);}
.portada h1 .haz{font-size:clamp(36px, 4.6vw, 60px); line-height:1.08; letter-spacing:-.025em;}
.portada .lede{font-size:clamp(17px, 1.5vw, 20px); color:var(--texto-suave); margin-top:28px; max-width:44ch;}
.portada-firma{margin-top:28px; font-size:14px; color:var(--texto-suave);}
.portada-firma b{font-family:var(--f-principal); color:var(--texto); font-weight:600;}
.portada-foto{justify-self:end; width:100%; max-width:720px; margin:clamp(12px, 2vh, 24px) 0 0;}
.portada-foto img{display:block; width:100%; height:auto; max-height:calc(100svh - 72px); aspect-ratio:4/5;
  object-fit:contain; object-position:50% 0; margin-left:auto;
  /* se desvanece hacia abajo y por los lados, donde la foto original corta los hombros */
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 94%), linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom, #000 58%, transparent 94%), linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-composite:intersect;}

/* Tableta: una columna, el retrato debajo del texto */
@media (max-width:900px){
  .portada-grid{grid-template-columns:1fr; min-height:0; gap:0;}
  .portada-copy{padding:48px 0 0;}
  .portada-foto{justify-self:stretch; max-width:none; margin:-24px 0 0;}
  .portada-foto img{max-width:560px; max-height:none; margin:0 auto;}
}

/* Teléfono: solo texto; la foto vive en «Mi marca es el primer caso» */
@media (max-width:760px){
  .portada-grid{display:block; min-height:0;}
  .portada-foto{display:none;}
  .portada-copy{padding:44px 0 48px;}
  .portada h1 .tachado{font-size:20px;}
  .portada h1 .haz{font-size:clamp(34px, 10vw, 42px);}
  .portada .lede{font-size:16px; margin-top:16px;}
  .portada .acciones{margin-top:24px;}
  .portada .acciones .btn{flex:1 1 100%;}
  .portada-firma{display:none;}
}

/* ---------- La cadena (secuencia real: 1 a 5) ---------- */
.cadena{padding:clamp(64px, 8vw, 104px) 0;}
.cadena h2{max-width:20ch;}
.cadena-lista{list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); gap:0; margin-top:48px; counter-reset:paso;}
.cadena-lista li{
  counter-increment:paso; padding:20px 20px 0 0; border-top:2px solid rgba(241,237,227,.35);
  font-family:var(--f-principal); font-weight:700; font-size:clamp(20px, 2vw, 26px); line-height:1.15;
}
.cadena-lista li::before{content:counter(paso); display:block; font-family:var(--f-secundaria); color:var(--menta); font-size:clamp(40px, 4.4vw, 60px); line-height:1; margin-bottom:14px;}
.cadena-lista li:last-child{border-top-color:var(--menta);}
.cadena-pie{margin-top:44px; color:var(--texto-suave); font-size:18px; max-width:56ch;}
@media (max-width:900px){
  .cadena-lista{grid-template-columns:1fr; margin-top:32px;}
  .cadena-lista li{display:flex; align-items:baseline; gap:18px; padding:16px 0;}
  .cadena-lista li::before{font-size:34px; margin:0; min-width:28px;}
}

/* ---------- Sobre mí: mi marca es el primer caso ---------- */
.sobre-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(36px, 6vw, 88px); align-items:start;}
.sobre-foto{margin:0; position:sticky; top:100px;}
.sobre-foto img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;}
.sobre-foto figcaption{font-size:13px; color:var(--texto-suave); margin-top:12px;}
.sobre-texto > p{margin-top:18px; font-size:18px;}
.sobre-texto h2{max-width:16ch;}
.habilidades{list-style:none; margin-top:40px; border-top:1px solid var(--borde);}
.habilidades li{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--borde);}
.habilidades b{font-family:var(--f-principal); font-weight:700; font-size:19px;}
.habilidades span{color:var(--texto-suave); font-size:16px;}
.limites{margin-top:44px;}
.limites h3{font-size:19px; margin-bottom:6px;}
.limites > p{color:var(--texto-suave); font-size:16px;}
.limites dl{margin-top:18px;}
.limites dl div{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:20px; padding:14px 0; border-top:1px solid var(--borde);}
.limites dt{font-weight:600; font-size:15px;}
.limites dd{font-size:16px;}
@media (max-width:900px){
  .sobre-grid{grid-template-columns:1fr;}
  .sobre-foto{position:static; max-width:420px;}
  .habilidades li, .limites dl div{grid-template-columns:1fr; gap:4px;}
}

/* ---------- Método: tres círculos ---------- */
.circles-layout{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(36px, 6vw, 72px); align-items:center;}
.venn{width:100%; max-width:420px; height:auto; margin:0 auto; overflow:visible;}
.venn text{font-family:var(--f-secundaria); font-weight:600; fill:var(--texto);}
.venn .c-concepto{fill:var(--verde); fill-opacity:.32; stroke:var(--verde);}
.venn .c-forma{fill:var(--marino); fill-opacity:.2; stroke:var(--marino);}
.venn .c-percepcion{fill:var(--menta); fill-opacity:.5; stroke:var(--verde);}
:root[data-theme="dark"] .venn .c-forma{fill:var(--crema); fill-opacity:.12; stroke:var(--crema);}
:root[data-theme="dark"] .venn .c-concepto{fill-opacity:.55; stroke:var(--menta);}
.circle-list{display:grid; gap:28px;}
.circle-item{border-left:3px solid var(--c, var(--verde)); padding-left:22px;}
.circle-item h3{font-size:24px;}
.circle-item .sub{font-size:15px; color:var(--texto-suave); margin:2px 0 8px;}
.circle-item p{font-size:16px;}
.circle-item .q{margin-top:10px; font-weight:500;}
.overlaps{margin-top:56px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.overlap{border-top:2px solid var(--texto); padding-top:14px; font-size:15px; color:var(--texto-suave);}
.overlap b{display:block; font-family:var(--f-principal); font-weight:700; font-size:17px; color:var(--texto); margin-bottom:4px;}
@media (max-width:900px){
  .circles-layout{grid-template-columns:1fr;}
  .overlaps{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .overlaps{grid-template-columns:1fr;} }

/* ---------- Temas (sin íconos ni tarjetas: filas de cuaderno) ---------- */
.temas{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:56px;}
.tema{padding:24px 0; border-top:1px solid var(--borde);}
.tema h3{font-size:22px; margin-bottom:6px;}
.tema p{color:var(--texto-suave); font-size:16px;}
@media (max-width:760px){ .temas{grid-template-columns:1fr;} }

/* ---------- Tarjetas de artículos (las genera tools/build.py) ---------- */
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:40px;}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px;}
.card{display:flex; flex-direction:column; border-top:2px solid var(--texto); padding-top:20px;}
.card .thumb{margin-bottom:20px; background:var(--fondo-alt); border:1px solid var(--borde); aspect-ratio:400/400; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card h3{font-size:21px; margin-bottom:10px;}
a.card:hover h3{color:var(--acento);}
.card p{font-size:15px; color:var(--texto-suave); margin-bottom:16px; flex:1;}
.card .meta{font-size:13px; color:var(--texto-suave);}
.card[hidden]{display:none;}
.chip{display:inline-block; align-self:flex-start; font-family:var(--f-secundaria); font-weight:600; font-size:14px; color:var(--acento); margin-bottom:8px;}
.card-proximo{border-top-style:dashed;}
.card-proximo .thumb{border-style:dashed; color:var(--texto-suave); font-size:14px; padding:24px; text-align:center;}
.card-proximo .enlace{align-self:flex-start; font-size:15px;}
@media (max-width:900px){ .grid3{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .grid3{grid-template-columns:1fr;} }

/* Filtros del blog */
.filters{display:flex; gap:10px; margin-bottom:44px; flex-wrap:wrap;}
.filter{font-size:14px; background:none; padding:9px 16px; border:1px solid var(--borde); color:var(--texto-suave); cursor:pointer;}
.filter[aria-pressed="true"], .filter:hover{border-color:var(--texto); color:var(--texto);}
.filter[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--acento);}
.filter-empty{color:var(--texto-suave);}
.filter-empty a{color:var(--acento); border-bottom:1px solid currentColor;}

/* ---------- Diagnóstico (bloque marino) ---------- */
.diag-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(36px, 6vw, 80px); align-items:start;}
.diag-intro > p{margin-top:18px; color:var(--texto-suave); font-size:17px;}
.pasos{list-style:none; margin-top:36px; counter-reset:paso;}
.pasos li{counter-increment:paso; display:grid; grid-template-columns:44px 1fr; gap:4px 12px; padding:16px 0; border-top:1px solid var(--borde);}
.pasos li::before{content:counter(paso); grid-row:span 2; font-family:var(--f-secundaria); font-weight:700; font-size:30px; line-height:1; color:var(--acento);}
.pasos b{font-family:var(--f-principal); font-weight:700; font-size:18px;}
.pasos span{color:var(--texto-suave); font-size:15px;}
.diag-form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;
  background:var(--crema); color:var(--marino); padding:clamp(24px, 4vw, 40px);
  --texto:var(--marino); --texto-suave:var(--tinta-suave); --acento:var(--verde); --borde:var(--linea);
}
.diag-form .full{grid-column:1 / -1;}
.diag-form h3{font-size:22px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:14px; font-weight:500;}
.field input, .field select, .field textarea{
  width:100%; min-height:48px; padding:12px 14px; font-size:16px;
  background:var(--crema-claro); border:1px solid #BDB29A; color:var(--marino); border-radius:0;
}
.field input:focus, .field select:focus{outline:3px solid var(--verde); outline-offset:0; border-color:var(--verde);}
.diag-submit{background:var(--marino) !important; color:var(--crema) !important; border-color:var(--marino) !important;}
.diag-submit:hover{background:var(--verde) !important; border-color:var(--verde) !important;}
.diag-submit:disabled{opacity:.6; cursor:wait;}
.diag-status{font-size:15px; font-weight:500;}
.diag-status.ok{color:var(--verde);}
.diag-status.err{color:var(--marino); font-weight:600;}
.diag-legal{font-size:13px; color:var(--tinta-suave);}
.diag-legal a{color:var(--verde); border-bottom:1px solid currentColor;}
.honeypot{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
@media (max-width:900px){ .diag-grid{grid-template-columns:1fr;} }
@media (max-width:600px){ .diag-form{grid-template-columns:1fr;} }

/* ---------- Newsletter ---------- */
.newsletter{padding:clamp(56px, 7vw, 88px) 0; border-top:1px solid var(--borde);}
.news-inner{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); align-items:center; gap:32px 56px;}
.news-inner h3, .news-inner h2{font-size:clamp(24px, 2.4vw, 30px); max-width:22ch;}
.news-note{color:var(--texto-suave); font-size:15px; margin-top:8px;}
.news-form{display:flex; flex-wrap:wrap; width:100%;}
.news-form input[type="email"]{flex:1; min-width:0; min-height:52px; padding:0 16px; font-size:16px; background:var(--campo); border:1px solid var(--texto); border-right:0; color:var(--texto);}
.news-form button{min-height:52px; padding:0 22px; background:var(--marino); color:var(--crema); border:1px solid var(--marino); font-weight:600; cursor:pointer;}
.news-form button:hover{background:var(--verde); border-color:var(--verde);}
:root[data-theme="dark"] .news-form button{background:var(--menta); color:var(--marino); border-color:var(--menta);}
.news-form button:disabled{opacity:.6; cursor:wait;}
.news-status{flex-basis:100%; font-size:14px; margin-top:10px; min-height:1.3em;}
.news-status.ok{color:var(--acento);}
.news-status.err{font-weight:600;}
.news-status a{color:inherit; font-weight:600; border-bottom:1px solid currentColor;}
.news-hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
@media (max-width:800px){ .news-inner{grid-template-columns:1fr;} }

/* ---------- Pie ---------- */
footer{background:var(--fondo-alt); border-top:1px solid var(--borde); padding:64px 0 28px; font-size:15px;}
.footer-inner{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 2fr); gap:40px;}
.footer-lema{margin-top:14px; color:var(--texto-suave); max-width:30ch;}
.footer-cols{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px;}
.fcol{display:flex; flex-direction:column; gap:8px;}
.fcol h5{font-family:var(--f-principal); font-size:15px; margin-bottom:6px;}
.fcol a{color:var(--texto-suave); overflow-wrap:anywhere;}
.fcol a:hover{color:var(--texto);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:20px; border-top:1px solid var(--borde); font-size:13px; color:var(--texto-suave);}
.foot-bottom a{border-bottom:1px solid var(--borde);}
@media (max-width:800px){ .footer-inner{grid-template-columns:1fr;} .footer-cols{grid-template-columns:1fr 1fr;} }

/* WhatsApp flotante */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:40; width:54px; height:54px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;}
.wa-float svg{width:28px; height:28px; fill:#fff;}
@media (max-width:600px){ .wa-float{right:14px; bottom:14px; width:48px; height:48px;} .wa-float svg{width:24px; height:24px;} }

/* ---------- Páginas internas ---------- */
.page-header{padding:clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px); border-bottom:1px solid var(--borde);}
.page-header h1{font-size:clamp(36px, 5vw, 64px); line-height:1.04; letter-spacing:-.02em; max-width:18ch;}
.page-header .lede{font-size:clamp(17px, 1.5vw, 20px); color:var(--texto-suave); margin-top:20px; max-width:58ch;}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--texto-suave); margin-bottom:28px;}
.back-link:hover{color:var(--texto);}
.back-link svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}

.nota{border-left:3px solid var(--acento); padding:4px 0 4px 20px; margin-top:32px; max-width:62ch;}
.nota b{font-family:var(--f-principal); font-weight:700; font-size:17px;}
.nota p{color:var(--texto-suave); font-size:16px; margin-top:4px;}

/* Pasos de «Trabaja conmigo» (secuencia real) */
.proceso{list-style:none; counter-reset:paso; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px;}
.proceso li{counter-increment:paso; border-top:2px solid var(--texto); padding-top:18px;}
.proceso li::before{content:counter(paso); display:block; font-family:var(--f-secundaria); font-weight:700; font-size:44px; line-height:1; color:var(--acento); margin-bottom:14px;}
.proceso h3{font-size:20px; margin-bottom:8px;}
.proceso p{font-size:15px; color:var(--texto-suave);}
@media (max-width:960px){ .proceso{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .proceso{grid-template-columns:1fr;} }

.etapas{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(28px, 5vw, 64px);}
.etapa{border-top:2px solid var(--texto); padding-top:22px;}
.etapa-hoy{border-top-color:var(--acento);}
.etapa h3{font-size:24px;}
.etapa .cuando{font-size:14px; color:var(--texto-suave); margin:4px 0 14px;}
.etapa > p{font-size:16px;}
.etapa h4{font-size:16px; margin:22px 0 8px;}
.etapa ul{list-style:none;}
.etapa li{position:relative; padding:6px 0 6px 22px; font-size:15px; border-bottom:1px solid var(--borde);}
.etapa li::before{content:""; position:absolute; left:2px; top:17px; width:10px; height:2px; background:var(--acento);}
.etapa .no-es{font-size:15px; color:var(--texto-suave); margin-top:18px;}
.etapa .enlace{display:inline-block; margin-top:22px;}
@media (max-width:800px){ .etapas{grid-template-columns:1fr;} }

/* FAQ */
.faq details{border-bottom:1px solid var(--borde); padding:20px 0;}
.faq details:first-of-type{border-top:1px solid var(--borde);}
.faq summary{cursor:pointer; list-style:none; font-family:var(--f-principal); font-weight:600; font-size:19px; display:flex; justify-content:space-between; gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--acento); font-size:24px; line-height:1;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin-top:12px; color:var(--texto-suave);}

/* Recursos: biblioteca con «de aquí tomo» */
.libros{list-style:none; border-top:1px solid var(--borde);}
.libro{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:12px 40px; padding:28px 0; border-bottom:1px solid var(--borde);}
.libro h3{font-size:22px;}
.libro .autor{font-size:15px; color:var(--texto-suave); margin-top:4px;}
.libro .tema-libro{font-family:var(--f-secundaria); font-size:14px; font-weight:600; color:var(--acento); margin-top:10px;}
.libro .tomo b{font-family:var(--f-principal); font-weight:700; display:block; margin-bottom:4px;}
.libro .tomo p{font-size:16px;}
.libro .tomo .no-tomo{color:var(--texto-suave); font-size:15px; margin-top:10px;}
@media (max-width:760px){ .libro{grid-template-columns:1fr;} }

/* Privacidad y textos largos */
.privacy-body{padding:48px 0 96px;}
.privacy-body .wrap{max-width:820px;}
.privacy-body h2{font-size:24px; margin:40px 0 12px;}
.privacy-body p, .privacy-body li{color:var(--texto); margin-bottom:12px;}
.privacy-body ul{padding-left:20px;}
.privacy-body a{color:var(--acento); border-bottom:1px solid currentColor;}

/* ---------- Artículos ---------- */
.article-header{padding:clamp(48px, 7vw, 80px) 0 40px; border-bottom:1px solid var(--borde);}
.article-header .wrap{max-width:860px;}
.article-header h1{font-size:clamp(32px, 4.4vw, 52px); line-height:1.08; letter-spacing:-.02em; margin-top:8px;}
.article-meta{display:flex; flex-wrap:wrap; gap:6px 10px; font-size:14px; color:var(--texto-suave); margin-top:18px;}
.article-cover{width:min(260px, 60%); height:auto; margin-top:32px; background:var(--fondo-alt); border:1px solid var(--borde);}
.article-body{padding:48px 0 24px;}
.article-body .wrap{max-width:760px;}
.article-body article p, .article-body article li{font-size:18px; line-height:1.75; margin-bottom:22px;}
.article-body article h2{font-size:clamp(26px, 3vw, 34px); margin:52px 0 18px;}
.article-body article h3{font-size:22px; margin:36px 0 12px;}
.article-body article ul, .article-body article ol{padding-left:22px; margin-bottom:22px;}
.article-body article blockquote{border-left:3px solid var(--acento); padding-left:20px; margin:28px 0; font-family:var(--f-principal); font-weight:600; font-size:22px; line-height:1.35;}
.article-body article a{color:var(--acento); border-bottom:1px solid currentColor;}
.article-body article strong{font-weight:600;}
.article-body article img{margin:28px 0; border:1px solid var(--borde);}
.article-body article table{width:100%; border-collapse:collapse; margin:24px 0; font-size:15px;}
.article-body article th, .article-body article td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--borde); vertical-align:top;}
.article-sources{margin-top:48px; padding-top:24px; border-top:1px solid var(--borde); font-size:15px;}
.article-sources h2, .article-sources h3{font-size:20px !important; margin:0 0 12px !important;}
.article-sources li, .article-sources p{font-size:15px !important; margin-bottom:8px !important;}
.article-sources a{color:var(--acento); border-bottom:1px solid currentColor;}
.article-cta{background:var(--marino); color:var(--crema); padding:clamp(28px, 4vw, 44px); margin:48px 0 8px;
  --texto:var(--crema); --texto-suave:#C3C7D0; --acento:var(--menta);}
.article-cta h3{font-size:24px; margin:0 0 10px !important; color:var(--crema);}
.article-cta p{color:#C3C7D0 !important; font-size:16px !important;}
.article-cta .btn-primary{background:var(--menta); color:var(--marino); border-color:var(--menta); border-bottom:0 !important;}
.article-cta .btn-primary:hover{background:var(--crema); border-color:var(--crema);}
.related{margin-top:40px; padding-top:24px; border-top:1px solid var(--borde);}
.related h3{font-size:19px; margin-bottom:12px !important;}
.related a{display:block; padding:10px 0; color:var(--texto) !important; border-bottom:1px solid var(--borde) !important;}
.related a:hover{color:var(--acento) !important;}
.author-box{display:flex; gap:20px; align-items:flex-start; margin:48px 0 32px; padding:24px 0; border-top:2px solid var(--texto); border-bottom:1px solid var(--borde);}
.author-box img{width:64px; height:64px; flex:none; object-fit:cover; border-radius:50%;}
.author-kicker{font-family:var(--f-principal); font-weight:700; font-size:17px !important; margin:0 0 6px !important; color:var(--texto) !important;}
.article-body article .author-box p{font-size:16px; color:var(--texto-suave); margin:0 0 12px;}
.author-links{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px; font-weight:600;}
.author-box .author-links a{color:var(--acento); border-bottom:1px solid currentColor;}
@media (max-width:600px){ .author-box{flex-direction:column; gap:12px;} }

.article-rating{padding:24px 0 88px;}
.article-rating .wrap{max-width:760px;}
.rating-box{border:1px solid var(--borde); padding:clamp(24px, 4vw, 36px); text-align:center; background:var(--fondo-alt);}
.rating-box h3{font-size:21px; margin-bottom:8px;}
.rating-box p{font-size:15px; color:var(--texto-suave); margin:0 auto 18px;}
.stars{display:flex; gap:8px; justify-content:center;}
.star{width:44px; height:44px; background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.star svg{width:30px; height:30px; fill:none; stroke:var(--texto-suave); stroke-width:1.6; transition:transform .15s ease;}
.star:hover svg, .star.hovered svg{stroke:var(--acento); transform:scale(1.08);}
.star.selected svg{fill:var(--acento); stroke:var(--acento);}
.rating-status{font-size:14px; margin-top:12px; min-height:1.3em; color:var(--acento);}

/* Blog: puente hacia el trabajo */
.blog-bridge{margin-top:56px; padding-top:28px; border-top:2px solid var(--texto);}
.blog-bridge h3{font-size:22px; margin-bottom:8px;}
.blog-bridge p{color:var(--texto-suave); margin-bottom:14px;}
.blog-bridge a.link{color:var(--acento); font-weight:600; border-bottom:1px solid currentColor;}
.blog-bridge .note{font-size:14px; margin:14px 0 0;}

/* 404 */
.error-page{padding:clamp(64px, 10vw, 140px) 0;}
.error-page h1{font-size:clamp(40px, 5.6vw, 70px); line-height:1.08; max-width:16ch; display:flex; flex-direction:column; gap:8px;}
.error-page h1 .tachado{font-family:var(--f-secundaria); font-weight:500; font-size:clamp(22px, 2.6vw, 32px);}

/* Íconos SVG heredados en piezas que no se reescribieron */
.icon{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:inline-block;}

/* Ajustes tras revisar capturas */
.sobre-texto h2{max-width:20ch;}
.grid3 + .temas{margin-top:72px;}
@media (max-width:900px){ .sobre-foto{max-width:300px;} }
@media (max-width:600px){ .card .thumb{aspect-ratio:16/10;} .card .thumb img{object-fit:contain;} }
.article-header .back-link{display:flex; width:max-content;}
.error-page h1 .haz{display:block;}


/* ============================================================
   Correcciones generales (26 oct 2026)
   ============================================================ */
/* La foto de «Sobre mí» traía height="1000" en el HTML y se estiraba: la altura la decide la proporción */
.sobre-foto img{height:auto;}

/* Desplegables de la home: abiertos en escritorio, cerrados en el teléfono (site.js) */
details.limites > summary, details.combinaciones > summary{cursor:pointer; list-style:none;}
details.limites > summary::-webkit-details-marker, details.combinaciones > summary::-webkit-details-marker{display:none;}
details.limites > summary{display:grid; grid-template-columns:1fr auto; column-gap:16px;}
details.limites > summary h3{grid-column:1;}
details.limites > summary p{grid-column:1; color:var(--texto-suave); font-size:16px;}
details.limites > summary::after, details.combinaciones > summary::after{
  content:"+"; grid-column:2; grid-row:1; font-family:var(--f-secundaria); font-size:26px; line-height:1; color:var(--acento);}
details.limites[open] > summary::after, details.combinaciones[open] > summary::after{content:"\2212";}
details.combinaciones{margin-top:56px;}
details.combinaciones > summary{display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-top:2px solid var(--texto);
  font-family:var(--f-principal); font-weight:700; font-size:18px;}
details.combinaciones .overlaps{margin-top:8px;}

/* Formulario: opciones tocables en vez de listas desplegables */
fieldset.opciones{border:0; padding:0; margin:0; min-width:0;}
fieldset.opciones legend{font-size:14px; font-weight:500; margin-bottom:8px; padding:0;}
.opciones-lista{display:flex; flex-direction:column; gap:8px;}
.opciones-cortas .opciones-lista{flex-direction:row; flex-wrap:wrap;}
.opcion{position:relative; display:block; cursor:pointer;}
.opcion input{position:absolute; opacity:0; width:1px; height:1px;}
.opcion span{display:flex; align-items:center; min-height:46px; padding:10px 14px; font-size:15px; line-height:1.35;
  background:var(--crema-claro); border:1px solid #BDB29A; color:var(--marino); transition:border-color .12s ease, background-color .12s ease;}
.opcion:hover span{border-color:var(--marino);}
.opcion input:checked + span{border-color:var(--verde); box-shadow:inset 0 0 0 1px var(--verde); background:#E4EEE5; font-weight:500;}
.opcion input:focus-visible + span{outline:3px solid var(--verde); outline-offset:2px;}

/* Barra fija de acción (la crea site.js; solo se muestra en el teléfono) */
.barra-accion{display:none;}

/* ============================================================
   Teléfono (hasta 760 px)
   Investigación: zona del pulgar (Hoober), desplegables solo
   para contenido secundario (NN/g), opciones visibles en vez
   de listas (Baymard), carrusel con la tarjeta siguiente asomada.
   ============================================================ */
@media (max-width:760px){
  body{font-size:16px; padding-bottom:76px;}
  h2{font-size:clamp(26px, 7.4vw, 32px);}
  .seccion{padding:56px 0;}
  .seccion-cabeza{margin-bottom:28px;}
  .seccion-cabeza p{font-size:16px;}
  .antetitulo{font-size:12px; margin-bottom:12px;}
  .wa-float{display:none;}


  /* La cadena, más compacta */
  .cadena{padding:52px 0;}
  .cadena-lista{margin-top:24px;}
  .cadena-lista li{padding:12px 0; font-size:20px;}
  .cadena-lista li::before{font-size:28px;}
  .cadena-pie{font-size:16px; margin-top:24px;}

  /* Sobre mí: foto pequeña junto al título, no gigante */
  .sobre-grid{grid-template-columns:88px minmax(0, 1fr); gap:0 16px; align-items:center;}
  .sobre-texto{display:contents;}
  .sobre-texto > *{grid-column:1 / -1;}
  .sobre-texto > .antetitulo, .sobre-texto > h2{grid-column:2;}
  .sobre-texto > .antetitulo{grid-row:1; align-self:end; margin-bottom:4px;}
  .sobre-texto > h2{grid-row:2; align-self:start; font-size:24px;}
  .sobre-foto{grid-column:1; grid-row:1 / span 2; position:static; max-width:none; margin:0;}
  .sobre-foto img{aspect-ratio:1; border-radius:50%; object-position:50% 22%;}
  .sobre-foto figcaption{display:none;}
  .sobre-texto > p{font-size:16px; margin-top:14px;}
  .sobre-texto > p:first-of-type{margin-top:22px;}
  .habilidades{margin-top:24px;}
  .habilidades li{padding:14px 0;}
  .habilidades b{font-size:17px;}
  .habilidades span{font-size:15px;}
  .limites{margin-top:24px; border-bottom:1px solid var(--borde); padding-bottom:4px;}
  .limites > summary{padding:6px 0 10px;}
  .limites h3{font-size:17px;}
  .limites > summary p{font-size:14px;}

  /* Método: diagrama más chico y combinaciones plegadas */
  .venn{max-width:270px;}
  .circles-layout{gap:24px;}
  .circle-list{gap:20px;}
  .circle-item{padding-left:16px;}
  .circle-item h3{font-size:20px;}
  .circle-item p{font-size:15px;}
  details.combinaciones{margin-top:32px;}
  .overlaps{gap:14px;}

  /* Artículos: fila deslizable, con la siguiente tarjeta asomada */
  #casos .section-head{margin-bottom:24px;}
  #casos .grid3{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--margen)); padding:0 var(--margen) 12px; scroll-padding-left:var(--margen); scrollbar-width:none;}
  #casos .grid3::-webkit-scrollbar{display:none;}
  #casos .grid3 .card{flex:0 0 80%; scroll-snap-align:start;}
  .card .thumb{aspect-ratio:4/3;}
  .card h3{font-size:18px;}
  .card p{font-size:14px;}
  .grid3 + .temas{margin-top:36px;}
  .temas{grid-template-columns:1fr 1fr; column-gap:16px;}
  .tema{padding:14px 0;}
  .tema h3{font-size:16px; margin:0;}
  .tema p{display:none;}

  /* Diagnóstico y formulario */
  .diag-grid{gap:32px;}
  .pasos{margin-top:24px;}
  .pasos li{padding:12px 0; grid-template-columns:36px 1fr;}
  .pasos li::before{font-size:24px;}
  .pasos b{font-size:16px;}
  .diag-intro .tachado-linea{display:none;}
  .diag-form{margin:0 calc(-1 * var(--margen)); padding:28px var(--margen); gap:16px;}
  .opciones-lista{gap:6px;}
  .opcion span{min-height:42px; padding:8px 12px; font-size:14px;}
  #diagnostico{padding-bottom:0;}

  .newsletter{padding:48px 0;}
  footer{padding:44px 0 24px;}

  /* Trabaja conmigo: número al lado del título, no encima */
  .proceso{gap:0;}
  .proceso li{display:grid; grid-template-columns:40px 1fr; column-gap:12px; padding:16px 0; border-top-width:1px;}
  .proceso li::before{grid-row:span 2; font-size:30px; margin:0;}
  .proceso h3{font-size:18px; margin-bottom:4px;}

  /* Barra fija abajo: lo más importante, donde llega el pulgar */
  .barra-accion{display:flex; gap:10px; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(241,237,227,.16);
    transform:translateY(110%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s;}
  .barra-accion.visible{transform:none; visibility:visible; transition:transform .25s ease;}
  .barra-accion .btn{flex:1; min-height:50px; font-size:15px;}
  .barra-accion .wa{flex:none; width:50px; height:50px; display:flex; align-items:center; justify-content:center; border:2px solid rgba(241,237,227,.7);}
  .barra-accion .wa svg{width:24px; height:24px; fill:var(--crema);}
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){ .barra-accion, .barra-accion.visible{transition:none;} }

/* ---------- Teléfono y computadora: lo que cambia según la pantalla (26 oct 2026) ----------
   Regla: la misma información en ambos; en el teléfono cambia el orden y lo secundario se pliega.
   Solo lo visual que repite algo ya escrito (el diagrama) queda fuera del teléfono. */
.solo-telefono{display:none;}
.form-plegable > summary{display:none;}
@media (max-width:760px){
  .solo-telefono{display:block;}
  .venn{display:none;}
  .wa-postular{margin-top:28px;}
  .wa-postular .btn{width:100%;}
  .wa-postular p{font-size:14px; color:var(--texto-suave); margin-top:10px;}
  .form-plegable > summary{display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none;
    padding:16px 0; border-top:1px solid var(--borde); font-weight:600; font-size:16px;}
  .form-plegable > summary::-webkit-details-marker{display:none;}
  .form-plegable > summary::after{content:"+"; font-family:var(--f-secundaria); font-size:26px; line-height:1; color:var(--acento);}
  .form-plegable[open] > summary::after{content:"‘2";}
  .form-plegable[open] > summary{margin-bottom:8px;}
  .diag-grid{gap:20px;}
  #diagnostico{padding-bottom:40px;}
  .form-plegable[open] ~ *, #diagnostico:has(.form-plegable[open]){padding-bottom:0;}
}

/* Firma del artículo: enlace al autor */
.article-meta a{color:inherit; border-bottom:1px solid currentColor;}
.article-meta a:hover{color:var(--acento);}