/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================================================
   Perken, Son & Rayment — sistema gráfico del documental
   Generado desde landing/assets/css/main.css + ajustes para Bricks.
   ========================================================================= */

/* ===========================================================
   Perken, Son & Rayment — dokumentalaren landing-a
   Diseinu-sistema: ON Produkzioak / Arteman Komunikazioa
   =========================================================== */

/* ---------- Tokenak (dosierreko Muestras paleta) ---------- */
:root {
  --gorria:        #e25339;
  --gorria-ilun:   #c4402a;
  --paper-beltza:  #0b0b0b;
  --tinta-beltza:  #232323;
  --tinta-leuna:   #5e5e5e;
  --tinta-grisa:   #a7aaaa;
  --zuntza:        #e3e3e3;
  --tinta-zuria:   #efefef;

  --display: "Playfair Display", Georgia, serif;   /* Volimake-ren ordezko behin-behinekoa */
  --testua:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --neurria: 1200px;
  --tarte:   clamp(72px, 10vw, 136px);
  --ertza:   clamp(20px, 5vw, 56px);
}


/* ---------- Bricks: los contenedores vienen en flex por defecto ---------- */
.atala, .edukia, .tira-parallax, .tira-irudia, .pertsonaia, .berria,
.datua, .argazkia, .irudi-aldea, .lerroa { display: block; }
.brxe-section, .brxe-block, .brxe-div { flex-wrap: nowrap; }
.brxe-image { margin: 0; }
.galeria .argazkia { display: block; }
.argazkia img { display: block; }
.goiburua .edukia { display: flex; }
.oina .edukia { display: grid; }
.bi-zutabe, .datuak, .pertsonaiak, .galeria, .berriak, .egutegia,
.kontaktua-sareta, .fitxa, .bigarrenak, .faseak, .harremana { display: grid; }
.faseak, .laguntzaileak, .hero-ekintzak, .hizkuntzak, .oina-goia, .oina-behea,
.goiburutxoa, .onarpena { display: flex; }
.goiburutxoa { display: inline-flex; }
.bigarrena, .urtea, .fitxa-lerroa, .eremua { display: grid; }


/* ---------- Raíz tipográfica ----------
   Bricks pone html{font-size:62.5%} (1rem = 10px). Todo el escalado de este
   diseño está pensado sobre 16px, así que lo devolvemos al valor del navegador.
   Si algún día se maquetan otras páginas en Bricks usando rem, tenerlo en
   cuenta: aquí 1rem = 16px. Bricks solo usa 4 valores en rem en su propio CSS.
   ------------------------------------------------------------------------ */
html { font-size: 100%; }

/* ---------- Oinarria ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  margin: 0;
  background: var(--paper-beltza);
  color: var(--tinta-beltza);
  font-family: var(--testua);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--gorria); color: #fff; }

.edukia { width: 100%; max-width: var(--neurria); margin-inline: auto; padding-inline: var(--ertza); }
.estua  { max-width: 760px; }

/* ---------- Tipografia ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
}

h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h1, h2, h3 { overflow-wrap: break-word; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 700; }

/* El aire entre párrafos lo fija --p-tartea, que cada bloque puede ajustar.
   El último párrafo nunca deja aire abajo, así que un campo de una sola
   línea se ve igual que antes y uno de varias se separa solo. */
p { margin: 0 0 var(--p-tartea, 1.15em); }
p:last-child { margin-bottom: 0; }

.sarrera { font-size: clamp(1.1rem, 1.55vw, 1.3rem); line-height: 1.55; color: var(--tinta-leuna); }

/* Goiburutxoa: puntu gorri bat + testu txikia */
.goiburutxoa {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gorria);
  margin: 0 0 22px;
}
.goiburutxoa::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gorria); flex: none;
}

/* ---------- Atalak ---------- */
.atala { padding-block: var(--tarte); position: relative; }

.argia  { background: var(--tinta-zuria); color: var(--tinta-beltza); }
.zuntza { background: var(--zuntza);      color: var(--tinta-beltza); }
.iluna  { background: var(--paper-beltza); color: var(--tinta-zuria); }
.iluna .sarrera, .iluna .xehetasuna { color: var(--tinta-grisa); }
.iluna p { color: #cfcfcf; }
.gorri-atala { background: var(--gorria); color: #fff; }

/* Papera: ehundura fina argitan */
.argia::before, .zuntza::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 3px 3px;
}
.argia > *, .zuntza > * { position: relative; }

/* ---------- Goiburua ---------- */
.goiburua {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: rgba(11,11,11,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background .3s ease;
}
.goiburua .edukia {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px; max-width: 1360px;
}
.marka img { height: 26px; width: auto; }
.marka { flex: none; }

.nabigazioa { margin-left: auto; }
.nabigazioa ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nabigazioa a {
  color: var(--tinta-zuria); text-decoration: none;
  font-size: .85rem; font-weight: 500; letter-spacing: .01em;
  padding: 6px 0; position: relative; white-space: nowrap;
}
.nabigazioa a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gorria); transition: width .25s ease;
}
.nabigazioa a:hover::after, .nabigazioa a:focus-visible::after { width: 100%; }

.hizkuntzak { display: flex; gap: 10px; font-size: .78rem; color: var(--tinta-grisa); flex: none; }
.hizkuntzak a { text-decoration: none; }
.hizkuntzak a[aria-current="true"] { color: var(--gorria); font-weight: 600; }

