/* =========================================
   1. CONFIGURACIÓN GLOBAL (VARIABLES)
   ========================================= */
:root {
    /* Paleta de Colores */
    --color-bg: #121212;
    --color-text-main: #ffffff;
    --color-text-secondary: #fafafa71;

    /* Colores de Acento */
    --color-accent-cyan: #80d8ff;
    --color-accent-red: #ff4d4d;
    --color-accent-yellow: #ebcacc;

    /* Sistema Glassmorphism (Vidrio) */
    --glass-bg: rgba(68, 68, 68, 0.25);
    --glass-blur: 10px;
    --glass-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);

    /* Bordes y Espaciado */
    --radius-lg: 35px;
    --radius-sm: 25px;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================
   2. RESET Y BASES
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    /* Evita scroll horizontal */
    line-height: 1.5;
}

/* Enlaces por defecto: sin subrayado */
a {
    text-decoration: none;
    color: inherit;
}

/* Imágenes responsive por defecto */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   3. LAYOUT PRINCIPAL
   ========================================= */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0px;

    position: relative;
    z-index: 1;
}


.main-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    max-width: 480px;
    flex: 1 1 300px;
}


.secondary-column {
    display: flex;
    flex-direction: column;
    /* Apila sus cajas verticalmente */
    align-items: center;
    /* Las centra */
    width: 100%;

    /* Mismas dimensiones que la principal para equilibrio */
    max-width: 480px;
    flex: 1 1 300px;

    /* Opcional: Un poco de espacio entre las cajas de esta columna */
    gap: 0;
}


/* =========================================
   4. COMPONENTES COMPARTIDOS (UI KIT)
   ========================================= */



/* --- Tarjeta con Foto de Fondo --- */
.photo-card {
    /* 1. DIMENSIONES Y FORMA */
    width: 90%;
    /* Igual que tus .glass-card para que se alineen */
    max-width: 450px;
    margin: 15px auto;
    /* Centrado automático */

    /* LA SOLUCIÓN: Usamos proporción matemática en vez de altura fija */
    aspect-ratio: 16 / 9;
    /* Forma rectangular perfecta (tipo video de YouTube) */
    /* Respaldo por si acaso: */
    min-height: 200px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Para que el texto que pongamos luego quede abajo */

    /* 2. IMAGEN */
    background-size: cover;
    /* Cubre el área */
    background-position: center center;
    /* Centra lo importante */
    background-repeat: no-repeat;
    background-color: #2a2a2a;
    /* Fondo gris oscuro mientras carga */

    /* 3. ESTÉTICA */
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

/* --- Capa de Vidrio Radial (Advanced Masking) --- */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 1. EL FONDO Y EL EFECTO (La base) */
    /* Un color oscuro sólido que se desvanecerá con la máscara */
    background-color: rgba(0, 0, 0, 0.7);

    /* Aumenté el blur a 8px para que se note bien el contraste con la parte nítida */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* 2. LA MÁSCARA MÁGICA (El recorte radial) */
    /* Esto hace que el efecto anterior solo sea visible en un círculo desde la esquina */
    -webkit-mask-image: radial-gradient(circle at 0% 0%,
            /* Centro del círculo: Arriba Izquierda */
            black 0%,
            /* Inicio: Totalmente visible (Blur + Oscuro) */
            black 40%,
            /* Mantiene la fuerza hasta el 40% del camino */
            transparent 85%
            /* Fin: Se vuelve invisible (Muestra la foto nítida) */
        );

    mask-image: radial-gradient(circle at 0% 0%,
            black 0%,
            black 40%,
            transparent 85%);

    /* 3. ALINEACIÓN DEL TEXTO */
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;

    /* Asegura que el texto no se salga de la zona oscurecida */
    padding-right: 20%;
}



