/* ================= AmachAI — Tema optimizado (unificado) ================= */
:root{
  color-scheme: light;

  /* Layout */
  --wrap:max(min(1200px, 92vw), 320px);
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
  --easing:cubic-bezier(.22,.61,.36,1);

  /* Tipografía */
  --font-ui:'Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-head:'Manrope','Plus Jakarta Sans','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --size-0: clamp(.9rem, .86rem + .12vw, .96rem);
  --size-1: clamp(1rem, .96rem + .22vw, 1.08rem);
  --size-2: clamp(1.14rem, 1.02rem + .50vw, 1.32rem);
  --size-3: clamp(1.5rem, 1.2rem + 1.28vw, 2.08rem);
  --size-4: clamp(2.2rem, 1.7rem + 2.3vw, 3.2rem);

  /* Colores */
  --bg:#f6f8fc; --bg-2:#f0f3f9; --panel:#fff; --card:#fff;
  --ink:#13233c; --ink-2:#566681; --ink-3:#8a96ad; --line:rgba(19,35,60,.12);
  --primary:#2656f0; --accent:#12b0b4;

  /* Gradientes */
  --grad-strong:linear-gradient(135deg,#2656f0 0%,#3e73ff 60%,#12b0b4 100%);
  --grad-soft:linear-gradient(135deg,rgba(38,86,240,.06) 0%,rgba(18,176,180,.06) 100%);

  /* Sombras */
  --shadow-xs:0 1px 2px rgba(15,25,55,.06),0 1px 1px rgba(15,25,55,.04);
  --shadow-sm:0 8px 22px rgba(15,25,55,.10);
  --shadow:0 26px 80px rgba(15,25,55,.14);
}

/* ================= Base ================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font:var(--size-1)/1.62 var(--font-ui); letter-spacing:.1px; color:var(--ink);
  background:
    radial-gradient(880px 560px at -12% -14%, rgba(38,86,240,.04), transparent 60%),
    radial-gradient(780px 520px at 112% -10%, rgba(18,176,180,.04), transparent 60%),
    #f9fbff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","cv09","ss01","ss02","case","tnum","liga";
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
.wrap{ width:var(--wrap); margin-inline:auto; padding-inline:clamp(10px,2vw,16px) }
.center{ text-align:center }
.lead{ color:var(--ink-2); max-width:920px; margin:10px auto 28px; line-height:1.85; font-size:var(--size-1) }
h1,h2,h3,h4{ margin:0 0 .5rem; letter-spacing:.2px; font-family:var(--font-head); color:var(--ink) }
h1{ font-weight:800; font-size:var(--size-4); line-height:1.12 }
h2{ font-weight:800; font-size:var(--size-3) }
h3{ font-weight:700; font-size:var(--size-2) }

/* ================= Header ================= */
.hd{
  position:fixed; inset:0 0 auto 0; height:76px; z-index:1000; display:grid; align-items:center;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px) saturate(1.02);
  transition: background .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing);
}
@supports not (backdrop-filter: blur(10px)){ .hd{ background:var(--panel) } }
.hd.scrolled{ background:var(--panel); box-shadow:0 14px 30px rgba(12,28,70,.08); border-bottom-color: rgba(242,242,245,.16) }
.hd .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px }

.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--ink) }

