/* Ramón Haití Filiu · Luz del norte
   El marco calla para que hable el cuadro. La luz (colores de fondo y tinta) la
   pone js/luz.js según el sol de Bergen; aquí están sus valores de día para quien
   navega sin JavaScript. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/newsreader-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/newsreader-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Luz de día (valores por defecto; luz.js los reescribe) */
  --c1: #CDE7E0; --c2: #F4EEBB; --c3: #E9E7A6;
  --t1: #0B0D12; --t1-2: rgba(11,13,18,.8);
  --t3: #0B0D12; --t3-2: rgba(11,13,18,.8); --t3-l: rgba(11,13,18,.2);
  --fondo: #E9EAE3; --tinta: #0B0D12; --tinta-2: rgba(11,13,18,.8); --linea: rgba(11,13,18,.2);
  --aur: 0;

  --letra: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-xs: 0.8125rem;  /* 13 */
  --f-s: 0.9375rem;   /* 15 */
  --f-m: 1.0625rem;   /* 17 */
  --f-l: 1.3125rem;   /* 21 */
  --f-xl: 1.75rem;    /* 28 */
  --f-2xl: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  --margen: clamp(18px, 4vw, 48px);
  --ancho: 1280px;
  --curva: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--letra); font-size: var(--f-m); line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
i, em { font-style: italic; }
.salto { position: absolute; left: -9999px; top: 0; background: var(--fondo); color: var(--tinta); padding: 8px 12px; z-index: 10; }
.salto:focus { left: 8px; top: 8px; }

/* Cabecera */
.cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap;
       max-width: var(--ancho); margin: 0 auto; padding-block: clamp(16px, 3vw, 28px) 0; padding-inline: var(--margen); position: relative; z-index: 20; }
.h-nombre { font: inherit; margin: 0; }
.nombre { text-decoration: none; font-weight: 600; font-size: var(--f-l); letter-spacing: .005em; line-height: 1.2; }
.nombre small { display: block; font-weight: 400; font-size: var(--f-xs); letter-spacing: .03em; color: var(--tinta-2); margin-top: 3px; }
.menu { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; font-size: var(--f-s); }
.menu ul { display: flex; gap: 6px 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; color: var(--tinta-2); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tinta); text-decoration: underline; }
.idiomas { display: flex; gap: 10px; font-size: var(--f-xs); letter-spacing: .06em; }
.idiomas a { color: var(--tinta-2); text-decoration: none; }
.idiomas a[aria-current="true"] { color: var(--tinta); font-weight: 600; }
.menu-movil { display: none; }
@media (max-width: 760px) {
  .menu { display: none; }
  .menu-movil { display: block; font-size: var(--f-s); }
  .menu-movil summary { cursor: pointer; list-style: none; font-weight: 500; }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-movil[open] summary { text-decoration: underline; }
  /* Hoja que cae bajo la cabecera entera, siempre por encima del cuadro */
  .menu-movil .panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30;
                       padding-block: 20px 24px; padding-inline: var(--margen);
                       background: var(--fondo); color: var(--tinta);
                       border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
                       box-shadow: 0 18px 40px rgba(0,0,0,.18); }
  .menu-movil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--f-l); }
  .menu-movil a { text-decoration: none; color: var(--tinta); }
  .menu-movil a[aria-current="page"] { text-decoration: underline; }
  .menu-movil .idiomas { margin-top: 18px; }
  .menu-movil .idiomas a { color: var(--tinta-2); }
  .menu-movil .idiomas a[aria-current="true"] { color: var(--tinta); }
  /* En la portada la cabecera usa la tinta del cielo; la hoja vuelve a la del fondo */
  .pag-portada .cielo .menu-movil .panel a { color: var(--tinta); }
  .pag-portada .cielo .menu-movil .panel .idiomas a { color: var(--tinta-2); }
  .pag-portada .cielo .menu-movil .panel .idiomas a[aria-current="true"] { color: var(--tinta); }
}

/* Portada: el cielo de Bergen */
.pag-portada .cielo { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%); }
.pag-portada .cielo .cab, .pag-portada .cielo .cab a, .pag-portada .cielo .menu-movil summary { color: var(--t1); }
.pag-portada .cielo .nombre small, .pag-portada .cielo .menu a, .pag-portada .cielo .idiomas a { color: var(--t1-2); }
.pag-portada .cielo .menu a[aria-current], .pag-portada .cielo .idiomas a[aria-current="true"] { color: var(--t1); }
.aurora { position: absolute; z-index: 1; inset: 0 0 auto 0; height: 60%; overflow: hidden; pointer-events: none;
  opacity: var(--aur); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); }
