/* Fuentes */
@font-face {
  font-family: 'Mulish';
  src:url('../fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src:url('../fonts/Mulish-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src:url('../fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Reset universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: 'Mulish', sans-serif;
  margin: 0;
  padding: 0;
}

/* header */
header {
  position: fixed; /* Cambia esto */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 1.5rem;
  font-weight: bold;
  user-select: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.site-header {
  flex: 0 0 auto;
  color: var(--color-white);
}

header, 
.site-header{
  z-index: 1001 !important; /* Más alto que el overlay (999) */
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-white);
}

/* Efecto logo borde */
.borde-logo {
  position: relative;
  padding: 1px 7px 7px 7px;
  display: inline-block;
}

.borde-logo:before,
.borde-logo:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  border: 2px solid var(--color-primary);
}

.borde-logo:before {
  top: -4px;
  left: -5px;
  border-right: none;
  border-bottom: none;
}

.borde-logo:after {
  bottom: 5px;
  right: -5px;
  border-top: none;
  border-left: none;
} /* fin efecto logo borde */

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
}

.site-header a {
  color: var(--color-white);
  text-decoration: none;
}

.site-header a:hover {
  color: var(--color-orange);
}

#bienvenida {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.light {
  background-color: rgba(216, 113, 54, 0.25);
}

.dark {
  background-color: #010b14;
}

:root {
  --duration: 8s;
}

#contenido {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;   
  overflow-y: auto;     /* scroll vertical aquí */
  position: relative;   /* para posicionar elementos hijos */
  z-index: 1;
  scroll-behavior: smooth; /* scroll suave para scrollIntoView */
}

#contenido.bgContainer {
  position: relative; 
  width: 100%;
  min-height: 100vh; /* que se adapte */
  overflow-y: auto; /* scroll vertical */
  z-index: 1;
}

#contenido .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 90vh; /* base, JS lo ajusta */
  filter: blur(5vw);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.circle {
  --pos-x: 50%;
  --pos-y: 50%;
  --end-x: 50%;
  --end-y: 50%;
  position: absolute;
  text-align: center;
  width: min(40vw, 450px);
  height: min(40vw, 450px);
  border-radius: 50%;
  display: inline-block;
  z-index: 0;
}

.site-header,
.container,
.header-content,
.logo,
.borde-logo,
.nav-list,
.scramble-text {
  z-index: 1;
  position: relative;
}

.main-flex-container {
  flex: 0 0 100vh;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  height: 100vh;
  scroll-snap-align: start;
}

.descripcion h2 {
  font-family: var(--font-primary, 'Mulish');
  color: var(--color-white, #fff);
  font-size: var(--font-size-xxl, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.guion {
  color: var(--color-orange);
}

.botones-home {
  margin-top: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.btn-primary,
.btn-secondary {
  padding: 0.6rem 1.4rem;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
}

.btn-primary {
  background-color: var(--color-orange);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-orange);
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-sm);
}

/* Scroll down */
.scroll-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999 !important; /* máximo para que se vean arriba */
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: transparent;
}

.scroll-up {
  top: 20px;
  display: none; /* Oculto por defecto */
}

.scroll-down {
  bottom: 20px;
}

.scroll-nav a {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-bottom: 3px solid var(--color-orange);
  border-right: 3px solid var(--color-orange);
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
}

.scroll-down a {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.scroll-down a:hover {
  transform: rotate(45deg) scale(1.3);
}

.scroll-up a {
  transform: rotate(-135deg);
  transition: transform 0.3s ease;
}

.scroll-up a:hover {
  transform: rotate(-135deg) scale(1.3);
}

/* sobre mi */ 
.sobre-mi-section {
  flex: 0 0 100vh;
  color: var(--color-white);
  font-family: var(--font-primary);
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.sobre-mi-section .container {
  max-width: 900px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--color-orange);
  text-align: center;
}

.sobre-mi-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: space-between;
}

.sobre-mi-texto {
  width: 100%;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-gray-light);
}

.sobre-mi-texto p {
  margin-bottom: var(--spacing-md);
}

.sobre-mi-habilidades {
  width: 100%;
  background-color: var(--color-black);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
}