/* Logo redondo (oculta fondo blanco) */
.brand img,.ft img{
  width:56px; height:56px; object-fit:cover;
  -webkit-mask: radial-gradient(closest-side, #000 99%, transparent 100%); mask: radial-gradient(closest-side, #000 99%, transparent 100%);
  clip-path: circle(50% at 50% 50%); box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* ================= Nav + Mega ================= */
.nav{ display:flex; gap:22px; align-items:center }
.nav-item{ position:relative }
.nav-link{
  background:transparent; border:0; cursor:pointer; font:inherit;
  color:color-mix(in oklab, var(--ink) 82%, var(--ink-3));
  padding:.54rem .76rem; display:inline-flex; align-items:center; gap:.42rem;
  border-radius:10px;
  transition: color .16s var(--easing), background .16s var(--easing);
}
.nav-link:hover,.nav-link:focus-visible{
  color:var(--primary); background:rgba(38,86,240,.10); outline:none; box-shadow:0 0 0 3px rgba(38,86,240,.18)
}
.nav-link .chev{ font-size:.9em; transform:translateY(1px); opacity:.85 }

.has-mega::after{ content:""; position:absolute; left:-12px; right:-12px; top:100%; height:16px }
.mega{ position:fixed; left:0; right:0; top:76px; display:none; opacity:0; pointer-events:none; z-index:999; transition:opacity .14s var(--easing) }
.mega-inner{
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.98)), var(--grad-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow: var(--shadow);
}
.mega-wrap{ width:var(--wrap); margin-inline:auto; padding:22px 0; display:grid; gap:26px; grid-template-columns: repeat(3, minmax(240px, 1fr)) }
.mega h4{ margin:.2rem 0 .6rem; font-weight:800; color:var(--ink) }
.mega-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.mega-list a{
  color:var(--ink-2); padding:.52rem .66rem; border-radius:10px; display:inline-block;
  transition: background .14s var(--easing), transform .14s var(--easing), color .14s var(--easing), box-shadow .14s var(--easing);
}
.mega-list a:hover,.mega-list a:focus-visible{
  color:var(--ink); transform:translateX(2px);
  background:linear-gradient(90deg, rgba(38,86,240,.12), rgba(18,176,180,.1));
  box-shadow: inset 0 0 0 1px rgba(38,86,240,.18); outline:none;
}
.mega-callout{ border-left:1px dashed rgba(38,86,240,.28); padding-left:18px; color:var(--ink-2) }

.btn-sm{
  padding:.58rem 1rem; font-size:.92rem; border:0; border-radius:999px; color:#fff; background:var(--primary); font-weight:800;
  box-shadow:0 12px 28px rgba(38,86,240,.22);
}

@media (hover:hover){
  .has-mega:hover>.mega, .has-mega:focus-within>.mega, .has-mega:has(.mega:hover)>.mega{ display:block; opacity:1; pointer-events:auto }
}

/* ================= CTA (botones base) ================= */
.btn,.btn-primary{
  background:var(--grad-strong); color:#fff; font-weight:800; border:0;
  padding:.84rem 1.12rem; border-radius:12px; box-shadow:0 14px 34px rgba(38,86,240,.22);
  transition:transform .16s var(--easing), box-shadow .16s var(--easing), filter .16s var(--easing);
  font-family:var(--font-head); letter-spacing:.2px;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 22px 52px rgba(38,86,240,.28) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn:disabled{ opacity:.65; cursor:not-allowed; box-shadow:none }

/* Ripple span */
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.6); transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none }
@keyframes ripple{ to{ transform:scale(2.2); opacity:0 } }

/* ================= Burger & móvil ================= */
.burger{ display:none; width:44px; height:44px; border:0; background:transparent; position:relative }
.burger::before,.burger::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px;
  transition: transform .32s var(--easing), top .32s var(--easing), box-shadow .32s var(--easing);
}
.burger::before{ top:14px; box-shadow:0 9px 0 var(--ink) } /* 3 líneas con separación uniforme */
.burger::after{ top:28px }
.menu-open .burger::before{ top:21px; transform:rotate(45deg); box-shadow:none }
.menu-open .burger::after{ top:21px; transform:rotate(-45deg) }

/* Si prefieres icono en imagen dentro del botón */
.burger img{ width:24px; height:24px; display:none; object-fit:contain }
.burger.use-image::before,.burger.use-image::after{ display:none }
.burger.use-image img{ display:block; filter: drop-shadow(0 0 1px rgba(0,0,0,.2)) }

@media (max-width: 900px){
  .burger{ display:block }
  .nav{
    position:fixed; top:76px; right:-100%;
    width:min(86vw,420px); height:calc(100vh - 76px);
    background:var(--panel); border-left:1px solid var(--line);
    display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:12px;
    transition:right .32s var(--easing); box-shadow:-18px 0 44px rgba(12,28,70,.10);
  }
  .menu-open .nav{ right:0 }

  .has-mega::after{ display:none }
  .mega{ position:static; display:none; opacity:1; pointer-events:auto }
  .has-mega[data-open="true"]>.mega{ display:block }
  .mega-inner{ border:1px solid var(--line); border-radius:12px; margin:6px 0; box-shadow:var(--shadow-xs) }
  .mega-wrap{ grid-template-columns:1fr; padding:12px }
}

