/* Custom styles */

/* Custom color variables */
:root {
    --color-primary: #0088cc;
    --color-secondary: #005580;
    --color-accent: #e6f7ff;
    --color-light: #f8fcff;
}

/* Custom animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Custom utility classes */
.bg-gradient-custom {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Galería de contenidos */
.gallery-zoom-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #e6f7ff;
    cursor: zoom-in;
}
.gallery-zoom-trigger img { display: block; transition: transform .4s ease; }
.gallery-zoom-trigger:hover img { transform: scale(1.045); }
.gallery-zoom-trigger:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.gallery-zoom-icon, .gallery-item-number {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: rgba(0,45,70,.62);
    color: #fff;
    backdrop-filter: blur(7px);
}
.gallery-zoom-icon { top: 16px; left: 16px; opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; }
.gallery-zoom-trigger:hover .gallery-zoom-icon, .gallery-zoom-trigger:focus-visible .gallery-zoom-icon { opacity: 1; transform: scale(1); }
.gallery-item-number { right: 16px; bottom: 16px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; pointer-events: none; }

/* Visor ampliado */
.gallery-lightbox { position: fixed; inset: 0; width: min(94vw, 1180px); max-width: none; max-height: 92vh; margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 16px; background: transparent; }
.gallery-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.gallery-lightbox::backdrop { background: rgba(0,25,38,.9); backdrop-filter: blur(5px); }
.gallery-lightbox-content { position: relative; width: 100%; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #001923; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.gallery-lightbox-content img { display: block; width: 100%; height: min(78vh, 780px); object-fit: contain; }
.gallery-lightbox-content figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 36px 20px 18px; background: linear-gradient(to top, rgba(0,25,38,.85), transparent); color: #fff; text-align: center; }
.gallery-lightbox-close, .gallery-lightbox-nav { position: absolute; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(0,85,128,.88); color: #fff; }
.gallery-lightbox-close { top: -15px; right: -15px; }
.gallery-lightbox-nav { top: 50%; transform: translateY(-50%); }
.gallery-lightbox-prev { left: 18px; }
.gallery-lightbox-next { right: 18px; }

/* Galería de videos */
.video-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.video-gallery-card { min-width: 0; overflow: hidden; border-radius: .5rem; background: #fff; box-shadow: 0 4px 12px rgba(0,85,128,.12); transition: transform .3s ease, box-shadow .3s ease; }
.video-gallery-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,85,128,.2); }
.video-gallery-media { position: relative; background: #001923; }
.video-gallery-media video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #001923; }
.video-gallery-description > *:last-child { margin-bottom: 0; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Reduce all px-8 classes to px-3 on mobile */
    .px-8 {
        padding-left: 0.75rem !important; /* 12px */
        padding-right: 0.75rem !important; /* 12px */
    }

    .video-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-zoom-icon { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
    .video-gallery-grid { grid-template-columns: 1fr; }
    .gallery-lightbox { width: calc(100vw - 24px); }
    .gallery-lightbox-content img { height: 72vh; }
    .gallery-lightbox-close { top: 10px; right: 10px; }
    .gallery-lightbox-prev { left: 10px; }
    .gallery-lightbox-next { right: 10px; }
}

/* Etiqueta (emoji) de cada especificacion */
.spec-emoji { font-size: 2rem; line-height: 1; display: inline-block; }

/* Portada de los videos: el admin no tiene campo de poster, asi que la portada es
   el primer fotograma (#t=0.1 en el src) y los controles nativos aparecen recien
   al reproducir. Sin esto el video se ve como un rectangulo negro. */
.video-gallery-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,25,35,.45) 0%, rgba(0,25,35,.08) 45%, rgba(0,25,35,.5) 100%);
    transition: opacity .3s ease;
    pointer-events: none;
}
.video-gallery-media.is-playing::after { opacity: 0; }

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    background: rgba(0,45,70,.5);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, opacity .3s ease;
    backdrop-filter: blur(7px);
}
.video-play i { margin-left: 4px; }
.video-gallery-card:hover .video-play { background: var(--color-primary); border-color: transparent; transform: translate(-50%, -50%) scale(1.08); }
.video-gallery-media.is-playing .video-play { opacity: 0; pointer-events: none; }

