/* =========================================================================
   URRETA — Blog (listado)
   Artboard 1980 x 5374 px  →  123.75rem x 335.875rem
   ========================================================================= */

.bl-hero {
  position: absolute;
  top: 7.9498rem;                    /* 127.197 */
  left: 0;
  width: 123.75rem;
  height: 42.2349rem;                /* 675.759 */
  background-image: linear-gradient(
    46.12deg,
    rgb(149, 31, 153)  5.5125%,
    rgb(239, 96, 96)  74.6590%
  );
}
/* El titular y la bajada viven DENTRO de .bl-hero: sus top del artboard
   se compensan restando el top de la franja (7.9498rem). */
.bl-hero__titulo {
  position: absolute;
  top: 13.8002rem;                   /* 348 − 127.197 */
  left: 15.6411rem;                  /* 250.258 */
  width: 47.7373rem;                 /* 763.797 */
  height: 14.0604rem;                /* 224.967 */
  font-size: 6rem;
  font-weight: 200;
  line-height: 7.25rem;              /* 116 */
  color: var(--c-cream);
}
.bl-hero__texto {
  position: absolute;
  top: 19.8002rem;                   /* 444 − 127.197 */
  left: 70.0342rem;                  /* 1120.547 */
  width: 42.0347rem;                 /* 672.555 */
  height: 7.5rem;                    /* 120 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;
  color: var(--c-cream);
}

/* =========================== TARJETAS DE ARTICULO ====================== */

.bl-card { position: absolute; width: 55rem; }          /* 880 */
.bl-card--grande { height: 52.6875rem; }                /* 843 */
.bl-card--chica  { height: 25.496rem; }                 /* 407.936 */
.bl-card__forma { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Tarjeta grande: foto arriba, titular y botón abajo --- */
.bl-card--grande .bl-card__foto {
  position: absolute;
  top: 3.8188rem;                    /* 61.103 */
  left: 3.8125rem;                   /* 61 */
  width: 47.3749rem;                 /* 757.999 */
  height: 30.7417rem;                /* 491.867 */
  max-width: none;
}
.bl-card--grande .bl-card__titulo {
  position: absolute;
  top: 38.5254rem;                   /* 616.402 */
  left: 3.8316rem;                   /* 61.306 */
  width: 31.5701rem;                 /* 505.121 */
  height: 9.3625rem;                 /* 149.8 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2.5rem;                 /* 40 */
  font-weight: 200;
  line-height: normal;
  color: var(--c-primary);
}
/* El ancho del artboard es el MÍNIMO, no el ancho. El botón lleva
   `nowrap` y `overflow:hidden`, así que un rótulo más largo que el español
   —«Read more» lo es— se cortaría a media letra. En español la medida sale
   idéntica al diseño porque el texto no llega al mínimo. */
.bl-card--grande .bl-card__cta {
  position: absolute;
  top: 43.95rem;                     /* 703.2 */
  left: 40.1208rem;                  /* 641.933 */
  min-width: 11.0625rem;             /* 177 */
}

/* --- Tarjeta chica: foto a la izquierda, texto a la derecha --- */
.bl-card--chica .bl-card__foto {
  position: absolute;
  top: 4.2428rem;                    /* 67.881 */
  left: 3.6681rem;                   /* 58.688 */
  border-radius: 1.4058rem;          /* 22.492 */
  background: #951F99;
  overflow: hidden;
}
.bl-card--chica .bl-card__foto img { position: absolute; max-width: none; }
.bl-card__foto--a { width: 17.0406rem; height: 17.0108rem; }
.bl-card__foto--a img { left: -84.15%; top: -10.12%; width: 207.74%; height: 134.02%; }
.bl-card__foto--b { width: 17.1149rem; height: 17.085rem; }
.bl-card__foto--b img { left: -40.49%; top: -10.17%; width: 196.23%; height: 258.66%; }

.bl-card--chica .bl-card__titulo {
  position: absolute;
  top: 4.2428rem;                    /* 67.881 */
  left: 25.6752rem;                  /* 410.803 */
  width: 25.5724rem;                 /* 409.158 */
  height: 11.75rem;                  /* 188 */
  font-size: 2.25rem;                /* 36 */
  font-weight: 200;
  line-height: normal;
  color: var(--c-primary);
  white-space: pre-wrap;
}
.bl-card--chica .bl-card__cta {
  position: absolute;
  top: 17.3161rem;                   /* 277.058 */
  left: 25.6309rem;                  /* 410.093 */
  min-width: 10.8441rem;             /* 173.505 */
}

/* Degradados de los botones (los ángulos difieren entre tamaños) */
.bl-card--grande .bl-card__cta {
  background-image: linear-gradient(
    61.63deg,
    rgb(225, 73, 110)  21.560%, rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%, rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%);
}
.bl-card--chica .bl-card__cta {
  background-image: linear-gradient(
    62.11deg,
    rgb(225, 73, 110)  21.560%, rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%, rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%);
}

/* Posiciones en el artboard */
.bl-card--g1 { top: 57.7907rem;  left: 6.2661rem; }     /* 924.651 / 100.258 */
.bl-card--g2 { top: 111.6738rem; left: 62.5161rem; }    /* 1786.78 / 1000.258 */
.bl-card--c1 { top: 57.7907rem;  left: 62.5161rem; }
.bl-card--c2 { top: 84.9822rem;  left: 62.5161rem; }    /* 1359.715 */
.bl-card--c3 { top: 111.6736rem; left: 6.2661rem; }
.bl-card--c4 { top: 138.865rem;  left: 6.2661rem; }     /* 2221.844 */

.bl-vermas {
  position: absolute;
  top: 168.25rem;                    /* 2692 */
  left: 50.5313rem;                  /* 808.5 */
  width: 22.6875rem;                 /* 363 */
  background-image: linear-gradient(
    42.09deg,
    rgb(225, 73, 110)  21.560%, rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%, rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%);
}
