/* ============================================================
   MODO NORMAL — TEMA POP/COMERCIAL (capa sobre site.css)
   Mismo lenguaje que /tour y Modo IA: papel + tinta + coral +
   ámbar, píldoras sticker y sombras duras.
   Quitar este <link> del _Layout = volver al tema oscuro.
   ============================================================ */
:root {
    --pop-ink: #101014;
    --pop-paper: #f0ede6;
    --pop-coral: #ff4e45;
    --pop-amber: #ffc933;
    --pop-spring: cubic-bezier(.2, 1.5, .35, 1);
}

/* ── base ────────────────────────────────────────────────── */
body {
    background: var(--pop-paper) !important;
    color: var(--pop-ink);
}
.grid-background {
    opacity: .5;
    filter: invert(1);
}
.background-particles, .particle-bg { display: none; }

/* texto genérico: tinta en vez de blancos translúcidos */
h1, h2, h3, h4, h5, h6, p, span, li, label {
    color: inherit;
}

/* ── navegación flotante ─────────────────────────────────── */
.floating-nav {
    background: #fff;
    border: 2px solid var(--pop-ink);
    box-shadow: 0 5px 0 rgba(16, 16, 20, 0.18);
    border-radius: 999px;
}
.floating-nav .nav-link {
    color: rgba(16, 16, 20, 0.62);
}
.floating-nav .nav-link:hover { color: var(--pop-ink); background: var(--pop-paper); }
.floating-nav .nav-link.active {
    color: var(--pop-ink);
    background: var(--pop-amber);
    font-weight: 800;
}
.floating-nav .nav-icon { color: inherit; }
.nav-fab {
    background: var(--pop-ink);
    color: #fff;
    border: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}

/* ── toggles superiores (sticker) ────────────────────────── */
.mode-toggle {
    background: var(--pop-amber);
    color: var(--pop-ink) !important;
    border: none;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
    transform: rotate(-1deg);
}
.mode-toggle i { color: var(--pop-ink) !important; }
.mode-toggle:hover { background: var(--pop-amber); transform: rotate(1deg) translateY(-2px); }
.mode-toggle--tour {
    right: 168px;
    background: var(--pop-coral);
    color: #fff !important;
    transform: rotate(1deg);
}
.mode-toggle--tour i { color: rgba(255, 255, 255, 0.9) !important; }
.mode-toggle--tour:hover { background: var(--pop-coral); transform: rotate(-1deg) translateY(-2px); }
@media (max-width: 600px) {
    .mode-toggle--tour { right: 62px; }
}

/* ── hero ────────────────────────────────────────────────── */
.hero-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pop-ink) !important;
    font-weight: 900;
}
.hero-role, .hero-location, .experience-text, .hero-status { color: #4c4a45; }
.role-chip {
    background: #fff;
    border: 1.5px solid var(--pop-ink);
    color: var(--pop-ink);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.15);
}
.hero-badge {
    background: #fff !important;
    border: 1.5px solid var(--pop-ink);
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.15);
    border-radius: 999px;
}
.badge-text, .hero-badge span { color: var(--pop-ink) !important; }
.photo-glow { display: none; }
.profile-photo {
    border: 4px solid var(--pop-ink) !important;
    box-shadow: 12px 12px 0 var(--pop-amber) !important;
}
.status-indicator { border-color: #fff; }
.hero-status span { color: #4c4a45; }

.social-link {
    background: #fff !important;
    border: 2px solid var(--pop-ink) !important;
    color: var(--pop-ink) !important;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.2);
    transition: transform .2s var(--pop-spring), box-shadow .2s;
}
.social-link:hover {
    background: var(--pop-ink) !important;
    color: #fff !important;
    transform: translateY(-3px);
}
.cta-primary {
    background: var(--pop-coral) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28) !important;
}
.cta-primary:hover { transform: translateY(-3px) rotate(-1deg); }
.cta-secondary {
    background: #fff !important;
    color: var(--pop-ink) !important;
    border: 2px solid var(--pop-ink) !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.18) !important;
}

