/* ============================================================
   CES Construcciones — responsive.css v5.0 FULL OPTIMIZADO
   100% Responsive: mobile-first, zero horizontal overflow,
   optimal touch targets, fluid typography, safe areas.
   Breakpoints: xs <380px | sm <480px | md <600px | lg <768px | xl <1024px | desktop ≥1024px
   ============================================================ */

/* ── BASE: box model + text scaling ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* ── GLOBAL RESPONSIVE IMAGES & VIDEO ───────────────────────── */
@media screen and (max-width: 1023px) {
  img, video, svg, iframe {
    max-width: 100% !important;
  }
  img { height: auto !important; }
  video { max-width: 100% !important; }
  h1, h2, h3, h4, h5, h6, p, li, a, span, td, th {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
}

/* ── NAV TOGGLE — MOBILE ─────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #nav-toggle {
    right: 0 !important;
    top: 0 !important;
    width: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
  }
  #nav-toggle::before { content: none !important; }
  #nav-toggle__list {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
  }
  #nav__content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 90 !important;
  }
  #logo { z-index: 95 !important; }
}

/* ── LOGO — dark pages ───────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  .page-id-about #logo path,
  .page-id-solutions #logo path,
  .page-id-process #logo path,
  .page-id-contact #logo path,
  .page-id-terms #logo path,
  .page-id-inversiones #logo path,
  .page-id-mantenimiento #logo path { fill: #000 !important; }

  .page-id-about .nav-toggle__list__line,
  .page-id-solutions .nav-toggle__list__line,
  .page-id-process .nav-toggle__list__line,
  .page-id-contact .nav-toggle__list__line,
  .page-id-terms .nav-toggle__list__line,
  .page-id-inversiones .nav-toggle__list__line,
  .page-id-mantenimiento .nav-toggle__list__line { background-color: #000 !important; }
}

/* ── HOME LANDING TYPOGRAPHY ─────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #home-landing__content__text__heading__title {
    font-size: 18px !important;
    line-height: 1.25em !important;
  }
  #home-landing__content__text__body {
    font-size: 13px !important;
  }
  .home-screen__step-2__content__inner__title {
    font-size: 20px !important;
  }
  .home-screen__step-2__content__inner__subtitle {
    font-size: 16px !important;
  }
  .home-screen__step-2__content__inner__body {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  #home-landing__content__text__heading__title {
    font-size: 22px !important;
  }
  .home-screen__step-2__content__inner__title {
    font-size: 24px !important;
  }
}

/* Prevent canvas from blocking touch events on home */
@media screen and (max-width: 1023px) {
  .home-screen__step-1__bg__canvas { pointer-events: none !important; }
}

/* ── PROJECTS ────────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  .project__title {
    font-size: 28px !important;
    line-height: 1.15em !important;
  }
  .project__desc   { font-size: 13px !important; }
  .project__tag__value { font-size: 13px !important; }
}
@media screen and (max-width: 600px) {
  .project__title { font-size: 22px !important; }
}

/* ── FOOTER ──────────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #footer__inner {
    margin: 0 5% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #footer__pages {
    justify-content: flex-start !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .footer__page {
    flex-basis: 33.33% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .footer__page__title {
    font-size: 10px !important;
    justify-content: flex-start !important;
  }
  #footer__contact {
    margin-top: 36px !important;
    font-size: 13px !important;
    line-height: 1.7em !important;
  }
  #footer__bottom {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 36px !important;
  }
  #footer__copyright {
    margin-right: 0 !important;
    width: 100% !important;
    font-size: 12px !important;
  }
}
@media screen and (max-width: 480px) {
  .footer__page { flex-basis: 50% !important; }
}

/* ── PAGE OVERFLOW — inner pages ─────────────────────────────── */
@media screen and (max-width: 1023px) {
  body.page-id-contact,
  body.page-id-about,
  body.page-id-solutions,
  body.page-id-process,
  body.page-id-terms,
  body.page-id-inversiones,
  body.page-id-mantenimiento { overflow-y: auto !important; }

  body.page-id-contact #page-container,
  body.page-id-about #page-container,
  body.page-id-solutions #page-container,
  body.page-id-process #page-container,
  body.page-id-terms #page-container,
  body.page-id-inversiones #page-container,
  body.page-id-mantenimiento #page-container {
    position: relative !important;
    overflow-x: hidden !important;
  }
}

