/* =============================================
   CANGU.CL - STYLES.CSS
   Archivo principal de estilos CSS
   ============================================= */

/* =============================================
   1. VARIABLES CSS PERSONALIZADAS
   ============================================= */
:root {
   /* Colores principales de la marca CANGU */
   --cangu-primary: #6366f1;
   --cangu-dark: #1e1b4b;
   --cangu-light: #f8fafc;
   --cangu-accent: #f59e0b;
   --cangu-purple: #A28FFF;
   --cangu-pink: #F59CE2;
   --cangu-blue: #8FA0FF;
   --cangu-white: #FFFFFD;
   --cangu-lightgrey: #F5F5F5;

   /* Colores de grises del sistema */
   --cangu-gray-50: #f9fafb;
   --cangu-gray-100: #f3f4f6;
   --cangu-gray-200: #e5e7eb;
   --cangu-gray-600: #4b5563;
   --cangu-gray-900: #111827;

   /* Dimensiones del layout */
   --header-height: 100px;
   --mobile-header-height: 70px;
   --mobile-breakpoint: 1024px;
   --mobile-padding: 1rem;
   --mobile-margin: 0.75rem;
   --mobile-text-base: 14px;
   --mobile-button-height: 48px;

   /* Sombras del sistema */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

   /* Transiciones del sistema */
   --transition-base: all 0.2s ease;
   --transition-colors: color 0.2s ease, background-color 0.2s ease;
   --transition-transform: transform 0.3s ease;
}

/* =============================================
   2. RESET Y CONFIGURACIÓN BASE
   ============================================= */

/* Box-sizing para todos los elementos */
* {
   box-sizing: border-box;
}

/* Configuración del scroll suave y fuente base */
html {
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-height);
   font-size: 16px;
}

/* Ajustes responsive de la fuente base */
@media (max-width: 640px) {
   html {
      font-size: 14px;
      scroll-padding-top: var(--mobile-header-height);
   }
}

@media (min-width: 1920px) {
   html {
      font-size: 18px;
   }
}

/* =============================================
   3. TIPOGRAFÍA Y FUENTES
   ============================================= */

/* Configuración base del body con Geist */
body {
   font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
   font-weight: 400;
   color: var(--cangu-gray-900);
   background: var(--cangu-white);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-overflow-scrolling: touch;
}

/* Configuración de títulos con Funnel Display */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Funnel Display', Georgia, serif;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.025em;
   margin: 0;
}

/* Escalado responsivo de títulos */
h1 {
   font-size: clamp(2rem, 4vw, 4rem);
   font-weight: 700;
}

h2 {
   font-size: clamp(1.75rem, 3.5vw, 3rem);
   font-weight: 600;
}

h3 {
   font-size: clamp(1.5rem, 3vw, 2.25rem);
   font-weight: 600;
}

h4 {
   font-size: clamp(1.25rem, 2.5vw, 1.875rem);
   font-weight: 500;
}

/* Fuente para navegación */
nav a,
nav button {
   font-family: 'Funnel Display', Georgia, serif;
   font-weight: 500;
   letter-spacing: 0.025em;
}

/* Párrafos responsivos */
p {
   margin: 0 0 1rem 0;
   font-size: clamp(0.875rem, 1.5vw, 1.125rem);
   line-height: 1.7;
}

/* Clase utilitaria para texto responsive */
.text-responsive {
   font-size: clamp(0.875rem, 2vw, 1.25rem);
}

/* =============================================
   4. HEADER Y NAVEGACIÓN
   ============================================= */

/* Header principal con altura fija */
#main-header {
   height: var(--header-height) !important;
   min-height: var(--header-height) !important;
   max-height: var(--header-height) !important;
   transition: none;
   backdrop-filter: blur(8px);
   background-color: rgba(255, 255, 253, 0.95);
   border-bottom: 1px solid var(--cangu-gray-200);
   box-shadow: var(--shadow-sm);
}

/* Contenedor de navegación */
#nav-container {
   height: 100% !important;
   max-width: 100%;
}

/* Contenedor del logo */
#logo-container {
   height: 4rem;
   display: flex;
   align-items: center;
}

/* Logo principal */
#main-logo {
   width: 216px;
   height: 56px;
   object-fit: contain;
}

/* Ajustes del logo para tablets */
@media (max-width: 640px) {
   #logo-container {
      height: 3rem;
   }

   #main-logo {
      width: 180px;
      height: 48px;
   }
}

