/* Layout global */
body {
background-color: var(--color-bg-main);
background-image:
radial-gradient(circle at 15% 0%, rgba(148, 0, 211, 0.16), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(214, 104, 227, 0.1), transparent 40%);
background-attachment: fixed;
color: var(--color-text-main);
font-family: var(--font-mono);
}

/* Navbar estilo consola */
.nav-console {
background-color: rgba(20, 22, 43, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border-subtle);
font-family: var(--font-mono);
}

.nav-brand-console {
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-accent);
}

.nav-brand-console:hover {
color: var(--color-primary);
}

.nav-menu-console .nav-link {
color: var(--color-text-muted);
font-size: 0.9rem;
padding-inline: 0.9rem;
border-radius: var(--radius-soft);
transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-menu-console .nav-link:hover,
.nav-menu-console .nav-link:focus-visible {
color: var(--color-text-main);
background-color: rgba(148, 0, 211, 0.18);
}

/* Hero subtítulos adicionales */
.hero-subtitle-small {
margin-top: var(--spacing-xs);
font-size: 0.9rem;
color: var(--color-text-muted);
}

.page-wrapper {
max-width: var(--max-width-content);
margin-inline: auto;
padding: var(--spacing-lg) var(--spacing-md);
padding-top: calc(var(--spacing-xl) + 3rem);
}

/* Secciones */
.section {
padding-block: var(--spacing-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
scroll-margin-top: 5rem;
}

.hero-section {
padding-top: var(--spacing-md);
}

.section-title {
position: relative;
display: inline-block;
font-size: 1.8rem;
margin-bottom: var(--spacing-lg);
color: var(--color-text-main);
padding-bottom: 0.6rem;
}

.section-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 3.5rem;
height: 3px;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
box-shadow: 0 0 12px rgba(214, 104, 227, 0.6);
}

/* Hero */
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-lg);
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--color-accent);
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
}

.hero-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #3ddc84;
box-shadow: 0 0 8px #3ddc84;
animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}

.hero-photo {
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-primary);
box-shadow: 0 0 0 6px rgba(148, 0, 211, 0.12), 0 12px 30px var(--color-shadow-soft);
}

.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-main-title {
font-size: 2.4rem;
margin-bottom: var(--spacing-sm);
background: linear-gradient(135deg, var(--color-text-main), var(--color-accent) 120%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.hero-subtitle {
font-size: 1.1rem;
color: var(--color-text-muted);
}

.hero-actions .btn-primary {
padding-inline: 1.5rem;
}

/* Botón primario (sobrescribe al de Bootstrap) */
.btn-primary {
background: linear-gradient(135deg, var(--color-btn-primary-bg), var(--color-primary-soft));
border-color: var(--color-btn-primary-bg);
color: var(--color-btn-primary-text);
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
background: linear-gradient(135deg, var(--color-btn-primary-hover-bg), var(--color-btn-primary-bg));
border-color: var(--color-btn-primary-hover-bg);
color: var(--color-btn-primary-text);
box-shadow: 0 0 0 0.15rem rgba(148, 0, 211, 0.45);
transform: translateY(-1px);
}

/* Botón outline claro estilo morado */
.btn-outline-light {
border-color: var(--color-btn-outline-border);
color: var(--color-btn-outline-text);
background-color: transparent;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
background-color: var(--color-btn-outline-hover-bg);
color: var(--color-btn-primary-text);
border-color: var(--color-btn-outline-border);
}

.console-card {
background-color: var(--color-bg-console);
border-radius: var(--radius-soft);
border: 1px solid var(--color-border-subtle);
box-shadow: 0 12px 30px var(--color-shadow-soft);
font-family: var(--font-mono);
color: var(--color-text-main);
padding: 0;
overflow: hidden;
}

/* Barra superior de la “ventana” */
.console-card__header {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.8rem;
background: linear-gradient(
90deg,
var(--color-primary-soft),
var(--color-bg-elevated)
);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}

.console-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}

.console-dot--red { background-color: #ff5f56; }
.console-dot--yellow { background-color: #ffbd2e; }
.console-dot--green { background-color: #27c93f; }

/* Contenido tipo terminal */
.console-card__body {
padding: var(--spacing-md);
font-size: 0.95rem;
line-height: 1.6;
}

.console-prompt {
color: var(--color-accent);
font-weight: 500;
margin-right: 0.25rem;
}

.console-comment {
color: var(--color-text-muted);
}

.project-card {
background-color: #120f24;
border-radius: var(--radius-soft);
border: 1px solid rgba(148, 0, 211, 0.35);
overflow: hidden;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);
color: var(--color-text-main);
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease,
border-color 0.2s ease;
}

.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
border-color: var(--color-accent);
}

.project-card--featured {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px rgba(214, 104, 227, 0.35), 0 14px 32px rgba(0, 0, 0, 0.7);
}

.project-card__badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: var(--color-text-main);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
box-shadow: 0 6px 16px rgba(148, 0, 211, 0.5);
}

.project-card__img-wrap {
position: relative;
overflow: hidden;
}

.project-card__img-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(18, 15, 36, 0.15) 0%, rgba(18, 15, 36, 0.85) 100%);
}

