/* ====================================================
   MEDRANDO — Sen límites
   Estilo: agencia premium, blanco/negro radical, B&W
   ==================================================== */

:root{
  --teal:#4FA8AE;
  --bg:#050505;
  --ink:#FFFFFF;
  --ink-2:#E8E8E8;
  --line:#1F1F1F;
  --line-soft:#1A1A1A;
  --gray:#8A8A8A;
  --gray-2:#5A5A5A;
  --maxw:1440px;
  --pad:clamp(20px, 4vw, 64px);
  --font:'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
ul{list-style:none}
em{font-style:normal}

.mono{font-family:var(--mono); letter-spacing:.04em; font-size:11.5px; text-transform:uppercase}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ============== CURSOR PERSONALIZADO ============== */
.cursor{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  width:32px; height:32px; border:1px solid #fff; border-radius:50%;
  transform:translate(-50%, -50%);
  transition:width .25s ease, height .25s ease, background .25s ease, opacity .25s ease;
  mix-blend-mode:difference;
}
.cursor--dot{
  width:5px; height:5px; background:#fff; border:0;
  transition:transform .08s linear, width .25s ease, height .25s ease, opacity .25s ease;
}
.cursor.is-hover{width:56px; height:56px; background:#fff}

@media (hover:none), (pointer:coarse){
  body, a, button, .case, .nav__brand, .nav__burger{cursor:auto !important}
  .cursor{display:none !important}
  /* Tap highlight color limpio en touch */
  a, button{-webkit-tap-highlight-color:rgba(79,168,174,.18)}
}

/* ============== NAV ============== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:30px var(--pad);
  color:#fff;
}
.nav__brand{
  font-weight:500; font-size:22px; letter-spacing:-.02em;
  display:inline-flex; align-items:baseline; gap:0;
}
.nav__brand .plus{color:var(--teal); margin-left:1px}
.nav__links{display:flex; gap:54px; align-items:center}
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.04em;
  position:relative; color:#fff;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; right:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.6,.05,.2,1);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{
  border:1px solid #fff; padding:10px 22px; border-radius:2px;
  transition:background .25s ease, color .25s ease;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:#fff; color:var(--bg)}

.nav__burger{display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:none; padding:6px}
.nav__burger span{display:block; width:24px; height:1.5px; background:#fff}

@media(max-width:880px){
  .nav__links{
    position:fixed; top:60px; left:0; right:0; bottom:0;
    background:#0a0a0a; flex-direction:column; align-items:flex-start; gap:0;
    padding:30px var(--pad); transform:translateY(-110%);
    transition:transform .5s cubic-bezier(.6,.05,.2,1);
    mix-blend-mode:normal;
    z-index:99;
  }
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{font-size:24px; padding:16px 0; border-bottom:1px solid #1f1f1f; width:100%; font-weight:600; color:#fff}
  .nav__cta{border:1px solid #fff; padding:14px 22px !important; align-self:flex-start; margin-top:18px; border-radius:2px}
  .nav__burger{display:flex}
}

/* ============== HERO ============== */
.hero{
  min-height:100vh; position:relative; overflow:hidden;
  background:#050505;
  display:flex; align-items:center; justify-content:center;
  padding:120px var(--pad) 80px;
}

/* lens flare / vignette en los bordes */
.hero__lens{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 35%, rgba(255,80,80,.05) 60%, transparent 75%),
    radial-gradient(ellipse 105% 85% at 50% 50%, transparent 40%, rgba(80,255,180,.05) 65%, transparent 78%),
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, rgba(80,140,255,.07) 70%, transparent 82%),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 85%);
  mix-blend-mode:screen;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.85) 85%);
}

