/* Alien Studio - Futurismo Neón */

:root {
    --neon: #BEF49F;
    --emerald: #214941;
    --bg-deep: #070b0a;
    --bg-deeper: #050807;
    --muted: rgba(255, 255, 255, 0.65);
    /* Acentos sutiles */
    --accent-blue: #8BD3FF;
    --accent-pink: #FF9EEA;
    --accent-violet: #C7A8FF;
  }
  
  /* Paletas alternativas (también ajustan acentos) */
  [data-theme="emerald"] {
    --neon: #BEF49F;
    --emerald: #214941;
    --accent-blue: #8BD3FF;
    --accent-pink: #FF9EEA;
    --accent-violet: #C7A8FF;
  }
  
  [data-theme="violet"] {
    --neon: #C7A8FF;
    --emerald: #3D2A6D;
    --accent-blue: #9CC7FF;
    --accent-pink: #FF9EEA;
    --accent-violet: #E4D1FF;
  }
  
  [data-theme="aqua"] {
    --neon: #98F5FF;
    --emerald: #175A63;
    --accent-blue: #98F5FF;
    --accent-pink: #B9FFEE;
    --accent-violet: #C7F1FF;
  }
  
  [data-theme="magenta"] {
    --neon: #FF9EEA;
    --emerald: #5A1E43;
    --accent-blue: #8BD3FF;
    --accent-pink: #FF79C6;
    --accent-violet: #E1B9FF;
  }
  
  /* Nuevas paletas */
  [data-theme="citrus"] {
    --neon: #E6FF8F;
    --emerald: #3A5300;
    --accent-blue: #B3FF8F;
    --accent-pink: #FFF08F;
    --accent-violet: #D7FF8F;
  }
  
  [data-theme="amber"] {
    --neon: #FFC773;
    --emerald: #6B3A00;
    --accent-blue: #FFD19A;
    --accent-pink: #FF9A7A;
    --accent-violet: #FFE1B5;
  }
  
  [data-theme="ice"] {
    --neon: #BFF4FF;
    --emerald: #1E3A4A;
    --accent-blue: #A6E9FF;
    --accent-pink: #C9F7FF;
    --accent-violet: #D4E8FF;
  }
  
  html,
  body {
    background:
      /* velos de color muy sutiles */
      radial-gradient(800px 600px at 16% 24%, color-mix(in srgb, var(--accent-blue) 22%, transparent), transparent 60%),
      radial-gradient(900px 700px at 84% 78%, color-mix(in srgb, var(--accent-violet) 20%, transparent), transparent 65%),
      radial-gradient(700px 500px at 32% 90%, color-mix(in srgb, var(--accent-pink) 18%, transparent), transparent 60%),
      /* base */
      radial-gradient(1200px 800px at 70% -10%, #1b2f2a 0%, #0d1916 35%, var(--bg-deep) 60%, var(--bg-deeper) 100%);
  }
  
  /* Utilidades especiales */
  .text-balance {
    text-wrap: balance;
  }
  
  
  
  .nav-link:hover {
    color: rgba(255, 255, 255, 1);
  }
  
  /* Nav con hovers multicolor */
  nav .nav-link:nth-child(1):hover {
    color: var(--accent-blue);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 60%, transparent);
  }
  
  nav .nav-link:nth-child(2):hover {
    color: var(--accent-pink);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-pink) 60%, transparent);
  }
  
  nav .nav-link:nth-child(3):hover {
    color: var(--accent-violet);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-violet) 60%, transparent);
  }
  
  nav .nav-link:nth-child(4):hover {
    color: var(--neon);
    text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 60%, transparent);
  }
  
  /* Tarjetas */
  .card-glass {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.692), rgba(255, 255, 255, 0.712));
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.6);
    transition: transform 220ms ease, border-color 220ms ease;
  }
  
  .card-glass:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-violet) 45%, transparent);
    box-shadow: 0 12px 44px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px color-mix(in srgb, var(--accent-pink) 18%, transparent) inset;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  

  
  /* Servicios: icon ring white background override */
  #servicios .grid > .card-glass .icon-ring {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.12) inset;
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 9999px;
  }
  

  
  
  /* Proyectos */
  .project-tile {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  
  /* Variante sin colores difuminados */
  
  
  .project-tile .tile-mask {
    position: absolute;
    inset: 0;
    background: none;
    opacity: 0;
    transition: none;
  }
  
  
  
  .project-tile .tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 1rem;
    font-weight: 700;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.829));
  }
  
  /* Caption con acento al hover */
  .project-tile:hover .tile-caption {
    color: #25D366;
    
  }
  
  /* Marquee */
  .marquee {
    position: relative;
    overflow: hidden;
    /* Full-bleed: ocupa todo el ancho de la ventana y evita márgenes del contenedor padre */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .marquee-track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    animation: marquee 18s linear infinite;
    will-change: transform;
  }
  
  /* Pause marquee on interaction */
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }
  
  .marquee span {
    color: var(--muted);
    transition: color .2s ease, text-shadow .2s ease;
  }
  
  /* Alterna colores de las etiquetas del marquee */
  .marquee span:nth-child(3n+1) {
    color: color-mix(in srgb, var(--accent-blue) 75%, #fff 10%);
  }
  
  .marquee span:nth-child(3n+2) {
    color: color-mix(in srgb, var(--accent-pink) 75%, #fff 10%);
  }
  
  .marquee span:nth-child(3n) {
    color: color-mix(in srgb, var(--accent-violet) 75%, #fff 10%);
  }
  
  .marquee span:hover {
    text-shadow: 0 0 10px currentColor;
  }
  
  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }
  
  /* Badges tech */
  .badge-tech {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition-property: transform, border-color, box-shadow, backdrop-filter;
    transition-duration: .2s;
  }
  
  .badge-tech:hover {
    transform: translateY(-1px) scale(1.02);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  
  .badge-tech:nth-child(3n+1):hover {
    border-color: color-mix(in srgb, var(--accent-blue) 40%, transparent);
    box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent-blue) 45%, transparent);
  }
  
  .badge-tech:nth-child(3n+2):hover {
    border-color: color-mix(in srgb, var(--accent-pink) 40%, transparent);
    box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent-pink) 45%, transparent);
  }
  
  .badge-tech:nth-child(3n):hover {
    border-color: color-mix(in srgb, var(--accent-violet) 40%, transparent);
    box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent-violet) 45%, transparent);
  }
  
  /* Stats */
  .stat {
    background: linear-gradient(180deg, rgba(190, 244, 159, .08), rgba(33, 73, 65, .08));
    border-color: rgba(255, 255, 255, .08);
    transition-property: transform, border-color, box-shadow;
    transition-duration: .18s;
  }
  
  .stat-num {
    color: #fff;
    text-shadow: 0 0 24px rgba(190, 244, 159, .2);
  }
  
  .stat-label {
    color: var(--muted);
    margin-top: .25rem;
  }
  
  /* Colores alternos en stats */
  .stat:nth-child(1) .stat-num {
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent-blue) 55%, transparent);
  }
  
  .stat:nth-child(2) .stat-num {
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent-pink) 55%, transparent);
  }
  
  .stat:nth-child(3) .stat-num {
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent-violet) 55%, transparent);
  }
  
  .stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-blue) 20%, transparent);
    box-shadow: 0 10px 36px -18px rgba(0, 0, 0, .6);
  }
  
  
  
  /* Quotes */
  .quote {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  
  /* Variante limpia y neutral para testimonios */
  .quote.quote-plain {
    background: none;
    border-color: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  
  
  
  /* Logo tile variants */
  .logo-tile.nova { border-color: rgba(34,211,238,.28); }
  .logo-tile.orbit { border-color: rgba(168,85,247,.28); }
  .logo-tile.horizon { border-color: rgba(96,165,250,.28); }
  .logo-tile.zen { border-color: rgba(45,212,191,.28); }
  .logo-tile.quantum { border-color: rgba(251,191,36,.30); }
  .logo-tile.vertex { border-color: rgba(244,114,182,.28); }
  
  .logo-tile.nova:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(34,211,238,.18); text-shadow: 0 0 10px rgba(34,211,238,.35); }
  .logo-tile.orbit:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(168,85,247,.18); text-shadow: 0 0 10px rgba(168,85,247,.35); }
  .logo-tile.horizon:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(96,165,250,.18); text-shadow: 0 0 10px rgba(96,165,250,.35); }
  .logo-tile.zen:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(45,212,191,.18); text-shadow: 0 0 10px rgba(45,212,191,.35); }
  .logo-tile.quantum:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(251,191,36,.18); text-shadow: 0 0 10px rgba(251,191,36,.35); }
  .logo-tile.vertex:hover { box-shadow: 0 10px 36px -18px rgba(0,0,0,.6), 0 0 0 3px rgba(244,114,182,.18); text-shadow: 0 0 10px rgba(244,114,182,.35); }
  
  /* Servicios: colores por tarjeta usando nth-child dentro de #servicios */
  #servicios .grid > .card-glass:nth-child(1) {
    background: linear-gradient(180deg, rgba(34,211,238,.06), rgba(255,255,255,.02));
    border-color: rgba(34,211,238,.16);
  }
  #servicios .grid > .card-glass:nth-child(1):hover {
    background: linear-gradient(180deg, rgba(34,211,238,.09), rgba(255,255,255,.03));
    border-color: rgba(34,211,238,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(34,211,238,.18);
  }
  
  #servicios .grid > .card-glass:nth-child(2) {
    background: linear-gradient(180deg, rgba(139,92,246,.06), rgba(255,255,255,.02));
    border-color: rgba(139,92,246,.16);
  }
  #servicios .grid > .card-glass:nth-child(2):hover {
    background: linear-gradient(180deg, rgba(139,92,246,.09), rgba(255,255,255,.03));
    border-color: rgba(139,92,246,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(139,92,246,.18);
  }
  
  #servicios .grid > .card-glass:nth-child(3) {
    background: linear-gradient(180deg, rgba(236,72,153,.06), rgba(255,255,255,.02));
    border-color: rgba(236,72,153,.16);
  }
  #servicios .grid > .card-glass:nth-child(3):hover {
    background: linear-gradient(180deg, rgba(236,72,153,.09), rgba(255,255,255,.03));
    border-color: rgba(236,72,153,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(236,72,153,.18);
  }
  
  #servicios .grid > .card-glass:nth-child(4) {
    background: linear-gradient(180deg, rgba(45,212,191,.06), rgba(255,255,255,.02));
    border-color: rgba(45,212,191,.16);
  }
  #servicios .grid > .card-glass:nth-child(4):hover {
    background: linear-gradient(180deg, rgba(45,212,191,.09), rgba(255,255,255,.03));
    border-color: rgba(45,212,191,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(45,212,191,.18);
  }
  
  #servicios .grid > .card-glass:nth-child(5) {
    background: linear-gradient(180deg, rgba(96,165,250,.06), rgba(255,255,255,.02));
    border-color: rgba(96,165,250,.16);
  }
  #servicios .grid > .card-glass:nth-child(5):hover {
    background: linear-gradient(180deg, rgba(96,165,250,.09), rgba(255,255,255,.03));
    border-color: rgba(96,165,250,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(96,165,250,.18);
  }
  
  #servicios .grid > .card-glass:nth-child(6) {
    background: linear-gradient(180deg, rgba(16,185,129,.06), rgba(255,255,255,.02));
    border-color: rgba(16,185,129,.16);
  }
  #servicios .grid > .card-glass:nth-child(6):hover {
    background: linear-gradient(180deg, rgba(16,185,129,.09), rgba(255,255,255,.03));
    border-color: rgba(16,185,129,.24);
    box-shadow: 0 12px 44px -18px rgba(0,0,0,.65), 0 0 0 3px rgba(16,185,129,.18);
  }
  
  
  
  /* FAQ */
  .faq {
    border-color: rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
  }
  
  .faq summary {
    cursor: pointer;
    font-weight: 700;
  }
  
  .faq p {
    color: var(--muted);
    margin-top: .5rem;
  }
  
  /* FAQ hover color */
  .faq summary:hover {
    color: var(--accent-violet);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-violet) 55%, transparent);
  }
  
  /* FAQ: hide default marker and add custom caret */
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::marker { content: ""; }
  .faq summary::after {
    content: "";
    width: .6rem;
    height: .6rem;
    border-right: 2px solid rgba(255,255,255,.6);
    border-bottom: 2px solid rgba(255,255,255,.6);
    transform: rotate(-45deg);
    transition: transform .2s ease, border-color .2s ease;
  }
  
  /* Rotate caret on open */
  .faq[open] summary::after {
    transform: rotate(135deg);
    border-color: color-mix(in srgb, var(--accent-violet) 65%, #ffffff 20%);
  }
  
  /* Open state emphasis */
  .faq[open] {
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  }
  .faq[open] summary {
    color: var(--accent-violet);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-violet) 45%, transparent);
  }
  
  /* Tilt hover */
  .tilt {
    transform-style: preserve-3d;
    perspective: 800px;
  }
  
  .tilt:hover {
    transform: translateY(-2px);
  }
  
  /* Scroll reveal */
  [data-animate] {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal .8s cubic-bezier(.2, .9, .2, 1) forwards;
    animation-play-state: paused;
  }
  [data-animate].run { animation-play-state: running; }
  
  [data-animate="fade"] {
    transform: translateY(0);
    opacity: 0;
  }
  
  @keyframes reveal {
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* On mobile, pause by default and run when in view */
  @media (max-width: 1024px) {
    [data-animate] {
      animation-play-state: paused !important;
    }
    [data-animate].run {
      opacity: 1 !important;
      transform: none !important;
      animation-play-state: running !important;
    }
  }
  
  /* Fallbacks y mejoras globales */
  ::selection {
    background: var(--neon);
    color: #0b120f;
  }
  
  header {
    backdrop-filter: blur(20px);
  }

  /* Mobile performance mode: reduce heavy visual effects */
  @media (max-width: 768px) {
    header {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .card-glass {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      box-shadow: 0 6px 16px rgba(0,0,0,.30) !important;
    }
    .project-tile {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    /* Pause marquee until container is in view */
    .marquee-track { animation-play-state: paused !important; }
    .marquee.run .marquee-track { animation-play-state: running !important; }
    /* Pause floating images until container is in view */
    .floating-image { animation-play-state: paused !important; }
    .floating-images-container.run .floating-image { animation-play-state: running !important; }
    .fab, .fab-whatsapp, .fab-top { animation: none !important; }
  }
  
  
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
  }
  
  @keyframes rippleOut {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.28); opacity: 1; }
    100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); opacity: 0; }
  }
  

  
  
  /* Alien orbits */
  @keyframes orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* Arrow wiggle */
  @keyframes wiggle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
  }
  
  
  /* ===== Footer ===== */
  .site-footer {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .footer-inner { color: rgba(255,255,255,.8); }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 2rem;
  }
  .footer-col h4 {
    font-weight: 800;
    margin-bottom: .8rem;
    color: #fff;
  }
  .footer-brand .brand-mark { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
  .footer-brand .brand-emoji { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-blue) 45%, transparent)); }
  .footer-brand .brand-name { font-weight: 900; letter-spacing: .2px; }
  .footer-brand .brand-copy { color: rgba(255,255,255,.7); max-width: 36ch; }
  
  .footer-links, .footer-list { list-style: none; padding: 0; margin: 0; }
  .footer-links li, .footer-list li { margin: .4rem 0; }
  .footer-links a, .footer-list a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .18s ease, text-shadow .18s ease; }
  .footer-links a:hover, .footer-list a:hover {
    color: var(--accent-blue);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent-blue) 55%, transparent);
  }
  
  .footer-socials { display: flex; gap: .6rem; margin-top: .8rem; }
  .footer-socials .social {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  }
  .footer-socials .social:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.35); border-color: rgba(255,255,255,.22); }
  
  .newsletter { margin-top: 1rem; display: flex; gap: .5rem; align-items: center; }
  .newsletter input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .8rem;
    border-radius: .6rem;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    color: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .newsletter input::placeholder { color: rgba(255,255,255,.5); }
  .newsletter input:focus { border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 3px rgba(139,211,255,.18); }
  .btn-small { padding: .55rem .85rem; font-size: .9rem; }
  
  .footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    color: rgba(255,255,255,.6);
  }
  .footer-mini-nav { display: flex; gap: 1rem; }
  .footer-mini-nav a { color: rgba(255,255,255,.65); text-decoration: none; }
  .footer-mini-nav a:hover { color: var(--accent-violet); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-violet) 50%, transparent); }
  
  @media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }
  
  /* ===== Team ===== */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
  
  .team-card {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .team-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
  .team-card .avatar {
    width: 72px; height: 72px; border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
    color: #0a0f0d; font-weight: 900; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.8);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.15) inset;
    object-fit: cover; display: block;
  }
  .team-name { margin-top: .8rem; font-weight: 900; }
  .badge-role {
    margin-top: .25rem; font-size: .85rem; color: var(--accent-blue);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12); padding: .2rem .5rem; border-radius: .5rem;
  }
  .team-bio { margin-top: .6rem; color: rgba(255,255,255,.75); }
  .team-socials { margin-top: .1rem; display: flex; gap: .5rem; }
  .team-socials a { color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); border-radius: .5rem; width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s ease, box-shadow .15s ease; }
  .team-socials a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.35); }



