/* =========================================================
   FLOW BRAND HACKERS — sitio
   Sistema: lima #CCFF00 + tinta #0A0A0A + gris #8C8C8C + blanco
   Space Grotesk (UI) · Cormorant Garamond itálica (wordmark)
   Space Mono (numerales y kickers)
   ========================================================= */

:root{
  --lime:#CCFF00;
  --lime-tint:#E4FF66;
  --lime-deep:#A8D400;
  --ink:#0A0A0A;
  --white:#FFFFFF;

  /* Gris de marca — tercer neutro del sistema, junto a lima y tinta.
     Neutro frio, afinado sobre la base de tinta: no compite con el lima. */
  --gray:#8C8C8C;        /* el gris de marca */
  --gray-soft:#EDEDED;   /* superficies y tarjetas */
  --gray-line:#D8D8D8;   /* bordes y divisores */
  --gray-deep:#4E4E4E;   /* texto secundario sobre claro */
  --gray-on-ink:#FFFFFF; /* texto sobre tinta: blanco pleno */

  --n-50:#FAFAFA; --n-100:#F2F2F2; --n-200:#E5E5E5;
  --n-400:#A3A3A3; --n-500:#737373; --n-600:#555555; --n-800:#1F1F1F;

  --text-body:#222222;
  --text-muted:var(--gray-deep);
  --on-ink-muted:var(--gray-on-ink);
  --line:var(--gray-line);
  --line-ink:rgba(255,255,255,.14);

  --sans:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'Space Mono','SF Mono',ui-monospace,monospace;
  --mont:'Montserrat','Helvetica Neue',Arial,sans-serif;

  --tracking-tagline:.34em;
  --tracking-wide:.14em;

  --gut:clamp(20px,4vw,52px);
  --pad-y:clamp(76px,9vw,148px);
  --r-lg:28px;
  --r-md:18px;
  --r-pill:100px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--text-body);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

.container{width:min(1300px,100% - var(--gut)*2);margin-inline:auto}

/* ---------- tipografía de sistema ---------- */
.kicker{
  font-family:var(--mono);font-size:clamp(10px,.85vw,12px);
  text-transform:uppercase;letter-spacing:var(--tracking-tagline);
  color:var(--ink);margin:0;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--lime-deep);margin:0 0 20px;
}
.sec--ink .eyebrow{color:var(--lime)}
.display{
  font-size:clamp(34px,5vw,68px);line-height:1.05;
  letter-spacing:-.025em;font-weight:600;
}
.wordmark{font-family:var(--display);font-style:italic;font-weight:600;letter-spacing:-.01em}

.sec{padding-block:var(--pad-y)}
.sec--ink{background:var(--ink);color:var(--white);border-radius:clamp(24px,3vw,44px)}
.sec--gray{background:var(--gray-soft);border-radius:clamp(24px,3vw,44px)}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:var(--white)}
.sec__head{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,84px);align-items:end;
  margin-bottom:clamp(44px,5vw,76px);
}
.sec__head--solo{grid-template-columns:1fr}
.sec__aside{display:grid;gap:22px}
.sec__lead{color:var(--text-muted);max-width:56ch;font-size:clamp(15px,1.15vw,17px);line-height:1.6}
.sec--ink .sec__lead{color:var(--on-ink-muted)}
.sec__art{width:100%;border-radius:var(--r-lg)}

.closer{
  margin-top:clamp(36px,4vw,60px);
  font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.4vw,32px);line-height:1.3;color:var(--lime);
}
.sec:not(.sec--ink) .closer{color:var(--ink)}
.quote-i{
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px,2.1vw,27px);line-height:1.35;color:var(--ink);
}
.quote-i--center{
  margin-top:clamp(40px,4vw,64px);text-align:center;
  max-width:24ch;margin-inline:auto;
}
.pos{font-size:clamp(18px,1.7vw,23px);line-height:1.4;font-weight:500;color:var(--ink)}
.pos span{background:var(--lime);padding:1px 8px;font-weight:600}
.flex-note{
  margin-top:clamp(32px,4vw,52px);max-width:70ch;
  color:var(--text-muted);font-size:15.5px;line-height:1.65;
}
.sec--ink .flex-note{color:var(--on-ink-muted)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 32px;border-radius:100px;
  font-family:var(--mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
  border:0;cursor:pointer;
  transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease);
}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(204,255,0,.3)}
.btn--ink{background:var(--ink);color:var(--lime)}
.btn--ink:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(10,10,10,.32)}
.btn--xl{padding:20px 44px;font-size:13.5px}
.link{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--lime);border-bottom:1px solid rgba(204,255,0,.4);padding-bottom:3px;
  transition:border-color .25s;
}
.link:hover{border-color:var(--lime)}

/* =========================================================
   BOTÓN DEL HERO — barrido de color
   En reposo, un destello lima recorre el boton de izquierda a derecha.
   Al pasar el cursor, el lima entra como relleno solido desde la izquierda
   y el texto invierte a tinta. El rotulo va en un <span> para quedar por
   encima de las dos capas.
   ========================================================= */
.btn--sweep{position:relative;overflow:hidden;z-index:0;isolation:isolate}
.btn--sweep > span{position:relative;z-index:3;transition:color .35s var(--ease)}