/* ================= Hero ================= */
.hero{
  position:relative; min-height:calc(100vh + 1px); padding-top:76px;
  display:grid; place-items:center; text-align:center; overflow:hidden; isolation:isolate;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.98) contrast(1.06) saturate(1.04);
  backface-visibility:hidden; transform:translateZ(0); will-change:transform;
}
.hero-overlay{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 700px at 50% 45%, rgba(0,10,25,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,12,26,.06) 0%, rgba(5,12,26,.04) 40%, rgba(5,12,26,.10) 100%);
}
.hero-content{
  position:relative; z-index:1; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.26);
  padding-block:clamp(24px,6vh,64px); transform: translate(var(--tx,0), var(--ty,0));
}
.hero h1{
  font-weight:800; color:#fff; margin:0 0 12px; line-height:1.12; letter-spacing:.3px;
  text-shadow:0 2px 14px rgba(93, 188, 223, 0.881), 0 1px 0 rgba(239, 239, 239, 0.607);
}
.grad{ background:var(--grad-strong); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero p{ max-width:900px; margin:0 auto 22px; color:rgba(255,255,255,.92); line-height:1.86; font-size:var(--size-1) }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px }
.badges{
  list-style:none; display:flex; gap:10px; justify-content:center; padding:0; margin:18px 0 0; flex-wrap:wrap;
}
.badges li{
  display:inline-flex; align-items:center; gap:.5rem; padding:.56rem .96rem; border-radius:999px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.68);
  backdrop-filter: blur(6px); color:#14243d; box-shadow: 0 6px 18px rgba(5,12,26,.15); font-weight:700; letter-spacing:.1px;
}
.hero .btn,.hero .btn-primary{ box-shadow: 0 16px 38px rgba(38,86,240,.30) }

@media (max-width: 720px){
  .hero-media{ filter: brightness(.92) contrast(1.08) saturate(1.08) }
  .hero h1{ font-size: clamp(1.9rem, 4.8vw, 3rem) }
}

/* ================= Sections ================= */
.section{ padding: clamp(60px, 6vw, 100px) 0; background: var(--bg) }
.section.alt{ background: var(--bg-2) }
.section-head{ text-align:center; margin:0 0 22px }
.section-head h2{ display:inline-block; position:relative }
.accent-underline{ background:linear-gradient(90deg, rgba(38,86,240,.18), rgba(18,176,180,.18)); border-radius:6px; padding:0 .25rem }

/* ================= Grids ================= */
.grid{ display:grid; gap:24px }
.grid-5{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.grid-6{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.mt-3{ margin-top:14px }

/* ================= Cards (normales) ================= */
.card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; color:var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s var(--easing), filter .2s var(--easing);
  transform: perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transform-style: preserve-3d;
}
.card:hover{
  transform: translateY(-3px) perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--primary) 18%, var(--line));
  filter: saturate(1.01) contrast(1.01)
}
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.card h3{ margin:1rem 1rem .35rem; font-size:1.05rem; color:var(--ink); font-family:var(--font-head); font-weight:700; letter-spacing:.2px }
.card p{ margin:0 1rem 1.05rem; color:var(--ink-2); line-height:1.72 }

/* ================= Chips ================= */
.chips{ display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center; align-items:center; padding:10px 0 2px }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.62rem 1.08rem; border-radius:999px; font-weight:800; letter-spacing:.1px;
  color:var(--ink); background:#fff; border:1px solid color-mix(in oklab, var(--line), var(--primary) 12%);
  box-shadow: 0 1px 2px rgba(15,25,55,.06), 0 6px 18px rgba(15,25,55,.08);
  transition: transform .14s var(--easing), box-shadow .14s var(--easing), border-color .14s var(--easing), background .14s var(--easing), color .14s var(--easing);
}
.chip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 0 0 2px rgba(38,86,240,.10);
}
.chip:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #f7faff);
  border-color: color-mix(in oklab, var(--primary) 22%, var(--line));
  box-shadow: 0 6px 18px rgba(38,86,240,.10), inset 0 0 0 1px rgba(38,86,240,.05);
  color: color-mix(in oklab, var(--ink) 90%, var(--primary) 10%);
}
.chip:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(15,25,55,.12) }

/* ================= Pilares (optimizado) ================= */
.pillars{ align-items:stretch }
.pillar{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow-xs); text-align:center;
  transition: transform .18s var(--easing), box-shadow .18s var(--easing), border-color .18s var(--easing)
}
.pillar:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color: color-mix(in oklab, var(--primary) 20%, var(--line)) }
.pillar-icon{
  margin:0 auto .7rem; width:110px; height:110px; border-radius:24px; position:relative; overflow:hidden;
  background:radial-gradient(120px 120px at 50% 40%, rgba(38,86,240,.12), transparent 60%), var(--bg-2);
  border:1px solid color-mix(in oklab, var(--line), var(--primary) 10%);
  box-shadow:0 2px 6px rgba(15,25,55,.05),0 16px 36px rgba(15,25,55,.10), inset 0 0 0 1px rgba(255,255,255,.6)
}
.pillar-icon::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%) }
.pillar-icon img{
  width:68px; height:68px; object-fit:contain; margin:auto;
  filter: drop-shadow(0 6px 14px rgba(15,25,55,.18));
  transform: translateZ(0) scale(1);
  transition: transform .25s var(--easing), filter .25s var(--easing)
}
.pillar:hover .pillar-icon img{ transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 10px 22px rgba(38,86,240,.28)) }
@media (prefers-reduced-motion: reduce){ .pillar-icon img{ transition:none } .pillar:hover .pillar-icon img{ transform:none } }