/* Floating Images for "Sobre Nosotros" */
.floating-images-container {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-image {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
  opacity: 0.9;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.floating-image:hover {
  transform: scale(1.05);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.floating-image:nth-child(1) {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 15%;
  animation: float 6s ease-in-out infinite;
}

.floating-image:nth-child(2) {
  width: 100px;
  height: 100px;
  top: 20%;
  right: 15%;
  animation: float 5s ease-in-out infinite 0.5s;
}

.floating-image:nth-child(3) {
  width: 140px;
  height: 140px;
  bottom: 15%;
  left: 20%;
  animation: float 7s ease-in-out infinite 1s;
}

.floating-image:nth-child(4) {
  width: 90px;
  height: 90px;
  bottom: 25%;
  right: 20%;
  animation: float 6s ease-in-out infinite 1.5s;
}

.floating-image:nth-child(5) {
  width: 110px;
  height: 110px;
  top: 40%;
  left: 40%;
  animation: float 8s ease-in-out infinite 2s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, 15px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .floating-images-container {
    height: 300px;
    margin-top: 2rem;
  }
  
  .floating-image:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 5%;
    left: 10%;
  }
  
  .floating-image:nth-child(2) {
    width: 70px;
    height: 70px;
    top: 15%;
    right: 10%;
  }
  
  .floating-image:nth-child(3) {
    width: 90px;
    height: 90px;
    bottom: 10%;
    left: 15%;
  }
  
  .floating-image:nth-child(4) {
    width: 60px;
    height: 60px;
    bottom: 20%;
    right: 15%;
  }
  
  .floating-image:nth-child(5) {
    width: 75px;
    height: 75px;
    top: 35%;
    left: 35%;
  }
}

@media (max-width: 480px) {
  .floating-images-container {
    height: 250px;
  }
  
  .floating-image:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 5%;
    left: 5%;
  }
  
  .floating-image:nth-child(2) {
    width: 50px;
    height: 50px;
    top: 15%;
    right: 5%;
  }
  
  .floating-image:nth-child(3) {
    width: 70px;
    height: 70px;
    bottom: 10%;
    left: 10%;
  }
  
  .floating-image:nth-child(4) {
    width: 45px;
    height: 45px;
    bottom: 20%;
    right: 10%;
  }
  
  .floating-image:nth-child(5) {
    width: 55px;
    height: 55px;
    top: 35%;
    left: 30%;
  }
}



  /* Floating Action Buttons */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
}

.fab i { font-size: 1.35rem; transition: transform .2s ease; }



.fab:hover::after { animation: rippleOut .8s ease forwards; }
.fab:hover i { transform: translateY(-1px); }

/* WhatsApp button sits at the bottom */
.fab-whatsapp {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow: 0 12px 34px rgba(37,211,102,.28), 0 0 0 2px rgba(255,255,255,.15) inset;
  animation: fabPulse 2.6s ease-in-out infinite, bob 5s ease-in-out infinite;
}
.fab-whatsapp i { color: #25D366; }

/* Orbit ring around WhatsApp */
.fab-whatsapp::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 1px dashed rgba(37,211,102,.35);
  box-shadow: 0 0 18px rgba(37,211,102,.18) inset;
  animation: orbit 6s linear infinite;
  pointer-events: none;
}

/* Back-to-top sits above WhatsApp */
.fab-top {
  bottom: calc(84px + env(safe-area-inset-bottom, 0)); /* 52 + spacing */
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateY(8px) scale(.98);
  /* Verde neón para el botón de back-to-top */
  
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--neon) 15%, transparent) inset;
}
.fab-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) translateY(0) scale(1);
  animation: fabPulseGreen 3.2s ease-in-out infinite, bob 6s ease-in-out infinite;
}