:root {
         --bg: #0f0f12;
         /* negro profundo */
         --ink: #0f0f12;
         --paper: #ffffff;
         --gold: #f2b705;
         /* amarillo/oro del logo */
         --gold-2: #f9cd3a;
         --wine: #ffb800;
         /* rojo vino del logo */
         --wine-2: #7f1d1a;
         --steel: #22252b;
         /* gris oscuro */
         --muted: #7a8190;
         --ring: rgba(242, 183, 5, .35);
         --radius: 18px;
         --shadow: 0 14px 36px rgba(0, 0, 0, .22);
     }

     * {
         box-sizing: border-box
     }

     html,
     body {
         height: 100%
     }

     body {
         margin: 0;
         font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
         color: var(--ink);
         background: #fafafa;
     }

     .shell {
         max-width: 420px;
         margin: 0 auto;
         padding: 22px;
     }

     .phone {
         background: linear-gradient(180deg, var(--panel), var(--panel-2));
         border: 1px solid rgba(255, 255, 255, .06);
         border-radius: 28px;
         box-shadow: var(--shadow);

         /* permite scroll interno */
         position: relative;
         max-height: 95vh;
         /* simula el alto de una pantalla */
     }

     /* la barra debe adherirse al contenedor, no al viewport */
     .phone .nav {
         position: sticky;
         top: 0;
         width: 100%;
         z-index: 50;
     }

     img {
         max-width: 100%;
         display: block
     }

     a {
         color: inherit
     }

     /* ====== NAV ====== */
     /* diseño visual del nav */
     .nav {
         background: rgba(255, 255, 255, 0.9);

         border-bottom: 1px solid #eceff3;
     }

     .navBar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         max-width: 1200px;
         margin: 0 auto;
         padding: 14px 18px;
         background: rgba(255, 255, 255, .82);
         border-bottom: 1px solid #eceff3;
     }

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

     .brand img {
         height: 36px;
         width: auto
     }

     .menu {
         display: flex;
         gap: 22px
     }

     .menu a {
         font-weight: 800;
         text-decoration: none;
         color: #3b4252
     }

     .menu a:hover,
     .menu a.active {
         color: var(--wine)
     }

     .hamb {
         display: block;
         border: 1px solid #e5e7eb;
         border-radius: 10px;
         padding: 10px 12px;
         background: #f0c333ff;
         color: #ffffff;
     }

     /* 🔹 Por defecto el drawer debe estar oculto en escritorio */
     .drawer {
         display: none;
     }

     @media (max-width:1280px) {
         .menu {
             display: none
         }

         .hamb {
             display: block;
             color: #ffffff;
         }

         .drawer-footer {
             padding: 20px 24px;
             border-top: 1px solid rgba(255, 255, 255, 0.1);
             margin-top: 20px;
             text-align: center;
             font-size: 0.8rem;
             color: #888;
         }

         /* Overlay */
         .overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
             background: rgba(0, 0, 0, 0.5);
             backdrop-filter: blur(4px);
             z-index: 1999;
             opacity: 0;
             visibility: hidden;
             transition: all 0.3s ease-in-out;
         }

         .overlay.active {
             opacity: 1;
             visibility: visible;
         }

         .drawer-content {
             padding: 20px 24px;
         }

         .drawer a {
             display: flex;
             align-items: center;
             padding: 16px 20px;
             color: #e0e0e0;
             text-decoration: none;
             border-radius: 12px;
             margin-bottom: 8px;
             transition: all 0.3s ease;
             font-weight: 500;
             position: relative;
             overflow: hidden;
         }

         /* DRAWER MEJORADO */
         .drawer {
             display: block;
             position: fixed;
             top: 0;
             right: 0;
             height: 100vh;
             width: min(84vw, 380px);
             background: linear-gradient(160deg, #101114 0%, #1a1c20 50%, #23262b 100%);
             color: #fff;
             transform: translateX(100%);
             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 2000;
             box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6);
             padding: 0;
             overflow-y: auto;
             backdrop-filter: blur(10px);
             border-left: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 20px 0 0 20px;
         }

         .drawer.open {
             transform: translateX(0);
         }

         .drawer-header {
             padding: 30px 24px 20px;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
             background: rgba(255, 255, 255, 0.05);
         }

         .drawer-title {
             font-size: 1.5rem;
             font-weight: 700;
             background: linear-gradient(135deg, #ffb800, #ffb800);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }

         .drawer a::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
             transition: left 0.5s ease;
         }

         .drawer a:hover::before {
             left: 100%;
         }

         .drawer a:hover {
             background: rgba(255, 255, 255, 0.08);
             color: white;
             transform: translateX(5px);
         }

         .drawer a:active {
             background: rgba(255, 107, 107, 0.2);
         }

         /* Scrollbar personalizado */
         .drawer::-webkit-scrollbar {
             width: 6px;
         }

         .drawer::-webkit-scrollbar-track {
             background: rgba(255, 255, 255, 0.1);
             border-radius: 3px;
         }

         .drawer::-webkit-scrollbar-thumb {
             background: rgba(255, 255, 255, 0.3);
             border-radius: 3px;
         }

         .drawer::-webkit-scrollbar-thumb:hover {
             background: rgba(255, 255, 255, 0.5);
         }

         /* Responsive */
         @media (max-width: 480px) {
             .drawer {
                 width: 90vw;
             }

             h1 {
                 font-size: 2rem;
             }
         }

         .drawer.show {
             transform: translateX(0);
         }

         .backdrop {
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.55);
             display: none;
             z-index: 1500;

             /* 🔹 debajo del drawer pero encima del contenido */
             .backdrop {
                 display: none !important;
             }
         }

         .backdrop.show {
             display: block;
         }

         body.menu-open {
             overflow: hidden;
             touch-action: none;
         }

         .drawer a {
             display: block;
             padding: 14px 6px;
             color: #e6e8ec;
             text-decoration: none;
             border-bottom: 1px solid rgba(255, 255, 255, .06)
         }

         .drawer .cta {
             margin-top: 14px
         }

         .close-btn {
             background: rgba(255, 255, 255, 0.1);
             border: none;
             color: white;
             width: 36px;
             height: 36px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s ease;
         }

         .close-btn:hover {
             background: rgba(255, 255, 255, 0.2);
             transform: rotate(90deg);
         }
     }

     /* ====== HERO ====== */
     .hero {
         background:
             radial-gradient(1000px 500px at 80% -10%, rgba(242, 183, 5, .25), transparent 55%),
             linear-gradient(180deg, #ffffff, #fbfbfb);
         border-bottom: 1px solid #eceff3;
     }

     .wrap {
         max-width: 1200px;
         margin: 0 auto;
         padding: 5px 15px
     }

     .heroGrid {

         grid-template-columns: 1.2fr 1fr;
         gap: 15px;
         align-items: center;
         text-align: center;
     }

     .h1 {
         font-size: clamp(28px, 6vw, 56px);
         line-height: 1.05;
         margin: 6px 0 10px;
         color: #0f1220
     }

     .h1 .em {
         color: var(--gold)
     }

     .lede {
         color: #586274;
         max-width: 52ch;
         margin: 0px;
     }

     .ctaRow {
         display: flex;
         gap: 12px;
         flex-wrap: wrap;
         margin-top: 12px
     }

     .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         padding: 12px 18px;
         border-radius: 999px;
         text-decoration: none;
         font-weight: 900;
         box-shadow: var(--shadow);
         border: 1px solid rgba(0, 0, 0, .06)
     }

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

     .btn.secondary {
         background: #0f1220;
         color: #fff
     }

     .badge {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         /* centra el contenido interno */
         gap: 10px;
         background: #0f1220;
         color: #fff;
         padding: 8px 12px;
         border-radius: 999px;
         font-weight: 800;
         margin: 0 auto;
         /* centra el badge horizontalmente */
         text-align: center;
     }



     .heroCard .title {
         font-weight: 900;
         margin: 0 0 6px
     }

     .heroCard .line {
         height: 1px;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
         margin: 8px 0 10px
     }

     @media (max-width:960px) {
         .heroGrid {
             grid-template-columns: 1fr;
             text-align: center;
         }
     }

     /* El card actúa como marco contenedor */


     /* La imagen llena el card y mantiene proporción */
     .heroCard .heroImg {
         display: block;
         width: 100%;
         height: auto;
         /* mantiene proporción en móvil */
         object-fit: cover;
     }

     .heroCard {
         background: #0f1220;
         border-radius: 22px;
         border: 1px solid rgba(255, 255, 255, .06);
         box-shadow: var(--shadow);
         padding: 0;
         /* ⬅️ quita el marco interior */
         overflow: hidden;
         /* ⬅️ oculta rebases y redondea la imagen */
         grid-column: 1 / -1;
         /* ⬅️ Hace que el card ocupe ambas columnas del grid */
         width: 100%;
     }


     /* ====== SECTION TITLES ====== */
     .section {
         padding: 42px 18px
     }

     .titleBar {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 16px
     }

     .dot {
         width: 12px;
         height: 12px;
         border-radius: 3px;
         background: linear-gradient(180deg, var(--gold), var(--gold-2));
         box-shadow: 0 2px 10px var(--ring)
     }

     h2 {
         margin: 0;
         font-size: clamp(22px, 4.6vw, 36px)
     }

     .sub {
         color: #606b7a;
         max-width: 68ch
     }

     /* ====== CARDS ====== */
     .grid3 {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 16px
     }

     .card {
         background: #fff;
         border: 1px solid #e8edf3;
         border-radius: 20px;
         padding: 18px;
         box-shadow: 0 12px 26px rgba(15, 18, 32, .06);
     }

     .card h3 {
         margin: 6px 0
     }

     .chip {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 6px 10px;
         border-radius: 999px;
         background: rgba(242, 183, 5, .14);
         color: #6b4d00;
         font-weight: 800;
         border: 1px solid rgba(242, 183, 5, .35)
     }

     .card .list {
         margin: 10px 0 0;
         padding: 0 0 0 18px;
         color: #556074
     }

     @media (max-width:960px) {
         .grid3 {
             grid-template-columns: 1fr
         }
     }

     /* ====== Misión / Visión ====== */
     .mv {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px
     }

     .mv .item {
         background: #0f1220;
         color: #fff;
         border: 1px solid rgba(255, 255, 255, .06);
         border-radius: 20px;
         padding: 18px
     }

     .mv .item h3 {
         margin: 6px 0;
         color: var(--gold)
     }

     @media (max-width:860px) {
         .mv {
             grid-template-columns: 1fr
         }
     }

     /* ====== FOOTER ====== */
     footer {
         background: #0f1220;
         color: #cbd2df;
         border-top: 4px solid var(--gold);
     }

     .footerWrap {
         max-width: 1200px;
         margin: 0 auto;
         padding: 26px 18px;
         display: grid;
         grid-template-columns: 2fr 1fr 1fr;
         gap: 16px
     }

     .footerWrap a {
         color: #1f1f1f;
         text-decoration: none
     }

     .footerWrap a:hover {
         color: var(--gold)
     }

     .copy {
         background: #0c0f18;
         color: #93a0b3;
         text-align: center;
         padding: 12px;
         font-size: 13px
     }

     @media (max-width:860px) {
         .footerWrap {
             grid-template-columns: 1fr
         }
     }

     /* === CONTENEDOR GENERAL === */
     .social-float {
         position: fixed;
         right: 25px;
         bottom: 16px;
         display: flex;
         flex-direction: column;
         gap: 14px;
         z-index: 90;
     }

     /* === ESTILO BASE DE LOS ICONOS === */
     .social-float a {
         width: 58px;
         height: 58px;
         border-radius: 50%;
         display: grid;
         place-items: center;
         color: #fff;
         font-size: 26px;
         box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
         text-decoration: none;
         border: 2px solid #fff;
         transition: transform 0.25s ease, box-shadow 0.25s ease;
     }

     .social-float a:hover {
         transform: translateY(-3px);
         box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
     }

     /* === COLORES OFICIALES === */
     .QR {
         background: linear-gradient(180deg, #1b1b1a, #2e2e2d);
     }

     .comp {
         background: linear-gradient(180deg, #ffb800, #ffb800);
     }

     .usu {
         background: linear-gradient(180deg, #61657c, #7684a1);
     }

     .tel {
         background: linear-gradient(180deg, #333, #000);
     }

     .ub {
         background: linear-gradient(180deg, #ff4d4d, #c0392b);
         /* rojo ubicación */
     }

     .fa {
         background: linear-gradient(180deg, #1877f2, #0d5bd7);
         /* azul facebook */
     }

     .wa {
         background: linear-gradient(180deg, #25d366, #1ebe5d);
         /* verde whatsapp */
     }

     /* ===== Antes / Después (comparador) ===== */
     .ba-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 14px;
         margin-top: 18px;
     }

     @media (max-width:900px) {
         .ba-grid {
             grid-template-columns: 1fr
         }
     }

     .ba {
         position: relative;
         border-radius: 16px;
         overflow: hidden;
         border: 1px solid #e6ecf3;
         background: #f4f6fa;
         box-shadow: 0 10px 24px rgba(15, 18, 32, .06);
     }

     .ba img {
         display: block;
         width: 100%;
         height: 380px;
         object-fit: cover
     }

     @media (max-width:640px) {
         .ba img {
             height: 280px
         }
     }

     .ba .after-wrap {
         position: absolute;
         inset: 0;
         overflow: hidden;
         width: 50%;
         /* posición inicial */
     }

     .ba .after-wrap img {
         width: 100%;
         height: 100%;
         object-fit: cover
     }

     .ba .divider {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         width: 2px;
         background: rgba(255, 255, 255, .85);
         box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
     }

     .ba .handle {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 42px;
         height: 42px;
         border-radius: 50%;
         background: rgba(15, 18, 32, .92);
         color: #fff;
         display: grid;
         place-items: center;
         font-weight: 900;
         font-size: 18px;
         cursor: ew-resize;
         border: 2px solid #fff;
         box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
     }

     .ba .labels {
         position: absolute;
         inset: auto 0 0 0;
         display: flex;
         justify-content: space-between;
         padding: 8px 10px;
         font-weight: 900;
         text-transform: uppercase;
         font-size: 12px;
         letter-spacing: .06em;
         color: #fff;
         background: linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .35));
     }

     .ba .pill {
         background: rgba(0, 0, 0, .55);
         border: 1px solid rgba(255, 255, 255, .25);
         padding: 6px 10px;
         border-radius: 999px;
     }

     .logo-block {
         display: flex;
         align-items: center;
         justify-content: center;

         max-width: 900px;
         /* más ancho permitido */
     }

     .logo-block img {
         height: 130px;
         /* antes 100px */
         width: auto;
     }

     .logo-text {
         display: flex;
         flex-direction: column;
         line-height: 1.1;
     }

     .logo-text h1 {
         font-size: 35px;
         /* más grande */
         font-weight: 900;
         color: #111;
         margin: 0;
     }

     .logo-text h2 {
         font-size: 40px;
         /* más grande */
         font-weight: 900;
         color: #111;
         margin: 2px 0 0;
     }

     .logo-text h2 span {
         color: var(--gold);
     }

     /* opcional: tagline si la reactivas más adelante */
     .logo-text .tagline {
         margin-top: 8px;
         font-size: 16px;
         font-weight: 700;
         color: #333;
         background: #fff7d1;
         display: inline-block;
         padding: 4px 12px;
         border-radius: 999px;
     }

     /* 📱 Responsive */
     @media (max-width: 768px) {
         .logo-block {
             text-align: center;
         }

         .logo-block img {
             height: 110px;
         }

         .logo-text h1 {
             font-size: 32px;
         }

         .logo-text h2 {
             font-size: 35px;
         }

         .logo-text .tagline {
             font-size: 13px;
         }

         .lade {
             margin-top: 0px;
         }

         .h4 {
             margin: 0px;
         }
     }

     /* === Secciones === */
     .section {
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 16px;
         padding: 20px;

         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         animation: fadeIn 1s ease;
     }

     /* === Formulario de contacto === */
     .contact-form form {
         display: grid;
         gap: 12px;
     }

     .contact-form input,
     .contact-form textarea {

         border-radius: 10px;
         padding: 10px;
         background: rgba(255, 255, 255, 0.07);
         color: #1f1f1f;
         font-size: 15px;
     }

     .contact-form input:focus,
     .contact-form textarea:focus {
         outline: 2px solid #f5bf19;
         background: rgba(255, 255, 255, 0.1);
     }

     .btn-modern {
         display: inline-block;
         background: linear-gradient(90deg, #f2c32a, #d2aa28);
         color: #fff;
         padding: 14px 26px;
         border-radius: 30px;
         font-weight: 700;
         text-decoration: none;
         transition: all 0.3s ease;
     }

     .btn-modern:hover {
         transform: scale(1.05);
         box-shadow: 0 0 20px #a88a25;
     }

     .rating-block {
         text-align: center;
         padding: 40px 20px;
     }

     .rating-block h2 {
         font-size: clamp(22px, 4vw, 32px);
         color: #111;
         margin-bottom: 10px;
     }

     .rating-block p {
         color: #555;
         max-width: 480px;
         margin: 0 auto 20px;
     }

     .btn.google-review {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         background: #1f1f1f;
         color: #fff;
         border-radius: 999px;
         padding: 12px 20px;
         font-weight: 900;
         text-decoration: none;
         box-shadow: 0 4px 20px rgba(66, 133, 244, 0.3);
         transition: transform 0.25s ease, box-shadow 0.25s ease;
     }

     .btn.google-review:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 24px rgba(66, 133, 244, 0.4);
     }

     .stars {
         margin-top: 16px;
         font-size: 20px;
         color: #fbbc05;
         font-weight: 800;
         display: grid;
         ;
     }


     /* === ESTILOS PARA LOS MODALES (con scroll interno) === */
     .modal {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.7);
         z-index: 3000;
         justify-content: center;
         align-items: center;
         overflow-y: auto;
         /* permite scroll general si es necesario */
         padding: 30px 10px;
         /* espacio para no cortar el contenido */
     }

     .modal.show {
         display: flex;
     }

     /* Contenido del modal con scroll interno */
     .modal-content {
         background: #fff;
         border-radius: 20px;
         padding: 25px;
         max-width: 420px;
         width: 90%;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
         position: relative;
         color: #111;
         text-align: left;
         animation: popUp 0.3s ease;
         max-height: 95vh;
         /* 🔹 límite de altura visible */
         overflow-y: auto;
         /* 🔹 activa scroll interno si hay mucho contenido */
         scrollbar-width: thin;
         /* Firefox */
         scrollbar-color: #f2b705 #eee;
         /* Colores personalizados */
     }

     /* Scrollbar personalizado (para navegadores WebKit: Chrome, Edge, etc.) */
     .modal-content::-webkit-scrollbar {
         width: 8px;
     }

     .modal-content::-webkit-scrollbar-track {
         background: #eee;
         border-radius: 10px;
     }

     .modal-content::-webkit-scrollbar-thumb {
         background: #f2b705;
         border-radius: 10px;
     }

     .close {
         position: absolute;
         top: 10px;
         right: 15px;
         font-size: 24px;
         cursor: pointer;
         color: #444;
         transition: color 0.3s;
     }

     .close:hover {
         color: var(--gold);
     }

     @keyframes popUp {
         from {
             transform: translateY(20px);
             opacity: 0;
         }

         to {
             transform: translateY(0);
             opacity: 1;
         }
     }

     /* === Responsive === */
     @media (max-width: 480px) {

         .modal-content {
             width: 92%;
             padding: 20px;
         }

         .close {
             top: 15px;
             right: 20px;
             font-size: 28px;
         }
     }

     .comentarios-list {
         margin-top: 20px;
         display: flex;
         flex-direction: column;
         gap: 15px;
     }

     .comentario {
         background: #fff7d8;
         border-left: 4px solid #f2b705;
         border-radius: 10px;
         padding: 15px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
         text-align: left;
     }

     .comentario strong {
         font-size: 15px;
         color: #111;
     }

     .comentario small {
         color: #777;
         font-size: 12px;
     }

     .comentario p {
         margin-top: 6px;
         color: #333;
         line-height: 1.5;
         font-size: 14px;
     }

     /* === GALERÍA CON SECCIONES === */
     .modal-gallery {
         max-width: 1000px;
         width: 95%;
         height: 90vh;
         overflow-y: auto;
     }

     .gallery-tabs {
         display: flex;
         justify-content: center;
         gap: 10px;
         margin: 15px 0 25px;
         flex-wrap: wrap;
     }

     .tab-btn {
         background: #0f1220;
         color: #fff;
         border: none;
         border-radius: 20px;
         padding: 10px 18px;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .tab-btn:hover {
         background: var(--gold);
         color: #111;
     }

     .tab-btn.active {
         background: var(--gold);
         color: #111;
         box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
     }

     /* === GRID DE IMÁGENES === */
     .gallery-grid {
         display: none;
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 12px;
         margin-top: 12px;
     }

     .gallery-grid.active {
         display: grid;
     }

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

     .gallery-grid img:hover {
         transform: scale(1.05);
         box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
     }

     @media (max-width: 600px) {
         .gallery-grid img {
             height: 120px;
         }
     }

     /* === LIGHTBOX NAVEGABLE === */
     .lightbox {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.88);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 4000;
         animation: fadeIn 0.3s ease;
     }

     .lightbox-content {
         position: relative;
         max-width: 90vw;
         max-height: 90vh;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .lightbox-content img {
         max-width: 100%;
         max-height: 85vh;
         border-radius: 14px;
         box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
         transition: transform 0.3s ease;
     }

     /* Botón de cierre */
     .lightbox-close {
         position: absolute;
         top: -40px;
         right: -10px;
         background: var(--gold);
         color: #111;
         font-size: 24px;
         font-weight: bold;
         border: none;
         border-radius: 50%;
         width: 36px;
         height: 36px;
         cursor: pointer;
         box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
         transition: transform 0.3s ease;
     }

     .lightbox-close:hover {
         transform: scale(1.1);
     }

     /* Flechas de navegación */
     .lightbox-arrow {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         font-size: 40px;
         color: #fff;
         background: rgba(0, 0, 0, 0.4);
         width: 55px;
         height: 55px;
         border-radius: 50%;
         display: grid;
         place-items: center;
         cursor: pointer;
         transition: background 0.3s ease;
         user-select: none;
     }

     .lightbox-arrow:hover {
         background: rgba(0, 0, 0, 0.7);
     }

     .lightbox-arrow.left {
         left: -70px;
     }

     .lightbox-arrow.right {
         right: -70px;
     }

     /* === CONTADOR DEL LIGHTBOX === */
     .lightbox-counter {
         position: absolute;
         bottom: -35px;
         left: 50%;
         transform: translateX(-50%);
         color: #fff;
         background: rgba(0, 0, 0, 0.6);
         padding: 6px 14px;
         border-radius: 20px;
         font-size: 14px;
         font-weight: 600;
         letter-spacing: 0.5px;
         user-select: none;
     }

     @media (max-width: 768px) {
         .lightbox-counter {
             bottom: -25px;
             font-size: 13px;
         }
     }

     @media (max-width: 768px) {
         .lightbox-arrow.left {
             left: 10px;
         }

         .lightbox-arrow.right {
             right: 10px;
         }

         .lightbox-close {
             top: -30px;
             right: 0;
         }
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     /* === SUBMENÚ EN EL DRAWER === */
     .submenu {
         margin-top: 5px;
     }

     .submenu-toggle {
         width: 100%;
         background: none;
         border: none;
         color: #fff;
         text-align: left;
         font-size: 16px;
         padding: 14px 6px;
         cursor: pointer;
         border-bottom: 1px solid rgba(255, 255, 255, .06);
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .submenu-toggle .arrow {
         font-size: 13px;
         transition: transform 0.3s ease;
     }

     .submenu.open .submenu-toggle .arrow {
         transform: rotate(180deg);
     }

     .submenu-content {

         flex-direction: column;
         padding-left: 2px;
         background: rgba(255, 255, 255, 0.05);
     }

     .submenu-content a {
         color: #ddd;
         padding: 10px 6px;
         text-decoration: none;
         border-bottom: 1px solid rgba(255, 255, 255, .05);
         font-size: 15px;
     }

     .submenu-content a:hover {
         color: var(--gold);
     }

     .submenu.open .submenu-content {
         display: flex;
         animation: slideDown 0.3s ease;
     }

     @keyframes slideDown {
         from {
             opacity: 0;
             transform: translateY(-8px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* === Estilo del modal de QR === */
     .qr-modal {
         display: none;
         /* oculto por defecto */
         position: fixed;
         z-index: 1000;
         padding-top: 80px;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         overflow: auto;
         background-color: rgba(0, 0, 0, 0.8);
         animation: fadeIn 0.3s ease;
     }

     .qr-modal-content {
         margin: auto;
         display: block;
         width: 80%;
         max-width: 400px;
         border-radius: 14px;
         background: #fff;
         padding: 10px;
         animation: zoomIn 0.4s ease;
     }

     .qr-close {
         position: absolute;
         top: 30px;
         right: 40px;
         color: #fff;
         font-size: 40px;
         font-weight: bold;
         cursor: pointer;
         transition: color 0.3s;
     }

     .qr-close:hover {
         color: #22c6f3;
     }

     /* Animaciones */
     @keyframes zoomIn {
         from {
             transform: scale(0.5);
             opacity: 0;
         }

         to {
             transform: scale(1);
             opacity: 1;
         }
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     /* Móviles */
     @media (max-width: 480px) {
         .qr-modal-content {
             width: 90%;
             max-width: 300px;
         }

         .qr-close {
             top: 20px;
             right: 25px;
             font-size: 30px;
         }

     }

     /* Texto debajo del QR */
     .qr-text {
         color: #ffb800;
         font-size: 1rem;
         margin-top: 15px;
         font-weight: 600;
         text-align: center;
         animation: pulseText 1.6s infinite;
     }

     /* Efecto pulsante del texto */
     @keyframes pulseText {

         0%,
         100% {
             opacity: 1;
             transform: scale(1);
         }

         50% {
             opacity: 0.6;
             transform: scale(1.05);
         }
     }

     a.row[href$=".vcf"] {
         background: linear-gradient(90deg, ffb800, #0e2237);
         color: #fff;
         box-shadow: 0 4px 10px rgba(243, 222, 34, 0.3);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     a.row[href$=".vcf"]:hover {
         transform: scale(1.03);
         box-shadow: 0 0 20px rgba(243, 205, 34, 0.6);
     }

     .heroText {
         text-align: center;
         /* centrado general */
         margin: 0 auto;
         /* centrado horizontal */
         max-width: 700px;
         /* ancho máximo en web */
         text-align: justify;
     }

     .heroText h4 {
        
         font-weight: 800;
         margin-bottom: 8px;
         color: #111;
     }

     .heroText .lede {
         color: #586274;
         max-width: 100%;
         /* deja que fluya bien */
         line-height: 1.6;
         margin: 0 auto;
         font-size: 1rem;
         text-align: justify;
         margin-bottom: 10px;
     }

     /* 🔹 Ajuste para pantallas grandes */
     @media (min-width: 900px) {
         .heroText {
             text-align: left;
             /* alineado al texto */
             margin-left: 0;
             text-align: justify;
             margin-bottom: 10px;
         }
     }