/* =========================================================================
   URRETA — Blog (artículo)
   Artboard 1980 x 5044 px  →  123.75rem x 315.25rem
   ========================================================================= */

.bp-hero,
.bp-hero__velo { position: absolute; left: -0.0786rem; }   /* -1.258 */
.bp-hero {
  top: 8.0135rem;                    /* 128.217 */
  width: 123.8053rem;                /* 1980.885 */
  height: 57.5839rem;                /* 921.342 */
  max-width: none;
}
.bp-hero__velo {
  top: 8.326rem;                     /* 133.217 */
  width: 123.7823rem;                /* 1980.516 */
  height: 57.2714rem;                /* 916.342 */
  background: rgba(76, 76, 76, 0.78);
}

.bp-titulo {
  position: absolute;
  top: 21.75rem;                     /* 348 */
  left: 15.6573rem;                  /* 250.516 */
  width: 83.9318rem;                 /* 1342.908 */
  height: 14.0604rem;                /* 224.967 */
  font-size: 6rem;
  font-weight: 200;
  line-height: 7.25rem;              /* 116 */
  color: var(--c-cream);
}

/* ============================ ARTICULO ================================= */

/* -------------------------------------------------------------------------
   El unico bloque del sitio cuyo alto lo decide de verdad el contenido: un
   articulo puede tener quinientas palabras o cinco mil. Por eso la tarjeta y
   todo lo que lleva dentro estan en FLUJO normal y no en coordenadas del
   artboard, dentro de un tramo fluido (ver inc/tramos.php).

   Los rellenos reproducen exactamente los huecos del diseno:

     56.8304  arranque de la tarjeta  → lo deja el tramo del encabezado
     10.5759  de la tarjeta al texto  → padding superior
     62.5     alto del texto          → minimo, crece hacia abajo
     16.0207  del texto al divisor    → margen del divisor
      3.1721  del divisor al pie      → margen del pie
      2.71    del pie al fin          → padding inferior
   ------------------------------------------------------------------------- */

.bp-card {
  position: relative;
  margin-left: 13.3326rem;           /* 213.322 */
  /* La FAQ arranca 1.677rem antes de que termine la tarjeta: el diseno las
     solapa y el fondo crema del FAQ tapa esa franja. */
  margin-bottom: -1.677rem;
  width: 97.0847rem;                 /* 1553.355 */
  min-height: 99.6525rem;            /* 1594.44 */
  padding: 10.5759rem 0 2.71rem;
  border-radius: 1.5rem;             /* 24 */
  background: var(--c-white);
}

.bp-texto {
  margin-left: 13.496rem;            /* 429.258 - 213.322 */
  width: 70.0928rem;                 /* 1121.484 */
  min-height: 62.5rem;               /* 1000 */
  font-size: 2rem;                   /* 32 */
  font-weight: 200;
  line-height: 120.43%;
  color: var(--c-primary);
}
.bp-texto p { margin: 0; }

.bp-divisor {
  display: block;
  margin: 16.0207rem 0 0 6.0988rem;  /* 310.902 - 213.322 */
  width: 84.8871rem;                 /* 1358.193 */
  height: var(--linea-2);
  background: var(--c-primary);
}

/* El pie del articulo: "Compartir", los iconos y la navegacion entre
   articulos comparten renglon, con los mismos huecos del diseno. */
.bp-pie {
  position: relative;
  /* El renglon arranca donde el diseno pone los iconos (149rem), no donde
     pone el rotulo "Compartir" (149.2241), que baja un poco para centrarse
     con ellos. */
  margin-top: 2.948rem;
  height: 4.77rem;
}
.bp-pie > * { position: absolute; }

.bp-compartir {
  top: 0.2241rem;
  left: 13.4421rem;                  /* 428.395 - 213.322 */
  width: 14.2172rem;                 /* 227.475 */
  height: 3.3125rem;                 /* 53 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2.5rem;                 /* 40 */
  font-weight: 300;
  line-height: normal;
  color: var(--c-primary);
}

.bp-social {
  top: 0;
  left: 28.2782rem;                  /* 665.773 - 213.322 */
  gap: 0.625rem;                     /* 10 */
}

/* --- Navegación entre artículos --- */
.bp-nav {
  position: absolute;
  top: 0.2241rem;
  height: 3.3125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-primary);
}
/* Los rótulos van alineados a la derecha dentro de su caja: así el texto
   libra la flecha que lo precede y deja el hueco que marca el diseño. */
.bp-nav--anterior  { left: 60.5515rem; width: 9.9653rem;  text-align: right; }  /* 1182.145 */
.bp-nav--siguiente { left: 67.3604rem; width: 11.3052rem; text-align: right; }  /* 1291.088 */

.bp-flecha {
  position: absolute;
  width: 3.73725rem;                 /* 59.796 */
  height: 3.76075rem;                /* 60.172 */
}
/* Ambas flechas comparten línea con los rótulos. Figma reporta la caja ya
   rotada, por eso la de la derecha aparece desplazada un alto hacia abajo.
   El glifo base apunta hacia abajo: +90deg lo lleva a la izquierda. */
.bp-flecha--izq { top: 0.0225rem; left: 59.289rem;  transform: rotate(90deg); }   /* 1161.945 */
.bp-flecha--der { top: 0.0225rem; left: 79.8281rem; transform: rotate(-90deg); }  /* 1490.571 */

.bp-flecha__circulo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
/* Anillo exterior con mezcla overlay, igual que en los iconos sociales */
.bp-flecha::after {
  content: '';
  position: absolute;
  inset: -0.0619rem;
  border: 0.1237rem solid var(--c-cream);
  border-radius: 50%;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.bp-flecha__glifo {
  position: absolute;
  top: 25.17%;
  left: 30.60%;
  width: 38.80%;
  height: 49.66%;
}
.bp-flecha__glifo img {
  position: absolute;
  top: -6.69%;
  left: -8.62%;
  width: 117.24%;
  height: 113.38%;
  max-width: none;
}

/* En el artículo los iconos sociales usan el círculo degradado, no el gris */
.bp-social .icon-circle { background: none; }
.bp-social .icon-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url('../assets/img/bp-social-circulo.svg');
  background-size: 100% 100%;
  transform: rotate(180deg);
}