@charset "UTF-8";
/*!
* Start Bootstrap - Freelancer v7.0.7 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #1abc9c;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #1abc9c;
  --bs-secondary: #2c3e50;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 26, 188, 156;
  --bs-secondary-rgb: 44, 62, 80;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 0.125rem;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #1abc9c;
  --bs-link-hover-color: #15967d;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

html {
  height: 100%;
  scroll-padding-top: calc(4.5rem - 1px);
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.page-section {
  padding: 6rem 0;
}
.page-section .page-section-heading {
  font-size: 2.25rem;
  line-height: 2rem;
}
@media (min-width: 992px) {
  .page-section .page-section-heading {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

.divider-custom {
  margin: 1.25rem 0 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.divider-custom .divider-custom-line {
  width: 100%;
  max-width: 7rem;
  height: 0.25rem;
  background-color: #2c3e50;
  border-radius: 1rem;
  border-color: #2c3e50;
}
.divider-custom .divider-custom-line:first-child {
  margin-right: 1rem;
}
.divider-custom .divider-custom-line:last-child {
  margin-left: 1rem;
}
.divider-custom .divider-custom-icon {
  color: #2c3e50;
  font-size: 2rem;
}
.divider-custom.divider-light .divider-custom-line {
  background-color: #fff;
}
.divider-custom.divider-light .divider-custom-icon {
  color: #fff;
}

.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1.25rem;
}

.btn-social {
  border-radius: 100%;
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
  justify-content: center;
  align-items: center;
}

#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}
#mainNav .navbar-brand {
  color: #fff;
}
#mainNav .navbar-nav {
  margin-top: 1rem;
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: #1abc9c;
}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link.active {
  color: #1abc9c;
}
#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
  #mainNav .navbar-nav {
    margin-top: 0;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: #fff;
    background: #1abc9c;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.5em;
  }
}

.form-floating input.form-control,
.form-floating textarea.form-control {
  font-size: 1.5rem;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  border-width: 1px;
}
.form-floating input.form-control:focus,
.form-floating textarea.form-control:focus {
  box-shadow: none;
}
.form-floating label {
  font-size: 1.5rem;
  color: #6c757d;
}

/* ANIMACIÓN HEADER - ESTILOS CORREGIDOS */
.masthead-animated {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100vh;
  position: relative;
}

.header-container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  margin: 0;
  padding: 0;
}

.code-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-family: 'Courier New', monospace;
  z-index: 1;
}

.code-container.active {
  animation: showCode 3s ease-in-out forwards, fadeOut 1s ease-in-out 3s forwards;
}

.code-block {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid #333;
  max-width: 600px;
  overflow: hidden;
}

.code-line {
  color: #d4d4d4;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
}

.code-line.show {
  animation: showLine 0.3s ease-in forwards;
}

