/* FONT DECLARATIONS - Mapping existing Google Fonts to requested labels */
        /* OPTIGorilla -> Noto Serif Black/900 */
        /* Perandory Condensed -> Work Sans SemiBold/600 */
        /* Helvetica World -> Inter Regular/400 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@900&family=Work+Sans:wght@600&family=Inter:wght@400;500&display=swap');
        @font-face {
            font-family: 'OPTIGorilla';
            src: url('../fonts/OPTIGorilla.ttf.woff') format('woff'), /* Formato preferido para web */
                url('../fonts/OPTIGorilla.otf') format('truetype'); /* Respaldo */
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'perandory-condensed';
            src: url('../fonts/perandory-condensed.woff') format('woff');
            font-weight: bold; /* Puedes definir si esta es la versión negrita */
            font-style: normal;
        }

        @font-face {
            font-family: 'helvetica-world-regular';
            src: url('../fonts/helvetica-world-regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }


        :root {
            --primary-green: #003026;
            --muted-green: #828E71;
            --contrast-cream: #FDFDFB;
            --black: #053225;
            --matte-gold: #C5A059;
            --white: #FFFFFF;
            --light-gray: #c7c5c5;
            --h-font: 'perandory-condensed', serif;
            --ui-font: 'OPTIGorilla', 'Inter', sans-serif;
            --body-font: 'helvetica-world-regular', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--contrast-cream);
            color: var(--black);
            font-family: var(--body-font);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Typography */
        h1 { font-family: var(--h-font); font-weight: 900; line-height: 0.9; }
        h2, .h-font { font-family: var(--h-font); font-weight: 900; line-height: 0.9; }


        /* General Layout */
        section {
            padding: 100px 5%;
            max-width: 1600px;
            margin: 0 auto;
            position: relative;
        }
        .btn-pill {
            display: inline-block;
            padding: 10px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-family: var(--body-font);
            font-size: 1rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            border: none;
            cursor: pointer;
            text-align: center;
            font-weight: bold;

        }
         .btn-secondary { background: var(--contrast-cream); color: var(--primary-green); }
        .btn-secondary:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(0,48,38,0.2); }


        .btn-primary { background: var(--primary-green); color: var(--contrast-cream); }
        .btn-primary:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(0,48,38,0.2); }

        .btn-registro {
            display: inline-block;
            padding: 10px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-family: var(--body-font);
            font-size: 1rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            border: none;
            cursor: pointer;
            text-align: center;
            font-weight: bold;

        }
        .btn-primary-reg {
            background: var(--primary-green);
            color: var(--contrast-cream);
        }
        .btn-primary-reg:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0,48,38,0.2);
        }






        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background:rgb(227, 238, 230, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición fluida */
            /*background:rgb(227, 238, 230, 0.65);
            backdrop-filter: blur(15px);*/
        }
        nav .logo { font-family: var(--h-font); font-size: 1.5rem; letter-spacing: -1px; }
        nav .links { display: none; gap: 50px; }

        /* Estado del nav cuando se hace scroll */
        nav.scrolled {
           padding: 10px 5%; /* Se hace un poco más delgado al bajar */
            background: url('../images/bar-menu.png') no-repeat center center;
           /*background-image: linear-gradient(rgba(200, 195, 195, 0.5), rgba(250, 245, 245, 0.5)),
                      url('../images/footer-gr-2026.jpg');
            background-position: center;*/

            background-size: cover;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Opcional*/
        nav.scrolled .links a,
        nav.scrolled .logo {
        color: var(--white) !important;
}





        nav .menu-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 14px;
            background: rgba(253, 253, 251, 0.95);
            cursor: pointer;
            transition: transform 0.3s ease, background 0.3s ease;
        }
        nav .menu-toggle:hover {
            transform: scale(1.02);
            background: rgba(253, 253, 251, 1);
        }
        nav .menu-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--black);
            position: relative;
        }
        nav .menu-toggle span::before,
        nav .menu-toggle span::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--black);
            transition: transform 0.3s ease;
        }
        nav .menu-toggle span::before { transform: translateY(-7px); }
        nav .menu-toggle span::after { transform: translateY(7px); }
        nav .nav-cta { display: inline-flex; }
        @media (min-width: 768px) {
            nav .links { display: flex; }
            nav .menu-toggle { display: none; }
        }
        @media (max-width: 767px) {
            nav .nav-cta { display: none; }
            .hidden-mobile { display: none !important; }
        }
        nav .links a {
            text-decoration: none;
            color: var(--white);
            font-family: var(--body-font);
            font-size: 1rem;
        }

        #mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: rgba(253, 253, 251, 0.98);
            backdrop-filter: blur(12px);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 120px 20px 30px;
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.35s ease, opacity 0.35s ease;
        }
        #mobile-menu.active {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .mobile-menu-inner {
            width: 100%;
            max-width: 360px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .menu-close {
            align-self: flex-end;
            border: none;
            background: transparent;
            font-size: 2rem;
            line-height: 1;
            cursor: pointer;
            color: var(--black);
        }
        #mobile-menu a {
            display: block;
            text-decoration: none;
            color: var(--black);
            font-family: var(--ui-font);
            font-size: 1rem;
            padding: 14px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
        #mobile-menu .btn-pill {
            width: 100%;
            justify-content: center;
            padding: 15px 0;
        }