/* relleno que entra al pasar el cursor */
.btn--sweep::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--lime);
  transform:translateX(-101%);
  transition:transform .55s var(--ease);
}
.btn--sweep:hover::before,
.btn--sweep:focus-visible::before{transform:translateX(0)}
.btn--sweep:hover > span,
.btn--sweep:focus-visible > span{color:var(--ink)}

/* Al llenarse de lima el boton se confundiria con el fondo del hero:
   el contorno en tinta le devuelve el borde. Sigue el radio de la pastilla. */
.btn--sweep:hover,
.btn--sweep:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:0;
}

/* destello continuo en reposo */
.btn--sweep::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 30%,
    rgba(204,255,0,.30) 47%,
    rgba(204,255,0,.55) 50%,
    rgba(204,255,0,.30) 53%,
    transparent 70%);
  transform:translateX(-100%);
  animation:destelloBoton 3.4s var(--ease) infinite;
}
.btn--sweep:hover::after{opacity:0;transition:opacity .25s}
/* Variante para el CTA de cierre: lima sobre tinta, colores cruzados */
.btn--sweep--inv::before{background:var(--ink)}
.btn--sweep--inv:hover > span,
.btn--sweep--inv:focus-visible > span{color:var(--lime)}
.btn--sweep--inv:hover,
.btn--sweep--inv:focus-visible{outline-color:var(--lime)}
.btn--sweep--inv::after{
  background:linear-gradient(100deg,
    transparent 30%,
    rgba(255,255,255,.40) 47%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,.40) 53%,
    transparent 70%);
}

@keyframes destelloBoton{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;padding-block:16px;
  transition:background .4s var(--ease),backdrop-filter .4s,padding .4s var(--ease),box-shadow .4s;
}
.hdr.is-stuck{
  background:rgba(10,10,10,.86);backdrop-filter:saturate(150%) blur(14px);
  padding-block:10px;box-shadow:0 1px 0 var(--line-ink);
}
.hdr__in{
  width:min(1300px,100% - var(--gut)*2);margin-inline:auto;
  display:flex;align-items:center;gap:26px;
}
.logo{display:grid;flex:0 0 auto;isolation:isolate}
.logo__img{
  grid-area:1/1;height:clamp(40px,3.6vw,52px);width:auto;
  transition:opacity .4s var(--ease);
}
.logo__img--ko{opacity:0}
.hdr.is-stuck .logo__img--ink{opacity:0}
.hdr.is-stuck .logo__img--ko{opacity:1}

.hdr__nav{margin-left:auto;display:flex;gap:30px;font-size:14.5px;font-weight:500}
.hdr__nav a{position:relative;padding-block:6px;color:var(--ink)}
.hdr.is-stuck .hdr__nav a{color:var(--white)}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lime);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{flex:0 0 auto}
.hdr:not(.is-stuck) .hdr__cta{background:var(--ink);color:var(--lime)}

.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;
  grid-template-columns:1fr;gap:5px;align-content:center;justify-items:center}
.burger span{display:block;width:25px;height:2.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .25s}
.hdr.is-stuck .burger span{background:var(--white)}
.burger.is-open span{background:var(--white)}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* menú overlay */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--white);
  clip-path:circle(0% at 92% 5%);transition:clip-path .8s var(--ease);
  display:grid;place-items:center;pointer-events:none;
}
.menu.is-open{clip-path:circle(150% at 92% 5%);pointer-events:auto}
.menu__in{width:min(1300px,100% - var(--gut)*2);display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.menu__links{display:grid;gap:2px}
.menu__links a{
  font-size:clamp(30px,5.2vw,64px);line-height:1.15;font-weight:600;letter-spacing:-.025em;
  display:flex;align-items:baseline;gap:18px;opacity:.5;
  transition:opacity .3s,transform .5s var(--ease),color .3s;
}
.menu__links a span{font-family:var(--mono);font-size:13px;color:var(--lime);font-weight:400}
.menu__links a:hover{opacity:1;transform:translateX(14px);color:var(--lime)}
.menu__label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--on-ink-muted);margin-bottom:10px}
.menu__mail{display:block;font-size:16px;color:var(--lime);margin-bottom:6px}
.menu__aside > .menu__label:last-of-type{margin-top:30px}
.menu__where{color:var(--on-ink-muted);font-size:15px}

/* =========================================================
   1. HERO — una afirmacion y una accion
   ========================================================= */
.hero{
  position:relative;min-height:100svh;background:var(--lime);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(110px,14vh,168px) 0 clamp(48px,7vh,90px);overflow:hidden;
}
.hero__orb{
  position:absolute;z-index:1;
  left:clamp(12px,3.5vw,80px);
  top:0;bottom:0;margin-block:auto;height:fit-content;
  width:clamp(210px,27vw,420px);
  /* La posicion la lleva JS. Sin eventos de puntero: la bola pasa por encima
     del boton de agendar y no debe robarle el clic. */
  will-change:left,top;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(10,10,10,.32));
  animation:orbDeriva 16s ease-in-out infinite;
  scale:1;
  transition:scale .35s var(--ease),filter .35s var(--ease);
}
/* Al recibir un golpe se ilumina un instante. */
.hero__orb.is-golpe{
  scale:1.07;
  filter:drop-shadow(0 34px 70px rgba(10,10,10,.42))
         drop-shadow(0 0 48px rgba(204,255,0,.55));
}
.hero__orb img{width:100%;height:auto}
@keyframes orbFloat{
  0%,100%{transform:translate3d(-7%,10px,0) rotate(0deg)}
  50%{transform:translate3d(-7%,-16px,0) rotate(4deg)}
}
@keyframes orbFloatBottom{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-14px,0) rotate(5deg)}
}
/* Deriva por el hueco libre: recorrido en X e Y con giro suave. Va en
   transform; el seguimiento del cursor usa translate, asi no se pisan. */
