/* =========================================
   VARIABLES Y RESET
========================================= */
:root {
  --bg-dark: #0a0a0a;
  --bg-darker: #050505;
  --text-main: #ffffff;
  --text-muted: #b3b3b3;
  --accent: #00e5ff; /* Un cian eléctrico moderno */
  --accent-hover: #00b3cc;
  --font-title: 'Montserrat', sans-serif;
  --font-text: 'Open Sans', sans-serif;
}

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

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--text-main);
  transition: all 0.3s ease;
}

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

/* =========================================
   NAVEGACIÓN (MENÚ)
========================================= */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 0;
  background: rgba(10, 10, 10, 0.8); /* Fondo semi-transparente */
  backdrop-filter: blur(10px); /* Efecto vidrio esmerilado */
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

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

.logo a {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.logo span {
  color: var(--accent);
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-links a:hover {
  color: var(--accent);
}

.btn-nav {
  border: 1px solid var(--accent);
  padding: 8px 20px;
  border-radius: 30px;
  color: var(--accent) !important;
}

.btn-nav:hover {
  background: var(--accent);
  color: var(--bg-dark) !important;
}

/* =========================================
   HERO SECTION
========================================= */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bg-video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  /* Si no carga el video, mostramos este color */
  background-color: #121212; 
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10,10,10,0.4), var(--bg-dark));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  font-family: var(--font-title);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-title span {
  color: var(--accent);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 40px;
  font-weight: 300;
}

/* =========================================
   BOTONES
========================================= */
.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.btn {
  padding: 15px 35px;
  border-radius: 40px;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-dark);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
}

.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-secondary:hover {
  border-color: var(--text-main);
  background: rgba(255,255,255,0.05);
}

