/* Estilos personalizados para la landing page */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc; /* Color de fondo muy claro */
    scroll-behavior: smooth; /* Para un desplazamiento suave entre secciones */
}
.hero-gradient {
    /* Gradiente de fondo para la sección Hero */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.text-shadow {
    /* Sombra de texto para mejorar la visibilidad sobre el gradiente */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sección de galería de app (capturas) */

.screenshot-frame {
    border-radius: 1.25rem;        /* similar a rounded-3xl */
    overflow: hidden;
    background: radial-gradient(circle at 0% 0%, #bbf7d0 0, #0f172a 45%, #020617 100%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25);
    position: relative;
}

.screenshot-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.35), transparent 40%, rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

.screenshot-text-card {
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(224, 242, 254, 0.9));
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.screenshot-text-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
    border-color: rgba(22, 163, 74, 0.9);
}


/* Tamaño más pequeño de interfaces */
.screenshot-frame.small {
    width: 80%;          /* reduce tamaño sin perder proporción */
    max-width: 280px;    /* tamaño ideal para mockups móviles */
    margin: 0 auto;
}

/* Imagen interior */
.screenshot-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

/* Animación suave al aparecer */
.fade-in-up {
    opacity: 0;
    transform: translateY(25px);
    animation: fadeUp 0.8s ease-out forwards;
    animation-delay: 0.15s;
}

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


/* ============================================
   EFECTO INCLINADO + IMAGEN UN POCO MÁS GRANDE
   ============================================ */

/* Imágenes más grandes */
.screenshot-frame.small {
    width: 95%;           /* más grande que antes */
    max-width: 330px;     /* subí el máximo */
    margin: 0 auto;
}

/* Contenedor con efecto 3D */
.screenshot-frame.small {
    perspective: 1200px;
}

/* Imagen inclinada por defecto */
.screenshot-frame.small img {
    transform: rotateY(-14deg) rotateX(4deg) rotateZ(-2deg);
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

/* Hover: se endereza y se agranda */
.screenshot-frame.small:hover img {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.06);
    box-shadow: 0 28px 60px rgba(0,0,0,0.38);
    filter: brightness(1.08);
}

/* Contenedor suave (levitación ligera también) */
.screenshot-frame.small:hover {
    transform: translateY(-4px);
}





/* Alternar la posición de imágenes y texto en cada fila de la galería */

/* Fila impar → imágenes izquierda, texto derecha (ya como está) */
.galeria-row:nth-child(odd) {
    direction: ltr;
}

/* Fila par → invertir todo el contenido */
.galeria-row:nth-child(even) {
    direction: rtl;
}

/* Para evitar invertir el contenido interior (solo afecta el orden) */
.galeria-row:nth-child(even) > * {
    direction: ltr;
}



/* ============================================
   NUEVA INCLINACIÓN IZQUIERDA / DERECHA
   ============================================ */

/* Reiniciar inclinación anterior */
.screenshot-frame.small img {
    transform: none !important;
    box-shadow: none !important;
}

/* FILAS NORMALES (1,2,4,5) → INCLINACIÓN ALTERNADA */
.galeria-row:not(:nth-child(3)):not(:nth-child(6)) .screenshot-frame.small:nth-child(1) img {
    transform: rotate(-4deg); /* inclinada a la izquierda */
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.galeria-row:not(:nth-child(3)):not(:nth-child(6)) .screenshot-frame.small:nth-child(2) img {
    transform: rotate(4deg); /* inclinada a la derecha */
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}


/* ============================================
   FILAS ESPECIALES: 3 y 6 → IMÁGENES CENTRADAS
   ============================================ */

.galeria-row:nth-child(3) .grid,
.galeria-row:nth-child(6) .grid {
    justify-items: center !important;
}

/* Y sus imágenes deben estar sin inclinación */
.galeria-row:nth-child(3) .screenshot-frame.small img,
.galeria-row:nth-child(6) .screenshot-frame.small img {
    transform: rotate(0deg) !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}




/* ============================================
   1. HACER EL TEXTO DEL CONTENEDOR MÁS GRANDE
   ============================================ */

.screenshot-text-card h3 {
    font-size: 1.5rem; /* antes ~1.25rem */
}

.screenshot-text-card p {
    font-size: 1.05rem;  /* antes era ~0.875rem */
    line-height: 1.55rem;
}


/* ============================================
   2. REDUCIR ESPACIO ENTRE LAS IMÁGENES
   ============================================ */

/* Reducir separación entre columnas internas */
.galeria-row .grid.grid-cols-2 {
    column-gap: 1rem !important;
}

/* Reducir espacio horizontal general de la fila */
.galeria-row {
    column-gap: 2rem !important;
}


/* ============================================
   3. CENTRAR BIEN LAS IMÁGENES DE FILA 3 Y 6
   ============================================ */

/* Forzar centrado REAL usando Tailwind override */
.galeria-row:nth-child(3) .grid,
.galeria-row:nth-child(6) .grid {
    display: flex !important;
    justify-content: center !important;
}

/* Evitar que la columna se estire hacia la izquierda/derecha */
.galeria-row:nth-child(3) .grid > div,
.galeria-row:nth-child(6) .grid > div {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================
   ACERCAR IMAGEN A LA DESCRIPCIÓN (FILAS 3 Y 6)
   ============================================ */

/* Fila 3: reducir distancia horizontal */
.galeria-row:nth-child(3) .grid {
    max-width: 450px !important; /* acercar contenedor */
    margin-left: 0 !important;
}

/* Fila 6: igual que fila 3 */
.galeria-row:nth-child(6) .grid {
    max-width: 450px !important;
    margin-left: 0 !important;
}

/* Evitar que se centre demasiado */
.galeria-row:nth-child(3) .grid > div,
.galeria-row:nth-child(6) .grid > div {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Acercar imagen al texto */
.galeria-row:nth-child(3),
.galeria-row:nth-child(6) {
    column-gap: 1.2rem !important; /* antes estaba más amplio */
}