/* Ajustes del logo para móviles pequeños */
@media (max-width: 475px) {
   #main-logo {
      width: 160px;
      height: 42px;
   }
}

/* Header optimizado para móviles */
@media (max-width: 768px) {
   #main-header {
      height: var(--mobile-header-height) !important;
      min-height: var(--mobile-header-height) !important;
      max-height: var(--mobile-header-height) !important;
   }

   #nav-container {
      height: 100% !important;
      padding: 0 var(--mobile-padding);
   }

   #logo-container {
      height: 2.5rem;
   }

   #main-logo {
      width: 140px;
      height: 36px;
   }

   /* Botones del header con tamaño touch-friendly */
   #theme-toggle,
   #mobile-menu-button {
      width: var(--mobile-button-height);
      height: var(--mobile-button-height);
      min-width: var(--mobile-button-height);
      min-height: var(--mobile-button-height);
   }

   /* Posición del menú móvil */
   #mobile-menu {
      top: var(--mobile-header-height);
   }

   /* Links del menú móvil */
   #mobile-menu .nav-link {
      height: 56px !important;
      min-height: 56px !important;
      font-size: 16px;
      padding: 0 1.5rem !important;
   }
}

/* Estilos de los enlaces de navegación */
.nav-link {
   transition: var(--transition-colors);
   border-radius: 0 !important;
   height: var(--header-height);
   display: flex;
   align-items: center;
   margin: 0;
   padding-left: 1rem;
   padding-right: 1rem;
   min-height: var(--header-height);
   box-sizing: border-box;
   text-decoration: none;
   position: relative;
}

/* Enlaces de navegación en desktop */
@media (min-width: 1024px) {
   .nav-link {
      height: var(--header-height) !important;
      min-height: var(--header-height) !important;
   }
}

/* Estados hover de navegación */
.nav-link:hover {
   background-color: var(--cangu-purple) !important;
   color: white !important;
   border-radius: 0 !important;
}

/* Estado activo de navegación */
.nav-link.nav-link-active {
   background-color: var(--cangu-pink) !important;
   color: white !important;
   border-radius: 0 !important;
}

/* Navegación móvil */
@media (max-width: 1023px) {
   #mobile-menu .nav-link {
      height: 60px !important;
      min-height: 60px !important;
      border-radius: 0 !important;
      padding: 0 1rem !important;
      margin: 0 !important;
   }

   #mobile-menu .nav-link:hover,
   #mobile-menu .nav-link.nav-link-active {
      border-radius: 0 !important;
   }
}

/* =============================================
   5. BOTONES Y ELEMENTOS INTERACTIVOS
   ============================================= */

/* Botón principal */
.btn-primary {
   background-color: var(--cangu-primary);
   color: white;
   border: none;
   transition: var(--transition-base);
   box-shadow: var(--shadow-md);
   font-family: 'Funnel Display', Georgia, serif;
   font-weight: 500;
   border-radius: 0.5rem;
   cursor: pointer;
}

/* Estados del botón principal */
.btn-primary:hover {
   background-color: var(--cangu-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-lg);
}

.btn-primary:active {
   transform: translateY(0);
   box-shadow: var(--shadow-md);
}

.btn-primary:focus {
   outline: 2px solid var(--cangu-primary);
   outline-offset: 2px;
}

/* Botón secundario */
.btn-secondary {
   background-color: transparent;
   color: var(--cangu-primary);
   border: 2px solid var(--cangu-primary);
   transition: var(--transition-base);
   font-family: 'Funnel Display', Georgia, serif;
   font-weight: 500;
   border-radius: 0.5rem;
   cursor: pointer;
}

.btn-secondary:hover {
   background-color: var(--cangu-primary);
   color: white;
   transform: translateY(-1px);
}

/* Clases de colores para botones */
.bg-cangu-primary {
   background-color: var(--cangu-primary) !important;
}

.bg-cangu-pink {
   background-color: var(--cangu-pink) !important;
}

.bg-cangu-blue {
   background-color: var(--cangu-blue) !important;
}

.bg-cangu-purple {
   background-color: var(--cangu-purple) !important;
}

/* Estados hover para botones de colores */
.bg-cangu-primary:hover {
   background-color: var(--cangu-dark) !important;
}

.bg-cangu-pink:hover {
   background-color: var(--cangu-purple) !important;
}

.bg-cangu-blue:hover {
   background-color: var(--cangu-primary) !important;
}