/* estrellitas (puntos sutiles de fondo) */
.hero__stars{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 75% 18%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 12% 85%, #fff, transparent),
    radial-gradient(1px 1px at 65% 55%, #fff, transparent),
    radial-gradient(1px 1px at 30% 12%, #fff, transparent),
    radial-gradient(1px 1px at 85% 45%, #fff, transparent);
}

/* texto del hero */
.hero__inner{
  position:relative; z-index:3;
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:40px;
}
.hero__title{
  font-family:var(--font); font-weight:500;
  font-size:clamp(64px, 13vw, 220px);
  line-height:.92; letter-spacing:-.045em;
  color:#fff;
}
.hero__title .line{
  display:block; padding:.02em 0;
  opacity:0; transform:translateY(40px);
  animation:rise 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__title .line:nth-child(1){animation-delay:.1s}
.hero__title .line:nth-child(2){animation-delay:.28s}
@keyframes rise{to{opacity:1; transform:translateY(0)}}

.plus-big{color:var(--teal); font-weight:400; margin-left:.05em}

.hero__sub{
  align-self:flex-end;
  max-width:46ch; color:#cfcfcf;
  font-size:clamp(15px, 1.2vw, 18px); line-height:1.55;
  opacity:0; animation:rise 1s ease .55s forwards;
  margin-top:auto;
}

/* ===== FIGURA 3D ===== */
.hero__3d{
  position:absolute; z-index:2;
  top:50%; left:50%;
  width:min(560px, 55vw); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 20px 80px rgba(79,168,174,.25));
  opacity:0; animation:fade3d 1.4s ease .3s forwards;
}
@keyframes fade3d{to{opacity:1}}
.hero__3d .logo3d{
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .12s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

/* offset del logo 3D respecto al texto (lo coloca arriba a la derecha del bloque) */
@media(min-width:900px){
  .hero__3d{
    top:42%; left:auto; right:8%; transform:translate(0,-50%);
    width:min(620px, 48vw);
  }
  .hero__title{max-width:70%}
  .hero__sub{max-width:34ch; align-self:flex-end; margin-right:6%}
}

/* ============== MARQUEE ============== */
.marquee{
  background:#000; color:#fff;
  padding:30px 0; overflow:hidden;
  border-top:1px solid #1A1A1A; border-bottom:1px solid #1A1A1A;
}
.marquee__track{
  display:flex; align-items:center; gap:40px; white-space:nowrap;
  animation:scroll 28s linear infinite;
  font-size:clamp(28px, 4vw, 56px); font-weight:600; letter-spacing:-.02em;
  color:#fff;
}
.marquee__track span{color:#fff}
.marquee__track i{font-style:normal; color:var(--teal); font-size:.7em}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ============== SECTION BASE ============== */
.section{padding:clamp(80px, 12vw, 180px) var(--pad)}

.section__num{
  font-family:var(--mono); font-size:11.5px; color:var(--gray);
  letter-spacing:.1em; display:inline-block; margin-bottom:30px;
}
.section__head{
  display:flex; flex-direction:column; gap:0; margin-bottom:80px;
  border-top:1px solid var(--ink); padding-top:30px;
}
.section__head .section__num{margin-bottom:60px}
.section__heading{
  font-size:clamp(38px, 5.5vw, 88px);
  font-weight:600; letter-spacing:-.035em; line-height:.95;
}

/* ============== MISSION ============== */
.mission .section__num{margin-bottom:60px; display:block; border-top:1px solid var(--ink); padding-top:30px}
.mission__title{
  font-size:clamp(32px, 4.6vw, 76px);
  font-weight:600; letter-spacing:-.03em; line-height:1.02;
  max-width:22ch;
}
.mission__title em{color:var(--teal); font-style:italic; font-weight:500}
.mission__grid{
  margin-top:80px; display:grid; grid-template-columns:1fr 1fr; gap:80px;
  max-width:1100px; margin-left:auto;
}
.mission__grid p{font-size:18px; line-height:1.55; color:var(--ink-2); max-width:42ch}
@media(max-width:780px){
  .mission__grid{grid-template-columns:1fr; gap:30px; margin-top:50px}
}

/* ============== EXPERTISE ============== */
.exp-block{
  border-top:1px solid var(--ink);
  padding:40px 0;
}
.exp-block:last-child{border-bottom:1px solid var(--ink)}
.exp-block__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:30px;
}
.exp-block__head h3{
  font-size:clamp(28px, 3.6vw, 56px);
  font-weight:600; letter-spacing:-.025em; line-height:1;
}
.exp-block__head .mono{color:var(--gray)}
.exp-list{
  columns:2; column-gap:60px;
  font-size:clamp(18px, 1.6vw, 24px); font-weight:400; line-height:1.55;
  letter-spacing:-.01em;
}
.exp-list li{
  break-inside:avoid; padding:6px 0;
  position:relative; padding-left:28px;
}
.exp-list li::before{
  content:"+"; position:absolute; left:0; top:6px;
  color:var(--teal); font-family:var(--mono); font-weight:500;
}
@media(max-width:680px){.exp-list{columns:1}}

/* ============== WORK ============== */
.work__list{display:flex; flex-direction:column}
.case{
  display:flex; align-items:center; justify-content:space-between;
  padding:36px 0; gap:30px;
  border-top:1px solid var(--ink);
  position:relative; transition:padding-left .4s cubic-bezier(.6,.05,.2,1);
}
.case:last-child{border-bottom:1px solid var(--ink)}
.case__main{flex:1; max-width:780px}
.case__year{display:block; color:var(--gray); margin-bottom:14px}
.case__title{
  font-size:clamp(32px, 4.4vw, 72px);
  font-weight:600; letter-spacing:-.03em; line-height:1; margin-bottom:14px;
  transition:transform .4s cubic-bezier(.6,.05,.2,1), color .3s ease;
}
.case__desc{
  color:var(--gray); font-size:17px; line-height:1.5;
  max-width:60ch;
  transition:opacity .3s ease;
}
.case__arrow{
  font-size:42px; font-weight:300; color:var(--gray);
  transition:transform .4s cubic-bezier(.6,.05,.2,1), color .3s ease;
}
.case:hover{padding-left:30px}
.case:hover .case__title{color:var(--teal)}
.case:hover .case__arrow{transform:rotate(-45deg) translate(2px,-2px); color:var(--ink)}

.case__hover{
  position:fixed; top:0; left:0; width:340px; height:260px;
  pointer-events:none; opacity:0;
  transform:translate(-50%, -50%) scale(.9);
  transition:opacity .3s ease, transform .3s ease;
  z-index:50;
}
.case:hover .case__hover{opacity:1; transform:translate(-50%, -50%) scale(1)}

.case__visual{
  width:100%; height:100%; border-radius:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.case__visual--1{background:linear-gradient(135deg, #f0f4f5, #dbe7e9)}
.case__visual--2{background:linear-gradient(135deg, var(--teal), #2C7479)}
.case__visual--3{background:#0a0a0a}
.case__visual--4{background:#0E1419; position:relative}

/* mock window */
.window{width:78%; background:#fff; border-radius:8px; box-shadow:0 14px 40px rgba(0,0,0,.10); overflow:hidden}
.window__bar{display:flex; gap:5px; padding:8px 10px; background:#f1f3f4; border-bottom:1px solid #e6e8ea}
.window__bar i{width:8px; height:8px; border-radius:50%; background:#d4d7db}
.window__bar i:nth-child(1){background:#fc615d}
.window__bar i:nth-child(2){background:#fdbc40}
.window__bar i:nth-child(3){background:#34c749}
.window__body{padding:14px; display:flex; flex-direction:column; gap:8px}
.bar{height:10px; background:linear-gradient(90deg, var(--teal) 0%, var(--teal) var(--w), #e9eaec var(--w), #e9eaec 100%); border-radius:3px}

/* mock phone */
.phone{
  width:130px; height:230px; background:#0d0d0e; border-radius:22px;
  padding:6px; box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.phone__screen{
  width:100%; height:100%; background:#111418; border-radius:18px;
  padding:14px 10px; color:#fff; display:flex; flex-direction:column; gap:10px;
}
.chip{
  align-self:flex-start; font-family:var(--mono); font-size:8px;
  background:rgba(255,255,255,.1); padding:3px 6px; border-radius:999px;
}
.chip::before{content:"● "; color:#ff4d4d}
.score{font-size:34px; font-weight:800; display:flex; align-items:center; gap:10px; justify-content:center; line-height:1}
.score em{color:var(--gray-2); font-size:20px}
.players{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:auto}
.players div{height:18px; background:rgba(255,255,255,.06); border-radius:5px}
.players div:nth-child(1){background:rgba(79,168,174,.5)}

/* mock chart */
.chart{width:84%; height:74%; padding:14px; border-radius:8px; border:1px solid rgba(255,255,255,.06); background:
  linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:18px 18px;}
.chart svg{width:100%; height:100%}

/* mock CV */
.cv{width:100%; height:100%; position:relative; background:
  radial-gradient(circle at 30% 30%, rgba(79,168,174,.15), transparent 50%),
  linear-gradient(180deg, #0E1419 0%, #1B2530 100%);
}
.cv__box{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:1.5px solid var(--teal); border-radius:3px;
  box-shadow:0 0 18px rgba(79,168,174,.4);
}
.cv__box::after{
  content:"●"; position:absolute; top:-14px; left:0;
  color:var(--teal); font-size:9px; font-family:var(--mono);
}

/* ============== TRUSTED ============== */
.logos{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--ink); border-left:1px solid var(--ink);
}
.logo-cell{
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:50px 30px; min-height:140px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; letter-spacing:.08em;
  color:var(--gray); transition:background .3s ease, color .3s ease;
}
.logo-cell:hover{background:#fff; color:#000}
@media(max-width:880px){.logos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.logo-cell{min-height:100px; padding:30px 16px; font-size:12px}}

/* ============== TEAM ============== */
.team__list{display:flex; flex-direction:column}
.person{
  display:grid; grid-template-columns:120px 1fr;
  gap:60px; padding:50px 0;
  border-top:1px solid var(--ink); align-items:start;
}
.person:last-child{border-bottom:1px solid var(--ink)}
.person__avatar{
  width:90px; height:90px; border-radius:50%;
  background:#fff; color:#000;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:600; letter-spacing:-.03em;
}
.person__body h3{
  font-size:clamp(26px, 3vw, 42px); font-weight:600;
  letter-spacing:-.02em; margin-bottom:14px; line-height:1;
}
.person__body p{
  font-size:17px; line-height:1.6; color:var(--ink-2); max-width:62ch;
}
@media(max-width:680px){
  .person{grid-template-columns:1fr; gap:24px}
  .person__avatar{width:70px; height:70px; font-size:28px}
}

/* ============== CAREERS ============== */
.careers__inner{
  display:grid; grid-template-columns:2fr 1fr; gap:80px; align-items:end;
  border-top:1px solid var(--ink); padding-top:50px;
}
.careers__lead{
  font-size:clamp(28px, 3.6vw, 52px); font-weight:500;
  letter-spacing:-.025em; line-height:1.1; max-width:22ch;
}
.careers__link{
  font-size:clamp(18px, 1.8vw, 26px); font-weight:600;
  border-bottom:2px solid var(--ink); padding-bottom:6px;
  align-self:end; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease;
}
.careers__link:hover{color:var(--teal); border-color:var(--teal)}
@media(max-width:780px){
  .careers__inner{grid-template-columns:1fr; gap:30px; align-items:start}
}

/* ============== CONTACT ============== */
.contact{background:#000; color:#fff; min-height:100vh; display:flex; align-items:center}
.contact__inner{max-width:var(--maxw); margin:0 auto; width:100%}
.contact__inner .section__num{color:var(--gray-2); margin-bottom:40px}
.contact__title{
  font-size:clamp(54px, 9vw, 160px); font-weight:600;
  letter-spacing:-.04em; line-height:.92; margin-bottom:80px;
}
.contact__title em{color:var(--teal); font-style:italic; font-weight:500}
.contact__grid{display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:end; padding-top:40px; border-top:1px solid #222}
.contact__big{
  font-size:clamp(28px, 3.4vw, 48px); font-weight:600; letter-spacing:-.02em;
  border-bottom:2px solid var(--teal); padding-bottom:8px; align-self:start;
  transition:color .3s ease;
}
.contact__big:hover{color:var(--teal)}
.contact__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.contact__cols .mono{display:block; color:var(--gray-2); margin-bottom:8px}
.contact__cols p{font-size:15px; color:#fff}
.contact__cols a{border-bottom:1px solid var(--gray); padding-bottom:1px}
@media(max-width:880px){
  .contact__grid{grid-template-columns:1fr; gap:40px}
  .contact__cols{grid-template-columns:1fr 1fr}
}

/* ============== FOOTER ============== */
.footer{background:#000; color:#fff; padding:0 var(--pad) 24px}
.footer__big{
  font-size:clamp(80px, 22vw, 360px);
  font-weight:700; letter-spacing:-.06em; line-height:.85;
  text-align:center; padding:30px 0 20px;
  background:linear-gradient(180deg, #fff 0%, #fff 60%, #000 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer__bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid #222; color:var(--gray-2);
}
.footer__bottom a{transition:color .2s}
.footer__bottom a:hover{color:#fff}

/* ============== MISC ============== */
::selection{background:var(--teal); color:#fff}
a, button, .case, .nav__brand{cursor:none}

/* ====================================================
   PÁGINAS INTERIORES + NUEVOS COMPONENTES (HOLDING)
   ==================================================== */

/* Hero versión interior (más bajo, sin logo 3D gigante) */
.hero--inner{
  min-height:auto; padding:160px var(--pad) 100px;
  align-items:flex-start;
}

.inner-hero{
  position:relative; z-index:3;
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:24px;
}
.back-link{
  display:inline-block; font-size:13px; color:var(--gray);
  letter-spacing:.05em; transition:color .2s ease;
  margin-bottom:6px;
}
.back-link:hover{color:#fff}
.brand-tag{color:var(--teal); margin-bottom:6px}

.inner-hero__title{
  font-size:clamp(56px, 11vw, 180px);
  line-height:.9; letter-spacing:-.045em; font-weight:500;
  color:#fff; max-width:14ch;
  opacity:0; transform:translateY(40px);
  animation:rise 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.inner-hero__title em{
  font-style:italic; color:var(--teal); font-weight:500;
}
.inner-hero__sub{
  font-size:clamp(16px,1.4vw,20px); color:#cfcfcf;
  line-height:1.55; max-width:60ch;
  opacity:0; animation:rise 1s ease .35s forwards;
}
.inner-hero__meta{
  display:flex; flex-wrap:wrap; gap:50px;
  margin-top:30px; padding-top:30px;
  border-top:1px solid #222;
  opacity:0; animation:rise 1s ease .55s forwards;
}
.inner-hero__meta > div{display:flex; flex-direction:column; gap:6px}
.inner-hero__meta .mono{color:var(--gray); font-size:11px; letter-spacing:.1em}
.inner-hero__meta b{font-size:18px; font-weight:600; letter-spacing:-.01em; color:#fff}
.inner-hero__meta .teal{color:var(--teal)}

/* En páginas interiores no queremos el logo 3D del hero principal */
.page-inner .hero__3d{display:none}

/* Lead text dentro de un exp-block (descripción larga antes de la lista) */
.exp-lead{
  font-size:clamp(17px,1.4vw,22px); line-height:1.55;
  color:#cfcfcf; max-width:70ch; margin:6px 0 26px;
}

/* Inline teal accent (para <em class="teal">palabra</em>) */
em.teal, .teal{color:var(--teal); font-style:italic; font-weight:500}

/* Tiles de marca usados en case__hover (preview que sigue al cursor) */
.brand-tile{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  font-weight:600; letter-spacing:-.02em; color:#fff;
  text-align:center; padding:30px;
}
.brand-tile span{font-size:48px; line-height:1}
.brand-tile em{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.65); font-style:normal; text-transform:uppercase}
.brand-tile--jk{background:linear-gradient(135deg,#1B1B1B,#3A3A3A)}
.brand-tile--cep{background:linear-gradient(135deg,#0F2A2C,#1F5256)}
.brand-tile--store{background:linear-gradient(135deg,#5A5A5A,#222)}
.brand-tile--soft{background:linear-gradient(135deg,var(--teal),#1B4F53)}

/* Cards de cifras dentro de .logos */
.logo-cell.stat{
  flex-direction:column; gap:8px; align-items:flex-start; justify-content:center;
  padding:36px 28px; min-height:160px;
  font-family:var(--font);
}
.logo-cell.stat b{
  font-size:clamp(32px, 3.6vw, 56px); font-weight:600;
  letter-spacing:-.02em; line-height:1; color:#fff;
}
.logo-cell.stat em{
  font-style:normal; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; color:var(--gray); text-transform:uppercase;
}
.logo-cell.stat:hover b{color:#000}
.logo-cell.stat:hover em{color:#444}

/* Hero principal (homepage): que NO tape al texto cuando hay 3D */
@media(max-width:899px){
  .hero__3d{opacity:.35}
}

/* Ajustes de exp-block en interiores */
.page-inner .exp-block:first-of-type{border-top:1px solid #fff}

/* Mobile inner hero */
@media(max-width:680px){
  .inner-hero__meta{gap:24px}
  .inner-hero__meta > div{flex:1 1 40%}
}

/* ====================================================
   SECCIÓN MARCAS — REDISEÑADA
   ==================================================== */
.brands__grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
.brand--wide{grid-column:1 / -1}
.brand--wide .brand__visual{margin:30px 0}
@media(min-width:881px){
  .brand--wide{
    flex-direction:row; align-items:center;
    min-height:380px; gap:40px;
  }
  .brand--wide .brand__tag{position:absolute; top:40px; left:40px; margin:0}
  .brand--wide .brand__num{top:40px}
  .brand--wide .brand__visual{flex:0 0 auto; margin:0; height:auto}
  .brand--wide .brand__body{flex:1; margin:0; max-width:560px}
}
.brand{
  position:relative; overflow:hidden;
  border-radius:20px; padding:40px;
  min-height:560px;
  display:flex; flex-direction:column;
  border:1px solid #1A1A1A;
  background:#0B0B0B;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
  isolation:isolate;
}
.brand:hover{transform:translateY(-6px); border-color:var(--teal)}

/* fondo radial específico por marca */
.brand__bg{
  position:absolute; inset:0; z-index:0;
  opacity:.85; transition:opacity .5s ease;
}
.brand:hover .brand__bg{opacity:1}

.brand--jk     .brand__bg{background:radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.06) 0%, transparent 55%), linear-gradient(160deg, #131313 0%, #050505 70%)}
.brand--edu    .brand__bg{background:radial-gradient(120% 90% at 20% 0%, rgba(79,168,174,.16) 0%, transparent 55%), linear-gradient(160deg, #0F1718 0%, #060A0B 70%)}
.brand--cep    .brand__bg{background:radial-gradient(120% 90% at 20% 100%, rgba(79,168,174,.18) 0%, transparent 55%), linear-gradient(160deg, #0A1416 0%, #050505 70%)}
.brand--store  .brand__bg{background:radial-gradient(120% 90% at 100% 100%, rgba(200,200,200,.10) 0%, transparent 55%), linear-gradient(160deg, #161616 0%, #050505 70%)}
.brand--events .brand__bg{background:radial-gradient(120% 90% at 80% 0%, rgba(212,164,55,.18) 0%, transparent 55%), linear-gradient(160deg, #181410 0%, #050505 70%)}
.brand--serv   .brand__bg{background:radial-gradient(120% 90% at 20% 100%, rgba(160,160,160,.12) 0%, transparent 55%), linear-gradient(160deg, #131313 0%, #060606 70%)}
.brand--soft   .brand__bg{background:radial-gradient(120% 90% at 50% 0%, rgba(79,168,174,.22) 0%, transparent 55%), linear-gradient(160deg, #0E1A1B 0%, #050505 70%)}

.brand > *{position:relative; z-index:1}

/* número grande en esquina superior derecha */
.brand__num{
  position:absolute; top:32px; right:36px;
  font-size:80px; font-weight:600; letter-spacing:-.04em;
  color:rgba(255,255,255,.06); line-height:1;
  transition:color .4s ease;
}
.brand:hover .brand__num{color:rgba(79,168,174,.25)}

.brand__tag{
  color:var(--teal); font-size:11px; letter-spacing:.14em;
  display:inline-block; margin-bottom:auto;
}

.brand__visual{
  margin:60px 0 40px;
  height:160px; display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* visuales por marca */
.vis-belt{
  width:80%; height:60px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.vis-belt__strip{
  width:100%; height:18px; border-radius:3px;
  background:linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 50%, #2a2a2a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.4);
  position:relative;
}
.vis-belt__strip::before, .vis-belt__strip::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
}
.vis-belt__strip::after{right:0; transform:translateY(-50%) scaleX(-1)}
.vis-belt__knot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:50px; height:30px; border-radius:6px;
  background:linear-gradient(180deg, #1a1a1a, #0a0a0a 60%, #1a1a1a);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand:hover .vis-belt__knot{animation:beltPulse 1.6s ease-in-out infinite}
@keyframes beltPulse{50%{transform:translate(-50%,-50%) scale(1.06)}}

.vis-pulse{
  width:80%; color:var(--teal); position:relative;
  filter:drop-shadow(0 0 14px rgba(79,168,174,.4));
}
.vis-pulse svg{width:100%; height:auto}
.vis-pulse svg polyline{
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw 3s ease-in-out infinite;
}
@keyframes draw{
  0%{stroke-dashoffset:600}
  60%, 100%{stroke-dashoffset:0}
}
.vis-pulse__dot{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(79,168,174,.2), 0 0 20px var(--teal);
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{50%{box-shadow:0 0 0 10px rgba(79,168,174,0), 0 0 22px var(--teal)}}

.vis-bag{
  width:110px; height:130px; position:relative;
  background:linear-gradient(180deg, #2a2a2a, #0e0e0e 60%, #1a1a1a);
  border-radius:6px 6px 10px 10px;
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .4s ease;
}
.vis-bag__handle{
  position:absolute; top:-24px; left:20px;
  width:24px; height:36px; border:3px solid #fff; border-bottom:0;
  border-radius:14px 14px 0 0; opacity:.6;
}
.vis-bag__handle--r{left:auto; right:20px}
.vis-bag__logo{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  width:54px; height:54px; padding:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.vis-bag__logo svg{width:100%; height:100%}
.brand:hover .vis-bag{transform:rotate(-3deg)}

/* ---- Judogi (Edukayudo) ---- */
.vis-judogi{
  width:170px; height:130px; position:relative;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.vis-judogi svg{width:100%; height:100%; overflow:visible}
.judogi-l{transform-origin:100px 92px; transition:transform .5s ease}
.judogi-r{transform-origin:100px 92px; transition:transform .5s ease}
.judogi-knot{transform-origin:100px 95px; transition:transform .5s ease}
.brand:hover .judogi-l{transform:rotate(-3deg)}
.brand:hover .judogi-r{transform:rotate(3deg)}
.brand:hover .judogi-knot{transform:scale(1.08)}
.judogi-belt{filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}

/* ---- Grid 3x3 con animación de logo en escalera (Software) ---- */
.vis-grid{
  display:grid; grid-template-columns:repeat(3, 32px); grid-template-rows:repeat(3, 32px);
  gap:7px;
}
.vis-grid i{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  display:block;
}

/* secuencia escalera del logo Medrando: gris → oscuros → teal → todos juntos → fade */
/* Ciclo total: 5.6s */
.vis-grid--logo .cell-gray{
  animation:stairGray 5.6s ease-in-out infinite;
}
.vis-grid--logo .cell-dark{
  animation:stairDark 5.6s ease-in-out infinite;
}
.vis-grid--logo .cell-teal{
  animation:stairTeal 5.6s ease-in-out infinite;
}
/* desfase entre las celdas teal para que suban como escalera (de abajo a arriba) */
.vis-grid--logo .cell-teal:nth-of-type(7){animation-delay:0s}    /* abajo-derecha (último <i>) - calculo a continuación */
/* Nota: nth-of-type basado en posición real ─ se controla con animation-delay individuales abajo */

@keyframes stairGray{
  0%, 4%   {background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
  10%, 75% {background:#f0f0f0; box-shadow:0 0 22px rgba(255,255,255,.5); border-color:transparent}
  88%, 100%{background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
}
@keyframes stairDark{
  0%, 22%  {background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
  28%, 75% {background:#5a6068; box-shadow:0 0 16px rgba(255,255,255,.3); border-color:rgba(255,255,255,.4)}
  88%, 100%{background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
}
@keyframes stairTeal{
  0%, 42%  {background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
  48%, 75% {background:var(--teal); box-shadow:0 0 24px rgba(79,168,174,.8); border-color:transparent}
  88%, 100%{background:rgba(255,255,255,.05); box-shadow:none; border-color:rgba(255,255,255,.08)}
}

/* las 3 celdas teal suben en escalera con un pequeño desfase entre ellas */
.vis-grid--logo i:nth-child(3){animation-delay:0.45s}  /* teal arriba-derecha (3ª en aparecer) */
.vis-grid--logo i:nth-child(6){animation-delay:0.30s}  /* teal media-derecha (2ª) */
.vis-grid--logo i:nth-child(9){animation-delay:0.15s}  /* teal abajo-derecha (1ª) */
.vis-grid--logo i:nth-child(8){animation-delay:0.10s}  /* dark abajo-centro */
.vis-grid--logo i:nth-child(5){animation-delay:0.20s}  /* dark media-centro */

/* ---- PODIO + TROFEO (Events) ---- */
.vis-podium{
  width:200px; height:130px; position:relative;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
}
.vis-podium svg{width:100%; height:100%; overflow:visible}
.trophy{
  filter:drop-shadow(0 0 12px rgba(212,164,55,.4));
  transform-origin:100px 60px;
  animation:trophyShine 4s ease-in-out infinite;
}
@keyframes trophyShine{
  0%, 100%{filter:drop-shadow(0 0 10px rgba(212,164,55,.35))}
  50%     {filter:drop-shadow(0 0 22px rgba(255,220,120,.7))}
}
.brand:hover .trophy{transform:translateY(-4px); transition:transform .4s ease}

/* ---- DIANA + FLECHA (Servicios) ---- */
.vis-target{
  width:200px; height:130px; position:relative;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
}
.vis-target svg{width:100%; height:100%; overflow:visible}
.target-bull{
  transform-origin:115px 65px;
  animation:bullPulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(79,168,174,.7));
}
@keyframes bullPulse{
  0%, 100%{transform:scale(1)}
  50%     {transform:scale(1.18); filter:drop-shadow(0 0 18px rgba(79,168,174,1))}
}
.target-arrow{
  transform-origin:115px 65px;
  animation:arrowImpact 3.6s ease-in-out infinite;
}
@keyframes arrowImpact{
  0%, 5%   {transform:translate(-30px,-22px) rotate(-4deg); opacity:0}
  20%, 90% {transform:translate(0,0) rotate(0deg); opacity:1}
  100%     {transform:translate(-30px,-22px) rotate(-4deg); opacity:0}
}
.brand:hover .target-arrow{animation-duration:1.8s}

/* texto de la marca */
.brand__body{display:flex; flex-direction:column; gap:14px; margin-top:auto}
.brand__name{
  font-size:clamp(28px,3.2vw,44px); font-weight:600;
  letter-spacing:-.025em; line-height:1; color:#fff;
}
.brand__name em{font-style:italic; color:var(--teal); font-weight:500}
.brand__desc{
  color:#bdbdbd; font-size:15.5px; line-height:1.55; max-width:46ch;
}
.brand__meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:#7a7a7a; text-transform:uppercase;
}
.brand__meta i{color:var(--teal); font-style:normal}
.brand__cta{
  margin-top:14px; display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:6px;
  align-self:flex-start;
  transition:color .3s ease, border-color .3s ease, gap .3s ease;
}
.brand__cta b{font-weight:400; transition:transform .3s ease}
.brand:hover .brand__cta{color:var(--teal); border-color:var(--teal); gap:14px}
.brand:hover .brand__cta b{transform:translateX(4px)}

@media(max-width:880px){
  .brands__grid{grid-template-columns:1fr}
  .brand{min-height:520px; padding:32px}
  .brand__num{font-size:60px; top:24px; right:28px}
}

/* ====================================================
   CIFRAS — 3 columnas
   ==================================================== */
.logos--3col{grid-template-columns:repeat(3, 1fr) !important}
@media(max-width:880px){.logos--3col{grid-template-columns:repeat(2,1fr) !important}}

/* ====================================================
   FOOTER MEDRANDO+ con efecto shimmer + glow + 3D
   ==================================================== */
.footer__big{
  position:relative;
  background:linear-gradient(
    90deg,
    #2a2a2a 0%,
    #ffffff 35%,
    #4FA8AE 50%,
    #ffffff 65%,
    #2a2a2a 100%
  );
  background-size:220% 100%; background-position:100% 0%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 7s linear infinite;
  filter:drop-shadow(0 0 60px rgba(79,168,174,.18));
  transition:transform .4s cubic-bezier(.2,.8,.2,1), letter-spacing .6s ease;
  cursor:default;
}
@keyframes shimmer{
  0%  {background-position:120% 0%}
  100%{background-position:-120% 0%}
}
.footer__big:hover{
  letter-spacing:-.05em;
  filter:drop-shadow(0 0 80px rgba(79,168,174,.45));
}

/* ====================================================
   RESPONSIVE — pase completo móvil/tablet
   ==================================================== */

/* Tablet — ajustes intermedios */
@media (max-width: 1100px){
  .hero__3d{width:min(440px, 55vw); right:5%}
  .hero__title{font-size:clamp(48px, 11vw, 140px)}
  .brand{min-height:520px; padding:34px}
  .brand__num{font-size:64px}
}

/* Móvil grande / tablet pequeña */
@media (max-width: 880px){
  /* NAV */
  .nav{padding:14px var(--pad)}
  .nav__brand{font-size:18px}

  /* HERO principal — pasa a layout en COLUMNA y ordena texto arriba, logo debajo */
  .hero{
    padding:90px var(--pad) 60px;
    min-height:auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:24px;
  }
  .hero__inner{
    gap:18px;
    order:1;          /* texto primero */
    margin:0;
  }
  .hero__title{
    font-size:clamp(44px, 13vw, 90px);
    line-height:.96;
  }
  .hero__sub{
    font-size:15px;
    align-self:flex-start;
    max-width:100%;
    margin-top:0;
    line-height:1.5;
  }
  /* el logo 3D pasa a estar DEBAJO del texto en flujo normal */
  .hero__3d{
    order:2;
    position:relative;
    top:auto; left:auto; right:auto;
    transform:none;
    width:min(260px, 70vw); height:auto; aspect-ratio:1/1;
    margin:10px auto 0;
    opacity:1;
    filter:drop-shadow(0 14px 40px rgba(79,168,174,.35));
  }

  /* TICKER / MARQUEE */
  .marquee{padding:20px 0}
  .marquee__track{font-size:clamp(22px, 5.5vw, 36px); gap:24px}

  /* SECCIONES */
  .section{padding:60px var(--pad)}
  .section__head{margin-bottom:40px; padding-top:24px}
  .section__head .section__num{margin-bottom:24px}
  .section__heading{font-size:clamp(32px, 8.5vw, 56px)}
  .section__sub{font-size:16px}

  /* MISSION */
  .mission .section__num{margin-bottom:24px}
  .mission__title{font-size:clamp(28px, 7vw, 48px); line-height:1.05}
  .mission__grid{margin-top:30px; gap:24px}
  .mission__grid p{font-size:16px}

  /* MARCAS */
  .brands__grid{gap:16px}
  .brand{
    min-height:auto;
    padding:26px 22px 28px;
    border-radius:14px;
  }
  .brand__num{font-size:44px; top:20px; right:22px}
  .brand__tag{font-size:10px; letter-spacing:.12em}
  .brand__visual{
    margin:32px 0 26px;
    height:auto; min-height:120px;
  }
  .brand__name{font-size:clamp(24px, 6.8vw, 36px); line-height:1.05}
  .brand__desc{font-size:14.5px; line-height:1.55; max-width:100%}
  .brand__meta{font-size:10.5px; gap:6px}
  .brand__cta{font-size:14px}

  /* visuales: tamaño real reducido, NO transform:scale (rompía layout) */
  .vis-belt{width:90%; height:48px}
  .vis-belt__strip{height:14px}
  .vis-belt__knot{width:42px; height:24px}
  .vis-pulse{width:90%}
  .vis-bag{width:90px; height:108px}
  .vis-bag__handle{top:-20px; width:20px; height:30px}
  .vis-bag__logo{width:44px; height:44px; bottom:14px}
  .vis-judogi{width:140px; height:108px}
  .vis-podium, .vis-target{width:170px; height:110px}
  .vis-grid{grid-template-columns:repeat(3,26px); grid-template-rows:repeat(3,26px); gap:5px}

  /* CIFRAS */
  .logos--3col{grid-template-columns:repeat(2, 1fr) !important}
  .logo-cell.stat{padding:24px 20px; min-height:120px}
  .logo-cell.stat b{font-size:clamp(28px, 7vw, 38px)}
  .logo-cell.stat em{font-size:11px}

  /* EQUIPO */
  .person{padding:28px 0; gap:18px}
  .person__avatar{width:54px; height:54px; font-size:22px; border-radius:12px}
  .person__body h3{font-size:clamp(22px, 6vw, 30px); margin-bottom:8px}
  .person__body p{font-size:15px; line-height:1.55}

  /* CONTACT */
  .contact{padding:60px var(--pad); min-height:auto}
  .contact__title{font-size:clamp(40px, 12vw, 72px); margin-bottom:40px; line-height:.95}
  .contact__big{font-size:clamp(20px, 5.5vw, 32px)}
  .contact__grid{gap:30px; padding-top:24px}
  .contact__cols{grid-template-columns:1fr 1fr; gap:18px}
  .contact__cols p{font-size:14px}

  /* INNER HERO (páginas interiores) */
  .hero--inner{padding:100px var(--pad) 50px}
  .inner-hero{gap:18px}
  .inner-hero__title{font-size:clamp(40px, 13vw, 80px); line-height:.95}
  .inner-hero__sub{font-size:14.5px; line-height:1.55}
  .inner-hero__meta{
    flex-wrap:wrap; gap:18px;
    padding-top:22px; margin-top:22px;
  }
  .inner-hero__meta > div{flex:1 1 100%; gap:4px}
  .inner-hero__meta b{font-size:15px}
  .back-link{font-size:12px}
  .brand-tag{font-size:10.5px}

  /* EXPERTISE / EXP-BLOCK */
  .exp-block{padding:28px 0}
  .exp-block__head{margin-bottom:18px; flex-wrap:wrap; gap:6px}
  .exp-block__head h3{font-size:clamp(22px, 6vw, 36px)}
  .exp-list{font-size:clamp(15px, 4.2vw, 18px); columns:1; column-gap:0}
  .exp-list li{padding:5px 0 5px 22px}
  .exp-lead{font-size:15.5px; line-height:1.55; margin-bottom:18px}

  /* CAREERS (legacy, por si vuelve) */
  .careers__inner{gap:18px}
  .careers__lead{font-size:clamp(22px, 6vw, 32px)}
  .careers__link{font-size:16px}

  /* FOOTER */
  .footer{padding:0 var(--pad) 24px}
  .footer__big{font-size:clamp(56px, 22vw, 200px); padding:20px 0 16px}
  .footer__bottom{flex-direction:column; align-items:flex-start; gap:8px; padding-top:18px}
  .footer__bottom span{font-size:10.5px}

  /* Cursor: ya está oculto en touch via @media (hover:none) */
}

/* Móvil pequeño */
@media (max-width: 480px){
  .hero__title{font-size:clamp(40px, 13.5vw, 64px)}
  .hero__sub{font-size:14px}
  .hero__3d{width:min(220px, 65vw)}
  .logos--3col{grid-template-columns:1fr !important}
  .logo-cell.stat{padding:22px 18px; min-height:100px}
  .brand{padding:24px 20px 26px; border-radius:12px}
  .brand__num{font-size:38px; top:18px; right:20px}
  .brand__visual{margin:28px 0 22px; min-height:100px}
  .vis-judogi{width:120px; height:90px}
  .vis-podium, .vis-target{width:150px; height:100px}
  .vis-bag{width:78px; height:94px}
  .vis-grid{grid-template-columns:repeat(3,22px); grid-template-rows:repeat(3,22px); gap:4px}
  .contact__cols{grid-template-columns:1fr; gap:16px}
  .marquee__track{font-size:22px; gap:18px}
  .section{padding:50px var(--pad)}
  .mission__grid{margin-top:24px}
  .footer__big{font-size:clamp(48px, 22vw, 110px); letter-spacing:-.04em}
  .nav__links a{font-size:20px}
}

/* ====================================================
   FIXES MÓVIL ADICIONALES — feedback táctil, anti-overflow
   ==================================================== */

/* Anti-overflow horizontal: nadie supera el viewport */
html, body{max-width:100%; overflow-x:hidden}

/* Logo grande del footer: que no rompa por overflow horizontal */
.footer__big{overflow:hidden; text-overflow:clip; white-space:nowrap}

/* Touch / coarse pointer: feedback al tocar las cards */
@media (hover:none), (pointer:coarse){
  /* Cards se "presionan" levemente al tocar */
  .brand:active{transform:translateY(-2px); border-color:var(--teal)}
  .case:active{padding-left:14px}
  .person:active .person__avatar{background:var(--teal); color:#fff}
  .logo-cell:active{background:#fff; color:#000}

  /* Botones con escala leve */
  .btn:active, .nav__cta:active, .careers__link:active{transform:scale(.98)}

  /* Reducimos animaciones intensas en móvil para mejorar perf */
  .marquee__track{animation-duration:42s}
  .vis-grid--logo i{animation-duration:7s}
  .target-arrow{animation-duration:5s}
  .trophy{animation-duration:5s}

}

/* ====================================================
   Logo 3D del hero — animación automática en móvil
   Triggerea por: touch device, pointer coarse, O ancho <=880px
   En desktop (con mouse), el JS sobrescribe la transform inline
   y la animación CSS queda anulada (sin efecto visible).
   ==================================================== */
@media (hover:none), (pointer:coarse), (max-width:880px){
  .hero__3d .logo3d{
    animation:heroLogoFloat 9s ease-in-out infinite;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
    transform-origin:center center;
  }
  /* Cuando el dedo está tocando, JS añade esta clase y para la animación */
  .hero__3d.is-touching .logo3d{
    animation-play-state:paused;
    transition:none;
  }
}

/* Recorrido orgánico tipo "tour de cursor" por las 4 esquinas */
@keyframes heroLogoFloat{
  0%, 100% { transform:perspective(1100px) rotateY(-22deg) rotateX(8deg) }
  12.5%    { transform:perspective(1100px) rotateY(-2deg)  rotateX(-15deg) }
  25%      { transform:perspective(1100px) rotateY(22deg)  rotateX(-8deg) }
  37.5%    { transform:perspective(1100px) rotateY(28deg)  rotateX(4deg) }
  50%      { transform:perspective(1100px) rotateY(18deg)  rotateX(14deg) }
  62.5%    { transform:perspective(1100px) rotateY(-2deg)  rotateX(18deg) }
  75%      { transform:perspective(1100px) rotateY(-18deg) rotateX(14deg) }
  87.5%    { transform:perspective(1100px) rotateY(-28deg) rotateX(4deg) }
}

/* Asegura que el menú móvil de navegación queda por encima de TODO al abrirse */
.nav__links.is-open{z-index:120}

/* Mejor break del título Servicios Deportivos */
.brand__name em{display:inline-block}

/* En tablet/mobile, el inner-hero meta apila más limpio */
@media (max-width: 880px){
  .inner-hero__meta{
    flex-direction:column;
    gap:14px;
  }
  .inner-hero__meta > div{
    flex:1 1 auto;
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid #1a1a1a;
    padding-bottom:12px;
  }
  .inner-hero__meta > div:last-child{border-bottom:0; padding-bottom:0}
  .inner-hero__meta b{text-align:right}
}

/* Section heading respira menos en mobile */
@media (max-width: 880px){
  .section{padding-left:max(20px, var(--pad)); padding-right:max(20px, var(--pad))}
  .section__head{padding-top:22px; margin-bottom:34px}
  .section__head .section__num{margin-bottom:18px}
}

/* Botón hamburguesa más visible en mobile */
@media (max-width: 880px){
  .nav__burger{padding:8px; margin:-8px}
  .nav__burger span{width:26px; height:2px}
}

/* Marquee no debe causar overflow horizontal con la rotación de fonts */
.marquee{max-width:100vw}

/* Mockups mini en cases: en mobile se ocultan los hovers porque no hay cursor */
@media (hover:none), (pointer:coarse){
  .case__hover{display:none}
}