/* =========================================================
   FUENTES
========================================================= */
@font-face{
  font-family: 'ED-Primary';
  src: url('../fonts/shree-devanagari-714.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Ejemplo de secundaria propia:
@font-face{
  font-family: 'ED-Secondary';
  src: url('../fonts/tu-secundaria.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ================== VARIABLES GLOBALES ================== */
:root{
  /* 👉 FUENTES a usar */
  --font-primary: 'ED-Primary', Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-secondary: 'ED-Secondary', Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;

  /* 👉 COLORES de texto */
  --color-text: #e7e7e7;
  --color-text-strong: #ffffff;
  --color-text-muted: #c7c7c7;

  /* Tema general */
  --bg:#000; --panel:#0a0a0a; --glass:rgba(255,255,255,.06); --border:rgba(255,255,255,.18); --white:#fff;

  /* ====== AJUSTES RÁPIDOS DEL HÉROE ====== */
  --hero-push-desktop: 32vh;
  --hero-push-mobile:  32vh;

  --hero-shift-x-desktop: -16vw;
  --hero-shift-x-mobile:  0vw;

  /* ⬇️⬇️⬇️ AJUSTES DE TAMAÑOS DEL HÉROE (TÍTULO Y SUBTÍTULO) ⬇️⬇️⬇️
     Cambia SOLO estos tres si quieres más grande/pequeño */
  --hero-title-size: clamp(62px, 10vw, 98px);     /* Desktop: “HACEMOS / QUE FUNCIONE” */
  --hero-title-size-m: clamp(30px, 10vw, 58px);  /* Móvil:   “HACEMOS / QUE FUNCIONE” */
  --hero-sub-size: clamp(19px, 2.5vw, 25px);     /* “Tecnología funcional” */
  /* ⬆️⬆️⬆️ FIN AJUSTES DE TAMAÑOS DEL HÉROE ⬆️⬆️⬆️ */

  /* 🔧 AJUSTES DE TAMAÑO DEL LOGO (HEADER) */
  --logo-size: 48px;     /* Desktop */
  --logo-size-m: 26px;   /* Móvil */

  /* 🔧 TOPBAR: altura y acolchado (padding) */
  --bar-height: 74px;    /* ← sube/baja para cambiar la altura de la barra (antes 56px) */
  --bar-pad-x: 24px;     /* ← padding horizontal desktop (más grande = más aire a los lados) */
  --bar-pad-x-m: 16px;   /* ← padding horizontal móvil */

  /* 🎛️ CONTROL PNG DATOS (HÉROE) — tamaño y posición
     — Ajusta “anclado” al fondo y el ancho máximo del PNG */
  --hero-datos-bottom: clamp(60px, 14vh, 200px);     /* Distancia al borde inferior (desktop) */
  --hero-datos-max:    clamp(480px, 38vw, 740px);   /* Ancho máximo del PNG (desktop) */

  /* 📱 CONTROL EN MÓVIL/TABLET (se fuerza con !important más abajo)
     🔴 CAMBIA AQUÍ EL TAMAÑO DEL PNG EN MÓVIL: --hero-datos-max-m */
  --hero-datos-bottom-m: clamp(80px, 18vh, 240px);  /* Distancia al fondo en pantallas pequeñas */
  --hero-datos-max-m:    min(80vw, 490px);         /* ⬅️ TAMAÑO PNG en móvil (ajústalo aquí) */

  /* Accesibilidad (las cambia el widget) */
  --a11y-font-scale:1; --a11y-letter:0; --a11y-line:0; --a11y-saturation:1;
}

/* ================== BASE ================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}

/* 🚫 Quitamos saturación global. El widget aplicará en #app */
html{filter:none}

body{
  font-family: var(--font-secondary);
  font-size: 16px; /* Escala A11y vive en #app */
  background:#000;color:var(--color-text);
}

/* Aplica escala de fuente y saturación SOLO al sitio (#app) */
#app{
  font-size: calc(16px * var(--a11y-font-scale));
  filter: saturate(var(--a11y-saturation));
}

/* ================== TOPBAR ================== */
.glass{
  background:linear-gradient(180deg, rgba(20,20,20,.9), rgba(20,20,20,.65));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)
}

/* 🔧 AQUÍ AJUSTAS ALTURA Y ESPACIO LATERAL DE LA BARRA */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height: var(--bar-height);                 /* ← altura de la barra */
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--bar-pad-x);               /* ← padding lateral desktop (aire) */
  z-index:1000;
}

