@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
    font-family: 'Utendo-Semibold';
    src: url('../fonts/Utendo-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



/* Main Content Styles */
.main-content {
    padding-top: 80px;
}

.container {
    max-width: 1150px; /* Reducido de 1200px a 1000px */
    margin: 0 auto;
    padding: 0 20px; /* Reducido de 20px a 15px */
}

/* Hero Section */
.hero {
    padding: 150px 0 120px;
    text-align: center;
    background: linear-gradient(90deg, #e91e63 0%, #8e24aa 35%, #5e35b1 70%, #1e88e5 100%);
}

.hero-title {
    font-size: 5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-description {
    font-size: 1.1rem;
    color: #ffffff;
    max-width: 550px; /* Reducido de 600px a 550px */
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 300;
}

/* Main Navigation */
.main-nav {
    background: white;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 100;
}

.nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 20px 0;
    gap: 60px;
}

.nav-menu a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
}

.nav-menu a:hover {
    color: #2c2c2c;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #2c2c2c;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Section Styles */
.section {
    padding: 100px 0;
}

.section:nth-child(even) {
    background-color: #f8f9fa;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 80px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* Home Content Styles */
.home-intro {
    padding: 40px 0 80px;
}

.home-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.intro-text {
    text-align: center;
    max-width: 700px; /* Reducido de 800px a 700px */
    margin: 0 auto;
}

.intro-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.intro-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px; /* Reducido de 40px a 35px */
    margin-top: 0;
}

.intro-service {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border: none;
    border-radius: 16px;
    transition: all 0.3s ease;
    color: white;
    font-weight: 600;
}

.intro-service:nth-child(1) {
    background: #f5e6d3;
}

.intro-service:nth-child(2) {
    background: #ebe0ff;
}

.intro-service:nth-child(3) {
    background: #d6edf5;
}

.intro-service:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.intro-service .image-placeholder {
    display: none;
}

.intro-service h3 {
    font-family: 'Utendo-Semibold', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
    text-transform: none;
    letter-spacing: 0.5px;
}

.intro-service p {
    font-family: 'Poppins', sans-serif;
    color: #555;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.6;
}

/* Image Placeholder Styles */
.image-placeholder {
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
}

.image-placeholder:hover {
    background-color: #dee2e6;
    color: #495057;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Reducido de 300px a 280px */
    gap: 30px; /* Reducido de 40px a 30px */
}

.service-item {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 0;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-item .image-placeholder {
    width: 100%;
    height: 200px;
    margin-bottom: 30px;
}

.service-item h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-item p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

/* Portfolio Section */
.portfolio-section {
    padding: 100px 0;
    background: #ffffff;
}

.portfolio-section .section-title {
    font-family: 'Utendo-Semibold', sans-serif;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.portfolio-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* Reducido de 15px a 12px */
    margin-bottom: 50px;
}

.portfolio-item-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    aspect-ratio: 1/1;
}

.portfolio-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.portfolio-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item-card:hover .portfolio-image {
    transform: scale(1.05);
}

.portfolio-cta {
    text-align: center;
}

.portfolio-button {
    background: #2c2c2c;
    color: white;
    border: none;
    padding: 18px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px;
    font-family: 'Utendo-Semibold', sans-serif;
    text-decoration: none;
    display: inline-block;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Reducido de 250px a 220px */
    gap: 22px; /* Reducido de 25px a 22px */
}

.portfolio-item {
    background: white;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.portfolio-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.portfolio-item .image-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.portfolio-info {
    padding: 25px;
}

.portfolio-info h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.portfolio-info p {
    color: #666;
    font-size: 0.9rem;
}

/* Work Section */
.work-section {
    padding: 80px 0;
    background: #ffffff;
}

.work-content {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px; /* Reducido de 50px a 40px */
    align-items: center;
}

.work-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.work-img {
    width: 100%;
    max-width: 500px; /* Reducido de 600px a 500px */
    height: 320px; /* Reducido de 380px a 320px */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

.work-title {
    font-family: 'Utendo-Semibold', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.work-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 300;
}

.work-images .image-placeholder.large {
    width: 100%;
    height: 350px; /* Reducido de 400px a 350px */
}

/* About Section */
.about-section {
    padding: 80px 0;
    background: #ffffff;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Reducido de 50px a 40px */
    align-items: center;
}

.about-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-img {
    width: 100%;
    max-width: 500px; /* Reducido de 600px a 500px */
    height: 320px; /* Reducido de 380px a 320px */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

.about-title {
    font-family: 'Utendo-Semibold', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.about-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 300;
}

/* Blog Section */
.blog-section {
    padding: 60px 0 100px;
    background: #f8f9fa;
}

.blog-title {
    font-family: 'Utendo-Semibold', sans-serif;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Reducido de 30px a 25px */
    margin-bottom: 50px;
}

.blog-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.blog-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-item:hover .blog-img {
    transform: scale(1.05);
}

.blog-content {
    padding: 25px;
}

.blog-item-title {
    font-family: 'Utendo-Semibold', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 15px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.blog-excerpt {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

.blog-read-more {
  display: inline-block;
  background-color: #e0e0e0;
  color: #333;
  padding: 8px 22px;
  border-radius: 6px;
  font-size: 0.90rem;
  font-weight: 600;
  text-decoration: none;  /* quita subrayado normal */
  margin-top: 20px;
  transition: all 0.3s ease;
  opacity: 0.85;
}

.blog-read-more:hover {
  background-color: #e0e0e0;
  color: #333;
  opacity: 1;
  text-decoration: none !important; /* 🔥 fuerza que no se subraye */
}

.blog-cta {
    text-align: center;
}

.blog-button {
    background: #2c2c2c;
    color: white;
    border: none;
    padding: 18px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px;
    font-family: 'Utendo-Semibold', sans-serif;
    text-decoration: none;
    display: inline-block;
}

/* Contact CTA Section */
.contact-cta {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    color: white;
    text-align: center;
    padding: 100px 0;
}

.contact-cta h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.contact-cta p {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 650px; /* Reducido de 700px a 650px */
    margin: 0 auto 40px;
    opacity: 0.9;
}

.cta-button {
    background: white;
    color: #2c2c2c;
    border: none;
    padding: 18px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Footer Styles */
.footer {
    background-color: #2c2c2c;
    color: white;
    padding: 80px 0 0;
}

.footer-container {
    max-width: 1000px; /* Reducido de 1200px a 1000px */
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Reducido de 250px a 220px */
    gap: 40px; /* Reducido de 50px a 40px */
    margin-bottom: 50px;
}

.footer-section h3,
.footer-section h4 {
    color: white;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.footer-section h4 {
    font-size: 1rem;
    font-weight: 600;
}

.footer-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 25px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

.contact-info p {
    color: #ccc;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.social-link {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding: 30px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: white;
}

/* =====================================================
   RESPONSIVE DESIGN - TABLETS (768px - 1023px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1023px) {
    .container {
        padding: 0 25px; /* Reducido de 30px a 25px */
    }

    /* Hero adjustments for tablets */
    .hero {
        padding: 100px 0 80px;
    }

    .hero-title {
        font-size: 4rem;
        letter-spacing: -1.5px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-description {
        font-size: 1rem;
        max-width: 450px; /* Reducido de 500px a 450px */
    }

    /* Navigation for tablets */
    .nav-menu {
        gap: 40px;
        padding: 18px 0;
    }

    /* Sections for tablets */
    .section {
        padding: 80px 0;
    }

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 60px;
    }

    /* Services grid for tablets */
    .intro-services {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px; /* Reducido de 30px a 25px */
    }

    .intro-service {
        padding: 40px 20px;
    }

    .intro-service h3 {
        font-size: 1.2rem;
    }

    .intro-service p {
        font-size: 1rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px; /* Reducido de 30px a 25px */
    }

    /* Portfolio for tablets */
    .portfolio-showcase {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; /* Reducido de 12px a 10px */
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px; /* Reducido de 20px a 18px */
    }

    /* Work and About sections for tablets */
    .work-content,
    .about-content {
        grid-template-columns: 1fr;
        gap: 35px; /* Reducido de 40px a 35px */
        text-align: center;
    }

    .work-title,
    .about-title {
        font-size: 1.8rem;
    }

    .work-img,
    .about-img {
        max-width: 450px; /* Reducido de 500px a 450px */
        height: 280px; /* Reducido de 320px a 280px */
    }

    /* Blog for tablets */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* Reducido de 25px a 20px */
    }

    .blog-title {
        font-size: 1.8rem;
        margin-bottom: 50px;
    }

    /* Contact CTA for tablets */
    .contact-cta {
        padding: 80px 0;
    }

    .contact-cta h2 {
        font-size: 2.2rem;
    }

    /* Footer for tablets */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px; /* Reducido de 40px a 35px */
    }
}

/* =====================================================
   RESPONSIVE DESIGN - MOBILE (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
    .main-content {
        padding-top: 20px;
    }

    .container {
        padding: 0 15px; /* Mantenido en 15px */
    }

    /* Hero for mobile */
    .hero {
        padding: 60px 0 50px;
    }

    .hero-title {
        font-size: 3rem;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.90rem;
        max-width: 100%;
    }

    /* Navigation for mobile */
    .main-nav {
        top: 70px;
    }

    .nav-menu {
        flex-direction: column;
        gap: 20px;
        padding: 15px 0;
    }

    /* Sections for mobile */
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 50px;
    }

    /* Services for mobile */
    .intro-services {
        grid-template-columns: 1fr;
        gap: 20px; /* Reducido de 25px a 20px */
    }

    .intro-service {
        padding: 40px 20px;
    }

    .intro-service h3 {
        font-size: 1.3rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px; /* Reducido de 30px a 25px */
    }

    /* Portfolio for mobile */
    .portfolio-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* Reducido de 15px a 12px */
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px; /* Reducido de 25px a 20px */
    }

    .portfolio-section .section-title {
        font-size: 1.3rem;
        margin-bottom: 40px;
    }

    /* Work and About for mobile */
    .work-content,
    .about-content {
        grid-template-columns: 1fr;
        gap: 25px; /* Reducido de 30px a 25px */
    }

    .work-title,
    .about-title {
        font-size: 1.3rem;
        text-align: center;
    }

    .work-text p,
.about-text p {
    text-align: left;
    margin: 0 5%;
}

    .work-img,
    .about-img {
        max-width: 350px; /* Reducido de 380px a 350px */
        height: 260px; /* Reducido de 290px a 260px */
        margin-left: auto;
        margin-right: auto;
    }

    /* Blog for mobile */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px; /* Reducido de 20px a 18px */
    }

    .blog-title {
        font-size: 1.3rem;
        margin-bottom: 40px;
    }

    .blog-item-title {
        font-size: 1rem;
    }

    .blog-excerpt {
        font-size: 0.9rem;
    }

    /* Contact CTA for mobile */
    .contact-cta {
        padding: 60px 0;
    }

    .contact-cta h2 {
        font-size: 1.5rem;
    }

    /* Footer for mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px; /* Reducido de 30px a 25px */
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }
}

