@import url("https://use.typekit.net/zfd2srr.css");
/* esto es un comentario */
/*Fonts Added:

Miller Banner Extra Compressed Bold
font-family: "miller-banner-ex-compressed", sans-serif;
font-weight: 700;
font-style: normal;
Miller Banner Extra Condensed Regular
font-family: "miller-banner-ex-condensed", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "figtree", sans-serif;
font-weight: 600;
font-style: normal;

Noto Sans Regular
font-family: "noto-sans", sans-serif;
font-weight: 400;
font-style: normal;
Noto Sans Medium
font-family: "noto-sans", sans-serif;
font-weight: 500;
font-style: normal;
Noto Sans Bold
font-family: "noto-sans", sans-serif;
font-weight: 700;
font-style: normal;

Noto Sans Display SemiBold
font-family: "noto-sans-display", sans-serif;
font-weight: 600;
font-style: normal;
*/

/* Reset básico ampliado */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;}
html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
body {margin: 0; padding: 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* reset wordpress */
body .vc_column_container>.vc_column-inner{margin: 0; padding-left: 0; padding-right: 0;}
body .vc_row{margin: 0; padding: 0;}
body [class*='col-'] {padding-right: 0;margin: 0;}
body .v-h {margin-bottom: 0;}
body .wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {margin-bottom: 0;}

/* 2025 */

/* =========================================
   INTRO LOADER + CINTILLO
   ========================================= */
:root {
    --as-cintillo-h: 60px;
    --as-cintillo-bg: #ffffff;
}
@media screen and (min-width: 600px) {
    :root { --as-cintillo-h: 80px; }
}

/* Cintillo: arranca como overlay full-viewport (loader) y se contrae a la
   altura final cuando termina la carga. Es el MISMO elemento, sin saltos.
   El bloqueo de scroll lo gestiona el JS (overflow:hidden en ). */
.as-cintillo {position: relative; top: 0; left: 0; right: 0;height: calc(100vh - 50px);background: var(--as-cintillo-bg);z-index: 1000;overflow: hidden;box-sizing: border-box;}
/* Imagen de fondo: tamaño fijo del viewport, así se mantiene encuadre continuo
   tanto cuando el contenedor mide 100vh como cuando se contrae a 80px. */
.as-cintillo__bg {position: absolute; top: 0; left: 0;width: 100vw; height: 100vh;object-fit: cover;object-position: center;pointer-events: none;z-index: 0;}
/* Capa azul translúcida (solo durante la carga). JS la fade-outea. */
.as-cintillo__overlay {position: absolute; inset: 0;background: none;z-index: 1;pointer-events: none;}
/* Porcentaje de carga - bottom-right */
.as-cintillo__percent {position: absolute;right: 16px;bottom: 16px;color: #70775A;font-family: "scotch-display-compressed", serif;font-weight: 400;font-size: clamp(64px, 8vw, 140px);line-height: 1;letter-spacing: -0.01em;z-index: 3;display: flex;align-items: baseline;gap: 2px;}
.as-cintillo__sym { font-size: 0.7em; }

/* Logos: posicionados absolute. JS los anima desde la posición de loader
   (as bottom-left grande) hacia su posición final en el cintillo. */
.as-cintillo__logo-as {position: absolute;left: 16px;bottom:16px;height: 14px;width: auto;z-index: 3;display: block;}
.as-cintillo__cliente {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);display: flex;flex-direction: row;align-items: center;gap: 6px;z-index: 3;opacity: 0;}
.as-cintillo__cliente p {font-family: "noto-sans", sans-serif;font-weight: 400;font-size: 6px;line-height: 1;color: #70775A;text-transform: uppercase;letter-spacing: 0.5px;margin: 0;white-space: nowrap;}
.as-cintillo__logo-cliente {height: 14px;width: auto;display: block;}

@media screen and (min-width: 601px) {
    .as-cintillo {height: calc(100vh - 60px);}
    .as-cintillo__percent { right: 28px; bottom: 24px; }
    .as-cintillo__logo-as { left: 28px; bottom: 24px; height: 28px; }
    .as-cintillo__cliente { right: 28px; gap: 10px; }
    .as-cintillo__cliente p { font-size: 10px; letter-spacing: 1px; }
    .as-cintillo__logo-cliente { height: 28px; }
}

body #cintillo{position: sticky; top: 50px;z-index: 100;}
@media screen and (min-width: 700px) {
   body #cintillo{top: 60px}
}

/* =========================================
   /INTRO LOADER + CINTILLO
   ========================================= */

.spacer-test {height: 200vh; background-color: #bfbdbd;}

/*proyecto */
.terrenomental {width: 100vw;}
.bg-azul {background-color: #0B0F2E; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.bg-blanco {background-color: #fff; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
/* spacers */
.spacer-xs {height: 18px;}
.spacer-s {height: 32px;}
.spacer-m {height: 64px;}
.spacer-l {height: 140px;}
.spacer-xl {height: 200px;}
.spacer-xxl {height: 280px;}

@media screen and (min-width: 1024px) {
    .spacer-xs {height: 24px;}
    .spacer-s {height: 48px;}
    .spacer-m {height: 100px;}
    .spacer-l {height: 240px;}
    .spacer-xl {height: 320px;}
    .spacer-xxl {height: 400px;}
}

/* TEXTOS GENERALES */
/* normalmente habra un hero-title , un titulo, uno o dos subtitulos, parrafo entradilla, un parrafo para el articulo, pies de foto y un blockquote. (Si hay algun parrafo especial irá dentro de la seccion correspondiente.) */
/* siempre van dentro del padre texto-container que le mete el flex-column y el justify-center y align-center y el padding de mobile. los textos iran con un max-width cada uno y un width del 100% */

/* Textos nuevos */
.texto-container {width: 100%; box-sizing: border-box; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
body .noticia .as-title {font-family:  "scotch-display-compressed", serif;font-weight: 700;font-style: normal;color: #4D533A;text-transform: none;font-size: clamp(39px, 5vw, 81px);line-height: 1;width: 100%;max-width: 847px;margin-bottom: 24px;}
body .noticia .as-antetitle {font-family: "noto-sans", sans-serif;font-weight: 400;font-style: normal;color: #70775A;text-transform: uppercase;letter-spacing: 2px;font-size: clamp(12px, 1.2vw, 14px);margin-bottom: 16px; width: 100%; max-width: 847px;}
body .noticia .as-entradilla {font-family: "noto-sans", sans-serif; font-weight: 400;font-style: normal;color: #202020;font-size: clamp(18px, 1.8vw, 25px);line-height: 1.34;letter-spacing: normal;width: 100%;max-width: 847px;margin: 0 auto;text-align: left; margin-bottom: 42px;}
body .noticia .as-proyecto-con {font-size: clamp(12px, 2vw, 16px); font-weight: 400; color: #70775A; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-family: "Forum", serif; margin-bottom: 12px;}
body .noticia .as-piefoto {font-family: "noto-sans", sans-serif;font-weight: 400;color: #797979;font-size: clamp(12px, 1vw, 14px);text-align: right;margin-top: 8px;margin-bottom: 0;width: 100%;}
body .noticia .parrafocount {font-family: "noto-sans", sans-serif; font-weight: 400; font-style: normal; color: #000; font-size: clamp(18px, 2vw, 21px); line-height: 1.4; width: 100%; max-width: 620px; box-sizing: border-box; padding: 0 12px; margin: 0 auto 24px;}
body .noticia .parrafocount.first-letter::first-letter {    font-family: "scotch-display-compressed", serif;font-weight: 400;font-style: normal;font-size: clamp(64px, 25vw, 240px);line-height: 0;float: left;padding-right: 8px;padding-top: 4px;color: #000;padding-bottom: clamp(32px, 10vw, 100px);}
body .noticia .parrafocount.reference{color:#797979; font-style:italic;}

/* fin textos nuevos */

/*imagen individual*/
body .imgarticle {max-width: 920px;margin: auto;border-radius: 30px;margin: 48px auto; padding: 0 12px;}
body .imgarticle img {width: 100%;height: auto;border-radius: 30px;display: block;object-fit: cover;}
body .noticia .imgarticle figcaption { width: 100%; margin-top: 10px;}
body .noticia .imgarticle figcaption .parrafocount {font-family: "noto-sans", sans-serif; font-weight: 400; color: #797979; width: 100%; max-width: none; padding: 0 24px; text-align: inherit; text-align: end; font-size: clamp(12px, 1vw, 14px);}
@media screen and (min-width: 1024px) {
    body .imgarticle {margin: 84px auto;}
}
/* step-text */
.step-text {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}

/* =========================================
   as-header-1
   ========================================= */
   .as-header-1 {width: 100%;padding: 0 12px;margin-bottom: 54px;margin-top: 84px; display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;}
   .as-header-1__figure {width: 100%;max-width: 1121px;margin: 0 auto 16px;display: flex;flex-direction: column;}
   .as-header-1__figure img {width: 100%;height: auto;border-radius: 20px;display: block;object-fit: cover;}
   .as-header-1__meta {width: 100%;max-width: 1050px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;gap: 30px;margin: 24px 0 32px;flex-wrap: wrap;}
   .as-header-1__firma {display: flex;flex-direction: row;align-items: center;gap: 24px;}
   .as-header-1__autor {width: 54px;height: 54px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
   .as-header-1__datos {display: flex;flex-direction: column;justify-content: center;gap: 12px;}
   .as-header-1__nombre {font-family: "noto-sans", sans-serif;font-weight: 700;font-size: 14px;color: #000;line-height: 1.2;}
   .as-header-1__fecha {font-family: "noto-sans-display", sans-serif;font-weight: 400;font-size: 12px;color: #797979;line-height: 1.2;}
   .as-header-1__compartir {display: flex;flex-direction: row;align-items: center;gap: 12px;}
   .as-header-1__compartir p {font-family: "noto-sans", sans-serif;font-weight: 400;font-size: 13px;color: #000;margin: 0;}
   .as-header-1__compartir a {display: inline-flex;align-items: center;justify-content: center;transition: opacity 0.2s ease;}
   .as-header-1__compartir a:hover {opacity: 0.7;}
   .as-header-1__compartir img {width: 14px;height: 14px;display: block;}
   .divider {width: 1px;height: stretch;background: #E7EBF1;}
   
   @media screen and (min-width: 601px) {
       .as-header-1 {margin-bottom: 120px;}
       .as-header-1__figure img {border-radius: 30px;}
       .as-header-1__meta {flex-direction: row;align-items: center;}
   }
   
   @media screen and (min-width: 1024px) {
       .as-header-1 {margin-bottom: 190px;}
       .as-header-1__autor {width: 88px;height: 88px;}
       .as-header-1__nombre {font-size: 15px;}
   }

/* =========================================
   gc-header-1
   ========================================= */
.gc-header-1 {width: 100%;padding: 0 12px;margin-bottom: 54px;display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;}
.gc-header-1__figure {width: 100%;max-width: 1121px;margin: 0 auto 16px;display: flex;flex-direction: column;}
.gc-header-1__figure img {width: 100%;height: auto;border-radius: 20px;display: block;object-fit: cover;}
.gc-header-1__meta {width: 100%;max-width: 1121px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;gap: 30px;margin: 24px 0 32px;flex-wrap: wrap;}
.gc-header-1__firma {display: flex;flex-direction: row;align-items: center;gap: 24px;}
.gc-header-1__autor {width: 54px;height: 54px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.gc-header-1__datos {display: flex;flex-direction: column;justify-content: center;gap: 12px;}
.gc-header-1__nombre {font-family: "noto-sans", sans-serif;font-weight: 700;font-size: 14px;color: #000;line-height: 1.2;}
.gc-header-1__fecha {font-family: "noto-sans-display", sans-serif;font-weight: 400;font-size: 12px;color: #797979;line-height: 1.2;}
.gc-header-1__compartir {display: flex;flex-direction: row;align-items: center;gap: 12px;}
.gc-header-1__compartir p {font-family: "noto-sans", sans-serif;font-weight: 400;font-size: 13px;color: #000;margin: 0;}
.gc-header-1__compartir a {display: inline-flex;align-items: center;justify-content: center;transition: opacity 0.2s ease;}
.gc-header-1__compartir a:hover {opacity: 0.7;}
.gc-header-1__compartir img {width: 20px;height: 20px;display: block;}

@media screen and (min-width: 601px) {
    .gc-header-1__figure img {border-radius: 30px;}
    .gc-header-1__meta {flex-direction: row;align-items: center;}
}

@media screen and (min-width: 1024px) {
    .gc-header-1 {margin-bottom: 190px;}
    .gc-header-1__autor {width: 88px;height: 88px;}
    .gc-header-1__nombre {font-size: 15px;}
    .gc-header-1__compartir img {width: 22px;height: 22px;}
}

/* gc-header-1 variante con video (iframe Brightcove) */
/* Sin overflow:hidden para que el iframe pueda escapar con position:fixed.
   El border-radius lo aplicamos directamente al iframe (lo respeta). */
.gc-header-1__figure--video {max-width: 1121px;}
.gc-header-1__video {width: 100%;aspect-ratio: 16 / 9;border-radius: 20px;display: block;background: #000;position: relative;}
.gc-header-1__video iframe {width: 100%;height: 100%;border: 0;display: block;border-radius: inherit;}
@media screen and (min-width: 601px) {
    .gc-header-1__video {border-radius: 30px;}
}

/* =========================================
   video-cont (widget flotante donde aterriza el iframe del header)
   + video-overlay (modal legacy)
   ========================================= */
.video-cont {position: fixed;display: flex;left: 15px;bottom: 15px;width: 60px;height: 60px;justify-content: center;align-items: center;z-index: 4;background-color: #E7EBF1;border-radius: 20px;padding: 8px;gap: 15px;box-sizing: content-box;cursor: pointer;}
.video-cont .imgvideo {max-width: 120px;display: none;border-radius: 20px;aspect-ratio: 16 / 9;}
.video-cont .right {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;padding-right: 0;}
.video-cont .right img {width: 56px;height: 56px;align-self: center;cursor: pointer;box-sizing: content-box;}
.video-cont .right p {font: 400 15px/19px "noto-sans", sans-serif;color: #070505;display: none;text-transform: uppercase;}

@media screen and (min-width: 415px) {
    .video-cont {flex-direction: row;width: 370px;height: 150px;justify-content: space-between;align-items: center;}
    .video-cont .imgvideo {max-width: 245px;border-radius: 16px;display: inline;height: 100%;object-fit: cover;aspect-ratio: 16 / 9;}
    .video-cont .right {flex-direction: column;justify-content: space-around;padding-right: 15px;}
    .video-cont .right img {display: inline;align-self: flex-end;}
    .video-cont .right p {display: inline;}
}

/* Backdrop: solo el fondo oscuro con blur. Por debajo del iframe. */
.video-overlay-backdrop {position: fixed;inset: 0;display: none;z-index: 99998;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(6px);pointer-events: auto;}

/* Container del modal: transparente, solo aloja el close-btn. Por encima del iframe. */
.video-overlay {position: fixed;inset: 0;display: none;z-index: 1000000;justify-content: center;align-items: center;pointer-events: none;}
.video-overlay .wrapper-ces {width: 98%;height: 60%;position: relative;pointer-events: none;}
.video-overlay .wrapper-ces .close-btn-ces {position: absolute;cursor: pointer;top: 10px;left: 0;right: 0;background-color: rgb(42, 41, 40);max-width: 80px;margin: 0 auto;border-radius: 20px;color: #fff;padding: 5px 10px;border: 0;text-align: center;width: auto;pointer-events: auto;}

@media screen and (min-width: 720px) {
    .video-overlay .wrapper-ces {height: 95%;}
}

/* =========================================
   quote-highlight
   ========================================= */
.quote-highlight {width: 100%;padding: 12px;display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;margin: 48px auto 32px;}
.quote-highlight .highlight {font-family:  "scotch-display-compressed", serif;font-weight: 700;font-style: normal;color: #D2D2D2;font-size: clamp(28px, 4.5vw, 54px);line-height: 1.15;text-align: left;width: 100%;max-width: 960px;margin: 0 auto;text-align: center;}
.quote-highlight .quote-name {font-family:  "scotch-display-compressed", serif;font-weight: 700;font-style: normal;color: #000;font-size: clamp(16px, 2vw, 26px);line-height: 1.2;text-align: left;width: 100%;max-width: 960px;margin: 24px auto 0;}



/* ── FOOTER Section ───────────────────────────────────── */
.tf-footer {
  position: relative;
  width: 100%;
  min-height: 80vh;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  margin-top: 120px;
  display: flex;
  align-items: center;
}

/* ── Background photo + gradient overlay ──────── */
.tf-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tf-footer__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.tf-footer__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 164, 152, 0.71) 0%, rgba(1, 117, 152, 0.71) 100%);
  mix-blend-mode: multiply;
}

/* ── Inner layout ──────────────────────────────── */
.tf-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14%;
  padding: 80px 6% 80px 11%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ── Left column ───────────────────────────────── */
/*ajustes para el footer sin rels */
.no-rel{display: none;}
/*ajustes para el footer sin rels */
.tf-footer__left {
  flex: 0 0 42%;
}

.tf-footer__related-label {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tf-footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 28px;
  transform-origin: left center;
}

.tf-footer__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Card ──────────────────────────────────────── */
.tf-footer__card {
  display: flex;
  align-items: stretch;
  background: rgba(85, 81, 69, 0.28);
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  border-radius: 30px;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.3s ease;
}

.tf-footer__card:hover {
  background: rgba(85, 81, 69, 0.45);
}

.tf-footer__card-thumb {
  flex: 0 0 147px;
  width: 147px;
  min-height: 157px;
  overflow: hidden;
}

.tf-footer__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tf-footer__card-body {
  flex: 1;
  padding: 18px 12px 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.tf-footer__card-label {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.tf-footer__card-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: white;
  line-height: 1.42;
}

.tf-footer__card-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 18px 20px 22px 8px;
  opacity: 0.7;
}

/* ── Right column ──────────────────────────────── */
.tf-footer__right {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1;
  padding-top: 4px;
}

.tf-footer__logo {
  width: 220px;
  margin-bottom: 28px;
}

.tf-footer__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.tf-footer__text {
  font-family: 'Noto Sans', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #202020;
  line-height: 1.67;
  margin-bottom: 40px;
  text-align: center;
  max-width: 650px;
}

/* ── CTA button ────────────────────────────────── */
.tf-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(85, 81, 69, 0.28);
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  border: 1px solid rgba(177, 177, 177, 0.6);
  border-radius: 50px;
  padding: 14px 18px 14px 28px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.tf-footer__cta:hover {
  background: rgba(85, 81, 69, 0.5);
  border-color: rgba(255, 255, 255, 0.8);
}

.tf-footer__cta span {
  font-family: 'Noto Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tf-footer__cta-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 900px) {
  .tf-footer {
    margin-top: 54px;
  }
  .tf-footer__inner {
    flex-direction: column;
    gap: 48px;
    padding: 60px 6%;
  }

  .tf-footer__left {
    flex: none;
    width: 100%;
  }

  .tf-footer__card-title {
    font-size: 16px;
  }

  .tf-footer__text {
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .tf-footer__card-thumb {
    flex: 0 0 110px;
    width: 110px;
    min-height: 130px;
  }

  .tf-footer__cta span {
    font-size: 17px;
  }
}


/* ── END FOOTER ────────────────────────────────── */

/* HERO CESAR */ 


/* ---- Reset ---- */
.hero-abc-page *,
.hero-abc-page *::before,
.hero-abc-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.hero-abc-page {
  font-family: 'Noto Sans', sans-serif;
  background: #ffffff;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =============================================
   HERO — Full viewport section
   ============================================= */
.hero-abc__hero {
  flex: 1;
  width: 100%;
  overflow: hidden;
  display: flex;
  border-radius: 0 0 28px 28px;
}

.hero-abc__card {
  display: flex;
  width: 100%;
  height: 100%;
  /* sin overflow hidden para que el panel derecho pueda asomarse bajo la curva */
  overflow: visible;
}

/* =============================================
   LEFT — Image panel
   ============================================= */
.hero-abc__image-panel {
  position: relative;
  flex: 0 0 46%;
  overflow: hidden;
  /* redondeado solo en la esquina inferior-derecha: curva hacia el panel derecho */
  border-radius: 0 0 36px 0;
  z-index: 2;
}

.hero-abc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
}

.hero-abc__caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 400;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  text-align: right;
}

/* =============================================
   RIGHT — Content panel
   ============================================= */
.hero-abc__content-panel {
  flex: 1;
  position: relative;
  background: linear-gradient(
    170deg,
    rgba(20, 195, 220, 0.6) 0%,
    rgba(8, 110, 110, 0.85) 30%,
    rgba(4, 72, 68, 0.97) 60%,
    #022b26 100%
  ),
  url('./assets/mask-img.png') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* se mete 36px bajo el borde redondeado del panel izquierdo */
  margin-left: -36px;
  padding: 52px 44px 44px calc(44px + 36px);
  z-index: 1;
  /* redondeado solo en la esquina inferior-derecha: esquina exterior del hero */
  border-radius: 0 0 28px 0;
}

/* Sponsor — top right */
.hero-abc__sponsor {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.hero-abc__sponsor-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-abc__sponsor-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.88;
}

/* Content inner */
.hero-abc__content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 480px;
}

.hero-abc__category {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-abc__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.08;
  color: #ffffff;
  text-align: center;
}

/* GSAP split text lines need overflow hidden */
.hero-abc__title .line {
  overflow: hidden;
}

/* Share bar */
.hero-abc__share {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-abc__share-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.hero-abc__share-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.35);
  display: block;
  flex-shrink: 0;
}

.hero-abc__share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.hero-abc__share-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Subtitle */
.hero-abc__subtitle {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-weight: 400;
}

/* Author */
.hero-abc__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.hero-abc__author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
}

.hero-abc__author-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* =============================================
   RESPONSIVE — mobile stack
   ============================================= */
@media (max-width: 900px) {
  .hero-abc-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .hero-abc__hero {
    flex: unset;
    height: calc(100svh - 61px);
  }

  .hero-abc__card {
    flex-direction: column;
    border-radius: 0;
  }

  .hero-abc__image-panel {
    flex: 0 0 45%;
    border-radius: 0;
  }

  .hero-abc__content-panel {
    padding: 36px 24px;
  }

  .hero-abc__title {
    font-size: clamp(24px, 5vw, 36px);
  }
}

@media (max-width: 500px) {
  .hero-abc__nav {
    padding: 0 14px;
  }

  .hero-abc__logo-text {
    font-size: 28px;
  }

  .hero-abc__btn--outline {
    min-width: auto;
  }

  .hero-abc__content-panel {
    padding: 28px 18px;
  }

  .hero-abc__title {
    font-size: 24px;
  }
}

/* END HERO CESAR */

/* SLIDER CESAR */

   /* ═════════════════════════════════════════════════════
		STEP 7 — JORNADA 29
		═════════════════════════════════════════════════════ */
      .step-7 {
        position: relative;
        /* padding: clamp(40px, 6vw, 100px) var(--side-pad) clamp(30px, 5vw, 80px); */
        background: #fff;
        overflow: hidden;
        padding: 100px 0 100px 0;
      }

      .jornada-bg-texture {
        position: absolute;
        display: none;
        inset: 0;
        background-image: url("https://abc.es/contentfactory/post/wp-content/uploads/2026/03/colorbrushes-scaled.webp");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* mix-blend-mode: overlay; */
        opacity: 1;
        pointer-events: none;
      }

      html .noticia .jornada-content {
        position: relative;
        z-index: 2;
        max-width: 1570px;
        margin: 0 auto;
      }

      html .noticia .jornada-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 20px;
      }

      html .noticia .jornada-title {
        font-family: "LALIGA Headline", "Bebas Neue", sans-serif;
        font-size: clamp(80px, 14vw, 210px);
        text-transform: uppercase;
        color: var(--black);
        line-height: 0.9;
        margin-bottom: 0px !important;
      }

      .jornada-badge {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
      }

      .jornada-vs {
        font-family: "Bebas Neue", sans-serif;
        font-size: 24px;
        color: var(--black);
        background: var(--white);
        padding: 4px 12px;
        border-radius: 4px;
        letter-spacing: 2px;
      }

      .jornada-laliga {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .jornada-laliga img {
        flex-shrink: 0;
      }

      .laliga-logo {
        height: 30px;
        max-width: 80px;
        width: auto;
        object-fit: contain;
      }

      .laliga-text {
        height: 20px;
        max-width: 100px;
        width: auto;
        object-fit: contain;
      }

      .jornada-description {
        font-size: clamp(16px, 1.8vw, 21px);
        line-height: 1.4;
        color: var(--black);
        max-width: min(450px, 100%);
        margin-bottom: clamp(20px, 3vw, 40px);
      }

      /* Swiper jornada carousel */
      .jornada-gallery-wrap {
        position: relative;
        margin-bottom: 20px;
      }

      .jornada-gallery.swiper {
        width: 100%;
        overflow: visible;
      }

      html .jornada-gallery.swiper,
      html .jornada-gallery.swiper-material {
        height: clamp(250px, 40vw, 500px);
      }

      .jornada-gallery .swiper-wrapper,
      .jornada-gallery .swiper-slide,
      .jornada-gallery .swiper-material-wrapper,
      .jornada-gallery .swiper-material-content {
        height: 100%;
      }

      .jornada-gallery .swiper-material-content {
        position: relative;
        overflow: hidden;
        border-radius: 30px;
      }

      .jornada-slide-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: var(--swiper-material-slide-border-radius);
      }

      .jornada-event {
        margin-top: -40px;
        margin-left: auto;
        margin-bottom: 40px;
        width: 20%;
        max-width: 290px;
      }

      .jornada-event-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      /* Navigation arrows */
      .jornada-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          transform 0.2s ease,
          opacity 0.2s ease;
      }

      .jornada-arrow--prev {
        left: -60px;
      }

      .jornada-arrow--next {
        right: -45px;
      }

      .jornada-arrow svg {
        width: 44px;
        height: 44px;
        display: block;
      }

      .jornada-arrow:hover {
        transform: translateY(-50%) scale(1.12);
      }

      .jornada-arrow:active {
        transform: translateY(-50%) scale(0.92);
      }

      .jornada-arrow.swiper-button-disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
      }

      @media (max-width: 768px) {
        .jornada-arrow {
          display: none;
        }
        .step-5 {
          min-height: 100vh;
        }
        html .noticia .credits-section {
          flex: unset;
        }
        .step-10__inner {
          display: flex;
          justify-content: center;
        }
      }

      /* Custom progress-dot pagination */
      .jornada-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 50px;
      }

      .jornada-dot {
        height: 10px;
        border-radius: 20px;
        background: #d9d9d9;
        cursor: pointer;
        transition:
          width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
          background 0.35s;
      }

      .jornada-dot-active {
        background: #4D533A;
      }

      /* ═════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════ */

      /* ── Large Desktop (> 1200px) ──────────────────────── */
      /* muro layout handled by absolute positioning */

      /* ── Tablet landscape / small desktop (≤ 1024px) ──── */
      @media (max-width: 1024px) {
        .bands-image {
          width: 65%;
        }
      }

      /* ── Tablet portrait (≤ 768px) ─────────────────────── */
      @media (max-width: 768px) {
        .html .noticia .credits-section {
          margin-top: 40px;
        }
        .jornada-event {
          margin-top: 0px;
        }
        .bands-center-img {
          width: 100%;
        }
        .step-1__author {
          flex-direction: column;
          align-items: center;
          padding-top: 150px;
        }
        html .noticia .statement-title {
          font-size: clamp(28px, 17vw, 133px);
        }

        .author-separator {
          display: none;
        }

        .author-share {
          margin-left: 0;
          width: 100%;
          justify-content: center;
        }

        /* side images handled by step-3 absolute positioning */

        /* Step-3: make taller on mobile so images aren't tiny */
        .step-3 {
          aspect-ratio: auto;
          min-height: 120vh;
        }

        /* Muro player: reposition for mobile */
        .muro-player {
          left: 4%;
          bottom: 4%;
          width: 92%;
          gap: 12px;
        }

        .player-title {
          font-size: clamp(20px, 5vw, 32px);
        }

        .player-desc {
          font-size: 14px;
          line-height: 1.3;
        }

        /* Hero badge */
        .hero-badge-img {
          max-width: 140px;
        }

        .jornada-gallery.swiper,
        .jornada-gallery.swiper-material {
          height: clamp(200px, 50vw, 400px);
        }

        .jornada-gallery .swiper-material-content {
          border-radius: 20px;
        }

        .jornada-event {
          width: 35%;
        }

        .bands-image {
          width: 75%;
        }

        .step-8__images {
          flex-direction: column;
        }

        .step-10__inner {
          flex-direction: column;
          gap: 40px;
          padding: clamp(30px, 5vw, 60px) var(--side-pad);
          justify-content: flex-start;
        }

        .related-section {
          width: 100%;
        }

        /* Ball float reduced on tablet */
        .bands-mask-small {
          animation-name: ballFloatMobile;
          width: 30%;
          left: 15%;
        }

        @keyframes ballFloatMobile {
          0% {
            transform: translateX(0) translateY(0);
          }
          100% {
            transform: translateX(25px) translateY(0);
          }
        }

        .step-9 .center img {
          max-width: 230px;
        }
      }

      /* ── Mobile large (≤ 600px) ────────────────────────── */
      @media (max-width: 600px) {
        .jornada-header {
          flex-direction: column;
          align-items: flex-start;
        }

        .jornada-badge {
          align-items: flex-start;
          flex-direction: row;
          gap: 16px;
        }

        .jornada-card-large {
          flex: 0 0 80%;
        }
        .jornada-card-medium {
          flex: 0 0 75%;
        }
        .jornada-card-small {
          flex: 0 0 70%;
        }

        .related-card-info {
          padding: 10px 12px;
        }

        .related-card-title {
          font-size: 14px;
        }
      }

      /* ── Mobile small (≤ 480px) ────────────────────────── */
      @media (max-width: 480px) {
        .hero-content {
          padding-bottom: 20px;
          top: clamp(60px, 7vw, 60px);
        }
        .hero-badge {
          top: clamp(140px, 22vw, 500px);
        }

        .hero-badge-img {
          max-width: 100px;
        }

        .jornada-card-large,
        .jornada-card-medium,
        .jornada-card-small {
          flex: 0 0 85%;
        }

        .jornada-event {
          width: 50%;
        }

        .related-card {
          flex-direction: column;
        }

        .related-card-img {
          width: 100%;
          height: 120px;
        }

        .hero-carousel .img-carousel__list {
          width: 160vw;
          height: 60vw;
        }

        .hero-carousel .img-carousel__panel {
          width: 55vw;
        }

        .player-desc {
          font-size: 13px;
        }

        /* Step-3: muro images bigger on small phones */
        .step-3 .side-img-left {
          width: 30%;
          height: 22%;
        }
        .step-3 .side-img-right {
          width: 30%;
          height: 22%;
          left: 65%;
        }
        .step-3 .side-img-right-blur {
          width: 22%;
          height: 18%;
        }
        .step-3 .muro-img-1 {
          width: 22%;
          height: 16%;
        }
        .step-3 .muro-img-2 {
          width: 35%;
          height: 28%;
        }
        .step-3 .muro-img-3 {
          width: 30%;
          height: 20%;
          left: 68%;
        }

        .muro-slash {
          letter-spacing: -4px;
        }

        /* Reduce bands ball float more */
        .bands-mask-small {
          animation-name: ballFloatSmall;
        }

        @keyframes ballFloatSmall {
          0% {
            transform: translateX(0) translateY(0);
          }
          100% {
            transform: translateX(15px) translateY(0);
          }
        }
      }

      /* ── Very small phones (≤ 360px) ───────────────────── */
      @media (max-width: 360px) {
        .hero-badge-img {
          width: 80px;
        }

        .jornada-card-large,
        .jornada-card-medium,
        .jornada-card-small {
          flex: 0 0 90%;
        }

        .statement-title {
          font-size: 24px;
        }
      }
      html *[class^="swiper-slide"] img {
        opacity: unset;
        -webkit-transition: unset;
        -moz-transition: unset;
        transition: unset;
      }
      .swiper-slide img {
        min-height: 100%;
      }

/* END SLIDER CESAR */