/* El numero se corre a la izquierda: arriba a la derecha choca con el boton de
   pantalla completa de los controles nativos */
.video-gallery-media .gallery-item-number { top: 16px; bottom: auto; right: auto; left: 16px; transition: opacity .3s ease; }
.video-gallery-media.is-playing .gallery-item-number { opacity: 0; }

@media (max-width: 640px) {
    .video-play { width: 60px; height: 60px; font-size: 1.15rem; }
}

/* ==========================================================================
   Sistema de secciones
   El template mezclaba tamanos y colores a mano en cada bloque (y un titulo de
   registro podia ser mas grande que el titulo de su seccion). Estas clases lo
   dejan en un solo lugar. Van en el CSS y no como utilidades de Tailwind para
   que el ritmo no dependa de recordar la combinacion exacta en cada bloque.
   ========================================================================== */
.section-kicker {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.section-title {
    margin: 0 0 1rem;
    color: var(--color-secondary);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* Texto que viene del editor: hereda color y tamano del contenedor */
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text p { margin-bottom: .9em; }
.rich-text ul, .rich-text ol { margin: 0 0 .9em 1.15em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: .35em; }
.rich-text a { text-decoration: underline; }

/* Boton de llamada a la accion, igual en todos los bloques */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .95rem 2rem;
    border-radius: .75rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0,85,128,.18);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-cta:hover {
    background: var(--color-secondary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,85,128,.26);
}

/* Numero de orden de cada bloque de descripcion adicional */
.feature-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .9rem;
    background: rgba(0,136,204,.12);
    color: var(--color-primary);
    font-weight: 700;
    font-size: .95rem;
}

/* --- Tarjetas de especificaciones --- */
.spec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.spec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-primary);
    transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.spec-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: 0 18px 40px rgba(0,85,128,.14);
}
.spec-card:hover::before { width: 100%; }

/* Pastilla cuadrada: icono de Font Awesome o emoji */
.spec-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(0,136,204,.12);
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 1;
}
.spec-card-icon i { font-size: 1.5rem; }

