/* =============================================
       ATACAMABYTE — DESIGN ENHANCEMENTS
       Override font, shadows, section separation,
       and visual hierarchy without touching the JS.
    ============================================= */

    /* 1. Font override — Outfit replaces Inter */
    :root, :host {
      --font-sans: "Outfit", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    }

    /* 2. Smooth scroll + selection color */
    html { scroll-behavior: smooth; }
    ::selection {
      background: rgba(84,154,168,0.18);
      color: #2f3640;
    }

    /* 3. Global body — subtle grain texture for depth */
    body {
      background-color: #f8fafb;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* 4. Hero section — crisp white with subtle gradient from top */
    #inicio {
      background: linear-gradient(160deg, #ffffff 0%, #f2f8f9 100%) !important;
      position: relative;
    }

    /* 4b. Hero content offset — separa apenas el contenido del header fijo */
    #inicio > .max-w-7xl > .grid {
      padding-top: 0.75rem;
    }

    @media (min-width: 48rem) {
      #inicio > .max-w-7xl > .grid {
        padding-top: 1rem;
      }
    }

    /* 5. Hero title — stronger visual presence */
    #hero-title {
      letter-spacing: -0.03em !important;
      line-height: 1.08 !important;
    }

    /* 6. Metric strip — more defined, richer background */
    #metric-strip {
      background: linear-gradient(135deg, #2f3640 0%, #3a4555 100%) !important;
      border-top: none !important;
      border-bottom: none !important;
      box-shadow: 0 4px 32px rgba(47, 54, 64, 0.18) !important;
    }
    /* Text on dark strip */
    #metric-strip h3,
    #metric-strip p,
    #metric-strip span:not([class*="bg-"]) {
      color: #fff !important;
    }
    /* Icon container: dark pill instead of white */
    #metric-strip .rounded-full,
    #metric-strip .rounded-lg,
    #metric-strip [class*="bg-gray"],
    #metric-strip [class*="bg-\[#f"] {
      background: rgba(255,255,255,0.10) !important;
    }
    /* Icons inside the strip */
    #metric-strip svg {
      color: #87d4e1 !important;
      stroke: #87d4e1 !important;
    }

    /* 7. Trayectoria section — alternate background */
    #trayectoria {
      background: #ffffff !important;
    }

    /* 8. Proyectos section — subtle warm tint */
    #proyectos {
      background: linear-gradient(180deg, #f9fbfc 0%, #f3f7f8 100%) !important;
    }

    /* 9. Project cards — stronger shadows and hover lift */
    #project-4dlogist,
    #project-polaris,
    [id^="project-"] {
      box-shadow: 0 2px 12px rgba(47,54,64,0.07), 0 8px 32px rgba(84,154,168,0.08) !important;
      border: 1px solid rgba(84,154,168,0.12) !important;
      transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    }
    #project-4dlogist:hover,
    #project-polaris:hover,
    [id^="project-"]:hover {
      box-shadow: 0 8px 32px rgba(47,54,64,0.10), 0 20px 60px rgba(84,154,168,0.14) !important;
      transform: translateY(-3px) !important;
    }

    /* 10. Servicios section — clean white */
    #servicios {
      background: #ffffff !important;
    }

    /* 11. Service cards — defined shadows and borders */
    #service-consultoria,
    #service-sitios-web,
    #service-hosting {
      box-shadow: 0 2px 16px rgba(47,54,64,0.06), 0 8px 40px rgba(84,154,168,0.07) !important;
      border: 1px solid rgba(84,154,168,0.10) !important;
      background: #ffffff !important;
      transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
    }
    #service-consultoria:hover,
    #service-sitios-web:hover,
    #service-hosting:hover {
      box-shadow: 0 8px 40px rgba(47,54,64,0.09), 0 24px 64px rgba(84,154,168,0.12) !important;
      border-color: rgba(84,154,168,0.22) !important;
      transform: translateY(-2px) !important;
    }

    /* 12. Consultoría destacada — richer background */
    #consultoria-destacada {
      background: linear-gradient(135deg, #eef6f8 0%, #f4f9fa 100%) !important;
      border-left: 4px solid #549aa8 !important;
    }

    /* 13. Productos section */
    #productos {
      background: linear-gradient(180deg, #f7fbfc 0%, #f0f6f7 100%) !important;
    }

    /* 14. Product cards */
    #product-4dpymex,
    #product-rms {
      box-shadow: 0 2px 16px rgba(47,54,64,0.06), 0 8px 40px rgba(200,159,95,0.07) !important;
      border: 1px solid rgba(200,159,95,0.12) !important;
      transition: box-shadow 0.25s ease, transform 0.25s ease !important;
    }
    #product-4dpymex:hover,
    #product-rms:hover {
      box-shadow: 0 8px 40px rgba(47,54,64,0.09), 0 24px 60px rgba(200,159,95,0.13) !important;
      transform: translateY(-2px) !important;
    }

    /* 15. Contact section — dark, impactful */
    #contacto {
      background: linear-gradient(160deg, #2a3340 0%, #2f3640 100%) !important;
    }
    /* Fix hidden text on dark contact background — exclude the white form card */
    #contacto h2,
    #contacto h3,
    #contact-title {
      color: rgba(255,255,255,0.97) !important;
    }
    #contacto > * p,
    #contacto > * span:not(#contact-form-container span),
    #contacto > * a:not(#contact-form-container a) {
      color: rgba(255,255,255,0.85) !important;
    }
    /* Contact info area (left column) — explicitly target */
    #contact-info-email,
    #contact-info-phone,
    #contact-info-address,
    #contact-info-email *,
    #contact-info-phone *,
    #contact-info-address * {
      color: rgba(255,255,255,0.90) !important;
    }
    /* Contact info cards — only the outermost card wrapper */
    #contact-info-email,
    #contact-info-phone,
    #contact-info-address {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      border-radius: 0.75rem !important;
    }
    /* Remove any inner nested borders */
    #contact-info-email *,
    #contact-info-phone *,
    #contact-info-address * {
      border: none !important;
      background: transparent !important;
    }
    /* Icons in contact left column */
    #contact-info-email svg,
    #contact-info-phone svg,
    #contact-info-address svg {
      color: #87d4e1 !important;
    }
    /* Form card — restore the intended contrast inside the white panel */
    #contact-form-container {
      color: #2f3640 !important;
    }
    #contacto #contact-form-container h3,
    #contacto #contact-form-container input,
    #contacto #contact-form-container textarea {
      color: #2f3640 !important;
    }
    #contacto #contact-form-container p,
    #contacto #contact-form-container label {
      color: #667085 !important;
    }
    #contacto #contact-form-container button,
    #contacto #contact-form-container button * {
      color: #ffffff !important;
    }
    /* Subtitles / small labels in contact left side */
    #contacto .text-\[\#549aa8\] { color: #87d4e1 !important; }
    #contacto .text-\[\#87b9c4\] { color: #9ecdd6 !important; }

    /* 16. Contact form card */
    #contact-form-container {
      box-shadow: 0 8px 48px rgba(47,54,64,0.22) !important;
    }

    /* 17. Section labels/badges — slightly tighter tracking */
    [class*="tracking-widest"],
    [class*="tracking-\[0\.25em\]"],
    [class*="tracking-\[0\.2em\]"] {
      letter-spacing: 0.14em !important;
    }

    /* 18. Navigation — tighter letter-spacing for nav items */
    #main-header nav a {
      letter-spacing: -0.01em;
    }

    /* 19. Footer */
    #main-footer {
      background: #232c38 !important;
      border-top: 1px solid rgba(84,154,168,0.15) !important;
    }
    /* Footer section headings — were dark on dark */
    #main-footer h3,
    #main-footer h4,
    #main-footer [class*="tracking-wider"],
    #main-footer [class*="tracking-widest"],
    #main-footer [class*="uppercase"] {
      color: rgba(255,255,255,0.55) !important;
      letter-spacing: 0.12em !important;
    }
    /* Footer body text and links — more readable */
    #main-footer p,
    #main-footer a,
    #main-footer span:not([class*="bg-"]):not([class*="text-\[\#549"]):not([class*="text-\[\#c89"]) {
      color: rgba(255,255,255,0.80) !important;
    }
    #main-footer a:hover {
      color: #87d4e1 !important;
    }
    /* Footer teal/gold accents — keep them */
    #main-footer .text-\[\#549aa8\] { color: #87d4e1 !important; }
    #main-footer .text-\[\#c89f5f\] { color: #d4aa6a !important; }
    /* Footer icons */
    #main-footer svg { color: #87d4e1 !important; }
    #footer-logo-atacamabyte .footer-logo-mark {
      height: 2rem;
    }
    .founder-photo-mark {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 9999px;
      object-fit: cover;
      object-position: center 22%;
      flex-shrink: 0;
      border: 1px solid rgba(84, 154, 168, 0.14);
    }
    /* Copyright bar */
    #main-footer .border-t {
      border-color: rgba(255,255,255,0.08) !important;
    }

    /* 20. Hero visual board — enhanced card */
    #hero-visual-board {
      box-shadow: 0 8px 48px rgba(84,154,168,0.14), 0 32px 80px rgba(47,54,64,0.10) !important;
      border: 1px solid rgba(84,154,168,0.14) !important;
    }

    /* 21. CTA buttons — sharper definition */
    #hero-cta-proyectos,
    #hero-cta-contacto,
    #header-cta,
    #submit-contact {
      letter-spacing: -0.01em !important;
      font-weight: 600 !important;
    }
    .maintenance-message.is-visible {
      display: block !important;
    }

    /* 22. Scroll-to-top button */
    #btn-scroll-to-top {
      box-shadow: 0 4px 16px rgba(47,54,64,0.15) !important;
    }

    /* 23. Download section — subtle distinction */
    #download-section {
      background: #f5f9fa !important;
      border-top: 1px solid rgba(84,154,168,0.10) !important;
      border-bottom: 1px solid rgba(84,154,168,0.10) !important;
    }

    /* 24. Hide Google AI Studio export block — not part of the site */
    #download-section { display: none !important; }

    /* 25. Founder card quote — italic emphasis */
    #consulting-highlight-text {
      font-style: italic;
      border-left: 3px solid #c89f5f;
      padding-left: 1rem;
    }

    /* 26. Responsive header — mantener menú hamburguesa hasta 1100px.
       El nav de escritorio (6 enlaces + botón "Contactar") no cabe entre
       768px y ~1000px (dejando el CTA fuera de pantalla) y queda muy justo
       hasta ~1040px. Se eleva el cambio a 1100px para que el nav aparezca solo
       con holgura; tablets en horizontal (1024px) conservan el hamburguesa limpio.
       El build de Tailwind está precompilado y solo incluye utilidades md:, por
       eso el ajuste se hace por ID/atributo + !important. */
    @media (max-width: 1099.98px) {
      /* Solo el nav de escritorio (el que trae md:flex), no el nav interno del dropdown */
      #main-header nav[class*="md:flex"] { display: none !important; }
      #mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
    }
    @media (min-width: 1100px) {
      #main-header nav[class*="md:flex"] {
        display: flex !important;
        /* Gap algo más ajustado para que el nav entre holgado */
        gap: 2rem !important;
      }
      #mobile-menu-toggle { display: none !important; }
    }

    /* 26b. Menú móvil (versión HTML estática, sin React).
       Panel desplegable bajo el header; lo abre/cierra main.js con la clase
       .open sobre #mobile-menu. Nunca se muestra ≥1100px (ahí va el nav de
       escritorio). El botón hamburguesa ya se controla en la sección 26. */
    #mobile-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.75rem 1.5rem 1.25rem;
      background: #ffffff;
      border-top: 1px solid #f0f2f5;
      box-shadow: 0 12px 24px -12px rgba(47, 54, 64, 0.18);
    }
    #mobile-menu.open { display: flex; }
    #mobile-menu a {
      font-size: 15px;
      font-weight: 500;
      color: #2f3640;
      padding: 0.7rem 0.25rem;
      border-bottom: 1px solid #f6f9fc;
      transition: color 0.2s ease;
    }
    #mobile-menu a:hover { color: #549aa8; }
    #mobile-menu a#mobile-cta {
      margin-top: 0.5rem;
      border-bottom: none;
      text-align: center;
      color: #ffffff;
      background: #549aa8;
      border-radius: 0.5rem;
      padding: 0.85rem 1rem;
    }
    #mobile-menu a#mobile-cta:hover { background: #3d7581; color: #ffffff; }
    @media (min-width: 1100px) {
      #mobile-menu, #mobile-menu.open { display: none !important; }
    }

    /* 26c. Sombra sutil del header al hacer scroll (la añade main.js). */
    #main-header.is-scrolled {
      box-shadow: 0 4px 20px -8px rgba(47, 54, 64, 0.15);
    }

    /* 26d. Logos PNG de proyectos.
       Ambos archivos tienen aire transparente y, a mismo tamaño CSS, pueden verse
       algo pequeños frente a los SVG originales. Se escala apenas el contenido sin
       cambiar el layout de la tarjeta. */
    .project-logo-mark {
      transform-origin: center;
      transition: transform 0.25s ease;
    }
    .project-logo-mark-4dlogist {
      transform: scale(1.1);
    }
    .project-logo-mark-polaris {
      transform: scale(1.12);
    }

    /* 27. Sección de contacto — evita overflow horizontal entre 1024px y ~1150px.
       La grilla lg:grid-cols-12 con gap-16 (64px) deja poco ancho a las columnas;
       como los items de grid no encogen bajo su contenido, el formulario se salía
       del viewport. Permitimos que encojan y ajustamos el gap en ese rango. */
    #contacto [class*="grid-cols-12"] > * { min-width: 0; }
    @media (min-width: 1024px) and (max-width: 1279.98px) {
      #contacto [class*="grid-cols-12"] { gap: 2.5rem !important; }
    }