/* ================= Recursos ================= */
.res{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-xs);
  transition: transform .18s var(--easing), box-shadow .18s var(--easing), border-color .18s var(--easing); color:var(--ink)
}
.res:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color: color-mix(in oklab, var(--primary) 18%, var(--line)) }
.res img{ aspect-ratio:16/9; object-fit:cover }
.res h3{ margin:1rem 1rem .3rem; color:var(--ink); font-family:var(--font-head); font-weight:700 }

/* ================= Contacto ================= */
.contact-hero{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.28)); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.contact-form{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:16px;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
  padding: clamp(18px, 2.2vw, 24px);
  border-radius:16px; border:1px solid rgba(12,28,70,.22) !important;
  box-shadow: 0 22px 46px rgba(12,28,70,.14) !important; color:var(--ink);
}
.field{ display:flex; flex-direction:column; gap:8px; grid-column: span 3 }
.field--full{ grid-column: 1 / -1 }
.field label{ font-weight:800; letter-spacing:.1px; font-family:var(--font-head) }
.field label span{ color:#cc3b55 }
.field :is(input,select,textarea){
  width:100%; padding:1rem; border-radius:12px; border:1px solid rgba(12,28,70,.22);
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .16s var(--easing), box-shadow .16s var(--easing), background .16s var(--easing)
}
.field textarea{ min-height:120px; resize:vertical }
.field select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field :is(input,select,textarea):focus-visible{
  box-shadow:0 0 0 3px rgba(38,86,240,.18);
  border-color: color-mix(in oklab, var(--primary) 46%, var(--line));
}
/* Autofill */
input:-webkit-autofill,select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink)
}
/* Validación */
.field :is(input,select,textarea):required:user-invalid{ border-color: color-mix(in oklab, #cc3b55 55%, var(--line)) }
.field :is(input,select,textarea):required:user-valid{ border-color: color-mix(in oklab, var(--primary) 40%, var(--line)) }

.actions{ grid-column: 1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px }
.form-note{ margin:0; color: var(--ink-2) }
.form-status{ grid-column: 1 / -1; min-height:22px; font-weight:800; letter-spacing:.1px; margin-top:2px }
.form-status.ok{ color:#1a8f55 }
.form-status.err{ color:#cc3b55 }

/* ================= Footer ================= */
.ft{ background:var(--panel); border-top:1px solid var(--line); padding:34px 0; color:var(--ink-2) }
.ft-grid{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.ft nav a{ margin-right:14px }
.ft a{ color:color-mix(in oklab, var(--ink) 72%, var(--ink-3)); transition: color .16s var(--easing) }
.ft a:hover{ color:var(--primary) }

/* ================= Utilidades ================= */
.flow > * + *{ margin-top: clamp(.5rem, .3rem + .6vw, 1rem) }
.muted{ color:var(--ink-2) }
.small{ font-size: var(--size-0) }

/* ================= Animaciones ================= */
.reveal{opacity:0; transform:translate3d(0,12px,0) scale(.98); filter:blur(2px)}
.reveal.in{opacity:1; transform:none; filter:none; transition:opacity .6s var(--easing), transform .6s var(--easing), filter .6s var(--easing); transition-delay: calc(var(--i,0) * 90ms) }
.reveal.up{ transform:translate3d(0,18px,0) }
.reveal.right{ transform:translate3d(18px,0,0) }
.reveal.left{ transform:translate3d(-18px,0,0) }
.reveal.scale{ transform:scale(.96) }
.grid > *{ will-change:transform,opacity }

/* Barra de progreso */
.scrollbar{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:1200;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transform-origin:0 50%; transform:scaleX(0); box-shadow:0 2px 6px rgba(38,86,240,.35)
}

/* Parallax sutil */
[data-parallax-y]{ will-change: transform; transition: transform .2s linear }

/* Micro-animaciones */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes softPulse{0%{box-shadow:0 14px 34px rgba(38,86,240,.22)}50%{box-shadow:0 22px 52px rgba(38,86,240,.28)}100%{box-shadow:0 14px 34px rgba(38,86,240,.22)}}
.brand img{ transform:translateZ(0); transition:transform .4s var(--easing), filter .3s var(--easing); will-change:transform }
.brand:hover img{ transform:translateY(-3px) scale(1.02) }
.hero :is(h1,p,.cta-row,.badges){ animation:fadeUp .6s var(--easing) both }
.hero .btn.btn-primary:hover{ animation:softPulse 1.2s var(--easing) both }

/* Focus visible */
:where(a,button,.btn,.nav-link,input,select,textarea):focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(38,86,240,.24), 0 0 0 6px rgba(38,86,240,.10) !important;
  border-color: color-mix(in oklab, var(--primary) 52%, var(--line)) !important;
}

/* ================= Visión & Misión (optimizado) ================= */
.visionmision .mv-grid{ display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:22px; margin-top:18px }
.mv-card{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-xs); transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .18s var(--easing), box-shadow .18s var(--easing); isolation:isolate; background:#757070
}
.mv-card:hover{ box-shadow:var(--shadow) }
.mv-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.78) contrast(1.06) saturate(1.05);
  transform: scale(1.02); transition: transform .6s var(--easing), filter .6s var(--easing); will-change: transform, filter
}
.mv-card:hover .mv-img{ transform: scale(1.06) }
.mv-overlay{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.40) 100%)
}
.mv-content{
  position:relative; z-index:1; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35);
  background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.06));
  backdrop-filter: blur(1.5px);
  border-radius:0 0 16px 16px;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:320px; padding:22px
}
.mv-content h3{ font:800 1.35rem var(--font-head); letter-spacing:.06rem; margin:0 0 .4rem }
.mv-content p{ margin:0; line-height:1.8; color:rgba(255,255,255,.96) }

