/* 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;
}