.soilik-mugikorra { display: none; }

.menu-botoia {
  display: none; margin-left: auto;
  background: none; border: 0; color: var(--tinta-zuria);
  font: inherit; font-size: .85rem; cursor: pointer; padding: 10px;
}

/* ---------- Botoiak ---------- */
.botoia {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gorria); color: #fff;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 15px 30px; border: 0; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.botoia:hover { background: var(--gorria-ilun); transform: translateY(-2px); }
.botoia.hutsa { background: transparent; border: 1px solid currentColor; color: inherit; }
.botoia.hutsa:hover { background: var(--gorria); border-color: var(--gorria); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 140px 110px;
  overflow: hidden;
}
.hero-irudia {
  position: absolute; inset: 0;
  background: url("https://perken.eus/wp-content/uploads/perken/galeria/hero.webp") center/cover no-repeat;
  filter: grayscale(1) contrast(1.12) brightness(.42);
  transform: scale(1.04);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 30%, transparent 0%, rgba(11,11,11,.72) 70%),
    linear-gradient(to bottom, rgba(11,11,11,.55), rgba(11,11,11,.3) 45%, var(--paper-beltza) 97%);
}
.hero .edukia { position: relative; z-index: 2; }

.hero-izenburua { max-width: 760px; width: 100%; margin-bottom: 52px; }
.hero h1 { font-size: 0; margin: 0; }          /* SVG-k darama izenburua */

.hero .logline {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.4;
  color: var(--tinta-zuria); max-width: 640px; margin-bottom: 34px;
}
.hero-ekintzak { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-ekintzak .botoia.hutsa { color: var(--tinta-zuria); }

.hero .hero-oina {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2;
  display: flex; gap: 18px 36px; flex-wrap: wrap;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-grisa);
}
.hero-oina b { color: var(--tinta-zuria); font-weight: 600; letter-spacing: .06em; }

/* ---------- Tira urratuak (diseinu-sistema) ---------- */
.tira { display: block; width: 100%; height: auto; }

/* Parallax: tira bakoitzak aurreko eta hurrengo atalaren gainetik pasatzen du.
   --irabazia: zenbat sartzen den alboko ataletan, eta zenbat mugitzen den. */
.tira-parallax {
  --irabazia: clamp(38px, 5.5vw, 92px);
  position: relative;
  z-index: 5;
  margin-block: calc(-1 * var(--irabazia));
  pointer-events: none;
}
.tira-parallax img {
  display: block;
  width: 100%;
  will-change: transform;
}

/* Franja con pie: solo solapa hacia arriba, y el pie reserva el recorrido
   del parallax para que la foto no se le eche encima al bajar. */
.tira-irudia { margin: 0; position: relative; z-index: 5; }
.tira-irudia img { width: 100%; }
.tira-irudia .tira-parallax { margin-bottom: 0; }
.tira-irudia .tira-oina { position: relative; z-index: 6; }
.tira-irudia .tira-oina {
  max-width: var(--neurria); margin-inline: auto;
  padding: calc(clamp(38px, 5.5vw, 92px) + 22px) var(--ertza) 0;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-grisa);
}

/* ---------- Bi zutabeko blokea ---------- */
.bi-zutabe {
  display: grid; gap: clamp(32px, 5vw, 76px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.bi-zutabe.hertsia { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* ---------- Datuak ---------- */
.datuak {
  display: grid; gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.28);
}
.datua { background: var(--gorria); padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2vw, 30px); }
.datua .zenbakia {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1; color: #fff;
}
.datua .azalpena {
  margin-top: 12px; font-size: .8rem; line-height: 1.45;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88);
}

/* ---------- Pertsonaiak ---------- */
.pertsonaiak { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); margin-top: 52px; }
.pertsonaia {
  background: var(--tinta-zuria);
  border-top: 4px solid var(--gorria);
  padding: 30px 28px 32px;
}
.pertsonaia .rola {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gorria); margin-bottom: 10px;
}
.pertsonaia h3 { margin-bottom: 12px; }
.pertsonaia p { font-size: .94rem; color: var(--tinta-leuna); }

.pertsonaia-hutsik {
  display: grid; place-items: center; min-height: 150px;
  background: var(--zuntza); color: var(--tinta-grisa);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 22px;
}

.bigarrenak { margin-top: 44px; display: grid; gap: 1px; background: rgba(0,0,0,.12); }
.bigarrena {
  background: var(--tinta-zuria);
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 20px; padding: 18px 4px;
}
.bigarrena-izena { font-weight: 600; }
.bigarrena-azalpena { margin: 0; color: var(--tinta-leuna); }

/* ---------- Galeria ---------- */
.galeria {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
}
.galeria .argazkia {
  padding: 0; border: 0; background: var(--tinta-beltza); cursor: pointer;
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
}
.galeria img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .5s ease, filter .4s ease;
}
.galeria .argazkia:hover img, .galeria .argazkia:focus-visible img { transform: scale(1.05); filter: grayscale(0); }
.galeria .argazki-izena {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 24px 14px 12px; text-align: left;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}

/* Lightbox */
.argi-kutxa {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: rgba(5,5,5,.94); padding: 5vmin;
}
.argi-kutxa[open] { display: grid; }
.argi-kutxa img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.argi-kutxa .argi-oina {
  margin-top: 16px; text-align: center;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-grisa);
}
.argi-kutxa .itxi {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}

