/* ============================================================
   OVERRIDES — Correcciones que deben ganar al CSS compilado
   ============================================================
   `_astro/index.*.css` se carga después de styles.css y redefine
   variables de marca (--text-muted, --color-accent). Esta hoja se
   enlaza en último lugar para que las correcciones de contraste
   sobrevivan a esa cascada.

   Referencia: WCAG 2.1 AA — 4.5:1 en texto normal, 3:1 en texto grande.
   ============================================================ */

:root {
    /* 4.44:1 sobre vidrio claro → 5.28:1 */
    --text-muted:   #5b6a7d;
    /* Variantes legibles de los acentos de marca. Los tonos originales
       (--color-accent #0d9488, índigo #6366f1, verde #16a34a) se conservan
       para fondos, bordes y degradados; aquí solo cambia el texto. */
    --accent-text:  #0f766e;   /* 3.58:1 → 5.23:1 */
    --indigo-text:  #4f46e5;   /* 4.27:1 → 6.01:1 */
    --success-text: #15803d;   /* 3.15:1 → 4.79:1 */
}

.form-msg-text,
.mobile-tech-cat-title,
.ao-solar-tag-ai {
    color: var(--accent-text);
}

.ao-solar-tag-infra {
    color: var(--indigo-text);
}

.ao-status-dot-label,
.dashboard-status span,
.ao-terminal-ok {
    color: var(--success-text);
}

/* Texto blanco sobre el degradado de los CTA: el extremo teal daba 3.74:1.
   El botón de WhatsApp queda fuera: conserva su verde de marca. */
.nav-cta-primary.btn-glass,
.hero-actions .btn-glass:first-child {
    background: linear-gradient(135deg, #2563eb, var(--accent-text));
}

/* El CSS compilado fija estos textos a #64748b sin pasar por la variable */
.footer-brand-desc,
.footer-tagline,
.footer-copy,
.footer-contact-item,
.footer-links a {
    color: var(--text-muted);
}

.wa-btn,
.wa-text {
    color: var(--success-text);
}

/* La portada lleva texto propio ("PÁGINAS WEB", "VISIÓN COMPUTACIONAL"…) y al
   usarse de fondo del hero ese texto se leía por detrás del titular. Ahora que
   la imagen tiene su banner, el fondo queda solo como textura desenfocada. */
.ao-hero-portada-bg,
.ao-bg-slogan {
    /* Ambas capas se escalan con `cover`, así que los rótulos de la portada
       quedan enormes: hace falta un desenfoque fuerte para que no se lean.
       .ao-bg-slogan además va fija, así que su texto acompañaba el scroll. */
    filter: blur(26px) saturate(1.25);
    transform: scale(1.12);   /* oculta el borde claro que deja el desenfoque */
}

.ao-hero-portada-bg { opacity: 0.07; }
.ao-bg-slogan       { opacity: 0.05; }

/* "Automatización" no cabía en la columna a 24px fijos y `break-word` la
   partía a mitad de palabra ("Automatizaci / ón"). Con tamaño fluido entra
   en una línea, y si alguna vez no cabe, corta por sílaba con guion. */
.emphasis-pct {
    font-size: clamp(1.05rem, 1.55vw, 1.5rem);
    overflow-wrap: normal;
    hyphens: auto;
    line-height: 1.25;
}

/* Las etiquetas del panel se cortaban a mitad de palabra ("Automatizacione /
   s") por un ancho máximo de 90px. Se les da el espacio que necesitan. */
.activity-bar-name {
    max-width: 128px;
    min-width: 92px;
    overflow-wrap: normal;
    hyphens: auto;
}

/* El tilt 3D interpola su transform por JS en cada frame; la transición
   `transform .1s` del CSS compilado lo frenaba y producía arrastre. */
.ao-card-3d {
    transition: background 0.3s var(--ease-glass), border-color 0.35s ease, box-shadow 0.35s ease;
    will-change: auto;
}

.ao-card-3d:hover {
    will-change: transform;
}

/* ------------------------------------------------------------
   ICONOS DE REDES SOCIALES
   Los PNG de Instagram y TikTok que traía el repo estaban en blanco y
   se veían como cuadros grises. Se sustituyen por los iconos de marca.
   ------------------------------------------------------------ */
.social-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: var(--radius-xs, 10px);
    display: block;
    flex-shrink: 0;
}

.ao-founder-social-link .social-icon-img {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    transition: transform 0.3s var(--ease-glass);
}