.bg-cangu-purple:hover {
   background-color: var(--cangu-pink) !important;
}

/* =============================================
   6. LAYOUT Y ESPACIADO
   ============================================= */

/* Offset del main por el header fijo */
main {
   padding-top: var(--header-height);
}

@media (max-width: 768px) {
   main {
      padding-top: var(--mobile-header-height);
   }
}

/* Padding responsivo de secciones */
section {
   min-height: auto;
   padding: clamp(3rem, 8vw, 5rem) 0;
}

/* Secciones móviles */
@media (max-width: 768px) {
   section {
      padding: clamp(2rem, 6vw, 3rem) 0;
   }

   .container-responsive,
   .max-w-7xl {
      padding: 0 var(--mobile-padding);
   }

   section h2 {
      font-size: clamp(1.75rem, 6vw, 2.25rem);
      margin-bottom: 1rem;
   }

   section p {
      font-size: clamp(0.875rem, 3.5vw, 1rem);
      margin-bottom: 1.5rem;
   }
}

/* Contenedores responsivos */
.container-responsive {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 clamp(1rem, 4vw, 2rem);
}

/* Sistema de grids responsivos */
.grid-responsive {
   display: grid;
   gap: clamp(1rem, 3vw, 2rem);
}

.grid-responsive-2 {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-responsive-3 {
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-responsive-4 {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Utilidades de espaciado */
.space-y-responsive>*+* {
   margin-top: clamp(1rem, 3vw, 2rem);
}

.mb-responsive {
   margin-bottom: clamp(1rem, 4vw, 3rem);
}

.py-responsive {
   padding-top: clamp(2rem, 6vw, 4rem);
   padding-bottom: clamp(2rem, 6vw, 4rem);
}

/* =============================================
   7. SECCIONES ESPECÍFICAS
   ============================================= */

/* Sección inicio con fondo doble */
#inicio {
   min-height: 80vh;
   padding-top: 0;
   margin-top: calc(-1 * var(--header-height));
   padding-top: var(--header-height);
   background-image: url('../svg/LineasVectoresPuntueada.svg'), url('../svg/GradienteIntro.svg');
   background-repeat: no-repeat, no-repeat;
   background-position: center top, center center;
   background-size: auto, auto;
   background-attachment: scroll, scroll;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}

/* Sección inicio móvil */
@media (max-width: 768px) {
   #inicio {
      min-height: 70vh;
      padding-top: var(--mobile-header-height);
      margin-top: calc(-1 * var(--mobile-header-height));
      background-position: center top, center center;
      background-size: auto, cover;
   }

   #inicio h1 {
      font-size: clamp(1.875rem, 8vw, 2.5rem);
      line-height: 1.1;
      margin-bottom: 1rem;
   }

   #inicio .hero-subtitle {
      font-size: clamp(1rem, 4vw, 1.25rem);
      line-height: 1.4;
      margin-bottom: 1.5rem;
   }

   #inicio .bg-cangu-white {
      padding: 1.5rem;
      margin: 0 var(--mobile-padding);
      border-radius: 0.75rem;
   }

   #inicio .bg-cangu-primary {
      min-height: var(--mobile-button-height);
      font-size: 16px;
      padding: 0.75rem 1.5rem;
   }

   #inicio img[src*="Cangu1.svg"] {
      width: 120px;
      bottom: -10px;
   }
}

@media (max-width: 480px) {
   #inicio {
      background-position: center 20px, center center;
   }
}

/* Sección productos con fondo */
#productos {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto;
   background-image: url('../svg/GradienteDentral.svg');
}

/* Sección contacto con fondo */
#contacto {
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: auto;
   background-image: url('../svg/GradienteContacto.svg');
}

/* =============================================
   8. CARDS Y COMPONENTES
   ============================================= */

/* Card base */
.card {
   background: var(--cangu-white);
   border-radius: 1rem;
   box-shadow: var(--shadow-lg);
   transition: var(--transition-base);
   overflow: hidden;
}

.card:hover {
   box-shadow: var(--shadow-xl);
   transform: translateY(-2px);
}

/* Padding responsivo para cards */
.card-padding {
   padding: clamp(1.5rem, 4vw, 2rem);
}