.sobre-mi-habilidades h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: var(--spacing-xs);
}

.sobre-mi-habilidades ul {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}

.sobre-mi-habilidades li {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--color-gray-light);
  transition: color var(--transition-fast);
}

.sobre-mi-habilidades li:hover {
  color: var(--color-orange);
}

/* efecto recomendado por claude */
.sobre-mi-section .container,
.proyectos-section .container,
.main-flex-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* iconos de habilidades */
.habilidades-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: center;
  overflow-x: auto;
  padding: 10px 0;
  /* opcional: esconder scrollbar en algunos navegadores */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.habilidades-icons::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.habilidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  color: var(--color-white);
  cursor: default;
  min-width: 72px; /* ancho mínimo para que no se compriman mucho */
  cursor: pointer; /* cambia a pointer para indicar que es interactivo */
  transition: transform 0.3s ease, color 0.3s ease;
}

.habilidad i, .habilidad img {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  color: #f97316; /* naranja */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.habilidad:hover i, 
.habilidad:hover img {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px #f97316);
  color: #f37223; /* naranja más oscuro al hover */
}

.habilidad:hover {
  color: #d65a0f; /* cambia también el color del texto */
}


/* Sección Proyectos */
.proyectos-section {
  padding: 4rem 2rem;
  background-color: var(--color-negro-fondo);
  font-family: var(--font-primary);
  color: var(--color-white);
  /* Agregamos Flexbox aquí para que las cards se centren */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rem; /* Espacio entre cada tarjeta */
  margin-bottom: 6rem;
}

.section-title {
  color: var(--color-orange);
  text-align: center;
  margin-bottom: 3rem;
  font-size: 3rem;
  font-weight: 700;
  margin-top: 3rem;
}

/* Tarjetas individuales de proyecto (card) */
.card {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  width: 90%; /* Ancho para pantallas grandes */
  text-align: center;
}

/* Configuración de orden: la segunda tarjeta y las pares empiezan con texto */
.card:nth-child(even) {
  flex-direction: row-reverse; /* Orden inverso: texto-imagen */
}

.card img {
  width: 50%;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.card-content {
  width: 100%;
  margin: 5px;
}

.card-content h3 {
  font-size: 2.5rem;
  color: var(--color-orange);
  margin-bottom: 1rem;
  font-weight: 700;
}

.card-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-gray-light);
  margin-bottom: 2rem;
}

/* Contenedor del botón para centrarlo */
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.btn-ver-proyecto {
  background-color: var(--color-orange);
  color: var(--color-black);
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.3s ease;
}

.btn-ver-proyecto:hover {
  background-color: var(--color-orange-dark);
}

/* contacto */
.contacto-section {
  flex: 0 0 100vh;
  padding: var(--spacing-xxl) var(--spacing-lg);
  color: var(--color-white);
  font-family: var(--font-primary);
  background-color: var(--color-black);
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.contacto-section .container {
  max-width: 600px;
  margin: 0 auto;
}

#contactForm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  background: rgba(20, 20, 20, 0.7);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.4);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 107, 0, 0.1) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: var(--color-white) !important;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-weight: 600;
  color: var(--color-orange);
  font-size: var(--font-size-md);
}

.form-group input,
.form-group textarea {
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--color-gray-border);
  background-color: transparent;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-gray-light);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-orange-dark);
  background-color: rgba(255, 107, 0, 0.1) !important;
}

.form-group input#nombre:focus {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF6B00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
}

.form-group input#email:focus {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF6B00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
}

#contactForm button.btn-primary {
  background-color: var(--color-orange);
  color: var(--color-white);
  align-self: flex-start;
  padding: 0.8rem 2rem;
  font-size: var(--font-size-md);
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast);
}

#contactForm button.btn-primary:hover {
  background-color: var(--color-orange-dark);
  color: var(--color-white);
}

.form-group input#nombre {
  padding-left: 2.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF6B00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
}

.form-group input#email {
  padding-left: 2.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF6B00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
}

.form-group textarea#mensaje {
  padding-left: 2.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF6B00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h16v12H5.17L4 17.17V4zm2 2v6h12V6H6z"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px 1rem;
  background-size: 18px 18px;
}