/*count down*/
.countdown-container {
          display: flex;
          gap: 20px;
          justify-content: center;
          font-family: 'Segoe UI', sans-serif;

          /* Degradado aplicado al fondo */
          background: linear-gradient(135deg, #525739, #64a82e);

          padding: 50px;
          border-radius: 0px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .time-box {
          text-align: center;
          /* Fondo semi-transparente para resaltar sobre el degradado */
          /*background: rgba(94, 156, 115, 0.1);*/
          background: rgb(18 66 35 / 80%);
          color: white;
          padding: 15px;
          border-radius: 12px;
          min-width: 80px;
          backdrop-filter: blur(5px);
          /* Efecto de cristal esmerilado */
      }

      .time-box span {
          display: block;
          font-size: 3rem;
          font-weight: bold;
          color: white;
          /* Color de acento para los números */
      }

      .time-box small {
          text-transform: uppercase;
          font-size:1rem;
          letter-spacing: 1px;
          opacity: 0.8;
      }

      /* --- Ajustes para Pantallas Pequeñas (Celulares) --- */
              @media (max-width: 480px) {
                  .countdown-container {
                      padding: 15px;
                      gap: 10px;
                  }

                  .time-box {
                      padding: 10px 5px;
                      min-width: 65px; /* Permite un mejor acomodo en cuadrícula de 2x2 */
                  }

                  .time-box span {
                      font-size: 1.8rem; /* Números un poco más pequeños para que no se corten */
                  }

                  .time-box small {
                      font-size: 0.65rem;
                  }
              }





        /* Hero */
        .hero {
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: var(--primary-green);
            padding: 50px;
            max-width: none;
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            background: url('../images/banner-gr-2026.jpg') no-repeat;
            background-size: cover;

            /*filter: blur(8px) brightness(0.4);*/
            transform: scale(1.1);

        }
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: var(--contrast-cream);
            padding-top: 130px;

        }
        .hero h1 {
            font-size: clamp(1.9rem, 20vw, 20rem);
            /*letter-spacing: clamp(5px, 1.5vw, 10px);*/
            margin: 0;
            white-space: normal;
            word-spacing: 0.1em;
        }
        .hero .subtitle {
            font-family: var(--ui-font);
            /*letter-spacing: 0.5em;*/
            font-size: clamp(1.2rem, 4vw, 26px);
            font-weight: 400;
            margin-bottom: 20px;
            padding: clamp(20px, 8vw, 50px);
        }

  /*Video Section*/
  .video-section {
      position: relative;
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 0;
      overflow: hidden;
  }
  .video-container {
      position: relative;
      width: 100%;
      height: 100%;
      padding-bottom: 56.25%;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
      .video-container img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 1s ease;
      z-index: 2;
    }


 .video-container iframe {
      width: 100%;
      height: 130%;
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none; /* 🔒 Bloquea interacción con el video */
    }






        .subtitle-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
            gap: 20px;
            flex-wrap: wrap;
        }
        .hero .subtitle-right,
        .hero .subtitle-left {
            font-family: var(--ui-font);
            /*letter-spacing: 0.5em;*/
            font-size: clamp(0.9rem, 4vw, 20px);
            font-weight: 400;
            flex: 1;
            min-width: 120px;
        }

        /* Responsive adjustments for mobile */
        @media (max-width: 768px) {
            .hero h1 {
                white-space: normal;
            }
            .subtitle-row {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            .hero .subtitle-right,
            .hero .subtitle-left {
                flex: none;
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .hero-content {
                padding: 20px;
            }
            .hero .subtitle {
                padding: clamp(15px, 5vw, 30px);
            }
        }

        .subtitle-main{
            font-size: 7rem;
            text-align: center;
            margin-top: 10px;
           /* letter-spacing: 0.1em;*/
           padding: 30px;


        }

        .tag{

            font-family: var(--ui-font);
            font-size: 1.5rem;
            color: var(--muted-green);
            text-align: center;
            display: block;
            width: 100%;

        }

        .line-txt{
            height: 1px;
            width: 80px;
            background: var(--primary-green);
            margin: 30px 0;
        }

        .line-txt.line-right {
            margin-left: auto;
        }

        .label-speaker{
            font-size: 1rem;
            opacity: 0.6;
        }


        .sede-txt{
            font-family: var(--body-font);

            font-size: 1.5rem;
        }

        .logo img {
            height: 60px;
            width: auto;
        }



        /* Manifesto Collage */
        .manifesto {
            display: grid;
            grid-template-columns: 1fr;
            gap: 60px;
            align-items: center;
        }
        @media (min-width: 768px) {
            .manifesto { grid-template-columns: 1.2fr 1fr; }
        }
        .collage {
            position: relative;
            padding-bottom: 50px;
        }
        .halftone-img {
            width: 100%;
            object-fit: cover;
            /*filter: grayscale(1);
            background-color: var(--primary-green);*/
            border-radius: 8px;
            background-blend-mode: multiply;
            background-image: radial-gradient(var(--black) 15%, transparent 16%);
            background-size: 4px 4px;
        }
        .halftone-img.size-large {
            height: clamp(250px, 70vw, 550px);
        }
        .halftone-img.size-medium {
            height: clamp(200px, 40vw, 350px);
        }

        /* Responsive adjustments for mobile */
        @media (max-width: 768px) {
            .concepto-section {
                padding: 60px 5%;
            }
            .halftone-img.size-large {
                height: clamp(200px, 50vw, 350px);
            }
        }

        @media (max-width: 480px) {
            .concepto-section {
                padding: 40px 5%;
            }
            .halftone-img.size-large {
                height: clamp(180px, 45vw, 280px);
            }
        }



        .parallax-overlay {
            position: absolute;
            bottom: -30px;
            right: -20px;
            background: var(--muted-green);
            padding: 40px;
            border-radius: 8px;
            max-width: 320px;
            z-index: 5;
            box-shadow: 20px 20px 0 var(--primary-green);
        }


        /*SEDE*/

        .sede-section {
            background: var(--primary-green);
            color: var(--contrast-cream);

        }
        .concepto-section {
            background: #f8f7f2;


        }

        /* Contenedor del Mapa */
        .map-container {
            width: 100%;
            max-width: 600px;
            height: 350px;
            filter: grayscale(1) invert(1) sepia(1) hue-rotate(90deg) saturate(1.5) brightness(1);
            /* Este filtro transforma el mapa a tonos verdes oscuros */
            border: 1px solid rgba(255,255,255,0.1);
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }





        /* Invitados Grid */
        .invitados-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-top: 60px;
        }
        @media (min-width: 768px) {
            .invitados-grid { grid-template-columns: repeat(4, 1fr); }
        }
        .guest-card {
            transition: all 0.5s ease;
            position: relative;
        }
        .guest-card img {
            width: 100%;
            aspect-ratio: 4/5;
            object-fit: cover;
            filter: grayscale(1);
            transition: 0.5s ease;
            border-radius: 4px;
        }
        .guest-card:hover {
            transform: translateY(-10px);
        }
        .guest-card:hover img {
            filter: grayscale(0);
            box-shadow: 15px 15px 0 var(--primary-green);
        }
        .guest-info {
            margin-top: 15px;
            text-align: center;}

        /* Carnets */
        .carnets-section {
            background: #b7d094 ;
            color: var(--contrast-cream);
            padding-right: 120px; /* Space for vertical text */
        }
        .carnets-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
        }
        .carnet-card {
            background: var(--contrast-cream);
            color: var(--black);
            padding: 60px 40px;
            flex: 1;
            min-width: 300px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            transition: transform 0.4s ease;
        }
        .carnet-card:hover { transform: translateY(-15px); }

        .carnet-card.featured {
            background: var(--primary-green);
            color: var(--contrast-cream);
        }

        .carnet-card.olive {
            background: var(--primary-green);
            color: var(--contrast-cream);
        }

        .carnets-vertical-text {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-family: var(--h-font);
            font-size: 8rem;
            opacity: 0.1;
            white-space: nowrap;
            pointer-events: none;
        }
        .label-gold {
            background: var(--matte-gold);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 10px;
            width: fit-content;
        }
        .bank-info {
            font-weight: bold;
            color: var(--primary-green);
        }

        /* Activities */
        .activities-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        @media (min-width: 768px) {
            .activities-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 400px); }
        }
        .activity-block {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: var(--black);
        }
        .activity-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /*opacity: 0.6;
            filter: grayscale(1);*/
            transition: 1s ease;
        }
        .activity-block:hover img {
            transform: scale(1.1);
            opacity: 0.3;
        }
        .activity-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .activity-overlay h3 {
            font-size: 4vw;
            color: white;
            text-transform: uppercase;
        }