/* Cards en móvil */
@media (max-width: 768px) {
   .grid {
      gap: 1rem;
   }

   .card,
   .bg-white {
      padding: 1.25rem;
      border-radius: 0.75rem;
   }

   /* Cards de servicios */
   #servicios .bg-cangu-lightgrey {
      padding: 1.5rem;
   }

   #servicios h3 {
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
   }

   /* Cards de productos */
   #productos .bg-white {
      padding: 1.5rem;
   }

   #productos .w-12,
   #productos .w-16 {
      width: 3rem !important;
      height: 3rem !important;
   }

   #productos .w-6,
   #productos .w-8 {
      width: 1.5rem !important;
      height: 1.5rem !important;
   }
}

/* =============================================
   9. FORMULARIOS
   ============================================= */

/* Campos de formulario base */
input,
textarea,
select {
   width: 100%;
   padding: clamp(0.75rem, 2vw, 1rem);
   border: 1px solid var(--cangu-gray-200);
   border-radius: 0.5rem;
   font-size: clamp(0.875rem, 1.5vw, 1rem);
   transition: var(--transition-base);
   background: var(--cangu-white);
}

/* Estados de foco */
input:focus,
textarea:focus,
select:focus {
   outline: none;
   border-color: var(--cangu-primary);
   ring: 2px;
   ring-color: var(--cangu-primary);
   ring-opacity: 0.3;
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Estados de validación */
input:valid {
   border-color: #10b981;
}

input:invalid:not(:focus):not(:placeholder-shown) {
   border-color: #ef4444;
}

/* Grid de formularios */
.form-grid {
   display: grid;
   gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
   .form-grid-2 {
      grid-template-columns: 1fr 1fr;
   }
}

/* Formularios móviles */
@media (max-width: 768px) {
   #contacto .grid {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   #contacto .bg-gray-50 {
      padding: 1.5rem;
      border-radius: 0.75rem;
   }

   #contact-form input,
   #contact-form textarea,
   #contact-form select {
      min-height: var(--mobile-button-height);
      font-size: 16px;
      /* Evita zoom en iOS */
      padding: 0.75rem;
   }

   #contact-form textarea {
      min-height: 120px;
   }

   #contact-form .grid-cols-2 {
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   #contact-submit-btn {
      min-height: var(--mobile-button-height);
      font-size: 16px;
      padding: 0.75rem 1.5rem;
   }

   #contacto .space-y-6 {
      gap: 1.5rem;
   }

   #contacto .w-10,
   #contacto .w-12 {
      width: 2.5rem !important;
      height: 2.5rem !important;
      flex-shrink: 0;
   }
}

/* Estilos de errores de formulario */
.field-error {
   color: #dc2626;
   font-size: 0.875rem;
   margin-top: 0.25rem;
   display: block;
}

.border-red-500 {
   border-color: #ef4444 !important;
}

/* Estados de envío de formulario */
.submit-text,
.loading-text {
   transition: opacity 0.2s ease;
}

#contact-form button:disabled .submit-text {
   display: none;
}

#contact-form button:disabled .loading-text {
   display: inline-flex !important;
   align-items: center;
}

/* Mensajes de estado del formulario */
#form-message {
   transition: all 0.3s ease;
   padding: 1rem;
   border-radius: 0.5rem;
   font-weight: 500;
}

#form-message.success {
   background-color: #10b981;
   color: white;
}

#form-message.error {
   background-color: #ef4444;
   color: white;
}

/* =============================================
   10. ANIMACIONES
   ============================================= */

/* Definición de keyframes */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

