/* ============================================================
   CES — Mobile Deep Optimization v2.0
   Carga rápida + layout idéntico al desktop en páginas con
   formato especial (inicio y proyectos)
   ============================================================ */

/* ── 1. PERFORMANCE: lazy loading hints ──────────────────────── */
@media screen and (max-width: 1023px) {
  /* Ocultar elementos decorativos que no aportan en mobile */
  .home-screen__step-1__lines__line,
  .home-screen__step-2__lines__line,
  .home-landing__line,
  #about__anim-in-shape-1,
  #about__anim-in-shape-2,
  #about__content__square,
  #about__body__img__overlay,
  #about__body__img__square { display: none !important; }

  /* Scroll suave en toda la app */
  html { scroll-behavior: smooth; }
}

/* ── 2. HOME: slide step-1 mejorado en mobile ────────────────── */
@media screen and (max-width: 1023px) {
  /* El video de fondo cubre bien en cualquier ratio */
  .home-screen__step-1__bg__video {
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
  }

  /* Canvas reemplaza el video en mobile - asegurar que ocupe todo */
  .home-screen__step-1__bg__canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
  }

  /* Contenido del slide: posición y tipografía mejoradas */
  .home-screen__step-1__content {
    bottom: 15% !important;
    left: 6% !important;
    width: 88% !important;
    z-index: 10 !important;
  }

  .home-screen__step__content__title {
    font-size: 11px !important;
    letter-spacing: .18em !important;
    padding-bottom: 10px !important;
  }

  .home-screen__step__content__subtitle {
    font-size: 28px !important;
    line-height: 1.1em !important;
  }

  /* Overlay oscuro para mejor legibilidad del texto */
  .home-screen__step-1__bg::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Asegurar que el contenido esté sobre el overlay */
  .home-screen__step-1__content { z-index: 5 !important; }
}

@media screen and (max-width: 600px) {
  .home-screen__step__content__subtitle { font-size: 22px !important; }
}

@media screen and (max-width: 380px) {
  .home-screen__step__content__subtitle { font-size: 18px !important; }
}