/* Program Section */
        
    .program-actions{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px; /* fila columna */
    }
    .program-action-item{
        flex: 0 0 auto;
    }
    .program-action-button{
        width: auto;
        min-width: 240px;
        max-width: 280px;
    }

    .section-padding-lg {
        padding: 25px 0;
    }



        /* FAQ Accordion */
        .faq-container { max-width: 900px; margin: 60px auto 0; }
        .faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
        .faq-trigger {
            width: 100%;
            padding: 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            font-family: var(--body-font);
            font-size: 1rem;
        }
        .faq-trigger .icon {
            font-size: 1.5rem;
            transition: transform 0.4s ease;
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            font-family: var(--body-font);
            color: #555;
        }
        .faq-item.active .faq-trigger .icon { transform: rotate(45deg); }
        .faq-item.active .faq-content { max-height: 300px; padding-bottom: 30px; }

        /* Scroll Effects */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Footer */
        footer {
            /*background: var(--primary-green);*/
            background: url('../images/footer-gr-2026.jpg') no-repeat;
            background-size: cover;
            background-position: center;
            /*filter: blur(8px) brightness(0.4);*/
            transform: scale(1.1);
            color: var(--contrast-cream);
            padding: 60px 5% 40px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;

        }
        .footer-menu{
            color: white;
            text-decoration: none;
            font-size: 0.9rem;
        }

          .social-icons {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
        }

        .social-icon:hover {
            background: var(--primary-green);
        }




        @media (min-width: 768px) {
            .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
        }

        /* MODAL REGISTRO STYLES */
        .modal-registro {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .modal-registro.activo {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
        }

        .modal-contenedor {
            position: relative;
            z-index: 2001;
            background: var(--contrast-cream);
            border-radius: 12px;
            padding: 60px 40px;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 48, 38, 0.3);
            animation: modalEntrada 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        @keyframes modalEntrada {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .modal-cerrar {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 42px;
            height: 42px;
            border: none;
            background: rgba(0, 48, 38, 0.1);
            border-radius: 50%;
            font-size: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-green);
            transition: all 0.3s ease;
        }

        .modal-cerrar:hover {
            background: rgba(0, 48, 38, 0.2);
            transform: rotate(90deg);
        }

        .modal-contenido {
            display: flex;
            flex-direction: column;
            gap: 25px;
            text-align: center;
        }

        .modal-titulo {
            font-family: var(--h-font);
            font-size: clamp(1.8rem, 8vw, 2.5rem);
            color: var(--primary-green);
            margin: 0;
            line-height: 1.2;
        }

        .modal-mensaje {
            font-family: var(--body-font);
            font-size: 1.5rem;
            color: #333;
            line-height: 1.7;
            margin: 0;
            letter-spacing: 0.3px;
        }

        .modal-btn-accion {
            align-self: center;
            padding: 12px 40px;
            font-size: 1rem;
            min-width: 200px;
        }

        .modal-btn-accion:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 48, 38, 0.3);
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .hero h1 { font-size: 35vw; }
            section { padding: 60px 5%; }
            .carnets-section { padding-right: 5%; }
            .carnets-vertical-text { display: none; }

            .modal-contenedor {
                padding: 40px 25px;
                max-width: 95%;
            }

            .modal-titulo {
                font-size: 1.5rem;
            }

            .modal-mensaje {
                font-size: 1rem;
            }
        }

        /* Fix overflow lateral en moviles sin tocar desktop */
    @media (max-width: 768px) {
        .hero {
            width: 100%;
            max-width: 100%;
        }

        .video-section {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

    /* Previene desborde por escalado del footer en algunos navegadores moviles */
        footer {
            transform: scale(1);
        }
    }

    /* Correcciones robustas de overflow solo en movil */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: clip;
  }

  /* Mantener nav siempre dentro del viewport */
  nav {
    left: 0;
    right: 0;
    width: auto;
  }

  /* Ya aplicado antes, lo dejamos consolidado */
  .hero,
  .video-section {
    width: 100%;
    max-width: 100%;
  }

  .video-section {
    margin-left: 0;
    margin-right: 0;
  }

  /* Countdown adaptable para pantallas chicas */
  .countdown-container {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
  }

  .time-box {
    min-width: 0;
    flex: 1 1 calc(50% - 10px);
  }

  /* Evita overflow por min-width fijo */
  .carnet-card {
    min-width: 0;
    width: 100%;
  }

  /* Evita que adornos se salgan por la derecha */
  .parallax-overlay {
    right: 0;
    max-width: calc(100% - 20px);
  }

  /* Previene desborde por escalado en algunos navegadores */
  footer {
    transform: scale(1);
  }
}

