/* Sobre mí: último módulo, crema. Combina las plantillas web 21 (perfil con retrato 4:5), 45 (texto de lectura con cita) y 48 (cierre con acción)
   del módulo 08. Misma grilla que la cartelera y Toolbox: margen 8vw y la misma escala de título. */
.sobre{position:relative;isolation:isolate;padding:clamp(88px,12vh,140px) 8vw clamp(64px,9vh,110px);background:url(../../cart-textura.webp) center/cover no-repeat,#E6D5C3;color:#1F3A3D}
.sb-grilla{display:grid;grid-template-columns:minmax(0,1fr) min(40vw,570px);gap:clamp(40px,5vw,72px);align-items:start;max-width:1380px;margin:0 auto}   /* columna central: texto y retrato juntos, lejos de las orillas */
.sb-texto{max-width:none}
.sb-rot{margin:0 0 14px;font:700 14px var(--hu-sans);letter-spacing:.06em;text-transform:uppercase;color:#8C2F24}
.sobre h2{font:600 clamp(40px,5.2vw,76px)/.98 var(--hu-serif);margin:0 0 20px;color:#1F3A3D}
.sobre h2:focus{outline:none}
.sb-lead{font-size:20px;font-weight:600;color:#1F3A3D;margin:0 0 22px}
.sb-texto p{font-size:18px;line-height:1.65;color:#2E4446;margin:0 0 18px}
.sb-cita{margin:30px 0;padding-left:22px;border-left:4px solid #8C2F24;font:italic 500 clamp(24px,2.4vw,32px)/1.25 var(--hu-serif);color:#1F3A3D}
.sb-media{position:sticky;top:clamp(90px,12vh,120px);display:grid;gap:12px}
@media (max-height:1080px){.sb-media{position:relative;top:0}}   /* con fotos grandes el bloque supera la pantalla: fijo solo en pantallas altas */
.sb-foto{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(31,58,61,.28);aspect-ratio:4/5;background:#C9B8A5}
.sb-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.sb-cierre{max-width:1380px;margin-left:auto;margin-right:auto;margin-top:clamp(64px,10vh,120px);padding-top:clamp(40px,6vh,64px);border-top:1px solid rgba(31,58,61,.22);text-align:center}
.sb-cierre h3{font:600 clamp(36px,4.4vw,64px)/1 var(--hu-serif);margin:0 0 14px;color:#1F3A3D}
.sb-cierre h3 em{color:#8C2F24}
.sb-cierre p{font-size:18px;color:#2E4446;margin:0 0 30px}
/* Contactos: cuadrados redondeados en verde con grano, como piezas de la marca */
.sb-redes{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.4vw,16px)}   /* siempre una sola fila: los botones se encogen hasta 44 px antes de pasar a otra línea */
.sb-redes li{flex:0 1 60px;min-width:44px}
.sb-redes a{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:16px;color:#E6D5C3;background:url(../../fondo-textura.webp) center/260px,#1F3A3D;background-blend-mode:screen,normal;box-shadow:inset 0 0 0 1px rgba(230,213,195,.12),inset 0 -4px 0 rgba(0,0,0,.28),0 6px 14px rgba(31,58,61,.3);transition:transform .45s var(--hu-curva-firma),background-color .3s var(--hu-curva-firma),box-shadow .3s var(--hu-curva-firma),color .3s}
.sb-redes svg{width:26px;height:26px;transition:transform .45s var(--hu-curva-firma)}
.sb-redes a:hover,.sb-redes a:focus-visible{transform:translateY(-5px) rotate(-4deg);background-color:#2B5054;color:#F2E9DE;box-shadow:inset 0 0 0 1px rgba(230,213,195,.2),inset 0 -4px 0 rgba(0,0,0,.28),0 14px 24px rgba(31,58,61,.38)}
.sb-redes a:hover svg,.sb-redes a:focus-visible svg{transform:scale(1.12)}
.sb-redes a:focus-visible{outline:2px solid #8C2F24;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.sb-redes a:hover,.sb-redes a:focus-visible{transform:none}.sb-redes a:hover svg,.sb-redes a:focus-visible svg{transform:none}}
@media (max-width:900px){.sb-grilla{grid-template-columns:1fr}.sb-media{position:relative;top:0;order:-1;width:min(100%,440px)}}
/* Dos fotos más bajo el retrato, recortadas en 4:5 (cover). Al pulsar cualquiera de las tres se abre el visor */
.sb-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sb-mini figure{margin:0;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 12px 26px rgba(31,58,61,.24);background:#C9B8A5}
.sb-mini img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sb-amp{cursor:zoom-in;transition:transform .45s var(--hu-curva-firma),box-shadow .45s var(--hu-curva-firma)}
.sb-amp:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(31,58,61,.32)}
.sb-amp:focus-visible{outline:2px solid #8C2F24;outline-offset:4px}
/* Visor: fondo crema con grano (la paleta de la sección), foto entera sin recorte, botón de cerrar verde */
.sb-visor{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(20px,5vh,56px) clamp(16px,5vw,64px)}
.sb-visor[hidden]{display:none}
.sb-visor::before{content:"";position:absolute;inset:0;background:url(../../cart-textura.webp) center/cover,rgba(230,213,195,.97);opacity:var(--velo,1)}
.sb-visor img{position:relative;max-width:calc(100vw - 2 * clamp(16px,5vw,64px));max-height:calc(100vh - 2 * clamp(20px,5vh,56px));max-height:calc(100dvh - 2 * clamp(20px,5vh,56px));width:auto;height:auto;border-radius:14px;box-shadow:0 30px 70px rgba(31,58,61,.4)}
.sb-cerrar{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px);width:52px;height:52px;border:0;border-radius:14px;display:grid;place-items:center;color:#E6D5C3;background:url(../../fondo-textura.webp) center/260px,#1F3A3D;background-blend-mode:screen,normal;cursor:pointer;box-shadow:0 8px 18px rgba(31,58,61,.3);transition:transform .45s var(--hu-curva-firma),background-color .3s}
.sb-cerrar svg{width:24px;height:24px}
.sb-cerrar:hover,.sb-cerrar:focus-visible{transform:rotate(90deg);background-color:#2B5054}
.sb-cerrar:focus-visible{outline:2px solid #8C2F24;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.sb-amp:hover{transform:none}.sb-cerrar:hover,.sb-cerrar:focus-visible{transform:none}}
.sb-texto strong{font-weight:700;color:#1F3A3D}
.sb-cita strong{font-weight:inherit}
.sb-cierre .sb-firma{width:clamp(180px,20vw,240px);aspect-ratio:3.75;margin:44px auto 0;color:#1F3A3D}
.sb-firma svg{display:block;width:100%;height:100%}
/* v1.3.1 · En escritorio la columna de fotos acompaña al texto hasta el final: el retrato arriba y las dos fotos pequeñas, apiladas,
   se estiran para ocupar el alto restante (recorte cover, la proporción de la imagen se conserva). Antes quedaba un hueco crema debajo. */
@media (min-width:901px){
  .sb-grilla{align-items:stretch;grid-template-columns:minmax(0,1fr) min(30vw,420px)}   /* columna más angosta: las tres fotos suman el alto del texto sin agigantarse */
  .sb-media{position:relative;top:0;display:flex;flex-direction:column}
  .sb-mini{flex:1 1 0;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .sb-mini figure{aspect-ratio:auto;position:relative;min-height:0}
  .sb-mini img{position:absolute;inset:0}   /* fuera del flujo: la foto ya cargada no estira la fila (en 1.3.1 se pasaba del texto) */
}