/* ── SOLUTIONS PAGE ──────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #solutions-page,
  body.page-id-inversiones #solutions-page,
  body.page-id-mantenimiento #solutions-page {
    overflow-x: hidden !important;
    margin-top: 72px !important;
  }
  #solutions__title-wrapper {
    padding: 90px 6% 50px !important;
  }
  #solutions__title  { font-size: 11px !important; }
  #solutions__subtitle {
    font-size: 26px !important;
    line-height: 1.1em !important;
  }
  #solutions__intro {
    margin: -20px 4% 0 !important;
    padding: 28px 6% !important;
  }
  #solutions__intro__title {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }
  #solutions__intro__body {
    font-size: 14px !important;
    line-height: 1.7em !important;
  }
  #solutions__service {
    display: block !important;
    padding: 36px 6% !important;
    background-image: none !important;
  }
  #solutions__service__title {
    width: 100% !important;
    font-size: 17px !important;
    margin-right: 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(190,190,190,.38) !important;
    margin-bottom: 14px !important;
  }
  #solutions__service__body p {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    line-height: 1.7em !important;
    margin-bottom: 12px !important;
  }
  #solutions__price {
    margin-top: 36px !important;
    background: none !important;
  }
  #solutions__price__img-1-wrapper {
    width: 70% !important;
    margin-left: 6% !important;
  }
  #solutions__price__img-2-wrapper {
    width: 40% !important;
    margin-left: auto !important;
    margin-right: 6% !important;
    margin-top: -36px !important;
  }
  #solutions__price__txt   { margin: 20px 6% 0 !important; }
  #solutions__price__title { width: 100% !important; font-size: 17px !important; }
  #solutions__price__body  { font-size: 14px !important; line-height: 1.7em !important; }
  #solutions__experts {
    padding: 36px 4% !important;
    margin-top: 36px !important;
  }
  #solutions__experts__title   { font-size: 20px !important; margin-bottom: 8px !important; }
  #solutions__experts__subtitle {
    width: 100% !important;
    font-size: 14px !important;
  }
  #solutions__experts__list {
    margin-top: 32px !important;
    padding-bottom: 32px !important;
    gap: 16px 0 !important;
  }
  .solutions__experts__item {
    width: 50% !important;
    margin-bottom: 16px !important;
  }
  .solutions__experts__item::after { display: none !important; }
  #solutions__industries {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  #solutions__industries__title {
    width: 70% !important;
    font-size: 12px !important;
    margin-left: 6% !important;
  }
  .solutions__industries__item       { width: 64% !important; }
  .solutions__industries__item__label { padding-left: 8% !important; }
  .solutions__industries__item__label__txt { font-size: 22px !important; }
  .solutions__industries__item__img  {
    width: 42% !important;
    right: 5% !important;
  }
  #solutions__clients { margin: 36px 0 40px !important; }

  /* Material selector */
  #solutions__material {
    margin-top: 0 !important;
  }
  #solutions__material__title {
    width: 88% !important;
    font-size: 18px !important;
    margin: 0 auto 28px !important;
  }
  #solutions__material__select {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin-bottom: 12px !important;
  }
  #solutions__material__download {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
  }
  #solutions__material__select__input { font-size: 14px !important; }
}

@media screen and (max-width: 480px) {
  #solutions__subtitle { font-size: 20px !important; }
  .solutions__experts__item { width: 50% !important; }
  .solutions__industries__item__label__txt { font-size: 18px !important; }
}