/* Ajustes de legibilidad */
#vision-mision{ --vm-img-brightness:.90; --vm-overlay-bottom:.24; --vm-overlay-side:.14; --vm-panel-bottom:.18 }
#vision-mision .mv-img{ filter: brightness(var(--vm-img-brightness)) contrast(1.04) saturate(1.03) }
#vision-mision .mv-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--vm-overlay-bottom)) 70%, rgba(0,0,0,calc(var(--vm-overlay-bottom)+.06)) 100%),
    radial-gradient(100% 120% at 0% 50%, rgba(0,0,0,var(--vm-overlay-side)) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 50%, rgba(0,0,0,calc(var(--vm-overlay-side)-.04)) 0%, transparent 55%)
}
#vision-mision .mv-content{
  background: linear-gradient(180deg, rgba(0,0,0,calc(var(--vm-panel-bottom)-.08)) 0%, rgba(0,0,0,var(--vm-panel-bottom)) 70%);
  text-shadow: 0 1px 8px rgba(0,0,0,.35)
}
#vision-mision .mv-content :is(h3,p){ color:#fff }
#vision-mision .mv-content p{ color:rgba(255,255,255,.97) }
@media (max-width: 900px){
  #vision-mision{ --vm-img-brightness:.88; --vm-overlay-bottom:.28; --vm-overlay-side:.18; --vm-panel-bottom:.22 }
}

/* ================= ¿Qué hacemos? — flip a full sin banda blanca ================= */
#plataforma .card.flip{ overflow:hidden; height:clamp(220px,26vw,260px) }
#plataforma .card.flip .card-face{ background:transparent }
#plataforma .card.flip .front{ position:relative; padding:0; display:block; height:100% }
#plataforma .card.flip .front img{
  position:static!important; display:block!important; width:100%!important; height:100%!important;
  min-height:100%; object-fit:cover!important; aspect-ratio:auto!important
}
#plataforma .card.flip .front h3{
  position:absolute; left:12px; bottom:12px; margin:0; padding:.46rem .72rem; font-size:.98rem; line-height:1; font-weight:800; color:#14243d;
  background:rgba(255,255,255,.96); border:1px solid rgba(12,28,70,.12); border-radius:12px; box-shadow:0 8px 18px rgba(12,28,70,.14); backdrop-filter:blur(4px)
}

/* ================= Tarjetas flip (genéricas) ================= */
.card.flip{ position:relative; perspective:1200px; overflow:visible; height: clamp(220px, 36vw, 320px) }
.card.flip .card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s var(--easing) }
.card.flip:hover .card-inner,.card.flip:focus-within .card-inner{ transform: rotateY(180deg) }
.card.flip .card-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius); overflow:hidden;
  display:grid; align-content:start; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-xs)
}
.card.flip .front img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.card.flip .front h3{ margin:1rem 1rem 1.1rem; font-size:1.05rem }
.card.flip .back{ transform:rotateY(180deg); padding:1rem 1rem 1.1rem }
.card.flip .back h3{ margin:0 0 .4rem; font-size:1.05rem }
.card.flip .back p{ margin:0; color:var(--ink-2); line-height:1.7 }
/* Girar por clase adicional */
.card.flip.is-flipped .card-inner{ transform: rotateY(180deg) }