/* ---------- Fitxa teknikoa ---------- */
.fitxa { display: grid; gap: 0; margin-top: 44px; }
.fitxa-lerroa {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.fitxa-gakoa { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gorria); }
.fitxa-balioa { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--tinta-zuria); }

/* ---------- Egutegia ---------- */
.egutegia { margin-top: 52px; display: grid; gap: 0; }
.urtea {
  display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px); align-items: start;
  padding: 26px 0; border-top: 1px solid rgba(0,0,0,.14);
}
.urtea:last-child { border-bottom: 1px solid rgba(0,0,0,.14); }
.urtea .zb { font-family: var(--display); font-size: 2.1rem; font-weight: 800; color: var(--gorria); line-height: 1; }
.faseak { display: flex; flex-wrap: wrap; gap: 8px; }
.fasea {
  font-size: .78rem; letter-spacing: .06em;
  padding: 7px 14px; background: #fff; border: 1px solid rgba(0,0,0,.14);
}
.fasea.nabarmena { background: var(--gorria); color: #fff; border-color: var(--gorria); }

/* ---------- Berriak ---------- */
.berriak { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.berria { background: var(--tinta-zuria); }
.berria .irudia {
  aspect-ratio: 16 / 10; background: var(--zuntza);
  display: grid; place-items: center;
  color: var(--tinta-grisa); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
}
.berria .gorputza { padding: 24px 24px 28px; }
.berria-data { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gorria); }
.berria h3 { font-size: 1.15rem; margin: 10px 0 10px; }
.berria p { font-size: .92rem; color: var(--tinta-leuna); }

/* ---------- Kontaktua ---------- */
.kontaktua-sareta { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }

form.inprimakia { display: grid; gap: 18px; }
.eremua { display: grid; gap: 8px; }
.eremua label { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-grisa); }
.eremua input, .eremua textarea {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2);
  color: var(--tinta-zuria); font: inherit; font-size: .95rem; padding: 13px 15px;
}
.eremua input:focus, .eremua textarea:focus { outline: 2px solid var(--gorria); outline-offset: 1px; border-color: transparent; }
.eremua textarea { min-height: 128px; resize: vertical; }
.onarpena { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--tinta-grisa); }
.harremana { display: grid; gap: 22px; }
.harremana .lerroa { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
.harremana .etiketa { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gorria); margin-bottom: 6px; }
.harremana a { color: var(--tinta-zuria); text-decoration: none; border-bottom: 1px solid var(--gorria); }

/* ---------- Oina ---------- */
.oina { background: var(--tinta-beltza); color: var(--tinta-grisa); padding-block: 56px 40px; }
.oina .edukia { display: grid; gap: 34px; }
.oina-goia { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.oina img.marka-oina { height: 30px; }
.logo-hutsik {
  display: grid; place-items: center; min-width: 190px; height: 58px;
  border: 1px dashed rgba(255,255,255,.3);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-grisa);
  padding-inline: 14px; text-align: center;
}
.laguntzaileak { display: flex; flex-wrap: wrap; gap: 14px; }
.oina-behea {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; font-size: .8rem;
}
.oina-behea a { text-decoration: none; }
.oina-behea a:hover { color: var(--gorria); }

/* ---------- Lorem markak ---------- */
.lorem {
  display: inline-block; font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--gorria); color: #fff; padding: 3px 9px; vertical-align: middle;
  margin-left: 8px;
}