/* ── SERVICE / PROJECT CARDS (CES custom components) ─────────── */
@media screen and (max-width: 1023px) {
  .ces-service-grid {
    grid-template-columns: 1fr !important;
    margin: 0 6% !important;
    padding: 20px 0 32px !important;
  }
  .ces-service-card {
    border-right: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 18px 0 !important;
  }
  .ces-service-card:last-child { border-bottom: none !important; }
  .ces-project-card  { margin-bottom: 14px !important; }
  .ces-project-card > div { flex-direction: column !important; gap: 8px !important; }
  .ces-project-card__meta { flex-direction: column !important; gap: 4px !important; }
  #contact__about { padding: 36px 6% !important; }
  .ces-about__inner  { flex-direction: column !important; gap: 24px !important; }
  .ces-about__right  { padding-top: 0 !important; }
  .ces-about__heading { font-size: 20px !important; }
  .ces-about__body    { font-size: 13px !important; }
}

/* ── CONTACT PAGE ────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #contact-page {
    margin-top: 72px !important;
    padding-bottom: 60px !important;
  }
  #contact__header__img-wrapper::before { padding-top: 55% !important; }
  #contact__header__txt {
    padding: 24px 6% 36px !important;
    margin: -20px 4% 0 !important;
  }
  #contact__title    { font-size: 12px !important; }
  #contact__subtitle {
    font-size: 22px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }
  #contact__intro   { font-size: 14px !important; line-height: 1.65em !important; }
  #contact__form    { padding: 36px 6% 50px !important; margin: 0 !important; }
  #contact__form fieldset { margin-bottom: 20px !important; }
  #contact__form input[type=text],
  #contact__form input[type=email],
  #contact__form input[type=tel],
  #contact__form input[type=number],
  #contact__form input[type=date] {
    width: 100% !important;
    height: 50px !important;
    margin-bottom: 10px !important;
  }
  #contact__form textarea {
    width: 100% !important;
    min-height: 120px !important;
  }
  #contact__form__submit {
    width: 100% !important;
    height: 52px !important;
    line-height: 52px !important;
  }
  #contact__form__file {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
  #contact__form__jobs__select-wrapper,
  #contact__form__salary__select-wrapper { width: 100% !important; }
  .contact__form__title { font-size: 14px !important; }

  #contact__infos {
    margin-top: 40px !important;
    min-height: 0 !important;
  }
  #contact__infos__panel {
    width: 92% !important;
    margin-left: 4% !important;
    padding-bottom: 16px !important;
  }
  #contact__infos__map {
    height: 280px !important;
    min-height: 280px !important;
    margin-top: 24px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  #contact__infos__map iframe { height: 280px !important; min-height: 280px !important; }
  #contact__about    { padding: 36px 6% !important; }
  #contact__about > div { flex-direction: column !important; gap: 24px !important; }
  #contact__about > div > div:last-child { padding-top: 0 !important; }
  #contact__jobs    { margin-top: 40px !important; }
  #contact__jobs__cover  { margin: 0 !important; }
  #contact__jobs__content { margin: 0 !important; padding: 36px 6% !important; }
  #contact__jobs__title  { font-size: 22px !important; }
  .contact__jobs__item__title { padding-bottom: 14px !important; }
}

@media screen and (max-width: 480px) {
  #contact__subtitle  { font-size: 19px !important; }
  .contact__form__subject__item { height: 54px !important; }
}

/* ── MAP fix: full height always ────────────────────────────── */
#ces-map {
  width: 100%;
  height: 405px;
}
@media screen and (min-width: 1024px) {
  #ces-map {
    height: 660px;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
}
#contact__infos__map,
#contact__infos__map iframe {
  display: block;
  width: 100%;
  border: 0;
}
@media screen and (max-width: 1023px) {
  #contact__infos__map { height: 280px !important; }
  #contact__infos__map iframe { height: 280px !important; }
}
@media screen and (min-width: 1024px) {
  #contact__infos__map iframe { height: 100%; }
}

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #about-page {
    margin-top: 72px !important;
    padding-bottom: 60px !important;
  }
  #about__header  { margin: 0 !important; margin-bottom: 24px !important; }
  #about__content { margin: 10px 6% 50px !important; display: block !important; }
  #about__title {
    font-size: 22px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  #about__body {
    width: 100% !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
  }
  #about__body__img-container {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  #about__body__img__overlay,
  #about__body__img__square { display: none !important; }
  .about__testimonial {
    margin: 0 6% 40px !important;
    width: auto !important;
  }
  .about__testimonial__body {
    margin: 24px 0 0 !important;
    flex-direction: column !important;
  }
  .about__testimonial__index {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .about__testimonial__body__infos {
    width: 100% !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
  }
  .about__testimonial__quote {
    font-size: 17px !important;
    line-height: 1.4em !important;
  }
}
@media screen and (max-width: 480px) {
  #about__title { font-size: 19px !important; }
  .about__testimonial__quote { font-size: 15px !important; }
}

