/* Secciones públicas: «Nuestros pacientes» y blog. Mismo estilo que la web. */
@font-face{font-family:Jost;src:url(/fonts/jost-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url(/fonts/bricolage-ui.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--azul:#1A5A75;--azul-2:#12415A;--almagra:#8C3A2B;--albero:#D6A23A;--albero-claro:#F0CE7A;--cal:#ECEBE4;--cal-2:#E2E0D6;--cal-3:#F4F3EE;--blanco:#FBFAF6;--tinta:#22261F;--tinta-2:#55595B;
  --j:Jost,"Trebuchet MS",sans-serif;--d:Bricolage,system-ui,sans-serif;--t:Literata,Georgia,serif}
*{box-sizing:border-box;margin:0}
body{font:17px/1.6 var(--t);color:var(--tinta);background:var(--cal)}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--albero);outline-offset:3px}
.cab{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--azul);color:var(--blanco)}
.cab a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 24px/1 var(--j)}
.cab svg{width:30px;height:30px}
.cab .volver{margin-left:auto;font:600 15px var(--d);opacity:.9}
.envoltura{max-width:1080px;margin:0 auto;padding:44px 18px 64px}
.titulo-sec{font:600 clamp(30px,6vw,44px)/1.05 var(--j);color:var(--azul-2)}
.entradilla{font:italic 18px/1.5 var(--t);color:var(--tinta-2);margin:8px 0 28px;max-width:36em}

/* pacientes: óvalos como los del logo */
.pacientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 18px;list-style:none;padding:0}
.paciente{text-align:center}
.paciente .ov{aspect-ratio:4/5;border-radius:50%/42%;overflow:hidden;border:5px solid var(--blanco);background:var(--cal-2);box-shadow:0 14px 30px -18px rgba(18,65,90,.55);transition:transform .3s}
.paciente:nth-child(3n+2) .ov{transform:rotate(-2.5deg)}.paciente:nth-child(3n) .ov{transform:rotate(2deg)}
.paciente:hover .ov{transform:rotate(0) scale(1.03)}
.paciente img{width:100%;height:100%;object-fit:cover;display:block}
.paciente b{display:block;font:600 19px/1.2 var(--j);color:var(--azul-2);margin-top:12px}
.paciente span{display:block;font:italic 15px/1.4 var(--t);color:var(--tinta-2);margin-top:2px}

/* tarjetas del blog */
.entradas{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;list-style:none;padding:0}
.tarjeta-blog{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;background:var(--cal-3);text-decoration:none;color:inherit;box-shadow:0 14px 30px -20px rgba(18,65,90,.5);transition:transform .2s}
.tarjeta-blog:hover{transform:translateY(-3px)}
.tarjeta-blog .img{aspect-ratio:16/9;background:var(--azul) center/cover;display:grid;place-items:center;color:var(--albero-claro)}
.tarjeta-blog .img img{width:100%;height:100%;object-fit:cover;display:block}
.tarjeta-blog .img svg{width:54px;height:54px;opacity:.9}
.tarjeta-blog div.txt{padding:18px 20px 22px}
.tarjeta-blog time{font:600 13px var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--almagra)}
.tarjeta-blog h3{font:600 22px/1.2 var(--j);color:var(--azul-2);margin:6px 0 8px}
.tarjeta-blog p{font-size:16px;color:var(--tinta-2)}
.vacio-web{font-style:italic;color:var(--tinta-2)}
.mas{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;font:600 17px var(--d)}

/* artículo */
.articulo{max-width:700px;margin:0 auto;padding:36px 18px 70px}
.articulo .portada{aspect-ratio:16/9;border-radius:24px;overflow:hidden;margin-bottom:26px;background:var(--cal-2)}
.articulo .portada img{width:100%;height:100%;object-fit:cover;display:block}
.articulo time{font:600 14px var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--almagra)}
.articulo h1{font:600 clamp(32px,7vw,48px)/1.08 var(--j);color:var(--azul-2);margin:8px 0 24px}
.articulo .cuerpo{font-size:19px;line-height:1.75}
.articulo .cuerpo p,.articulo .cuerpo ul{margin-bottom:1.1em}
.articulo .cuerpo ul{padding-left:1.2em}
.articulo .cuerpo li::marker{color:var(--albero)}
.articulo .cuerpo strong{color:var(--azul-2)}
.cta{margin-top:40px;padding:24px;border-radius:22px;background:var(--azul);color:var(--blanco);font-family:var(--d)}
.cta b{display:block;font:600 22px/1.2 var(--j);margin-bottom:6px}
.cta a{display:inline-flex;align-items:center;min-height:50px;margin-top:14px;padding:0 22px;border-radius:14px;background:var(--albero-claro);color:var(--azul-2);font-weight:700;text-decoration:none}
.pie-web{padding:26px 18px;text-align:center;font:14px var(--d);color:var(--tinta-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.articulo .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:600 14px var(--d);letter-spacing:.06em;text-transform:uppercase;color:var(--almagra)}
.articulo .meta span{color:var(--tinta-2)}
.articulo .cuerpo h2{font:600 26px/1.2 var(--j);color:var(--azul-2);margin:1.6em 0 .5em}
.compartir a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--azul);border-radius:14px;font:600 16px var(--d);text-decoration:none}
.otras{margin-top:44px}.otras h2{font:600 26px var(--j);color:var(--azul-2);margin-bottom:16px}
/* visor de fotos */
.paciente button{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:50%/42%}
.paciente button:focus-visible{outline:3px solid var(--albero);outline-offset:4px}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,560px);width:100%;overflow:visible}
.visor::backdrop{background:rgba(18,30,36,.82);backdrop-filter:blur(4px)}
.visor img{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:24px;background:var(--cal-2)}
.visor p{color:var(--blanco);text-align:center;font:italic 17px/1.4 var(--t);margin-top:12px}
.visor p b{display:block;font:600 22px var(--j);font-style:normal;color:var(--albero-claro)}
.visor .cerrar{position:absolute;top:-56px;right:0;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.visor[open]{animation:abre .25s ease-out}@keyframes abre{from{opacity:0;transform:scale(.96)}}