/* Safe areas + padding en móvil */
@media (max-width:640px){
  .topbar{
    padding-left:  max(var(--bar-pad-x-m), env(safe-area-inset-left));
    padding-right: max(var(--bar-pad-x-m), env(safe-area-inset-right));
  }
}

.topbar .brand{display:flex;align-items:center;gap:10px}

/* 🔧 TAMAÑO DEL LOGO (usa las variables --logo-size y --logo-size-m) */
.topbar .brand img{
  height: var(--logo-size);   /* ← tamaño del logo en desktop */
  width: auto;
  display:block;
  filter:brightness(1.1)
}

/* (Opcional) Mantén el logo con “aire” vertical si subes mucho la barra */
.topbar .brand img{ max-height: calc(var(--bar-height) - 18px); } /* ~9px arriba/abajo */

.toplinks{display:flex;gap:12px}

/* Hamburguesa */
.burger{
  width:38px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;margin-left:auto;
}

html, body{
  max-width: 100%;
  overflow-x: hidden;   /* ⬅️ clave */
}

/* Por si acaso, que nada rompa el ancho */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

.burger span{display:block;width:20px;height:2px;background:#fff;margin:3px 0}

/* ================== OFFCANVAS ================== */
.offcanvas{
  position: fixed;
  top: 0; right: 0;           /* anclado al borde */
  width: 320px; height: 100vh;
  background: #0f0f0f;
  border-left: 1px solid var(--border);
  z-index: 1100;
  transform: translateX(100%); /* ⬅️ fuera de vista sin ensanchar layout */
  transition: transform .25s ease;
}
.offcanvas.show{
  transform: translateX(0);    /* entra suave */
}

.offcanvas .close{position:absolute;top:8px;left:8px;border:0;background:transparent;color:#d1d5db;font-size:22px;cursor:pointer}
.offcanvas-inner{margin-top:48px;display:flex;flex-direction:column;padding:12px}
.offcanvas-inner a{color:#fff;text-decoration:none;padding:12px 10px;border-radius:8px;border:1px solid transparent;font-weight:600}
.offcanvas-inner a:hover{border-color:var(--border);background:rgba(255,255,255,.06)}
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1050}
.offcanvas-backdrop.show{opacity:1;pointer-events:auto}
body.noscroll{overflow:hidden}

/* ================== SECCIONES ================== */
.panel{
  position:relative;min-height:100vh;display:flex;align-items:flex-start;
  border-bottom:1px solid var(--border);
  background:#000 center/contain no-repeat;
}
/* 🧩 Para que los anclajes no queden ocultos bajo la topbar fija */
section[id]{ scroll-margin-top: calc(var(--bar-height) + 10px); }

.content{width:min(1100px,92%);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.content.left{align-items:flex-start;text-align:left}

/* ======= FONDOS (.png) ======= */
.bg-inicio{
  background-image:url("../img/bg-inicio.png");
  background-size:cover;
  background-position:left center;
  image-rendering:auto;
}
.bg-nosotros{background-image:url("../img/bg-nosotros.png")}
.bg-mision{background-image:url("../img/bg-mision.png")}
.bg-servicios{background-image:url("../img/bg-servicios.png")}
.bg-aplicaciones{background-image:url("../img/bg-aplicaciones.png")}
.bg-clientes{background-image:url("../img/bg-clientes.png")}
.bg-contacto{background-image:url("../img/bg-contacto.png")}

/* Overlay general para legibilidad */
.panel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 100%);
}

/* ⭐ AJUSTE: en el HÉROE reducimos el oscurecimiento */
#inicio::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.06) 100%);
}

