/* Bit Bruto — reinicio mínimo y tokens propios. */

:root {
  --bb-negro:   var(--wp--preset--color--bb-negro);
  --bb-blanco:  var(--wp--preset--color--bb-blanco);
  --bb-naranja: var(--wp--preset--color--bb-naranja);
  --bb-verde:   var(--wp--preset--color--bb-verde);
  --bb-azul:    var(--wp--preset--color--bb-azul);
  --bb-gris:    var(--wp--preset--color--bb-gris);

  --bb-margen: clamp(1.25rem, 4vw, 4rem);

  /* Medidos sobre los mockups: el logo ocupa el 17,3% del ancho en escritorio,
     el 32,4% en tablet y el 58,5% en móvil, con su centro al 9,8%, 11,5% y
     16,6% de la altura. La altura de la cabecera es el doble de ese centro,
     porque el logo va centrado en ella. */
  --bb-logo-ancho: min(17.3vw, 340px);
  --bb-alto-header: 19.6vh;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow: hidden; /* el scroll lo gestiona .bb-pager, no el documento */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p { margin: 0; text-wrap: balance; }

p { text-wrap: pretty; }

::selection { background: var(--bb-naranja); color: var(--bb-blanco); }

@media (max-width: 1024px) {
  :root {
    --bb-logo-ancho: 32.4vw;
    --bb-alto-header: 23vh;
  }
}

@media (max-width: 600px) {
  :root {
    --bb-logo-ancho: 58.5vw;
    --bb-alto-header: 33.2vh;
  }
}