@keyframes slideInRight {
   from {
      opacity: 0;
      transform: translateX(30px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-30px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes scaleIn {
   from {
      opacity: 0;
      transform: scale(0.95);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

/* Keyframes controlados para el equipo */
@keyframes bounce {

   0%,
   100% {
      transform: translateY(0px) scale(1) !important;
   }

   50% {
      transform: translateY(-2px) scale(1.005) !important;
   }
}

@keyframes wiggle {

   0%,
   100% {
      transform: rotate(0deg) scale(1) !important;
   }

   25% {
      transform: rotate(-0.3deg) scale(1) !important;
   }

   75% {
      transform: rotate(0.3deg) scale(1) !important;
   }
}

@keyframes pulse-scale {

   0%,
   100% {
      transform: scale(1) !important;
   }

   50% {
      transform: scale(1.01) !important;
   }
}

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

@keyframes float {
   0% {
      transform: translateY(0px) rotate(0deg);
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   90% {
      opacity: 1;
   }

   100% {
      transform: translateY(-100vh) rotate(360deg);
      opacity: 0;
   }
}

/* Clases de animación */
.animate-fade-in-up {
   animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
   animation: slideInRight 0.4s ease-out;
}

.animate-slide-in-left {
   animation: slideInLeft 0.4s ease-out;
}

.animate-scale-in {
   animation: scaleIn 0.5s ease-out;
}

.animate-pulse {
   animation: pulse 2s infinite;
}

.animate-bounce-custom {
   animation: bounce 2s infinite ease-in-out !important;
}

.animate-wiggle {
   animation: wiggle 1.5s infinite ease-in-out !important;
}

.animate-pulse-scale {
   animation: pulse-scale 2.5s infinite ease-in-out !important;
}

.particle {
   animation: float 15s infinite linear;
}

/* =============================================
   11. COMPONENTE BARRAS DE ROBOTS
   ============================================= */

/* Barra rotada de robots */
.robot-bar-rotated {
   transform-origin: bottom right;
}

/* Contenedor de robots */
.robot-container {
   display: flex;
   transition: transform 0.1s ease-out, opacity 0.2s ease-out;
   width: max-content;
   gap: 1.5rem;
}

/* Imagen individual de robot */
.robot-image {
   height: 80px;
   width: 80px;
   flex-shrink: 0;
   transition: transform 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.robot-image svg {
   width: 68px;
   height: 66px;
}

.robot-image:hover {
   transform: scale(1.2);
}

/* Contenedor de barra */
.bar-container {
   overflow: hidden;
   position: relative;
   width: 100%;
}

/* Barras de robots en móvil */
@media (max-width: 768px) {
   #barras {
      padding-top: 2rem;
   }

   .robot-bar-rotated,
   .bar-container {
      height: 60px;
   }

   .robot-image {
      height: 50px;
      width: 50px;
   }

   .robot-image svg {
      width: 40px;
      height: 38px;
   }
}

/* =============================================
   12. COMPONENTE EQUIPO (3 COLUMNAS FIJAS)
   ============================================= */

/* Grid principal del equipo - SIEMPRE 3 columnas */
.team-grid-fixed {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr) !important;
   gap: clamp(0.25rem, 1.5vw, 1.5rem) !important;
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 auto !important;
   padding: 0 !important;
   box-sizing: border-box !important;
}

/* Card base del equipo */
.team-grid-fixed .svg-wrapper {
   width: 100% !important;
   min-width: 0 !important;
   max-width: 100% !important;
   height: auto !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   align-items: center !important;
   overflow: hidden !important;
   /* CRÍTICO: evita que las imágenes se salgan */
   position: relative !important;
   background: white !important;
   border-radius: 0.75rem !important;
   box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1) !important;
   cursor: pointer !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   padding: clamp(0.25rem, 1.5vw, 1rem) !important;
   box-sizing: border-box !important;
}

/* Contenedor específico para la imagen */
.team-grid-fixed .svg-wrapper .image-container {
   width: 100% !important;
   height: auto !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   overflow: hidden !important;
   /* CRÍTICO: segunda capa de protección */
   position: relative !important;
   flex-grow: 1 !important;
   flex-shrink: 1 !important;
   margin-bottom: 0.25rem !important;
   box-sizing: border-box !important;
}

/* Control extremo de las imágenes */
.team-grid-fixed .svg-wrapper img {
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   object-position: center !important;
   display: block !important;
   margin: 0 auto !important;
   position: relative !important;
   z-index: 1 !important;
   flex-shrink: 0 !important;
   transform-origin: center center !important;
   border-radius: 0.25rem !important;
}

/* Overlay del rol y nombre */
.team-grid-fixed .svg-wrapper .role-overlay {
   width: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   position: relative !important;
   flex-shrink: 0 !important;
   margin-top: auto !important;
   background: rgba(0, 0, 0, 0.9) !important;
   color: white !important;
   border-radius: 0.375rem !important;
   font-weight: 600 !important;
   text-align: center !important;
   box-sizing: border-box !important;
   z-index: 2 !important;
}

/* =============================================
   12.1 BREAKPOINTS DEL EQUIPO
   ============================================= */

/* Mobile extremo (hasta 320px) */
@media (max-width: 320px) {
   .team-grid-fixed {
      gap: 0.125rem !important;
      grid-template-columns: repeat(3, minmax(85px, 1fr)) !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 100px !important;
      padding: 0.125rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 50px !important;
      max-height: 60px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 40px !important;
      max-height: 40px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 20px !important;
      padding: 0.125rem !important;
      font-size: 0.5rem !important;
   }
}

/* Mobile muy pequeño (321px - 375px) */
@media (min-width: 321px) and (max-width: 375px) {
   .team-grid-fixed {
      gap: 0.25rem !important;
      grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 110px !important;
      padding: 0.25rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 55px !important;
      max-height: 65px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 45px !important;
      max-height: 45px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 22px !important;
      padding: 0.25rem !important;
      font-size: 0.55rem !important;
   }
}

/* Mobile pequeño (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
   .team-grid-fixed {
      gap: 0.375rem !important;
      grid-template-columns: repeat(3, minmax(100px, 1fr)) !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 125px !important;
      padding: 0.375rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 60px !important;
      max-height: 70px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 50px !important;
      max-height: 50px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 24px !important;
      padding: 0.25rem !important;
      font-size: 0.6rem !important;
   }
}

/* Mobile medio (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
   .team-grid-fixed {
      gap: 0.5rem !important;
      grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 145px !important;
      padding: 0.5rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 70px !important;
      max-height: 80px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 60px !important;
      max-height: 60px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 26px !important;
      padding: 0.375rem !important;
      font-size: 0.65rem !important;
   }
}

/* Mobile grande/Tablet pequeño (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
   .team-grid-fixed {
      gap: 0.75rem !important;
      grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
      max-width: 500px !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 165px !important;
      padding: 0.75rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 80px !important;
      max-height: 90px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 70px !important;
      max-height: 70px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 28px !important;
      padding: 0.5rem !important;
      font-size: 0.7rem !important;
   }
}

/* Tablet (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
   .team-grid-fixed {
      gap: 1rem !important;
      grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
      max-width: 600px !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 200px !important;
      padding: 1rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 100px !important;
      max-height: 110px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 90px !important;
      max-height: 90px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 32px !important;
      padding: 0.625rem !important;
      font-size: 0.75rem !important;
   }
}

/* Desktop pequeño (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
   .team-grid-fixed {
      gap: 1.5rem !important;
      grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
      max-width: 700px !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 240px !important;
      padding: 1.25rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 120px !important;
      max-height: 130px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 110px !important;
      max-height: 110px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 36px !important;
      padding: 0.75rem !important;
      font-size: 0.8rem !important;
   }
}

/* Desktop grande (1280px+) */
@media (min-width: 1280px) {
   .team-grid-fixed {
      gap: 2rem !important;
      grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
      max-width: 800px !important;
   }

   .team-grid-fixed .svg-wrapper {
      min-height: 280px !important;
      padding: 1.5rem !important;
   }

   .team-grid-fixed .svg-wrapper .image-container {
      min-height: 140px !important;
      max-height: 150px !important;
   }

   .team-grid-fixed .svg-wrapper img {
      max-width: 130px !important;
      max-height: 130px !important;
   }

   .team-grid-fixed .svg-wrapper .role-overlay {
      min-height: 40px !important;
      padding: 0.875rem !important;
      font-size: 0.875rem !important;
   }
}

/* =============================================
   12.2 EFECTOS HOVER DEL EQUIPO
   ============================================= */

/* Texto del rol (visible por defecto) */
.team-grid-fixed .svg-wrapper .role-text {
   transition: opacity 0.3s ease !important;
   display: block !important;
   text-align: center !important;
   line-height: 1.1 !important;
}

/* Texto del nombre (oculto por defecto) */
.team-grid-fixed .svg-wrapper .name-text {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   opacity: 0 !important;
   text-align: center !important;
   line-height: 1.0 !important;
   white-space: normal !important;
   /* Permite múltiples líneas */
   word-wrap: break-word !important;
   /* Rompe palabras largas */
   overflow-wrap: break-word !important;
   hyphens: auto !important;
   /* Guiones automáticos */
   max-width: 98% !important;
   width: 98% !important;
   transition: opacity 0.3s ease !important;
   padding: 0 1px !important;
   font-size: inherit !important;
}

/* Efectos hover */
.team-grid-fixed .svg-wrapper:hover .role-text {
   opacity: 0 !important;
}

.team-grid-fixed .svg-wrapper:hover .name-text {
   opacity: 1 !important;
}

/* Hover de la card completa */
.team-grid-fixed .svg-wrapper:hover {
   transform: translateY(-1px) scale(1.005) !important;
   box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.15) !important;
   overflow: hidden !important;
   /* Mantiene control de overflow */
}

/* Prevenir que hover rompa dimensiones de imágenes */
.team-grid-fixed .svg-wrapper:hover img {
   max-width: inherit !important;
   max-height: inherit !important;
}

/* Animaciones controladas para el equipo */
.team-grid-fixed .svg-wrapper img.animate-wiggle,
.team-grid-fixed .svg-wrapper img.animate-pulse-scale,
.team-grid-fixed .svg-wrapper img.animate-bounce-custom {
   transform-origin: center center !important;
}

/* Estados inactive/active para JavaScript */
.team-grid-fixed .svg-wrapper.inactive img {
   opacity: 0.4 !important;
   filter: grayscale(50%) !important;
}

.team-grid-fixed .svg-wrapper.active img {
   opacity: 1 !important;
   filter: grayscale(0%) !important;
}

/* =============================================
   12.3 OVERRIDES DE TAILWIND PARA EL EQUIPO
   ============================================= */

/* Override total de clases que interfieren con el grid */
.team-grid-fixed.grid-cols-1,
.team-grid-fixed.md\\:grid-cols-2,
.team-grid-fixed.lg\\:grid-cols-3,
.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
.max-w-6xl.mx-auto.items-stretch {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr) !important;
   gap: clamp(0.25rem, 1.5vw, 2rem) !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* Reset para evitar conflictos en breakpoints */
@media (max-width: 767px) {
   .md\\:grid-cols-2 {
      grid-template-columns: repeat(3, 1fr) !important;
   }
}

@media (max-width: 1023px) {
   .lg\\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr) !important;
   }
}

/* Fallback para imágenes rotas */
.team-grid-fixed .svg-wrapper img[src=""],
.team-grid-fixed .svg-wrapper img:not([src]),
.team-grid-fixed .svg-wrapper img.image-error {
   background: #f3f4f6 !important;
   border: 1px dashed #d1d5db !important;
   border-radius: 0.25rem !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.team-grid-fixed .svg-wrapper img.image-error::before {
   content: "👤" !important;
   font-size: 1.25rem !important;
   color: #6b7280 !important;
}

/* =============================================
   13. TEMA OSCURO
   ============================================= */

.dark {
   background-color: var(--cangu-dark);
   color: white;
}

.dark header {
   background-color: rgba(17, 24, 39, 0.95);
   border-bottom-color: var(--cangu-gray-600);
}

.dark .bg-white {
   background-color: var(--cangu-gray-900);
}

.dark .text-gray-900 {
   color: white;
}

.dark .text-gray-600 {
   color: var(--cangu-gray-200);
}

.dark .bg-gray-50 {
   background-color: var(--cangu-gray-600);
}

.dark .card {
   background-color: var(--cangu-gray-900);
   border: 1px solid var(--cangu-gray-600);
}

.dark input,
.dark textarea,
.dark select {
   background-color: var(--cangu-gray-900);
   border-color: var(--cangu-gray-600);
   color: white;
}

.dark input::placeholder,
.dark textarea::placeholder {
   color: var(--cangu-gray-400);
}

/* =============================================
   14. SCROLL TO TOP BUTTON
   ============================================= */

.scroll-to-top {
   position: fixed;
   bottom: clamp(1rem, 4vw, 2rem);
   right: clamp(1rem, 4vw, 2rem);
   width: clamp(2.5rem, 6vw, 3rem);
   height: clamp(2.5rem, 6vw, 3rem);
   background-color: var(--cangu-primary);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--transition-base);
   opacity: 0;
   visibility: hidden;
   z-index: 100;
   border: none;
   box-shadow: var(--shadow-lg);
}

.scroll-to-top.visible {
   opacity: 1;
   visibility: visible;
}

.scroll-to-top:hover {
   background-color: var(--cangu-dark);
   transform: translateY(-2px);
   box-shadow: var(--shadow-xl);
}

/* =============================================
   15. ENLACES LEGALES
   ============================================= */

.legal-link {
   color: var(--cangu-primary);
   text-decoration: underline;
   transition: all 0.3s ease;
}

.legal-link:hover {
   color: var(--cangu-dark);
   transform: translateY(-1px);
}

/* =============================================
   16. UTILIDADES Y ELEMENTOS ADICIONALES
   ============================================= */

/* Aspect ratios */
.aspect-video {
   aspect-ratio: 16 / 9;
}

.aspect-square {
   aspect-ratio: 1 / 1;
}

/* Estados de carga */
.loading {
   opacity: 0.6;
   pointer-events: none;
   position: relative;
}

.loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1.5rem;
   height: 1.5rem;
   margin: -0.75rem 0 0 -0.75rem;
   border: 2px solid var(--cangu-primary);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: var(--cangu-gray-100);
}

