@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("assets/fonts/Figtree-ExtraBoldItalic.ttf") format("truetype");font-weight:800;font-style:italic;font-display:swap}

:root{
  --gap: 1rem;
  --card: 124px;                 /* achicamos un poquito las cajas (antes 130px) */
  --r: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);

  --violeta:#695EA6;
  --indigo:#52459B;
  --amarillo:#F0D51A;
  --negro:#111;
  --gris:#6b7280;
  --gris-claro:#f3f4f6;

  --maxw:1100px;

  --edge-fade: 56px;
  --fade-bg: #faf7ff;

  --header-h: 70px;

  /* cuánto “sube” cada tarjeta al hover y margen de seguridad vertical */
  --logo-lift: 6px;
  --logo-safe-extra: 10px;       /* aire adicional arriba/abajo para que no corte */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;font-weight:300;color:var(--negro);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,.sub,li,label,input,textarea{font-weight:500}
h1,h2,h3,.brand,.btn,.type{font-weight:800}
em,i{font-style:italic}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header + menú */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000;isolation:isolate}
.nav{display:flex;align-items:center;gap:24px;height:var(--header-h);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--violeta),var(--indigo));display:grid;place-items:center;color:#fff}
.brand img.brand-logo{height:28px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:22px;margin-left:auto}
.btn{padding:10px 16px;border-radius:999px;background:var(--amarillo);border:1px solid #000;box-shadow:none}

/* Hamburguesa (mobile) */
.hamburger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;margin-left:auto;position:relative;z-index:3}
.hamburger .line,.hamburger::before,.hamburger::after{content:"";display:block;width:24px;height:2px;background:#111;border-radius:2px;margin:0 auto;transition:transform .2s ease,opacity .2s ease}
.hamburger::before{position:absolute;top:14px;left:10px}
.hamburger .line{position:absolute;top:21px;left:10px}
.hamburger::after{position:absolute;top:28px;left:10px}
.hamburger.is-open .line{opacity:0}
.hamburger.is-open::before{transform:translateY(7px) rotate(45deg)}
.hamburger.is-open::after{transform:translateY(-7px) rotate(-45deg)}

/* Banner */
.banner{background:radial-gradient(900px 400px at 80% -20%, rgba(82,69,155,.15), transparent),linear-gradient(180deg,#fff,#faf7ff)}
.banner-wrap{display:grid;place-items:center;height:42vh;min-height:280px;transition:height .6s ease,min-height .6s ease}
.type{font-size:clamp(26px,5vw,56px);line-height:1.05;margin:0;letter-spacing:.2px}
.cursor{display:inline-block;width:1ch;animation:blink 1s steps(1,start) infinite;opacity:1}
@keyframes blink{50%{opacity:0}}
.banner.compressed .banner-wrap{height:21vh;min-height:140px}
.sweep-char{animation:violet-sweep .9s ease forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes violet-sweep{0%{color:inherit}50%{color:var(--violeta)}100%{color:inherit}}
.cursor.blink-once{animation:blink-once .8s steps(1,start) 1}
@keyframes blink-once{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Banner más bajo en mobile */
@media (max-width: 900px){
  .banner-wrap{ height: 28vh; min-height: 150px; }
  .banner.compressed .banner-wrap{ height: 15vh; min-height: 96px; }
  .type{ font-size: clamp(20px, 6.2vw, 38px); }
}

/* Secciones */
section{padding:56px 0}
h2{font-size:clamp(26px,3vw,36px);margin:0 0 16px}
.sub{color:#444;margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Iconos servicios: giro 360° */
.icon-wrap{display:flex;justify-content:center;align-items:center;margin-bottom:12px;width:100%;color:var(--violeta);perspective:800px}
.service-icon{width:48px;height:48px;display:block;stroke:currentColor;fill:none;margin:0 auto;transform-style:preserve-3d}
.card h3{margin:0 0 8px;text-align:center}
.card p{text-align:center}
@keyframes spinY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.card:hover .service-icon,
.card:focus-within .service-icon{animation:spinY .7s cubic-bezier(.22,.61,.36,1)}
.service-icon.spin{animation:spinY .7s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: reduce){
  .service-icon{animation:none !important;transform:none !important}
}

/* Logo wall */
.logo-wall{padding:2rem 0;background:linear-gradient(180deg,#ffffff 0%,#faf7ff 100%)}
.logo-wall .container{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.spacer{display:block;height:12px}

/* Tarjetas de logo */
.logos{list-style:none;margin:0;padding:0}
.logos li{
  display:grid;place-items:center;
  background:var(--violeta);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  border:1px solid transparent;
  aspect-ratio:3/2;
  padding:.5rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.logos li:hover{
  transform: translateY(calc(var(--logo-lift) * -1)); /* usa la variable de lift */
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  background:var(--amarillo);
  border-color:#000;
}
.logos img{max-width:100%;max-height:80%;object-fit:contain;image-rendering:-webkit-optimize-contrast}

/* Carrusel (ancho container) + fade en bordes + zona segura vertical */
.logos-marquee{
  position:relative;overflow:hidden;
  padding-block: calc(var(--logo-lift) + var(--logo-safe-extra)); /* evita corte superior/inferior */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%);
}
.logos-marquee::before,.logos-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--edge-fade);pointer-events:none;z-index:2
}
.logos-marquee::before{left:0;background:linear-gradient(to right,var(--fade-bg),rgba(250,247,255,0))}
.logos-marquee::after{right:0;background:linear-gradient(to left,var(--fade-bg),rgba(250,247,255,0))}
.logos--track{display:flex !important;flex-wrap:nowrap;gap:var(--gap);align-items:center;width:max-content;animation:logos-loop var(--duration,40s) linear infinite}
.logos--track li{flex:0 0 auto;width:var(--card)}
@keyframes logos-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos-marquee:hover .logos--track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.logos--track{animation:none}}

/* Contacto */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
form{display:grid;gap:12px}
input,textarea{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font:inherit}
textarea{min-height:120px;resize:vertical}
.submit{background:var(--violeta);color:#fff;border:none;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:800;transition:background-color .2s ease,transform .05s ease,box-shadow .05s ease}
.submit:hover{background:#25D366}
.submit:active{transform:translateY(1px);box-shadow:0 2px 0 #000}
.submit:focus-visible{outline:2px solid #25D366;outline-offset:2px}
.qrbox{border:1px dashed #cbd5e1;border-radius:12px;padding:16px;display:grid;place-items:center;background:#fff}
.qrbox a{font-weight:700;color:#111;text-align:center}

/* Mobile */
@media (max-width:900px){
  .hamburger{display:inline-block}
  /* Panel del menú: absoluto bajo el header, ancho del contenido */
  .menu{
    position:absolute; left:0; right:0; top:var(--header-h);
    background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12);
    display:flex; flex-direction:column; gap:12px; padding:16px;
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:1;
  }
  .menu a{padding:10px 0}
  .menu.menu--open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .18s ease, transform .18s ease}
  .menu.menu--open .btn{box-shadow:0 3px 0 #000;border:2px solid #000}

  /* Scrim global: no tapa el header */
  .nav-scrim{
    position:fixed; inset:var(--header-h) 0 0 0; background:rgba(0,0,0,.25);
    opacity:0; visibility:hidden; transition:opacity .18s ease, visibility 0s linear .18s; z-index:900;
  }
  .nav-scrim.is-open{opacity:1;visibility:visible;transition:opacity .18s ease}

  body.no-scroll{overflow:hidden}

  .grid-3{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .brand img.brand-logo{height:26px}
}
@media (prefers-reduced-motion: reduce){
  .hamburger .line,.hamburger::before,.hamburger::after{transition:none}
  @media (max-width:900px){.menu{transition:none}.nav-scrim{transition:none}}
}