/* ============================================
   COLORES PERSONALIZADOS - FERNANDO CRUZ
   Esquema: Rojo y Blanco con modo automático día/noche
   ============================================ */

/* Variables de color para modo claro (día) */
:root {
  --accent: #dc143c; /* Rojo principal */
  --secondary: #ff4757; /* Rojo secundario */
  --accent-hover: #b01030; /* Rojo oscuro para hover */
  --text-primary: #2d2d2d; /* Texto oscuro para modo claro */
  --text-secondary: #666666; /* Texto secundario */
  --bg-primary: #ffffff; /* Fondo blanco */
  --bg-secondary: #f5f5f5; /* Fondo secundario claro */
  --border-color: #e0e0e0; /* Bordes suaves */
  --logo-filter: brightness(0); /* Logo negro en modo día */
  --headline-color: #dc143c; /* Títulos rojos en modo día */
}

/* Variables de color para modo oscuro (noche) */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ff4757; /* Rojo más brillante para modo oscuro */
    --secondary: #dc143c; /* Rojo más oscuro */
    --accent-hover: #ff6b7a; /* Rojo claro para hover */
    --text-primary: #ffffff; /* Texto blanco */
    --text-secondary: #b0b0b0; /* Texto secundario claro */
    --bg-primary: #1a1a1a; /* Fondo oscuro */
    --bg-secondary: #2d2d2d; /* Fondo secundario oscuro */
    --border-color: #404040; /* Bordes oscuros */
    --logo-filter: brightness(0) invert(1); /* Logo blanco en modo noche */
    --headline-color: #ffffff; /* Títulos blancos en modo noche */
  }
}

/* ============================================
   GRADIENTES Y FONDOS
   ============================================ */

/* Sobrescribir colores del tema */
.gradient-fill {
  fill: url(#gradientFill) !important;
}

#gradientFill stop:first-child {
  stop-color: var(--accent) !important;
}

#gradientFill stop:last-child {
  stop-color: var(--secondary) !important;
}

/* Gradiente de fondo animado */
.gradient-background .blur {
  background: radial-gradient(circle, rgba(220, 20, 60, 0.2) 0%, transparent 70%);
}

@media (prefers-color-scheme: dark) {
  .gradient-background .blur {
    background: radial-gradient(circle, rgba(255, 71, 87, 0.15) 0%, transparent 70%);
  }
}

/* ============================================
   BOTONES Y ENLACES
   ============================================ */

/* Botones con efecto hover */
.btn-hover-accent:hover,
.btn-hover-accent-mobile:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-default {
  transition: all 0.3s ease;
}

.btn-default:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
}

/* Enlaces de texto */
.text-link,
.text-link-bold {
  color: var(--accent) !important;
  transition: color 0.3s ease;
}

.text-link:hover,
.text-link-bold:hover {
  color: var(--accent-hover) !important;
}

/* ============================================
   TAGS Y ETIQUETAS
   ============================================ */

/* Tags con bordes */
.rounded-tag {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transition: all 0.3s ease;
}