/* ---------- Agerraldia ---------- */
.agertu { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.agertu.ikusgai { opacity: 1; transform: none; }

/* ---------- Mugikorra ---------- */
@media (max-width: 1000px) {
  .galeria   { grid-template-columns: repeat(3, 1fr); }
  .datuak    { grid-template-columns: repeat(2, 1fr); }
  .pertsonaiak { grid-template-columns: repeat(2, 1fr); }
  .berriak   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .menu-botoia { display: block; }
  /* En el móvil la barra solo lleva marca + menú: contacto e idioma bajan al desplegable */
  .goiburua .hizkuntzak,
  .goiburua .edukia > .botoia { display: none; }
  .soilik-mugikorra { display: block; }
  .soilik-mugikorra a { color: var(--gorria); }

  /* El hero apila: titular, logline y ficha, uno debajo del otro */
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .hero .edukia { width: 100%; }
  .hero-izenburua { max-width: 100%; }
  .nabigazioa {
    position: fixed; inset: 72px 0 auto; background: var(--paper-beltza);
    border-bottom: 1px solid rgba(255,255,255,.12);
    display: none; padding: 18px var(--ertza) 26px;
  }
  .nabigazioa[data-zabalik="bai"] { display: block; }
  .nabigazioa ul { flex-direction: column; gap: 4px; }
  .nabigazioa a { display: block; padding: 11px 0; font-size: 1rem; }
  .hizkuntzak { order: 3; }

  .bi-zutabe, .bi-zutabe.hertsia, .kontaktua-sareta { grid-template-columns: 1fr; }
  .bi-zutabe .irudi-aldea { order: -1; }
  .galeria   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pertsonaiak, .berriak { grid-template-columns: 1fr; }
  .fitxa-lerroa, .bigarrena, .urtea { grid-template-columns: 1fr; gap: 6px; }
  .hero .hero-oina { position: static; margin-top: 44px; }
  .hero { min-height: auto; }
}

@media (max-width: 480px) {
  .datuak { grid-template-columns: 1fr; }
  .tira-parallax { --irabazia: 26px; }
  .tira-irudia .tira-oina { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .agertu { opacity: 1; transform: none; transition: none; }
  .galeria img { transition: none; }
  .tira-parallax img { transform: none !important; }
}

/* ---------- Bricks: piezas propias de la versión WordPress ---------- */
/* El envoltorio de texto del header desaparece del layout para que el botón,
   la navegación y el selector de idioma sean hijos directos de .edukia */
.goiburua-tresnak { display: contents; }

.ikusezina {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.tira-oina {
  max-width: var(--neurria); margin-inline: auto;
  padding: calc(clamp(38px, 5.5vw, 92px) + 22px) var(--ertza) 0;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-grisa);
  position: relative; z-index: 6;
}

.hero-irudia { pointer-events: none; }


/* ---------- Bricks: los textos ricos envuelven <p> ----------
   Antes aquí se ponía `margin: 0` a todos los párrafos, y por eso al dar a
   Enter en el editor las dos líneas salían pegadas. Ahora cada bloque dice
   cuánto aire quiere entre párrafos y el resto se arregla solo. */
.fitxa-balioa, .harremana .lerroa, .tira-oina, .hero-oina,
.bigarrena-azalpena, .berria-data { --p-tartea: .35em; }
.logline, .xehetasuna, .azpitituluzkoa, .pertsonaia, .berria { --p-tartea: .6em; }
.sarrera { --p-tartea: .8em; }

.brunet-erretratua img { filter: grayscale(1) contrast(1.06); width: 100%; }
.fitxa-balioa { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--tinta-zuria); }
.bigarrena-izena { font-weight: 600; }
.bigarrena-azalpena { color: var(--tinta-leuna); }
.berria-data { margin: 0; }
.hero .hero-oina span { white-space: nowrap; }

/* Formulario de Bricks dentro del bloque de contacto */
.inprimakia .form-group { margin-bottom: 18px; }
.inprimakia label { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-grisa); }
.inprimakia input[type="text"], .inprimakia input[type="email"], .inprimakia textarea {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2);
  color: var(--tinta-zuria); font: inherit; font-size: .95rem; padding: 13px 15px; width: 100%;
}
.inprimakia textarea { min-height: 128px; }
.inprimakia .bricks-button {
  background: var(--gorria); color: #fff; border: 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px; cursor: pointer;
}
.inprimakia .bricks-button:hover { background: var(--gorria-ilun); }


/* ---------- Bricks: ajustes de ritmo vertical ---------- */
/* Los elementos de Bricks no traen margen entre sí */
.atala .brxe-heading + .brxe-text,
.atala .brxe-heading + .brxe-text-basic.sarrera,
.atala .brxe-text + .brxe-text { margin-top: 26px; }
.atala .goiburutxoa + .brxe-heading { margin-top: 0; }
.pertsonaia .brxe-heading + .brxe-text { margin-top: 12px; }
.berria .gorputza .brxe-heading + .brxe-text { margin-top: 10px; }
.bi-zutabe > .brxe-div > .brxe-heading + .brxe-text { margin-top: 26px; }

/* La ficha rápida del hero: antes dependía de `display: contents` sobre el <p>
   que mete el editor, y se rompía en cuanto se tocaba el texto. Ahora son
   simples <span> en línea, así que da igual cómo lo envuelva Bricks. */
.hero .hero-oina { display: block; }
.hero .hero-oina p { margin: 0; }
.hero .hero-oina span {
  display: inline-block;
  margin: 0 14px 6px;
  white-space: nowrap;
}

/* Las franjas muerden las secciones vecinas: les devolvemos ese espacio
   para que el contenido no quede debajo del borde rasgado */
/* (la compensación superior ya no hace falta: las franjas no bajan) */
.atala:has(+ .tira-parallax),
.atala:has(+ .tira-irudia),
.hero:has(+ .tira-parallax) {
  padding-bottom: calc(var(--tarte) + clamp(38px, 5.5vw, 92px));
}

/* La ficha técnica continúa la sección de galería */
.fitxa-atala { padding-top: 0; }

/* ---------- Panel finkatuak ------------------------------------------------
   Eduki-pantaila bakoitza pantaila osokoa da eta bere lekuan finkatuta
   geratzen da; hurrengoa gainetik igotzen da, tira urratua ertz gisa daramala.
   Goiko aldearen (`top`) balioa JSk jartzen du panel bakoitzaren altueraren
   arabera: pantaila baino laburragoa bada goian finkatzen da, luzeagoa bada
   behealdea pantailaren azpiarekin lerrokatuta.
   ------------------------------------------------------------------------- */
.hero, .atala {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* z-index propio: cada panel es su propio contexto de apilado, así el
     contenido de uno no se cuela por encima de los que vienen después.
     Al tener todos el mismo valor, manda el orden del documento. */
  z-index: 1;
  isolation: isolate;
}
.hero { align-content: center; }

/* Tirak panelen gainetik pasatzen dira: haiek dira barrido-ertza */
.tira-parallax, .tira-irudia { z-index: 20; }

/* Oina azkena, panel guztien gainetik */
.oina { position: relative; z-index: 30; }

/* En Bricks las secciones son .brxe-section: nos aseguramos de que ningún
   contenedor intermedio corte el sticky */