/* ── PROCESS PAGE ────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #process-page {
    margin-top: 72px !important;
    overflow-x: hidden !important;
  }
  #process__header {
    margin: 0 6% !important;
    padding: 36px 0 44px !important;
  }
  #process__title {
    font-size: 32px !important;
    margin-bottom: 18px !important;
  }
  #process__intro {
    font-size: 14px !important;
    line-height: 1.7em !important;
  }
  .process__step__inner {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .process__step__txt {
    width: 48% !important;
    order: 1 !important;
    margin-left: 6% !important;
    margin-right: 4% !important;
  }
  .process__step:nth-child(even) .process__step__txt {
    order: 2 !important;
    margin-left: 4% !important;
    margin-right: 6% !important;
  }
  .process__step__img  { width: 34% !important; order: 2 !important; margin-top: 0 !important; }
  .process__step:nth-child(even) .process__step__img {
    order: 1 !important;
    margin-left: 6% !important;
    margin-right: 0 !important;
  }
  .process__step__title { font-size: 20px !important; }
  .process__step__body  { font-size: 13px !important; line-height: 1.7em !important; }
}
@media screen and (max-width: 600px) {
  #process__title { font-size: 26px !important; }
  .process__step__inner { flex-direction: column !important; }
  .process__step__txt,
  .process__step:nth-child(even) .process__step__txt,
  .process__step__img,
  .process__step:nth-child(even) .process__step__img {
    width: 88% !important;
    margin-left: 6% !important;
    margin-right: 6% !important;
    order: unset !important;
  }
  .process__step__img { margin-top: 16px !important; }
}

/* ── TERMS PAGE ──────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  #terms-page {
    margin-top: 72px !important;
    padding-bottom: 50px !important;
  }
  #terms__header { margin: 0 !important; }
  #terms__header__inner {
    padding: 24px 6% 0 !important;
    margin: -36px 4% 0 !important;
  }
  #terms__title { font-size: 28px !important; margin-bottom: 16px !important; }
  #terms__intro { font-size: 14px !important; line-height: 1.7em !important; }
  .terms__section {
    margin: 20px 6% !important;
    padding-bottom: 20px !important;
  }
  .terms__section__title { font-size: 14px !important; }
  .terms__section__body  { font-size: 13px !important; line-height: 1.7em !important; }
}

/* ── LOADING SCREENS — small phones ─────────────────────────── */
@media screen and (max-width: 600px) {
  #main-loading__logo {
    width: 100px !important;
    height: 52px !important;
    margin-left: -50px !important;
    margin-top: -26px !important;
  }
  #main-loading__progress { bottom: 24px !important; }
  #main-loading__progress__value { font-size: 20px !important; }
  #ajax-loading__anim {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    max-width: 90vw !important;
  }
}

/* ── iOS / Android SAFE AREA INSETS ─────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  #nav-toggle { right: env(safe-area-inset-right, 0px) !important; }
  #logo { left: calc(6.28% + env(safe-area-inset-left, 0px)) !important; }
  #contact-page,
  #about-page,
  #solutions-page,
  #process-page,
  #terms-page,
  #inversiones-page,
  #mantenimiento-page {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── DESKTOP minimum sizes (undo mobile overrides) ───────────── */