.aurora i { position: absolute; left: -25%; width: 150%; will-change: transform; }
.aurora .v1 { top: 2%; height: 46%;
  background: linear-gradient(180deg, rgba(70,255,170,0), rgba(80,255,175,.6) 58%, rgba(40,210,190,.2) 82%, rgba(40,210,190,0));
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  filter: blur(6px); animation: velo1 19s ease-in-out infinite alternate; }
.aurora .v2 { top: -6%; height: 36%; border-radius: 50%;
  background: radial-gradient(55% 50% at 38% 70%, rgba(60,230,205,.5), rgba(118,104,255,.22) 52%, transparent 75%);
  filter: blur(14px); animation: velo2 27s ease-in-out infinite alternate; }
@keyframes velo1 { from { transform: translateX(-5%) skewX(-10deg) scaleY(.9); } to { transform: translateX(6%) skewX(8deg) scaleY(1.1); } }
@keyframes velo2 { from { transform: translateX(7%) skewX(12deg); } to { transform: translateX(-6%) skewX(-6deg) scaleY(.85); } }

.hero { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding-block: clamp(28px, 6vw, 72px) clamp(20px, 3vw, 32px); padding-inline: var(--margen); }
.hero a { display: block; }
.hero img { width: min(100%, 1100px); margin: 0 auto; max-height: 76vh; object-fit: contain; }
.pie-hero { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); padding-block: 0 clamp(22px, 3vw, 36px); }
.pie-hero .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--t3-l); padding-top: 12px; color: var(--t3-2); font-size: var(--f-s); }
.pie-hero .fila i { font-family: var(--titulo); font-size: var(--f-l); color: var(--t3); }
.pie-hero .fila a { color: var(--t3); }
.horizonte { height: clamp(48px, 8vw, 96px); background: linear-gradient(180deg, var(--c3), var(--fondo)); }

/* Contenido general */
main { display: block; }
.bloque { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); padding-block: clamp(32px, 5vw, 64px); }
.bloque + .bloque { padding-top: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--f-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--f-xl); }
h3 { font-size: var(--f-l); }
.cabeza { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 62ch; }
.cabeza p { margin: 0; color: var(--tinta-2); font-size: var(--f-l); line-height: 1.45; }
.texto { max-width: 64ch; }
.texto p { margin: 0 0 1.1em; }
.texto h2 { margin: 2em 0 .7em; }
.miga { font-size: var(--f-xs); letter-spacing: .03em; color: var(--tinta-2); margin: 0 0 10px; }
.miga a { color: inherit; }
.vermas { font-weight: 500; }

/* Rejilla de obra: cada cuadro con su proporción real, nunca recortado */
.obras { columns: 3 300px; column-gap: clamp(20px, 3vw, 40px); }
.obras > a { display: block; break-inside: avoid; margin: 0 0 clamp(28px, 4vw, 44px); text-decoration: none; }
.obras figure { margin: 0; }
.obras img { width: 100%; transition: opacity .4s var(--curva); }
.obras a:hover img { opacity: .9; }
.obras figcaption, .cartela-min { margin-top: 10px; font-size: var(--f-s); color: var(--tinta-2); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.obras figcaption i, .cartela-min i { font-family: var(--titulo); font-size: var(--f-l); color: var(--tinta); }

/* Ficha de obra */
.ficha { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.ficha .lienzo img { width: 100%; max-height: 84vh; object-fit: contain; object-position: left bottom; }
.cartela { border-top: 1px solid var(--linea); padding-top: 14px; font-size: var(--f-s); color: var(--tinta-2); }
.cartela h1 { font-family: var(--titulo); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); line-height: 1.08; color: var(--tinta); letter-spacing: 0; }
.cartela .alt { display: block; margin-top: 6px; }
.cartela dl { margin: 18px 0 0; display: grid; gap: 2px; }
.cartela dt { position: absolute; left: -9999px; }
.cartela dd { margin: 0; }
.cartela .accion { display: inline-block; margin-top: 22px; color: var(--tinta); font-weight: 500; }
.cartela p { margin: 18px 0 0; }
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(40px, 6vw, 80px); }
.detalle p { margin: 0; border-top: 1px solid var(--linea); padding-top: 14px; font-size: var(--f-s); color: var(--tinta-2); }
.detalle p b { color: var(--tinta); font-weight: 500; display: block; }
.vecinas { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--linea); padding-top: 14px; font-size: var(--f-s); }
.vecinas a { text-decoration: none; color: var(--tinta-2); }
.vecinas a:hover { color: var(--tinta); }
.vecinas i { font-family: var(--titulo); font-size: var(--f-m); color: var(--tinta); }
@media (max-width: 860px) {
  .ficha, .detalle { grid-template-columns: 1fr; }
  .ficha .lienzo img { max-height: none; }
}

