/* Página /novedades (novedades.html). Las tarjetas, el perfil de Instagram y el diálogo usan los
   estilos del bloque "novedades" de estilos.css, que son los mismos del inicio. Aquí va solo lo
   propio de la página.

   Encabezado: la misma banda navy de /test-ojo-seco (test-ojo-seco.css), con el texto a la
   izquierda y el perfil de Instagram a la derecha, como la tarjeta blanca con filo magenta del
   test. Mientras no haya publicaciones es lo único que hay, y entonces ocupa la pantalla, igual
   que el test: así la página se ve completa vacía o llena. */
.nov-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,520px) minmax(0,480px);justify-content:center;
  align-items:center;gap:40px clamp(40px,7vw,110px);padding:56px var(--gutter) 64px;background:var(--navy);color:#fff}
.pag-novedades:has(.novedades[hidden]) .nov-hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
/* sin perfil (sin Instagram en CLINICA): solo el texto */
.nov-hero:has(> .nov-perfil[hidden]){grid-template-columns:minmax(0,720px)}
.nov-hero-deco{position:absolute;left:-160px;bottom:-220px;width:560px;height:560px;border-radius:50%;background:var(--cielo);opacity:.22}
.nov-hero-txt{position:relative}
.nov-hero .eyebrow{color:var(--cielo)}
.nov-hero h1{margin-top:14px;max-width:13ch;font-size:clamp(38px,4.4vw,58px);font-weight:800;line-height:1.04;letter-spacing:-.025em;color:#fff}
.nov-hero .lead{color:#C8D3EA;margin-top:20px}

.nov-hero .nov-perfil{position:relative;background:#fff;color:var(--tinta);border-top:5px solid var(--magenta);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.nov-hero .nov-perfil h2{font-size:20px;color:var(--navy)}
/* más baja que en estilos.css (420): con publicaciones, la banda no debe empujarlas fuera de la primera pantalla */
.nov-hero .nov-fachada{min-height:320px}
.nov-seguir{display:inline-block;margin-top:10px;font:700 15px/1.2 var(--titulo);color:var(--magenta);text-decoration:none}
.nov-seguir:hover{text-decoration:underline}

/* las tarjetas y la cinta, centradas y sin pasar de 1500 px en pantallas anchas. La cinta va al
   final: con publicaciones arriba, el espacio entre ellas lo pone la sección de tarjetas */
.pag-novedades .novedades{padding-top:64px}
.pag-novedades .campana{padding:56px var(--gutter) 80px}
.pag-novedades .novedades:not([hidden])+.campana{padding-top:0}
.pag-novedades .campana>.cam-marco,
.pag-novedades .novedades .cab,
.pag-novedades .nov-eventos{max-width:1500px;margin-inline:auto}
/* las tarjetas en REJILLA y no en carril: en la página se ven todas sin deslizar de lado */
.pag-novedades .nov-lista{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  overflow:visible;scroll-snap-type:none;padding-bottom:0}

/* tableta: texto arriba y perfil debajo */
@media (max-width:1000px){
  .nov-hero{grid-template-columns:minmax(0,600px);padding:56px var(--gutter) 64px;gap:36px}
  .nov-hero h1{max-width:none}
  .nov-hero .nov-perfil{justify-self:stretch;max-width:none}
}
/* celular angosto: el embed del perfil necesita unos 326 px. La tarjeta va de borde a borde
   (estilos.css le quita el fondo a esta medida, y aquí sobre el azul hace falta) */
@media (max-width:480px){
  .nov-hero .nov-perfil{width:auto;margin-inline:calc(-1 * var(--gutter));padding:18px 12px 20px;background:#fff;border-radius:0}
  .nov-hero .nov-perfil h2,.nov-hero .nov-sub,.nov-hero .nov-privacidad,.nov-seguir{margin-inline:8px}
  .pag-novedades .campana{padding-top:32px}
}