/* ============================================================
   CES Construcciones — ces-enhancements.css
   ============================================================ */

/* ── 1. NAV LINKS: dark text on light-background pages ──────── */
@media screen and (min-width: 1024px) {
  .page-id-solutions #nav:not(.nav--fullscreen) .nav__link,
  .page-id-process   #nav:not(.nav--fullscreen) .nav__link,
  .page-id-contact   #nav:not(.nav--fullscreen) .nav__link,
  .page-id-about     #nav:not(.nav--fullscreen) .nav__link,
  .page-id-terms     #nav:not(.nav--fullscreen) .nav__link {
    color: #111 !important;
    text-shadow: none !important;
  }
  .page-id-solutions #nav:not(.nav--fullscreen) .nav__item--selected .nav__link,
  .page-id-process   #nav:not(.nav--fullscreen) .nav__item--selected .nav__link,
  .page-id-contact   #nav:not(.nav--fullscreen) .nav__item--selected .nav__link,
  .page-id-about     #nav:not(.nav--fullscreen) .nav__item--selected .nav__link,
  .page-id-terms     #nav:not(.nav--fullscreen) .nav__item--selected .nav__link {
    color: #d62323 !important;
    text-shadow: none !important;
  }
  .page-id-solutions #nav-toggle .nav-toggle__list__line,
  .page-id-process   #nav-toggle .nav-toggle__list__line,
  .page-id-contact   #nav-toggle .nav-toggle__list__line,
  .page-id-about     #nav-toggle .nav-toggle__list__line,
  .page-id-terms     #nav-toggle .nav-toggle__list__line {
    background-color: #111 !important;
  }
  .page-id-solutions #logo path,
  .page-id-process   #logo path,
  .page-id-contact   #logo path,
  .page-id-about     #logo path,
  .page-id-terms     #logo path {
    fill: #111 !important;
  }
}

/* ── 2. SERVICES (srv-card) HOVER: subtle left-accent + lift ── */
.srv-card {
  position: relative;
  overflow: visible;
  cursor: default;
  transition:
    background-color 0.3s ease,
    box-shadow       0.3s ease;
}
/* Línea de acento izquierda — se despliega de abajo hacia arriba */
.srv-card::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: #d62323;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  pointer-events: none;
}
.srv-card:hover {
  background-color: #fafafa;
  box-shadow: 0 2px 16px rgba(0,0,0,0.055);
}
.srv-card:hover::before {
  transform: scaleY(1);
}
/* Tag: tono rojo levemente más intenso */
.srv-card:hover .srv-card__tag {
  color: #b81c1c !important;
}
/* Nombre: el título toma protagonismo */
.srv-card:hover .srv-card__name {
  color: #111 !important;
}
/* Items de lista: un poco más legibles */
.srv-card:hover .srv-card__list li {
  color: #666 !important;
}

.srv-card.ces-scroll-in { animation: ces-card-in 0.5s ease forwards; }
@keyframes ces-card-in {
  0%   { opacity: 0.4; transform: translateY(12px); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* ── 3. INVERSIONES VENTAJAS HOVER: subtle top-accent + lift ── */
.inv-ventaja {
  position: relative;
  overflow: visible;
  transition:
    background-color 0.3s ease,
    box-shadow       0.3s ease,
    transform        0.3s ease;
}
/* Línea de acento superior — se expande de izquierda a derecha */
.inv-ventaja::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #d62323;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  pointer-events: none;
}
.inv-ventaja:hover {
  background-color: #fafafa;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}
.inv-ventaja:hover::before {
  transform: scaleX(1);
}
/* Número: se oscurece muy levemente (ya es claro de base) */
.inv-ventaja:hover .inv-ventaja__num {
  color: rgba(214,35,35,0.12) !important;
}
/* Título: pasa a negro pleno */
.inv-ventaja:hover .inv-ventaja__title {
  color: #111 !important;
}
/* Cuerpo: un poco más oscuro y legible */
.inv-ventaja:hover .inv-ventaja__body {
  color: #555 !important;
}

.inv-ventaja.ces-scroll-in { animation: ces-ventaja-in 0.55s ease forwards; }
@keyframes ces-ventaja-in {
  0%   { opacity: 0.6; transform: translateY(16px); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* ── 4. FOOTER — ULTRA COMPACT (all pages, all breakpoints) ──── */
/* Kill the enormous original padding/margin from main.css        */
#footer {
  background: #101010 !important;
  padding: 0 !important;          /* was 60px/70px/120px */
}
#footer__inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 14px 5% 0 !important;
  gap: 0 !important;
}
/* Remove the absolutely-positioned horizontal line at 97px */
#footer__inner::after {
  display: none !important;
}

/* Logo */
#footer__logo {
  width: 32px !important;
  height: 35px !important;
  margin: 0 0 10px 0 !important;
  flex-basis: auto !important;
  flex-shrink: 0 !important;
}

/* Nav columns */
#footer__pages {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 0 18px !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 8px 0 !important;
  border-top: 1px solid #272727 !important;
  border-bottom: 1px solid #272727 !important;
  justify-content: flex-start !important;
}
.footer__page {
  height: auto !important;
  min-height: 0 !important;
  flex-basis: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer__page__title {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 8px 0 4px 0 !important;   /* was 135px bottom */
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  line-height: 1em !important;
  color: #c4c4c4 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.footer__page__sections {
  display: block !important;
}
.footer__page__section {
  margin-bottom: 2px !important;
}
.footer__page__section__title {
  display: inline-block !important;
  margin-bottom: 0 !important;      /* was 10px */
  font-size: 9px !important;
  line-height: 1.5em !important;
  color: #868686 !important;
}

/* Contact info */
#footer__contact {
  margin: 0 0 6px 0 !important;    /* was margin-top:70px */
  font-size: 9px !important;
  line-height: 1.5em !important;
  color: rgba(255,255,255,0.4) !important;
  font-weight: 400 !important;
}
#footer__contact strong {
  display: inline !important;
  padding-bottom: 0 !important;    /* was 20px */
  font-weight: 600 !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Social */
