/* ============================================================
   BER — hoja de estilos única
   Todo lo visual del sitio se cambia desde este archivo.
   Los colores y medidas están en el bloque de abajo: cambia el
   valor una vez y se actualiza en todas las páginas.
   ============================================================ */

:root{
  /* --- Colores --- */
  --blanco:        #FFFFFF;
  --negro:         #000000;
  --gris-fondo:    #EEEFF0;
  --gris-linea:    #C0C0C0;
  --gris-texto:    #727272;
  --verde-bosque:  #0D755C;
  --verde-esmeralda:#0A9977;

  /* --- Tipografía --- */
  --fuente: 'Carlito', Calibri, 'Segoe UI', sans-serif;

  /* --- Medidas --- */
  --ancho-sitio:   1100px;   /* ancho máximo del contenido */
  --margen-lados:  24px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.6;
}

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

a{color:inherit}

.contenedor{
  max-width:var(--ancho-sitio);
  margin-inline:auto;
  padding-inline:var(--margen-lados);
}

/* ---------- Cabecera ---------- */
.cabecera{
  padding:38px 0 26px;
  text-align:center;
}

.logotipo{
  font-size:44px;
  letter-spacing:.16em;
  font-weight:400;
  margin:0 0 22px;
  line-height:1;
}

.logotipo a{text-decoration:none}

.menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
}

.menu a{
  text-decoration:none;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--negro);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}

.menu a:hover,
.menu a:focus-visible{ border-bottom-color:var(--gris-linea) }

.menu a[aria-current="page"]{ color:var(--verde-bosque) }

/* ---------- Banner de portada ---------- */
.banner{ margin-top:8px }

.banner img{
  width:100%;
  height:auto;
}

/* ---------- Manifiesto: bloque de biografía ---------- */
.bio{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:56px;
  align-items:start;
  padding:46px 0 34px;
}

.bio h1{
  font-size:30px;
  font-weight:400;
  margin:0 0 2px;
  letter-spacing:.02em;
}

.bio .oficio{
  margin:0 0 26px;
  color:var(--gris-texto);
  font-size:16px;
}

.bio p{
  margin:0 0 18px;
  text-align:justify;
  hyphens:auto;
  max-width:62ch;
}

/* ---------- Retrato ---------- */
/* El retrato ya viene recortado en círculo desde el archivo:
   solo se ajusta el tamaño, no se recorta ni se enmascara. */
.retrato{ max-width:310px; height:auto }

/* ---------- Manifiesto: texto ---------- */
.manifiesto{
  border-top:1px solid var(--gris-linea);
  padding-top:34px;
}

.manifiesto h2{
  font-size:26px;
  font-weight:400;
  margin:0 0 22px;
  letter-spacing:.02em;
}

.manifiesto p{
  margin:0 0 18px;
  text-align:justify;
  hyphens:auto;
}

/* ---------- Colaboraciones ---------- */
.titulo-pagina{
  font-size:30px;
  font-weight:400;
  letter-spacing:.02em;
  margin:44px 0 30px;
}

.rejilla{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:52px 44px;
  align-items:start;
}

.colaboracion > img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--gris-fondo);
}

.colaboracion h2{
  font-size:22px;
  font-weight:400;
  letter-spacing:.02em;
  margin:16px 0 2px;
}

.colaboracion .bajada{
  margin:0 0 12px;
  color:var(--gris-texto);
  font-size:14px;
}

.colaboracion p{
  margin:0;
  text-align:justify;
  hyphens:auto;
}

/* Fila de imágenes secundarias dentro de una colaboración */
.tira{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:16px;
}

.tira img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

/* ---------- Cierre con imagen circular ---------- */
.cierre{
  text-align:center;
  padding:6px 0 0;
}

/* La imagen de cierre ya viene en círculo, con su margen blanco propio.
   No se recorta: solo se le da ancho. */
.cierre img{
  width:500px;
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

/* ---------- Pie ---------- */
.pie{
  text-align:center;
  padding:40px 0 46px;
  color:var(--gris-texto);
  font-size:14px;
}

.pie p{margin:0}

/* ---------- Pantallas chicas ---------- */
@media (max-width:760px){
  body{font-size:16px}

  .logotipo{font-size:36px}

  .menu ul{gap:16px}

  .bio{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:32px;
  }

  .bio .retrato{
    max-width:220px;
    margin-inline:auto;
    order:-1;             /* en el celular el retrato va arriba */
  }

  .rejilla{
    grid-template-columns:1fr;
    gap:40px;
  }

  .titulo-pagina{margin:30px 0 24px}
}

/* ---------- Accesibilidad ---------- */
:focus-visible{
  outline:2px solid var(--verde-esmeralda);
  outline-offset:3px;
}