.ao-founder-social-link:hover .social-icon-img {
    transform: scale(1.15);
}

/* Facebook sigue viniendo de la fuente Phosphor: se le da su color de
   marca para que no desentone junto a los iconos a todo color. */
.ao-founder-social-link[title*="Facebook"] i {
    color: #1877f2;
}

/* ------------------------------------------------------------
   NAV — Desplegable de "Servicios"
   ------------------------------------------------------------ */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.open .nav-dropdown-toggle {
    color: var(--cyan-primary);
    background: rgba(37, 99, 235, 0.08);
}

.nav-dropdown-caret {
    transition: transform 0.28s var(--ease-glass);
}

.nav-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 120;
    min-width: 216px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 18px 44px -18px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.24s var(--ease-glass), transform 0.24s var(--ease-glass), visibility 0.24s;
}

/* Puente invisible: evita que el menú se cierre al cruzar el hueco con el ratón */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    inset: -10px 0 100% 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-dropdown-menu li { margin: 0; }

.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background 0.22s ease, color 0.22s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    background: rgba(37, 99, 235, 0.10);
    color: var(--cyan-primary);
}

/* Enlace secundario del menú móvil, sangrado bajo "Servicios" */
.nav-mobile-sublink {
    padding-left: 22px !important;
    font-size: 0.92rem;
    opacity: 0.9;
}

.nav-mobile-sublink::before {
    content: '└';
    margin-right: 8px;
    color: var(--cyan-primary);
    opacity: 0.6;
}

/* ============================================================
   RITMO DE ESPACIADO
   Antes convivían valores fijos (100px de sección, 64px de cabecera) con
   escalones bruscos por media query, y separaciones dispares entre rejillas
   (24 / 32 / 48 / 56px). Se unifica todo en una escala fluida sobre una
   base de 8pt: el espacio crece con el viewport en vez de a saltos.
   ============================================================ */
:root {
    --space-2xs: clamp(4px,  0.5vw,  6px);
    --space-xs:  clamp(8px,  1vw,   12px);
    --space-sm:  clamp(12px, 1.5vw, 18px);
    --space-md:  clamp(18px, 2.2vw, 26px);
    --space-lg:  clamp(26px, 3.4vw, 40px);
    --space-xl:  clamp(36px, 5vw,   60px);
    --space-2xl: clamp(56px, 7vw,  100px);
}

/* --- Secciones: mismo aire arriba y abajo en todos los anchos --- */
.section,
.svc-section {
    padding-block: var(--space-2xl);
    padding-inline: var(--gutter);
}

/* #nosotros usaba su propia escala (90-130px / 110-150px) y rompía el ritmo */
#nosotros {
    padding-block: var(--space-2xl);
    padding-inline: var(--gutter);
}

#hero,
.svc-hero {
    /* Deja sitio al nav flotante sin abrir un hueco desproporcionado */
    padding-block: clamp(92px, 11vw, 132px) var(--space-2xl);
    padding-inline: var(--gutter);
}

.ao-portada-banner {
    padding-block: var(--space-sm) var(--space-2xl);
}

/* --- Cabeceras y bloques internos --- */
.section-header {
    margin-bottom: var(--space-xl);
}

.section-header .section-title { margin-bottom: var(--space-sm); }
.section-header .section-badge { margin-bottom: var(--space-sm); }

/* --- Rejillas: dos ritmos, tarjetas y bloques amplios --- */
.services-grid,
.problem-grid,
.stats-grid,
.tech-focus-grid,
.tech-grid,
.about-emphasis-cards,
.dashboard-metrics,
.svc-cards-grid {
    gap: var(--space-md);
}

.casos-split,
.contact-grid,
.footer-grid,
.about-grid {
    gap: var(--space-lg);
}

/* --- Footer --- */
footer {
    padding-block: var(--space-xl) var(--space-lg);
    padding-inline: var(--gutter);
}

.footer-grid { margin-bottom: var(--space-xl); }

/* --- Tarjetas: relleno interior proporcional al resto de la escala --- */
.service-card-glass,
.problem-card,
.casos-card,
.stat-glass,
.emphasis-card,
.contact-form-card,
.dashboard-panel,
.about-visual-card {
    padding: var(--space-md);
}

.ao-founder-card {
    padding: var(--space-lg) var(--space-md);
}

/* Los pasos del proceso comparten el mismo intervalo entre sí */
.process-step:not(:last-child) { margin-bottom: var(--space-md); }
.faq-item:not(:last-child)     { margin-bottom: var(--space-xs); }