/* Ajuste responsive solo para seccion Carnets */
@media (max-width: 768px) {
  #carnets {
    padding: 50px 4%;
  }

  #carnets .carnets-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #carnets .carnet-card {
    width: 100%;
    min-width: 0;
    padding: 24px 16px;
    gap: 16px;
    border-radius: 10px;
  }

  /* Titulos grandes definidos inline en HTML */
  #carnets .carnet-card h3[style] {
    font-size: 2rem !important;
    line-height: 1.1;
  }

  /* Textos inline de 1.2rem */
  #carnets .carnet-card p[style*="font-size: 1.2rem"] {
    font-size: 1rem !important;
  }

  /* Fila de precios (Mayo, Junio, Julio) definida inline */
  #carnets .carnet-card > div[style*="display: flex"] {
    flex-wrap: wrap;
    gap: 10px !important;
    margin: 14px 0 !important;
  }

  #carnets .carnet-card > div[style*="display: flex"] > div {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 82px;
  }

  #carnets .carnet-card > div[style*="display: flex"] > div > div:first-child {
    font-size: 1.05rem !important;
  }

  #carnets .carnet-card > div[style*="display: flex"] > div .body-font {
    font-size: 1.25rem !important;
  }

  /* Precio de grupal */
  #carnets .carnet-card.featured .body-font[style] {
    font-size: 1.55rem !important;
    line-height: 1.2;
  }

  #carnets .carnet-card.featured .body-font[style] span[style] {
    display: block;
    font-size: 0.95rem !important;
    margin-top: 4px;
  }

  /* Botones full width en movil */
  #carnets .btn-registro {
    width: 100%;
    text-align: center;
  }

  /* Lista con iconos mas compacta */
  #carnets .carnet-card li {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  /* Titulo INSCRIPCIONES */
  #carnets .subtitle-main {
    font-size: clamp(2.1rem, 12vw, 3rem);
    line-height: 1;
  }

  /* Texto Asegura tu lugar inline */
  #carnets p.ui-font[style] {
    font-size: 1.05rem !important;
  }
}