::-webkit-scrollbar-thumb {
   background: var(--cangu-primary);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--cangu-dark);
}

/* Estilos de foco mejorados */
*:focus-visible {
   outline: 2px solid var(--cangu-primary);
   outline-offset: 2px;
}

/* =============================================
   17. RESPONSIVE Y BREAKPOINTS GENERALES
   ============================================= */

/* Extra small devices */
@media (max-width: 475px) {
   .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .text-4xl {
      font-size: 2rem;
   }

   .text-5xl {
      font-size: 2.5rem;
   }

   .py-20 {
      padding-top: 3rem;
      padding-bottom: 3rem;
   }

   .gap-16 {
      gap: 2rem;
   }
}

/* Small devices */
@media (min-width: 476px) and (max-width: 640px) {
   .container {
      padding: 0 1.5rem;
   }
}

/* Medium devices */
@media (min-width: 641px) and (max-width: 1023px) {
   .grid-cols-1.md\\:grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
   }

   .grid-cols-1.md\\:grid-cols-3 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
}

/* Large devices */
@media (min-width: 1024px) {
   .lg\\:grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
   }

   .lg\\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
   }

   .lg\\:grid-cols-4 {
      grid-template-columns: repeat(4, 1fr);
   }
}

/* Extra large devices */
@media (min-width: 1280px) {
   .xl\\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
   }

   .xl\\:grid-cols-4 {
      grid-template-columns: repeat(4, 1fr);
   }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
   .container {
      max-width: 1600px;
   }

   body {
      font-size: 18px;
   }
}