.project-card__img {
height: 180px;
width: 100%;
object-fit: cover;
filter: saturate(1.05) contrast(1.02) brightness(0.8);
transition: transform 0.35s ease, filter 0.35s ease;
}

.project-card:hover .project-card__img {
transform: scale(1.06);
filter: saturate(1.15) contrast(1.05) brightness(0.9);
}

.project-card__body {
padding: var(--spacing-md);
}

.project-card__title {
font-family: var(--font-mono);
font-size: 1.1rem;
margin-bottom: var(--spacing-sm);
}

/* Badges de tecnologías */
.project-badge {
background-color: rgba(60, 63, 104, 0.9);
color: var(--color-text-main);
border-radius: var(--radius-pill);
font-size: 0.75rem;
padding: 0.25rem 0.7rem;
margin-right: 0.25rem;
}

/* Texto */
.project-card__text {
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: var(--spacing-md);
}

/* Links tipo consola */
.project-card__links {
font-family: var(--font-mono);
font-size: 0.85rem;
}

.project-link {
color: var(--color-accent);
text-decoration: none;
}

.project-link:hover {
text-decoration: underline;
}

.skill-grid {
align-items: stretch;
}

.skill-chip {
height: 100%;
padding: var(--spacing-md) var(--spacing-sm);
border-radius: var(--radius-soft);
border: 1px solid var(--color-border-subtle);
background-color: rgba(20, 22, 39, 0.6);
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.skill-chip:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
background-color: rgba(148, 0, 211, 0.12);
}

.skill-icon {
max-width: 64px; /* tamaño visual máximo */
max-height: 64px;
object-fit: contain; /* que no se deformen */
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
transition: transform 0.2s ease, filter 0.2s ease;
}

.skill-grid p {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--color-text-muted);
margin-bottom: 0;
}

.skill-chip:hover .skill-icon {
transform: translateY(-2px) scale(1.08);
filter: drop-shadow(0 6px 16px rgba(148, 0, 211, 0.7));
}

.contact-form .form-label {
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--color-text-main);
}

.contact-form .form-control {
background-color: rgba(20, 22, 39, 0.95);
border-radius: var(--radius-soft);
border: 1px solid var(--color-border-subtle);
color: var(--color-text-main);
font-family: var(--font-mono);
font-size: 0.9rem;
}

.contact-form .form-control::placeholder {
color: var(--color-text-muted);
}

.contact-form .form-control:focus {
background-color: var(--color-bg-console);
border-color: var(--color-accent);
box-shadow: 0 0 0 0.15rem rgba(148, 0, 211, 0.4);
}
.form-alert {
border-radius: var(--radius-soft);
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
font-family: var(--font-mono);
}

.form-alert--success {
background-color: rgba(40, 167, 69, 0.12);
border: 1px solid rgba(40, 167, 69, 0.6);
color: #c9f7d4;
}

.form-alert--error {
background-color: rgba(220, 53, 69, 0.12);
border: 1px solid rgba(220, 53, 69, 0.6);
color: #f8d7da;
}

/* Footer */
.site-footer {
text-align: center;
padding: var(--spacing-lg) var(--spacing-md);
font-size: 0.85rem;
color: var(--color-text-muted);
font-family: var(--font-mono);
}

/* Ajustes responsive mínimos */
@media (max-width: 768px) {
.hero {
text-align: center;
justify-content: center;
}

.hero-eyebrow {
justify-content: center;
}

.hero-actions {
justify-content: center;
}
}