/* components.css — skeletons de componentes v2 (card/grid/hero/cta/marquee) extraídos verbatim de assets/less/main.css. Fase B drop main.css. Paridad exacta. */

/* =============================================================================
   CARD + GRID — .section-proyectos1-content-*
   ============================================================================= */

.section-proyectos1-content-items {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -11px;
  position: relative;
}

.section-proyectos1-content-item {
  padding: 0 11px;
  margin-bottom: clamp(30px, 2.709vw, 52px);
  text-decoration: none;
  display: block;
}

.section-proyectos1-content-item-card-image {
  padding-top: 77.008%;
  position: relative;
  margin-bottom: clamp(13px, 1.095vw, 21px);
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  transition: all 0.5s ease;
  isolation: isolate;
  transform: translateZ(0);
  border: 2px solid #efefef;
}

.section-proyectos1-content-item-card-image .cursor-hover-animation {
  z-index: 2;
}

.section-proyectos1-content-item-card-image img,
.section-proyectos1-content-item-card-image video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
  z-index: 2;
}

.section-proyectos1-content-item-card-image-hover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  opacity: 1;
  transition: all 0.5s ease;
}

.section-proyectos1-content-item-card:hover
  .section-proyectos1-content-item-card-image {
  border-radius: clamp(300px, 20.8333333vw, 530px);
}

.section-proyectos1-content-item-card:hover
  .section-proyectos1-content-item-card-content {
  flex: 1 1 auto;
}

.section-proyectos1-content-item-card-content {
  display: flex;
  width: -webkit-fit-content;
  width: fit-content;
  justify-content: center;
  transition: all 0.3s ease;
}

.section-proyectos1-content-item-card-content-title {
  margin-right: 5px;
}

.section-proyectos1-content-item-card-content-tags {
  color: #bababa !important;
}

.section-proyectos1-content-item-card {
  display: flex;
  flex-wrap: wrap;
}

.section-proyectos1-content-item-card-image-hover-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s ease;
}

.section-proyectos1-content-item:hover
  .section-proyectos1-content-item-card-image-hover-image {
  opacity: 1;
}

/* variant -30: 3-column grid */
.section-proyectos1-content-items-30 .section-proyectos1-content-item {
  width: 33.33333%;
}

/* blog item card overrides */
.section-proyectos1-content-item-blog
  .section-proyectos1-content-item-card-content {
  flex-wrap: wrap;
}

.section-proyectos1-content-item-blog
  .section-proyectos1-content-item-card-image {
  padding-top: 66.83%;
}

/* split-column layout */
.section-proyectos1-content-items-left {
  width: 50%;
  position: absolute;
  left: 0;
}

.section-proyectos1-content-items-right {
  width: 50%;
  position: relative;
  margin-left: auto;
}

/* =============================================================================
   CURSOR
   ============================================================================= */

.cursor-hover-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: -webkit-fit-content;
  width: fit-content;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(30px, 2.0833333vw, 50px);
  line-height: clamp(37.5px, 2.6041667vw, 62.5px);
  color: #efefef;
  white-space: nowrap;
}

/* Descendant overrides — included because they style this component */
.section-home6-content-swiper .swiper-button-next .cursor-hover-animation,
.section-home6-content-swiper .swiper-button-prev .cursor-hover-animation {
  color: #ff4343;
}

.page-provisional-content-area-click .cursor-hover-animation {
  font-size: clamp(13.5px, 0.9375vw, 22.5px);
  line-height: clamp(19.5px, 1.3541667vw, 32.5px);
}

/* second standalone occurrence (line 5863 — page-template-index override) */
.page-provisional-content-area-click .cursor-hover-animation {
  font-size: clamp(19.5px, 1.3541667vw, 32.5px);
}

/* =============================================================================
   HERO — .section-content-modal-header / .section-content-modal-section
   ============================================================================= */

.section-content-modal-header-title {
  color: #efefef;
  margin-bottom: clamp(25px, 2.084vw, 40px);
  width: 40%;
  line-height: 105%;
}

.section-content-modal-header-text {
  display: flex;
  align-items: center;
}

.section-content-modal-header-text img {
  filter: invert(0) !important;
  padding-right: clamp(12.75px, 0.8854167vw, 21.25px);
  margin-right: clamp(12.75px, 0.8854167vw, 21.25px);
  border-right: 1px solid;
  max-height: clamp(16.66666667px, 1.3021vw, 33.33333333px);
}