/* =====================================================
   RESPONSIVE DESIGN - SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
    .container {
        padding: 0 25px; /* Reducido de 15px a 12px */
    }

    /* Hero for small mobile */
    .hero {
        padding: 50px 0 40px;
    }

    .hero-title {
        font-size: 2.5rem;
        letter-spacing: -0.5px;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .hero-description {
        font-size: 0.90rem;
        line-height: 1.6;
    }

    /* Navigation for small mobile */
    .nav-menu {
        gap: 15px;
        padding: 12px 0;
    }

    .nav-menu a {
        font-size: 13px;
    }

    /* Sections for small mobile */
    .section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    /* Services for small mobile */
    .intro-service {
        padding: 40px 15px;
    }

    .intro-service h3 {
        font-size: 1.3rem;
    }

    .intro-service p {
        font-size: 1rem;
        color:#000000;
        font-weight:350;
    }

    /* Portfolio for small mobile */
    .portfolio-showcase {
        grid-template-columns: 1fr;
        gap: 12px; /* Reducido de 15px a 12px */
    }

    .portfolio-section .section-title {
        font-size: 1.3rem;
    }

    .portfolio-button,
    .blog-button {
        padding: 15px 30px;
        font-size: 13px;
    }

    /* Work and About for small mobile */
    .work-title,
    .about-title {
        font-size: 1.3rem;
        text-align:center;
    }

    .work-text p,
    .about-text p {
        font-size: 1rem;
    }

    .work-img,
    .about-img {
        max-width: 300px; /* Reducido de 320px a 300px */
        height: 220px; /* Reducido de 240px a 220px */
    }

    /* Blog for small mobile */
    .blog-title {
        font-size: 1.3rem;
    }

    .blog-content {
        padding: 20px;
    }

    .blog-item-title {
        font-size: 0.95rem;
    }

    /* Contact CTA for small mobile */
    .contact-cta {
        padding: 50px 0;
    }

    .contact-cta h2 {
        font-size: 1.3rem;
    }

    .contact-cta p {
        font-size: 0.9rem;
    }

    .cta-button {
        padding: 15px 30px;
        font-size: 13px;
    }

    /* Footer for small mobile */
    .footer {
        padding: 60px 0 0;
    }

    .footer-content {
        gap: 20px; /* Reducido de 25px a 20px */
    }

    .footer-section h3 {
        font-size: 1.3rem;
    }

    .social-links {
        justify-content: center;
        gap: 15px;
    }
}