#footer__social {
  flex-basis: 100% !important;
  text-align: left !important;
  padding: 4px 0 2px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 0 !important;
}
#footer__social a {
  font-size: 10px !important;
  color: #c8a96e !important;
}

/* Bottom bar */
#footer__bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 5px 0 7px !important;
  margin: 2px 0 0 0 !important;    /* was margin-top:135px */
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
#footer__copyright {
  font-size: 8px !important;
  color: rgba(255,255,255,0.3) !important;
  margin: 0 !important;
}
#footer__terms {
  font-size: 8px !important;
  color: rgba(255,255,255,0.35) !important;
}
#footer__credits {
  font-size: 8px !important;
  line-height: 1.2em !important;
  color: rgba(255,255,255,0.28) !important;
  margin-left: 0 !important;
}
#footer__credits__txt  { color: rgba(255,255,255,0.28) !important; }
#footer__credits__link { color: rgba(255,255,255,0.42) !important; }

/* ── Desktop: side-by-side layout ────────────────────────────── */
@media screen and (min-width: 1024px) {
  #footer__inner {
    display: grid !important;
    grid-template-columns: 40px 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    padding: 14px 5% 0 !important;
    align-items: start !important;
  }
  #footer__logo {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0 !important;
    align-self: start;
  }
  #footer__pages {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap !important;
    gap: 0 20px !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    justify-content: flex-start !important;
  }
  .footer__page__title {
    margin-bottom: 4px !important;
  }
  #footer__contact {
    grid-column: 3;
    grid-row: 1;
    text-align: right !important;
    margin-bottom: 0 !important;
  }
  #footer__social {
    grid-column: 3;
    grid-row: 2;
    text-align: right !important;
    border-top: none !important;
    padding: 4px 0 0 !important;
    flex-basis: auto !important;
  }
  #footer__bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 5px 0 7px !important;
    margin-top: 4px !important;
  }
}

/* ── Mobile: stack cleanly ────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #footer__inner {
    padding: 12px 5% 0 !important;
  }
  #footer__pages {
    gap: 0 12px !important;
  }
  .footer__page__title {
    font-size: 7px !important;
  }
  .footer__page__section__title {
    font-size: 8px !important;
  }
  #footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  /* hover desactivado en touch */
  .srv-card::before { display: none; }
  .srv-card:hover { background-color: transparent; box-shadow: none; }
  .inv-ventaja:hover { transform: none; }
}

/* ── 5. HOME LANDING: fallback bg ──────────────────────────── */
#home-landing__bg {
  background-image: url('../img/home-landing.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ── TÍTULOS EN ROJO — TAMAÑO GRANDE Y VISIBLE ─────────────────
   Los títulos de categoría en rojo (INVERSIONES, OBRAS NUEVAS,
   PROYECTOS, etc.) agrandados para que el mensaje quede claro.
   ─────────────────────────────────────────────────────────────── */

/* Slides del home (step-1): título rojo tipo "INVERSIONES" */
.home-screen__step__content__title {
  font-size: 28px !important;
  letter-spacing: 0.12em !important;
  line-height: 1em !important;
}

@media screen and (min-width: 1024px) {
  .home-screen__step__content__title {
    font-size: 38px !important;
    letter-spacing: 0.14em !important;
  }
}

@media screen and (min-width: 1400px) {
  .home-screen__step__content__title {
    font-size: 46px !important;
  }
}

/* Subtítulo rojo en step-2 del home (panel de detalle) */
.home-screen__step-2__content__inner__subtitle {
  font-size: 18px !important;
}

@media screen and (min-width: 1024px) {
  .home-screen__step-2__content__inner__subtitle {
    font-size: 22px !important;
  }
}

/* Título rojo de la página Contacto */
#contact__title {
  font-size: 22px !important;
  letter-spacing: 0.1em !important;
}

@media screen and (min-width: 1024px) {
  #contact__title {
    font-size: 32px !important;
  }
}

/* Título rojo de la página Servicios/Solutions */
#solutions__title {
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
}

@media screen and (min-width: 1024px) {
  #solutions__title {
    font-size: 32px !important;
  }
}

/* Títulos rojos en la página Mantenimiento */
#mantenimiento-page #solutions__title {
  font-size: 20px !important;
}

@media screen and (min-width: 1024px) {
  #mantenimiento-page #solutions__title {
    font-size: 30px !important;
  }
}

/* ── FIX: Pagination y scroll-CTA visibles en desktop (screens 1–6)
   ──────────────────────────────────────────────────────────────────
   Problema: .home-screen__step-1__bg (z-index:2) vive dentro de
   .home-screen, al que el JS le asigna z-index:1/2 inline. Eso crea
   un stacking context que "traga" a #home-pagination y #home-scroll-cta
   (z-index:3) aunque numéricamente sean mayores, porque están en un
   stacking context padre diferente.
   Solución: convertir ambos elementos a position:fixed. Al estar fuera
   del flujo de stacking de #home-page, ningún hijo de .home-screen
   puede taparlos. Las coordenadas quedan iguales porque #home-page
   ocupa 100% del viewport. */
@media screen and (min-width: 1024px) {
  .page-id-home #home-pagination {
    position: fixed;
  }

  .page-id-home #home-scroll-cta {
    position: fixed;
  }
}