/* ============================================================
   Grupo Orcotec · capa responsiva para móvil / tablet chica
   Se activa sólo en <= 900px (html.orc-mobile lo pone mobile.js)
   ============================================================ */

@media (max-width: 900px) {

  html.orc-mobile { overflow-x: hidden; }
  html.orc-mobile body { max-width: 100%; }
  html.orc-mobile body { padding: 0 !important; }
  html.orc-mobile img, html.orc-mobile svg, html.orc-mobile canvas, html.orc-mobile video { max-width: 100%; }

  /* ---- Marco tipo "passepartout": no existe en móvil ---- */
  html.orc-mobile div[aria-hidden="true"][style*="box-shadow: 0 0 0 9999px"],
  html.orc-mobile div[aria-hidden="true"][style*="z-index: 55"] { display: none !important; }

  /* ---- Quick action buttons (esquinas): no existen en móvil ---- */
  html.orc-mobile [data-screen-label="Esquina redes"],
  html.orc-mobile [data-screen-label="Esquina menu"],
  html.orc-mobile button[aria-label="Menú"],
  html.orc-mobile div[style*="border-radius: 0 28px 0 0"][style*="position: fixed"] { display: none !important; }

  /* ---- Contenedor redondeado del sitio ---- */
  html.orc-mobile div[style*="border-radius: 26px"],
  html.orc-mobile div[style*="border-radius: 24px"][style*="overflow"] { border-radius: 0 !important; }
  html.orc-mobile body > div, html.orc-mobile x-dc > div { margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- Header original: se reemplaza por la barra móvil ---- */
  html.orc-mobile header[data-screen-label="Header"] { display: none !important; }

  /* ---- Barra móvil ---- */
  .orc-mnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
    background: rgba(253, 252, 248, 0.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(35, 31, 32, 0.08);
  }
  .orc-mnav__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .orc-mnav__brand img { height: 30px; width: auto; display: block; }
  .orc-mnav__brand span {
    font-family: 'Founders Grotesk', sans-serif; font-weight: 500; font-size: 17px;
    color: #01321F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .orc-mnav__burger {
    flex: 0 0 auto; width: 48px; height: 48px; min-width: 48px; min-height: 48px;
    display: grid; place-items: center; border: none; cursor: pointer;
    border-radius: 99px; background: #01321F; color: #F1EEE7;
  }
  .orc-mnav__burger svg { display: block; }
  html.orc-mobile body { padding-top: 0 !important; }
  html.orc-mobile .orc-mnav-spacer { height: 68px; }

  /* ---- Drawer ---- */
  .orc-drawer {
    position: fixed; inset: 0; z-index: 130; background: #01321F; color: #F1EEE7;
    display: flex; flex-direction: column; padding: 18px 22px 32px;
    transform: translateY(-100%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
  }
  .orc-drawer[data-open="1"] { transform: none; }
  .orc-drawer__top { display: flex; align-items: center; justify-content: space-between; }
  .orc-drawer__close {
    width: 48px; height: 48px; border-radius: 99px; border: 1px solid rgba(241,238,231,.35);
    background: none; color: #F1EEE7; font-size: 20px; cursor: pointer;
  }
  .orc-drawer nav { margin-top: 34px; display: flex; flex-direction: column; }
  .orc-drawer nav a {
    font-family: 'Founders Grotesk', sans-serif; font-weight: 300; font-size: 34px;
    color: #F1EEE7; padding: 14px 0; border-bottom: 1px solid rgba(241,238,231,.16);
  }
  .orc-drawer__cta {
    margin-top: 28px; display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; border-radius: 99px; background: #E6E16B; color: #01321F; border: none;
    font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: .12em; font-weight: 500; cursor: pointer;
  }
  .orc-drawer__lang { margin-top: 22px; display: flex; gap: 8px; }
  .orc-drawer__lang button {
    min-width: 56px; min-height: 44px; border-radius: 99px; cursor: pointer;
    border: 1px solid rgba(241,238,231,.35); background: none; color: #F1EEE7;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  }
  .orc-drawer__lang button[aria-pressed="true"] { background: #F1EEE7; color: #01321F; }
  .orc-drawer__meta { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(241,238,231,.75); }
  .orc-drawer__meta a { color: rgba(241,238,231,.85); }

  /* ---- Tipografía: escalas de móvil ---- */
  html.orc-mobile h1 { font-size: clamp(34px, 10vw, 46px) !important; line-height: 1.02 !important; }
  html.orc-mobile h2 { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08 !important; }
  html.orc-mobile h3 { font-size: clamp(19px, 5.2vw, 24px) !important; }
  html.orc-mobile p, html.orc-mobile li { font-size: 15px !important; line-height: 1.55 !important; }
  html.orc-mobile h1, html.orc-mobile h2, html.orc-mobile h3, html.orc-mobile p { max-width: 100% !important; }

  /* ---- Tap targets ---- */
  html.orc-mobile button, html.orc-mobile a[role="button"] { min-height: 44px; }

  /* ---- Marquee de logos y carruseles: más compactos ---- */
  html.orc-mobile .orc-logo { width: 128px; height: 52px; margin: 0 14px; }

  /* ---- Elementos que en desktop van fijos a la esquina ---- */
  html.orc-mobile #backbtn { left: 12px !important; top: 12px !important; padding: 11px 16px !important; font-size: 11px !important; }
  html.orc-mobile #hint { right: 16px !important; bottom: 16px !important; }

  /* ---- Servicios: riel horizontal nativo (swipe) ---- */
  html.orc-mobile #riel-wrap { height: auto !important; }
  html.orc-mobile #riel-wrap > div { position: static !important; height: auto !important; min-height: 0 !important; padding: 24px 0 32px !important; }
  html.orc-mobile #riel-wrap > div > div:first-child { display: block !important; }
  html.orc-mobile #riel-track {
    transform: none !important; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 0 !important; gap: 18px !important; scroll-padding-left: 20px;
  }
  html.orc-mobile #riel-track > div:first-child { margin-left: 20px; }
  html.orc-mobile #riel-track > div:last-child { margin-right: 20px; }
  html.orc-mobile #riel-track > div > div { grid-template-columns: 1fr !important; gap: 6px !important; }
  html.orc-mobile #riel-track p { font-size: 19px !important; line-height: 1.3 !important; }
  html.orc-mobile #riel-wrap div[style*="aspect-ratio"] { display: none !important; }
  html.orc-mobile #riel-track > div { flex: 0 0 78vw !important; align-items: flex-start !important; scroll-snap-align: start; min-height: 0 !important; }
  html.orc-mobile #icon-seq-canvas, html.orc-mobile #serv-dots { display: none !important; }
  html.orc-mobile #icon-seq-canvas + div, html.orc-mobile #riel-wrap [style*="radial-gradient"] { display: none !important; }

  /* ---- Servicios: pasos Producimos/Construimos/Operamos sin pin ---- */
  html.orc-mobile #serv-hero-pin-wrap { height: auto !important; }
  html.orc-mobile #serv-hero-pin { position: static !important; height: auto !important; min-height: 0 !important; }
  html.orc-mobile .serv-step { color: #01321F !important; }
  html.orc-mobile .serv-arrow { opacity: 1 !important; }

  /* ---- Secciones con alturas de viewport enormes ---- */
  html.orc-mobile section[style*="height: 100vh"] { height: auto !important; min-height: 60vh !important; }

  /* ---- Sin efectos pesados en móvil ---- */
  html.orc-mobile [style*="backdrop-filter"] { -webkit-backdrop-filter: none; }
  html.orc-mobile .orc-mnav, html.orc-mobile .orc-drawer { -webkit-backdrop-filter: blur(14px); }
}

/* Accesibilidad: quien pida menos movimiento no recibe animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Modelo 360 (home): tarjetas en móvil ---------- */
@media (max-width: 900px) {
  /* objeto 3D: visible, con aire a los lados */
  html.orc-mobile [data-iso-track] { display: block !important; height: 190vh !important; }
  html.orc-mobile [data-iso-track] > div {
    height: 62vh !important; top: 84px !important; margin: 0 18px !important;
    border-radius: 22px !important; overflow: hidden !important;
  }

  html.orc-mobile section[data-screen-label^="Servicio "],
  html.orc-mobile section[data-screen-label^="Division "] {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
    padding: 0 18px 16px !important; background: #01321F !important;
  }
  html.orc-mobile section[data-screen-label^="Servicio "]::before,
  html.orc-mobile section[data-screen-label^="Servicio "]::after,
  html.orc-mobile section[data-screen-label^="Division "]::before,
  html.orc-mobile section[data-screen-label^="Division "]::after { display: none !important; }

  html.orc-mobile [data-m="img"] {
    position: relative !important; inset: auto !important; height: 38vh !important; min-height: 230px;
    border-radius: 20px 20px 0 0 !important; overflow: hidden !important;
  }
  html.orc-mobile [data-m="hide"] { display: none !important; }

  html.orc-mobile [data-m="num"],
  html.orc-mobile [data-m="txt"],
  html.orc-mobile [data-m="bul"] {
    position: static !important; inset: auto !important; width: auto !important;
    max-width: none !important; text-align: left !important; background: #0B3A26 !important;
  }
  html.orc-mobile [data-m="num"] {
    flex-direction: row !important; align-items: center !important; gap: 10px !important;
    padding: 16px 18px 0 !important;
  }
  html.orc-mobile [data-m="num"] span { padding-left: 0 !important; }
  html.orc-mobile [data-m="txt"] { padding: 10px 18px 0 !important; align-items: flex-start !important; }
  html.orc-mobile [data-m="txt"] img { height: 30px !important; width: auto !important; margin-bottom: 14px !important; }
  html.orc-mobile [data-m="txt"] h3 { font-size: 27px !important; max-width: 18ch !important; }
  html.orc-mobile [data-m="txt"] a { margin-top: 18px !important; }
  html.orc-mobile [data-m="txt"] a span:last-child { height: 48px !important; padding: 0 22px 0 30px !important; }
  html.orc-mobile [data-m="txt"] a span:first-child:not(:last-child) { width: 48px !important; height: 48px !important; }
  html.orc-mobile [data-m="bul"] {
    padding: 16px 0 18px !important; border-radius: 0 0 20px 20px !important;
    align-items: stretch !important; gap: 14px !important;
  }
  html.orc-mobile [data-m="bul"] > a { margin: 0 18px !important; align-self: flex-start !important; }

  /* bullets como marquee */
  html.orc-mobile .orc-bul {
    overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  html.orc-bul-static .orc-bul__track { animation: none !important; }
  html.orc-mobile .orc-bul__track {
    display: flex !important; flex-direction: row !important; width: max-content;
    animation: orcBulMarquee 30s linear infinite;
  }
  html.orc-mobile .orc-bul__track > span {
    white-space: nowrap; padding-right: 14px; font-family: 'DM Sans', sans-serif;
    font-size: 14px !important; line-height: 22px; color: #E4DCC9;
  }
  html.orc-mobile .orc-bul__track > span::after { content: '·'; padding-left: 14px; opacity: .55; }
  @keyframes orcBulMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
}

/* ---------- Home: administración, proyectos, LAB y footer ---------- */
@media (max-width: 900px) {
  /* márgenes generales más respirados */
  html.orc-mobile section[data-screen-label="Statement Nosotros"] { padding: 56px 22px 0 !important; }
  html.orc-mobile section[data-screen-label="Statement Nosotros"] h2 { max-width: none !important; }
  html.orc-mobile section[data-screen-label="Statement Nosotros"] h2 + h2 { margin-top: 26px !important; }
  html.orc-mobile section[data-screen-label="Statement Nosotros"] > div:last-child { height: 34px !important; }
  html.orc-mobile section[data-screen-label="Statement 360"] { padding: 60px 22px 40px !important; }
  html.orc-mobile section[data-screen-label="Statement 360"] h2 { max-width: none !important; }
  html.orc-mobile section[data-screen-label="Statement 360"] p { margin-top: 28px !important; font-size: 28px !important; }

  /* Administración: círculos chicos en fila, protagonismo a las cards */
  html.orc-mobile section[data-screen-label="Administracion"] { padding: 44px 20px 40px !important; display: block !important; }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child { max-width: none !important; }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child > div {
    display: flex !important; flex-direction: row !important; gap: 8px !important;
    margin-top: 18px !important; grid-template-columns: none !important;
  }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child > div span {
    width: 38px !important; height: 38px !important; aspect-ratio: auto !important;
    font-size: 14px !important; padding-top: 0 !important; flex: 0 0 auto !important;
  }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child > button { margin-top: 22px !important; }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:nth-child(2) {
    display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 26px !important;
  }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:nth-child(2) > div {
    border-radius: 20px !important; padding: 20px !important; min-height: 0 !important;
  }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:nth-child(2) > div span { font-size: 34px !important; }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:nth-child(2) > div h3 { font-size: 21px !important; }

  /* Naturaleza y arquitectura: primero imágenes, luego metadata */
  html.orc-mobile section[data-screen-label="Proyectos"] { padding: 40px 20px 70px !important; min-height: 0 !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] h2 { text-align: left !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] > div:first-child { justify-content: flex-start !important; margin-bottom: 26px !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] span:empty { display: none !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] { display: flex !important; flex-direction: column !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div { padding: 20px 0 !important; gap: 12px !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(.orc-marquee) { order: -1; border: none !important; padding: 0 0 22px !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] .orc-marquee__item { width: 168px; height: 122px; }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] span { font-size: clamp(22px, 6vw, 30px) !important; }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div > div { gap: 16px !important; }

  /* LAB intro centrado */
  html.orc-mobile section[data-screen-label="LAB intro"] { display: block !important; min-height: 0 !important; padding: 48px 22px 40px !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child {
    padding: 0 !important; align-items: center !important; text-align: center !important;
  }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child img { width: min(230px, 68%) !important; margin: 0 auto !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child p {
    text-align: center !important; max-width: 34ch !important; align-self: center !important; margin: 26px auto 0 !important;
  }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child p:last-of-type {
    font-size: 24px !important; line-height: 1.22 !important; max-width: 20ch !important; margin: 30px auto 0 !important;
  }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child a { align-self: center !important; margin-top: 24px !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:last-child {
    height: 44vh; min-height: 260px; margin-top: 28px; border-radius: 20px !important;
  }
  html.orc-mobile section[data-screen-label="LAB articulos"] { padding: 40px 20px 60px !important; }
  html.orc-mobile section[data-screen-label="LAB articulos"] a { height: 340px !important; }

  /* Footer: tarjeta frosted con márgenes */
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) {
    min-height: 0 !important; padding: 60px 22px 40px !important;
  }
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) > div {
    width: 100% !important; padding: 28px 24px 26px !important; border-radius: 24px !important;
  }
  html.orc-mobile footer[data-screen-label="Footer"] nav a { font-size: 28px !important; }
  html.orc-mobile footer[data-screen-label="Footer"] > div:last-child {
    flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 16px 22px 26px !important;
  }
  html.orc-mobile footer[data-screen-label="Footer"] > div:last-child > div { gap: 16px !important; flex-wrap: wrap !important; }
}


@media (max-width: 900px) {
  html.orc-mobile [style*="calc(100% + "] { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- Tarjetas de proyecto (portada proyectos) ---------- */
@media (max-width: 900px) {
  html.orc-mobile section[data-screen-label^="Proyecto "] { height: 78vh !important; min-height: 520px !important; }
  html.orc-mobile section[data-screen-label^="Proyecto "] > span:nth-of-type(2) { display: none !important; }
  html.orc-mobile section[data-screen-label^="Proyecto "] > span:nth-of-type(1) { top: 22px !important; left: 20px !important; font-size: 30px !important; }
  html.orc-mobile section[data-screen-label^="Proyecto "] > p {
    right: 20px !important; left: 110px !important; top: 24px !important; max-width: none !important; font-size: 17px !important;
  }
  html.orc-mobile section[data-screen-label^="Proyecto "] > div:nth-of-type(3) {
    left: 20px !important; right: 20px !important; bottom: 96px !important; gap: 12px !important;
  }
  html.orc-mobile section[data-screen-label^="Proyecto "] > div:nth-of-type(3) img { height: 34px !important; }
  html.orc-mobile section[data-screen-label^="Proyecto "] > div:nth-of-type(3) h2 { font-size: 32px !important; }
  html.orc-mobile section[data-screen-label^="Proyecto "] > a:last-of-type {
    left: 20px !important; right: auto !important; bottom: 28px !important; padding: 14px 24px !important;
  }
}

/* ---------- Ajustes móviles: botones, tarjetas 360 y footer ---------- */
@media (max-width: 900px) {
  /* Botones más chicos en todo el sitio móvil */
  html.orc-mobile button, html.orc-mobile a[role="button"] { min-height: 40px; }
  html.orc-mobile a[style*="border-radius: 99px"],
  html.orc-mobile button[style*="border-radius: 99px"] {
    font-size: 11px !important; letter-spacing: 0.12em !important;
    padding: 11px 20px !important; min-height: 0 !important;
  }
  html.orc-mobile [data-m="txt"] a span:last-child { height: 40px !important; padding: 0 18px 0 22px !important; font-size: 11px !important; }
  html.orc-mobile [data-m="txt"] a span:first-child:not(:last-child) { width: 40px !important; height: 40px !important; }

  /* Modelo 360: tarjetas color arena */
  html.orc-mobile [data-m="num"],
  html.orc-mobile [data-m="txt"],
  html.orc-mobile [data-m="bul"] { background: #F1EEE7 !important; }
  html.orc-mobile [data-m="num"] span,
  html.orc-mobile [data-m="txt"] h3,
  html.orc-mobile [data-m="txt"] p,
  html.orc-mobile [data-m="txt"] span { color: #01321F !important; }

  /* Marquee de bullets: transparente, tipografía verde y aire arriba */
  html.orc-mobile [data-m="bul"] .orc-bul,
  html.orc-mobile .orc-bul { background: transparent !important; margin-top: 12px !important; }
  html.orc-mobile .orc-bul__track { background: transparent !important; }
  html.orc-mobile .orc-bul__track > span {
    background: transparent !important; color: #01321F !important; opacity: .82;
  }

  /* Naturaleza y arquitectura: marquee arriba, botón compacto debajo de la metadata */
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(> a[href="/proyectos"]) {
    order: 99 !important; border-top: none !important; padding: 26px 0 0 !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(> a[href="/proyectos"]) a {
    justify-self: flex-start !important; align-self: flex-start !important;
    font-size: 11px !important; letter-spacing: 0.12em !important;
    padding: 11px 20px !important; gap: 8px !important; min-height: 0 !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(.orc-marquee) {
    order: -1 !important; padding: 0 0 22px !important;
  }


  /* Footer frosted: card más chica con más padding lateral */
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) { padding: 60px 26px 40px !important; }
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) > div { padding: 28px 26px 26px !important; }
}

@media (max-width: 900px) {
  html.orc-mobile section[data-screen-label="Proyectos"] > div[data-m-cta] {
    display: block !important; border: none !important; padding: 30px 0 0 !important; margin: 0 !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] > div[data-m-cta] a { justify-self: flex-start !important; }
}

@media (max-width: 900px) {
  html.orc-mobile [data-m="bul"] { padding-top: 30px !important; }
  html.orc-mobile [data-m="txt"] a { margin-top: 22px !important; }
}

/* ============================================================
   Ajustes móvil · agosto 2026
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Navbar: sólo el logotipo (sin texto duplicado) ---- */
  .orc-mnav__brand span { display: none !important; }
  .orc-mnav__brand img { height: 26px !important; }

  /* ---- Modelo 360: botón VER SERVICIO en una sola línea ---- */
  html.orc-mobile [data-m="txt"] a,
  html.orc-mobile [data-m="txt"] a span { white-space: nowrap !important; }
  html.orc-mobile [data-m="txt"] a span:last-child {
    height: 38px !important; padding: 0 16px 0 18px !important;
    font-size: 10px !important; letter-spacing: 0.1em !important;
    display: inline-flex !important; align-items: center !important;
  }
  html.orc-mobile [data-m="txt"] a span:first-child:not(:last-child) { width: 38px !important; height: 38px !important; }

  /* ---- Naturaleza y arquitectura: título arriba y del mismo tamaño ---- */
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(h2) {
    order: -2 !important; display: flex !important; flex-direction: column !important;
    gap: 14px !important; border-top: none !important; padding: 0 0 18px !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(h2) h2 {
    font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.1 !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(.orc-marquee) { order: -1 !important; }

  /* botón VER TODOS LOS PROYECTOS centrado */
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(> a[href="/proyectos"]) {
    display: flex !important; justify-content: center !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] [data-meta-rows] > div:has(> a[href="/proyectos"]) a,
  html.orc-mobile section[data-screen-label="Proyectos"] > div[data-m-cta] a {
    align-self: center !important; justify-self: center !important; margin: 0 auto !important;
  }
  html.orc-mobile section[data-screen-label="Proyectos"] > div[data-m-cta] {
    display: flex !important; justify-content: center !important;
  }

  /* ---- Footer frosted del home: card más chica con márgenes ---- */
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) { padding: 40px 16px 28px !important; }
  html.orc-mobile footer[data-screen-label="Footer"] > div:nth-of-type(3) > div {
    margin: 0 6px !important; width: auto !important; padding: 22px 20px 20px !important; border-radius: 20px !important;
  }
  html.orc-mobile footer[data-screen-label="Footer"] nav a { font-size: 22px !important; }

  /* ---- Nosotros: aire y botones centrados ---- */
  html.orc-mobile section[data-screen-label="Statement"],
  html.orc-mobile section[data-screen-label="Impacto"],
  html.orc-mobile section[data-screen-label="Historia"],
  html.orc-mobile section[data-screen-label="Filosofia"],
  html.orc-mobile section[data-screen-label="CTA final"] {
    padding-top: 52px !important; padding-bottom: 52px !important;
  }
  html.orc-mobile section[data-screen-label="CTA final"] { text-align: center !important; }
  html.orc-mobile section[data-screen-label="CTA final"] button,
  html.orc-mobile section[data-screen-label="CTA final"] a,
  html.orc-mobile section[data-screen-label="Filosofia"] button,
  html.orc-mobile section[data-screen-label="Filosofia"] a {
    margin-left: auto !important; margin-right: auto !important; align-self: center !important;
  }

  /* ---- Servicios · Cómo funciona: timeline vertical tipo mobile ---- */
  html.orc-mobile #riel-wrap { height: auto !important; }
  html.orc-mobile #riel-wrap > div {
    position: static !important; height: auto !important; min-height: 0 !important;
    padding: 72px 0 64px !important; display: block !important;
  }
  html.orc-mobile #riel-wrap > div > div:first-child {
    padding: 0 22px !important; text-align: left !important;
  }
  html.orc-mobile #riel-wrap > div > div:first-child h1 {
    font-size: clamp(38px, 11vw, 54px) !important; line-height: 0.98 !important;
  }
  html.orc-mobile #riel-wrap > div > div:first-child p {
    font-size: 15px !important; line-height: 1.6 !important; margin-top: 14px !important;
    max-width: 36ch !important; color: #C7D3B4 !important;
  }
  html.orc-mobile #icon-seq-canvas,
  html.orc-mobile #icon-seq-canvas + div,
  html.orc-mobile #riel-wrap [style*="radial-gradient"] { display: none !important; }

  html.orc-mobile #riel-track {
    position: relative !important;
    flex-direction: column !important; overflow: visible !important;
    gap: 0 !important; padding: 32px 22px 0 54px !important; margin-top: 12px !important;
  }
  /* línea vertical conectora */
  html.orc-mobile #riel-track::before {
    content: ''; position: absolute; left: 29px; top: 32px; bottom: 24px;
    width: 2px; background: linear-gradient(180deg, #A9BC85 0%, rgba(169,188,133,0.22) 100%);
    border-radius: 2px;
  }
  html.orc-mobile #riel-track > div {
    position: relative !important;
    flex: 0 0 auto !important; width: 100% !important; align-items: flex-start !important;
    min-height: 0 !important; margin: 0 0 18px !important; padding: 0 0 0 18px !important;
    opacity: 0.28; transform: translateX(14px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.61,.36,1);
  }
  html.orc-mobile #riel-track > div.orc-step-active,
  html.orc-mobile #riel-track > div.in-view {
    opacity: 1; transform: translateX(0);
  }
  html.orc-mobile #riel-track > div > div {
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 6px !important; padding: 18px 18px 20px !important;
    background: rgba(241,238,231,0.06); border: 1px solid rgba(241,238,231,0.10);
    border-radius: 16px;
  }
  /* círculo con número fuera de la tarjeta, sobre la línea */
  html.orc-mobile #riel-track > div > div::before {
    content: attr(data-step); position: absolute; left: -40px; top: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: 'Founders Grotesk', sans-serif; font-weight: 300; font-size: 14px;
    color: #F1EEE7; background: #0B3A26; border: 1px solid rgba(169,188,133,0.45);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
  }
  html.orc-mobile #riel-track > div.orc-step-active > div::before,
  html.orc-mobile #riel-track > div.in-view > div::before {
    background: #E9EE8B; color: #01321F; border-color: #E9EE8B;
    transform: scale(1.08);
  }
  html.orc-mobile #riel-track p {
    margin: 0 !important;
    font-family: 'Founders Grotesk', sans-serif !important; font-weight: 300 !important;
    font-size: 21px !important; line-height: 1.22 !important; color: #F1EEE7 !important;
  }
  html.orc-mobile #riel-track p + p {
    font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important;
    font-size: 14px !important; line-height: 1.55 !important; color: #C7D3B4 !important;
    margin-top: 8px !important;
  }
  /* quitar el número original, ya está en el pseudo-elemento del círculo */
  html.orc-mobile #riel-track > div > div > span:first-child { display: none !important; }
  html.orc-mobile #riel-wrap > div > div:last-child { padding-bottom: 0 !important; margin-top: 0 !important; }

  /* ---- Solución integral: acordeones abiertos (sin hover) ---- */
  html.orc-mobile .solucion-accordion { min-height: 0 !important; }
  html.orc-mobile .solucion-accordion-item {
    flex: 0 0 auto !important; padding: 24px 20px !important; cursor: default !important;
  }
  html.orc-mobile .solucion-accordion-body {
    max-height: none !important; opacity: 1 !important; margin-top: 16px !important; overflow: visible !important;
  }
  html.orc-mobile .solucion-accordion-header { grid-template-columns: 48px 1fr !important; gap: 12px !important; }
  html.orc-mobile .solucion-accordion-body p { font-size: 13px !important; }

  /* ---- Producimos / Construimos / Operamos: H2 grande animado ---- */
  html.orc-mobile .serv-arrow { display: none !important; }
  html.orc-mobile div:has(> .serv-step) {
    position: relative !important; height: 1.2em !important; min-height: 54px;
  }
  html.orc-mobile .serv-step {
    position: absolute !important; left: 0; top: 0; width: 100%;
    font-size: clamp(34px, 9.4vw, 46px) !important; color: #01321F !important;
    opacity: 0; animation: orcStepCycle 7.2s infinite cubic-bezier(.22,.61,.36,1);
  }
  html.orc-mobile .serv-step[data-step="1"] { animation-delay: 2.4s; }
  html.orc-mobile .serv-step[data-step="2"] { animation-delay: 4.8s; }
  @keyframes orcStepCycle {
    0%   { opacity: 0; transform: translateY(16px); }
    4%, 25% { opacity: 1; transform: none; }
    31%, 100% { opacity: 0; transform: translateY(-16px); }
  }
  html.orc-mobile #serv-hero-pin { padding: 40px 20px 48px !important; min-height: 0 !important; }
  html.orc-mobile #serv-hero-pin > div { gap: 30px !important; }
  html.orc-mobile #serv-hero-pin > div > div { gap: 24px !important; border-left: none !important; padding-left: 0 !important; }
  html.orc-mobile #serv-hero-pin div[style*="min-height: 560px"] { min-height: 320px !important; }

  /* ---- Por qué el Modelo 360º: layout en columna ---- */
  html.orc-mobile section[data-screen-label="Statement servicios"] { padding: 52px 20px 60px !important; }
  html.orc-mobile section[data-screen-label="Statement servicios"] > div:last-child {
    display: flex !important; flex-direction: column !important;
    gap: 24px !important; margin-top: 34px !important; align-items: stretch !important;
  }
  html.orc-mobile section[data-screen-label="Statement servicios"] h2 {
    margin-top: 18px !important; max-width: none !important;
  }
  html.orc-mobile section[data-screen-label="Statement servicios"] a[href="/proyectos"] {
    align-self: center !important; margin-top: 6px !important;
  }
  html.orc-mobile section[data-screen-label="Statement servicios"] div[style*="height: clamp(280px"] {
    height: 240px !important;
  }
}