@media screen and (min-width: 1024px) {
  #solutions__material { margin-top: 90px !important; }
  #solutions__material__title { margin-bottom: 40px !important; }
  #solutions__material__select { display: inline-block !important; width: auto !important; min-width: 23.61% !important; }
  #solutions__material__download { display: inline-block !important; width: auto !important; }
  #solutions__experts__list { margin-top: 70px !important; padding-bottom: 110px !important; }
  #solutions__experts { margin-top: 70px !important; }
  #solutions__industries { padding-top: 80px !important; padding-bottom: 110px !important; }
  #solutions__clients { margin-bottom: 100px !important; }
  #solutions__price  { margin-top: 90px !important; }
  #process-page  { padding-bottom: 140px !important; }
  #about-page    { padding-bottom: 70px !important; }
  #contact-page  { padding-bottom: 100px !important; }
  #contact__jobs { margin-top: 80px !important; }
  .mant-block    { padding-top: 70px !important; padding-bottom: 70px !important; }
  .mant-dark     { padding-top: 65px !important; padding-bottom: 65px !important; }
}

/* ── MANTENIMIENTO PAGE ──────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  .mant-block   { padding: 40px 6% !important; }
  .mant-dark    { padding: 36px 6% !important; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .mant-block   { padding: 48px 8% !important; }
}

/* ── MNT ACCORDION ───────────────────────────────────────────── */
.mnt-acc__body { overflow: hidden; }

/* ── INVERSIONES PAGE (solutions-like) ───────────────────────── */
@media screen and (max-width: 1023px) {
  #inversiones-page {
    overflow-x: hidden !important;
    margin-top: 72px !important;
  }
}

/* ── SOLUTIONS MATERIAL — extra small viewports ─────────────── */
@media screen and (max-width: 380px) {
  #solutions__material__title {
    font-size: 16px !important;
    width: 92% !important;
  }
  #solutions__material__select__input { font-size: 13px !important; }
}

/* ── MANTENIMIENTO NAV CONTRAST FIX ─────────────────────────── */
.page-id-mantenimiento #nav:not(.nav--fullscreen) .nav__link {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* ── WHATSAPP FLOAT — touch target ──────────────────────────── */
@media screen and (max-width: 767px) {
  .whatsapp-float {
    bottom: 16px !important;
    right: 14px !important;
    width: 54px !important;
    height: 54px !important;
  }
}

/* ── TOUCH TARGETS — minimum 44px ───────────────────────────── */
@media screen and (max-width: 1023px) {
  a, button, label, [role="button"] {
    min-height: 44px;
  }
  /* Override for decorative/inline elements */
  .nav-toggle__list__line,
  .nav-toggle__cross__line,
  .footer__page__section__title { min-height: 0; }
}

/* ── EXTRA SMALL SCREENS (<320px) ───────────────────────────── */
@media screen and (max-width: 320px) {
  #home-landing__content__text__heading__title { font-size: 16px !important; }
  .home-screen__step-2__content__inner__title  { font-size: 17px !important; }
  .home-screen__step-2__content__inner__subtitle { font-size: 14px !important; }
  #contact__subtitle { font-size: 17px !important; }
  #process__title    { font-size: 22px !important; }
  #terms__title      { font-size: 22px !important; }
  #about__title      { font-size: 17px !important; }
  .project__title    { font-size: 18px !important; }
  .solutions__industries__item__label__txt { font-size: 15px !important; }
  #footer__logo      { width: 90px !important; height: 28px !important; }
  .footer__page      { flex-basis: 50% !important; }
  #contact__form__submit { font-size: 12px !important; }
}

/* ── LANDSCAPE MOBILE (phones in landscape) ──────────────────── */
@media screen and (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
  #nav__main-list { font-size: 7vh !important; line-height: 1.3em !important; }
  #nav__main-list .nav__item:last-child { margin-bottom: 0.5em !important; }
  #process__header { padding: 24px 0 28px !important; }
  .process__step__inner { margin-bottom: 48px !important; }
}

/* ── PROJECT DETAIL PAGES ────────────────────────────────────── */
@media screen and (max-width: 1023px) {
  .project__title    { font-size: 26px !important; padding-bottom: 20px !important; }
  .project__desc     { font-size: 13px !important; }
  .project__tag__value { font-size: 13px !important; }
  .project__tag__name  { font-size: 8px !important; }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  #nav-toggle, .whatsapp-float, #main-loading-page, #ajax-loading-page { display: none !important; }
  body { overflow: visible !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}