.section-content-modal-header-text p {
  margin: 0;
  color: #ffff;
}

.section-content-modal-header {
  padding-bottom: clamp(60px, 4.1666667vw, 100px);
  padding-top: 50vh;
}

/* standalone override for -header-text p (line 4936 — appears outside @media) */
.section-content-modal-header-text p {
  font-size: clamp(20px, 1.5625vw, 40px);
  line-height: 1;
}

/* claro-text dark-on-light color overrides */
.section-content-modal-claro-text .section-content-modal-header-title,
.section-content-modal-claro-text .section-content-modal-header-text p,
.section-content-modal-claro-text
  .section-content-modal-section2-content-right-title,
.section-content-modal-claro-text .title10 ul li,
.section-content-modal-claro-text
  .section-content-modal-section2-content-right-text
  p {
  color: #0f0f0f !important;
}

.section-content-modal-claro-text .section-content-modal-header-text img {
  filter: brightness(0) !important;
}

/* duplicate rule (lines 6629–6641, identical to above) */
.section-content-modal-claro-text .section-content-modal-header-title,
.section-content-modal-claro-text .section-content-modal-header-text p,
.section-content-modal-claro-text
  .section-content-modal-section2-content-right-title,
.section-content-modal-claro-text .title10 ul li,
.section-content-modal-claro-text
  .section-content-modal-section2-content-right-text
  p {
  color: #0f0f0f !important;
}

.section-content-modal-claro-text .section-content-modal-header-text img {
  filter: brightness(0) !important;
}

/* blog context overrides */
.content-modal-blog .section-content-modal-header-title {
  width: 43%;
}

/* .section-content-modal-section variants (named in selector list as ".section-content-modal-section") */
.section-content-modal-section2 {
  padding: clamp(90px, 7.292vw, 140px) 0 clamp(100px, 8.594vw, 165px);
}

.section-content-modal-section4 {
  padding: clamp(105px, 7.2916667vw, 175px) 0
    clamp(95.25px, 6.6145833vw, 158.75px);
}

.section-content-modal-section6 {
  padding: clamp(90px, 7.292vw, 140px) 0 clamp(85px, 6.78vw, 130px);
}

/* =============================================================================
   CTA — .box-btn-animate
   ============================================================================= */

