/* Configuración de Fondo */
body {
    font-family: 'Poppins', sans-serif;
    background: url('https://images.unsplash.com/photo-1522383225653-ed111181a951?q=80&w=2076&auto=format&fit=crop') no-repeat center center fixed;
    background-size: cover;
    color: #2d3436;
}

/* Efecto Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
}

/* Estética Japonesa Dinámica */
.stamp-red {
    display: inline-block;
    background-color: #bc002d;
    color: white;
    padding: 5px 15px;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.section-title {
    font-family: 'Noto Serif JP', serif;
    color: #bc002d;
    border-bottom: 2px solid #ffb7c5; /* Rosa Sakura */
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.section-title.small { font-size: 1.4rem; }

/* Habilidades (Skill Tags) */
.skill-tag {
    background: #ffb7c5;
    color: #631e2b;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.skill-tag:hover {
    background: #bc002d;
    color: white;
    cursor: default;
}

/* Animaciones */
.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.shadow-text {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .glass-card { padding: 20px; }
}

/* Contenedor de desplazamiento horizontal en móvil */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.5) transparent;
}

.shadow-text {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

/* Estilo base de las tarjetas */
.exp-card {
    border-radius: 15px;
    padding: 25px;
    color: white;
    height: 100%;
    min-height: 200px;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.exp-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.exp-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.exp-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
}

.icon-box {
    font-size: 2rem;
    margin-bottom: 15px;
}

/* Colores específicos según tu imagen */
.card-teal { background: linear-gradient(135deg, #00c2cb, #00a8ad); }
.card-cyan { background: linear-gradient(135deg, #00d2ff, #3a7bd5); }
.card-orange { background: linear-gradient(135deg, #f79f1f, #ee5a24); }
.card-red { background: linear-gradient(135deg, #ff5e62, #ff9966); }

/* Ajuste para que se vea igual que la imagen (scroll horizontal) */
@media (max-width: 768px) {
    .flex-nowrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
/* Contenedor del Sello */
.hanko-container {
    flex-shrink: 0;
}

/* El Sello (Hanko) */
.hanko {
    width: 120px;
    height: 120px;
    border: 4px solid #bc002d; /* Rojo imperial japonés */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Ligeramente redondeado como un sello de madera */
    background-color: rgba(188, 0, 45, 0.05);
    position: relative;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.hanko::after {
    content: "";
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid rgba(188, 0, 45, 0.2);
}

.hanko-text {
    color: #bc002d;
    font-family: 'Noto Serif JP', serif;
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
}

/* Ajustes de la tarjeta personal */
.personal-card {
    padding: 50px !important;
    border-left: 6px solid #bc002d !important;
}

.personal-text p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .personal-card {
        text-align: center;
        padding: 30px !important;
    }
    .hanko {
        width: 100px;
        height: 100px;
    }
}

/* Estilo del Pop-up (Modal) */
.glass-modal {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px);
    border: 2px solid #ffb7c5; /* Borde color Sakura */
    border-radius: 20px;
}

.modal-header .btn-close {
    color: black
}

.modal-body ul {
    padding-left: 20px;
    color: #333;
}

.modal-body li {
    margin-bottom: 10px;
    font-size: 1.05rem;
}

/* Cursor de mano para indicar que es clickeable */
.exp-card {
    cursor: pointer;
}

/* --- CONFIGURACIÓN GENERAL --- */
body {
    font-family: 'Poppins', sans-serif; /* Tipografía limpia */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- CABECERA PRINCIPAL (HEADER) --- */
.main-header {
    height: 100vh; /* Ocupa toda la altura de la pantalla al inicio */
    /* Cambia 'fondo-sakura.jpg' por tu imagen. Si no, usa este degradado */
    background: url('fondo-sakura.jpg') no-repeat center center fixed; 
    background-size: cover;
    position: relative;
    z-index: 1;
}

/* El recuadro blanco centrado */
.header-card {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco con ligera transparencia */
    padding: 60px 80px;
    border-radius: 20px;
    max-width: 900px;
    width: 90%;
    position: relative;
}

/* Etiqueta Japonesa Roja */
.jap-tag {
    background-color: #bc002d; /* Rojo imperial japonés */
    color: white;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 4px;
    display: inline-block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* Títulos y Subtítulos */
.name-title {
    color: #333;
    margin-top: 20px;
}

.subtitle {
    color: #e6007e; /* Rosa vibrante */
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* Botones de Contacto (Negros) */
.btn-contact {
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}

.btn-contact:hover {
    background-color: #333;
    color: white;
}

.btn-contact .icon {
    margin-right: 8px;
    font-size: 1rem;
}

/* --- MENÚ DE NAVEGACIÓN PRINCIPAL (HEADER) --- */
.main-nav ul {
    font-size: 0.85rem;
    font-weight: 600;
}

.main-nav a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #bc002d; /* Rojo al pasar el ratón o estar activo */
}

.separator {
    color: #ccc;
    font-weight: 300;
}

/* --- MENÚ PEGAJOSO (STICKY MENU) --- */
.sticky-menu {
    position: fixed;
    top: -100px; /* Oculto por defecto arriba */
    width: 100%;
    z-index: 1000;
    transition: top 0.4s ease-in-out; /* Animación suave al aparecer */
    opacity: 0; /* Invisible por defecto */
}

/* Clase que se activa cuando el menú debe aparecer (manejado por CSS puro en este caso) */
/* Usamos :not() para que se active solo cuando el header principal no esté visible */
body:not(:has(.main-header:in-viewport)) .sticky-menu {
    top: 0;
    opacity: 1;
}

/* Alternativa compatible (si :has no funciona bien): 
   En una web real, usarías 10 líneas de JavaScript para activar/desactivar la clase 'visible' 
   al hacer scroll. He optado por la solución más limpia y moderna en CSS puro. */

/* Estilos internos del menú pegajoso */
.sticky-menu.navbar {
    padding: 8px 0;
}

.small-name {
    font-size: 1.1rem;
    color: #ffb7c5 !important; /* Rosa sakura suave */
}

.sticky-menu .nav-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8) !important;
}

.sticky-menu .nav-link:hover,
.sticky-menu .nav-item.active .nav-link {
    color: #bc002d !important; /* Rojo */
}

.sticky-contact .btn {
    font-size: 0.9rem;
    padding: 2px 8px;
}

/* Estilos específicos para el detalle de experiencia */
.exp-card-detail {
    padding-top: 40px !important;
    position: relative;
    border-top: 5px solid transparent;
}

.border-teal { border-color: #00c2cb !important; }
.border-cyan { border-color: #00d2ff !important; }
.border-orange { border-color: #f79f1f !important; }

.badge-company {
    position: absolute;
    top: -15px;
    left: 20px;
    padding: 5px 15px;
    border-radius: 5px;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.bg-teal { background-color: #00c2cb; }
.bg-cyan { background-color: #00d2ff; }
.bg-orange { background-color: #f79f1f; }

.description {
    font-size: 0.95rem;
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
}

.task-list {
    list-style: none;
    padding: 0;
}

.task-list li {
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.task-list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: #bc002d; /* Rojo japonés para coherencia */
    font-weight: bold;
}
a {
    text-decoration: none; /* Quita el subrayado */
    color: inherit;        /* Hereda el color del texto del contenedor (en lugar de ser azul) */
}

.foto-exp{width: 100%;
  height: 100%;
  object-fit: cover;}

.container2 {
            width: 90%;
            max-width: 1100px;
            background: var(--card-bg);
            padding: 40px;
            border-radius: 30px;
            box-shadow: 20px 20px 60px var(--shadow-dark),
                        -20px -20px 60px var(--shadow-light);
            position: relative;
            overflow: hidden;
        }

        /* Encabezado */
        .header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 1.8rem;
            margin: 0;
            font-weight: 700;
        }

        .header .kanji {
            font-weight: 300;
            color: #888;
        }

        .badge {
            display: inline-block;
            background: #2d3436;
            color: white;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.7rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        /* Grid Layout */
        .main-content {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 30px;
        }

        /* Columna Izquierda */
        .company-info h2 {
            font-size: 2.2rem;
            margin-bottom: 5px;
        }

        .date-badge {
            color: #777;
            font-size: 0.9rem;
            margin-bottom: 20px;
            display: block;
        }

        .description {
            line-height: 1.7;
            font-size: 0.95rem;
            text-align: justify;
            color: #555;
        }

        /* Columna Derecha (Items de Servicio) */
        .services-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .service-card {
            background-color: rgb(0, 194, 203, 0.2);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: flex-start;
            gap: 15px;
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 10px 10px 20px var(--shadow-dark);
        }

        .icon-box {
            width: 50px;
            height: 50px;
            background: var(--card-bg);
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            box-shadow: 4px 4px 10px var(--shadow-dark),
                        -4px -4px 10px var(--shadow-light);
        }

        .service-text h4 {
            margin: 0 0 5px 0;
            font-size: 0.9rem;
            color: var(--text-dark);
        }

        .service-text p {
            margin: 0;
            font-size: 0.8rem;
            color: #666;
            line-height: 1.4;
        }

        /* Decoración de fondo minimalista */
        .bg-pattern {
            position: absolute;
            top: -50px;
            right: -50px;
            font-size: 15rem;
            color: rgba(0, 0, 0, 0.02);
            z-index: 0;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .main-content { grid-template-columns: 1fr; }
            .container { padding: 20px; }
        }

/* --- RESPONSIVIDAD (MÓVILES) --- */
@media (max-width: 768px) {
    .header-card {
        padding: 40px 20px;
    }
    
    .name-title {
        font-size: 2rem;
    }
    
    .contact-btns {
        flex-direction: column;
        gap: 10px !important;
    }
    
    .main-nav ul {
        gap: 5px !important;
    }
    
    .separator {
        display: none; /* Ocultar guiones en móvil */
    }
}