.code-line .tag { color: #569cd6; }
.code-line .attr { color: #9cdcfe; }
.code-line .string { color: #ce9178; }
.code-line .keyword { color: #c586c0; }

.final-design {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
}

.final-design.active {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.browser-window {
  background: white;
  border-radius: 10px;
  width: 80%;
  max-width: 900px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transform: scale(0.8);
}

.browser-window.active {
  animation: scaleUp 1s ease-out forwards;
}

.browser-bar {
  background: #e8e8e8;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ccc;
}

.browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

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

.browser-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.browser-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.brand-name {
  font-family: 'Audiowide', cursive;
  font-size: 72px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 4px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(30px);
  text-shadow: 
    0 0 3px #00f3ff,
    0 0 6px #00f3ff,
    0 0 12px #00f3ff;
}

.brand-name.active {
  animation: brandAppear 1s ease-out forwards, neonFlicker 1.5s ease-in-out infinite alternate;
}

.brand-name::before,
.brand-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.brand-name::before {
  color: #ff00ff;
  z-index: -1;
  animation: glitch1 1.5s infinite;
}

.brand-name::after {
  color: #00ff00;
  z-index: -2;
  animation: glitch2 1.8s infinite;
}

.tagline {
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
  color: #ff00ff;
  margin-top: 20px;
  position: relative;
  z-index: 1;
  opacity: 0;
  text-shadow: 
    0 0 3px #ff00ff,
    0 0 6px #ff00ff,
    0 0 12px #ff00ff;
}

.tagline-1.active {
  animation: brandAppear 1s ease-out 0.3s forwards, neonFlicker 2s ease-in-out infinite alternate;
}

.tagline-2 {
  margin-top: 10px;
}

.tagline-2.active {
  animation: brandAppear 1s ease-out 0.8s forwards, neonFlicker 2s ease-in-out 0.5s infinite alternate;
}

.decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.floating-code {
  position: absolute;
  color: rgba(0, 243, 255, 0.3);
  font-size: 14px;
  font-weight: bold;
  animation: float 15s ease-in-out infinite;
}

.fc1 { top: 10%; left: 10%; animation-delay: 0s; font-size: 16px; }
.fc2 { top: 70%; left: 80%; animation-delay: 2s; font-size: 18px; }
.fc3 { top: 30%; left: 85%; animation-delay: 4s; font-size: 14px; }
.fc4 { top: 80%; left: 15%; animation-delay: 3s; font-size: 20px; }
.fc5 { top: 15%; left: 90%; animation-delay: 1s; color: rgba(255, 0, 255, 0.3); font-size: 16px; }
.fc6 { top: 85%; left: 5%; animation-delay: 5s; color: rgba(0, 255, 0, 0.3); font-size: 18px; }
.fc7 { top: 50%; left: 5%; animation-delay: 2.5s; font-size: 15px; }
.fc8 { top: 25%; left: 50%; animation-delay: 4.5s; color: rgba(255, 0, 255, 0.3); font-size: 22px; }
.fc9 { top: 60%; left: 92%; animation-delay: 1.5s; font-size: 17px; }
.fc10 { top: 40%; left: 12%; animation-delay: 3.5s; color: rgba(0, 255, 0, 0.3); font-size: 19px; }
.fc11 { top: 5%; left: 45%; animation-delay: 0.5s; font-size: 16px; }
.fc12 { top: 90%; left: 60%; animation-delay: 4s; color: rgba(255, 0, 255, 0.3); font-size: 21px; }
.fc13 { top: 35%; left: 70%; animation-delay: 2s; font-size: 15px; }
.fc14 { top: 75%; left: 40%; animation-delay: 3s; color: rgba(0, 255, 0, 0.3); font-size: 18px; }
.fc15 { top: 20%; left: 25%; animation-delay: 1s; font-size: 17px; }

/* ANIMACIONES */
@keyframes showCode {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes showLine {
  to { opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes scaleUp {
  to { transform: scale(1); }
}

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

@keyframes neonFlicker {
  0%, 100% {
    text-shadow: 
      0 0 3px currentColor,
      0 0 6px currentColor,
      0 0 12px currentColor;
  }
  50% {
    text-shadow: 
      0 0 2px currentColor,
      0 0 4px currentColor,
      0 0 8px currentColor;
  }
}

@keyframes glitch1 {
  0%, 100% { opacity: 0; transform: translate(0); }
  2% { opacity: 1; transform: translate(-5px, 3px); }
  4% { opacity: 1; transform: translate(4px, -2px); }
  6% { opacity: 0; transform: translate(0); }
  25% { opacity: 0; }
  27% { opacity: 0.9; transform: translate(3px, -3px); }
  29% { opacity: 0.8; transform: translate(-4px, 2px); }
  31% { opacity: 0; transform: translate(0); }
  50% { opacity: 0; }
  52% { opacity: 1; transform: translate(-6px, 4px); }
  54% { opacity: 0.9; transform: translate(5px, -3px); }
  56% { opacity: 0; transform: translate(0); }
  75% { opacity: 0; }
  77% { opacity: 0.95; transform: translate(4px, -4px); }
  79% { opacity: 0.85; transform: translate(-5px, 3px); }
  81% { opacity: 0; transform: translate(0); }
}

@keyframes glitch2 {
  0%, 100% { opacity: 0; transform: translate(0); }
  5% { opacity: 0; }
  7% { opacity: 0.9; transform: translate(4px, -4px); }
  9% { opacity: 1; transform: translate(-5px, 3px); }
  11% { opacity: 0; transform: translate(0); }
  30% { opacity: 0; }
  32% { opacity: 0.85; transform: translate(-6px, 2px); }
  34% { opacity: 0.95; transform: translate(5px, -4px); }
  36% { opacity: 0; transform: translate(0); }
  55% { opacity: 0; }
  57% { opacity: 1; transform: translate(5px, -5px); }
  59% { opacity: 0.9; transform: translate(-4px, 4px); }
  61% { opacity: 0; transform: translate(0); }
  80% { opacity: 0; }
  82% { opacity: 0.95; transform: translate(-5px, -3px); }
  84% { opacity: 0.8; transform: translate(6px, 2px); }
  86% { opacity: 0; transform: translate(0); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
}

/* Responsive para animación */
@media (max-width: 768px) {
  .code-block {
    padding: 20px;
    max-width: 90%;
  }
  .code-line {
    font-size: 12px;
  }
  .brand-name {
    font-size: 48px;
  }
  .tagline {
    font-size: 18px;
  }
  .browser-window {
    width: 95%;
  }
}

/* MASTHEAD ORIGINAL (ahora es una sección separada) */
.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}
.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}
.masthead .masthead-subheading {
  font-size: 1.25rem;
}
.masthead .masthead-avatar {
  width: 15rem;
}

@media (min-width: 992px) {
  .masthead {
    padding-top: calc(6rem + 104px);
    padding-bottom: 6rem;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
}

.portfolio .portfolio-item {
  cursor: pointer;
  position: relative;
  display: block;
  max-width: 25rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.portfolio .portfolio-item .portfolio-item-caption {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  background-color: rgba(26, 188, 156, 0.9);
}
.portfolio .portfolio-item .portfolio-item-caption:hover {
  opacity: 1;
}
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
  font-size: 1.5rem;
}

.portfolio-modal .btn-close {
  color: #1abc9c;
  font-size: 2rem;
  padding: 1rem;
}
.portfolio-modal .portfolio-modal-title {
  font-size: 2.25rem;
  line-height: 2rem;
}
@media (min-width: 992px) {
  .portfolio-modal .portfolio-modal-title {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #2c3e50;
  color: #fff;
}

.copyright {
  background-color: #1a252f;
}

/* Language toggle button with flag */
#langToggle {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#langToggle:hover {
  background-color: #fff;
  color: #000;
}

body.dark #langToggle {
  border-color: #fff;
  color: #fff;
}

body.dark #langToggle:hover {
  background-color: #fff;
  color: #000;
}

/* Whatsapp bubble */
.float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 60px;
  right: 20px;
  background-color: #0D0D0D;
  color: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  transition: ease 0.3s;
  animation: efecto 1.3s infinite;
}

.float:hover {
  text-decoration: none;
  color: #25d366;
  background-color: #fff;
}

@keyframes efecto {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
  }
}

.my-float {
  margin-top: 0;
}

/* Neon Styles */
@font-face {
  font-family: 'neon';
  src: url('../NEONIZED.ttf') format('truetype');
}

.neon-box {
  padding: 5px 15px;
  border: 3px solid #ff4c4c;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px #ff4c4c, 0 0 15px #cc0000;
  text-decoration: none;
  display: inline-block;
}

.neon-text {
  font-family: 'neon', sans-serif;
  font-size: clamp(1.5rem, 3vw, 3rem);
  color: #ffd8d8;
  text-shadow:
    0 0 2px #ffd8d8,
    0 0 5px #f25757,
    0 0 10px #e50b0b;
  animation: flicker 4.5s infinite;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.3;
    text-shadow: none;
  }
}

/* Colores por día */
.lunes    { color: #ff4c4c; }
.martes   { color: #ffd700; }
.miercoles{ color: #39ff14; }
.jueves   { color: #ff9966; }
.viernes  { color: #00ffff; }
.sabado   { color: #cc99ff; }
.domingo  { color: #ff80ab; }