/*
 Theme Name:   Nacom Child
 Theme URI:    https://www.nacom.ar
 Description:  Tema hijo personalizado para NACOM basado en Astra
 Author:       NACOM
 Author URI:   https://www.nacom.ar
 Template:     astra
 Version:      1.0.0
 Text Domain:  nacom-child
*/

/* ============= VARIABLES ============= */
:root {
  --rojo-primario:#DC2626;
  --rojo-oscuro:#B91C1C;
  --rojo-claro:#FEE2E2;
  --texto-oscuro:#1F2937;
  --texto-gris:#6B7280;
  --texto-claro:#9CA3AF;
  --fondo-blanco:#FFFFFF;
  --fondo-gris:#F9FAFB;
  --fondo-oscuro:#111827;
  --border-color:#E5E7EB;
  --border-radius:12px;
  --shadow:0 10px 25px -5px rgba(0,0,0,.1);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.25);
}

/* ============= RESETEOS SUAVES (sin romper Gutenberg/Astra) ============= */
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.7; color:var(--texto-oscuro); background:var(--fondo-blanco); }

/* Contenedor utilitario */
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* Titulares */
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.3; }

/* Texto con degradado */
.text-gradient{
  background:linear-gradient(135deg,var(--rojo-primario) 0%,var(--rojo-oscuro) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============= HEADER (si usás tu cabecera custom) ============= */
/* TIP: si usás la cabecera de Astra, estilá .site-header / .main-header-bar */
.header{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
  position:fixed; inset-inline:0; top:0; z-index:1000;
  transition:all .3s ease;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.5rem; color:var(--rojo-primario); }
.logo-icon{ font-size:1.8rem; }
.nav-menu{ display:flex; list-style:none; gap:2rem; align-items:center; margin:0; }
.nav-link{ text-decoration:none; color:var(--texto-oscuro); font-weight:500; position:relative; transition:color .3s; }
.nav-link:hover{ color:var(--rojo-primario); }
.nav-link::after{ content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--rojo-primario); transition:width .3s; }
.nav-link:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:1rem; }
.hamburger{ display:none; flex-direction:column; cursor:pointer; gap:4px; }
.hamburger span{ width:25px; height:3px; background:var(--texto-oscuro); transition:.3s; }

/* ============= BOTONES ============= */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem; border-radius:var(--border-radius); text-decoration:none; font-weight:600; transition:all .3s ease; border:none; cursor:pointer; font-size:.9rem; }
.btn-primary{ background:var(--rojo-primario); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--rojo-oscuro); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-secondary{ background:transparent; color:var(--texto-oscuro); border:2px solid var(--border-color); }
.btn-secondary:hover{ border-color:var(--rojo-primario); color:var(--rojo-primario); transform:translateY(-2px); }
.btn-small{ padding:.5rem 1rem; font-size:.8rem; }
.btn-large{ padding:1rem 2rem; font-size:1.1rem; }
.btn-full{ width:100%; justify-content:center; }

/* ============= HERO ============= */
.hero{ background:linear-gradient(135deg,var(--rojo-primario) 0%,var(--rojo-oscuro) 100%); color:#fff; padding:160px 0 100px; position:relative; overflow:hidden; }
.hero-background{ position:absolute; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>'); }
.hero-content{ text-align:center; max-width:800px; margin:0 auto; position:relative; z-index:2; }
.hero-badge{ display:inline-flex; background:rgba(255,255,255,.1); padding:.5rem 1rem; border-radius:50px; margin-bottom:2rem; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); }
.hero-title{ font-size:3.5rem; margin-bottom:1.5rem; font-weight:700; }
.hero-description{ font-size:1.2rem; margin-bottom:2.5rem; opacity:.9; max-width:600px; margin-inline:auto; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; margin-bottom:4rem; flex-wrap:wrap; }
.hero-stats{ display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; }
.stat{ text-align:center; }
.stat-number{ display:block; font-size:2rem; font-weight:700; margin-bottom:.5rem; }
.stat-label{ font-size:.9rem; opacity:.8; }

/* ============= SECCIONES ============= */
.section-header{ text-align:center; margin-bottom:4rem; }
.section-title{ font-size:2.5rem; margin-bottom:1rem; }
.section-subtitle{ font-size:1.1rem; color:var(--texto-gris); max-width:600px; margin:0 auto; }

/* Servicios */
.services{ padding:100px 0; background:var(--fondo-gris); }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; }
.service-card{ background:var(--fondo-blanco); padding:2.5rem; border-radius:var(--border-radius); box-shadow:var(--shadow); transition:all .3s ease; border:1px solid var(--border-color); text-align:center; }
.service-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.service-icon{ width:80px; height:80px; background:var(--rojo-claro); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--rojo-primario); font-size:2rem; }
.service-card h3{ font-size:1.5rem; margin-bottom:1rem; color:var(--texto-oscuro); }
.service-card p{ color:var(--texto-gris); margin-bottom:1.5rem; }
.service-features{ list-style:none; text-align:left; margin:0; padding:0; }
.service-features li{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; color:var(--texto-gris); }
.service-features i{ color:var(--rojo-primario); font-size:.8rem; }