/* ── 3. HOME step-2: layout mejorado para no perder el diseño ── */
@media screen and (max-width: 1023px) {
  /* La imagen de fondo del step-2 que en desktop es grande y visible */
  /* En mobile, mostrarla como imagen de cabecera de la sección */

  .home-screen__step-2 {
    background-color: #f5f5f5 !important;
  }

  /* El step-2__bg (bloque blanco) - reposicionar para que quede bien */
  .home-screen__step-2__bg {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
  }

  /* El contenido del step-2 */
  .home-screen__step-2__content {
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    padding: 0 6% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .home-screen__step-2__content__inner {
    width: 100% !important;
    margin-left: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 80px !important;
  }

  .home-screen__step-2__content__inner__title {
    font-size: 22px !important;
    padding-bottom: 12px !important;
  }

  .home-screen__step-2__content__inner__subtitle {
    font-size: 18px !important;
    padding-bottom: 16px !important;
  }

  .home-screen__step-2__content__inner__body {
    font-size: 14px !important;
    line-height: 1.65em !important;
    padding-bottom: 24px !important;
  }

  /* Corner rojo - reposicionar */
  .home-screen__step-2__corner {
    width: 60px !important;
    max-width: 60px !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .home-screen__step-2__corner::before {
    padding-top: 100% !important;
  }
}

/* ── 4. PROYECTOS PAGE: layout mobile completo ───────────────── */
@media screen and (max-width: 1023px) {
  /* Contenedor principal: scroll normal en lugar de overflow:hidden */
  #projects-page {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    background: #fff !important;
  }

  /* La línea vertical decorativa: ocultar en mobile */
  #projects-line { display: none !important; }

  /* NAV lateral → barra horizontal en top */
  #projects__nav {
    position: relative !important;
    top: 0 !important; bottom: auto !important; left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 20 !important;
    display: block !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    padding-top: 56px !important; /* espacio para el nav toggle */
  }

  /* La lista de proyectos: scroll horizontal tipo tabs */
  #projects__nav__list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 4% 0 !important;
    margin: 0 !important;
    width: 100% !important;
    gap: 0 !important;
    scrollbar-width: none !important;
  }
  #projects__nav__list::-webkit-scrollbar { display: none !important; }

  /* Category headers: separadores en línea */
  .projects__nav__category-header {
    display: none !important;
  }

  /* Items de navegación: tabs compactos */
  .projects__nav__item {
    position: relative !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: 52px !important;
    align-items: center !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: 0 !important;
  }
  .projects__nav__item--selected {
    border-bottom-color: #d62323 !important;
  }

  .projects__nav__link {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }

  /* Índice numérico: pequeño y visible */
  .projects__nav__index {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: #bbb !important;
    display: flex !important;
    align-items: center !important;
  }
  .projects__nav__item--selected .projects__nav__index {
    color: #d62323 !important;
  }
  .projects__nav__index__line { display: none !important; }

  /* Infos del proyecto: solo el título */
  .projects__nav__infos {
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: none !important;
    height: auto !important;
  }
  .projects__nav__infos__title {
    font-size: 13px !important;
    padding-bottom: 0 !important;
    color: #666 !important;
    white-space: nowrap !important;
  }
  .projects__nav__item--selected .projects__nav__infos__title {
    color: #222 !important;
  }
  /* Ocultar tags y badge en la tab */
  .projects__nav__infos__tags,
  .projects__nav__infos__badge { display: none !important; }

  /* Botones expand/shrink: ocultar en mobile (no hacen sentido) */
  #projects__nav__expand,
  #projects__nav__shrink { display: none !important; }

  /* Overlay cuando el nav está expandido: no aplica en mobile */
  #projects__nav__color-overlay,
  #projects__nav__overlay { display: none !important; }

  /* PROYECTO ACTIVO: layout vertical completo ─── */
  .project {
    position: relative !important;
    visibility: visible !important;
    height: auto !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    display: none !important; /* JS lo muestra */
  }
  /* El JS pone visibility:inherit, lo usamos para mostrar */
  .project[style*="visibility: inherit"],
  .project[style*="visibility:inherit"] {
    display: block !important;
  }

  /* Media del proyecto: ancho completo, altura 56vw máx */
  .project__media {
    position: relative !important;
    width: 100% !important;
    height: 56vw !important;
    max-height: 320px !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
  }

  /* Body del proyecto: debajo de la media */
  .project__body {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    padding: 20px 6% 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Título del proyecto */
  .project__title {
    position: static !important;
    padding: 0 0 12px 0 !important;
    font-size: 28px !important;
    line-height: 1.05em !important;
    color: #d62323 !important;
  }

  /* Descripción */
  .project__desc {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.65em !important;
    margin-bottom: 16px !important;
  }
  .project__desc__more { display: none !important; }

  /* Tags del proyecto (franja roja) */
  .project__tags {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    padding: 14px 6% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
  .project__tags__bg {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  }
  .project__tags__inner {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .project__tag {
    height: auto !important;
    padding: 4px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.2) !important;
  }
  .project__tag:last-child { border: none !important; }
  .project__tag__name { font-size: 8px !important; padding-bottom: 2px !important; }
  .project__tag__value { font-size: 13px !important; }

  /* Media: imagen se ve completa */
  .project__media__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Badge de estado */
  .project__status-badge {
    position: absolute !important;
    top: 10px !important;
    right: 6% !important;
    z-index: 5 !important;
  }

  /* Scroll CTA: ocultar */
  #projects__scroll-cta { display: none !important; }
}

/* ── 5. LOGO en proyectos: hacerlo oscuro en mobile ──────────── */
@media screen and (max-width: 1023px) {
  .page-id-projects #logo path { fill: #000 !important; }
  .page-id-projects .nav-toggle__list__line { background-color: #000 !important; }
  .page-id-projects #top-bar { background: rgba(255,255,255,.95) !important; }
}

/* ── 6. HOME landing: mejor distribución del contenido ──────── */
@media screen and (max-width: 1023px) {
  #home-landing__content {
    bottom: 104px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  #home-landing__content__text {
    padding: 24px 6% !important;
    width: 100% !important;
  }
  #home-landing__content__text__bg {
    transform-origin: right top !important;
  }
}

/* ── 7. PERFORMANCE: reduce repaints ─────────────────────────── */
@media screen and (max-width: 1023px) {
  .home-screen__step-2__img__overlay,
  .home-screen__step-2__bg,
  .home-screen__step-2__corner,
  .project__media__overlay,
  .project__media__nav__bg {
    will-change: auto !important;
  }

  /* Deshabilitar transiciones costosas en mobile */
  .home-screen__step-2__img {
    transition: none !important;
  }
}

/* ── 8. TOUCH: targets mínimos 44px ─────────────────────────── */
@media screen and (max-width: 1023px) {
  .project__media__nav__btn {
    width: 48px !important;
    min-height: 44px !important;
  }
  .projects__nav__link {
    min-height: 44px !important;
  }
}