/* Asegura contenido por encima del overlay */
.panel > .content{position:relative;z-index:1}

/* ================== HÉROE ================== */
#inicio .content.hero{
  padding-top: var(--hero-push-desktop);
  position: relative;
  transform: translateX(var(--hero-shift-x-desktop));
}
@media (max-width:640px){
  #inicio .content.hero{
    padding-top: var(--hero-push-mobile);
    transform: translateX(var(--hero-shift-x-mobile));
  }
}

/* Título grande — “HACEMOS / QUE FUNCIONE”
   Usa las variables: --hero-title-size (desktop) y --hero-title-size-m (móvil) */
.title-xl{
  font-family: var(--font-primary);
  font-size: calc(var(--hero-title-size) * var(--a11y-font-scale, 1));
  line-height: .96;
  color: var(--color-text-strong);
  letter-spacing: .06em;
  font-weight: 400;
  text-transform: uppercase;
}

/* Subtítulo del héroe — “Tecnología funcional”
   Usa la variable --hero-sub-size */
.hero-sub{
  margin-top: 12px;
  font-size: calc(var(--hero-sub-size) * var(--a11y-font-scale, 1));
  letter-spacing: .18em;
  color: rgba(255,255,255,.85);
}

/* ⭐ NUEVO: Imagen de datos del héroe (centrada y pegada abajo) */
/* ⭐ NUEVO: Imagen de datos del héroe (centrada y pegada abajo) */
#inicio{ 
  position: relative; 
  overflow: visible; /* ← asegura que nada se recorte si el PNG es > 100vw */
}

.hero-datos{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--hero-datos-bottom);   /* ← separación fondo (desktop) */
  margin: 0;
  pointer-events: none;
  z-index: 2;

  /* ⬇️ CLAVE: el ancho lo controla el figure, no el <img> */
  width: var(--hero-datos-max);        /* ← ancho real (desktop) */
  max-width: none;                     /* evita límites implícitos */
}

.hero-datos img{
  display: block;
  width: 100%;                         /* ocupa TODO el figure */
  height: auto;
  max-width: none;                     /* sin techo adicional */
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.45));
  opacity: .98;
}


/* Afinado en pantallas pequeñas (antes 940px) */
@media (max-width: 940px){
  .hero-datos{
    bottom: var(--hero-datos-bottom-m) !important; /* separación en móvil/tablet */
    width: var(--hero-datos-max-m) !important;     /* ← TAMAÑO PNG en móvil/tablet */
  }
  .hero-datos img{
    width: 100% !important; /* ocupa el figure */
    max-width: none !important;
  }
}