/* =====================================================
   RESPONSIVE DESIGN - LARGE DESKTOP (min-width: 1400px)
   ===================================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px; /* Reducido de 1400px a 1100px */
        padding: 0 40px;
    }

    .hero-title {
        font-size: 5.5rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .intro-services {
        gap: 40px; /* Reducido de 50px a 40px */
    }

    .services-grid {
        gap: 40px; /* Reducido de 50px a 40px */
    }

    .portfolio-showcase {
        gap: 20px; /* Reducido de 25px a 20px */
    }

    .blog-grid {
        gap: 30px; /* Reducido de 40px a 30px */
    }
}

:root{
  --neo-bg:#f6f7fb;
  --neo-card:#ffffff;
  --neo-text:#0f172a;         /* slate-900 */
  --neo-muted:#475569;        /* slate-600 */
  --neo-accent:#10b981;       /* emerald */
  --neo-accent-2:#06b6d4;     /* cyan */
  --neo-ring: rgba(16,185,129,.25);
}

/* ===== Hero NEOMINIMAL ===== */
.hero--neo{
  position:relative; overflow:hidden;
  padding:120px 0 110px; background: var(--neo-bg);
}
.hero--neo::before,
.hero--neo::after{
  content:""; position:absolute; inset:auto; filter: blur(60px); opacity:.6; pointer-events:none;
}
.hero--neo::before{
  width:520px; height:520px; left:-120px; top:-120px;
  background: radial-gradient(40% 40% at 50% 50%, rgba(6,182,212,.35), transparent 60%);
}
.hero--neo::after{
  width:620px; height:620px; right:-180px; bottom:-160px;
  background: radial-gradient(40% 40% at 50% 50%, rgba(16,185,129,.35), transparent 60%);
}