@keyframes orbDeriva{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  20% {transform:translate3d(26px,-30px,0) rotate(4deg)}
  42% {transform:translate3d(10px,-52px,0) rotate(-3deg)}
  63% {transform:translate3d(-20px,-30px,0) rotate(-5deg)}
  82% {transform:translate3d(-8px,-12px,0) rotate(2deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}

.hero__in{
  position:relative;z-index:2;
  width:min(1300px,100% - var(--gut)*2);margin-inline:auto;
  display:grid;gap:clamp(20px,2.8vw,34px);
  justify-items:end;text-align:right;
  padding-left:clamp(0px,23vw,360px);    /* deja libre la columna del orbe */
}
.hero__claim{
  font-family:var(--mont);font-weight:700;
  font-size:clamp(36px,6.6vw,100px);line-height:1.0;letter-spacing:-.035em;
  text-transform:uppercase;
  max-width:13ch;
}
.hero__claim em{display:block;font-style:normal;margin-top:.1em;position:relative;
  transition:min-height .55s var(--ease)}
@media (prefers-reduced-motion:reduce){.hero__claim em{transition:none}}

/* Entrada por palabras: cada una sube desde detras de su propia mascara.
   El padding/margen compensa el recorte de tildes y descendentes. */
.hero__claim .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.09em;margin-bottom:-.09em;
}
.hero__claim .w i{
  display:inline-block;font-style:inherit;
  transform:translateY(115%);
}
.hero__claim.is-split .w i{
  animation:palabraSube .85s var(--ease) both;
  animation-delay:var(--d,0s);
}
@keyframes palabraSube{to{transform:translateY(0)}}

/* terminado el barrido, el recorte ya no hace falta */
.hero__claim.is-done .w{overflow:visible;padding-bottom:0;margin-bottom:0}
.hero__claim.is-done .w i{animation:none;transform:none}

/* el trazo cierra la frase que da el giro */
.hero__claim.is-split em::after{
  content:"";position:absolute;left:0;bottom:-.06em;height:.055em;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  animation:trazoEntra .9s var(--ease) both;
  animation-delay:var(--rule-d,1.2s);
}
@keyframes trazoEntra{to{transform:scaleX(1)}}

/* Relevo de la segunda frase. Va con su propio par de estados porque `is-done`
   ya anulo las animaciones de entrada; estos selectores son mas especificos y
   devuelven el recorte solo mientras dura el cambio. */
.hero__claim.is-done em.va-fuera .w,
.hero__claim.is-done em.va-dentro .w{
  overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em;
}
.hero__claim.is-done em.va-fuera .w i{
  animation:palabraSale .42s var(--ease) both;animation-delay:var(--d,0s);
}
.hero__claim.is-done em.va-dentro .w i{
  animation:palabraEntra .62s var(--ease) both;animation-delay:var(--d,0s);
}
@keyframes palabraSale{from{transform:translateY(0)}to{transform:translateY(-115%)}}
@keyframes palabraEntra{from{transform:translateY(115%)}to{transform:translateY(0)}}
.hero__sub{max-width:42ch;font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:#2b3400}
.hero__cta{display:grid;gap:12px;justify-items:start}

/* =========================================================
   2. GANCHO
   ========================================================= */
.hook{position:relative;background:var(--ink);min-height:min(86svh,760px);display:grid;align-items:center;overflow:hidden}
.hook__img{
  position:absolute;left:0;right:0;top:-15%;
  width:100%;height:130%;object-fit:cover;
  opacity:1;will-change:transform;
}
.hook::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(10,10,10,.42) 0%,
    rgba(10,10,10,.20) 34%,
    rgba(10,10,10,0) 66%,
    rgba(10,10,10,.04) 100%);
}
.hook__in{position:relative;z-index:2;padding-block:clamp(70px,10vw,120px);will-change:transform}
.sintomas{display:grid;gap:15px;margin-top:clamp(26px,3.4vw,44px);max-width:62ch}
.sintomas li{
  position:relative;padding-left:24px;
  color:var(--white);font-size:clamp(15px,1.35vw,18.5px);line-height:1.5;
  text-shadow:0 1px 14px rgba(10,10,10,.85);
}
.sintomas li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--lime);
}
.sintomas b{color:var(--white);font-weight:600}
.hook__h2,.hook__cierre{text-shadow:0 2px 22px rgba(10,10,10,.7)}
.hook__cierre{
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.3vw,30px);color:var(--lime);
}
.hook__h2{
  font-family:var(--mont);font-weight:700;
  color:var(--white);font-size:clamp(36px,7vw,104px);
  line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;
}