/* ================= HERO CTA — “modelo de entrenamiento” ================= */
/* Base coherente */
.hero .cta-row{ gap:14px; flex-wrap:wrap }
/* Primario azul profesional y minimalista */
.hero .btn-primary{
  position:relative; border-radius:12px; color:#fff; background:linear-gradient(180deg,#2450D4 0%,#1E3FC2 100%);
  border:1px solid rgba(255,255,255,.10); box-shadow:0 8px 18px rgba(0,0,0,.18);
  text-shadow:none; padding-inline:18px;
  transition:transform .16s var(--easing), filter .16s var(--easing), box-shadow .16s var(--easing)
}
.hero .btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.02); box-shadow:0 12px 26px rgba(0,0,0,.22) }
.hero .btn-primary:active{ transform:translateY(0) scale(.995); box-shadow:0 8px 18px rgba(0,0,0,.18) }
.hero .btn-primary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.28),0 0 0 6px rgba(36,80,212,.35),0 16px 38px rgba(0,0,0,.24)
}
.hero .btn-primary::after{ content:none!important }
/* Secundario “Ver demo” con estética ML */
.hero .cta-row a[href$="demo.html"]{
  --hud-bg:rgba(12,18,40,.55); --hud-border-1:rgba(31,162,255,.80); --hud-border-2:rgba(0,212,255,.65);
  --hud-grid:rgba(200,230,255,.08); --hud-text:#e9f3ff;
  position:relative; color:var(--hud-text); border-radius:14px; padding-inline:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg,transparent 0 10px,var(--hud-grid) 10px 11px),
    repeating-linear-gradient(0deg,transparent 0 10px,var(--hud-grid) 10px 11px),
    var(--hud-bg);
  -webkit-backdrop-filter:blur(8px) saturate(1.06); backdrop-filter:blur(8px) saturate(1.06);
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden; text-shadow:0 1px 0 rgba(0,0,0,.32);
  transition:transform .16s var(--easing), box-shadow .16s var(--easing)
}
.hero .cta-row a[href$="demo.html"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg,var(--hud-border-1),var(--hud-border-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(31,162,255,.28))
}
.hero .cta-row a[href$="demo.html"] .hud{
  pointer-events:none; position:absolute; inset:0; opacity:.7;
  background:radial-gradient(200% 140% at 10% -10%, rgba(31,162,255,.18), transparent 60%),
             radial-gradient(180% 120% at 110% 10%, rgba(0,212,255,.16), transparent 60%)
}
.hero .cta-row a[href$="demo.html"] .progress{
  position:absolute; left:10px; right:10px; bottom:8px; height:3px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.08)
}
.hero .cta-row a[href$="demo.html"] .progress::before{
  content:""; position:absolute; inset:0 auto 0 0; width:36%;
  background:linear-gradient(90deg,var(--hud-border-1),var(--hud-border-2));
  animation:demoLoad 4.6s cubic-bezier(.22,.61,.36,1) infinite; box-shadow:0 0 14px rgba(31,162,255,.45)
}
.hero .cta-row a[href$="demo.html"] .play{
  display:inline-block; width:0; height:0; border-left:10px solid var(--hud-text);
  border-top:7px solid transparent; border-bottom:7px solid transparent; margin-right:.4rem;
  filter:drop-shadow(0 0 6px rgba(31,162,255,.5)); transform:translateY(1px); animation:playPulse 2.4s ease-in-out infinite
}
.hero .cta-row a[href$="demo.html"] .label{ font-weight:800; letter-spacing:.2px }
.hero .cta-row a[href$="demo.html"] .tag{
  margin-left:.6rem; font-size:.78em; font-weight:800; color:#0ce6ff;
  background:rgba(12,230,255,.12); border:1px solid rgba(12,230,255,.35);
  padding:.2rem .45rem; border-radius:999px; text-shadow:none
}
.hero .cta-row a[href$="demo.html"]:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 16px 40px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08) }
.hero .cta-row a[href$="demo.html"]:active{ transform:translateY(-1px) scale(.997) }
.hero .cta-row a[href$="demo.html"]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(31,162,255,.5),0 0 0 6px rgba(0,212,255,.35),0 18px 40px rgba(0,0,0,.45)
}