/* formateo secciones */
.main-flex-container,
.sobre-mi-section,
.proyectos-section,
.contacto-section {
  min-height: 100vh;
  padding: var(--spacing-md) var(--spacing-lg);
}

/* fix scroll */
section[id] {
  scroll-margin-top: 80px; /* Igual a la altura de tu header */
}

/* Texto vertical con leyenda*/
/* Contenedor principal para la barra lateral */

.sidebar-info {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center; /* Alinea el texto y la línea en el centro horizontal */
}

/* Estilos para el texto vertical */
.sidebar-text {
  writing-mode: vertical-lr; /* Escribe el texto de arriba a abajo */
  white-space: nowrap;
  font-family: 'Mulish', sans-serif;
  font-size: 1rem;
  font-weight: 200;
  color: var(--color-gray-light);
  letter-spacing: 0.15em;
  margin-bottom: 20px; /* Espacio entre el texto y la línea */
  gap: 15px;
}

/* Estilos para la línea vertical */
.sidebar-line {
  width: 1px; /* El ancho de la línea es de 1 píxel */
  height: 200px; /* La altura de la línea, ajusta según tu gusto */
  background-color: var(--color-gray-light);
}

.sidebar-info.hidden {
  display: none;
}

/* Contenedor para los iconos sociales */
.social-icons {
  display: flex;
  flex-direction: column; /* Los iconos se apilan verticalmente */
  gap: 15px;
  align-items: center;
  margin-bottom: 20px; /* Espacio antes de la línea */
}

.social-icons a {
  color: var(--color-gray-light);
  font-size: 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  color: var(--color-orange);
  transform: scale(1.2);
}


/* ===== MENÚ HAMBURGUESA - AGREGAR AL CSS EXISTENTE ===== */

/* Navegación desktop (mantener visible en desktop) */
.nav-desktop {
  display: flex;
}

/* Menú hamburguesa (oculto por defecto) */
.hamburger-menu {
  display: none;
}

.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 1002 !important;
  position: relative;
}

/* Icono hamburguesa */
.hamburger-icon {
  width: 30px;
  height: 20px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
}

.hamburger-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--color-white);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.hamburger-icon span:nth-child(1) {
  top: 0px;
}

.hamburger-icon span:nth-child(2) {
  top: 8px;
}

.hamburger-icon span:nth-child(3) {
  top: 16px;
}

/* Animación del icono cuando está abierto */
.hamburger-btn.open .hamburger-icon span:nth-child(1) {
  top: 8px;
  transform: rotate(135deg);
}

.hamburger-btn.open .hamburger-icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.hamburger-btn.open .hamburger-icon span:nth-child(3) {
  top: 8px;
  transform: rotate(-135deg);
}

.hamburger-btn.open .hamburger-icon span {
  background: var(--color-orange) !important; /* X naranja cuando está abierta */
  height: 4px; /* Un poco más gruesa para mejor visibilidad */
}

/* Hover effect para mejor feedback visual */
.hamburger-btn:hover .hamburger-icon span {
  background: var(--color-orange);
}


/* Menú móvil overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(20px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-list {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.mobile-nav-list li {
  margin: 2rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s ease-in-out;
}

.mobile-nav-overlay.active .mobile-nav-list li {
  opacity: 1;
  transform: translateY(0);
}

/* Delay para animación escalonada */
.mobile-nav-overlay.active .mobile-nav-list li:nth-child(1) {
  transition-delay: 0.1s;
}
.mobile-nav-overlay.active .mobile-nav-list li:nth-child(2) {
  transition-delay: 0.2s;
}
.mobile-nav-overlay.active .mobile-nav-list li:nth-child(3) {
  transition-delay: 0.3s;
}

.mobile-nav-list a {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
  font-family: var(--font-primary);
}

.mobile-nav-list a:hover {
  color: var(--color-orange);
}

/* Evitar scroll cuando el menú está abierto */
body.menu-open {
  overflow: hidden;
}