.hero-neo-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.15fr 1fr; gap:56px; align-items:center;
}
@media (max-width: 992px){ .hero-neo-grid{ grid-template-columns:1fr; } }

.hero-neo-copy{ color: var(--neo-text); }
.pill{
  display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  background:#e7f9f3; color:#065f46; padding:8px 12px; border-radius:999px; margin-bottom:14px;
  border:1px solid #c8f3e4;
}
.hero-neo-title{
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height:1.05; margin:0 0 12px; font-weight:800; letter-spacing:-.02em;
}
.hero-neo-title span{
  background: linear-gradient(90deg, var(--neo-accent), var(--neo-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-neo-desc{
  color: var(--neo-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height:1.8; max-width: 60ch; margin:0 0 22px;
}

/* CTAs */
.hero-neo-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.btn-neo{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:12px; font-weight:700; text-decoration:none; transition:.2s ease;
  border:1px solid transparent;
}
.btn-neo.primary{
  background: var(--neo-text); color:#fff; box-shadow:0 10px 30px rgba(2,6,23,.18);
}
.btn-neo.primary:hover{ transform:translateY(-2px); }
.btn-neo.ghost{
  background:#ffffff; color: var(--neo-text); border-color: #e2e8f0;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.btn-neo.ghost:hover{ border-color:#cbd5e1; transform:translateY(-2px); }

@media (min-width: 992px){
  .hero-neo-ctas,
  .hero-neo-points{
    width: fit-content;
    margin-inline: auto;   /* centra el bloque dentro de la columna */
    justify-content: center;
  }
}

@media (max-width: 991px){
  .hero-neo-ctas{
    flex-direction: column;    /* Apila los botones verticalmente */
    align-items: center;        /* Los centra horizontalmente */
    gap: 12px;                  /* Espacio entre botones */
  }
}


/* Puntos */
.hero-neo-points{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; padding:0; list-style:none; }
.hero-neo-points li{
  font-size:.9rem; color:#0b1220;
  background:#fff; border:1px solid #e8eef6; border-radius:999px; padding:8px 12px;
}

/* Media: tarjetas “device” superpuestas */
.hero-neo-media{ position:relative; min-height:340px; }
.device-card{
  position:absolute; background: var(--neo-card); border-radius:18px;
  box-shadow:
    0 10px 30px rgba(2,6,23,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid #e8eef6;
}
.device-card.main{
  width:min(520px, 95%); height:320px; right:0; top:0; transform: rotate(-2deg);
}
.device-card .bar{
  height:44px; border-bottom:1px solid #eef2f7;
  background: linear-gradient(180deg,#ffffff, #f7f9fc);
  border-top-left-radius:18px; border-top-right-radius:18px;
}
.device-card .screen{
  height:calc(100% - 44px);
  background:
    linear-gradient(135deg, rgba(16,185,129,.14), rgba(6,182,212,.12)),
    repeating-linear-gradient(0deg, rgba(2,6,23,.03), rgba(2,6,23,.03) 1px, transparent 1px, transparent 10px);
}
.device-card.side{
  width:200px; height:140px; filter:saturate(110%);
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(6,182,212,.15), transparent 60%),
    #ffffff;
}
.device-card.side.one{ left:-10px; bottom:18px; transform: rotate(-10deg); }
.device-card.side.two{ right:-30px; bottom:-10px; transform: rotate(8deg); }

@media (max-width: 992px){
  .hero-neo-media{ margin-top:10px; min-height:300px; }
  .device-card.main{ left:50%; transform: translateX(-50%) rotate(-2deg); }
  .device-card.side.one{ left:8%; }
  .device-card.side.two{ right:6%; }
}
@media (max-width: 480px){
  .device-card.main{ width:95%; height:260px; }
  .device-card.side{ width:160px; height:110px; }
}

/* =====================================================
   HERO · DECOR PLUS (más stickers + círculos pastel)
   No mueve el layout (todo via pseudos, pointer-events:none)
   ===================================================== */

/* --- 0) Círculos pastel de fondo (dentro del hero) --- */
.hero--neo .container{ position:relative; isolation:isolate; }
.hero--neo .container::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-120px; top:-90px; width:720px; height:720px;
  background:
    radial-gradient(140px 140px at 85% 25%, rgba(209,250,229,.55), transparent 60%),
    radial-gradient(170px 170px at 62% 78%, rgba(224,242,254,.55), transparent 60%),
    radial-gradient(110px 110px at 30% 18%, rgba(237,233,254,.50), transparent 60%),
    radial-gradient(160px 160px at 8%  84%, rgba(255,228,230,.45), transparent 60%);
  filter: blur(2px);
  border-radius: 50%;
  opacity: .75;
}
@media (max-width: 992px){
  .hero--neo .container::after{ right:-60px; top:-60px; width:520px; height:520px; opacity:.6; }
}
@media (max-width: 480px){
  .hero--neo .container::after{ right:-30px; top:-40px; width:380px; height:380px; opacity:.45; }
}

/* --- 1) Tarjeta GRANDE: stickers dev adicionales --- */

/* pegatina { CSS } arriba-izquierda, con rotación leve */
.hero--neo .device-card.main::before{
  content:"{ CSS }";
  position:absolute; left:-14px; top:66px; z-index:2; pointer-events:none;
  font:700 11px/1 ui-monospace, Menlo, Consolas, monospace;
  color:#0f172a; letter-spacing:.04em;
  padding:6px 10px; border-radius:10px;
  background:#ffffffcc; border:1px solid #e8eef6;
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
  transform: rotate(-6deg);
}

/* chip <UI/> arriba-dcha (pequeño) */
.hero--neo .device-card.main::after{
  content:"<UI/>";
  position:absolute; right:14px; top:64px; z-index:2; pointer-events:none;
  font:800 10px/1 ui-monospace, Menlo, Consolas, monospace;
  color:#0f172a; letter-spacing:.04em;
  padding:6px 8px; border-radius:999px;
  background:#fff; border:1px solid #e8eef6;
  box-shadow:0 6px 14px rgba(2,6,23,.08);
  transform: rotate(3deg);
}

/* ya tienes los 3 puntitos macOS en .bar::after; no se tocan */

/* --- 2) Tarjeta PEQUEÑA IZQ: +badge <> y “code ticks” sutiles --- */
.hero--neo .device-card.side.one::after{
  content:"< />";
  position:absolute; right:10px; top:10px; z-index:2; pointer-events:none;
  font:800 10px/1 ui-monospace, Menlo, Consolas, monospace;
  color:#0f172a;
  padding:5px 7px; border-radius:999px;
  background:#ffffff; border:1px solid #e8eef6;
  box-shadow:0 6px 14px rgba(2,6,23,.08);
}

/* pequeñas “marcas” a la derecha de cada línea (no cambian tamaño) */
.hero--neo .device-card.side.one::before{
  background:
    radial-gradient(circle, #e0f2fe 60%, transparent 61%) 12px  8px/6px 6px no-repeat,
    radial-gradient(circle, #d1fae5 60%, transparent 61%) 12px 26px/6px 6px no-repeat,
    radial-gradient(circle, #ede9fe 60%, transparent 61%) 12px 44px/6px 6px no-repeat,
    linear-gradient(#e0f2fe 0 0) 22px  8px/70% 6px no-repeat,
    linear-gradient(#d1fae5 0 0) 22px 26px/56% 6px no-repeat,
    linear-gradient(#ede9fe 0 0) 22px 44px/64% 6px no-repeat,
    /* ticks a la derecha */
    linear-gradient(#cbd5e1 0 0) calc(100% - 14px)  8px/8px  2px no-repeat,
    linear-gradient(#cbd5e1 0 0) calc(100% - 14px) 26px/8px  2px no-repeat,
    linear-gradient(#cbd5e1 0 0) calc(100% - 14px) 44px/8px  2px no-repeat;
  opacity:.98;
}

/* --- 3) Tarjeta PEQUEÑA DCHA: wireframe + botones/slider extra --- */
.hero--neo .device-card.side.two::after,
.hero--neo .device-card.side.two .screen::after{
  /* Re-declaramos background añadiendo más capas decorativas */
  content:""; position:absolute; inset:10px; border-radius:10px; pointer-events:none;
  background:
    /* card 1 */
    linear-gradient(#ffffff,#ffffff) 14px 14px/70px 40px no-repeat,
    /* card 2 */
    linear-gradient(#ffffff,#ffffff) calc(14px + 80px) 36px/56px 32px no-repeat,
    /* fila de botones (tres pills) */
    linear-gradient(#f8fafc,#fff) 14px 78px/34px 10px no-repeat,
    linear-gradient(#f8fafc,#fff) 52px 78px/34px 10px no-repeat,
    linear-gradient(#f8fafc,#fff) 90px 78px/34px 10px no-repeat,
    /* slider */
    linear-gradient(#e2e8f0,#e2e8f0) 14px 100px/110px 4px no-repeat,
    radial-gradient(circle, #22c55e 55%, transparent 56%) 76px 98px/12px 12px no-repeat,
    /* paleta de color */
    radial-gradient(circle, #e0f2fe 48%, transparent 49%) calc(100% - 58px) 12px/16px 16px no-repeat,
    radial-gradient(circle, #d1fae5 48%, transparent 49%) calc(100% - 38px) 12px/16px 16px no-repeat,
    radial-gradient(circle, #ffe4e6 48%, transparent 49%) calc(100% - 18px) 12px/16px 16px no-repeat;
  opacity:.98;
}

/* --- 4) Seguridad: nada anima si el usuario lo pide --- */
@media (prefers-reduced-motion: reduce){
  .hero--neo .device-card{ transition: none !important; }
}

/* =====================================================
   HERO · Mac dots (forzar visibilidad en tarjeta grande)
   ===================================================== */
.hero--neo .device-card.main .bar{
  position: relative;
  height: 44px;              /* mantiene tu altura */
  z-index: 5;                /* por encima de la screen y decoraciones */
  overflow: visible;         /* por si algún reset los recorta */
}

/* Puntitos rojo / amarillo / verde */
.hero--neo .device-card.main .bar::before{
  content: "";
  position: absolute;
  left: 14px;                /* separación al borde izquierdo */
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 12px;
  pointer-events: none;
  z-index: 6;                /* asegura que se vean */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
  background:
    radial-gradient(circle, #ff5f56 62%, transparent 63%)   0    50%/10px 10px no-repeat,
    radial-gradient(circle, #ffbd2e 62%, transparent 63%)  20px  50%/10px 10px no-repeat,
    radial-gradient(circle, #27c93f 62%, transparent 63%)  40px  50%/10px 10px no-repeat;
}

/* Tamaño ligeramente menor en móviles pequeños */
@media (max-width: 480px){
  .hero--neo .device-card.main .bar::before{
    left: 12px;
    width: 46px;
    background:
      radial-gradient(circle, #ff5f56 62%, transparent 63%)   0    50%/8px 8px no-repeat,
      radial-gradient(circle, #ffbd2e 62%, transparent 63%)  18px  50%/8px 8px no-repeat,
      radial-gradient(circle, #27c93f 62%, transparent 63%)  36px  50%/8px 8px no-repeat;
  }
}

/* Quitar el punto verde del slider en la tarjeta pequeña derecha */
.hero--neo .device-card.side.two::after,
.hero--neo .device-card.side.two .screen::after{
  /* mismo diseño pero SIN la bolita verde */
  content:""; position:absolute; inset:10px; border-radius:10px; pointer-events:none;
  background:
    /* card 1 */
    linear-gradient(#ffffff,#ffffff) 14px 14px/70px 40px no-repeat,
    /* card 2 */
    linear-gradient(#ffffff,#ffffff) calc(14px + 80px) 36px/56px 32px no-repeat,
    /* fila de botones (tres pills) */
    linear-gradient(#f8fafc,#fff) 14px 78px/34px 10px no-repeat,
    linear-gradient(#f8fafc,#fff) 52px 78px/34px 10px no-repeat,
    linear-gradient(#f8fafc,#fff) 90px 78px/34px 10px no-repeat,
    /* slider (solo la barra, sin handler) */
    linear-gradient(#e2e8f0,#e2e8f0) 14px 100px/110px 4px no-repeat,
    /* paleta de color */
    radial-gradient(circle, #e0f2fe 48%, transparent 49%) calc(100% - 58px) 12px/16px 16px no-repeat,
    radial-gradient(circle, #d1fae5 48%, transparent 49%) calc(100% - 38px) 12px/16px 16px no-repeat,
    radial-gradient(circle, #ffe4e6 48%, transparent 49%) calc(100% - 18px) 12px/16px 16px no-repeat;
  opacity:.98;
}

.blog-link{ display:block; text-decoration:none; color:inherit; }
.blog-link:hover .blog-read-more{ text-decoration:none; }


/* Móviles pequeños */
@media (max-width: 480px) {
  .contact-cta {
    padding: 50px 0 !important;
  }
  .contact-cta h2 {
    font-size: 1.4rem !important;
    margin: 0 15px 15px !important;
    letter-spacing: -0.3px !important;
  }
  .contact-cta p {
    font-size: 0.9rem !important;
    margin: 0 15px 15px !important;
  }
  .cta-button {
    display: block !important;
    width: 80% !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    padding: 14px 25px !important;
    font-size: 0.8rem !important;
  }
}