/* ============================================================
   Ajustes móvil · pulido general (agosto 2026)
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Scroll vertical siempre disponible sobre imágenes/slots ---- */
  html.orc-mobile image-slot,
  html.orc-mobile image-slot *,
  html.orc-mobile img,
  html.orc-mobile .py-par,
  html.orc-mobile #py-hero-wrap,
  html.orc-mobile #py-hero-wrap * { touch-action: pan-y !important; }
  html.orc-mobile [data-iso-track] iframe,
  html.orc-mobile iframe { pointer-events: none !important; }
  html.orc-mobile .orc-marquee,
  html.orc-mobile .orc-marquee * { touch-action: pan-y !important; }

  /* ---- Modelo 360: pastilla y círculo del mismo alto, sin recortes ---- */
  html.orc-mobile [data-m="txt"] a {
    overflow: visible !important; display: inline-flex !important;
    align-items: center !important; max-width: 100% !important;
  }
  html.orc-mobile [data-m="txt"] a span:first-child:not(:last-child) {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    flex: 0 0 40px !important; border-radius: 99px !important;
    margin-right: -14px !important; box-sizing: border-box !important;
  }
  html.orc-mobile [data-m="txt"] a span:last-child {
    height: 40px !important; min-height: 40px !important; line-height: 40px !important;
    padding: 0 18px 0 24px !important; border-radius: 99px !important;
    font-size: 10.5px !important; box-sizing: border-box !important;
  }

  /* ---- Botones tipo pastilla: tamaño de botón real, nunca full width ---- */
  html.orc-mobile section button[style*="border-radius: 99px"],
  html.orc-mobile section a[style*="border-radius: 99px"],
  html.orc-mobile footer button[style*="border-radius: 99px"],
  html.orc-mobile header button[style*="border-radius: 99px"] {
    width: auto !important; max-width: max-content !important;
    padding: 12px 22px !important; font-size: 11px !important;
    flex: 0 0 auto !important; white-space: nowrap !important;
    align-self: center !important;
  }

  /* ---- Administración: números perfectamente centrados ---- */
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child > div span {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    line-height: 1 !important; padding: 0 !important; text-align: center !important;
  }
  html.orc-mobile section[data-screen-label="Administracion"] > div > div:first-child > div > span > span {
    transform: none !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 100% !important;
  }

  /* ---- Naturaleza y arquitectura: título, marquee y luego métricas ---- */
  html.orc-mobile [data-m-metrics] { display: flex !important; flex-direction: column !important; }
  html.orc-mobile [data-m-metrics] h2 {
    margin: 0 0 18px !important; text-align: left !important;
    font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.08 !important;
  }
  html.orc-mobile [data-m-metrics] .orc-marquee { margin-bottom: 8px !important; }
  html.orc-mobile [data-m-metrics] .orc-marquee__item { width: 168px !important; height: 122px !important; }
  html.orc-mobile [data-m-metric-row] {
    border-top: 1px solid rgba(35,31,32,0.18); padding: 16px 0 !important;
  }
  html.orc-mobile [data-m-metric-row] > div { gap: 14px !important; }
  html.orc-mobile [data-m-metric-row] span[style*="width: 2px"] { display: none !important; }
  html.orc-mobile [data-m-metric-row] span { font-size: clamp(20px, 5.6vw, 26px) !important; }
  html.orc-mobile [data-m-metric-cta] {
    display: flex !important; justify-content: center !important; padding-top: 26px !important;
  }

  /* ---- Solución integral: acordeones como tarjetas abiertas ---- */
  html.orc-mobile .solucion-accordion { gap: 10px !important; min-height: 0 !important; }
  html.orc-mobile .solucion-accordion-item {
    flex: 0 0 auto !important; border-radius: 18px !important;
    padding: 20px 18px 22px !important; justify-content: flex-start !important;
  }
  html.orc-mobile .solucion-accordion-header {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    gap: 6px !important;
  }
  html.orc-mobile .solucion-accordion-header span:first-child { font-size: 10px !important; opacity: .8; padding: 0 !important; }
  html.orc-mobile .solucion-accordion-header span:last-child { font-size: 24px !important; }
  html.orc-mobile .solucion-accordion-body { margin-top: 12px !important; }
  html.orc-mobile .solucion-accordion-body > div { gap: 10px !important; }
  html.orc-mobile .solucion-accordion-body p { font-size: 13px !important; line-height: 1.55 !important; }

  /* ---- Respiración general ---- */
  html.orc-mobile section { padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; }
  html.orc-mobile section[data-screen-label^="Servicio "],
  html.orc-mobile section[data-screen-label^="Division "] { padding-left: 18px !important; padding-right: 18px !important; }
  html.orc-mobile #py-hero-wrap { height: 92vh !important; }
  html.orc-mobile #py-hero-wrap > section { min-height: 0 !important; height: 92vh !important; }
}