.rounded-tag:hover {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

/* Tags con fondo */
.rounded-tag.opposite {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

.rounded-tag.tag-outline {
  border: 1px solid var(--accent);
  color: var(--accent);
  background-color: transparent;
}

/* ============================================
   ICONOS Y DECORACIONES
   ============================================ */

/* Iconos SVG */
.h2__subtitle svg path {
  fill: var(--accent) !important;
}

/* Estrellas de rating */
.ph-fill.ph-star {
  color: var(--accent) !important;
}

/* ============================================
   LAYOUT Y ESTRUCTURA
   ============================================ */

/* Ajustes de z-index para evitar superposición */
.inner.about {
  position: relative;
  z-index: 1;
}

.avatar {
  z-index: 10;
  position: fixed;
}

.content {
  position: relative;
  z-index: 1;
}

.content__block {
  position: relative;
  z-index: 2;
}

/* ============================================
   RESPONSIVE - MÓVIL Y TABLET
   ============================================ */

/* Ajustes para tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .avatar {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
  }
  
  .content {
    width: 100%;
    padding: 0 1rem;
  }
  
  .h2__title {
    font-size: 2rem !important;
  }
  
  .headline__title {
    font-size: 2.5rem !important;
  }
}

/* Ajustes para móviles (hasta 767px) */
@media (max-width: 767px) {
  .avatar {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  
  .avatar__image img {
    max-width: 200px;
    margin: 0 auto;
  }
  
  .h2__title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  
  .headline__title {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }
  
  .about-descr__text {
    font-size: 0.95rem;
    text-align: justify;
  }
  
  .cards__card {
    margin-bottom: 1rem;
  }
  
  .resume-lines__item {
    flex-direction: column;
    margin-bottom: 2rem;
  }
  
  .contact-lines__item {
    flex-direction: column;
  }
  
  .contact-lines__data {
    margin-bottom: 1rem;
    text-align: center;
  }
  
  /* Ajustar padding en móviles */
  .content__block {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Botones en móvil */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .headline__btnholder {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================
   MEJORAS VISUALES ADICIONALES
   ============================================ */

/* Sombras suaves para tarjetas */
.cards__card,
.achievements__card,
.tools-cards__card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.cards__card:hover,
.achievements__card:hover,
.tools-cards__card:hover {
  box-shadow: 0 4px 16px rgba(220, 20, 60, 0.2);
  transform: translateY(-4px);
}

/* Animación suave para elementos */
.animate-in-up {
  animation: fadeInUp 0.6s ease-out;
}

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

/* Mejorar legibilidad de textos */
p, li, span {
  line-height: 1.6;
}

/* Asegurar que las imágenes sean responsive */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   ELIMINAR COLORES MORADOS
   ============================================ */

/* Sobrescribir cualquier color morado/púrpura */
*[style*="purple"],
*[style*="violet"],
*[style*="#800080"],
*[style*="#9370DB"] {
  color: var(--accent) !important;
}

/* Asegurar que no haya fondos morados */
.bg-purple,
.bg-violet {
  background-color: var(--bg-secondary) !important;
}

/* ============================================
   TÍTULOS ESPECÍFICOS - BLANCOS EN NOCHE, ROJOS EN DÍA
   ============================================ */

/* Título principal del headline */
.headline__title {
  color: var(--headline-color) !important;
}

/* Títulos H2 principales */
.h2__title {
  color: var(--headline-color) !important;
}

/* Subtítulo del headline */
.headline__subtitle {
  color: var(--headline-color) !important;
}

/* ============================================
   LOGO ADAPTATIVO - DARTH VADER
   ============================================ */

/* Logo se adapta según modo día/noche */
.logo__image img {
  filter: var(--logo-filter);
  transition: filter 0.3s ease;
}

/* ============================================
   HEADER RESPONSIVE MEJORADO
   ============================================ */

/* Header principal */
.header {
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}

/* Navegación del header */
.header__navigation {
  flex: 1;
  min-width: 0;
}

/* Menú responsive */
.menu__list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.menu__item {
  flex-shrink: 0;
}

/* Controles del header */
.header__controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

/* Botón "Hablemos" siempre visible */
.header__trigger {
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  min-width: auto;
}

/* Ajustes para pantallas grandes (1920x1080 y superiores) */
@media (min-width: 1920px) {
  .header {
    padding: 1.5rem 3rem;
    max-width: 1920px;
    margin: 0 auto;
  }
  
  .menu__list {
    gap: 1rem;
  }
  
  .header__trigger {
    padding: 1rem 2rem;
  }
}

/* Ajustes para pantallas medianas (1366px - 1919px) */
@media (max-width: 1919px) and (min-width: 1366px) {
  .header {
    padding: 1rem 2rem;
  }
  
  .menu__list {
    gap: 0.75rem;
  }
  
  .menu__caption {
    font-size: 0.95rem;
  }
}

/* Ajustes para pantallas pequeñas de escritorio (1024px - 1365px) */
@media (max-width: 1365px) and (min-width: 1024px) {
  .header {
    padding: 1rem 1.5rem;
  }
  
  .menu__list {
    gap: 0.5rem;
  }
  
  .menu__caption {
    font-size: 0.9rem;
  }
  
  .header__trigger {
    padding: 0.6rem 1.2rem;
  }
  
  .trigger__caption {
    font-size: 0.9rem;
  }
}

/* Ajustes para tablets (768px - 1023px) */
@media (max-width: 1023px) {
  .header {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }
  
  .header__navigation {
    order: 2;
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .header__controls {
    order: 1;
    margin-left: auto;
  }
  
  .menu__list {
    justify-content: center;
    gap: 0.5rem;
  }
  
  .menu__caption {
    font-size: 0.85rem;
  }
  
  .header__trigger {
    padding: 0.5rem 1rem;
  }
}

/* Ajustes para móviles (hasta 767px) */
@media (max-width: 767px) {
  .header {
    padding: 0.5rem 1rem;
    flex-direction: column;
  }
  
  .header__navigation {
    width: 100%;
    order: 2;
  }
  
  .header__controls {
    width: 100%;
    order: 1;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  .menu__list {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .menu__item {
    width: 100%;
  }
  
  .menu__link {
    width: 100%;
    justify-content: center;
  }
  
  .header__trigger {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}