#brx-content, main, .brx-body { overflow: visible; }


/* ---------- Sarrera zentratuta ---------- */
.hero .edukia {
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero-izenburua { margin-inline: auto; }
.hero .logline { margin-inline: auto; margin-bottom: 30px; }
.hero-ekintzak { justify-content: center; }

/* Fitxa laburra botoien azpian bertan, ez pantailaren behealdean */
.hero .hero-oina {
  position: static;
  margin-top: 34px;
  justify-content: center;
  text-align: center;
  padding-inline: 0;
  max-width: 820px;
}

/* ---------- Tirak: behera ez dute kutsatzen ----------
   Panel finkatuekin tirak ez dute beharrik hurrengo atalean sartzeko: goiko
   aldetik bakarrik mozten dute aurrekoa. Horrela ez dute inoiz testurik
   estaltzen panela bere lekuan dagoenean. */
.tira-parallax {
  margin-top: calc(-1 * var(--irabazia));
  margin-bottom: 0;
}

/* Aire al final de cada panel: la franja siguiente muerde hacia arriba
   `--irabazia`, y el borde rasgado es irregular, así que se le deja ese margen
   más un poco para que no se coma la última línea. */
.hero, .atala { --mordisko: clamp(38px, 5.5vw, 92px); }
.hero { padding-bottom: calc(110px + var(--mordisko) + 24px); }
.atala { padding-bottom: calc(var(--tarte) + var(--mordisko)); }

/* Panel bat pantailan sartzen ez bada, airea estutzen diogu lehenik; horrela
   gehienak oso-osorik ikusten dira eta izenburua ez da kanpoan geratzen. */
.atala.panel-estua {
  padding-top: clamp(40px, 3.4vw, 56px);
  padding-bottom: calc(clamp(40px, 3.4vw, 56px) + var(--mordisko));
}
.atala.panel-estua .bi-zutabe { gap: clamp(24px, 3.4vw, 48px); }


/* =========================================================================
   Franja dentro del panel
   La franja es el primer hijo de su sección y sobresale por arriba. Como está
   dentro, la zona transparente que queda por debajo del borde rasgado deja ver
   el fondo de ESTA sección, no el de la anterior.
   ========================================================================= */
.tira-goian {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 2;
  pointer-events: none;
}
.tira-goian img { display: block; width: 100%; }

/* Ya no hacen falta los márgenes negativos del planteamiento anterior */
.hero, .atala { --mordisko: 0px; }

/* =========================================================================
   Galería: carrusel horizontal con puntos
   ========================================================================= */
.galeria {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 44px;
  padding-bottom: 2px;
}
.galeria::-webkit-scrollbar { display: none; }

.galeria .argazkia {
  flex: 0 0 clamp(280px, 33vw, 440px);
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tinta-beltza);
  cursor: pointer;
  position: relative;
}
.galeria .argazkia img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .5s ease, filter .4s ease;
}
.galeria .argazkia:hover img,
.galeria .argazkia:focus-visible img { transform: scale(1.05); filter: grayscale(0); }

.galeria-puntuak {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin-top: 28px;
}
.galeria-puntua {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .26); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.galeria-puntua:hover { background: rgba(255, 255, 255, .5); }
.galeria-puntua[aria-current="true"] { background: var(--gorria); transform: scale(1.3); }

@media (max-width: 820px) {
  .galeria { gap: 10px; }
  .galeria .argazkia { flex: 0 0 82vw; }
}


/* Cada imagen de franja tiene su propia cola transparente bajo el borde
   rasgado (medida: del 10% al 21% de su altura). El solape con el panel debe
   cubrir esa cola, ni más ni menos: así por debajo del rasgado se ve el fondo
   del panel nuevo y la parte opaca no invade el texto. */
.tira-goian { --estalia: 20%; translate: 0 calc(-100% + var(--estalia)); }
.t-lokomotora   { --estalia: 18%; }
.t-musikariak   { --estalia: 20%; }
.t-bazkaria     { --estalia: 20%; }
.t-arraunlariak { --estalia: 25%; }
.t-kalea        { --estalia: 23%; }
.t-fabrika      { --estalia: 25%; }
.t-gorria-mehea { --estalia: 14%; }
.t-gorria-02    { --estalia: 15%; }
.t-gorria-zabala{ --estalia: 14%; }


/* Tramo de scroll entre paneles. No tiene fondo, así que mientras se recorre
   se sigue viendo el panel anterior (que está fijado). Es el respiro que
   necesita cada pantalla antes de que llegue la franja y la releve. */
.tartea {
  height: 80svh;
  position: relative;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 820px) { .tartea { height: 55svh; } }


/* El panel es una rejilla; sin acotar la columna, el ancho de las fotos del
   carrusel la estira y la página desborda a lo ancho en móvil. */
.hero, .atala { grid-template-columns: minmax(0, 1fr); }
.edukia { min-width: 0; }
.galeria { min-width: 0; max-width: 100%; }


/* =========================================================================
   Ajustes de octubre
   ========================================================================= */

/* El título del hero deja de ser el SVG y pasa a ser texto: mismo color,
   misma tipografía y mismas particiones, pero ocupando menos. */
/* `.hero h1 { font-size: 0 }` venía de cuando el título era un SVG y pesa más
   que una sola clase, así que el selector nuevo lleva el h1 delante. */
