/* Bit Bruto — las seis secciones. */

/* ---- 01 Home ---- */

.bb-home__fondo,
.bb-home__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bb-home__fondo img {
  object-fit: cover;
  object-position: center;
}

/* ---- 02 Lema ---- */

/* La roca es fondo a sangre en los tres tamaños, con el titular encima abajo.
   La imagen trae su propio fondo negro degradado, pero llenar la pantalla con
   ella no basta: la roca no está centrada dentro del archivo y cada mockup la
   encuadra distinto, así que el recorte va medido más abajo.

   El titular va casi a sangre, con menos margen lateral que el resto del sitio:
   en el mockup de escritorio arranca al 2,1% del ancho. Como aquí dentro solo
   vive el titular, el margen propio no afecta a nada más. */
.bb-lema {
  position: relative;
  display: grid;
  align-content: end;
  padding: var(--bb-alto-header) 2.1% clamp(2rem, 7vh, 5rem);
}

.bb-lema__roca,
.bb-lema__roca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* El zoom se hace con scale sobre cover, no fijando el ancho: cover garantiza
   que la roca cubre la pantalla sea cual sea la proporción de la ventana, y el
   scale solo amplía, así que nunca aparece una franja de fondo. */
.bb-lema__roca {
  overflow: hidden;
}

/* Los tres encuadres salen de registrar la imagen contra su mockup por
   correlación, no de tantear: el ajuste conserva la proporción de la imagen, y
   el residuo que queda es del 0,5% en posición. En escritorio la roca es más
   alta que la pantalla y el mockup deja fuera casi todo el sobrante por arriba,
   ampliada un 6% respecto a lo que da cover por sí solo. */
.bb-lema__roca img {
  object-fit: cover;
  object-position: center 95.3%;
  transform: scale(1.06);
}

/* El tamaño sale de igualar la altura de letra del mockup, no su anchura: la
   altura apenas cambia entre pesos, así que la medida sigue valiendo cuando
   llegue Cirka Regular y el texto se ensanche hasta el 93% del mockup. */
.bb-lema__titular {
  position: relative;
  z-index: 2;
  color: var(--bb-blanco);
  font-size: 11vw;
  font-weight: 300;
  line-height: 0.98;
  text-align: center;
  letter-spacing: -0.015em;
}

/* El tachado se dibuja: el del navegador no permite controlar grosor ni alcance. */
.bb-lema__tachado {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.bb-lema__tachado::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  top: 52%;
  height: 0.055em;
  background: currentColor;
  transform: rotate(-1.4deg);
  pointer-events: none;
}

@media (max-width: 1024px) {
  /* En tablet la roca es más ancha que la pantalla y el sobrante se reparte
     casi por igual (47%): centrada. */
  .bb-lema__roca img {
    object-position: center center;
    transform: none;
  }

  /* En el mockup de tablet el titular acaba al 89,7% de la altura y arranca al
     5,1% del ancho. */
  .bb-lema {
    padding-inline: 5.1%;
    padding-bottom: 10.3vh;
  }

  .bb-lema__titular {
    font-size: 10.4vw;
  }
}

@media (max-width: 600px) {
  /* En móvil el mockup no enseña la franja central de la imagen sino la que va
     del 8% al 69%: la roca está en la mitad izquierda del archivo y el fondo
     negro sobrante, a la derecha. Centrar el recorte dejaba la roca corrida a
     un lado con negro al otro. */
  .bb-lema__roca img {
    object-position: 19% center;
    transform: scale(1.036);
  }

  /* En el mockup el titular acaba al 78% de la altura, no pegado al borde, y
     arranca al 6,8% del ancho. */
  .bb-lema {
    padding-inline: 6.8%;
    padding-bottom: 22vh;
  }

  /* Aquí el titular parte en dos líneas y el mockup las monta casi tocándose:
     letra más grande e interlineado mucho más cerrado que en una sola línea.
     Con el 0.98 general la altura del bloque cuadraba pero la letra salía
     pequeña; hay que bajar los dos valores a la vez. */
  .bb-lema__titular {
    font-size: 16.4vw;
    line-height: 0.81;
    text-align: left;
  }
  /* En móvil el titular va a dos líneas: "Nothing" arriba, el resto debajo.
     El fit-content es imprescindible: sin él el span ocupa todo el ancho de la
     línea y la raya de tachado cruza la pantalla entera. */
  .bb-lema__tachado::after { top: 54%; }
  .bb-lema__tachado {
    display: block;
    width: fit-content;
  }
}