/* Chip de ancho variable: la etiqueta es una palabra, no un icono */
.spec-card-chip {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    min-height: 2.125rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: rgba(0,136,204,.12);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.spec-card-index {
    flex: 0 0 auto;
    margin-left: auto;
    color: #cfe6f5;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

/* --- La galeria de videos va sobre fondo oscuro --- */
.video-gallery .section-kicker { color: #7fd4ff; }
.video-gallery .section-title { color: #fff; }
.video-gallery .text-gray-600,
.video-gallery .text-gray-700 { color: rgba(255,255,255,.75) !important; }
.video-gallery .btn-cta { background: #fff; color: var(--color-secondary); }
.video-gallery .btn-cta:hover { background: var(--color-accent); color: var(--color-secondary); }
/* La ficha de cada video es blanca: ahi el texto vuelve a ser oscuro */
.video-gallery-card .text-gray-600 { color: #4b5563 !important; }

/* En el celular el contenido va centrado: a un ancho de columna, el texto
   alineado a la izquierda con la imagen encima se ve desbalanceado */
@media (max-width: 767px) {
    .spec-card { text-align: center; }
    .spec-card .spec-card-icon,
    .spec-card .spec-card-chip { margin: 0 auto; }
    .spec-card-index { display: none; }
    .video-gallery-card .p-6,
    .gallery-card-copy { text-align: center; }
}

/* Video sin archivo subido: la portada sola, del porte del reproductor */
.video-portada { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #001923; }

/* --- Preguntas frecuentes --- */
.faq-item {
    overflow: hidden;
    border: 1px solid #cfe6f5;
    border-radius: 1rem;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover { border-color: var(--color-primary); }
/* La pregunta abierta se marca con el borde y la sombra, no invirtiendo la tarjeta */
.faq-item:has(.faq-content:not(.hidden)) {
    border-color: var(--color-primary);
    box-shadow: 0 14px 34px rgba(0, 85, 128, .12);
}

.faq-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.35rem 1.5rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.faq-button h3 {
    margin: 0;
    color: var(--color-secondary);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
}
.faq-item:has(.faq-content:not(.hidden)) .faq-button h3 { color: var(--color-primary); }
.faq-button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

.faq-icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: .8rem;
    transition: background .3s ease, color .3s ease;
}
.faq-item:has(.faq-content:not(.hidden)) .faq-icono { background: var(--color-primary); color: #fff; }
.faq-icono i { transition: transform .3s ease; }

.faq-content { padding: 0 1.5rem 1.5rem; }
.faq-content .rich-text { line-height: 1.8; }

/* Credito de Difundir al cierre: el cohete despega al pasar el mouse */
.creditos-emoji { display: inline-block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.creditos:hover .creditos-emoji { transform: translate(2px, -4px) rotate(-12deg); }

/* Subtitulo del encabezado: la bajada va DEBAJO del titulo. Arriba y en
   mayusculas, una frase completa competia con el titulo y parecia que estuvieran
   invertidos. El kicker queda solo para etiquetas cortas. */
.section-subtitle {
    max-width: 42rem;
    margin: 0 auto .9rem;
    color: var(--color-primary);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.5;
}

/* --- Bloques separados por color de fondo ---
   nth-of-type cuenta solo las secciones que la pagina trae: si se apaga un bloque,
   la alternancia sigue y nunca quedan dos iguales seguidos. La portada conserva
   el suyo; la seccion final tambien alterna, salvo donde su color es parte del diseno. */
section:not(.relative):not(.video-gallery):nth-of-type(odd) { background: #ffffff !important; }
section:not(.relative):not(.video-gallery):nth-of-type(even) { background: #dff0fa !important; }

/* Botones en mayusculas. Por CSS para no cambiar lo que escribe la tienda (y lo que
   va a WhatsApp o a los correos). !important: varias reglas del diseno lo fijan en none */
a[class*="btn"], a[class*="button"], a[class*="boton"], a[class*="cta"],
button[class*="btn"]:not(.accordion-button), button[class*="button"]:not(.accordion-button):not(.faq-button), button[class*="boton"], button[class*="cta"],
a[href="#formulario"], a[href="#contacto"], #captura-datos-form button, [data-landing-campana], #btnWhatsApp, #whatsappBoton,
#videos a { text-transform: uppercase !important; }

/* ==========================================================================
   Hero (bloque 2): trama de puntos sobre el degradado y curva de cierre.
   La curva toma el color del bloque siguiente, que siempre es el segundo
   section de la pagina (fondo par de la alternancia de arriba).
   ========================================================================== */
.hero-002__trama {
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 85%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 85%);
}
.hero-002__curva { height: 34px; }
.hero-002__curva path { fill: #dff0fa; }
.hero-002 h1 { text-shadow: 0 2px 18px rgba(0,40,70,.18); }
@media (min-width: 768px) {
    .hero-002__curva { height: 56px; }
}
@media (max-width: 768px) {
    /* El container baja a 12px en el celular: el texto del hero quedaba pegado al borde */
    .hero-002__contenido.container,
    .feature-contenedor.container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ==========================================================================
   Descripcion adicional (bloque 3)
   ========================================================================== */
/* Linea de acento bajo el titulo del destacado; centrada cuando el texto va centrado */
.feature-titulo { position: relative; padding-bottom: 1rem; }
.feature-titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.5rem;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.text-center > .feature-titulo::after { left: 50%; transform: translateX(-50%); }
@media (min-width: 768px) {
    .md\:text-left > .feature-titulo::after { left: 0; transform: none; }
}

/* Tarjetas de los demas registros: borde de color arriba y elevacion al pasar el mouse */
.feature-card {
    border-top: 4px solid var(--color-primary);
    transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,85,128,.14);
}