/* Secciones unificadas: una sola copia de cada bloque (base desktop).
   Aquí se adapta la versión móvil/tablet con CSS en lugar de tener bloques duplicados. */

/* Grupo 3 de títulos (LiveOps, Clients & Partners, Meet the faces, Get in touch): 48px en mayúsculas, sin cambios de formato. */
.odc-title-3 p,.odc-title-3 .elementor-heading-title{font-size:48px!important;line-height:1.1!important;text-transform:uppercase!important}
.odc-title-cap p,.odc-title-cap .elementor-heading-title{font-size:48px!important;line-height:1.1!important;text-transform:none!important}
@media (max-width:767px){.odc-title-xl .elementor-heading-title{font-size:48px!important;line-height:1.1!important}}

/* Our Work */
@media (max-width:1024px){
  .odc-work{align-items:center;text-align:center}
  .odc-work-deco{display:none}
  .odc-work-card{background:transparent!important;box-shadow:none!important;width:100%;padding:0!important;flex-direction:column!important;align-items:center}
  .odc-work-text{width:100%!important;max-width:640px;flex:none;margin-top:24px}
  .odc-work-title .elementor-heading-title{text-align:center}
  .odc-work-subtitle,.odc-work-body,.odc-work-subtitle .elementor-widget-container,.odc-work-body .elementor-widget-container{text-align:center}
  .odc-work-subtitle p,.odc-work-body p{color:#fff}
  .odc-work-subtitle .elementor-widget-container p{font-size:clamp(22px,5vw,32px);line-height:1.2}
  .odc-work-body .elementor-widget-container p{font-size:16px;line-height:1.6}
  .odc-work-video{width:100%;max-width:520px;margin:20px auto 0;flex:none}
}

/* Highlighted Projects: en móvil la grilla pasa a 2 columnas con todas las tarjetas */
@media (max-width:767px){
  .odc-hl > .e-con-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .odc-hl > .e-con-inner > .odc-hl-heading{grid-column:1/-1;text-align:center}
  .odc-hl .e-con-full{display:contents}
  .odc-hl .elementor-widget-image{width:100%}
  .odc-hl .elementor-widget-image img{width:100%;height:auto}
}

/* Clients & Partners: logos en 3 columnas en móvil */
@media (max-width:767px){
  .odc-clients{padding-left:16px!important;padding-right:16px!important}
  .odc-clients{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;align-items:center;justify-items:center}
  .odc-clients .e-con-full{display:contents}
  .odc-clients .elementor-widget-image{width:100%}
  .odc-clients .elementor-widget-image img{width:auto;max-width:100%;max-height:48px;height:auto;margin:0 auto}
  .odc-clients .elementor-widget-heading,.odc-clients .elementor-widget-text-editor{grid-column:1/-1;text-align:center}
  .odc-clients .elementor-widget-text-editor p{text-align:center}
}

/* Our Team: roles en 2 columnas en móvil (la base es la lista desktop de 3 filas) */
@media (max-width:767px){
  .odc-team{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 12px;justify-items:center;align-items:start}
  .odc-team > .e-con-full{display:contents}
  .odc-team > .e-con-full > .e-con-full{flex-direction:column!important;align-items:center;text-align:center;width:auto!important}
  .odc-team-counter{grid-column:1/-1}
}

/* Highlighted Projects desde JSON (assets/data/highlighted-projects.json) */
.odc-hl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 20px;width:100%;max-width:1000px;margin:40px auto 0}
.odc-hl-card{width:calc(33.333% - 14px);display:flex;flex-direction:column;align-items:center;text-align:center}
.odc-hl-img{display:block;width:100%;height:auto;border-radius:6px}
.odc-hl-title{margin:12px 0 0;font:700 16px/1.3 Exo,sans-serif;color:#000;overflow-wrap:anywhere}
.odc-hl-desc{margin:6px 0 0;font:400 14px/1.5 Exo,sans-serif;color:#333}
.odc-hl-platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.odc-hl-platform{padding:4px 10px;border:2px solid #eb008b;border-radius:4px;color:#eb008b;font:700 12px/1 Exo,sans-serif;text-decoration:none}
.odc-hl-platform:hover{background:#eb008b;color:#fff}
@media (max-width:767px){
  .odc-hl-grid{gap:18px 10px}
  .odc-hl-card{width:calc(50% - 6px)}
}

/* Popup de Highlighted Projects */
.odc-hl-card{cursor:pointer;overflow:hidden;border-radius:6px}
.odc-hl-img{transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.odc-hl-card:hover .odc-hl-img,.odc-hl-card:focus-visible .odc-hl-img{transform:scale(1.04);box-shadow:0 10px 24px rgba(235,0,139,.35);filter:brightness(1.08)}
.odc-hl-card:focus-visible{outline:3px solid #eb008b;outline-offset:4px}
.odc-hl-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.odc-hl-modal[hidden]{display:none}
.odc-hl-modal-backdrop{position:absolute;inset:0;background:#000;opacity:.92}
.odc-hl-modal-box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow-y:auto;padding:40px 36px 36px;background:#000;border:2px solid #fff;border-radius:8px;color:#fff;font-family:Exo,sans-serif;box-sizing:border-box}
.odc-hl-modal-close{position:absolute;top:10px;right:14px;background:transparent!important;box-shadow:none;border:0;color:#fff;font:400 36px/1 Exo,sans-serif;cursor:pointer;padding:4px 8px}
.odc-hl-modal-close:hover,.odc-hl-modal-close:focus-visible{color:#eb008b}
.odc-hl-modal-title{margin:0 0 16px;font:800 32px/1.15 Exo,sans-serif;color:#fff;overflow-wrap:anywhere}
.odc-hl-modal-desc{margin:0 0 24px;font:400 16px/1.6 Exo,sans-serif;color:#d9d9d9}
.odc-hl-modal-platforms{display:flex;flex-wrap:wrap;gap:10px}
.odc-hl-modal-platform{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:8px;transition:transform .15s}
.odc-hl-modal-platform:hover,.odc-hl-modal-platform:focus-visible{transform:scale(1.08);outline:2px solid #eb008b;outline-offset:3px}
.odc-hl-modal-platform-icon{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:767px){
  .odc-hl-modal-box{padding:36px 22px 24px}
  .odc-hl-modal-title{font-size:26px}
}

/* Imagen opcional dentro del popup de Highlighted Projects (campo "imagenPopup") */
.odc-hl-modal-media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin:0 0 24px}
.odc-hl-modal-media[hidden]{display:none}

/* Our Work: texto del cuerpo con el mismo tamaño que el de About Us (16px / 22px) en escritorio */
@media (min-width:1025px){
  .odc-work-body p{font-size:16px!important;line-height:22px!important}
}

/* Salto de línea extra entre párrafos (About Us y Our Work) */
.odc-about-copy p:not(:last-child){margin-block-end:22px!important}
.odc-work-subtitle p{margin-block-end:22px!important}
.odc-work-body p:not(:last-child){margin-block-end:22px!important}

/* Carrusel de abajo (escritorio, 3 visibles): solo la imagen del centro (swiper-slide-next) en color */
@media (min-width:1025px){
  html .slider .swiper-slide.swiper-slide-active .swiper-slide-image{filter:grayscale(1)!important}
  html .slider .swiper-slide.swiper-slide-next .swiper-slide-image{filter:grayscale(0)!important}
}

/* Full-Cycle Development: iconos 20% más grandes (72px -> 86px) y misma altura para iconos y textos */
.odc-fullcycle{align-items:flex-start}
.odc-fullcycle .elementor-widget-image{height:86px;display:flex;align-items:center;justify-content:center}
.odc-fullcycle .elementor-widget-image .elementor-widget-container{height:86px;display:flex;align-items:center;justify-content:center}
.odc-fullcycle .elementor-widget-image img{width:86px!important;height:86px!important;max-width:none;object-fit:contain}
.odc-fullcycle .elementor-widget-heading .elementor-heading-title{min-height:64px;display:flex;align-items:flex-start;justify-content:center;text-align:center;margin:0}

/* ===== Ajustes solo móvil (referencia Pixel 9 Pro, 412px) ===== */
@media (max-width:767px){

  /* Our Work: contenedor 50px más alto para que no se corte el video */
  .odc-work{padding-bottom:50px}

  /* Highlighted Projects: 2 columnas que ocupan el ancho del teléfono */
  .odc-hl{padding-left:0!important;padding-right:0!important;width:100%!important;max-width:100%!important}
  .odc-hl > .e-con-inner{display:block!important;width:100%!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
  .odc-hl-grid{width:100%;max-width:none;box-sizing:border-box;margin:32px 0 0;padding:0}
  .odc-hl-card{width:calc(50% - 5px)}

  /* Popup: pantalla completa en móvil, con scroll interno para ver todo el contenido */
  .odc-hl-modal{padding:0;height:100vh;height:100dvh}
  .odc-hl-modal-box{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:0 20px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .odc-hl-modal-close{position:sticky;top:10px;float:right;z-index:2;margin:10px -6px 0 0;background:rgba(0,0,0,.6)!important;border-radius:50%;width:44px;height:44px;text-align:center}
  .odc-hl-modal-media{margin-top:64px}

  /* LIVEOPS in numbers: bloque de números al 80% (alto ~20% menos) */
  .odc-liveops-numbers{zoom:.8}
  .odc-liveops-card{padding-bottom:0!important}

  /* image-25 detrás del texto de About Us, con transparencia para que se pueda leer */
  .odc-about > .e-con-inner{position:relative}
  .odc-about-imgwrap{position:absolute!important;top:0;left:0;right:0;bottom:0;width:auto!important;height:auto!important;z-index:0;pointer-events:none;overflow:hidden}
  .odc-about-img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important}
  .odc-about-img img{position:static!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:none!important;opacity:.22}
  .odc-about-text{position:relative;z-index:1}
  /* Todas las imágenes del bloque About Us: transparentes, por detrás del texto */
  .odc-about img{opacity:.22!important}

  /* Títulos grupo 3 (LiveOps...): en móvil 40px para que "LIVEOPS" no se salga de la pantalla */
  .odc-title-3 p,.odc-title-3 .elementor-heading-title{font-size:min(40px,10.6vw)!important}

  /* Contador de equipo: no sobrepasar el ancho de la pantalla */
  .odc-team-count{width:100%!important;max-width:calc(100vw - 32px)!important;margin:0 auto!important}
  .odc-team-count .elementor-counter-number-wrapper,.odc-team-count .elementor-counter-number-wrapper *{white-space:nowrap;font-size:min(32px,8vw)!important}
  .odc-team-count .elementor-counter-number-suffix{display:inline;margin-left:.25em}

  /* Clients & Partners: logos en 2 columnas */
  .odc-clients{grid-template-columns:1fr 1fr!important}
}

/* Contador de profesionales: "+40 professionals" en una sola línea (todos los anchos) */
.odc-team-count .elementor-counter-number-wrapper{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;white-space:nowrap}
.odc-team-count .elementor-counter-number-wrapper>span{display:inline-block!important;white-space:nowrap}
.odc-team-count .elementor-counter-number-suffix{margin-left:.25em}

/* Contenedor 7db2291 (LiveOps): sin padding lateral */
.odc-liveops{padding-left:0!important;padding-right:0!important}

/* Móvil: hero y bloque Full-Cycle ocupan todo el ancho de la pantalla */
@media (max-width:767px){
  .odc-page-box-2{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;box-sizing:border-box}
  .odc-fullcycle{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;padding-left:20px!important;padding-right:20px!important;box-sizing:border-box}
}