/* ---- 03 Statement ---- */

/* La capitular va en su propia capa y el párrafo se monta sobre su brazo, como
   en el mockup. Con las dos en columnas de rejilla la T no podía crecer sin
   empujar el texto, y quedaba a media escala. */
.bb-statement {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  padding: 5vh var(--bb-margen) 8.7vh;
  color: var(--bb-negro);
  overflow: hidden;
}

/* La capitular se dimensiona contra la altura de la ventana, no contra el
   ancho: en el mockup cruza la pantalla casi de arriba abajo, y atarla al
   ancho la dejaba a media escala en pantallas apaisadas. El tope por vw evita
   que se coma el sitio del párrafo en ventanas muy bajas. Por eso vive en una
   capa del tamaño exacto de la sección, que recorta lo que sobresale: sin
   ella, la letra hincha el scrollHeight de la sección aunque visualmente
   quepa, y el detector de altura del scroll cree que la sección no cabe y
   desactiva el enganche estricto en toda la web. */
/* La capitular y el párrafo comparten la misma celda de la rejilla y se alinean
   los dos por abajo. Antes la T se posicionaba con un bottom en vh mientras su
   tamaño venía del ancho, así que en cuanto la ventana cambiaba de proporción el
   pie de la T se despegaba de la última línea del párrafo. */
.bb-statement__capa {
  /* Capa del tamaño exacto de la sección: recorta lo que la T saca por arriba y
     evita que la letra infle el alto de la sección, que es lo que mira el
     detector de scroll para saber si cabe. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bb-statement__capitular {
  position: absolute;
  left: var(--bb-margen);
  /* El mismo valor que el relleno inferior de la sección: como el interlineado
     deja el pie del glifo justo en el borde de su caja, la T acaba exactamente
     en la línea donde acaba el párrafo, en cualquier proporción de ventana. */
  bottom: 8.7vh;
  display: block;
  font-size: min(124vh, 76vw);
  /* Interlineado ajustado para que el pie del glifo coincida con el borde
     inferior de su caja. Así basta con alinear las cajas por abajo para que el
     pie de la T quede en la misma línea que el final del párrafo, sin márgenes
     negativos que desborden la sección. */
  line-height: 0.456;
  font-weight: 300;
  color: var(--bb-negro);
  user-select: none;
}

.bb-statement__texto {
  grid-area: 1 / 1;
  z-index: 2;
  justify-self: end;
  align-self: end;
  width: 62%;
  color: var(--bb-negro);
  font-size: 2.24vw;
  line-height: 1.26;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 1024px) {
  /* En tablet la T y el párrafo comparten franja: empiezan y acaban a la misma
     altura, en la mitad inferior de la pantalla.

     El tamaño no es libre: la T y el párrafo están los dos anclados abajo, así
     que si la letra encoge su brazo baja hasta la primera línea del texto y se
     la come. En el mockup la T ocupa el 42% de la altura y su brazo acaba cinco
     puntos por encima de donde arranca el párrafo; con el 58vh anterior medía
     un 12,6% menos y el brazo caía justo encima del texto. */
  .bb-statement__capitular {
    font-size: min(65.3vh, 96vw);
    bottom: 8vh;
  }

  .bb-statement__texto {
    width: 60%;
    font-size: 2.45vw;
  }
}

@media (max-width: 600px) {
  /* Medido en el mockup de móvil: la T arranca arriba, ocupa el 83% del ancho
     centrada y llega al 51% de la altura, con el logo superpuesto sobre su
     brazo — eso es intencionado en el diseño. El párrafo llena desde ahí hasta
     el borde inferior. */
  .bb-statement {
    /* Dos franjas: la de arriba para la T, la de abajo para el párrafo. Con los
       dos en la misma celda el pie de la letra tapaba la primera línea. */
    grid-template-rows: 55% minmax(0, 1fr);
    align-content: stretch;
    padding: 0 var(--bb-margen) 1.5vh;
  }

  .bb-statement__capitular {
    left: 50%;
    transform: translateX(-50%);
    /* Se ancla por el pie, que es lo que el interlineado deja al ras de la
       caja. La pantalla de un móvil real es proporcionalmente más ancha que la
       del mockup, así que la letra no puede tener a la vez su ancho y su altura
       relativos: se busca el mayor tamaño que no la recorta por arriba y deja
       sitio al párrafo. */
    top: auto;
    bottom: 48%;
    font-size: 132vw;
  }

  .bb-statement__texto {
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    width: auto;
    font-size: 4.05vw;
    line-height: 1.3;
  }
}