/* ================== CARDS / VARIOS ================== */
.btn{background:transparent;color:#fff;text-decoration:none;font-weight:700;border:1.5px solid rgba(255,255,255,.8);border-radius:10px;padding:12px 18px;display:inline-block}
.btn:hover{background:rgba(255,255,255,.1)}
.btn-outline{border:1.5px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;border-radius:10px;padding:12px 18px;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-pill{border-radius:999px}
.btn-s{padding:10px 14px;border-radius:10px}

.cards.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px}
.card{padding:18px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.card .big{font-size:28px;color:#fff}
.card .icon{font-size:24px;color:#fff;margin-bottom:6px}
.cards.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.bullets{margin-left:18px}
.bullets li{margin:6px 0;color:#d0d0d0}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.split-media img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.app-logo{height:44px;margin-bottom:8px;filter:brightness(1.2)}
.badge{background:rgba(255,255,255,.12);color:#fff;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px;margin-left:6px}

.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;align-items:center;max-width:1000px}
.logos img{width:100%;max-width:150px;height:auto;justify-self:center;filter:grayscale(100%) opacity(.9);transition:filter .25s,transform .25s}
.logos img:hover{filter:grayscale(0) opacity(1);transform:scale(1.04)}
/* ====== Tamaño más grande solo en la sección #clientes ====== */
#clientes .logos{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
  max-width: 1200px;
}

#clientes .logos img{
  max-width: clamp(180px, 16vw, 260px);
}

@media (max-width:640px){
  #clientes .logos{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
  }
  #clientes .logos img{
    max-width: clamp(140px, 38vw, 200px);
  }
}

.foot-note{margin-top:24px;color:#bdbdbd}

/* ===== Responsive ===== */
@media (max-width:1024px){ .split{grid-template-columns:1fr} }
@media (max-width:640px){
  /* ⬇️ Título del héroe en móvil (usa --hero-title-size-m) */
  .title-xl{ font-size: calc(var(--hero-title-size-m) * var(--a11y-font-scale, 1)); }

  /* 🔧 TAMAÑO DEL LOGO EN MÓVIL (usa --logo-size-m) */
  .topbar .brand img{ height: var(--logo-size-m); }

  .bg-inicio{background-image:url("../img/bg-inicio-m.png")}
  .bg-nosotros{background-image:url("../img/bg-nosotros-m.png")}
  .bg-mision{background-image:url("../img/bg-mision-m.png")}
  .bg-servicios{background-image:url("../img/bg-servicios-m.png")}
  .bg-aplicaciones{background-image:url("../img/bg-aplicaciones-m.png")}
  .bg-clientes{background-image:url("../img/bg-clientes-m.png")}
  .bg-contacto{background-image:url("../img/bg-contacto-m.png")}
}

/* ===== Modal ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);justify-content:center;align-items:center;padding:20px;z-index:1200}
.modal{background:rgba(16,16,16,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;max-width:520px;width:100%;padding:20px;border:1px solid var(--border);position:relative;color:#eee}
.modal h3{margin-bottom:10px;color:#fff}
.modal input,.modal textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;margin:8px 0;background:rgba(255,255,255,.04);color:#e5e5e5}
.modal .cerrar{position:absolute;right:10px;top:8px;cursor:pointer;font-size:18px;color:#cbd5e1;background:transparent;border:0}

/* ===== WhatsApp flotante ===== */
.whatsapp-float{position:fixed;right:42px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:1500;text-decoration:none;font-size:28px}
.whatsapp-float:hover{filter:brightness(.95)}

/* ====== WIDGET ACCESIBILIDAD (estructura/estilo propio) ====== */
#a11y-widget{
  position:fixed;
  right:42px;  /* ← MISMO valor que en .whatsapp-float */
  bottom:88px; /* = bottom(WhatsApp) 20px + altura botón 56px + gap 12px */
  z-index:1600;
}

.a11y-fab{
  width:56px;height:56px;border-radius:50%;border:2px solid #6ee7ff;background:#1a1a1a;color:#6ee7ff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.45);cursor:pointer;transition:transform .15s, filter .15s
}
.a11y-fab:hover{filter:brightness(1.05);transform:translateY(-1px)}
@media (max-width:640px){#a11y-widget{right:12px;bottom:84px}}

.a11y-modal[hidden]{display:none}
.a11y-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1600}
.a11y-card{width:min(360px,92%);background:#121212;border:1px solid var(--border);border-radius:12px;color:#e5e5e5;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.a11y-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.a11y-header h3{font-size:18px}
.a11y-close{border:0;background:transparent;color:#cbd5e1;font-size:20px;cursor:pointer}

.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.a11y-item{display:flex;gap:10px;align-items:center;background:#0f0f0f;border:1px solid var(--border);border-radius:10px;padding:10px}
.a11y-ico{min-width:48px;height:48px;border-radius:10px;background:#1a1a1a;color:#6ee7ff;display:grid;place-items:center;font-weight:800}
.a11y-body{flex:1}
.a11y-label{font-weight:700;margin-bottom:2px}
.a11y-help{font-size:12px;color:#bcbcbc}
.a11y-footer{border-top:1px solid var(--border);padding:12px;text-align:center}
.a11y-reset{border:1.5px solid #6ee7ff;color:#6ee7ff;background:transparent;border-radius:999px;padding:10px 20px;font-weight:800;cursor:pointer}
.a11y-toggle{border-radius:999px;border:1.5px solid #6ee7ff;padding:8px 14px;background:#0b0b0b;color:#6ee7ff;font-weight:800;cursor:pointer}
.a11y-toggle[data-state="on"]{background:#6ee7ff;color:#03222b}

/* Sliders */
#a11y-font,#a11y-spacing,#a11y-sat{width:100%}

/* ====== EFECTOS APLICADOS SOLO EN #app ====== */
#app.a11y-spacing{
  letter-spacing:calc(var(--a11y-letter) * 0.5px);
  word-spacing:calc(var(--a11y-letter) * 1px);
  line-height:calc(1.6 + var(--a11y-line)*0.1);
}
#app.a11y-links a{
  outline:2px solid #6ee7ff; outline-offset:2px;
  background:rgba(110,231,255,.12); text-decoration:underline !important; border-radius:6px
}
#app.a11y-cursor *{
  cursor:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24'>\
<path fill='%236ee7ff' d='M4 3l14 9-6 2-2 6z'/></svg>") 2 2, auto !important;
}
#app.a11y-cursor a,
#app.a11y-cursor button,
#app.a11y-cursor input,
#app.a11y-cursor textarea,
#app.a11y-cursor select,
#app.a11y-cursor [role="button"]{ cursor: inherit !important; }

@supports not (cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>"), auto) {
  #app.a11y-cursor * { cursor: url("../img/cursor-a11y.png") 2 2, auto !important; }
}

#app.a11y-dyslexia{
  font-family:'OpenDyslexic','OpenDyslexic3','Atkinson Hyperlegible', var(--font-secondary) !important;
  -webkit-font-smoothing:antialiased;
}
#app.a11y-dyslexia *{ font-family: inherit !important; }
/* 📱 Alineación FABs en móvil (sobrescribe reglas previas) */
@media (max-width:640px){
  /* 👉 MISMO right para ambos; respeta safe-area en iOS */
  .whatsapp-float{
    right: calc(max(12px, env(safe-area-inset-right)) + 18px);
    bottom: 18px;
  }
  #a11y-widget{
    right: calc(max(12px, env(safe-area-inset-right)) + 18px);
    /* bottom = bottom(WhatsApp) + 56px (alto botón) + 12px (gap) */
    bottom: calc(18px + 56px + 12px);
  }
}
/* 🛠 Ajuste para pantallas intermedias (laptops pequeñas) */
@media (min-width: 641px) and (max-width: 1100px){
  :root{
    /* Título un poquito más contenido en este rango */
    --hero-title-size: clamp(52px, 8.6vw, 90px);

    /* Menos desplazamiento horizontal para que no se corte */
    --hero-shift-x-desktop: -2vw;

    /* Opcional: baja o sube el bloque (título+sub) en este rango */
    --hero-push-desktop: 34vh;
  }

  /* Por si algún navegador no reevalúa la variable en transform */
  #inicio .content.hero{
    transform: translateX(var(--hero-shift-x-desktop));
  }
}

/* Forzar el aviso por encima de splash, FABs, etc. */
#modalPrivacidad.modal-overlay {
  z-index: 4001 !important;
}

#modalPrivacidad .modal {
  opacity: 1;            /* por si algún efecto global de filtros */
  transform: none;       /* neutraliza animaciones ajenas */
}