.box-btn-animate-area {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  padding-top: 70%;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.box-btn-animate {
  position: relative;
  width: -webkit-fit-content;
  width: fit-content;
  display: block;
  text-decoration: none;
  z-index: 3;
}

/* =============================================================================
   MARQUEE
   ============================================================================= */

.marquee__part {
  flex-shrink: 0;
  padding: 0 0.3%;
  font-smooth: always;
}

.marquee {
  overflow: hidden;
  background: linear-gradient(0deg, #ff4343, #ff4343), #d9d9d9;
  position: relative;
  margin-bottom: -25px;
  padding: clamp(15px, 1.1vw, 20px) 0 clamp(45px, 2.88vw, 55px);
}

.marquee-main {
  border-radius: 20px 20px 0px 0px;
  position: sticky;
  top: -50px;
}

/* El marquee de ABAJO (home, dentro de .content-main) NO debe ser sticky — solo el de arriba.
 * En desktop ScrollSmoother (transform) anula el sticky, pero en mobile (sin smoother) el sticky
 * ACTÚA y el marquee se pega arriba (molesto). Se resetea a flujo normal solo el interno. */
.content-main .marquee-main {
  position: relative;
  top: auto;
}

.marquee__inner {
  -webkit-font-smoothing: antialiased;
  width: -webkit-fit-content;
  width: fit-content;
  display: flex;
  flex: auto;
  flex-direction: row;
}

.animation-item-scroll {
  opacity: 0;
}

/* Marquees: SIN fade in/out — visibles desde el inicio (pedido usuario 2026-07-03: el reveal
 * animado parpadeaba). FIX 2026-07-07: el marquee YA NO lleva la clase `animation-item-scroll`
 * (removida del markup en marquee.php) → no hay opacity:0 que anular. Este override queda solo como
 * red de seguridad para HTML aún cacheado por WP Rocket con la clase vieja (hasta purgar la caché).
 * WP Rocket "Remove Unused CSS" descartaba este override (dejando el opacity:0 base) → letras
 * invisibles; por eso la solución robusta es NO depender de él (quitar la clase del markup). */
.marquee .animation-item-scroll {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Blindaje directo del inner por si alguna regla externa (o RUCSS) le metiera opacity:0. */
.marquee__inner {
  opacity: 1;
}

/* Lazy imgs SIN icono de imagen rota (2026-07-08): `<img class="lazy" data-src>` no tiene `src` hasta
 * que el loader (footer-scripts) lo pone al entrar en viewport → el navegador pinta el icono de imagen
 * rota ("imagen muerta"). Ocultar hasta que tenga src; al ponerlo, el loader hace su fade opacity 0→1. */
img.lazy:not([src]) {
  opacity: 0 !important;
}

.section-marquee-content-icon1-img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translate(15%, 0);
  -ms-transform: translate(15%, 0);
  transform: translate(15%, 0);
  height: clamp(150px, 10.4166667vw, 250px);
}

/* =============================================================================
   MEDIA QUERIES
   ============================================================================= */

/* --- @media (max-width: 991px) — marquee icon (line 2091) --- */
@media (max-width: 991px) {
  .section-marquee-content-icon1-img {
    height: 64px;
  }
}

/* --- @media (max-width: 1600px) — marquee icon (line 2097) --- */
@media (max-width: 1600px) {
  .section-marquee-content-icon1-img {
    height: clamp(100px, 9vw, 255px);
  }
}

/* --- @media (min-width: 991px) (line 6686) — split-column image initial offsets --- */
@media (min-width: 991px) {
  .section-proyectos1-content-items-left
    .section-proyectos1-content-item:nth-child(1)
    .section-proyectos1-content-item-bg,
  .section-proyectos1-content-items-right
    .section-proyectos1-content-item:nth-child(1)
    .section-proyectos1-content-item-bg {
    transform: translateY(-100%) !important;
  }

  .section-proyectos1-content-items-left
    .section-proyectos1-content-item:nth-child(1)
    .section-proyectos1-content-item-card-image
    img,
  .section-proyectos1-content-items-right
    .section-proyectos1-content-item:nth-child(1)
    .section-proyectos1-content-item-card-image
    img {
    transform: translateY(0) !important;
  }
}

/* --- @media (max-width: 991px) (line 6874) — main responsive breakpoint --- */
@media (max-width: 991px) {
  /* Card + grid */
  .section-proyectos1-content-item-card-content {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .section-proyectos1-content-item-card-content-title,
  .section-proyectos1-content-item-card-content-tags {
    font-size: 18px;
    line-height: 22px;
  }

  .section-proyectos1-content-item-card-content-tags {
    display: block;
    width: 100%;
  }

  .section-proyectos1-content-item,
  .section-cultura5-box-elements .section-proyectos1-content-item {
    width: 100%;
  }

  .section-proyectos1-content-items-30 .section-proyectos1-content-item {
    width: 100%;
  }

  .section-proyectos1-content-items-left {
    width: 100%;
    position: initial;
  }

  .section-proyectos1-content-items-right {
    width: 100%;
  }

  /* Hero — header */
  .section-content-modal-header-title {
    color: #efefef;
    margin-bottom: 16px;
  }

  .section-content-modal-header {
    padding-bottom: 40px;
  }

  .section-content-modal-header-text img {
    width: 30%;
  }

  .content-modal-blog .section-content-modal-header-title {
    width: 100%;
  }

  .content-modal-blog .section-content-modal-header-text {
    width: 100%;
  }

  /* second occurrence in same block (line 9053) — overrides width */
  .section-content-modal-header-title {
    width: 100%;
  }

  /* Hero — section variants */
  .section-content-modal-section2 {
    padding: 40px 0 50px;
  }

  .section-content-modal-section4 {
    padding: 60px 0 75px;
  }

  .section-content-modal-section6 {
    padding: 45px 0 50px;
  }

  .section-content-modal-section8 {
    padding: 50px 0 100px 0;
  }

  /* section-int — hero modal inner layout */
  .section-content-modal-section-int {
    min-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
  }

  .section-content-modal-section-int .section-content-modal-header {
    margin-top: auto;
  }

  /* Hero — header-text responsive */
  .section-content-modal-header-text p {
    font-size: clamp(8px, 3.0769vw, 16px);
  }

  .section-content-modal-header-text img {
    max-width: clamp(60px, 23.0769vw, 120px);
  }
}