/* =========================================================
   3. SERVICIOS  ·  5. CASOS
   ========================================================= */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.srv{
  background:var(--gray-soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,40px);display:grid;gap:10px;align-content:start;
  transition:transform .5s var(--ease),background .3s,border-color .3s;
}
.srv:hover{transform:translateY(-6px);background:var(--lime);border-color:var(--lime)}
/* Iconos de trazo. Los PNG traen el dibujo en el canal alfa y se usan como
   mascara, no como imagen: asi el color sale de `currentColor` y siguen en
   tinta cuando la tarjeta se enciende en lima al pasar el cursor. */
.srv__icono{
  display:block;width:clamp(84px,7.4vw,104px);aspect-ratio:1;
  margin-bottom:18px;color:var(--ink);background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
  transition:transform .6s var(--ease);
}
/* El anillo exterior tiene cortes, asi que el giro se lee como un dial. */
.srv:hover .srv__icono{transform:rotate(-10deg) scale(1.05)}

.srv__icono[data-ico="estrategia"]{--ico:url(img/servicios/estrategia.png)}
.srv__icono[data-ico="marca"]     {--ico:url(img/servicios/marca.png)}
.srv__icono[data-ico="campanas"]  {--ico:url(img/servicios/campanas.png)}
.srv__icono[data-ico="contenido"] {--ico:url(img/servicios/contenido.png)}
.srv__icono[data-ico="web"]       {--ico:url(img/servicios/web.png)}
.srv__icono[data-ico="direccion"] {--ico:url(img/servicios/direccion.png)}

.srv h3{font-size:clamp(19px,1.8vw,24px)}
.srv p{color:var(--text-muted);font-size:15.5px;line-height:1.6}
.srv:hover p{color:#2b3400}
.servicios__nota{
  margin-top:clamp(28px,3.4vw,48px);
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px,2.1vw,27px);line-height:1.35;color:var(--ink);
}

/* =========================================================
   CASOS — tarjeta que se voltea
   La portada (frente) lleva la marca y la promesa; el reverso lleva el
   antes/despues. Se usa `preserve-3d` en un envoltorio interior para no
   pelearse con el transform de la animacion de entrada `[data-r]`.
   El alto lo fija el reverso, que va en flujo; el frente va absoluto encima.
   ========================================================= */
/* Con cuatro casos, 2x2 en vez de 3+1: evita la fila huerfana y da a las
   portadas mucha mas presencia. */
.casos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}

.caso{display:flex;perspective:1800px;border-radius:var(--r-lg)}
.caso:focus{outline:none}
.caso:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.caso__flip{
  position:relative;flex:1;display:flex;min-width:0;
  transform-style:preserve-3d;
  transition:transform .85s var(--ease);
}
.caso:hover  .caso__flip,
.caso:focus-visible .caso__flip,
.caso.is-vuelta .caso__flip{transform:rotateY(180deg)}

.caso__cara{
  border-radius:var(--r-lg);overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* ---- Portada ---- */
.caso__cara--frente{
  position:absolute;inset:0;display:flex;
  background:var(--ink);
}
.caso__portada{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* leve desaturado para que las tres fotos convivan y no compitan con el lima */
  filter:saturate(.86) contrast(1.04);
  transition:transform 1.1s var(--ease);
}
.caso:hover .caso__portada{transform:scale(1.05)}
.caso__frente-in{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,2.4vw,32px);
  /* Dos capas: un velo parejo muy leve que amarra la foto a la paleta, y un
     degradado inferior que sostiene el logotipo y el claim. Son fotos claras,
     asi que el pie pesa mas que en la version anterior sobre negro. */
  background:
    linear-gradient(to top,
      rgba(10,10,10,.95) 0%, rgba(10,10,10,.88) 22%,
      rgba(10,10,10,.55) 42%, rgba(10,10,10,.14) 62%, rgba(10,10,10,0) 80%),
    linear-gradient(to right, rgba(10,10,10,.58), rgba(10,10,10,.16) 55%, rgba(10,10,10,0) 80%),
    linear-gradient(rgba(10,10,10,.26), rgba(10,10,10,.14));
}
.caso__num{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--lime);
}
.caso__frente-pie{display:grid;gap:0;justify-items:start}
.caso__marca{display:block;margin-bottom:16px}
.caso__marca img{display:block;width:auto;height:auto}
.caso[data-caso="beauty"]   .caso__marca img{max-height:84px;max-width:100%}
.caso[data-caso="vitela"]   .caso__marca img{max-width:196px}
.caso[data-caso="nerolupo"] .caso__marca img{max-height:100px;max-width:100%}
.caso[data-caso="maslogistics"] .caso__marca img{max-width:236px}

.caso__claim{
  font-family:var(--display);font-style:italic;
  font-size:clamp(19px,1.75vw,25px);line-height:1.22;color:var(--white);
}
.caso__hint{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--lime);
}
.caso__hint i{font-style:normal;transition:transform .5s var(--ease)}
.caso:hover .caso__hint i{transform:translateX(5px)}

/* ---- Reverso ---- */
.caso__cara--dorso{
  flex:1;transform:rotateY(180deg);
  background:var(--gray-soft);border:1px solid var(--line);
  padding:clamp(22px,2.4vw,32px);
  display:grid;gap:0;align-content:start;
}
.caso h3{font-size:clamp(19px,1.8vw,24px);font-weight:600;margin-bottom:16px}