/* --- Tipografía Dinámica de la Tarjeta --- */
.card-title {
    color: var(--color-text-main);

    /* DINAMISMO: 
       - Min: 1.1rem (aprox 17px) en móviles pequeños.
       - Ideal: Crece al 3% del ancho de pantalla.
       - Max: 1.6rem (aprox 25px) en desktop.
    */
    font-size: clamp(1.1rem, 3vw, 1.6rem);

    font-weight: 800;
    /* Extra bold para impacto */
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Elegancia */
    line-height: 1.1;
    /* Compacto verticalmente */
    margin: 0 0 6px 0;
    /* Separación pequeña con el párrafo */

    /* Sombra fuerte para asegurar lectura sobre cualquier foto */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.card-description {
    color: var(--color-text-secondary);
    /* Color grisáceo/blanco suave */

    /* DINAMISMO:
       - Min: 0.8rem (Texto pequeñito pero legible en móvil).
       - Max: 0.95rem (Texto estándar en desktop).
    */
    font-size: clamp(0.8rem, 2vw, 0.95rem);

    font-weight: 500;
    line-height: 1.4;

    /* Truco de diseño: Limita el ancho del texto al 85% 
       para que no se meta en la zona transparente de la derecha */
    max-width: 85%;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}





/* --- Icono Animado Flotante (Glass Circle) --- */
.glass-circle-icon {
    /* 1. Posición: Abajo a la Izquierda (Absoluta respecto a la carta) */
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    /* Para que flote encima de todo */

    /* 2. Tamaño del Círculo */
    width: 55px;
    height: 55px;

    /* 3. Efecto Vidrio Esmerilado (Igual que tus cajas pero en círculo) */
    background: rgba(92, 91, 91, 0.15);
    /* Un poco más claro para que resalte */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

    /* 4. Forma perfecta */
    border-radius: 50%;

    /* 5. Centrar la animación dentro del círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    /* Margen interno para que el icono no toque los bordes */

    /* Transición por si quieres que crezca al pasar el mouse */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Efecto Hover Opcional: Crece un poquito al pasar el mouse */
.glass-circle-icon:hover {
    transform: scale(1.15) rotate(5deg);
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--color-accent-cyan);
    cursor: pointer;
}

/* --- Corrección de Color para el Icono Lottie --- */
.glass-circle-icon svg path {
    /* 1. FORZAR RELLENO Y LÍNEAS */
    /* Usamos !important para sobrescribir el color que trae el archivo json */
    fill: var(--color-text-main) !important;
    /* Si el icono tiene relleno */
    stroke: var(--color-text-main) !important;
    /* Si el icono es de líneas */

    /* 2. OPCIONAL: Si quisieras el color CYAN, cambia lo de arriba por: 
       stroke: var(--color-accent-cyan) !important; 
    */

    /* Suavizado para que se vea HD */
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --- Tarjeta de Cristal Base --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    width: 90%;
    max-width: 450px;
    margin: 15px auto;
}


/* Alineación a la derecha para iconos específicos */
.icon-right {
    left: auto !important;
    /* Desactiva la izquierda */
    right: 20px;
    /* Lo pega a la derecha */
}



/* --- MODIFICADOR TIPO BANNER (VERSIÓN SLIM) --- */
.banner-mode {
    aspect-ratio: unset !important;
    min-height: unset !important;

    /* ALTURA MÁS DELGADA:
       - Min: 80px (Móvil)
       - Max: 100px (PC)
       Esto es casi un 30% más delgado que antes.
    */
    height: clamp(80px, 12vw, 100px);

    /* Alineación */
    justify-content: center;
}

/* Ajuste del contenido de texto para el espacio reducido */
.banner-mode .card-overlay {
    padding: 0 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrado vertical estricto */
}

/* Título un poco más compacto para que no choque */
.banner-mode .card-title {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    margin-bottom: 0;
    /* Quitamos margen para ahorrar espacio */
}

/* Descripción más sutil (opcional: puedes borrar esto si quieres la letra normal) */
.banner-mode .card-description {
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 2px;
}

/* --- TRUCO VISUAL: CENTRAR EL ICONO --- */
/* Como el banner es delgado, "bottom: 20px" ya no sirve. 
   Hay que centrarlo matemáticamente. */
.banner-mode .glass-circle-icon {
    /* Desactivamos la posición original */
    bottom: auto;

    /* Lo ponemos a la mitad exacta de la altura */
    top: 50%;
    transform: translateY(-50%);
    /* Corrección matemática de centro */

    /* Reducimos un poco el círculo para que respire (de 55px a 45px) */
    width: 45px;
    height: 45px;

    /* Aseguramos que siga a la derecha */
    left: auto !important;
    right: 20px;
}

/* --- Logo Principal --- */
.logo {
    width: clamp(110px, 35vw, 160px);

    height: auto;
    /* Opcional: una transición suave si cambias el tamaño de ventana manualmente */
    transition: width 0.3s ease;
}

/* --- Footer / Firmas (Dual Signature) --- */
.dual-signature {
    display: flex;
    align-items: center;
    justify-content: center;

    /* 1. OBLIGATORIO: Nunca bajar de línea */
    flex-wrap: nowrap;
    gap: clamp(4px, 1.5vw, 10px);

    opacity: 0.8;

    /* 3. ANCHO AJUSTADO AL CONTENIDO PERO CENTRADO:
       En lugar de forzar el ancho del logo, dejamos que ocupe lo necesario
       pero reducimos sus elementos internos para que visualmente se vea compacto.
    */
    width: fit-content;
    max-width: 100%;
    /* Seguridad para que no se salga de la pantalla */
}

.author-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Gap interno pequeño fijo */

    /* 4. TEXTO ELÁSTICO:
       Aquí está la magia.
       - Min: 8px (Móvil muy pequeño)
       - Ideal: 2.2% del ancho de pantalla
       - Max: 11px (Desktop)
    */
    font-size: clamp(8px, 2.2vw, 11px);

    /* Padding también elástico */
    padding: 3px clamp(6px, 1.5vw, 10px);

    color: var(--color-text-secondary);
    background: rgba(118, 117, 117, 0.26);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

    /* Aseguramos que el nombre no se parta nunca */
    white-space: nowrap;
}

/* Ajuste opcional para el separador y el "By" para que escalen igual */
.and-separator,
.by-label {
    /* Que acompañen el tamaño de la burbuja */
    font-size: clamp(8px, 2vw, 10px);
}

.icon-small {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.icon-small:hover {
    transform: scale(1.3);
}