/* =========================================
   ANIMACIONES
========================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   SECCIÓN GENERAL (Márgenes y Títulos)
========================================= */
section {
    padding: 100px 0;
  }
  
  .section-title {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .section-title h2 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .section-title span {
    color: var(--accent);
  }
  
  .section-title p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 10px auto 0;
  }
  
  /* =========================================
     GRILLA DE SERVICIOS
  ========================================= */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
  
  .service-card {
    background: var(--bg-darker);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 40px 30px;
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
  }
  
  /* Efecto hover: Levanta la tarjeta e ilumina el borde */
  .service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05);
  }
  
  /* Un destello sutil de fondo al pasar el mouse */
  .service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,229,255,0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  
  .service-card:hover::before {
    opacity: 1;
  }
  
  .service-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 20px;
  }
  
  .service-card h3 {
    font-family: var(--font-title);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
  }
  
  .service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
  }
  /* =========================================
   SECCIÓN LA DUPLA (TEAM)
========================================= */
.team-section {
    background-color: var(--bg-dark);
  }
  
  .team-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
  }
  
  .team-member {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    background: var(--bg-darker);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.4s ease;
  }
  
  .team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 229, 255, 0.2);
  }
  
  .member-image {
    position: relative;
    width: 100%;
    height: 400px; /* Altura fija para que queden parejas */
    background-color: #1a1a1a; /* Color de fondo por si no carga la foto */
    overflow: hidden;
  }
  
  .member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: grayscale(100%); /* Filtro blanco y negro elegante por defecto */
  }
  
  .team-member:hover .member-image img {
    transform: scale(1.05);
    filter: grayscale(0%); /* Vuelve el color al pasar el mouse */
  }
  
  .member-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, var(--bg-darker) 10%, transparent);
  }
  
  .member-role {
    display: inline-block;
    background-color: var(--accent);
    color: var(--bg-dark);
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .member-info {
    padding: 30px;
    text-align: left;
  }
  
  .member-info h3 {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-main);
  }
  
  .member-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
  }
  /* =========================================
   SECCIÓN PORTFOLIO (CASOS DE ESTUDIO)
========================================= */
.portfolio-section {
    background-color: var(--bg-darker); /* Un tono más oscuro para contrastar */
  }
  
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
  }
  
  .portfolio-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3; /* Mantiene una proporción elegante */
    background: #111;
    cursor: pointer;
  }
  
  .portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: brightness(0.7); /* Oscurece un poco la foto por defecto */
  }
  
  .portfolio-item:hover img {
    transform: scale(1.1);
    filter: brightness(0.3); /* Oscurece más para que el texto resalte */
  }
  
  .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el contenido abajo */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
  }
  
  .portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
  }
  
  .portfolio-overlay .category {
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  
  .portfolio-overlay h3 {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
  .btn-case {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  .btn-case span {
    color: var(--accent);
    transition: transform 0.3s ease;
  }
  
  .btn-case:hover {
    color: var(--accent);
  }
  
  .btn-case:hover span {
    transform: translateX(5px); /* Pequeña animación de la flecha */
  }
  /* =========================================
   SECCIÓN CONTACTO
========================================= */
.contact-section {
    background-color: var(--bg-dark);
  }
  
  .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    background: var(--bg-darker);
    padding: 50px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
  }
  
  @media (max-width: 768px) {
    .contact-wrapper {
      grid-template-columns: 1fr;
      padding: 30px;
    }
  }
  
  .contact-info h3 {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  .contact-info p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 30px;
  }
  
  .info-list {
    list-style: none;
  }
  
  .info-list li {
    color: var(--text-main);
    margin-bottom: 15px;
    font-size: 1rem;
  }
  
  .info-list span {
    color: var(--accent);
    font-weight: 700;
    margin-right: 10px;
  }
  
  /* Formulario */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .input-group input,
  .input-group textarea {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font-text);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
  }
  
  /* Efecto al hacer clic en el input */
  .input-group input:focus,
  .input-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
  }
  
  .contact-form .btn-primary {
    align-self: flex-start;
    border: none;
  }
  
  /* =========================================
     FOOTER
  ========================================= */
  .footer {
    background-color: #050505; /* El tono más oscuro posible */
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .footer-logo a {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
  }
  
  .footer-logo span {
    color: var(--accent);
  }
  
  .footer-links {
    display: flex;
    gap: 25px;
  }
  
  .footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .footer-links a:hover {
    color: var(--accent);
  }
  
  .footer-copyright {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
  }
  ¡Por supuesto, Facu! Un buen diseño no sirve de nada si se rompe cuando un cliente lo abre desde su celular. Hoy en día, la mayoría del tráfico viene de ahí, así que tiene que verse impecable en cualquier pantalla.

Acá entra en acción tu asistente Alfred para dejar esto "responsive de verdad".

Como ya venimos usando CSS moderno (Flexbox y Grid), la base estructural ya es bastante flexible, pero necesitamos agregar unas Media Queries (reglas de CSS que se activan según el tamaño de la pantalla) para achicar los textos, apilar los botones y acomodar el menú y las fotos de ustedes.

Agregá este bloque de código bien al final de tu archivo style.css. Esto va a reescribir algunos tamaños exclusivamente cuando la pantalla sea más chica:

CSS
/* =========================================
   DISEÑO RESPONSIVE (MÓVILES Y TABLETS)
========================================= */

/* Ajustes para Tablets */
@media (max-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }
  .nav-links {
    gap: 15px;
  }
}

/* Ajustes para Celulares */
@media (max-width: 768px) {
  
  /* 1. Navegación: Apilamos el logo y el menú */
  .nav-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .nav-links a {
    font-size: 0.75rem; /* Texto del menú un poco más chico */
  }

  /* 2. Hero Section: Textos más chicos y botones apilados */
  .hero-title {
    font-size: 2.2rem;
    margin-top: 80px; /* Le damos espacio al menú que ahora es más alto */
  }
  
  .hero-subtitle {
    font-size: 1rem;
    padding: 0 15px;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
  }
  
  /* 3. Ajustes generales de espaciado */
  section {
    padding: 60px 0; /* Menos espacio en blanco en celulares */
  }
  
  .section-title h2 {
    font-size: 2rem;
  }
  
  .section-title p {
    font-size: 0.95rem;
    padding: 0 15px;
  }

  /* 4. La Dupla: Que las tarjetas ocupen el 100% del ancho */
  .team-grid {
    gap: 30px;
  }
  
  .team-member {
    min-width: 100%; 
    max-width: 100%;
  }
  
  .member-image {
    height: 350px;
  }

  /* 5. Casos de Estudio: Achicamos el mínimo de la grilla */
  .portfolio-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .portfolio-overlay h3 {
    font-size: 1.3rem;
  }

  /* 6. Footer: Apilamos los links sociales */
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  /* 7. Tarjetas de Servicios en Mobile: Mejorar contraste y límites */
  .service-card {
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde un poco más visible */
    background: linear-gradient(145deg, var(--bg-darker), #080808); /* Mini degradado para dar volumen */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Sombra dura para despegarla del fondo */
  }
}