.hero h1.hero-titulua {
  font-family: var(--display);
  font-weight: 800;
  color: var(--gorria);
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: .98;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.hero-azpititulua {
  font-family: var(--testua);
  font-weight: 700;
  color: var(--gorria);
  font-size: clamp(.98rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 34px;
}

/* El log line entra en tres líneas */
.hero .logline { max-width: 920px; }

/* Titulillos: un punto más grandes, sin bolita y sin versales */
.goiburutxoa {
  display: block;
  font-family: var(--testua);
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
  color: var(--gorria);
  margin: 0 0 18px;
}
.goiburutxoa::before { content: none; }

/* Entradilla en negrita bajo el titular de José Brunet */
.azpitituluzkoa { margin-top: 24px; }
.azpitituluzkoa p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.45; }

/* Galería sobre fondo claro: los puntos cambian de color */
.argia .galeria-puntua, .zuntza .galeria-puntua { background: rgba(0, 0, 0, .18); }
.argia .galeria-puntua:hover, .zuntza .galeria-puntua:hover { background: rgba(0, 0, 0, .38); }
.argia .galeria-puntua[aria-current="true"],
.zuntza .galeria-puntua[aria-current="true"] { background: var(--gorria); }

/* Lightbox: flechas para pasar fotos */
.argi-kutxa .nabi {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.argi-kutxa .nabi:hover { background: var(--gorria); border-color: var(--gorria); }
.argi-kutxa .aurrekoa { left: clamp(10px, 3vw, 40px); }
.argi-kutxa .hurrengoa { right: clamp(10px, 3vw, 40px); }
.argi-kutxa .zenbakia {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 3vmin, 34px);
  text-align: center; color: var(--tinta-grisa);
  font-size: .85rem; letter-spacing: .1em;
}
@media (max-width: 640px) {
  .argi-kutxa .nabi { width: 44px; height: 44px; font-size: 1.2rem; }
}


/* =========================================================================
   Volimake en los titulares
   Volimake solo tiene un corte (Regular, 400) y no tiene itálica, así que los
   titulares van a 400: pedir 700 u 800 haría que el navegador fabricara una
   negrita falsa, y en una didona de contraste alto eso canta mucho.
   El resto del texto es Archivo, como en el dosier. Ya no hay nada de Google.
   ========================================================================= */
:root { --display: "Volimake", Georgia, serif; }

h1, h2, h3, .display,
.hero h1.hero-titulua { font-weight: 400; }

/* Piezas que iban en la display pero piden lectura, no impacto */
.hero .logline {
  font-family: var(--testua);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.5;
}
.fitxa-balioa {
  font-family: var(--testua);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Volimake pisa más que Playfair al mismo cuerpo: se compensa un punto */
.hero h1.hero-titulua { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: 0; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: 0; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing: 0; }


/* =========================================================================
   Cabecera y sección Trailerra
   ========================================================================= */

/* El logo del menú es ahora la versión de una línea sin subtítulo, así que a
   la misma altura se ve bastante más: se sube solo un punto. */
.marka img { height: 22px; }
@media (max-width: 820px) { .marka img { height: 18px; } }

.trailer-kutxa {
  width: 100%;
  max-width: min(100%, 940px);
  margin: 34px auto 0;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .22);
}
.trailer-kutxa > * { max-width: 100%; }
.trailer-kutxa iframe,
.trailer-kutxa video,
.trailer-kutxa .brxe-video { width: 100%; height: 100%; border: 0; }
.trailer-hutsik {
  margin: 0;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-grisa);
}
#trailerra .edukia { text-align: center; }


/* =========================================================================
   Formulario de Fluent Forms sobre fondo oscuro
   Fluent Forms trae su propia hoja; aquí solo se le quita el aire de más y se
   le pasan los colores del sistema. Las clases .ff-* son suyas.
   ========================================================================= */
.inprimakia .frm-fluent-form { --ff-color: var(--tinta-zuria); }
.inprimakia .ff-el-group { margin-bottom: 20px; }
.inprimakia .ff-el-input--label label {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-grisa);
  margin-bottom: 8px;
}
.inprimakia .ff-el-form-control {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 0;
  color: var(--tinta-zuria);
  font-family: var(--testua);
  font-size: .95rem;
  padding: 13px 15px;
  box-shadow: none;
}
.inprimakia .ff-el-form-control:focus {
  outline: 2px solid var(--gorria);
  outline-offset: 1px;
  border-color: transparent;
  background: rgba(255, 255, 255, .07);
}
.inprimakia .ff-el-form-control::placeholder { color: rgba(255, 255, 255, .34); }
.inprimakia textarea.ff-el-form-control { min-height: 128px; resize: vertical; }

.inprimakia .ff_t_c, .inprimakia .ff-el-tc { color: var(--tinta-grisa); font-size: .84rem; }
.inprimakia .ff_t_c a, .inprimakia .ff-el-tc a { color: var(--tinta-zuria); }

.inprimakia .ff-btn-submit {
  background: var(--gorria);
  border: 0; border-radius: 0;
  color: #fff;
  font-family: var(--testua);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px;
  transition: background .2s ease;
}
.inprimakia .ff-btn-submit:hover { background: var(--gorria-ilun); }
.inprimakia .ff-el-is-error .text-danger,
.inprimakia .error.text-danger { color: var(--gorria); font-size: .82rem; }
.inprimakia .ff-message-success {
  border: 1px solid var(--gorria);
  background: rgba(226, 83, 57, .12);
  color: var(--tinta-zuria);
  padding: 18px 20px;
}