/* Ajustes específicos para dispositivos muy pequeños */
@media (max-width: 375px) {
   :root {
      --mobile-padding: 0.75rem;
      --mobile-text-base: 13px;
   }

   #main-logo {
      width: 120px;
      height: 32px;
   }

   #inicio h1 {
      font-size: 1.75rem;
   }

   .grid {
      gap: 0.75rem;
   }
}

/* Ajustes para tablets en portrait */
@media (min-width: 769px) and (max-width: 1023px) {
   :root {
      --header-height: 80px;
   }

   .grid-responsive-2 {
      grid-template-columns: repeat(2, 1fr);
   }

   .grid-responsive-3 {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* =============================================
   18. OPTIMIZACIONES DE PERFORMANCE
   ============================================= */

/* GPU acceleration para animaciones */
.animate-fade-in-up,
.animate-slide-in-right,
.animate-slide-in-left,
.animate-scale-in {
   will-change: transform, opacity;
}

/* Contain layout shifts */
.nav-link,
.btn-primary,
.card {
   contain: layout style paint;
}

/* Optimize transforms */
.transform {
   backface-visibility: hidden;
   perspective: 1000px;
}

/* Optimizaciones móviles */
@media (max-width: 768px) {
   @media (prefers-reduced-motion: no-preference) {

      .animate-fade-in-up,
      .animate-slide-in-right,
      .animate-scale-in {
         animation-duration: 0.4s;
      }
   }

   .shadow-lg {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   }

   .shadow-xl {
      box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.1);
   }

   .rounded-2xl {
      border-radius: 0.75rem;
   }

   .rounded-xl {
      border-radius: 0.5rem;
   }

   /* Elementos touch-friendly */
   button,
   .btn-primary,
   .btn-secondary,
   .nav-link,
   .legal-link {
      min-height: 44px;
      min-width: 44px;
   }

   .space-x-4>*+* {
      margin-left: 0.75rem;
   }

   .space-y-4>*+* {
      margin-top: 0.75rem;
   }
}

/* =============================================
   19. ACCESIBILIDAD Y PREFERENCIAS DE USUARIO
   ============================================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }

   html {
      scroll-behavior: auto;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .btn-primary {
      border: 2px solid var(--cangu-dark);
   }

   .nav-link:hover {
      border: 2px solid white;
   }
}

/* =============================================
   20. PRINT STYLES
   ============================================= */

@media print {

   .scroll-to-top,
   #theme-toggle,
   #mobile-menu-button {
      display: none !important;
   }

   body {
      font-size: 12pt;
      line-height: 1.4;
   }

   .shadow-lg,
   .shadow-xl {
      box-shadow: none !important;
   }
}

/* =============================================
   FIN DEL ARCHIVO STYLES.CSS
   ============================================= */