/* Visual delta: 27/09 reference; existing responsive and accessibility safeguards retained. */

@media (max-width: 1000px) {
  [data-problemhead] { grid-template-columns: 1fr !important; }
  [data-problemhead] > p, [data-problemhead] > h2 { grid-area: auto / 1 !important; }
}
[data-navcta]:hover [data-fill], [data-navcta]:focus-visible [data-fill] { transform: scaleX(1) !important; }
[data-navcta]:hover [data-label], [data-navcta]:focus-visible [data-label] { color: rgb(17, 17, 15) !important; }
[data-navcta]:hover [data-inner], [data-navcta]:focus-visible [data-inner] { border-color: rgba(17, 17, 15, 0.28) !important; }
[data-navcta]:hover [data-shaft], [data-navcta]:focus-visible [data-shaft] { width: 24px !important; background: rgb(17, 17, 15) !important; }
[data-navcta]:hover [data-head], [data-navcta]:focus-visible [data-head] { border-color: rgb(17, 17, 15) !important; }
[data-navcta]:focus-visible { outline: rgb(209, 185, 159) solid 1px; outline-offset: 3px; }
@keyframes eg-scribble {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
  58% { stroke-dashoffset: 0.0235; animation-timing-function: linear; }
  63% { stroke-dashoffset: 0.021; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  100% { stroke-dashoffset: 0; }
}
[data-cascade-target][data-cascade] ~ [data-scribble] path { animation: 4800ms linear 2400ms 1 normal both running eg-scribble; }
@media (prefers-reduced-motion: reduce) {
  [data-scribble] path { stroke-dashoffset: 0 !important; animation: auto ease 0s 1 normal none running none !important; }
}
@media (max-width: 1000px) {
  [data-scribble] { grid-area: auto / 1 !important; justify-self: start !important; max-width: 420px !important; }
}
[data-servlist][data-active="1"] [data-pimg="1"], [data-servlist][data-active="2"] [data-pimg="2"], [data-servlist][data-active="3"] [data-pimg="3"], [data-servlist][data-active="4"] [data-pimg="4"] { opacity: 1 !important; transform: scale(1) !important; }
[data-servlist][data-active="1"] [data-row="1"] [data-rowtitle], [data-servlist][data-active="2"] [data-row="2"] [data-rowtitle], [data-servlist][data-active="3"] [data-row="3"] [data-rowtitle], [data-servlist][data-active="4"] [data-row="4"] [data-rowtitle] { color: rgb(138, 106, 75) !important; }
[data-servlist][data-active="1"] [data-row="1"] [data-rownum], [data-servlist][data-active="2"] [data-row="2"] [data-rownum], [data-servlist][data-active="3"] [data-row="3"] [data-rownum], [data-servlist][data-active="4"] [data-row="4"] [data-rownum] { color: rgb(138, 106, 75) !important; }
[data-servlist][data-active="1"] [data-row="1"] [data-rowarrow], [data-servlist][data-active="2"] [data-row="2"] [data-rowarrow], [data-servlist][data-active="3"] [data-row="3"] [data-rowarrow], [data-servlist][data-active="4"] [data-row="4"] [data-rowarrow] { transform: translateX(6px); background: rgb(209, 185, 159) !important; border-color: rgb(209, 185, 159) !important; color: rgb(17, 17, 15) !important; }
@media (max-width: 1000px) {
  [data-servlist] { grid-template-columns: 1fr !important; }
  [data-servpanel] { display: none !important; }
  [data-rowthumb] { display: block !important; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  [data-friccion-grid] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; row-gap: 48px !important; }
}
[data-cascade] [data-letter] { animation: 820ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running eg-letter; }
@media (prefers-reduced-motion: reduce) {
  [data-hero-video], [data-hero-glow] { transition: none !important; transform: none !important; opacity: 1 !important; animation: auto ease 0s 1 normal none running none !important; }
}
[data-faserow]:hover [data-thumb] img, [data-faserow]:focus-visible [data-thumb] img { opacity: 1 !important; filter: none !important; transform: scale(1.07) !important; }
.vr-index-6:hover { border-top-color: rgb(138, 106, 75) !important; }
.vr-index-7:hover { border-top-color: rgb(138, 106, 75) !important; }
.vr-index-8:hover { border-top-color: rgb(138, 106, 75) !important; }
.vr-index-9:hover { border-top-color: rgb(138, 106, 75) !important; }
.vr-index-10:hover { color: rgb(242, 240, 236) !important; gap: 24px !important; border-color: rgb(209, 185, 159) !important; }
.vr-index-11:hover { color: rgb(17, 17, 15) !important; gap: 24px !important; border-color: rgb(138, 106, 75) !important; }
.vr-index-12:hover { color: rgb(242, 240, 236) !important; gap: 24px !important; border-color: rgb(209, 185, 159) !important; }

/* Mobile UX round 2 · 04/10/2026
   Mobile-only hero refinement; desktop remains governed by the existing rules. */
@media (max-width: 860px) {
  [data-hero] {
    background-image: url("assets/imagery/fondo-escalera.jpg") !important;
    background-position: center 56% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: clamp(112px, 15svh, 138px) 20px max(28px, calc(18px + env(safe-area-inset-bottom))) !important;
  }

  /* The MP4 source is desktop-scoped in markup; keep the video element out of the mobile render tree. */
  [data-hero-video] {
    display: none !important;
  }

  /* Mobile hero uses normal flow instead of new absolute offsets: stable across phone/tablet heights. */
  [data-hero-title] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    font-size: clamp(40px, 11.5vw, 52px) !important;
    line-height: .92 !important;
  }

  [data-hero-row] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    margin-top: clamp(18px, 3svh, 28px) !important;
    gap: 0 !important;
  }

  [data-hero-subblock] {
    font-size: 16px !important;
    line-height: 1.46 !important;
    max-width: 32ch !important;
  }

  [data-hero-row] > a {
    margin-top: auto !important;
  }
}

@media (max-width: 380px), (max-width: 860px) and (max-height: 700px) {
  [data-hero] {
    padding-top: 102px !important;
  }

  [data-hero-title] {
    font-size: 38px !important;
  }

  [data-hero-row] {
    margin-top: 16px !important;
  }

  [data-hero-subblock] {
    font-size: 15px !important;
  }
}