/* ── carrusel / búsqueda de tecnologías ──────────────────── */
.tech-item {
    background: #fff;
    border: 2px solid var(--pop-ink);
    border-radius: 16px;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.14);
    color: var(--pop-ink);
}
.tech-item span, .tech-item p { color: var(--pop-ink); }
.search-input-wrapper, .tech-search-input {
    background: #fff;
    border-color: var(--pop-ink);
    color: var(--pop-ink);
}
.tech-search-input::placeholder { color: #8a877f; }
.search-icon, .clear-search-btn { color: #8a877f; }
.search-results-info, .no-results-message { color: #4c4a45; }

/* ── títulos de sección ──────────────────────────────────── */
.section-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pop-ink) !important;
    font-weight: 900;
}

/* ── skill cards / project cards ─────────────────────────── */
.skill-card, .project-card, .hackathon-card {
    background: #fff !important;
    border: 2px solid var(--pop-ink) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 0 rgba(16, 16, 20, 0.14) !important;
    color: var(--pop-ink);
}
.skill-card:hover, .project-card:hover, .hackathon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 rgba(16, 16, 20, 0.16) !important;
}
.skill-card h3, .skill-card p, .skill-card span,
.project-card h3, .project-card p,
.hackathon-card h3, .hackathon-card p, .hackathon-card span { color: var(--pop-ink); }
.skill-card p, .project-description, .hackathon-text { color: #4c4a45 !important; }
.skill-icon { color: var(--pop-coral) !important; }

.project-title { color: var(--pop-ink) !important; }
.project-year { color: var(--pop-coral) !important; font-weight: 800; }
.tech-tag, .more-tech, .timeline-tech-tag {
    background: var(--pop-paper) !important;
    border: 1.5px solid rgba(16, 16, 20, 0.4) !important;
    color: var(--pop-ink) !important;
    border-radius: 999px !important;
    font-weight: 600;
}
.project-main-image { border: 2px solid var(--pop-ink); border-radius: 12px; }
.project-link, .primary-link, .secondary-link {
    border-radius: 999px !important;
    font-weight: 700;
}
.primary-link {
    background: var(--pop-amber) !important;
    color: var(--pop-ink) !important;
    border: 2px solid var(--pop-ink) !important;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.22);
}
.secondary-link {
    background: #fff !important;
    color: var(--pop-ink) !important;
    border: 2px solid var(--pop-ink) !important;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.18);
}

/* ── timeline ────────────────────────────────────────────── */
.timeline-line { background: var(--pop-ink) !important; opacity: .25; }
.timeline-content {
    background: #fff !important;
    border: 2px solid var(--pop-ink) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 0 rgba(16, 16, 20, 0.14) !important;
    color: var(--pop-ink);
}
.timeline-year {
    background: var(--pop-coral) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}