/* Animaciones CTA */
@keyframes demoLoad{ 0%{width:18%} 30%{width:54%} 60%{width:78%} 80%{width:92%} 100%{width:24%} }
@keyframes playPulse{ 0%,100%{ transform:translateY(1px) scale(1) } 50%{ transform:translateY(1px) scale(1.08) } }
@media (prefers-reduced-motion:reduce){
  .hero .cta-row a[href$="demo.html"] :is(.progress::before,.play){ animation:none!important }
}

/* ================= Breakpoints ================= */
@media (max-width: 1100px){ .field{ grid-column: span 3 } }
@media (max-width: 900px){
  .visionmision .mv-grid{ grid-template-columns:1fr }
  .mv-content{ min-height:260px }
}
@media (max-width: 820px){ .grid-3{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) } }
@media (max-width: 780px){
  .contact-form{ grid-template-columns: 1fr }
  .field{ grid-column: 1 / -1 }
}
@media (max-width: 640px){
  :root{
    --wrap:max(min(100vw, 96vw), 320px);
    --radius:12px; --radius-sm:10px; --radius-lg:16px;
    --size-0: clamp(.9rem, .88rem + .2vw, 1rem);
    --size-1: clamp(1rem, .98rem + .4vw, 1.08rem);
    --size-2: clamp(1.05rem, 1rem + .8vw, 1.2rem);
    --size-3: clamp(1.6rem, 1.3rem + 2.4vw, 2rem);
    --size-4: clamp(2rem, 1.6rem + 4vw, 2.6rem);
  }
  body{ line-height:1.55 }
  .wrap{ padding-inline: clamp(14px, 4vw, 18px) }
  .hd{ height:64px }
  .nav{ top:64px; width:100vw; right:-100%; height:calc(100dvh - 64px); padding:14px; gap:8px }
  .nav-link{ padding:.64rem .8rem; font-weight:700 }
  .hero{ min-height: calc(92dvh + 1px); padding-top:64px }
  .hero p{ max-width: 100%; line-height:1.72 }
  .cta-row{ gap:10px }
  .badges{ gap:8px }
  .badges li{ padding:.5rem .8rem; font-weight:700 }
  .section{ padding: clamp(36px, 8vw, 60px) 0 }
  .lead{ margin:8px auto 18px }
  .grid, .grid-5, .grid-6, .grid-3{ grid-template-columns:1fr; gap:16px }
  .card img{ aspect-ratio:16/10 }
  .card.flip{ height: clamp(260px, 56vw, 320px); perspective:1000px }
  .card.flip :is(.front h3,.back h3){ font-size:1rem; margin:.8rem 1rem .7rem }
  .card.flip .back{ padding:.9rem 1rem 1.1rem }
  .card.flip .back p{ line-height:1.6; font-size:.98rem }
  .tilt{ --rx:0deg; --ry:0deg; transform:none!important }
  .pillar{ padding:1rem }
  .pillar .pillar-icon{ width:84px; height:84px; border-radius:18px }
  .contact-form{ gap:12px; padding:16px; border-radius:14px; box-shadow:0 14px 34px rgba(12,28,70,.12) !important }
  .field{ gap:6px }
  .field :is(input,select,textarea){ padding:.9rem }
  .actions{ gap:10px }
  .btn,.btn-primary{ padding:.78rem 1rem; border-radius:10px }
  .ft{ padding:26px 0 }
  .ft-grid{ align-items:flex-start; gap:12px }
  .ft nav a{ display:inline-block; margin-right:10px; margin-top:6px }
}

/* XS tweaks */
@media (max-width: 390px){
  .hero h1{ letter-spacing:.1px }
  .card.flip{ height: clamp(240px, 64vw, 300px) }
  .card.flip .back p{ font-size:.95rem }
  .btn,.btn-primary{ padding:.72rem .94rem }
}

/* Safe-area */
@supports (padding: max(0px)){
  :root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom) }
  .hd{ padding-top: max(0px, var(--safe-top)) }
  .nav{ padding-bottom: max(14px, var(--safe-bottom)) }
  .footer{ padding-bottom: max(26px, var(--safe-bottom)) }
}

/* ================= Resaltado “AI” de marca ================= */
.brand-name{ font-weight:800; letter-spacing:.2px }
.brand-name .ai{
  display:inline-block; position:relative;
  background-image: linear-gradient(90deg,#0d47a1 0%,#1fa2ff 50%,#00d4ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 0 transparent;
}
.brand:hover .ai,.brand-name.glow-brand .ai:hover{ filter: drop-shadow(0 0 8px rgba(31,162,255,.35)) }
.brand-name .ai::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-.12em; height:.18em; border-radius:999px;
  background: linear-gradient(90deg, rgba(31,162,255,0) 0%, rgba(31,162,255,.55) 40%, rgba(0,212,255,.55) 100%);
  transform-origin:left center; transform:scaleX(0); transition:transform .35s var(--easing)
}
.brand:hover .ai::after{ transform:scaleX(1) }