/* Proyectos */
.projects{ padding:100px 0; }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; }
.project-card{ background:var(--fondo-blanco); border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow); transition:all .3s ease; border:1px solid var(--border-color); }
.project-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.project-image{ height:200px; background:linear-gradient(135deg,var(--rojo-primario) 0%,var(--rojo-oscuro) 100%); display:flex; align-items:center; justify-content:center; }
.project-placeholder{ color:#fff; font-size:3rem; }
.project-content{ padding:1.5rem; }
.project-content h3{ margin-bottom:.5rem; }
.project-content p{ color:var(--texto-gris); margin-bottom:1rem; }
.project-tech{ display:flex; gap:.5rem; flex-wrap:wrap; }
.project-tech span{ background:var(--fondo-gris); padding:.25rem .75rem; border-radius:50px; font-size:.8rem; color:var(--texto-gris); }

/* CTA */
.cta{ padding:80px 0; background:linear-gradient(135deg,var(--rojo-primario) 0%,var(--rojo-oscuro) 100%); color:#fff; text-align:center; }
.cta-content h2{ font-size:2.5rem; margin-bottom:1rem; }
.cta-content p{ font-size:1.1rem; margin-bottom:2rem; opacity:.9; max-width:600px; margin-inline:auto; }

/* Contacto */
.contact{ padding:100px 0; background:var(--fondo-gris); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h2{ font-size:2.5rem; margin-bottom:1rem; }
.contact-info p{ color:var(--texto-gris); margin-bottom:2rem; }
.contact-methods{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-method{ display:flex; align-items:center; gap:1rem; }
.contact-method i{ width:50px; height:50px; background:var(--rojo-primario); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.contact-form{ background:var(--fondo-blanco); padding:2rem; border-radius:var(--border-radius); box-shadow:var(--shadow); }
.form-group{ margin-bottom:1.5rem; }
.form-group input,.form-group select,.form-group textarea{
  width:100%; padding:1rem; border:1px solid var(--border-color); border-radius:var(--border-radius);
  font-size:1rem; transition:all .3s; font-family:inherit;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none; border-color:var(--rojo-primario); box-shadow:0 0 0 3px rgba(220,38,38,.1);
}

/* Footer */
.footer{ background:var(--fondo-oscuro); color:#fff; padding:60px 0 20px; }
.footer-content{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-section h4{ margin-bottom:1rem; color:#fff; }
.footer-section ul{ list-style:none; margin:0; padding:0; }
.footer-section ul li{ margin-bottom:.5rem; }
.footer-section a{ color:var(--texto-claro); text-decoration:none; transition:color .3s; }
.footer-section a:hover{ color:#fff; }
.social-links{ display:flex; gap:1rem; }
.social-links a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,.1); border-radius:50%; transition:all .3s; }
.social-links a:hover{ background:var(--rojo-primario); transform:translateY(-2px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; text-align:center; color:var(--texto-claro); }

/* Enlaces de contacto */
.contact-link{ color:var(--texto-oscuro); text-decoration:none; transition:color .3s; }
.contact-link:hover{ color:var(--rojo-primario); }
.footer-contact p{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; color:var(--texto-claro); }
.footer-address{ margin-top:1rem; font-size:.9rem; color:var(--texto-claro); line-height:1.5; }
.location-info{ margin-top:2rem; padding:1.5rem; background:rgba(220,38,38,.05); border-radius:var(--border-radius); border-left:4px solid var(--rojo-primario); }
.location-info h4{ color:var(--rojo-primario); margin-bottom:.5rem; }

/* Fix: palabra "SOFTWARE" en Hero cuando uses .text-gradient */
.hero-title .text-gradient{
  color:#FFFFFF !important; background:none !important;
  -webkit-text-fill-color:#B8B8B8 !important;
  background-clip:unset !important; -webkit-background-clip:unset !important;
}

/* ============= RESPONSIVE ============= */
@media (max-width:768px){
  .nav-menu{ display:none; }
  .nav-actions{ display:none; }
  .hamburger{ display:flex; }
  .hero-title{ font-size:2.5rem; }
  .hero-stats{ gap:2rem; }
  .services-grid,.projects-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-content{ grid-template-columns:1fr; gap:2rem; }
  .hero-actions{ flex-direction:column; align-items:center; }
  .btn{ width:100%; justify-content:center; }
}

@media (max-width:480px){
  .container{ padding:0 1rem; }
  .hero-title{ font-size:2rem; }
  .section-title{ font-size:2rem; }
}

/* Si el header está fixed, evita que tape el contenido */
/* En tu archivo CSS */
/* Para el footer logo */
.footer-logo {
    max-width: 200px;
    height: auto;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-logo {
        max-width: 160px;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .footer-logo {
        max-width: 140px;
    }
}
/* ===== ESTILOS NOSOTROS - VERSIÓN AUTÉNTICA ===== */
.about {
    padding: 100px 0;
    background: var(--fondo-blanco);
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.about-text h3 {
    color: var(--rojo-primario);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.about-text p {
    color: var(--texto-gris);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* Misión y Visión */
.mission-vision {
    margin-top: 2rem;
}

.mv-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--fondo-gris);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--rojo-primario);
}

.mv-icon {
    font-size: 2rem;
    margin-top: 0.5rem;
}

.mv-item h4 {
    color: var(--texto-oscuro);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.mv-item p {
    margin-bottom: 0;
    color: var(--texto-gris);
}

/* Stats */
.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.stat-card {
    background: var(--fondo-gris);
    padding: 2rem 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border-color);
}

.stat-number {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--rojo-primario);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--texto-gris);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Proyectos Realizados */
.projects-showcase {
    margin: 4rem 0;
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.projects-showcase h3 {
    text-align: center;
    color: var(--texto-oscuro);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.showcase-subtitle {
    text-align: center;
    color: var(--texto-gris);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.project-item {
    background: var(--fondo-blanco);
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
}

.project-item:hover {
    transform: translateY(-5px);
}

.project-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.project-item h4 {
    color: var(--rojo-primario);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.project-item p {
    color: var(--texto-gris);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.project-tag {
    background: var(--rojo-claro);
    color: var(--rojo-primario);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Enfoque de Trabajo */
.work-approach {
    margin: 4rem 0;
}

.work-approach h3 {
    text-align: center;
    color: var(--texto-oscuro);
    font-size: 2rem;
    margin-bottom: 3rem;
}

.approach-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.step-number {
    background: var(--rojo-primario);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h4 {
    color: var(--texto-oscuro);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.step-content p {
    color: var(--texto-gris);
    margin: 0;
    line-height: 1.6;
}

/* CTA Real y Auténtico */
.cta-real {
    background: var(--fondo-gris);
    padding: 4rem 2rem;
    border-radius: var(--border-radius);
    text-align: center;
}

.cta-real h3 {
    color: var(--texto-oscuro);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.cta-real p {
    color: var(--texto-gris);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.cta-note {
    color: var(--texto-gris);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .mv-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .approach-steps {
        grid-template-columns: 1fr;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 1.5rem 1rem;
    }
}