/* =========================================================================
   Ajustes del 20/10/2026
   ========================================================================= */

/* ---------- Hero: quieto y más contenido ---------- */
/* Antes medía 885 px y en pantallas de 700-760 px no cabía, así que se fijaba
   por abajo y subía al hacer scroll. Ahora cabe, y el JS le deja el `top` a 0
   siempre: lo único que se mueve es la franja (y el panel que la sigue). */
.hero {
  padding-block: 104px 84px;
  overflow: hidden;
}
.hero.panel-estua { padding-block: 88px 56px; }

.hero h1.hero-titulua {
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  margin-bottom: 14px;
}
.hero-azpititulua {
  font-size: clamp(.9rem, 1.35vw, 1.08rem);
  margin-bottom: 24px;
}
.hero .logline {
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  line-height: 1.45;
  max-width: 840px;
  margin-bottom: 26px;
}
.hero .botoia { padding: 13px 26px; font-size: .78rem; }
.hero .hero-oina { margin-top: 26px; font-size: .7rem; gap: 12px 28px; }

/* ---------- José Brunet: titular sobre la foto ---------- */
/* El titular baja a la columna de la izquierda, encima del retrato: la columna
   derecha gana sitio y el panel deja de pasarse de alto. */
#brunet .bi-zutabe {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}
#brunet .irudi-aldea .brxe-heading { margin-bottom: 20px; }
#brunet .brunet-erretratua img,
#brunet .irudi-aldea img {
  width: 100%;
  max-height: 46svh;
  object-fit: cover;
  object-position: center 20%;
}
#brunet .azpitituluzkoa { margin-top: 0; }
#brunet .azpitituluzkoa + .brxe-text { margin-top: 18px; }

/* ---------- Kamera: que la foto no empuje el panel ---------- */
#kamera .bi-zutabe { align-items: center; }
#kamera .irudi-aldea img {
  width: 100%;
  max-height: 46svh;
  object-fit: contain;
}

/* ---------- Galería a anchura completa ---------- */
#galeria .galeria {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 34px;
  gap: 0;
}
#galeria .argazkia {
  flex: 0 0 100vw;
  aspect-ratio: auto;
  height: clamp(260px, 44svh, 540px);
  background: transparent;
}
#galeria .argazkia img { object-fit: contain; }
#galeria .galeria-puntuak { margin-top: 22px; }


/* La galería a sangre: hay un `max-width: 100%` anterior (el que arregló el
   desbordamiento en móvil) que recortaba el carrusel, así que aquí se anula. */
#galeria .galeria { max-width: none; width: 100vw; }
#galeria .argazkia { max-width: none; width: 100vw; flex: 0 0 100vw; }

/* El hueco del trailer se ajusta al alto de pantalla para que el panel quepa */
.trailer-kutxa {
  aspect-ratio: 16 / 9;
  height: min(52svh, 520px);
  width: auto;
  max-width: 100%;
  margin: 30px auto 0;
}


/* Galería a sangre: con `contain` la foto quedaba pequeña en medio de una
   banda de 1440 px. Con `cover` ocupa todo el ancho; se recorta por arriba y
   abajo, así que la banda se hace lo más alta que permita el panel. */
#galeria .argazkia {
  height: clamp(300px, 52svh, 620px);
  background: var(--tinta-beltza);
}
#galeria .argazkia img {
  object-fit: cover;
  object-position: center 42%;
  height: 100%;
}
#galeria .edukia > .bi-zutabe { margin-bottom: 4px; }
#galeria.panel-estua .galeria { margin-top: 24px; }


/* El hero en móvil: se aprieta para que quepa y no haya que recortarlo */
@media (max-width: 820px) {
  .hero { padding-block: 92px 52px; }
  .hero.panel-estua { padding-block: 84px 40px; }
  .hero h1.hero-titulua { font-size: clamp(1.7rem, 8.4vw, 2.5rem); margin-bottom: 10px; }
  .hero-azpititulua { font-size: .9rem; margin-bottom: 18px; }
  .hero .logline { font-size: 1rem; line-height: 1.4; margin-bottom: 20px; }
  .hero .hero-ekintzak { gap: 10px; }
  .hero .botoia { padding: 11px 20px; font-size: .74rem; }
  .hero .hero-oina {
    margin-top: 18px;
    gap: 4px 16px;
    font-size: .62rem;
    letter-spacing: .1em;
  }
}


/* =========================================================================
   Aire de arriba y galería de tres en tres (20/10/2026, segunda vuelta)
   ========================================================================= */

/* El JS mide cuánto se mete la franja en su panel y lo deja en
   `--tira-sarrera`. El aire de arriba nunca puede ser menor que eso. */
.atala {
  padding-top: max(var(--tarte), calc(var(--tira-sarrera, 0px) + 30px));
}
.atala.panel-estua {
  padding-top: max(clamp(40px, 3.4vw, 56px), calc(var(--tira-sarrera, 0px) + 26px));
}

/* Galería: tres fotos por pantalla que entre las tres ocupan todo el ancho */
#galeria .argazkia {
  flex: 0 0 calc(100vw / 3);
  width: calc(100vw / 3);
  height: clamp(220px, 36svh, 430px);
  scroll-snap-align: start;
}
@media (max-width: 1023px) {
  #galeria .argazkia { flex-basis: 50vw; width: 50vw; }
}
@media (max-width: 640px) {
  #galeria .argazkia { flex-basis: 100vw; width: 100vw; }
}