/* Antes -> Después. El "antes" es una frase corta en gris; el "después" son
   los entregables en etiquetas, que se escanean mucho mas rapido que la misma
   enumeracion en prosa. La flecha lima marca el salto entre los dos estados. */
.caso__lbl{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--gray);margin-bottom:7px;
}
.caso__antes p:not(.caso__lbl){color:var(--text-muted);font-size:14px;line-height:1.45}
.caso__salto{
  display:block;width:2px;height:16px;margin:11px 0 11px 9px;
  background:linear-gradient(var(--gray-line),var(--lime));position:relative;
}
.caso__salto::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  width:9px;height:9px;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:translateX(-50%) rotate(45deg);
}
.caso__despues .caso__lbl{color:var(--ink)}
.caso__chips{display:flex;flex-wrap:wrap;gap:5px}
/* Resultado medible: es la prueba mas fuerte de la pagina, asi que se trata
   como dato y no como una etiqueta mas. */
.caso__resultado{
  display:grid;gap:2px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--gray-line);
}
.caso__cifra{
  font-family:var(--mont);font-weight:700;
  font-size:clamp(26px,2.8vw,38px);line-height:1;letter-spacing:-.03em;color:var(--ink);
}
.caso__cifra i{font-style:normal;color:var(--lime-deep);margin:0 4px}
.caso__unidad{font-size:13.5px;color:var(--text-muted)}

.caso__chips li{
  font-size:12px;line-height:1.15;color:var(--ink);
  background:var(--lime);border-radius:var(--r-pill);padding:5px 10px;
}

/* Cierre de la seccion: el equipo detras de los dos directores. Las
   disciplinas van en etiquetas, con el mismo lenguaje que los chips de Casos,
   porque se escanean mucho mas rapido que dentro de una frase. */
.equipo{
  margin-top:clamp(34px,4vw,58px);
  padding-top:clamp(28px,3.2vw,44px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.4vw,56px);
  align-items:start;
}
.equipo__lead{
  font-family:var(--display);font-style:italic;
  font-size:clamp(23px,2.7vw,36px);line-height:1.2;color:var(--ink);
}
.equipo__cuerpo{display:grid;gap:clamp(16px,1.8vw,22px)}
.equipo__chips{display:flex;flex-wrap:wrap;gap:8px}
.equipo__chips li{
  font-size:14px;line-height:1.15;color:var(--ink);
  background:var(--lime);border-radius:var(--r-pill);padding:9px 16px;
}
/* "y mas" no es una disciplina: se marca como apertura, no como etiqueta. */
.equipo__chips .equipo__mas{
  background:transparent;border:1px dashed var(--gray-line);color:var(--text-muted);
}
.equipo__cierre{max-width:46ch;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--text-muted)}

.nosotros__intro{
  max-width:64ch;font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  color:var(--text-muted);margin-bottom:clamp(34px,4vw,56px);
}

/* =========================================================
   8. MÉTODO
   ========================================================= */
.method__wave{
  width:100%;height:clamp(90px,13vw,190px);object-fit:cover;object-position:center;
  border-radius:var(--r-lg);margin-bottom:clamp(28px,3vw,46px);
}
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.mstep{
  background:var(--gray-soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,40px);display:grid;gap:10px;align-content:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.mstep:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,10,10,.09)}
.mstep__n{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:0;margin-bottom:4px;
}
.mstep h3{font-size:clamp(20px,2vw,27px)}
.mstep p{color:var(--text-muted);font-size:15px;line-height:1.6}
.mstep__out{color:var(--ink)!important;font-weight:600;font-size:14.5px!important;margin-top:4px}

/* =========================================================
   10. FOUNDERS
   ========================================================= */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px)}
.founder{display:grid;gap:26px;align-content:start}
.founder img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:var(--r-lg);filter:grayscale(1) contrast(1.04);
  transition:transform .7s var(--ease);
}
.founder:hover img{transform:translateY(-6px)}
.founder__body{display:grid;gap:12px}
.founder h3{font-size:clamp(23px,2.4vw,33px)}
.founder__role{
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--lime-deep);margin-top:-6px;
}
.founder__body > p:not(.founder__role):not(.founder__sectors){color:var(--text-muted);font-size:15.5px;line-height:1.65}
/* Credenciales: se listan aparte del parrafo para que se escaneen de un
   vistazo, con la misma marca lima que el resto de listas del sitio. */
.founder__list{display:grid;gap:7px;margin-top:2px}
.founder__list li{
  position:relative;padding-left:20px;color:var(--text-body);
  font-size:14.5px;line-height:1.55;
}
.founder__list li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:2px;background:var(--lime-deep);
}
.founder__sectors{
  margin-top:8px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--text-muted);
}
.founder__sectors span{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--ink);display:block;margin-bottom:5px;
}

/* Redes del fundador. Las de Jackelina van sin destino: mismo icono, pero
   como <span> y en gris, para que no aparenten ser clicables. */
.founder__social{display:flex;gap:10px;margin-top:16px}
.founder__social a,
.founder__social span{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.founder__social svg{width:19px;height:19px;display:block}
.founder__social a:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.founder__social--mudo span{color:var(--gray);border-color:var(--gray-line)}

/* =========================================================
   11. CLIENTES
   ========================================================= */
/* cinta infinita: el segundo grupo es una copia para que el bucle no corte */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marqueeSlide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)}
/* Muro de clientes: todos los logotipos van a blanco sobre transparente
   para que lean parejo sobre tinta, pese a venir en colores distintos. */