/* Imagen perfil*/
.profile-picture {
  width: 350px;
  height: 400px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  box-shadow: 0 15px 35px rgba(249, 115, 22, 0.25);
  transition: all 0.4s ease;
}

.profile-picture:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(249, 115, 22, 0.35);
}

.foto-perfil {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.profile-picture:hover .foto-perfil {
  transform: scale(1.1);
}

/* footer */
/* ===== FOOTER DESIGN ===== */
.site-footer {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 3rem 0 1.5rem;
  color: var(--color-white);
  font-family: var(--font-primary);
  position: relative;
  z-index: 10;
}

/* Efecto de línea decorativa superior */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-orange), transparent);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Información de contacto (izquierda) */
.footer-info {
  text-align: left;
}

.footer-info h3 {
  color: var(--color-orange);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-contact a {
  color: var(--color-gray-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
  font-size: 0.95rem;
}

.footer-contact a:hover {
  color: var(--color-orange);
  transform: translateX(5px);
}

.footer-contact i {
  font-size: 1rem;
  width: 16px;
  text-align: center;
}

/* Logo central */
.footer-logo {
  text-align: center;
  position: relative;
}

.footer-logo h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  position: relative;
  display: inline-block;
}

/* Efecto del logo igual al header */
.footer-logo-text {
  position: relative;
  padding: 8px 12px 12px 12px;
  display: inline-block;
}

.footer-logo-text:before,
.footer-logo-text:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 25px;
  border: 2px solid var(--color-orange);
}

.footer-logo-text:before {
  top: -2px;
  left: -5px;
  border-right: none;
  border-bottom: none;
}

.footer-logo-text:after {
  bottom: 8px;
  right: -5px;
  border-top: none;
  border-left: none;
}

.footer-tagline {
  font-size: 0.9rem;
  color: var(--color-gray-light);
  margin-top: 0.5rem;
  font-style: italic;
}

/* Redes sociales (derecha) */
.footer-social {
  text-align: right;
}

.footer-social h3 {
  color: var(--color-orange);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-social-icons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: rgba(249, 115, 22, 0.1);
  border: 2px solid rgba(249, 115, 22, 0.3);
  border-radius: 50%;
  color: var(--color-gray-light);
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.footer-social-icons a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--color-orange);
  border-radius: 50%;
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.footer-social-icons a:hover::before {
  width: 100%;
  height: 100%;
}

.footer-social-icons a:hover {
  color: var(--color-white);
  border-color: var(--color-orange);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
}

/* Copyright */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--color-gray-light);
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-copyright::before {
  content: '©';
  color: var(--color-orange);
  font-weight: bold;
}

.footer-credits {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.footer-credits .heart {
  color: var(--color-orange);
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* EMAILJS STYLES */

/* Estados del formulario durante el envío */
#contactForm.sending {
  pointer-events: none;
  opacity: 0.8;
  position: relative;
}

#contactForm.sending::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(249, 115, 22, 0.05);
  border-radius: var(--border-radius-lg);
  z-index: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.1; }
}

/* Efecto de éxito en el formulario */
#contactForm.success {
  transform: scale(1.01);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
  transition: all 0.5s ease;
}

/* Estilos para campos con error */
.form-group input.error,
.form-group textarea.error {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.form-group input.error::placeholder,
.form-group textarea.error::placeholder {
  color: #ef4444 !important;
  opacity: 0.8;
}

/* Mensajes de error */
.field-error {
  animation: slideInError 0.3s ease-out;
  font-family: var(--font-primary);
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estados del botón de envío */
#contactForm button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

#contactForm button[type="submit"] i.fa-spinner {
  animation: spin 1s linear infinite;
}

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

/* Mejoras para el botón */
#contactForm .btn-primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
}

#contactForm .btn-primary:not(:disabled):active {
  transform: translateY(0);
}

/* Validación visual exitosa */
.form-group input:valid:not(:placeholder-shown):not(.error),
.form-group textarea:valid:not(:placeholder-shown):not(.error) {
  border-color: rgba(16, 185, 129, 0.5);
}

.form-group input:valid:not(:placeholder-shown):not(.error):focus,
.form-group textarea:valid:not(:placeholder-shown):not(.error):focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}