/* Kamera: cuando el panel va apretado, la cámara se achica para dejar sitio */
#kamera.panel-estua .irudi-aldea img { max-height: 36svh; }
#kamera.panel-estua .bi-zutabe { gap: clamp(20px, 2.6vw, 36px); }


/* =========================================================================
   Brunet: el bloque con el retrato de fondo iguala a la columna derecha
   La foto ya no es un <img> sino el fondo de un bloque, así que el alto no lo
   pone la imagen: lo pone la rejilla. La columna izquierda se parte en dos
   filas (titular + resto) y el bloque se come la segunda entera.
   ========================================================================= */
#brunet .bi-zutabe { align-items: stretch; }
#brunet .irudi-aldea {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
#brunet .irudi-aldea > .brxe-block,
#brunet .irudi-aldea > .brxe-div {
  height: 100%;
  min-height: 200px;
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
}

/* ---------- Galería: aire entre fotos y contra los bordes ----------
   --ertz-tartea: lo que se deja a cada lado de la página.
   --hutsunea:    lo que se deja entre foto y foto.
   El ancho de cada foto sale de repartir lo que queda entre las tres. */
#galeria .galeria {
  --ertz-tartea: clamp(16px, 2.8vw, 40px);
  --hutsunea: 8px;
  --zabalera: calc(100vw - 2 * var(--ertz-tartea));
  width: var(--zabalera);
  margin-inline: calc(50% - 50vw + var(--ertz-tartea));
  gap: var(--hutsunea);
  scroll-padding-inline: 0;
}
#galeria .argazkia {
  flex: 0 0 calc((var(--zabalera) - 2 * var(--hutsunea)) / 3);
  width: calc((var(--zabalera) - 2 * var(--hutsunea)) / 3);
}
@media (max-width: 1023px) {
  #galeria .argazkia {
    flex-basis: calc((var(--zabalera) - var(--hutsunea)) / 2);
    width: calc((var(--zabalera) - var(--hutsunea)) / 2);
  }
}
@media (max-width: 640px) {
  #galeria .argazkia { flex-basis: var(--zabalera); width: var(--zabalera); }
}


/* =========================================================================
   Trailer incrustado (Livid)
   El vídeo no es 16:9: Livid lo sirve a 800x433 (1,85:1), así que el hueco se
   ajusta a esa proporción para que no queden franjas negras arriba y abajo.
   ========================================================================= */
.trailer-kutxa {
  aspect-ratio: 800 / 433;
  height: min(52svh, 520px);
  width: auto;
  max-width: 100%;
  margin: 30px auto 0;
  background: #000;
  border: 0;
  overflow: hidden;
}
.trailer-bideoa,
.trailer-bideoa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* La caja del trailer centraba su contenido (`place-items: center`), y así el
   iframe se quedaba con su alto natural. Que lo estire. */
.trailer-kutxa { display: grid; place-items: stretch; }
.trailer-kutxa > * { height: 100%; min-height: 0; }


/* Bricks envuelve el contenido del elemento de texto en un <p>, y ahí el
   `height: 100%` del iframe no resuelve (el <p> no tiene alto definido y el
   iframe se queda en sus 150 px por defecto). Lo colocamos en absoluto sobre
   la caja, que sí tiene alto, y así da igual cuántos envoltorios haya. */
.trailer-kutxa { position: relative; }
.trailer-kutxa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.trailer-kutxa p { margin: 0; }


/* El último panel (contacto) va en flujo normal: el pie lo empuja hacia arriba
   en lugar de taparlo. Por eso tampoco lleva tramo vacío detrás: ese hueco
   transparente dejaría ver el panel anterior, que sí sigue clavado. */
.atala.azken-panela { position: relative; top: auto; }


/* =========================================================================
   Edición a mano en Bricks
   Lo que el editor puede meter dentro de un bloque de texto y debe verse bien
   sin tocar CSS: párrafos, saltos de línea, listas, enlaces y negritas.
   ========================================================================= */

/* Un <br> hace salto simple dentro del párrafo; Enter crea párrafo nuevo y el
   aire lo pone --p-tartea. No hace falta nada más. */
.atala .brxe-text br,
.oina .brxe-text br { line-height: inherit; }

.atala .brxe-text ul,
.atala .brxe-text ol {
  margin: 0 0 var(--p-tartea, 1.15em);
  padding-left: 1.2em;
}
.atala .brxe-text ul:last-child,
.atala .brxe-text ol:last-child { margin-bottom: 0; }
.atala .brxe-text li { margin-bottom: .3em; }
.atala .brxe-text li::marker { color: var(--gorria); }

.atala .brxe-text a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gorria);
}
.atala .brxe-text a:hover { color: var(--gorria); }

.atala .brxe-text strong, .atala .brxe-text b { font-weight: 700; }
.atala .brxe-text em, .atala .brxe-text i { font-style: italic; }

/* Los campos de la ficha técnica son de una o dos líneas: el aire entre ellas
   es corto a propósito, para que «ON Produkzioak / Labrit Multimedia» se lea
   como una lista y no como dos párrafos sueltos. */
.fitxa-balioa p { line-height: 1.45; }