.marquee__grp .cli{
  display:flex;align-items:center;justify-content:center;
  width:200px;height:200px;padding:14px;
  flex:0 0 200px;box-sizing:border-box;
  border:1px solid var(--gray-line);border-radius:var(--r-lg);
  background:var(--white);
  opacity:1;cursor:default;
  transition:border-color .3s,background .3s,box-shadow .35s var(--ease);
}
.marquee__grp a.cli{text-decoration:none;cursor:pointer}
.marquee__grp a.cli:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.marquee__grp .cli:hover{
  border-color:var(--lime);background:var(--lime);
  box-shadow:0 10px 26px rgba(10,10,10,.10);
}
.marquee__grp .cli img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
}
/* Caja identica para los nueve (200x200), pero cada marca a su tamaño optimo.
   Con un tope unico los cuadrados llenan la caja y parecen enormes, mientras
   los apaisados quedan limitados por ancho y parecen diminutos. Estos topes
   igualan la SUPERFICIE percibida, no el recuadro. */
.marquee__grp .cli[data-logo="beauty"]       img{max-height:64%}
.marquee__grp .cli[data-logo="taiyaki"]      img{max-height:67%}
.marquee__grp .cli[data-logo="nerolupo"]     img{max-height:66%}
.marquee__grp .cli[data-logo="gapsa"]        img{max-height:72%}
.marquee__grp .cli[data-logo="chilian"]      img{max-width:86%}
.marquee__grp .cli[data-logo="moll"]         img{max-width:87%}
.marquee__grp .cli[data-logo="vitela"]       img{max-width:100%}
.marquee__grp .cli[data-logo="urbanobra"]    img{max-width:92%}
.marquee__grp .cli[data-logo="maslogistics"] img{max-width:100%}
/* pendientes de archivo: se mantienen como nombre, con el mismo peso visual */
.marquee__grp .cli--txt{
  font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);text-align:center;
}
.marquee__grp .cli--txt:hover{color:var(--ink)}
@keyframes marqueeSlide{to{transform:translateX(-50%)}}

.clients__meta{display:grid;gap:14px;justify-items:start;margin-top:clamp(38px,4.4vw,64px)}
.badge{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  background:var(--lime);color:var(--ink);padding:10px 20px;border-radius:100px;
}
.sectors{color:var(--on-ink-muted);font-size:15px}

/* =========================================================
   12. CTA / FRICCIÓN
   ========================================================= */
.friccion{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(90svh,820px)}
.friccion__left{
  background:var(--ink);color:var(--white);
  padding:clamp(56px,7vw,110px) clamp(28px,5vw,90px);
  display:grid;align-content:center;gap:clamp(18px,2.2vw,30px);
}
.friccion__left .kicker{color:var(--lime)}
.friccion__h2{
  color:var(--white);font-size:clamp(42px,6.4vw,96px);
  line-height:.98;letter-spacing:-.035em;text-transform:uppercase;font-weight:700;
}
.friccion__copy{color:var(--on-ink-muted);max-width:46ch;font-size:16.5px;line-height:1.65}
.contacts{display:grid;gap:14px;margin-top:clamp(14px,2vw,26px)}
.contacts a{
  display:grid;gap:2px;padding:16px 0;border-top:1px solid rgba(10,10,10,.2);
  transition:padding-left .4s var(--ease);
}
.contacts a:hover{padding-left:10px}
.contacts strong{font-size:16px;color:var(--ink);font-weight:600}
.contacts span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--on-ink-muted)}
.contacts em{font-style:normal;font-size:14px;color:#2b3400;margin-top:2px}

.friccion__right{
  background:var(--lime);
  padding:clamp(56px,7vw,110px) clamp(28px,5vw,90px);
  display:grid;align-content:center;
}
.offer{display:grid;gap:22px;max-width:460px}
.offer h3{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.025em;color:var(--ink)}
.offer ul{display:grid;gap:12px}
.offer li{
  position:relative;padding-left:26px;font-size:16px;color:#1f2800;line-height:1.5;
}
.offer li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:2px;background:var(--ink);
}
.offer .btn{justify-self:start;margin-top:8px}

/* =========================================================
   RUEDA DEL MÉTODO
   Anillo con las 4 etapas; la activa se enciende en lima y su
   descripcion aparece en el centro. Con 4 nodos las posiciones son
   exactas (arriba/derecha/abajo/izquierda), sin trigonometria.
   ========================================================= */
.wheel{
  position:relative;width:min(760px,100%);aspect-ratio:1;margin-inline:auto;
}
.wheel__ring{
  position:absolute;inset:14%;border-radius:50%;border:1px solid var(--gray-line);
}
.wheel__center{
  position:absolute;inset:26%;display:grid;align-content:center;justify-items:center;
  text-align:center;gap:10px;
}
.wheel__kicker{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--ink);
}
.wheel__desc{
  font-size:clamp(17px,1.7vw,23px);line-height:1.45;color:var(--ink);max-width:20ch;font-weight:500;
}

