/* Portada con el estilo de floema.com: fondo cálido, fotos flotando alrededor del titular, capítulos a pantalla completa que se apilan,
   misión en letra grande, índice gigante de la fisura y bloque oscuro. Clases «pf-» para no chocar con el resto de la web. */
main.pf{--fondo:#e3d9c9;--fondo-claro:#ece4d6;--line:rgba(29,42,48,.14);background:#ece4d6}
.pf .disp{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.04;text-transform:none}
.pf-nube figure,.pf-fichas figure{margin:0;padding:0;background:none;border:0;border-radius:0;max-width:none;flex:none}.pf-nube figure img,.pf-fichas figure img{border-radius:0}
.pf-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Portada: titular y nube de fotos (al bajar, se acercan: /portada.js) */
/* De fondo, un puzle de fotos muy suaves: piezas encajadas, cada una con una foto, que van cambiando al azar (lo monta /portada.js);
   delante, detrás del titular, el logo de ASPANIF grande y difuminado */
.pf-mosaico{position:absolute;inset:0;overflow:hidden}
.pf-mosaico svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pz-img{opacity:0;transition:opacity 1.8s ease}
.pz-img.ver{opacity:.34}
.pz-borde{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.5;stroke-linejoin:round}
.pf-mosaico::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--fondo-claro) 0 22%,rgba(236,228,214,.55) 55%,rgba(236,228,214,.1) 85%)}
.pf-logo-fondo{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.pf-logo-fondo img{width:min(78vmin,640px);height:auto;opacity:.16;filter:blur(7px) saturate(1.2)}
@media (max-width:640px){.pf-logo-fondo img{width:92vmin;opacity:.14}.pz-img.ver{opacity:.38}.pf-mosaico::after{background:radial-gradient(ellipse at center,rgba(236,228,214,.7) 0 30%,rgba(236,228,214,.25) 70%,rgba(236,228,214,0) 100%)}}
@media (prefers-reduced-motion:reduce){.pz-img{transition:none}}
/* Botón para parar el cambio de fotos del fondo (accesibilidad: lo que se mueve solo más de 5 s se tiene que poder parar). Lo enseña /portada.js */
.pf-pausa{display:inline-flex;align-items:center;gap:.45rem;min-height:32px;padding:.3rem .85rem;border:1px solid rgba(29,42,48,.18);border-radius:999px;background:rgba(255,255,255,.8);color:var(--ink);font:600 .8125rem var(--display);letter-spacing:.02em;text-transform:none;cursor:pointer}
.pf-pausa[hidden]{display:none}.pf-pie{align-items:center}.pf-pie>*{white-space:nowrap}
.pf-pausa:hover{background:var(--white)}
.pf-pausa-ico{width:10px;height:11px;border-inline:3px solid currentColor;box-sizing:border-box}
.pf-pausa[aria-pressed=true] .pf-pausa-ico{border:0;border-left:10px solid currentColor;border-block:6px solid transparent;width:0;height:0}
section.pf-hero{position:relative;height:190vh;padding:0}
.pf-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;perspective:900px}
.pf-nube{position:absolute;inset:0;transform-style:preserve-3d}
.pf-nube figure{position:absolute;margin:0;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%) translateZ(var(--z));opacity:var(--o,1);animation:pf-flota var(--t,9s) ease-in-out infinite alternate}
.pf-nube img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover}
.pf-nube .pf-color{aspect-ratio:1;background:var(--c)}
@keyframes pf-flota{to{translate:var(--dx,6px) var(--dy,-10px)}}
@media (prefers-reduced-motion:reduce){.pf-nube figure{animation:none}}
.pf-centro{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center;padding:0 20px}
.pf-centro h1{font-size:clamp(2.5rem,6.6vw,5.4rem);max-width:13ch}
.pf-centro .sub{font:500 clamp(1rem,1.4vw,1.2rem)/1.4 var(--display);max-width:40ch;color:var(--muted)}
.pf-centro .actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pf-pie{position:absolute;left:clamp(20px,4vw,90px);right:clamp(20px,4vw,90px);bottom:22px;z-index:2;display:flex;justify-content:space-between;gap:1rem;font:600 .8125rem var(--display);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:640px){.pf-centro .actions{flex-direction:row;gap:.45rem}.pf-centro .actions .btn{width:auto;padding:.55rem 1rem;font-size:.9rem}.pf-centro h1{font-size:2.4rem}.pf-nube figure{width:calc(var(--w) * .55)}.pf-pie{justify-content:center}.pf-pie span:first-child{display:none}}
.pf-num{border-top:1px solid rgba(255,255,255,.55);padding-top:.6rem;font:600 .8125rem var(--display);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem}
.pf-tag{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.35rem .85rem .25rem;font:600 .8rem var(--display);letter-spacing:.04em;color:var(--ink);background:var(--c,var(--mint))}
/* Misión en letra grande y «¿Sabías que…?» */
section.pf-mision{background:#ece4d6;display:grid;grid-template-columns:minmax(140px,1fr) 3fr minmax(240px,1.25fr);gap:clamp(24px,4vw,60px);padding:clamp(70px,9vw,130px) clamp(20px,4vw,90px)}
.pf-lado{font:600 .95rem/1.25 var(--display)}
.pf-lado img{width:130px;aspect-ratio:1;object-fit:cover;margin-top:1.4rem}
.pf-texto{display:flex;flex-direction:column;gap:1.4rem}
.pf-texto .disp{font-size:clamp(1.6rem,3.2vw,2.9rem);text-wrap:pretty}
.pf-texto em{font-style:normal;background:linear-gradient(transparent 62%,var(--mint) 62%)}
.pf-texto p:not(.disp){color:var(--muted);max-width:60ch}
.pf-sab{display:grid;gap:12px;align-content:start}
.pf-sab h2{font:600 .8rem var(--display);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .2rem}
.pf-dato{background:#fff;border-radius:18px;padding:1.1rem 1.25rem;border:1px solid rgba(29,42,48,.11)}
.pf-dato b{display:block;font:500 2.1rem/1.05 var(--display);letter-spacing:-.02em}
.pf-dato span{display:block;margin-top:.55rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.pf-dato.v{background:#e1f1ee;border-color:transparent}.pf-dato.v b{color:#17707c}.pf-dato.v span{color:var(--ink)}   /* el segundo dato, en el tono suave verde azulado (antes verde pistacho) */
.pf-sab .lnk{font:600 .8125rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
@media (max-width:980px){section.pf-mision{grid-template-columns:1fr}.pf-lado img{display:none}}
/* Lo que hacemos: cuatro columnas numeradas */
section.pf-cuatro{background:#ece4d6;padding:0 clamp(20px,4vw,90px) clamp(70px,9vw,120px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px)}
.pf-cuatro div{border-top:1px solid var(--line);padding-top:1rem}
.pf-cuatro span{font:600 .8125rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pf-cuatro h3{margin:.6rem 0 .5rem;font:500 1.65rem/1.1 var(--display);letter-spacing:-.01em;text-transform:none}
.pf-cuatro p{color:var(--muted);font-size:.95rem;line-height:1.55}
@media (max-width:900px){section.pf-cuatro{grid-template-columns:1fr 1fr}}
@media (max-width:520px){section.pf-cuatro{grid-template-columns:1fr}}
/* Rótulo fino con número a la derecha */
.pf-rotulo{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:.7rem;margin:0 0 1.2rem;font:600 .8rem var(--display);letter-spacing:.08em;text-transform:uppercase}
/* Cómo ayudamos: fichas grandes sobre fondo tostado */
section.pf-ayuda{background:#ece4d6;padding:clamp(40px,5vw,70px) clamp(20px,4vw,90px) clamp(70px,9vw,120px)}
.pf-fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pf-fichas>a{background:#e3d9c9;border-radius:4px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-height:520px;transition:background .25s}
.pf-fichas>a:hover{background:#dbd0be}
.pf-fcab{padding:1.1rem 1.25rem;display:grid;gap:.55rem;justify-items:start}
.pf-fichas h3{font:500 1.45rem/1.15 var(--display);letter-spacing:-.01em;text-transform:none}
.pf-fichas p{color:var(--muted);font-size:.95rem;line-height:1.5;max-width:36ch}
.pf-fichas figure{margin:auto 0 0;overflow:hidden}
.pf-fichas figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pf-fichas>a:hover figure img{transform:scale(1.05)}
.pf-fpie{display:flex;justify-content:space-between;padding:.9rem 1.25rem;font:600 .8125rem var(--display);letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)}
@media (max-width:900px){.pf-fichas{grid-template-columns:1fr}.pf-fichas>a{min-height:0}}


/* Testimonios: fotos de antes y de ahora (la de antes, pequeña y girada encima) y la frase en grande */
/* «Somos X familias» (#somos): números grandes y barras por provincia (los rellena /familias.js) */
section.pf-somos{background:var(--fondo);padding:clamp(40px,5vw,70px) clamp(20px,4vw,90px)}
.pf-somos-cuerpo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:start}
.pf-somos-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px) clamp(16px,3vw,36px)}
.pf-somos-cifra{display:flex;flex-direction:column;gap:.3rem;border-top:2px solid var(--ink);padding-top:.8rem}
.pf-somos-cifra b{font-size:clamp(3rem,7vw,6rem);line-height:.95;font-variant-numeric:tabular-nums}
.pf-somos-cifra span{font:500 1rem/1.35 var(--display);color:var(--muted);max-width:22ch}
.pf-somos-mapa{background:var(--white);border-radius:24px;padding:clamp(18px,2.5vw,30px);display:flex;flex-direction:column;gap:.8rem}
.pf-somos-tit{margin:0;font:600 .8rem var(--display);letter-spacing:.08em;text-transform:uppercase}
.pf-somos-prov{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pf-somos-prov li{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) 2.5rem;gap:.7rem;align-items:center;font-weight:600}
.pf-somos-prov b{text-align:right;font-variant-numeric:tabular-nums}
.pf-somos-barra{height:.85rem;background:var(--fondo-claro);border-radius:99px;overflow:hidden}
.pf-somos-barra i{display:block;height:100%;width:var(--w);background:var(--mint);border-radius:99px}
@media (prefers-reduced-motion:no-preference){.pf-somos .pf-somos-barra i{transition:width 1.2s cubic-bezier(.2,.8,.2,1)}.pf-somos:not(.visto) .pf-somos-barra i{width:0}}
.pf-somos-nota{margin:0;font-size:.85rem;color:var(--muted)}.pf-somos-mapa .btn{align-self:flex-start}
@media (max-width:860px){.pf-somos-cuerpo{grid-template-columns:1fr}}
section.pf-testim{background:var(--fondo-claro);padding:clamp(40px,5vw,70px) clamp(20px,4vw,90px) clamp(70px,9vw,120px)}
.pf-testi-lista.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 0 1.5rem}
.pf-testi{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,80px);align-items:center}
.pf-testi-fotos{position:relative;padding:0 0 12% 18%}
.pf-testi figure{margin:0;padding:0;border:0;background:none;max-width:none;flex:none;position:relative}
.pf-testi figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.pf-testi .antes{position:absolute;left:0;bottom:0;width:46%;rotate:-5deg;background:var(--white);padding:8px 8px 10px;border-radius:8px;box-shadow:0 14px 34px rgba(29,42,48,.22)}
.pf-testi .antes img{border-radius:3px}
.pf-testi figcaption{position:absolute;top:.8rem;right:.8rem;background:var(--white);color:var(--ink);border-radius:999px;padding:.3rem .75rem .2rem;font:700 .8rem var(--display);letter-spacing:.06em;box-shadow:0 3px 10px rgba(29,42,48,.15)}
.pf-testi .antes figcaption{top:auto;bottom:1.1rem;right:auto;left:1rem;background:var(--p-orange)}
.pf-testi .ahora figcaption{background:var(--mint)}
.pf-testi-txt{display:flex;flex-direction:column;gap:1rem;max-width:62ch}
.pf-testi-txt p{color:var(--muted);line-height:1.65}
.pf-testi-txt .pf-testi-cita{color:var(--ink);font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.12;margin-bottom:.6rem}
.pf-testi-firma{font:600 1rem var(--display);color:var(--ink)!important;letter-spacing:.02em}
.pf-testi-mas{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1rem;color:var(--muted)}
.pf-testi-mas a{font-weight:700;color:var(--ink)}
/* Varios testimonios: flechas para pasar de uno a otro (las pone /testimonios.js), una sola foto o ninguna */
.pf-testi-nav{display:flex;justify-content:flex-end;gap:.5rem;margin:-.4rem 0 .8rem}
.pf-testi-nav button{width:44px;height:44px;border-radius:50%;border:0;background:var(--white);color:var(--ink);font:400 1.6rem/1 var(--display);cursor:pointer;box-shadow:0 3px 10px rgba(29,42,48,.12)}
.pf-testi-nav button:hover{background:var(--mint)}
.pf-testi-fotos.una{padding:0}
.pf-testi.sin-fotos{grid-template-columns:1fr}.pf-testi.sin-fotos .pf-testi-txt{max-width:80ch}
@media (max-width:860px){.pf-testi{grid-template-columns:1fr}.pf-testi-fotos{max-width:420px;margin-inline:auto;width:100%}}
/* Bloque oscuro con la frase grande */
/* ===== Portada reorganizada (22/10/2026): «¿Por dónde empezar?» con fichas blancas y su tono, los dos botones de la portada, fondos
   que alternan (beige y claro) para que se note dónde empieza cada apartado, y sin el número de los rótulos ===== */
.pf-acciones .btn.dark span{margin-left:.3rem}
.pf-acceso-txt{margin:.9rem auto 0;max-width:34rem;font-size:.95rem;color:var(--muted)}
.pf-empezar [data-cat=teal]{--acc:#17707c;--tint:#e1f1ee}.pf-empezar [data-cat=azul]{--acc:#2b5c9e;--tint:#e6eef9}.pf-empezar [data-cat=ambar]{--acc:#9a4a0b;--tint:#fcebdc}
section.pf-empezar{padding-top:clamp(56px,7vw,100px)}
.pf-empezar .head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.pf-empezar .pf-fichas{gap:16px;max-width:1400px;margin-inline:auto}
.pf-empezar .pf-fichas>a{background:var(--white);border:1px solid rgba(29,42,48,.11);border-radius:22px;box-shadow:0 1px 2px rgba(29,42,48,.07),0 6px 18px rgba(29,42,48,.08);min-height:0;transition:translate .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.pf-empezar .pf-fichas>a:hover{background:var(--white);translate:0 -4px;box-shadow:0 2px 4px rgba(29,42,48,.06),0 16px 36px rgba(29,42,48,.15);border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
.pf-empezar .pf-tag{background:var(--tint);color:var(--acc)}
.pf-empezar .pf-fcab{padding:1.3rem 1.4rem 1.1rem}
.pf-empezar .pf-fpie{color:var(--acc);border-top:1px solid rgba(29,42,48,.11)}
.pf-empezar .pf-fichas figure img{aspect-ratio:16/10}
#testimonios .pf-rotulo span:last-child{display:none}   /* el número de testimonios (lo pone testimonios.js): fuera, como en los demás rótulos */
.pf-cuatro>div>span{letter-spacing:.1em}
main.pf>section#ayuda,main.pf>section.pf-testim,main.pf>section#encuentros,main.pf>section#socios,main.pf>section#contacto{background:#f4efe6}
main.pf>section#fisura,main.pf>section.pf-mision,main.pf>section.pf-cuatro,main.pf>section#guias,main.pf>section#asociaciones{background:#ece4d6}
main.pf>section#asociaciones{border-top:0!important}
/* En el móvil, «¿Por dónde empezar?» en filas: la foto pequeña a la izquierda y el texto al lado */
@media (max-width:760px){
  .pf-empezar .pf-fichas{gap:12px}
  .pf-empezar .pf-fichas>a{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"img txt" "pie pie";align-items:start}
  .pf-empezar .pf-fichas figure{grid-area:img;margin:16px 0 0 14px;border-radius:14px}
  .pf-empezar .pf-fichas figure img{aspect-ratio:1/1;height:92px}
  .pf-empezar .pf-fcab{grid-area:txt;padding:14px 14px 12px}
  .pf-empezar .pf-fichas h3{font-size:1.2rem}
  .pf-empezar .pf-fichas p{font-size:.9rem}
  .pf-empezar .pf-fpie{grid-area:pie;padding:.75rem 1rem}
}
/* Portada más corta en el móvil (antes, unas 29 pantallas): los 4 capítulos, las guías en un carrusel que se desliza de lado (asoma la
   siguiente ficha para que se vea que hay más) y las asociaciones por comunidades en dos columnas compactas */
@media (max-width:540px){
  #guias #guias-lista{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * clamp(20px,4vw,90px));padding:6px clamp(20px,4vw,90px) 18px;scroll-padding-inline:clamp(20px,4vw,90px);scrollbar-width:none}
  #guias #guias-lista::-webkit-scrollbar{display:none}
  #guias #guias-lista>.guia{flex:0 0 84%;scroll-snap-align:start}
  #asociaciones .guias.minis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  #asociaciones .guia.mini{gap:9px;padding:11px 10px}
  #asociaciones .guia.mini .guia-bandera{width:32px;height:32px;border-radius:10px}
  #asociaciones .guia.mini h3{font-size:.9rem;line-height:1.2}
  #asociaciones .guia.mini .guia-pie{display:none}   /* la flecha y «Web / Sin web»: la ficha entera ya es el enlace; las que no tienen web llevan el borde discontinuo */
  #asociaciones .guia.mini .guia-asoc{font-size:.8125rem}
}
/* «Todo sobre la fisura, pieza a pieza» (temas_puzle): seis piezas que encajan. Cada pieza = .pz-forma (el fondo, con los huecos hechos
   con máscaras) + dos salientes redondos (derecha y abajo) que entran en el hueco de la vecina. Qué salientes y huecos lleva cada pieza
   depende de su sitio en la cuadrícula (3, 2 o 1 columnas): variables --kr, --kb (salientes: block/none) y --hl, --ht (radio del hueco). */
.pz-temas{margin-top:clamp(56px,8vw,110px)}
.pz-titulo{font:600 clamp(1.9rem,3.6vw,3rem)/1.1 var(--display);text-align:center;margin:0}.pz-titulo em{font-style:normal;color:var(--teal)}
.pz-sub{text-align:center;color:var(--muted);font-size:1.08rem;margin:.7rem auto clamp(2.2rem,4vw,3.2rem);max-width:40rem}
.pz-lista{--r:20px;--s:4px;--h:calc(var(--r) + 2 * var(--s));list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
.pz-lista [data-cat=teal]{--acc:#17707c;--tint:#d9efeb}.pz-lista [data-cat=azul]{--acc:#2b5c9e;--tint:#e0eaf8}
.pz-lista [data-cat=ambar]{--acc:#9a4a0b;--tint:#fbe6d2}.pz-lista [data-cat=lila]{--acc:#5b4b9e;--tint:#e8e4f7}
.pz-lista li{--kr:none;--kb:none;--hl:0px;--ht:0px;position:relative;margin:0;padding:0;max-width:none;background:none;border:0}
.pz-lista li:hover,.pz-lista li:focus-within{z-index:2}
.pz-lista a{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;box-sizing:border-box;min-height:255px;padding:calc(var(--s) + 1.35rem) calc(var(--s) + 1.45rem) calc(var(--s) + 1.25rem);
  color:var(--ink);text-decoration:none;filter:drop-shadow(0 6px 10px rgba(29,42,48,.08));transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.pz-forma{position:absolute;inset:var(--s);z-index:-1;border-radius:20px;background:var(--tint);transition:background-color .3s;
  -webkit-mask:radial-gradient(circle at calc(-1 * var(--s)) 50%,#0000 var(--hl),#000 calc(var(--hl) + .5px)),radial-gradient(circle at 50% calc(-1 * var(--s)),#0000 var(--ht),#000 calc(var(--ht) + .5px));
  -webkit-mask-composite:source-in;mask:radial-gradient(circle at calc(-1 * var(--s)) 50%,#0000 var(--hl),#000 calc(var(--hl) + .5px)),radial-gradient(circle at 50% calc(-1 * var(--s)),#0000 var(--ht),#000 calc(var(--ht) + .5px));mask-composite:intersect}
.pz-saliente{position:absolute;z-index:-1;width:calc(2 * var(--r));height:calc(2 * var(--r));border-radius:50%;background:var(--tint);transition:background-color .3s}
.pz-s-der{display:var(--kr);right:calc(-1 * var(--r));top:50%;translate:0 -50%}
.pz-s-abajo{display:var(--kb);bottom:calc(-1 * var(--r));left:50%;translate:-50% 0}
.pz-cab{display:flex;align-items:center;justify-content:space-between}
.pz-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--white);color:var(--acc);transition:background-color .3s,color .3s}
.pz-ico svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pz-num{font:600 2.6rem/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.5;transition:opacity .3s}
.pz-tema{margin-top:1.15rem;font:700 .8125rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);transition:color .3s}
.pz-preg{display:block;margin:.35rem 0 .45rem;font:600 clamp(1.35rem,2vw,1.65rem)/1.15 var(--display);transition:color .3s}
.pz-frase{color:var(--muted);font-size:.98rem;line-height:1.5;transition:color .3s}
.pz-ir{margin-top:auto;padding-top:1rem;font:700 .95rem var(--display);color:var(--acc);transition:color .3s}.pz-ir i{display:inline-block;font-style:normal;transition:translate .3s}
.pz-foto{position:absolute;z-index:3;right:1.4rem;top:-2.4rem;width:150px;aspect-ratio:4/5;object-fit:cover;border:6px solid var(--white);border-radius:10px;
  box-shadow:0 14px 30px rgba(29,42,48,.22);rotate:7deg;scale:.6;opacity:0;pointer-events:none;transition:opacity .3s,scale .45s cubic-bezier(.2,.8,.2,1)}
.pz-lista a:hover,.pz-lista a:focus-visible{transform:translateY(-8px) rotate(-1.2deg);filter:drop-shadow(0 18px 22px rgba(29,42,48,.18))}
.pz-lista a:focus-visible{outline:3px solid var(--acc);outline-offset:4px;border-radius:24px}
.pz-lista a:hover :is(.pz-forma,.pz-saliente),.pz-lista a:focus-visible :is(.pz-forma,.pz-saliente){background:var(--acc)}
.pz-lista a:hover :is(.pz-tema,.pz-preg,.pz-frase,.pz-ir),.pz-lista a:focus-visible :is(.pz-tema,.pz-preg,.pz-frase,.pz-ir){color:var(--white)}
.pz-lista a:hover .pz-ico,.pz-lista a:focus-visible .pz-ico{background:rgba(255,255,255,.18);color:var(--white)}
.pz-lista a:hover .pz-num,.pz-lista a:focus-visible .pz-num{-webkit-text-stroke-color:var(--white);opacity:.7}
.pz-lista a:hover .pz-ir i{translate:5px 0}
.pz-lista a:hover .pz-foto{opacity:1;scale:1}
@media (hover:none){.pz-foto{display:none}}
/* Cómo encajan según el número de columnas */
@media (min-width:1000px){
  .pz-lista li:nth-child(-n+3){--kb:block}.pz-lista li:nth-child(n+4){--ht:var(--h)}
  .pz-lista li:not(:nth-child(3n)){--kr:block}.pz-lista li:not(:nth-child(3n+1)){--hl:var(--h)}
}
@media (min-width:641px) and (max-width:999px){
  .pz-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-lista li:nth-child(-n+4){--kb:block}.pz-lista li:nth-child(n+3){--ht:var(--h)}
  .pz-lista li:nth-child(odd){--kr:block}.pz-lista li:nth-child(even){--hl:var(--h)}
}
@media (max-width:640px){
  .pz-lista{grid-template-columns:1fr;grid-auto-rows:auto;--r:17px}
  .pz-lista li:not(:last-child){--kb:block}.pz-lista li:not(:first-child){--ht:var(--h)}
  /* Compactas: el icono a la izquierda; el tema, la pregunta y «Leer» a su lado (sin la frase ni el número), para no alargar la portada */
  .pz-lista a{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:1rem;align-content:center;min-height:0;padding:calc(var(--s) + 1.05rem) calc(var(--s) + 1.15rem) calc(var(--s) + 1.25rem)}
  .pz-cab{grid-row:1 / span 3;align-self:center}
  .pz-num,.pz-frase{display:none}
  .pz-tema{margin-top:0}.pz-preg{margin:.15rem 0 .25rem;font-size:1.3rem}.pz-ir{padding-top:0}
}
/* Al bajar, las piezas llegan sueltas (cada una desde un lado y algo girada) y se encajan */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pz-lista li{animation:pz-encaja linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .pz-lista li:nth-child(1){--dx:-60px;--dy:40px;--giro:-10deg}.pz-lista li:nth-child(2){--dx:0px;--dy:70px;--giro:7deg}.pz-lista li:nth-child(3){--dx:60px;--dy:35px;--giro:12deg}
    .pz-lista li:nth-child(4){--dx:-50px;--dy:60px;--giro:9deg}.pz-lista li:nth-child(5){--dx:10px;--dy:80px;--giro:-8deg}.pz-lista li:nth-child(6){--dx:55px;--dy:55px;--giro:-12deg}
    @keyframes pz-encaja{from{translate:var(--dx) var(--dy);rotate:var(--giro);opacity:0}55%{opacity:1}to{translate:0 0;rotate:0deg;opacity:1}}
  }
}
/* La pieza de la página en la que se está (seguir_puzle): ya rellena de su color, con «Estás aquí» y sin foto ni movimiento */
.pz-lista .pz-aqui :is(.pz-forma,.pz-saliente){background:var(--acc)}
.pz-lista .pz-aqui :is(.pz-tema,.pz-preg,.pz-frase,.pz-ir){color:var(--white)}
.pz-lista .pz-aqui .pz-ico{background:rgba(255,255,255,.18);color:var(--white)}
.pz-lista .pz-aqui .pz-num{-webkit-text-stroke-color:var(--white);opacity:.7}
.pz-lista .pz-aqui .pz-foto{display:none}
.pz-lista .pz-aqui .pz-ir::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:currentColor;vertical-align:.08em}
.pz-lista .pz-aqui a:hover{transform:none;filter:drop-shadow(0 6px 10px rgba(29,42,48,.08))}
/* El puzle al final de una página (temas, cronología, diagnóstico) */
.pz-seguir .pz-temas{margin-top:0}
.pz-seguir .pz-titulo{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:600;letter-spacing:0}

.migas{font:600 .85rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.migas a{color:var(--muted);text-decoration:none}.migas a:hover{color:var(--teal);text-decoration:underline}
.tema-cab{max-width:900px;margin-inline:auto;display:flex;flex-direction:column;gap:1rem}
.tema-cab h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em;font-weight:500}
/* Cabecera con foto a todo el ancho (como los capítulos de la portada) */
section.tema-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;padding:0;color:#fff;overflow:hidden}
.tema-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tema-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,25,30,.8),rgba(10,25,30,.55) 55%,rgba(10,25,30,.35))}
.tema-hero .wrap{text-shadow:0 1px 3px rgba(0,0,0,.55)}   /* el texto blanco se lee aunque caiga sobre una parte clara de la foto */
.tema-hero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(2.2rem,5vw,4.5rem);display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:1.2rem clamp(0px,4vw,60px);align-items:end}
.tema-hero .migas,.tema-hero .migas a{color:rgba(255,255,255,.85)}.tema-hero .migas{grid-column:1/-1;margin:0}
.tema-hero .pf-num{grid-row:2;align-self:start;margin-top:.9rem}
.tema-hero-txt{grid-row:2;display:flex;flex-direction:column;gap:1.1rem;max-width:900px}
.tema-hero h1{font-size:clamp(2.4rem,5.6vw,4.8rem);color:#fff}
.tema-hero .big{max-width:60ch;color:rgba(255,255,255,.92);font-size:clamp(1.1rem,1.6vw,1.45rem)}
@media (max-width:760px){.tema-hero .wrap{grid-template-columns:1fr}.tema-hero .pf-num{grid-row:auto}.tema-hero-txt{grid-row:auto}}
/* Secciones del artículo numeradas 01, 02… con una raya fina encima */
.tema article.legal{counter-reset:sec}
.tema article.legal>h2{counter-increment:sec;border-top:1px solid var(--line);padding-top:1rem;margin-top:3.2rem;font-size:clamp(1.7rem,3vw,2.5rem)}
.tema article.legal>h2:first-of-type{margin-top:1rem}
.tema article.legal>h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.6rem;font:600 .8125rem var(--display);letter-spacing:.12em;color:var(--muted)}
.tema .legal h2{text-transform:none;letter-spacing:-.015em;font-weight:500}
.tema .legal h3{text-transform:none;letter-spacing:.01em;font-size:1.15rem;margin-top:.6rem}
.tema .legal ul{display:flex;flex-direction:column;gap:.5rem}
.tema .figs figure{max-width:240px}.tema .figs figure img{max-height:210px;object-fit:contain}
.linea{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:.4rem 0 0}
@media (max-width:640px){.linea{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Las etapas del tratamiento: fichas blancas como las del área, la etapa en una pastilla de su tono */
.linea li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;background:var(--white);border:1px solid rgba(29,42,48,.11);border-radius:18px;padding:.9rem 1rem;box-shadow:0 1px 2px rgba(29,42,48,.06),0 4px 12px rgba(29,42,48,.06);transition:translate .25s,box-shadow .25s,border-color .25s}
.linea li:hover{translate:0 -3px;border-color:color-mix(in srgb,var(--acc) 35%,transparent);box-shadow:0 2px 4px rgba(29,42,48,.06),0 12px 26px rgba(29,42,48,.12)}
.linea b{display:inline-block;padding:.28rem .65rem;border-radius:999px;background:var(--tint);color:var(--acc);font:700 .8125rem var(--body);letter-spacing:.02em}
.linea a{display:block;color:var(--ink);font:700 1.02rem/1.3 var(--display);text-decoration:none}.linea a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.linea a:hover,.linea a:focus-visible{color:var(--acc)}
@media (prefers-reduced-motion: reduce){.linea li{transition:none}.linea li:hover{translate:none}}
.tema-nota{background:var(--cream);border-radius:18px;padding:1rem 1.2rem;font-size:.95rem;color:var(--muted)}
.tema-mas{max-width:1150px;margin-inline:auto}
.tema-mas>h2{text-align:center;margin-bottom:1.6rem}
.paso-mas{font-weight:700}.paso-mas a{text-decoration:none}.paso-mas a:hover{text-decoration:underline}
/* Preguntas frecuentes: con las piezas de toda la web (secciones alternas, títulos centrados .head, tarjetas .guia y sombras suaves).
   Cada pregunta es un <details> (se abre sin JavaScript). */
.faq-temas{max-width:1400px;margin-inline:auto;display:grid;gap:1.3rem;grid-template-columns:repeat(5,minmax(0,1fr))}
.faq-temas .guia-icono{font-size:1.6rem}
.faq-temas .guia p{font-size:.92rem}
.faq-temas .guia-pie{justify-content:flex-end}.faq-temas .guia-abrir{font-size:.95rem}
@media (max-width:1150px){.faq-temas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.faq-temas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.faq-temas{grid-template-columns:1fr}}
.faq-grupo{scroll-margin-top:90px}
.faq-bloque{max-width:940px;margin-inline:auto}
.faq-bloque .head{margin-bottom:1.8rem;gap:.8rem}
.faq-num{font:700 .8125rem var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--c);color:var(--ink);border-radius:999px;padding:.4rem 1rem}
.faq-lista{display:flex;flex-direction:column;gap:.9rem}
.faq{background:var(--white);border:0;border-radius:20px;box-shadow:0 8px 24px rgba(29,42,48,.07);transition:box-shadow .25s}
.faq:first-of-type{border-top:0}
.faq[open]{box-shadow:0 16px 34px rgba(29,42,48,.13)}
.faq summary{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.3rem;font:600 1.1rem/1.35 var(--display);text-transform:none;letter-spacing:.01em;color:var(--ink)}
.faq summary::before{content:"?";flex:none;width:40px;height:40px;border-radius:50%;background:var(--c);display:grid;place-items:center;font:700 1.15rem/1 var(--display);color:var(--ink)}
.faq summary::after{content:"+";position:static;flex:none;margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cream);font:700 1.4rem/1 var(--body);color:var(--teal)}
.faq[open] summary::after{content:"–";background:var(--mint);color:var(--mint-ink)}
.faq summary:hover{color:var(--teal)}
.faq-r{margin:0 1.3rem 1.3rem;padding-top:1rem;border-top:1px dashed var(--line);line-height:1.65}
.faq-r p{margin:0}
@media (min-width:600px){.faq-r{margin-left:calc(1.3rem + 56px)}}
.faq-cta{max-width:1150px;margin-inline:auto;background:var(--mint);border-radius:28px;padding:clamp(1.6rem,4vw,2.8rem);display:grid;grid-template-columns:1fr auto;gap:1.2rem 2rem;align-items:center}
.faq-cta h2{font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--mint-ink)}
.faq-cta p{color:var(--mint-ink);margin:.5rem 0 0}
.faq-cta-btns{display:flex;flex-wrap:wrap;gap:.7rem}
.faq-cta .btn{background:var(--white);border-color:var(--white)}
.faq-cta .btn.out{background:transparent;border-color:var(--mint-ink);color:var(--mint-ink)}
.faq-nota{max-width:1150px;margin:1.4rem auto 0}
@media (max-width:760px){.faq-cta{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.faq{transition:none}}
/* «En esta página»: en el móvil, un recuadro plegable encima del artículo; desde 1100 px, una columna fija a la izquierda */
.tema article.legal>h2{scroll-margin-top:100px}
.tema-indice ol{list-style:none;margin:0;padding:0;counter-reset:ti;display:flex;flex-direction:column;gap:.1rem}
.tema-indice li{counter-increment:ti}
.tema-indice a{display:flex;gap:.65rem;padding:.5rem .7rem;border-radius:12px;color:var(--ink);text-decoration:none;font:600 .95rem/1.35 var(--display);transition:background-color .2s,color .2s}
.tema-indice a::before{content:counter(ti,decimal-leading-zero);flex:none;min-width:1.4rem;padding-top:.12rem;font-size:.8125rem;color:var(--muted)}
.tema-indice a:hover,.tema-indice a:focus-visible{background:#e1f1ee;color:#17707c}
.ti-escritorio{display:none}
.ti-movil{max-width:900px;margin:0 auto 1.6rem;background:var(--white);border:1px solid rgba(29,42,48,.11);border-radius:18px;box-shadow:0 1px 2px rgba(29,42,48,.06),0 4px 12px rgba(29,42,48,.06)}
.ti-movil summary{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;cursor:pointer;list-style:none;font:700 .8125rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ti-movil summary::-webkit-details-marker{display:none}
.ti-movil summary span{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;border-radius:999px;background:#e1f1ee;color:#17707c;letter-spacing:0}
.ti-movil summary::after{content:"+";margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e1f1ee;color:#17707c;font:700 1.2rem/1 var(--body)}
.ti-movil[open] summary::after{content:"–";background:#17707c;color:var(--white)}
.ti-movil ol{padding:0 .5rem .8rem}
@media (min-width:1100px){
  .tema-con-indice{display:grid;grid-template-columns:230px minmax(0,900px);gap:clamp(2rem,4vw,4rem);justify-content:center;align-items:start}
  .tema-con-indice>.legal{margin:0}
  .tema-con-indice>.tema-indice{align-self:stretch}   /* la columna, tan alta como el artículo: así el índice tiene recorrido para quedarse fijo */
  .ti-movil{display:none}
  .ti-escritorio{display:block;position:sticky;top:110px;padding-top:1rem}
  .ti-escritorio p{margin:0 0 .7rem .7rem;font:700 .8125rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .ti-escritorio ol{border-left:2px solid rgba(29,42,48,.1);padding-left:.4rem}
}
/* Tonos del área para las páginas de tema (data-cat): etapas del tratamiento y temas de las preguntas frecuentes */
.tema [data-cat=teal]{--acc:#17707c;--tint:#e1f1ee}.tema [data-cat=azul]{--acc:#2b5c9e;--tint:#e6eef9}
.tema [data-cat=ambar]{--acc:#9a4a0b;--tint:#fcebdc}.tema [data-cat=lila]{--acc:#5b4b9e;--tint:#ece9f7}
.tema [data-cat]{--c:var(--tint)}
/* Preguntas frecuentes: la etiqueta «Tema N», el «?» de cada pregunta y el «–» de la abierta, en el tono del tema */
.faq-grupo .faq-num{background:var(--tint);color:var(--acc)}
.faq-grupo .faq summary::before{background:var(--tint);color:var(--acc)}
.faq-grupo .faq summary:hover{color:var(--acc)}
.faq-grupo .faq[open] summary::after{background:var(--acc);color:var(--white)}
.faq-grupo .faq{border:1px solid rgba(29,42,48,.08)}
/* «Qué es la fisura» (rediseño 23/10/2026): fichas, tipos con zonas, causas en columnas, cifras y pasos. Prefijo .tema .legal para ganar a
   los estilos de texto del artículo (.tema .legal ul es una columna flexible). Colores: los data-cat de las páginas de tema + coral. */
.tema [data-cat=coral]{--acc:#a8402f;--tint:#fbe4de}
.tema .legal .qe-claves{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.tema .legal .qe-claves li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:1rem;align-content:start;margin:0;padding:1.15rem 1.25rem;background:var(--white);border:1px solid var(--line);border-radius:18px}
.qe-ico{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--acc)}
.qe-ico svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tema .legal .qe-claves b{font:600 1.15rem/1.25 var(--display);color:var(--acc);margin-top:.15rem}
.tema .legal .qe-claves span:not(.qe-ico){color:var(--muted);line-height:1.5}
.tema .legal .qe-nota{background:#e1f1ee;border-radius:16px;padding:1rem 1.2rem}.qe-nota b{color:#17707c}
.qe-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem}
.qe-tipo{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.tema .legal .qe-tipo h3{margin:0;font-size:1.12rem;color:#2b5c9e}
.tema .legal .qe-tipo p{margin:0;line-height:1.5}
.qe-zonas{display:flex;flex-wrap:wrap;gap:.35rem}
.qe-z{padding:.2rem .65rem;border-radius:999px;border:1.5px dashed #b8c2c7;color:#6b777d;font:600 .8125rem var(--display);letter-spacing:.02em}
.qe-z.si{border:1.5px solid #2b5c9e;background:#2b5c9e;color:var(--white)}
.qe-z.si.oculta{background:#e6eef9;color:#2b5c9e;border-style:dashed}
.qe-tipo-mas{background:#e6eef9;border-color:transparent}
.qe-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.qe-col{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--acc);border-radius:18px;padding:1.1rem 1.2rem}
.tema .legal .qe-col h3{margin:0 0 .6rem;font-size:1.08rem;color:var(--acc)}
.tema .legal .qe-col ul{list-style:none;padding:0;margin:0;gap:.55rem}
.tema .legal .qe-col li{position:relative;padding-left:1.1rem;line-height:1.45}
.qe-col li::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;border-radius:50%;background:var(--acc)}
.qe-col[data-cat=coral] li::before{border-radius:2px;width:.6rem;height:2px;top:.7em}   /* lo que no la causa: una raya, no un punto */
.tema .legal .qe-pie{margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.qe-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.qe-cifra{background:var(--tint);border-radius:18px;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem}
.qe-cifra b{font:600 clamp(1.35rem,2.2vw,1.75rem)/1.15 var(--display);color:var(--acc)}
.qe-cifra span{line-height:1.45}
.tema .legal .qe-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.tema .legal .qe-pasos li{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:1.1rem 1.2rem;background:var(--white);border:1px solid var(--line);border-radius:18px}
.qe-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#17707c;color:var(--white);font:700 1rem var(--display)}
.qe-pasos b{font:600 1.08rem/1.25 var(--display)}
.qe-pasos li>span:last-child{color:var(--muted);line-height:1.5}
.qe-enlaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.qe-enlace{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 2.6rem 1.1rem 1.2rem;background:var(--tint);border-radius:18px;color:var(--ink);text-decoration:none;transition:background-color .25s,color .25s}
.qe-enlace b{font:600 1.08rem var(--display);color:var(--acc);transition:color .25s}
.qe-enlace span{color:var(--muted);line-height:1.45;transition:color .25s}
.qe-enlace i{position:absolute;right:1.1rem;top:50%;translate:0 -50%;font-style:normal;font-weight:700;color:var(--acc);transition:translate .25s,color .25s}
.qe-enlace:hover,.qe-enlace:focus-visible{background:var(--acc)}
.qe-enlace:hover :is(b,span,i),.qe-enlace:focus-visible :is(b,span,i){color:var(--white)}
.qe-enlace:hover i{translate:4px -50%}
.qe-enlace:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
@media (max-width:900px){.qe-cols,.qe-cifras,.tema .legal .qe-pasos,.qe-enlaces{grid-template-columns:1fr}}
@media (max-width:640px){.tema .legal .qe-claves{grid-template-columns:1fr}}
/* Más piezas del diseño 2026 (alimentación, tratamiento): columnas de 2 o 1, cinco pasos, fichas con icono y productos */
.qe-cols.qe-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.qe-cols.qe-cols-1{grid-template-columns:1fr;margin-top:.9rem}
.tema .legal .qe-pasos.qe-pasos-5{grid-template-columns:1fr;gap:.6rem}
.tema .legal .qe-pasos-5 li{display:grid;grid-template-columns:34px minmax(9rem,13rem) minmax(0,1fr);column-gap:1rem;align-items:center;padding:.85rem 1.2rem}
@media (max-width:640px){.tema .legal .qe-pasos-5 li{grid-template-columns:34px minmax(0,1fr)}.qe-pasos-5 li>span:last-child{grid-column:2}}
.qe-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.qe-ficha{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:1rem;align-content:start;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem}
.tema .legal .qe-ficha h3{margin:.2rem 0 0;font-size:1.08rem;color:var(--acc)}
.tema .legal .qe-ficha p{grid-column:2;margin:.25rem 0 0;color:var(--muted);line-height:1.5}
.qe-ficha .qe-ico{grid-row:span 2}
.qe-prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.qe-prod{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.qe-prod img{width:100%;height:170px;object-fit:contain;border-radius:12px;background:#fff;margin:0 0 .4rem}   /* fondo blanco, como el de las fotos: sin franjas a los lados */
.tema .legal .qe-prod h3{margin:0;font-size:1.08rem;color:#9a4a0b}
.tema .legal .qe-prod p{margin:0;line-height:1.5}
@media (max-width:900px){.qe-cols.qe-cols-2{grid-template-columns:1fr}}
/* Etiquetas sueltas (las especialidades del equipo, en Tratamiento) */
.tema .legal .qe-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.qe-chips span{padding:.35rem .8rem;border-radius:999px;background:#e6eef9;color:#2b5c9e;font:600 .9rem var(--display)}
.qe-enlaces+.qe-enlaces,.qe-fichas+.qe-enlaces{margin-top:.9rem}

.bv .tema-hero-txt{grid-column:1/-1}
.bv-hero{min-height:min(64vh,600px)}
.bv-acciones{justify-content:flex-start}.bv-acciones .btn{background:var(--white);border-color:var(--white);color:var(--ink)}
.bv-acciones .btn.out{background:transparent;color:var(--white);border-color:rgba(255,255,255,.8)}
.bv-ventajas2{padding-block:clamp(1.6rem,3vw,2.4rem) 0}
.bv-claves{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.bv-claves li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:1rem;align-content:start;margin:0;padding:1.1rem 1.2rem;background:var(--white);border:1px solid var(--line);border-radius:18px}
.bv-ico2{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tint,#e1f1ee);color:var(--acc,#17707c)}
.bv-ico2 svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bv-claves b{font:600 1.1rem/1.25 var(--display);color:var(--acc)}
.bv-claves span:not(.bv-ico2){color:var(--muted);line-height:1.5}
.bv-cuerpo{padding-top:clamp(1.4rem,3vw,2.2rem)}
.bv-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.2rem,2.5vw,2rem);max-width:1180px;margin:0 auto;align-items:start}
.bv-rejilla .aform,.bv-rejilla .done{max-width:none;margin:0}
.bv-lado{position:sticky;top:100px;display:flex;flex-direction:column;gap:.9rem}
.bv-caja{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:1.2rem 1.3rem}
.bv-caja h2{margin:0 0 .8rem;font:600 1.15rem var(--display);letter-spacing:0;text-transform:none}
.bv-pasos{list-style:none;margin:0;padding:0;counter-reset:bvp;display:flex;flex-direction:column;gap:.85rem}
.bv-pasos li{counter-increment:bvp;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:.8rem;margin:0}
.bv-pasos li::before{content:counter(bvp);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#17707c;color:var(--white);font:700 .95rem var(--display)}
.bv-pasos b{font:600 1rem/1.3 var(--display)}.bv-pasos span{color:var(--muted);font-size:.95rem;line-height:1.45}
.bv .bv-cita{margin:0;width:auto;max-width:none;background:#e1f1ee;border:0;border-radius:22px;padding:1.2rem 1.3rem;box-shadow:none}
.bv-cita blockquote{margin:0;font:600 1.15rem/1.35 var(--display);color:#17707c}
.bv .bv-cita figcaption{margin-top:.6rem;padding:0;color:var(--muted);font:600 .9rem var(--body);text-transform:none;letter-spacing:0;text-align:left}
.bv-num{display:flex;align-items:center;gap:.7rem;font:700 1.45rem var(--display);color:var(--ink);text-decoration:none}
.bv-num .bv-ico2{grid-row:auto;background:#17707c;color:var(--white)}
.bv-num:hover{color:#17707c}
.bv-tel p{margin:.7rem 0 0;color:var(--muted)}.bv-tel p a{color:#13646f}
.bv-urgente{margin:0;padding:.9rem 1.1rem;border-left:4px solid #9a4a0b;background:#fcebdc;border-radius:0 14px 14px 0;font-size:.95rem;line-height:1.45}
.bv .done{background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:none;padding:clamp(1.4rem,3vw,2.2rem);text-align:left;align-items:flex-start}
.bv .done h2{display:flex;align-items:center;gap:.8rem;margin:0}
.bv .done h2::before{content:"✓";display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:#17707c;color:var(--white);font:700 1.4rem var(--display)}
.bv .done .actions{justify-content:flex-start}
.bv .done .btn:not(.out){background:#17707c;border-color:#17707c;color:var(--white)}
@media (max-width:999px){.bv-rejilla{grid-template-columns:1fr}.bv-lado{position:static}}
@media (max-width:760px){.bv-claves{grid-template-columns:1fr}}