/* =========================================================================
   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;
  /* La caja del artboard tiene justo la proporcion del archivo, asi que a
     1980px esto no recorta nada; sirve para cuando la banda cambia de
     proporcion (a sangre por encima de 1600, o en columna). */
  object-fit: cover;
}
.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 van en el rosa de marca, no en el gris
   del pie: sobre el crema de la página el gris se perdía y el botón de
   compartir apenas se veía. Es el mismo degradado de los botones principales
   (--grad-cta), así que el estado normal y el de hover comparten color y sólo
   cambian el relieve.

   Antes se pintaba con `bp-social-circulo.svg` de fondo, pero la ruta salía
   mal en el tema (`../assets/img/…` cuelga de assets/css/, no de la raíz) y
   el círculo no llegaba a dibujarse nunca. Con el degradado del sistema no
   hace falta el archivo. */
.bp-social .icon-circle {
  background-color: transparent;
  background-image: var(--grad-cta);
}