.node{
  position:absolute;display:grid;place-content:center;gap:2px;text-align:center;
  width:clamp(142px,23%,200px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:var(--white);border:0;cursor:pointer;padding:10px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.node:hover{transform:scale(1.05)}
.node.is-active{
  background:var(--lime);color:var(--ink);
  box-shadow:0 0 0 10px rgba(204,255,0,.28);
}
.node:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
/* La orbita gira y el contenido contragira a la misma velocidad, asi que los
   titulos nunca se ponen de cabeza. Se detiene al pasar el cursor: un blanco
   en movimiento es incomodo de leer y de pulsar. */
.wheel__nodes{position:absolute;inset:0;animation:orbita 70s linear infinite}
.node__in{display:grid;gap:2px;justify-items:center;text-align:center;
  animation:contraOrbita 70s linear infinite}
.wheel:hover .wheel__nodes,
.wheel:hover .node__in,
.wheel:focus-within .wheel__nodes,
.wheel:focus-within .node__in{animation-play-state:paused}
@keyframes orbita{to{transform:rotate(360deg)}}
@keyframes contraOrbita{to{transform:rotate(-360deg)}}

.node__n{font-family:var(--mono);font-size:12.5px;opacity:.9;letter-spacing:.06em}
.node__t{font-size:clamp(15px,1.5vw,20px);font-weight:600;line-height:1.18}

.node--1{top:0;left:50%;transform:translateX(-50%)}
.node--2{right:0;top:50%;transform:translateY(-50%)}
.node--3{bottom:0;left:50%;transform:translateX(-50%)}
.node--4{left:0;top:50%;transform:translateY(-50%)}
.node--1:hover{transform:translateX(-50%) scale(1.05)}
.node--3:hover{transform:translateX(-50%) scale(1.05)}
.node--2:hover,.node--4:hover{transform:translateY(-50%) scale(1.05)}

/* Bajo 760px el anillo no cabe: se convierte en lista y el panel baja. */
@media (max-width:760px){
  .wheel{aspect-ratio:auto;display:grid;gap:14px;width:100%}
  .wheel__ring{display:none}
  .wheel__nodes{position:static;display:grid;gap:10px;order:1;animation:none}
  .node__in{animation:none;grid-auto-flow:column;justify-items:start;gap:12px;align-items:center}
  .node,.node--1,.node--2,.node--3,.node--4{
    position:static;transform:none;width:100%;aspect-ratio:auto;
    border-radius:var(--r-pill);
    grid-auto-flow:column;justify-content:start;gap:12px;align-items:center;
    padding:16px 24px;text-align:left;
  }
  .node:hover,.node--1:hover,.node--2:hover,.node--3:hover,.node--4:hover{transform:none}
  .wheel__center{
    position:static;inset:auto;order:2;justify-items:start;text-align:left;
    background:var(--white);border:1px solid var(--gray-line);
    border-radius:var(--r-lg);padding:24px;
  }
  .wheel__desc{max-width:none}
}

/* =========================================================
   PREGUNTAS — chat integrado
   No es una burbuja flotante: es una seccion en tinta, alta en la pagina,
   justo despues de las tres fricciones. El panel va en claro sobre la tinta
   para que sea el objeto que corta el scroll, no un formulario mas.
   ========================================================= */
#preguntas{padding-block:clamp(56px,6.5vw,104px)}
.chatsec{
  display:grid;grid-template-columns:.62fr 1.38fr;
  gap:clamp(26px,3.6vw,60px);align-items:center;
}
.chatsec__intro{display:grid;gap:12px;align-content:center}
.chatsec__copy{
  max-width:26ch;font-size:clamp(15px,1.2vw,17px);line-height:1.5;
  color:var(--gray-on-ink);
}

.chatsec__panel{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;height:clamp(380px,33vw,430px);
  box-shadow:0 24px 64px rgba(0,0,0,.32);
}
.chat__log{
  flex:1;overflow-y:auto;padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth;
}
.chat__msg{
  max-width:82%;padding:13px 17px;border-radius:var(--r-md);
  font-size:15px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;
}
.chat__msg--bot{align-self:flex-start;background:var(--gray-soft);color:var(--text-body)}
.chat__msg--yo{align-self:flex-end;background:var(--lime);color:var(--ink);font-weight:500}
.chat__msg.is-esperando{color:var(--text-muted);opacity:.7}

/* Las sugerencias son el puente desde el FAQ: quien no sabe que preguntar,
   ya tiene por donde empezar. */
.chat__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chat__chips button{
  font:inherit;font-size:13.5px;line-height:1.2;padding:10px 15px;cursor:pointer;
  border-radius:var(--r-pill);border:1px solid var(--gray-line);
  background:transparent;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.chat__chips button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

.chat__form{
  display:flex;gap:10px;padding:16px clamp(18px,2vw,22px) clamp(18px,2vw,22px);
  border-top:1px solid var(--line);
}
.chat__in{
  flex:1;background:var(--n-50);border:1px solid var(--gray-line);
  border-radius:var(--r-md);padding:14px 16px;color:var(--text-body);
  font:inherit;font-size:15px;resize:none;outline:none;max-height:110px;
}
.chat__in::placeholder{color:var(--gray)}
.chat__in:focus{border-color:var(--ink)}
.chat__send{
  border:none;border-radius:var(--r-md);padding:0 22px;cursor:pointer;
  background:var(--ink);color:var(--lime);
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  transition:opacity .3s var(--ease),background .35s var(--ease);
}
.chat__send:hover:not(:disabled){background:var(--lime);color:var(--ink)}
.chat__send:disabled{opacity:.4;cursor:default}

/* Boton que el agente hace aparecer con [AGENDAR]: mismo CTA que el resto
   del sitio, y abre el mismo calendario de Cal.com. */
.chat__agendar{
  align-self:flex-start;margin-top:2px;border:none;cursor:pointer;
  background:var(--lime);color:var(--ink);border-radius:var(--r-pill);
  padding:13px 22px;font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.chat__agendar:hover{background:var(--ink);color:var(--lime)}

@media (prefers-reduced-motion:reduce){.chat__log{scroll-behavior:auto}}

/* =========================================================
   PREGUNTAS FRECUENTES
   Acordeon con <details>: sin JavaScript, accesible de serie, y el texto de
   las respuestas queda en el HTML aunque este plegado — que es justo lo que
   necesitan los buscadores y los modelos de lenguaje para poder citarlo.
   ========================================================= */
.faqs{display:grid;gap:0;max-width:86ch}
.faq{border-top:1px solid var(--gray-line)}
.faq:last-child{border-bottom:1px solid var(--gray-line)}
.faq__p{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(20px,2.2vw,28px) 52px clamp(20px,2.2vw,28px) 0;
  font-size:clamp(17px,1.55vw,21px);line-height:1.35;font-weight:600;color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__p::-webkit-details-marker{display:none}
.faq__p:hover{color:var(--lime-deep)}
/* Signo + que gira a x al abrir */
.faq__p::after{
  content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .45s var(--ease);
}
.faq[open] .faq__p::after{transform:translateY(-50%) rotate(135deg)}
.faq__r{padding:0 52px clamp(22px,2.4vw,30px) 0}
.faq__r p{
  max-width:72ch;font-size:clamp(15px,1.3vw,17.5px);
  line-height:1.65;color:var(--text-muted);
}
@media (prefers-reduced-motion:reduce){.faq__p::after{transition:none}}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:var(--ink);color:var(--white);padding-block:clamp(44px,5vw,68px) 24px}
.ftr__in{display:flex;align-items:center;gap:clamp(16px,3vw,38px);flex-wrap:wrap}
.ftr__logo{height:clamp(34px,3vw,44px);width:auto}
.ftr__meta{color:var(--on-ink-muted);font-size:14.5px}
.ftr__site{color:var(--lime);font-size:14.5px;margin-left:auto}
.ftr__site:hover{text-decoration:underline}
.ftr__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,48px);padding-top:20px;border-top:1px solid var(--line-ink);
  color:var(--on-ink-muted);font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.08em;
}
.ftr__top:hover{color:var(--lime)}
/* =========================================================
   REVEAL
   ========================================================= */
[data-r]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-r].in{opacity:1;transform:none}

/* Desde 1250px la tarjeta fija su proporcion (4/3) en vez de heredar el alto
   del reverso: sin esto, cuanto mas ancha la columna mas baja la tarjeta y la
   portada acaba en una franja. Por debajo de 1250 manda el reverso, porque a
   esos anchos su contenido ya no cabe en 4/3. */
@media (min-width:1250px){
  .casos{align-items:start}
  .caso{aspect-ratio:4/3}
}

/* Sin hover (tactil) el giro lo dispara un toque: lo marca JS con .is-vuelta.
   Se le da alto minimo para que la portada no quede aplastada. */
@media (hover:none){
  .caso{cursor:pointer}
  .caso__flip{min-height:clamp(400px,86vw,460px)}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .hdr__nav{display:none}
  .burger{display:grid}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .chatsec{grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
  .method{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* En movil la esfera va arriba y puede pisar el titular: va en z-index 1 y
     el texto en 2, asi que pasa por detras. */
  .hero__orb{
    top:clamp(120px,17vh,190px);bottom:auto;left:clamp(-78px,-13vw,-34px);right:auto;
    margin-block:0;width:clamp(150px,24vw,215px);opacity:.92;
  }
  .hero__in{padding-left:0}
}
@media (max-width:880px){
  .sec__head{grid-template-columns:1fr;align-items:start}
  .founders{grid-template-columns:1fr}
  .equipo{grid-template-columns:1fr;gap:22px}
  .friccion{grid-template-columns:1fr}
  .menu__in{grid-template-columns:1fr;gap:36px}
}
@media (max-width:620px){
  .hdr__cta{display:none}
  .servicios,.casos,.method{grid-template-columns:1fr}
  .chatsec{grid-template-columns:1fr}
  .hero__orb{top:132px;bottom:auto;left:-56px;right:auto;width:170px;opacity:.95}
  .marquee__grp .cli{width:140px;height:140px;flex-basis:140px;padding:16px}

  .marquee__grp .cli--txt{font-size:16px}
  .ftr__site{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-r]{opacity:1;transform:none}
  /* Sin giro: la portada se retira y el caso queda visible de entrada. */
  .caso__flip,.caso:hover .caso__flip,.caso.is-vuelta .caso__flip{transform:none}
  .caso__cara--dorso{transform:none}
  .caso__cara--frente{position:relative;inset:auto;display:none}
  .caso__portada,.caso:hover .caso__portada{transform:none}

}