.timeline-company { color: var(--pop-ink) !important; font-weight: 800; }
.timeline-title { color: var(--pop-coral) !important; }
.timeline-description { color: #4c4a45 !important; }

/* ── hackathones ─────────────────────────────────────────── */
.hackathon-badge {
    background: var(--pop-amber) !important;
    color: var(--pop-ink) !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
    transform: rotate(-2deg);
}
.hackathon-award { color: var(--pop-ink) !important; }
.hackathon-location { color: #8a877f !important; }
.collage-item { border: 2px solid var(--pop-ink); }
.collage-expand {
    background: var(--pop-ink);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
}

/* ── modal / carousel / lightbox / tooltip ───────────────── */
.modal-container {
    background: var(--pop-paper) !important;
    border: 2px solid var(--pop-ink) !important;
    box-shadow: 0 18px 0 rgba(16, 16, 20, 0.14) !important;
    color: var(--pop-ink);
}
.modal-title, .modal-subtitle { color: var(--pop-ink) !important; }
.modal-text { color: #4c4a45 !important; }
.modal-close { color: var(--pop-ink) !important; }
.carousel-btn {
    background: #fff !important;
    color: var(--pop-ink) !important;
    border: 2px solid var(--pop-ink) !important;
}
.carousel-dot { background: rgba(16, 16, 20, 0.25) !important; }
.carousel-dot.active { background: var(--pop-coral) !important; }
.tech-tooltip-content {
    background: var(--pop-ink) !important;
    color: #fff;
    border-radius: 12px;
}

/* ── contacto ────────────────────────────────────────────── */
.contact-title { color: var(--pop-ink) !important; }
.contact-subtitle { color: #4c4a45 !important; }
.contact-form input, .contact-form textarea {
    background: #fff !important;
    border: 2px solid var(--pop-ink) !important;
    color: var(--pop-ink) !important;
    border-radius: 12px !important;
}
.form-label { color: var(--pop-ink) !important; }
.contact-back { color: var(--pop-ink) !important; }

/* ── footer: se queda en tinta (contraste rico) ──────────── */
.footer {
    background: var(--pop-ink) !important;
    color: #fff;
    border-top: none;
}
.footer p, .footer span { color: rgba(255, 255, 255, 0.75); }
.footer-social-link {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
}
.footer-social-link:hover { background: var(--pop-coral); color: #fff; }
.footer-contact-btn {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border: none;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

/* role-chip activo: ámbar con tinta (el original era blanco/blanco) */
.role-chip.active {
    background: var(--pop-amber);
    border-color: var(--pop-ink);
    color: var(--pop-ink);
    font-weight: 800;
}
.role-chip:hover { background: var(--pop-paper); border-color: var(--pop-ink); }

/* ════ Navegación: dock inferior (adiós side menu) ════════ */
.floating-nav {
    left: 50% !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    padding: 6px !important;
    background: #fff !important;
    backdrop-filter: none !important;
}
.floating-nav .nav-list {
    flex-direction: row !important;
    gap: 4px !important;
}
.floating-nav .nav-link {
    padding: 9px 16px !important;
    border-radius: 999px !important;
    white-space: nowrap;
}
.nav-fab { display: none !important; }
@media (max-width: 700px) {
    .floating-nav .nav-icon { display: inline-block !important; font-size: 15px; }
    .floating-nav .nav-text { display: none !important; }
    .floating-nav .nav-link { padding: 10px 13px !important; }
}
/* el footer y última sección no quedan tapados por el dock */
.footer { padding-bottom: 90px !important; }

/* ════ Hackathones: logos contenidos y títulos que envuelven ════ */
.hackathon-header { flex-wrap: wrap; gap: 10px; }
.hackathon-badge {
    white-space: normal !important;
    line-height: 1.35 !important;
    height: auto !important;
    max-width: 100%;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.hackathon-icon, .hackathon-icon--lg {
    height: 22px !important;
    width: auto !important;
    max-width: 90px;
    object-fit: contain;
    flex: none;
}
.award-icon-img {
    height: 26px !important;
    width: auto !important;
    flex: none;
}
.hackathon-award {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ════ Collage: botón "Ver más" al estilo sticker ═════════ */
.collage-expand {
    background: var(--pop-ink) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
}
.collage-expand:hover {
    background: var(--pop-ink) !important;
    transform: translateX(-50%) translateY(-2px) !important;
}

/* ════ Carrusel de tecnologías: flechas + chips visibles ═══ */
.tech-carousel-section { position: relative; }
.tech-carousel {
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 1rem 56px !important;
}
.tech-carousel::-webkit-scrollbar { display: none; }
.tech-track {
    animation: none !important;
    transform: none !important;
}
.tech-item { scroll-snap-align: center; }
/* chip de tinta detrás de cada logo: los logos blancos vuelven a verse */
.tech-icon {
    background: var(--pop-ink) !important;
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.25);
}
.tech-icon i { color: #fff !important; font-size: 30px !important; }
.tech-icon img {
    max-width: 58% !important;
    max-height: 58% !important;
    object-fit: contain;
    filter: none !important;
}
.tech-item span { color: var(--pop-ink); font-weight: 700; }
.tech-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--pop-ink);
    background: #fff;
    color: var(--pop-ink);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.22);
    transition: transform .2s var(--pop-spring);
}
.tech-arrow:hover { transform: translateY(-50%) scale(1.08); }
.tech-arrow--prev { left: 10px; }
.tech-arrow--next { right: 10px; }

/* ════ Habilidades: iconos animados ═══════════════════════ */
.skill-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: var(--pop-amber) !important;
    color: var(--pop-ink) !important;
    font-size: 28px !important;
    box-shadow: 0 5px 0 rgba(16, 16, 20, 0.22);
    position: relative;
    animation: skill-bob 3.2s ease-in-out infinite;
}
.skill-card:nth-child(2) .skill-icon { animation-delay: .5s; background: var(--pop-coral) !important; color: #fff !important; }
.skill-card:nth-child(3) .skill-icon { animation-delay: 1s; }
@keyframes skill-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}
.skill-card:hover .skill-icon {
    animation: skill-pop .5s cubic-bezier(.2, 1.5, .35, 1);
}
@keyframes skill-pop {
    40% { transform: scale(1.25) rotate(-10deg); }
    100% { transform: scale(1) rotate(0); }
}
.skill-icon::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(16, 16, 20, 0.25);
    animation: skill-ping 2.6s ease-out infinite;
}
@keyframes skill-ping {
    from { transform: scale(.85); opacity: 1; }
    70%, to { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skill-icon, .skill-icon::after { animation: none !important; }
}

/* nombres del equipo (strong) dentro del texto de hackathones: tinta */
.hackathon-text strong, .hackathon-card strong, .project-description strong,
.timeline-description strong, .modal-text strong {
    color: var(--pop-ink) !important;
}

/* ════ Ronda de ajustes ═══════════════════════════════════ */
/* NASA vuelve a su tamaño original; HeyBanco solo un poco menor */
.hackathon-icon { height: 48px !important; max-width: 140px; }
.hackathon-icon--lg { height: 96px !important; max-width: 200px; }

/* "Ver más" del collage: texto e icono SIEMPRE blancos */
.collage-expand .collage-expand-text, .collage-expand i, .collage-expand span {
    color: #fff !important;
}

/* habilidades: fuera el anillo pulsante y la animación de hover */
.skill-icon::after { display: none !important; }
.skill-card:hover .skill-icon { animation: skill-bob 3.2s ease-in-out infinite; }

/* carrusel: ancho de contenedor normal + flechas visibles + menos gap */
.tech-carousel-section {
    max-width: 1080px;
    margin: 0 auto;
}
.tech-track { gap: 2.2rem !important; }
.tech-carousel { padding: 1rem 64px !important; }
.tech-arrow {
    background: var(--pop-ink);
    color: #fff;
    border: none;
    width: 46px;
    height: 46px;
    font-size: 17px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
.tech-arrow:hover { background: var(--pop-ink); }

/* espacio Modo IA ↔ Presentación igual al del Modo IA (texto más corto) */
.mode-toggle--tour { right: 146px; }

/* icono de ubicación en tinta (hero y hackathones) */
.hero-location i, .hackathon-location i { color: var(--pop-ink) !important; }

/* dock inferior: texto/icono NEGRO cuando el badge está activo */
.floating-nav .nav-link.active,
.floating-nav .nav-link.active .nav-text,
.floating-nav .nav-link.active .nav-icon {
    color: var(--pop-ink) !important;
}

/* footer: botón Contactar ámbar con texto negro */
.footer-contact-btn, .footer-contact-btn span, .footer-contact-btn i {
    color: var(--pop-ink) !important;
}

/* ════ Carrusel v2: 5 slots responsivos, look "hover" fijo ═ */
/* slots exactos para que nada quede recortado ni tapado por las flechas */
.tech-item {
    flex: 0 0 calc((100% - 4 * 2.2rem) / 5) !important;
    min-width: 0;
    scroll-snap-align: start;
}
@media (max-width: 900px) { .tech-item { flex-basis: calc((100% - 3 * 2.2rem) / 4) !important; } }
@media (max-width: 640px) { .tech-item { flex-basis: calc((100% - 2 * 2.2rem) / 3) !important; } }
@media (max-width: 440px) { .tech-item { flex-basis: calc((100% - 1 * 2.2rem) / 2) !important; } }
.tech-carousel { scroll-snap-type: x mandatory; }

/* chip fluido con margen interno para el logo */
.tech-icon {
    width: 100% !important;
    max-width: 96px;
    height: auto !important;
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 16px !important;
}

/* estado "hover" permanente: logo a todo color y sin brincos */
.tech-item, .tech-item:hover { transform: none !important; }
.tech-item:hover .tech-icon { transform: none !important; background: var(--pop-ink) !important; border: none !important; }
.tech-icon img, .tech-item:hover .tech-icon img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.tech-icon i, .tech-item:hover .tech-icon i { color: #fff !important; transform: none !important; }

/* nombre SIEMPRE visible y en tinta (también en hover) */
.tech-item span, .tech-item:hover span {
    color: var(--pop-ink) !important;
    font-weight: 700 !important;
    white-space: normal !important;
    text-align: center;
}

/* "No se encontraron proyectos": título en tinta */
.no-results-message, .no-results-message h3, .no-results-message h4,
.no-results-message p, .no-results-message strong, .no-results-icon {
    color: var(--pop-ink) !important;
}

/* gutter de flechas: que no pisen la primera/última card */
.tech-carousel { padding: 1rem 78px !important; }
.tech-arrow--prev { left: 16px; }
.tech-arrow--next { right: 16px; }

/* cards del carrusel: ancho fijo compacto (se veían muy anchas) */
.tech-item {
    flex: 0 0 118px !important;
    padding: 12px 8px !important;
}
.tech-icon { max-width: 78px; padding: 13px !important; }
.tech-item span { font-size: 0.8rem !important; }
@media (max-width: 640px) {
    .tech-item { flex-basis: 100px !important; }
    .tech-icon { max-width: 66px; }
}