/* Motion-safety */
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

:root{
  --burger-size:44px;        /* área táctil */
  --burger-color:#0b1d33;    /* color de las rayas */
  --burger-ring: rgba(38,86,240,.25);
}

.burger{
  inline-size:var(--burger-size);
  block-size:var(--burger-size);
  display:grid; place-items:center;
  border:0; background:transparent; border-radius:12px;
  color:var(--burger-color); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.burger-icon{ display:block }

/* foco accesible */
.burger:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px var(--burger-ring),
    0 0 0 6px color-mix(in oklab, var(--burger-ring) 60%, transparent);
}

/* (opcional) estado abierto: cambia a “X” nítida */
html.menu-open .burger-icon g line:nth-child(1){
  transform-origin:16px 12px; transform:rotate(45deg) translateY(10px);
}
html.menu-open .burger-icon g line:nth-child(2){ opacity:0 }
html.menu-open .burger-icon g line:nth-child(3){
  transform-origin:16px 12px; transform:rotate(-45deg) translateY(-10px);
}
.burger-icon g line{ transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .16s }

/* ——— RESET del botón antiguo basado en ::before/::after ——— */
.burger{
  background: transparent !important;
  line-height: 0;           /* evita alturas raras */
}

.burger::before,
.burger::after{
  content: none !important; /* quita las 2 barras antiguas */
  box-shadow: none !important;
  background: none !important;
}

/* Asegura que el trazo del SVG no se escale ni se desenfoque */
.burger .burger-icon{
  display: block;
}

.burger .burger-icon *{
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
/* Burger: oculto en desktop */
.burger{
  display: none !important;   /* fuera de flujo y sin enfoque de teclado */
}

/* Solo mostrar en móvil/tablet */
@media (max-width: 900px){
  .burger{
    display: grid !important; /* usa grid para centrar el SVG dentro */
    place-items: center;
  }
}

/* ===== Sectores: separaciones para el chip "Ciudades" ===== */
#sectores .section-head{
  margin-bottom: clamp(12px, 1.6vw, 18px); /* espacio bajo el título */
}

#sectores .chips{
  margin-top: clamp(10px, 1.6vw, 18px);    /* aire por encima del chip */
  margin-bottom: clamp(22px, 2.6vw, 34px); /* aire por debajo del chip */
}

/* Si hay una grid/tarjeta justo después del chip, sepárala un poco más */
#sectores .chips + .grid{
  margin-top: clamp(12px, 2vw, 20px);
}

/* En móvil, un pelín más de separación */
@media (max-width: 640px){
  #sectores .chips{
    margin-top: 14px;
    margin-bottom: 28px;
  }
}

/* Burger SVG limpio y centrado */
.burger .burger-icon *{
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  transform-origin: 16px 16px; /* centro del viewBox 32x32 */
}

/* Estado normal: 3 líneas planas */
.burger .burger-icon g line { 
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .16s;
  transform: none;
  opacity: 1;
}

/* ===== Burger 100% CSS ===== */
:root{ --burger-size:44px; --burger-color:#0b1d33; }

.burger{
  inline-size:var(--burger-size); block-size:var(--burger-size);
  display:grid; place-items:center; border:0; background:transparent;
  border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:0;
}
.burger--css{ position:relative }
.burger--css .bar,
.burger--css::before,
.burger--css::after{
  content:"";
  position:absolute; left:11px; right:11px; height:2.5px; border-radius:2px;
  background:var(--burger-color);
  transition:transform .24s cubic-bezier(.22,.61,.36,1), top .24s cubic-bezier(.22,.61,.36,1), opacity .18s;
}
.burger--css::before{ top:13px }   /* arriba   */
.burger--css .bar   { top:21px }   /* centro   */
.burger--css::after { top:29px }   /* abajo    */

/* al abrir: X centrada */
html.menu-open .burger--css::before{ top:21px; transform:rotate(45deg) }
html.menu-open .burger--css::after { top:21px; transform:rotate(-45deg) }
html.menu-open .burger--css .bar   { opacity:0 }

/* Mostrar sólo en móvil */
.burger{ display:none }
@media (max-width:900px){ .burger{ display:grid } }