/* ---- 04 Disciplinas ---- */

.bb-disciplinas {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  background: var(--bb-negro);
}

.bb-disciplinas__lista {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
}

.bb-banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(0.5rem, 1.6vh, 1.4rem) var(--bb-margen);
  min-height: 0;
}

/* La primera banda no reserva sitio para el logo: reservarlo la hacía mucho más
   alta que las otras cuatro y empujaba el cierre verde fuera de la pantalla. El
   logo se superpone sobre la banda negra, donde se lee bien. */

.bb-banda--oscura { background: var(--bb-negro); color: var(--bb-blanco); }
.bb-banda--clara  { background: var(--bb-blanco); color: var(--bb-negro); }

/* Bandas impares: nota a la izquierda, título a la derecha. */
.bb-banda--oscura .bb-banda__nota   { grid-column: 1; text-align: left; }
.bb-banda--oscura .bb-banda__titulo { grid-column: 2; text-align: right; }

/* Bandas pares: título a la izquierda, nota a la derecha. */
.bb-banda--clara .bb-banda__titulo { grid-column: 1; text-align: left; }
.bb-banda--clara .bb-banda__nota   { grid-column: 2; text-align: right; }

.bb-banda__titulo {
  margin: 0;
  font-size: 6.2vw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Medido contra los mockups: la descripción es un 42% mayor de lo que estaba,
   con el interlineado bastante más cerrado. Las dos cosas van juntas — subir
   solo el cuerpo hacía que el bloque no cupiera en su banda. */
.bb-banda__nota {
  margin: 0;
  font-size: 1.49vw;
  line-height: 0.95;
  max-width: 34ch;
}

.bb-banda--oscura .bb-banda__nota { justify-self: start; }
.bb-banda--clara  .bb-banda__nota { justify-self: end; }

.bb-disciplinas__cierre {
  background: var(--bb-verde);
  color: var(--bb-negro);
  margin: 0;
  padding: clamp(1.5rem, 6vh, 4rem) var(--bb-margen);
  text-align: center;
  /* El 1,5vw anterior no se sobrescribía en ninguna media query, así que esta
     frase acababa a 9px en tablet y a 5,5px en móvil: ilegible. Cada tamaño
     lleva ahora el suyo, medido contra su mockup. */
  font-size: 1.72vw;
  /* Cerrado como en los mockups. Además es lo que hace que las tres líneas
     quepan en la franja de 16vh en los móviles bajos (360x640 y menores). */
  line-height: 1.1;
  display: grid;
  place-content: center;
  height: 19.5vh;
}

@media (max-width: 1024px) {
  .bb-disciplinas__cierre {
    height: 37.9vh;
    font-size: 4.39vw;
  }
  .bb-banda__titulo { font-size: 6.6vw; }
  .bb-banda__nota { font-size: 1.66vw; }
}

@media (max-width: 600px) {
  .bb-disciplinas__cierre {
    height: 16vh;
    font-size: 7.17vw;
  }

  .bb-banda {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 0.25rem;
    padding: clamp(0.4rem, 1.1vh, 0.9rem) var(--bb-margen);
  }
  /* En móvil todo alineado a la izquierda: título arriba, nota debajo. */
  .bb-banda--oscura .bb-banda__titulo,
  .bb-banda--clara  .bb-banda__titulo {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    /* En el mockup de móvil el título llena el ancho de la banda; con el 6,4vw
       anterior se quedaba en la mitad. */
    font-size: 10.8vw;
  }
  .bb-banda--oscura .bb-banda__nota,
  .bb-banda--clara  .bb-banda__nota {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    justify-self: start;
    max-width: none;
    font-size: 3.72vw;
  }
}

/* ---- 05 Who we are ---- */

.bb-nosotros {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: var(--bb-gris);
  column-gap: clamp(1.5rem, 5vw, 5rem);
  row-gap: 0;
  /* Sin relleno inferior: en el mockup el grabado llega hasta el borde de la
     pantalla, y cualquier relleno aquí deja asomar una franja gris al pie.
     El aire bajo el texto lo pone el propio texto. */
  padding: 0;
}

.bb-nosotros__franja {
  grid-column: 1 / -1;
  grid-row: 1;
  /* Medido en los mockups: la franja no coincide con el alto de la cabecera,
     es una banda propia de esta pantalla. */
  height: 24.7vh;
  background: var(--bb-gris);
}

/* El retrato ocupa todo el espacio bajo la franja; el texto va encima. */
.bb-nosotros__cuerpo {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  overflow: hidden;
}

.bb-nosotros__retrato,
.bb-nosotros__retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bb-nosotros__retrato img {
  object-fit: cover;
  /* El archivo ya viene recortado al grabado, así que basta con centrarlo. */
  object-position: center;
  /* El grabado se oscurece lo justo para que el texto blanco tenga contraste.
     Se ajusta en la tarea 17 si la medida real no llega. */
  filter: brightness(0.72);
}

.bb-nosotros__titular,
.bb-nosotros__texto {
  position: relative;
  z-index: 2;
  grid-row: 2;
  color: var(--bb-blanco);
  align-self: start;
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
}

.bb-nosotros__titular {
  grid-column: 1;
  padding-left: var(--bb-margen);
  font-size: 5.6vw;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 15ch;
}

.bb-nosotros__texto {
  grid-column: 2;
  padding-right: var(--bb-margen);
  font-size: 1.5vw;
  line-height: 1.45;
  text-align: right;
  max-width: 34ch;
  justify-self: end;
}

@media (max-width: 1024px) {
  .bb-nosotros__franja { height: 22.7vh; }

  /* El encuadre cerrado de tablet y móvil deja una zona más clara justo bajo el
     titular: se oscurece un punto más para que el texto blanco siga legible.
     Medido: con 0,72 el contraste bajaba a 2,89 y el mínimo exigido es 3. */
  .bb-nosotros__retrato img { filter: brightness(0.62); }
}

@media (max-width: 600px) {
  .bb-nosotros__franja { height: 25.4vh; }
}

@media (max-width: 1024px) {
  /* Cuatro filas: la franja del logo, el grabado que ocupa el resto, y luego
     el titular y el párrafo, cada uno en la suya. Compartir fila era lo que
     los imprimía uno encima del otro al pasar a una sola columna. */
  .bb-nosotros {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }

  /* El grabado se extiende por detrás de los dos bloques de texto. */
  .bb-nosotros__cuerpo { grid-row: 2 / -1; }

  .bb-nosotros__titular,
  .bb-nosotros__texto {
    grid-column: 1;
    align-self: end;
    padding: 0 var(--bb-margen);
    max-width: none;
    text-align: left;
    justify-self: start;
  }

  .bb-nosotros__titular { grid-row: 3; }
  .bb-nosotros__texto { grid-row: 4; }

  .bb-nosotros__titular {
    margin-top: 0;
    margin-bottom: clamp(0.6rem, 2vh, 1.2rem);
    font-size: 5.7vw;
  }

  .bb-nosotros__texto {
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 5vh, 3rem);
    font-size: 2.6vw;
    text-align: justify;
  }

  .bb-nosotros__titular { font-size: 6.3vw; }

  /* En pantallas estrechas el texto se apoya en la mitad inferior:
     se refuerza el oscurecido solo ahí. */
  .bb-nosotros__cuerpo::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to bottom, rgba(17,17,17,0) 0%, rgba(17,17,17,0.55) 60%);
    z-index: 1;
  }
}

/* ---- 06 Contacto ---- */

.bb-contacto {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(0.4rem, 1.2vh, 1rem);
  padding: var(--bb-alto-header) var(--bb-margen) clamp(3rem, 10vh, 7rem);
  background: var(--bb-azul);
  color: var(--bb-blanco);
}

.bb-contacto__claim {
  color: var(--bb-blanco);
  font-size: clamp(1.9rem, 9.2vw, 8.4rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

.bb-contacto__trazo {
  width: min(84%, 980px);
  height: auto;
  margin-left: 0.06em;
}

.bb-contacto__linea { margin: clamp(0.4rem, 3.5vh, 2.6rem) 0 0; }

.bb-contacto__correo {
  color: var(--bb-blanco);
  font-size: clamp(0.9rem, 4vw, 3.6rem);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.bb-contacto__correo:hover,
.bb-contacto__correo:focus-visible {
  border-bottom-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .bb-contacto__correo { transition: none; }
}

@media (max-width: 600px) {
  .bb-contacto { align-content: end; }
  .bb-contacto__trazo { width: min(88%, 420px); }
}