@media (max-width: 900px) {
  /* Portada de proyectos: piezas más chicas para la animación fija */
  html.orc-mobile #py-hero-wrap .py-par { width: 104px !important; height: 132px !important; }
}

/* ---------- Homogeneización móvil (títulos + primera división) ---------- */
@media (max-width: 900px) {
  /* Primera card de Divisiones: aire arriba para que no quede pegada */
  html.orc-mobile section[data-screen-label="Division Produccion"] { padding-top: 34px !important; }
  html.orc-mobile section[data-screen-label^="Division "] + section[data-screen-label^="Division "] { padding-top: 18px !important; }

  /* Todos los títulos alineados a la izquierda, con la misma escala */
  html.orc-mobile section h1,
  html.orc-mobile section h2,
  html.orc-mobile section h3,
  html.orc-mobile section > div > h1,
  html.orc-mobile section > div > h2 {
    text-align: left !important;
    margin-left: 0 !important; margin-right: 0 !important;
    max-width: 100% !important;
    text-wrap: pretty !important;
  }
  html.orc-mobile section h1 { font-size: clamp(34px, 10vw, 46px) !important; line-height: 1.02 !important; }
  html.orc-mobile section h2 { font-size: clamp(26px, 7.6vw, 36px) !important; line-height: 1.08 !important; }
  html.orc-mobile section h3 { font-size: clamp(21px, 6.2vw, 28px) !important; line-height: 1.12 !important; }

  /* Excepción: LAB intro y CTA final conservan sus botones centrados */
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child,
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child p,
  html.orc-mobile section[data-screen-label="CTA final"] { text-align: left !important; align-items: flex-start !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child img { margin: 0 !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child p { margin-left: 0 !important; margin-right: 0 !important; align-self: flex-start !important; }
  html.orc-mobile section[data-screen-label="LAB intro"] > div:first-child a { align-self: flex-start !important; }

  /* Filosofía: título y galería en columna */
  html.orc-mobile section[data-screen-label="Filosofia"] > div { grid-template-columns: 1fr !important; gap: 28px !important; }
  html.orc-mobile section[data-screen-label="Filosofia"] > div > div:last-child > div:last-child { margin-top: 0 !important; }
}

/* ============================================================
   Badges e H1 de proyectos · móvil (agosto 2026)
   ============================================================ */
@media (max-width: 900px) {
  /* Portada de Proyectos: el H1 va centrado (excepción a la regla general) */
  html.orc-mobile #py-hero-wrap h1 {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 12ch !important;
    align-self: center !important;
  }

  /* Badges: nunca se deforman (el max-width global las aplastaba) */
  html.orc-mobile .py-full-badge,
  html.orc-mobile .py-icon-badge img,
  html.orc-mobile .orc-badge img,
  html.orc-mobile img[data-badge] {
    max-width: none !important;
    width: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }
   html.orc-mobile .py-icon-badge { width: 34px !important; height: 34px !important; }
   html.orc-mobile .py-icon-badge img { height: 34px !important; }
   html.orc-mobile section[data-screen-label^="Proyecto "] > div:nth-of-type(3) img.py-full-badge { height: 38px !important; }

  /* Iconos de marca del home: sin hover, se abren al tocar */
  html.orc-mobile .orc-badge { --h: 40px !important; }
  html.orc-mobile .orc-badge:hover { width: var(--h) !important; }
  html.orc-mobile .orc-badge.is-open { width: calc(var(--h) * var(--ratio)) !important; }
  html.orc-mobile .orc-badges { flex-wrap: wrap !important; gap: 8px !important; }
}

@media (hover: none) {
  .orc-badge:hover { width: var(--h); }
  .orc-badge.is-open { width: calc(var(--h) * var(--ratio)); }
}

/* Botón de regreso en la página de proyecto (móvil) */
@media (max-width: 760px) {
  #backbtn {
    left: 16px !important; top: 16px !important;
    padding: 11px 16px !important; font-size: 11px !important;
    letter-spacing: .1em !important; z-index: 2147483000 !important;
    background: rgba(241,238,231,0.96) !important; opacity: 1 !important;
  }
}

/* LAB · chips de filtro juntos en móvil */
@media (max-width: 760px) {
  html.orc-mobile section[data-screen-label="LAB intro"] > div {
    gap: 8px !important;
    margin-top: 34px !important;
    row-gap: 8px !important;
  }
  html.orc-mobile section[data-screen-label="LAB intro"] > div > span {
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}