/* Murales y encargos */
.mural { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(48px, 7vw, 88px); }
.cubiertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 220px)); gap: clamp(20px, 3vw, 36px); margin: 0 0 clamp(48px, 7vw, 88px); }
.cubiertas figure { margin: 0; }
.cubiertas figcaption { margin-top: 10px; font-size: var(--f-s); color: var(--tinta-2); }
.cubiertas figcaption i { font-family: var(--titulo); font-size: var(--f-l); color: var(--tinta); display: block; }
.cuencos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin: 0 0 clamp(48px, 7vw, 88px); }
.cuencos img { width: 100%; }
@media (max-width: 860px) { .mural { grid-template-columns: 1fr; } }

/* Listas de CV */
.cv { display: grid; gap: clamp(36px, 5vw, 56px); max-width: 880px; }
.cv h2 { font-size: var(--f-l); margin-bottom: 14px; }
.cv ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.cv li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.cv .anio { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: var(--f-s); padding-top: 1px; }
.cv .solo { color: var(--tinta-2); font-size: var(--f-s); }
@media (max-width: 520px) { .cv li { grid-template-columns: 1fr; gap: 2px; } }

/* De La Habana a Bergen */
.relato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.relato figure { margin: 0; position: sticky; top: 24px; }
.relato figcaption { margin-top: 10px; font-size: var(--f-xs); color: var(--tinta-2); }
@media (max-width: 860px) { .relato { grid-template-columns: 1fr; } .relato figure { position: static; max-width: 420px; } }

/* Prensa */
.cita { margin: 0 0 clamp(40px, 6vw, 64px); max-width: 40ch; }
.cita p { margin: 0; font-family: var(--titulo); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; }
.cita .trad { margin-top: 12px; font-family: var(--letra); font-style: normal; font-size: var(--f-m); line-height: 1.5; color: var(--tinta-2); }
.cita footer { margin-top: 10px; font-size: var(--f-s); color: var(--tinta-2); }
.prensa { display: grid; gap: clamp(32px, 5vw, 48px); max-width: 880px; }
.prensa h2 { font-size: var(--f-l); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.prensa ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.prensa li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.prensa .anio { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: var(--f-s); padding-top: 2px; }
.prensa p { margin: 0; }
.prensa .medio { font-size: var(--f-s); color: var(--tinta-2); }
.prensa .medio b { color: var(--tinta); font-weight: 600; }
.prensa .titular { display: block; font-family: var(--titulo); font-size: var(--f-l); line-height: 1.25; margin: 3px 0 4px; }
.prensa .fuente { margin-top: 6px; font-size: var(--f-s); }
.prensa .acceso { color: var(--tinta-2); font-size: var(--f-xs); letter-spacing: .04em; margin-left: 10px; }
.nota-prensa { max-width: 72ch; margin: clamp(32px, 5vw, 48px) 0 0; font-size: var(--f-s); color: var(--tinta-2); }
@media (max-width: 520px) { .prensa li { grid-template-columns: 1fr; gap: 2px; } }

/* Contacto */
.contacto { display: grid; gap: 28px; max-width: 64ch; }
.contacto .correo { font-size: var(--f-xl); font-weight: 500; word-break: break-word; }
.contacto dl { margin: 0; display: grid; gap: 18px; }
.contacto dt { font-size: var(--f-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 4px; }
.contacto dd { margin: 0; }

/* Portada: segunda parte */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.intro p { margin: 0; font-size: var(--f-l); line-height: 1.45; max-width: 46ch; }
.intro .mas { display: grid; gap: 10px; align-content: start; font-size: var(--f-m); }
@media (max-width: 760px) { .intro { grid-template-columns: 1fr; } }

/* Pie */
.pie { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); padding-block: 28px 40px; }
.pie .fila { border-top: 1px solid var(--linea); padding-top: 16px; display: flex; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; font-size: var(--f-xs); color: var(--tinta-2); }
.pie a { color: inherit; }
.pie .luz { font-family: var(--titulo); font-style: italic; font-size: var(--f-s); color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  .obras img { transition: none; }
}
@media print {
  .cab .menu, .menu-movil, .pie .luz, .aurora { display: none; }
  body { background: #fff; color: #000; }
}