:root {
           --c1: #72c1e8;
           /* azul */
           --c2: #f0c020;
           /* dorado */
           --text: #333;
           --bg: #f9f9f9;
       }

       * {
           box-sizing: border-box
       }

       body {
           font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
           margin: 0;
           background: var(--bg);
           color: var(--text)
       }

       /* Top Nav */
       .topnav {
           position: sticky;
           top: 0;
           z-index: 20;
           background: #fff;
           border-bottom: 1px solid #eee
       }

       /* Altura real de tu topnav (incluye padding/border) */
       :root {
           --nav-h: 64px;
       }

       /* prueba 64–72px según tu barra */

       /* Evita que el título quede debajo del sticky header */
       section[id] {
           scroll-margin-top: calc(var(--nav-h) + 10px);
           /* un pequeño margen extra */
       }

       /* (Opcional) desplazamiento suave */
       html {
           scroll-behavior: smooth;
       }

       /* Si la altura del header cambia en mobile (burger), ajusta aquí */
       @media (max-width: 860px) {
           :root {
               --nav-h: 72px;
           }

           /* o lo que mida en móvil */
       }

       .nav-inner {
           max-width: 1100px;
           margin: 0 auto;
           padding: 10px 20px;
           display: flex;
           align-items: center;
           justify-content: space-between
       }

       .brand {
           display: flex;
           align-items: center;
           gap: 10px;
           text-decoration: none;
           color: #111;
           font-weight: 800
       }

       .brand img {
           width: 28px;
           height: 28px
       }

       .nav-links a {
           margin-left: 16px;
           text-decoration: none;
           font-weight: 700;
           color: #333;
           border-bottom: 2px solid transparent
       }

       .nav-links a:hover {
           color: var(--c1);
           border-bottom-color: var(--c1)
       }

       /* Hero */
       header.hero {
           background: linear-gradient(135deg, var(--c1), var(--c2));
           color: #fff;
           text-align: center;
           padding: 56px 20px
       }

       header.hero img.logo {
           max-width: 120px;
           margin-bottom: 14px
       }

       header.hero h1 {
           margin: 8px 0 6px 0;
           font-weight: 800
       }

       header.hero p.sub {
           opacity: .95;
           margin: 0 0 10px 0
       }

       .cta-row {
           display: flex;
           flex-wrap: wrap;
           gap: 12px;
           justify-content: center;
           margin-top: 14px
       }

       .btn {
           display: inline-block;
           padding: 12px 18px;
           border-radius: 10px;
           text-decoration: none;
           font-weight: 800
       }

       .btn.primary {
           background: var(--c1);
           color: #fff
       }

       .btn.secondary {
           background: #fff;
           color: #333;
           border: 2px solid var(--c1)
       }

       .btn.warning {
           background: var(--c2);
           color: #333
       }

       .btn:hover {
           filter: brightness(.95)
       }

       /* Contenedor y secciones */
       .container {
           max-width: 1100px;
           margin: 0 auto;
           padding: 20px
       }

       section.section {
           background: #fff;
           border-radius: 12px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
           padding: 26px;
           margin: 18px 0
       }

       .section a {
           color: #f0c020;
           text-decoration: none;
           font-weight: 600;
           transition: color 0.3s, border-bottom 0.3s;
           border-bottom: 2px solid transparent;
       }

       h2.title-underline {
           display: inline-block;
           position: relative;
           margin: 0 0 14px 0
       }

       h2.title-underline::after {
           content: "";
           display: block;
           width: 48px;
           height: 4px;
           background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
           margin-top: 6px;
           border-radius: 2px
       }

       .about-me h2 {
           text-align: left;
           width: 100%;
       }

       .about-me img {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           object-fit: cover;
           margin-bottom: 15px;
           text-align: center !important;
       }

       /* Listas limpias */
       ul.clean {
           padding-left: 18px;
           margin: 10px 0
       }

       ul.clean li {
           margin: 6px 0
       }

       /* Bloques de tarjetas (si los necesitas) */
       .cards {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 14px
       }

       .card {
           background: #fff;
           border: 1px solid #eee;
           border-radius: 12px;
           padding: 18px
       }

       .muted {
           opacity: .9
       }

       /* Mini galería móvil-first, sin JS (scroll-snap) */
       .mini-gallery img {
           text-align: center !important;
       }

       .mini-gallery .gallery-track {
           display: grid;
           grid-auto-flow: column;
           grid-auto-columns: 80%;
           gap: 12px;
           overflow-x: auto;
           scroll-snap-type: x mandatory;
           -webkit-overflow-scrolling: touch;
           padding: 6px 2px 10px;
       }

       .mini-gallery .gallery-item {
           scroll-snap-align: start;
           display: block;
           border-radius: 12px;
           overflow: hidden;
           box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
           background: #fff;
       }

       .mini-gallery img {
           width: 100%;
           height: 220px;
           object-fit: cover;
           display: block;
       }

       /* En pantallas medianas/grandes mostramos 2–3 a la vez */
       @media (min-width: 720px) {
           .mini-gallery .gallery-track {
               grid-auto-columns: 48%;
           }
       }

       @media (min-width: 1024px) {
           .mini-gallery .gallery-track {
               grid-auto-columns: 31%;
           }
       }



       .social_icons img {
           width: 32px;
       }


       /* Footer */
       footer {
           font-size: 12px;
           background: #333;
           color: #fff;
           text-align: center;
           padding: 20px;
           margin-top: 30px
       }

       /* Responsivo menor */
       @media (max-width:640px) {
           .nav-links a {
               margin-left: 10px
           }
       }

       /* Burger button */
       .burger {
           display: none;
           background: transparent;
           border: 0;
           cursor: pointer;
           padding: 8px;
           margin-left: auto
       }

       .burger span {
           display: block;
           width: 24px;
           height: 2px;
           background: #333;
           margin: 5px 0;
           transition: transform .25s, opacity .25s
       }

       /* Responsive menu */
       @media (max-width: 860px) {
           .nav-links {
               display: none;
               position: absolute;
               top: 100%;
               left: 0;
               right: 0;
               background: #fff;
               border-bottom: 1px solid #eee;
               padding: 12px 20px;
               flex-direction: column
           }

           .nav-links a {
               margin: 10px 0
           }

           .burger {
               display: inline-block
           }

           .topnav.open .nav-links {
               display: flex
           }

           .topnav.open .burger span:nth-child(1) {
               transform: translateY(7px) rotate(45deg)
           }

           .topnav.open .burger span:nth-child(2) {
               opacity: 0
           }

           .topnav.open .burger span:nth-child(3) {
               transform: translateY(-7px) rotate(-45deg)
           }
       }

       /* Galería Ediciones*/
       /*Galeria*/
       .gallery-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 15px;
           margin-top: 20px;
       }

       .gallery-grid img {
           width: 100%;
           height: 200px;
           object-fit: cover;
           border-radius: 10px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
           transition: transform 0.3s ease;
       }

       .gallery-grid img:hover {
           transform: scale(1.05);
       }

       .glightbox-clean .gdesc-inner {
           text-align: center;
       }

       .extra-images {
           display: none;
       }

       #show-more-btn {
           margin-top: 20px;
           background: #f0c020;
           color: #333;
           padding: 10px 20px;
           border: none;
           border-radius: 8px;
           cursor: pointer;
           font-weight: bold;
           transition: background 0.3s;
       }

       #show-more-btn:hover {
           background: #dca916;
       }


       /* FAQ */
       .card-faq {
           background: #f0c020;
           color: #333333;
           padding: 15px;
           border-radius: 8px;
           cursor: pointer;
           transition: 0.3s;
           text-align: left;
           font-weight: bold;
           margin-bottom: 15px;
       }

       .card-faq-content {
           display: none;
           background: white;
           padding: 15px;
           border-radius: 8px;
           margin-top: 10px;
           color: #333333;
       }