AvanzaCast/docs/landingtemplate2.md

**I. Estructura y Componentes Lógicos:**

La página web se puede descomponer en los siguientes componentes lógicos de React, envueltos por un `PageContainer` principal que gestiona el ancho máximo y el centrado del contenido.

1.  **PageContainer (`src/components/PageContainer.tsx`):**
    *   **Descripción:** Componente contenedor global que define el `max-width` (aproximadamente `1280px`) y `margin: 0 auto` para centrar todo el contenido de la página.
    *   **Jerarquía DOM Clave:** `div.pageContainer`.

2.  **Header (`src/components/Header/Header.tsx`):**
    *   **Descripción:** Contiene el logo de la marca, la navegación principal con enlaces y dropdowns, y un botón de "Empecemos" (Get started).
    *   **Jerarquía DOM Clave:** `<header>` que contiene un `<div>` para el logo y un `<nav>` para los enlaces de navegación (`<ul>`, `<li>` con `<a>`). Incluye un `<a>` con estilo de botón para "Empecemos".
    *   **Medidas Clave:**
        *   Altura: Aproximadamente `80px` (fijo en escritorio), reducida en móvil.
        *   Layout: `display: flex` para alinear el logo y la navegación.
        *   Ancho máximo: Contenido limitado por el `max-width` global del `PageContainer`.
    *   **Actualización (Video):** Los elementos "Producto" y "Para empresas" incluyen iconos junto al texto en los ítems del menú desplegable.

3.  **HeroSection (`src/components/HeroSection/HeroSection.tsx`):**
    *   **Descripción:** La sección inicial de la página con un título principal, una descripción y un formulario de registro/inicio de sesión.
    *   **Jerarquía DOM Clave:** `<section>` que contiene dos `<div>` principales: uno para el contenido de texto (`<h1>`, `<p>`) y otro para el formulario de suscripción (`<div>` con botones, input de email y texto de enlaces). Incluye un elemento gráfico flotante en el fondo.
    *   **Medidas Clave:**
        *   Layout: `display: flex` para una disposición en dos columnas (texto a la izquierda, formulario a la derecha) en escritorio.
        *   Ancho máximo: Contenido limitado por el `max-width` global del `PageContainer`.
        *   Formulario: Ancho fijo en escritorio (aproximadamente `380px`), adaptativo en móvil. `border-radius: 16px`.
    *   **Actualización (Video):** El formulario de la sección "Hero" permite "Continuar con Google" (posiblemente un login pre-rellenado con un email específico) o ingresar un correo electrónico.

4.  **FeaturesGrid (`src/components/FeaturesGrid/FeaturesGrid.tsx`):**
    *   **Descripción:** Presenta las características clave del producto mediante tarjetas interactivas con iconos y títulos.
    *   **Jerarquía DOM Clave:** `<section>` que contiene un `<div>` (`featuresGrid`) para los elementos individuales (`featureCard`), con flechas de navegación para el carrusel. Cada tarjeta contiene un `<img>` (icono/imagen) y un `<h3>` (título).
    *   **Medidas Clave:**
        *   Layout: `display: flex` con `gap` para la separación entre tarjetas. Implementa `overflow-x: auto` con `scroll-snap-type` para el carrusel en pantallas donde las tarjetas no caben en una fila.
        *   Tarjetas: `border-radius: 16px`, `box-shadow` sutil. Dimensiones uniformes (ej. `220px` x `220px`).
    *   **Actualización (Video):** Es un carrusel horizontal interactivo con flechas de navegación a izquierda y derecha.

5.  **ContentDetailsSection (`src/components/ContentDetailsSection/ContentDetailsSection.tsx`):**
    *   **Descripción:** Agrupa múltiples bloques de contenido que detallan aspectos específicos del producto, a menudo con un layout de texto e imagen/video lado a lado.
    *   **Jerarquía DOM Clave:** Múltiples `<section.contentBlock>` con `div.textColumn` y `div.imageColumn`. Incluye un reproductor de audio simulado en una de las secciones.
    *   **Medidas Clave:**
        *   Layout: `display: flex` para los bloques de texto y multimedia, alternando `flex-direction` (normal y `row-reverse`).
        *   Espaciado vertical: `padding: 100px 0` para separar cada sub-sección.

6.  **TestimonialsCarousel (`src/components/TestimonialsCarousel/TestimonialsCarousel.tsx`):**
    *   **Descripción:** Sección que muestra testimonios de usuarios en un formato de carrusel interactivo.
    *   **Jerarquía DOM Clave:** `<section>` con un `<h2>` y un contenedor `<div>` para el carrusel de tarjetas (`testimonialCard`). Incluye flechas de navegación (`<button>`) y puntos de paginación (`<div>` con `<span>`).
    *   **Medidas Clave:**
        *   Layout: `display: flex` con `overflow-x: hidden` para el carrusel.
        *   Tarjetas: `border-radius: 16px`, `box-shadow` para elevación.
    *   **Actualización (Video):** Confirmado como carrusel con flechas de navegación y puntos de paginación.

7.  **CallToActionSection (`src/components/CallToActionSection/CallToActionSection.tsx`):**
    *   **Descripción:** Una sección destacada al final de la página que incita al usuario a comenzar a usar el producto.
    *   **Jerarquía DOM Clave:** `<section>` con un `<h2>` para el mensaje principal, un `<button>` para la acción y un `<p>` con texto complementario, todo centrado.
    *   **Medidas Clave:**
        *   Color de fondo: Azul primario (`#0066FF`) con un patrón gráfico sutil.
        *   Botón: `border-radius: 8px`, `padding: 18px 36px`.

8.  **Footer (`src/components/Footer/Footer.tsx`):**
    *   **Descripción:** Contiene el logo de StreamYard, enlaces de navegación secundarios organizados en columnas (Producto, Comunidad, StreamYard para, Únete a nosotros) y un selector de idioma.
    *   **Jerarquía DOM Clave:** `<footer>` con múltiples `<div>`s para las columnas de enlaces (`<ul>`, `<li>`, `<a>`). Incluye un `select` o un dropdown personalizado para el idioma, y enlaces de términos y políticas.
    *   **Actualización (Video):** Selector de idioma funcional en la parte inferior derecha.

---

**II. Métricas Pixel-Perfect:**

**A. Tipografía:**
*   **Familia de Fuentes:** `sans-serif` (posiblemente 'Inter', o 'system-ui', 'Helvetica Neue', 'Arial').
*   **H1 (Títulos principales, ej. `La manera más sencilla...`):**
    *   Tamaño: `64px` (Escritorio), `40px` (Móvil)
    *   Peso: `800` (Extra Bold)
    *   Altura de línea: `1.2`
    *   Color: `#1A1A1A`
*   **H2 (Títulos de Sección, ej. `Transmitir en vivo o graba podcasts`):**
    *   Tamaño: `44px` (Escritorio), `32px` (Móvil)
    *   Peso: `700` (Bold)
    *   Altura de línea: `1.3`
    *   Color: `#1A1A1A`
*   **P (Párrafos de Contenido):**
    *   Tamaño: `18px` (Escritorio), `16px` (Móvil)
    *   Peso: `400` (Regular)
    *   Altura de línea: `1.6`
    *   Color: `#333333`
*   **Texto Pequeño (Footer, captions, formularios):**
    *   Tamaño: `14px` (Escritorio), `13px` (Móvil)
    *   Peso: `400`
    *   Altura de línea: `1.5`
    *   Color: `#666666`

**B. Paleta de Colores:**
*   **Fondo Principal (General):** `#FFFFFF` (Blanco puro) o `#F9FAFC` (Blanco muy ligero).
*   **Texto Principal:** `#1A1A1A` (Negro muy oscuro).
*   **Texto Secundario/Párrafos:** `#333333` o `#666666`.
*   **Color de Acento (Azul Primario):** `#0066FF` (Botones, enlaces primarios).
*   **Color de Acento (Rosa):** `#FFDCE6` (Fondos de sección específicos).
*   **Color de Acento (Morado):** `#6432C8` (Fondos de sección específicos).
*   **Color de Acento (Amarillo):** `#FFE664` (Fondos de sección específicos).
*   **Bordes/Líneas sutiles:** `#E0E0E0`.
*   **Sombras (Box-shadow):** `0 4px 12px rgba(0, 0, 0, 0.08)` para tarjetas y formularios.
*   **Gradientes (ej. Hero Section):** `linear-gradient(to bottom, #EBF5FF, #FFFFFF)`.

**C. Espaciado y Bordeado:**
*   **Separación Vertical entre Secciones:** `padding-top: 100px`, `padding-bottom: 100px`.
*   **Separación Interna (Padding):**
    *   Botones: `padding: 16px 32px`.
    *   Tarjetas: `padding: 24px`.
    *   Contenedores de contenido: `padding-inline: 20px` (para márgenes laterales en pantallas más pequeñas).
*   **Radio de Borde (`border-radius`):**
    *   Botones: `8px`.
    *   Tarjetas (Características, Testimonios): `16px`.
    *   Inputs de formulario: `6px`.
    *   Contenedor del formulario Hero: `16px`.

---

**III. Funcionalidad y Scripts Internos:**

**A. Funcionalidad del Aplicativo Web (Interactividad a Replicar):**

1.  **Menú de Navegación Colapsable (Móvil) y Dropdowns (Header):**
    *   En móvil, el menú principal se colapsa en un icono de hamburguesa. Al hacer clic, el menú se desliza.
    *   Los elementos "Producto" y "Para empresas" muestran submenús (`dropdowns`) al pasar el ratón (escritorio). En móvil, estos dropdowns se expanden/colapsan al hacer clic.
2.  **Carrusel de Características (`FeaturesGrid`):**
    *   La sección de características es un carrusel horizontal con flechas de navegación izquierda/derecha.
    *   Al hacer clic en una tarjeta de característica específica (ej. "Transmisión múltiple"), el usuario es redirigido a una página de registro/inicio de sesión.
3.  **Formulario de Hero Section (Redirección):**
    *   Al hacer clic en los botones "Continuar con Google" o "Empecemos" (Get started) en el formulario de la sección Hero, el usuario es redirigido a una página de registro/inicio de sesión dedicada (`/signup` o `/login`).
4.  **Reproducción de Audio Interactivo:**
    *   En la sección "Grabaciones con calidad de estudio...", hay un botón "Play/Pause" que simula la reproducción de audio, actualizando una barra de progreso.
5.  **Carrusel de Testimonios (`TestimonialsCarousel`):**
    *   Muestra testimonios en un carrusel con flechas de navegación izquierda/derecha y puntos de paginación para indicar el slide actual y permitir la navegación directa.
6.  **Selector de Idioma (Footer):**
    *   Un dropdown en el footer permite al usuario seleccionar el idioma de la interfaz.

**B. Scripts Internos (Lógica JavaScript Clave):**

1.  **Manejo de Estado del Menú Móvil y Dropdowns:**
    *   `useState` en `Header.tsx` para `isMobileMenuOpen`, `isProductDropdownOpen`, `isBusinessDropdownOpen`.
    *   `onClick` handlers para el icono de hamburguesa y los enlaces de dropdown en móvil. `onMouseEnter`/`onMouseLeave` para los dropdowns en escritorio.
    *   Renderizado condicional de clases CSS (`.navOpen`, `.dropdownMenu`) para controlar visibilidad y animaciones.
    *   Se añadirán iconos SVG a los ítems del menú desplegable.
2.  **Gestión de Carrusel (`FeaturesGrid` y `TestimonialsCarousel`):**
    *   `useState` para `currentIndex` del carrusel y `useRef` para el elemento de desplazamiento.
    *   Funciones `scrollLeft` y `scrollRight` para las flechas de navegación, actualizando el `scrollLeft` del elemento referenciado.
    *   Manejo de clic en tarjetas para redirección (`window.location.href = '/signup'`).
    *   Para el carrusel de testimonios, se añadirán puntos de paginación que actualizan `currentIndex` directamente.
3.  **Redirección de Formulario (Hero Section):**
    *   `onClick` handlers para los botones "Continuar con Google" y "Get started" que ejecutarán `window.location.href = '/signup'` para simular la redirección.
4.  **Control de Audio Simulado:**
    *   `useState` para `isPlayingAudio` y `audioProgress` en el componente `ContentDetailsSection`.
    *   `handlePlayPauseAudio` alterna `isPlayingAudio` y usa `setInterval` para simular el avance de `audioProgress`.
5.  **Manejo de Selector de Idioma (Footer):**
    *   `useState` para `selectedLanguage` y un `onChange` handler para el elemento `select` (o un `onClick` para un dropdown personalizado) que actualizará el estado (sin lógica de internacionalización real).

---

**Generación de Código**

A continuación, se presenta el código de los componentes React/TypeScript y sus archivos CSS Modules, incorporando las actualizaciones del análisis del video.

**`src/components/PageContainer.tsx`**

```tsx
import React, { ReactNode } from 'react';
import styles from './PageContainer.module.css';

interface PageContainerProps {
  children: ReactNode;
}

const PageContainer: React.FC<PageContainerProps> = ({ children }) => {
  return (
    <div className={styles.pageContainer}>
      {children}
    </div>
  );
};

export default PageContainer;
```

**`src/components/PageContainer.module.css`**

```css
/* src/components/PageContainer.module.css */

.pageContainer {
  max-width: 1280px; /* Ancho máximo del contenido */
  margin: 0 auto; /* Centrar el contenedor en la página */
  padding: 0 20px; /* Padding horizontal para evitar que el contenido toque los bordes en pantallas pequeñas */
  overflow-x: hidden; /* Evita el scroll horizontal no deseado */
}

/* Base styles for the page */
:root {
  --primary-blue: #0066FF;
  --light-blue-gradient-start: #EBF5FF;
  --text-dark: #1A1A1A;
  --text-medium: #333333;
  --text-light: #666666;
  --bg-white: #FFFFFF;
  --bg-light-grey: #F9FAFC;
  --accent-pink: #FFDCE6;
  --accent-purple: #6432C8;
  --accent-yellow: #FFE664;
  --border-light: #E0E0E0;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Tipografía Escritorio */
  --font-size-h1: 64px;
  --font-weight-h1: 800;
  --line-height-h1: 1.2;

  --font-size-h2: 44px;
  --font-weight-h2: 700;
  --line-height-h2: 1.3;

  --font-size-p: 18px;
  --font-weight-p: 400;
  --line-height-p: 1.6;

  --font-size-sm: 14px;
  --font-weight-sm: 400;
  --line-height-sm: 1.5;

  /* Bordes */
  --border-radius-button: 8px;
  --border-radius-card: 16px;
  --border-radius-input: 6px;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Usar Inter si está disponible, sino fallbacks */
  margin: 0;
  padding: 0;
  background-color: var(--bg-white);
  color: var(--text-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 24px;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 20px;
}

p {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--line-height-p);
  color: var(--text-medium);
  margin-bottom: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pageContainer {
    padding: 0 16px;
  }

  h1 {
    font-size: 40px; /* Ajuste para móviles */
    line-height: 1.1;
  }

  h2 {
    font-size: 32px; /* Ajuste para móviles */
    line-height: 1.2;
  }

  p {
    font-size: 16px; /* Ajuste para móviles */
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }
}
```

**`src/components/Header/Header.tsx`**

```tsx
import React, { useState } from 'react';
import styles from './Header.module.css';

// Mock icons for demonstration, using simple SVGs or placeholder img
const MenuIcon = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>;
const CloseIcon = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>;
const ChevronDown = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>;

// Mock icons for dropdown items (simplificado)
const IconMic = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>;
const IconUsers = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87m-3-12a4 4 0 0 1 0 7.75"></path></svg>;
const IconPalette = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16.2 7.7l-4.2 4.2M8 12l4 4"></path></svg>;
const IconVideo = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 7l-7 5 7 5V7z"></path><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>;
const IconMonitor = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>;


const Header: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
  const [isBusinessDropdownOpen, setIsBusinessDropdownOpen] = useState(false);

  // Función para alternar el menú móvil
  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  // Funciones para manejar los dropdowns en desktop (hover)
  const handleProductMouseEnter = () => setIsProductDropdownOpen(true);
  const handleProductMouseLeave = () => setIsProductDropdownOpen(false);
  const handleBusinessMouseEnter = () => setIsBusinessDropdownOpen(true);
  const handleBusinessMouseLeave = () => setIsBusinessDropdownOpen(false);

  // Funciones para manejar los dropdowns en mobile (click)
  const toggleProductDropdown = () => {
    setIsProductDropdownOpen(!isProductDropdownOpen);
    setIsBusinessDropdownOpen(false); // Cierra el otro dropdown si está abierto
  };
  const toggleBusinessDropdown = () => {
    setIsBusinessDropdownOpen(!isBusinessDropdownOpen);
    setIsProductDropdownOpen(false); // Cierra el otro dropdown si está abierto
  };

  // Simula la redirección a una página de registro/inicio de sesión
  const handleGetStartedClick = () => {
    console.log("Redirecting to signup page...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img src="https://via.placeholder.com/150x40?text=StreamYard+Logo" alt="StreamYard Logo" />
      </div>

      {/* Botón de menú de hamburguesa para móvil */}
      <button className={styles.menuToggle} onClick={toggleMobileMenu} aria-label="Toggle menu">
        {isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
      </button>

      {/* Menú de navegación */}
      <nav className={`${styles.nav} ${isMobileMenuOpen ? styles.navOpen : ''}`}>
        <ul className={styles.navList}>
          {/* Dropdown 'Product' */}
          <li
            className={styles.navItemDropdown}
            onMouseEnter={handleProductMouseEnter}
            onMouseLeave={handleProductMouseLeave}
          >
            <a href="#" className={styles.navLink} onClick={toggleProductDropdown} aria-expanded={isProductDropdownOpen}>
              Producto <ChevronDown />
            </a>
            {isProductDropdownOpen && (
              <ul className={styles.dropdownMenu}>
                <li><a href="#"><IconMic /> Por qué StreamYard</a></li>
                <li><a href="#"><IconUsers /> Invitados</a></li>
                <li><a href="#"><IconPalette /> Marca</a></li>
                <li><a href="#"><IconVideo /> Transmisión múltiple</a></li>
                <li><a href="#"><IconMonitor /> Grabación</a></li>
                {/* Añadir más ítems según sea necesario */}
              </ul>
            )}
          </li>

          <li><a href="#" className={styles.navLink}>Contacto</a></li>
          <li><a href="#" className={styles.navLink}>Precios</a></li>
          <li><a href="#" className={styles.navLink}>Novedades</a></li>

          {/* Dropdown 'For Business' */}
          <li
            className={styles.navItemDropdown}
            onMouseEnter={handleBusinessMouseEnter}
            onMouseLeave={handleBusinessMouseLeave}
          >
            <a href="#" className={styles.navLink} onClick={toggleBusinessDropdown} aria-expanded={isBusinessDropdownOpen}>
              Para empresas <ChevronDown />
            </a>
            {isBusinessDropdownOpen && (
              <ul className={styles.dropdownMenu}>
                <li><a href="#"><IconMonitor /> Enterprise</a></li>
                <li><a href="#"><IconUsers /> Agencias</a></li>
              </ul>
            )}
          </li>

          <li><a href="#" className={styles.navLink}>Accede</a></li>
          <li>
            <button className={styles.getStartedButton} onClick={handleGetStartedClick}>Empecemos</button>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;
```

**`src/components/Header/Header.module.css`**

```css
/* src/components/Header/Header.module.css */

.header {
  display: flex;
  justify-content: space-between; /* Espacia el logo y la navegación */
  align-items: center;
  padding: 16px 20px; /* Padding interno */
  height: 80px; /* Altura fija */
  background-color: var(--bg-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  position: sticky; /* Sticky header */
  top: 0;
  z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}

.logo img {
  height: 40px; /* Altura del logo */
  width: auto;
}

.nav {
  display: flex; /* Por defecto, flex para escritorio */
}

.navList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px; /* Espacio entre elementos de navegación */
}

.navLink {
  text-decoration: none;
  color: var(--text-medium);
  font-weight: 500;
  font-size: 16px;
  padding: 8px 0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px; /* Espacio para el icono de chevron */
}

.navLink:hover {
  color: var(--primary-blue); /* Color al pasar el ratón */
}

.getStartedButton {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.getStartedButton:hover {
  background-color: #0056e6; /* Azul más oscuro al pasar el ratón */
}

/* Estilos para el menú dropdown */
.navItemDropdown {
  position: relative;
}

.dropdownMenu {
  position: absolute;
  top: 100%; /* Debajo del elemento padre */
  left: 0;
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-input);
  list-style: none;
  padding: 10px 0;
  margin-top: 5px; /* Pequeño espacio entre el link y el dropdown */
  min-width: 200px; /* Ancho ajustado para los ítems con icono */
  display: none; /* Oculto por defecto, se muestra con JS */
  flex-direction: column;
  z-index: 1010;
}

.navItemDropdown:hover .dropdownMenu {
  display: flex; /* Mostrar en hover para desktop */
}

.dropdownMenu li a {
  display: flex; /* Para alinear el icono y el texto */
  align-items: center;
  gap: 10px; /* Espacio entre icono y texto */
  padding: 8px 15px;
  color: var(--text-medium);
  text-decoration: none;
  font-size: 15px;
}

.dropdownMenu li a:hover {
  background-color: var(--bg-light-grey);
  color: var(--primary-blue);
}

/* Estilos para los iconos dentro del dropdown */
.dropdownMenu li a svg {
  color: var(--text-light); /* Color del icono por defecto */
  transition: color 0.3s ease;
}

.dropdownMenu li a:hover svg {
  color: var(--primary-blue); /* Color del icono al pasar el ratón */
}


/* Menú de hamburguesa (visible solo en móvil) */
.menuToggle {
  display: none; /* Oculto por defecto */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Responsive: Mobile styles */
@media (max-width: 1024px) {
  .navList {
    gap: 20px; /* Reduce el espacio entre elementos */
  }
}

@media (max-width: 768px) {
  .header {
    padding: 16px;
    height: 60px; /* Reduce la altura del header en móvil */
  }

  .nav {
    display: none; /* Oculta la navegación por defecto en móvil */
    flex-direction: column;
    position: absolute;
    top: 60px; /* Debajo del header */
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    padding: 20px 0;
    z-index: 999;
    /* Animación de deslizamiento */
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
  }

  .nav.navOpen {
    display: flex; /* Muestra el menú cuando está abierto */
    transform: translateY(0);
  }

  .navList {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .navList li {
    width: 100%;
    padding: 8px 20px; /* Padding para los ítems del menú móvil */
  }

  .navLink {
    width: 100%;
  }

  .navItemDropdown {
    width: 100%;
  }

  .navItemDropdown:hover .dropdownMenu {
    display: none; /* Deshabilita el hover en mobile, se activa con click */
  }

  .navItemDropdown .dropdownMenu {
    position: static; /* Cambia a posición estática para que fluya en el menú móvil */
    box-shadow: none;
    border-radius: 0;
    padding-left: 20px; /* Indentación para sub-items */
    margin-top: 0;
    display: none; /* Oculto por defecto en móvil */
  }

  /* Mostrar dropdowns en móvil al hacer click (aria-expanded="true" lo controla) */
  .navItemDropdown a[aria-expanded="true"] + .dropdownMenu {
    display: flex;
  }

  .menuToggle {
    display: block; /* Muestra el botón de hamburguesa */
  }

  .getStartedButton {
    width: calc(100% - 40px); /* Ajuste de ancho para botón en móvil */
    margin: 10px 20px;
    text-align: center;
  }
}
```

**`src/components/HeroSection/HeroSection.tsx`**

```tsx
import React from 'react';
import styles from './HeroSection.module.css';

const HeroSection: React.FC = () => {
  // Simula la redirección a una página de registro/inicio de sesión
  const handleFormAction = () => {
    console.log("Redirecting to signup page...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <section className={styles.heroSection}>
      <div className={styles.heroContent}>
        <h1>La manera más sencilla de grabar y transmitir en vivo</h1>
        <p>
          StreamYard es un estudio profesional para grabar y hacer transmisiones en vivo desde tu
          navegador. Graba contenido o transmite en vivo a Facebook, YouTube y otras plataformas.
        </p>
      </div>
      <div className={styles.heroFormContainer}>
        <div className={styles.heroForm}>
          {/* Botón de "Continuar con Google" con texto pre-rellenado simulado */}
          <button className={styles.googleButton} onClick={handleFormAction}>
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" alt="Google Logo" className={styles.googleLogo} />
            Continuar como Nextv<br/>
            <span className={styles.googleEmail}>testv.stream@gmail.com</span>
          </button>
          <div className={styles.separator}>O continúa con tu correo electrónico</div>
          <input
            type="email"
            placeholder="Ingrese la dirección de correo electrónico"
            className={styles.emailInput}
          />
          <button className={styles.getStartedButton} onClick={handleFormAction}>
            Empieza, ¡es gratis!
          </button>
          <p className={styles.formFooterText}>
            ¡Confiado por más de 12,000,000 creadores!
            <br />
            Al continuar, aceptas nuestros <a href="#">Términos de Servicio del Usuario</a> y{' '}
            <a href="#">Política de uso del Plan</a> y reconoces la recepción
            de nuestra <a href="#">Política de Privacidad</a>
          </p>
          <p className={styles.loginText}>¿Ya usas StreamYard? <a href="#">Inicia sesión.</a></p>
        </div>
        {/* Gráfico de fondo, ahora en el container del formulario para mejor posicionamiento */}
        <img
          src="https://via.placeholder.com/400x300?text=Hero+Graphic" // Placeholder image for the graphic
          alt="StreamYard Interface Graphic"
          className={styles.heroGraphic}
        />
      </div>
    </section>
  );
};

export default HeroSection;
```

**`src/components/HeroSection/HeroSection.module.css`**

```css
/* src/components/HeroSection/HeroSection.module.css */

.heroSection {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0; /* Espaciado vertical */
  background: linear-gradient(to bottom, var(--light-blue-gradient-start), var(--bg-white)); /* Gradiente de fondo */
  gap: 80px; /* Espacio entre el contenido de texto y el formulario */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
}

.heroContent {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px; /* Ancho mínimo para el texto */
  max-width: 600px; /* Ancho máximo para el texto */
}

.heroContent h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  color: var(--text-dark);
}

.heroContent p {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  color: var(--text-medium);
  max-width: 500px; /* Limita el ancho del párrafo */
}

.heroFormContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alinea el formulario y el gráfico a la derecha */
  min-width: 350px;
}

.heroForm {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card); /* Radio de borde para el formulario */
  box-shadow: var(--shadow-sm); /* Sombra para el formulario */
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre elementos del formulario */
  width: 380px; /* Ancho fijo para el formulario */
  z-index: 1; /* Asegura que el formulario esté sobre el gráfico */
}

.googleButton {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-button);
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-medium);
  display: flex;
  flex-direction: column; /* Apila el texto principal y el email */
  align-items: center;
  justify-content: center;
  gap: 5px; /* Espacio entre las líneas de texto */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.googleButton:hover {
  background-color: var(--bg-light-grey);
}

.googleButton img {
  position: absolute; /* Posiciona el logo de Google */
  left: 20px;
  height: 20px;
  width: 20px;
}

.googleEmail {
  font-size: 12px;
  color: var(--text-light);
}

.separator {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-light);
  position: relative;
  margin: 10px 0;
}

.separator::before,
.separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: var(--border-light);
}

.separator::before {
  left: 0;
}

.separator::after {
  right: 0;
}

.emailInput {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-input);
  padding: 14px 15px;
  font-size: 16px;
  width: calc(100% - 30px); /* Ajusta el ancho por el padding */
}

.emailInput:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
}

.getStartedButton {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.getStartedButton:hover {
  background-color: #0056e6;
}

.formFooterText {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
}

.formFooterText a,
.loginText a {
  color: var(--primary-blue);
  text-decoration: none;
}

.loginText {
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  text-align: center;
  margin-top: 15px;
}

.heroGraphic {
  position: absolute;
  top: -80px; /* Posiciona el gráfico flotando por encima del formulario */
  right: -100px; /* Ajusta la posición del gráfico */
  width: 450px; /* Tamaño del gráfico */
  height: auto;
  opacity: 0.8; /* Transparencia para que parezca de fondo */
  z-index: 0; /* Detrás del formulario */
  filter: blur(1px); /* Ligero desenfoque */
}


/* Responsive adjustments */
@media (max-width: 1024px) {
  .heroSection {
    flex-direction: column; /* Apila el contenido y el formulario */
    padding: 80px 0;
    gap: 50px;
  }

  .heroContent {
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }

  .heroContent h1 {
    font-size: 52px;
  }

  .heroContent p {
    font-size: 17px;
  }

  .heroFormContainer {
    align-items: center; /* Centra el formulario */
    min-width: unset;
    width: 100%;
  }

  .heroForm {
    width: 85%; /* El formulario ocupa más ancho en móviles */
    max-width: 450px; /* Limita el ancho del formulario */
  }

  .heroGraphic {
    position: static; /* Quita el posicionamiento absoluto en móvil */
    margin-top: 30px;
    width: 80%;
    max-width: 400px;
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 768px) {
  .heroSection {
    padding: 60px 0;
  }

  .heroContent h1 {
    font-size: 40px;
  }

  .heroForm {
    width: 95%; /* Aún más ancho en pantallas más pequeñas */
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .heroContent h1 {
    font-size: 32px;
  }
  .heroContent p {
    font-size: 16px;
  }
  .googleButton {
    padding: 12px 10px;
    font-size: 14px;
  }
  .googleButton img {
    left: 10px;
  }
}
```

**`src/components/FeaturesGrid/FeaturesGrid.tsx`**

```tsx
import React, { useState, useRef } from 'react';
import styles from './FeaturesGrid.module.css';

// Mock data for features
const features = [
  { id: 1, name: 'Marca', icon: 'https://via.placeholder.com/64?text=Marca' },
  { id: 2, name: 'Podcasts', icon: 'https://via.placeholder.com/64?text=Podcasts' },
  { id: 3, name: 'Reutilización de Video', icon: 'https://via.placeholder.com/64?text=Reutilizar' },
  { id: 4, name: 'Seminarios web', icon: 'https://via.placeholder.com/64?text=Seminarios' },
  { id: 5, name: 'Participación', icon: 'https://via.placeholder.com/64?text=Partic' },
  { id: 6, name: 'Grabación', icon: 'https://via.placeholder.com/64?text=Grab' },
  { id: 7, name: 'Transmisión múltiple', icon: 'https://via.placeholder.com/64?text=Multi' },
  { id: 8, name: 'Invitados', icon: 'https://via.placeholder.com/64?text=Invitados' },
];

const FeaturesGrid: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const scrollAmount = 300; // Cantidad de desplazamiento
      if (direction === 'left') {
        scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
      } else {
        scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
      }
    }
  };

  // Simula la redirección al hacer clic en una tarjeta de característica
  const handleFeatureClick = (featureName: string) => {
    console.log(`Clicked feature: ${featureName}. Redirecting to signup page...`);
    // En una aplicación real: window.location.href = `/signup?feature=${encodeURIComponent(featureName)}`;
    alert(`Simulando redirección a /signup por la característica: ${featureName}`);
  };

  return (
    <section className={styles.featuresSection}>
      <div className={styles.carouselContainer}>
        {/* Flecha de navegación izquierda */}
        <button className={`${styles.navArrow} ${styles.leftArrow}`} onClick={() => scroll('left')} aria-label="Scroll left">
          &#8249; {/* Carácter de flecha izquierda */}
        </button>
        <div className={styles.featuresGrid} ref={scrollRef}>
          {features.map((feature) => (
            <div key={feature.id} className={styles.featureCard} onClick={() => handleFeatureClick(feature.name)}>
              <img src={feature.icon} alt={feature.name} className={styles.featureIcon} />
              <h3>{feature.name}</h3>
            </div>
          ))}
        </div>
        {/* Flecha de navegación derecha */}
        <button className={`${styles.navArrow} ${styles.rightArrow}`} onClick={() => scroll('right')} aria-label="Scroll right">
          &#8250; {/* Carácter de flecha derecha */}
        </button>
      </div>
    </section>
  );
};

export default FeaturesGrid;
```

**`src/components/FeaturesGrid/FeaturesGrid.module.css`**

```css
/* src/components/FeaturesGrid/FeaturesGrid.module.css */

.featuresSection {
  padding: 50px 0 100px 0; /* Menos padding superior, más inferior */
  background-color: var(--bg-white); /* Fondo blanco, no gris */
  text-align: center; /* Centra el texto */
}

.carouselContainer {
  position: relative;
  max-width: 1200px; /* Ancho máximo para el carrusel */
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.featuresGrid {
  display: flex;
  overflow-x: auto; /* Permite el desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
  scroll-snap-type: x mandatory; /* Ajuste para el scroll-snap */
  gap: 30px; /* Espacio entre las tarjetas */
  padding: 20px; /* Padding para evitar que las tarjetas toquen los bordes */
  margin: 0 -20px; /* Compensa el padding para que el contenido fluya */
  scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
}

/* Oculta la barra de desplazamiento en Chrome/Safari */
.featuresGrid::-webkit-scrollbar {
  display: none;
}

.featureCard {
  flex: 0 0 auto; /* No permite que las tarjetas se encojan */
  width: 220px; /* Ancho fijo de la tarjeta */
  height: 220px; /* Altura fija para que sean cuadradas */
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  scroll-snap-align: start; /* Alineación para el scroll-snap */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-light); /* Borde sutil */
}

.featureCard:hover {
  transform: translateY(-5px); /* Pequeño efecto de elevación */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.featureIcon {
  width: 64px; /* Tamaño del icono */
  height: 64px;
  margin-bottom: 15px;
}

.featureCard h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50%; /* Botones circulares */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.navArrow:hover {
  background-color: var(--bg-light-grey);
  transform: translateY(-50%) scale(1.05);
}

.leftArrow {
  left: -25px; /* Posicionar fuera del grid */
}

.rightArrow {
  right: -25px; /* Posicionar fuera del grid */
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .leftArrow {
    left: 0px; /* Mueve las flechas dentro del padding del contenedor principal */
  }

  .rightArrow {
    right: 0px;
  }
}

@media (max-width: 768px) {
  .featuresSection {
    padding: 30px 0 60px 0; /* Ajuste padding */
  }

  .featuresGrid {
    gap: 20px; /* Reduce el espacio entre tarjetas */
    padding: 15px;
    margin: 0 -15px;
  }

  .featureCard {
    width: 180px; /* Reduce el tamaño de las tarjetas */
    height: 180px;
    padding: 15px;
  }

  .featureIcon {
    width: 50px;
    height: 50px;
  }

  .featureCard h3 {
    font-size: 18px;
  }

  .navArrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .featuresGrid {
    padding: 10px;
    margin: 0 -10px;
  }

  .featureCard {
    width: 150px; /* Aún más pequeñas */
    height: 150px;
  }

  .navArrow {
    display: none; /* Oculta las flechas si el scroll es el método principal */
  }
}
```

**`src/components/ContentDetailsSection/ContentDetailsSection.tsx`**

```tsx
import React, { useState } from 'react';
import styles from './ContentDetailsSection.module.css';

// Mock component for Play/Pause icon
const PlayIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="5 3 19 12 5 21 5 3"></polygon>
  </svg>
);
const PauseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="6" y="4" width="4" height="16"></rect>
    <rect x="14" y="4" width="4" height="16"></rect>
  </svg>
);

const ContentDetailsSection: React.FC = () => {
  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
  const [audioProgress, setAudioProgress] = useState(0);
  const audioIntervalRef = React.useRef<number | undefined>(undefined);

  // Simula la reproducción de audio
  const handlePlayPauseAudio = () => {
    if (isPlayingAudio) {
      // Pausar
      setIsPlayingAudio(false);
      if (audioIntervalRef.current) {
        clearInterval(audioIntervalRef.current);
      }
      setAudioProgress(0); // Reinicia el progreso al pausar
    } else {
      // Reproducir
      setIsPlayingAudio(true);
      let currentProgress = 0;
      audioIntervalRef.current = window.setInterval(() => {
        currentProgress += 10; // Incrementa el progreso
        if (currentProgress > 100) {
          currentProgress = 0;
          setIsPlayingAudio(false);
          if (audioIntervalRef.current) {
            clearInterval(audioIntervalRef.current);
          }
        }
        setAudioProgress(currentProgress);
      }, 500); // Actualiza cada 0.5 segundos
    }
  };

  React.useEffect(() => {
    // Limpieza al desmontar el componente
    return () => {
      if (audioIntervalRef.current) {
        clearInterval(audioIntervalRef.current);
      }
    };
  }, []);

  return (
    <div className={styles.contentDetailsSection}>
      {/* Sección 1: Transmite en vivo o graba podcasts con invitados remotos */}
      <section className={`${styles.contentBlock} ${styles.bgPink}`}>
        <div className={styles.textColumn}>
          <h2>Transmite en vivo o graba podcasts con invitados remotos</h2>
          <p>
            Los invitados pueden unirse fácilmente desde su navegador o teléfono en unos
            pocos clics. No hace falta descargar ningún software.
          </p>
          <a href="#" className={styles.learnMoreLink}>Más información &rarr;</a>
        </div>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Remote+Guests" alt="Remote Guests" className={styles.contentImage} />
        </div>
      </section>

      {/* Sección 2: Grabaciones con calidad de estudio, independientemente de tu conexión */}
      <section className={`${styles.contentBlock} ${styles.bgPurple} ${styles.reverseLayout}`}>
        <div className={styles.imageColumn}>
          <div className={styles.audioPlayer}>
            <img src="https://via.placeholder.com/500x350?text=Studio+Quality" alt="Studio Quality" className={styles.contentImage} />
            <div className={styles.audioControls}>
              <button onClick={handlePlayPauseAudio} className={styles.playPauseButton} aria-label={isPlayingAudio ? "Pause audio" : "Play audio"}>
                {isPlayingAudio ? <PauseIcon /> : <PlayIcon />}
              </button>
              <div className={styles.progressBarContainer}>
                <div
                  className={styles.progressBar}
                  style={{ width: `${audioProgress}%` }}
                ></div>
              </div>
              <span className={styles.audioLabel}>Haz clic para oír la diferencia</span>
            </div>
          </div>
        </div>
        <div className={styles.textColumn}>
          <h2>Grabaciones con calidad de estudio, independientemente de tu conexión</h2>
          <p>
            ¿Te cansaste de que tus podcasts queden arruinados con Zoom y Skype?
            Con las grabaciones locales, se graba un archivo de audio y video por separado
            en el dispositivo de cada usuario. Incluso si la persona tiene una conexión
            a Internet débil, las grabaciones no estarán borrosas ni entrecortadas.
          </p>
          <a href="#" className={styles.learnMoreLink}>Descubre más &rarr;</a>
        </div>
      </section>

      {/* Sección 3: Haz transmisiones múltiples a varias plataformas a la vez */}
      <section className={`${styles.contentBlock} ${styles.bgWhite}`}>
        <div className={styles.textColumn}>
          <h2>Haz transmisiones múltiples a varias plataformas a la vez</h2>
          <p>
            Transmite a Facebook, YouTube, Instagram, LinkedIn, X (Twitter), Twitch,
            y más. Haz que tu público se sienta especial mostrando sus comentarios
            en pantalla.
          </p>
          <a href="#" className={styles.learnMoreLink}>Ver todas las integraciones &rarr;</a>
        </div>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Multistream" alt="Multistream" className={styles.contentImage} />
        </div>
      </section>

      {/* Sección 4: Lleva tus seminarios web a StreamYard On Air */}
      <section className={`${styles.contentBlock} ${styles.bgBlueish} ${styles.reverseLayout}`}>
        <div className={styles.imageColumn}>
          <img src="https://via.placeholder.com/500x350?text=Webinars" alt="Webinars" className={styles.contentImage} />
        </div>
        <div className={styles.textColumn}>
          <h2>Lleva tus seminarios web a StreamYard On Air</h2>
          <p>
            StreamYard On-Air es una plataforma de seminarios web en vivo.
            Estamos redefiniendo los conceptos de estabilidad, simplicidad
            y calidad de producción para los seminarios web. Incluso puedes
            insertarlos en tu sitio web para una experiencia de marca totalmente
            personalizada.
          </p>
          <a href="#" className={styles.learnMoreLink}>Entérate de por qué todo el mundo está haciendo el cambio &rarr;</a>
        </div>
      </section>
    </div>
  );
};

export default ContentDetailsSection;
```

**`src/components/ContentDetailsSection/ContentDetailsSection.module.css`**

```css
/* src/components/ContentDetailsSection/ContentDetailsSection.module.css */

.contentDetailsSection {
  padding: 0; /* Las secciones internas manejan su propio padding */
}

.contentBlock {
  display: flex;
  align-items: center;
  gap: 80px; /* Espacio entre columnas */
  padding: 100px 0; /* Espaciado vertical entre bloques */
  margin-bottom: 0; /* Cada bloque es una sección, no necesita margen inferior extra */
  flex-wrap: wrap; /* Permite envolver columnas en pantallas pequeñas */
}

/* Fondos de sección */
.bgPink {
  background-color: var(--accent-pink);
}

.bgPurple {
  background-color: var(--accent-purple);
  color: var(--bg-white); /* Texto blanco para fondo oscuro */
}
.bgPurple h2, .bgPurple p, .bgPurple .learnMoreLink {
  color: var(--bg-white);
}

.bgYellow {
  background-color: var(--accent-yellow);
}

.bgBlueish {
  background-color: #EBF7FF; /* Un azul muy claro */
}


.textColumn {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px;
  max-width: 600px; /* Limita el ancho del texto */
}

.imageColumn {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 300px;
  display: flex;
  justify-content: center; /* Centra la imagen dentro de su columna */
  align-items: center;
}

.contentImage {
  max-width: 100%; /* Asegura que la imagen no se desborde */
  height: auto;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
}

.reverseLayout {
  flex-direction: row-reverse; /* Invierte el orden de las columnas */
}

.learnMoreLink {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
}
.bgPurple .learnMoreLink {
  color: var(--bg-white);
}

.learnMoreLink:hover {
  color: #0047b3; /* Azul más oscuro al pasar el ratón */
}

/* Estilos para el reproductor de audio simulado */
.audioPlayer {
  position: relative;
  width: 100%;
  max-width: 500px; /* Ancho máximo para el reproductor */
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* Asegura que la imagen y los controles respeten el borde */
}

.audioPlayer .contentImage {
  border-radius: 0; /* La imagen no necesita borde-radius si el contenedor ya lo tiene */
  display: block; /* Elimina espacios extra debajo de la imagen */
}

.audioControls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente para los controles */
  border-radius: var(--border-radius-button);
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--shadow-sm);
}

.playPauseButton {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.playPauseButton svg {
  width: 30px;
  height: 30px;
}

.progressBarContainer {
  flex-grow: 1;
  height: 8px;
  background-color: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.progressBar {
  height: 100%;
  background-color: var(--primary-blue);
  width: 0%; /* Controlado por el estado de React */
  transition: width 0.1s linear; /* Animación suave para el progreso */
}

.audioLabel {
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  white-space: nowrap; /* Evita que el texto se rompa */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .contentBlock {
    flex-direction: column; /* Apila las columnas */
    text-align: center;
    padding: 80px 0;
    gap: 40px;
  }

  .reverseLayout {
    flex-direction: column; /* También apila en layout invertido */
  }

  .textColumn, .imageColumn {
    max-width: 90%; /* Ajusta el ancho para móvil */
    margin: 0 auto; /* Centra las columnas */
  }

  .audioControls {
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 8px 10px;
    gap: 10px;
  }

  .playPauseButton svg {
    width: 25px;
    height: 25px;
  }

  .audioLabel {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .contentBlock {
    padding: 60px 0;
    gap: 30px;
  }

  .textColumn h2 {
    font-size: 32px;
  }

  .textColumn p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .textColumn h2 {
    font-size: 28px;
  }
}
```

**`src/components/TestimonialsCarousel/TestimonialsCarousel.tsx`**

```tsx
import React, { useState, useRef } from 'react';
import styles from './TestimonialsCarousel.module.css';

// Mock data for testimonials
const testimonials = [
  {
    id: 1,
    quote: "Me ENCANTA la simplicidad y la flexibilidad de StreamYard, así como su capacidad de crear y distribuir producciones de buena calidad que se transmiten maravillosamente a través de plataformas de transmisión de TV.",
    author: "Kisa Puckett",
  },
  {
    id: 2,
    quote: "Esto es la razón por la que uso #TheYard. Tuve que reiniciar la computadora en medio de la grabación debido a un ligero pico de tensión, ¡y no perdí nada!",
    author: "Avery Johnson",
  },
  {
    id: 3,
    quote: "Me encanta la combinación de elegancia y la sencillez que ofrece StreamYard. Lo usamos para transmitir nuestro programa semanal de entrevistas de marketing en redes sociales en YouTube, Facebook y LinkedIn. Como presentador, puedo crear sin esfuerzo un programa atractivo sin una persona que se dedique al back-end.",
    author: "Michael Steltzner",
  },
  {
    id: 4,
    quote: "Pasarme de Zoom a StreamYard para mi podcast fue lo mejor que he hecho por mi programa. ¡Gracias por el consejo, Melanie D Brown!",
    author: "Sonali BestLife Jones",
  },
  {
    id: 5,
    quote: "Recomiendo a StreamYard a todo el mundo. Casi dos tercios de mis clientes provienen de mis programas en vivo. Le agradezco de corazón a StreamYard por hacer que las transmisiones en vivo sean tan sencillas, de modo que no tenga que preocuparme por la parte técnica. Solo me enfoco en ejecutar mis programas y hacer mi negocio crezca.",
    author: "Dr. Al Aidyyan Zhang",
  },
  {
    id: 6,
    quote: "StreamYard es un servicio fantástico. La fiabilidad y facilidad para los participantes en pantalla es fenomenal. Además, StreamYard hace que este proceso sea prácticamente infalible.",
    author: "Matt Schick",
  },
];

const TestimonialsCarousel: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const carouselRef = useRef<HTMLDivElement>(null);

  const totalSlides = testimonials.length;
  // Asumiendo 3 tarjetas visibles a la vez en escritorio
  const slidesPerPage = 3;

  const goToSlide = (index: number) => {
    setCurrentIndex(index);
    if (carouselRef.current) {
      const cardWidth = carouselRef.current.children[0]?.clientWidth || 0;
      const gap = 30; // Definido en CSS
      carouselRef.current.scrollTo({
        left: index * (cardWidth + gap),
        behavior: 'smooth',
      });
    }
  };

  const nextSlide = () => {
    const nextIndex = (currentIndex + 1) % totalSlides;
    goToSlide(nextIndex);
  };

  const prevSlide = () => {
    const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    goToSlide(prevIndex);
  };

  return (
    <section className={styles.testimonialsSection}>
      <h2>Ya se crearon más de 60 millones de transmisiones y grabaciones en StreamYard</h2>
      <div className={styles.carouselContainer}>
        <button className={`${styles.navArrow} ${styles.leftArrow}`} onClick={prevSlide} aria-label="Previous testimonial">
          &#8249;
        </button>
        <div className={styles.testimonialsGrid} ref={carouselRef}>
          {testimonials.map((testimonial) => (
            <div key={testimonial.id} className={styles.testimonialCard}>
              <p className={styles.quote}>"{testimonial.quote}"</p>
              <p className={styles.author}>{testimonial.author}</p>
            </div>
          ))}
        </div>
        <button className={`${styles.navArrow} ${styles.rightArrow}`} onClick={nextSlide} aria-label="Next testimonial">
          &#8250;
        </button>
      </div>
      <div className={styles.paginationDots}>
        {Array.from({ length: Math.ceil(totalSlides / slidesPerPage) }).map((_, idx) => (
          <span
            key={idx}
            className={`${styles.dot} ${idx === Math.floor(currentIndex / slidesPerPage) ? styles.active : ''}`}
            onClick={() => goToSlide(idx * slidesPerPage)}
            aria-label={`Go to slide ${idx + 1}`}
          ></span>
        ))}
      </div>
    </section>
  );
};

export default TestimonialsCarousel;
```

**`src/components/TestimonialsCarousel/TestimonialsCarousel.module.css`**

```css
/* src/components/TestimonialsCarousel/TestimonialsCarousel.module.css */

.testimonialsSection {
  padding: 100px 0;
  background-color: var(--bg-white);
  text-align: center;
}

.testimonialsSection h2 {
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.carouselContainer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.testimonialsGrid {
  display: flex;
  overflow-x: hidden; /* Controlado por JS, no scroll nativo */
  gap: 30px;
  padding: 20px;
  margin: 0 -20px;
  -webkit-overflow-scrolling: touch;
}

.testimonialCard {
  flex: 0 0 auto; /* No permite que se encojan */
  width: calc((100% / 3) - 20px); /* Aproximadamente 3 tarjetas por vista con gap */
  max-width: 380px; /* Ancho máximo para una tarjeta individual */
  min-width: 300px; /* Ancho mínimo para la tarjeta en pantallas pequeñas */
  background-color: var(--bg-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Espacia la cita y el autor */
  border: 1px solid var(--border-light);
}

.quote {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-medium);
  margin-bottom: 20px;
  font-style: italic;
}

.author {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.navArrow:hover {
  background-color: var(--bg-light-grey);
  transform: translateY(-50%) scale(1.05);
}

.leftArrow {
  left: -25px;
}

.rightArrow {
  right: -25px;
}

.paginationDots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: var(--border-light);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot.active {
  background-color: var(--primary-blue);
  transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .leftArrow {
    left: 0px;
  }
  .rightArrow {
    right: 0px;
  }
}

@media (max-width: 1024px) {
  .testimonialCard {
    width: calc((100% / 2) - 15px); /* 2 tarjetas por vista en tablets */
  }
}

@media (max-width: 768px) {
  .testimonialsSection {
    padding: 60px 0;
  }
  .testimonialsSection h2 {
    font-size: 32px;
  }
  .testimonialsGrid {
    gap: 20px;
    padding: 15px;
    margin: 0 -15px;
  }
  .testimonialCard {
    width: 90%; /* 1 tarjeta por vista en móviles, ocupa casi todo el ancho */
    max-width: 400px;
    margin: 0 auto; /* Centra la tarjeta */
    padding: 25px;
  }
  .navArrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .testimonialsSection h2 {
    font-size: 28px;
  }
  .navArrow {
    display: none; /* Oculta flechas en pantallas muy pequeñas, usa el scroll nativo si se habilita */
  }
  .testimonialCard {
    min-width: unset; /* Permite que la tarjeta se encoja más si es necesario */
  }
}
```

**`src/components/CallToActionSection/CallToActionSection.tsx`**

```tsx
import React from 'react';
import styles from './CallToActionSection.module.css';

const CallToActionSection: React.FC = () => {
  const handleGetStartedClick = () => {
    console.log("Redirecting to signup page from CTA...");
    // En una aplicación real: window.location.href = '/signup';
    alert("Simulando redirección a /signup");
  };

  return (
    <section className={styles.ctaSection}>
      <div className={styles.ctaContent}>
        <h2>Empieza a crear.</h2>
        <button className={styles.ctaButton} onClick={handleGetStartedClick}>¡Empieza, es gratis!</button>
        <p>Únete a millones de usuarios de StreamYard y empieza con tus transmisiones o tu podcast hoy mismo.</p>
      </div>
    </section>
  );
};

export default CallToActionSection;
```

**`src/components/CallToActionSection/CallToActionSection.module.css`**

```css
/* src/components/CallToActionSection/CallToActionSection.module.css */

.ctaSection {
  background-color: var(--primary-blue); /* Fondo azul */
  /* Imagen de fondo sutil con patrón geométrico */
  background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h100v100H0z" fill="none"/><path d="M0 50h50L25 75zM50 0h50L75 25z" fill="rgba(255,255,255,0.05)"/></svg>');
  background-size: 200px 200px; /* Tamaño del patrón */
  color: var(--bg-white); /* Texto blanco */
  text-align: center;
  padding: 120px 20px; /* Espaciado interno */
  margin-top: 100px; /* Espacio superior para separar de la sección anterior */
}

.ctaContent {
  max-width: 700px; /* Ancho máximo para el contenido del CTA */
  margin: 0 auto;
}

.ctaContent h2 {
  font-size: var(--font-size-h2);
  color: var(--bg-white);
  margin-bottom: 25px;
}

.ctaButton {
  background-color: var(--bg-white); /* Botón blanco sobre fondo azul */
  color: var(--primary-blue);
  border: none;
  border-radius: var(--border-radius-button);
  padding: 18px 36px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-bottom: 20px;
}

.ctaButton:hover {
  background-color: #f0f0f0; /* Ligero cambio de color al pasar el ratón */
  transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.ctaContent p {
  font-size: var(--font-size-p);
  color: rgba(255, 255, 255, 0.8); /* Texto más claro */
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ctaSection {
    padding: 80px 16px;
    margin-top: 80px;
  }

  .ctaContent h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .ctaButton {
    padding: 16px 30px;
    font-size: 18px;
  }

  .ctaContent p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .ctaSection {
    padding: 60px 16px;
    margin-top: 60px;
  }

  .ctaContent h2 {
    font-size: 30px;
  }

  .ctaButton {
    padding: 14px 24px;
    font-size: 16px;
  }
}
```

**`src/components/Footer/Footer.tsx`**

```tsx
import React, { useState } from 'react';
import styles from './Footer.module.css';

const Footer: React.FC = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('es'); // Default to Spanish

  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedLanguage(event.target.value);
    console.log(`Language changed to: ${event.target.value}`);
    // En una aplicación real, aquí se actualizaría el contexto de i18n
  };

  return (
    <footer className={styles.footer}>
      <div className={styles.footerContent}>
        <div className={styles.footerLogo}>
          <img src="https://via.placeholder.com/150x40?text=StreamYard+Logo" alt="StreamYard Logo" />
          <p>La manera más sencilla de grabar y transmitir en vivo</p>
        </div>

        <div className={styles.footerColumn}>
          <h3>Producto</h3>
          <ul>
            <li><a href="#">Por qué StreamYard</a></li>
            <li><a href="#">Transmisión múltiple</a></li>
            <li><a href="#">Transmisiones vinculadas a las marcas</a></li>
            <li><a href="#">Grabaciones</a></li>
            <li><a href="#">Entrevistas a invitados</a></li>
            <li><a href="#">Participación de la audiencia</a></li>
            <li><a href="#">Podcasts</a></li>
            <li><a href="#">Seminarios web On-Air</a></li>
            <li><a href="#">Reutilización de videos</a></li>
            <li><a href="#">Estado</a></li>
            <li><a href="#">Seguridad</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>Comunidad</h3>
          <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Afiliados</a></li>
            <li><a href="#">Centro de ayuda</a></li>
            <li><a href="#">Novedades</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>StreamYard para</h3>
          <ul>
            <li><a href="#">Comercial</a></li>
          </ul>
        </div>

        <div className={styles.footerColumn}>
          <h3>Únete a nosotros</h3>
          <ul className={styles.socialLinks}>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=Webinar" alt="Webinar" /> Webinar</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=FB" alt="Facebook" /> Facebook</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=X" alt="X (Twitter)" /> X (Twitter)</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=YT" alt="YouTube" /> YouTube</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=IG" alt="Instagram" /> Instagram</a></li>
            <li><a href="#"><img src="https://via.placeholder.com/20?text=LI" alt="LinkedIn" /> LinkedIn</a></li>
          </ul>
        </div>
      </div>

      <div className={styles.footerBottom}>
        <div className={styles.legalLinks}>
          <a href="#">Términos de servicio</a>
          <a href="#">Términos de la Plataforma</a>
          <a href="#">Política de privacidad</a>
          <a href="#">Política de Cookies</a>
          <a href="#">Preferencias de cookies</a>
          <a href="#">Centro de ayuda</a>
        </div>
        <div className={styles.languageSelector}>
          <select value={selectedLanguage} onChange={handleLanguageChange}>
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
            {/* Add more languages as needed */}
          </select>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
```

**`src/components/Footer/Footer.module.css`**

```css
/* src/components/Footer/Footer.module.css */

.footer {
  background-color: var(--bg-white);
  padding: 80px 20px 40px 20px; /* Padding superior, inferior y lateral */
  border-top: 1px solid var(--border-light); /* Línea divisoria sutil */
}

.footerContent {
  display: flex;
  justify-content: space-between;
  max-width: 1280px; /* Alineado con PageContainer */
  margin: 0 auto;
  gap: 40px; /* Espacio entre columnas */
  flex-wrap: wrap; /* Permite que las columnas se envuelvan */
}

.footerLogo {
  flex: 1 1 200px; /* Permite que el logo tenga un ancho flexible */
  margin-right: 40px; /* Espacio extra a la derecha del logo */
}

.footerLogo img {
  height: 40px;
  width: auto;
  margin-bottom: 15px;
}

.footerLogo p {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: 1.5;
}

.footerColumn {
  flex: 1 1 180px; /* Cada columna tiene un ancho flexible */
}

.footerColumn h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.footerColumn ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footerColumn ul li {
  margin-bottom: 10px;
}

.footerColumn ul li a {
  text-decoration: none;
  color: var(--text-medium);
  font-size: 15px;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio para iconos de redes sociales */
}

.footerColumn ul li a:hover {
  color: var(--primary-blue);
}

.socialLinks img {
  width: 20px;
  height: 20px;
}

.footerBottom {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.legalLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.legalLinks a {
  text-decoration: none;
  color: var(--text-light);
  font-size: var(--font-size-sm);
  transition: color 0.3s ease;
}

.legalLinks a:hover {
  color: var(--primary-blue);
}

.languageSelector select {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-input);
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  color: var(--text-medium);
  background-color: var(--bg-white);
  cursor: pointer;
  -webkit-appearance: none; /* Oculta el estilo nativo del select */
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.1%205.4%2013.2l128.8%20128.8c3.9%203.9%208.7%205.8%2013.6%205.8s9.7-1.9%2013.6-5.8l128.8-128.8c3.9-3.9%205.8-8.7%205.8-13.6%200-4.8-1.8-9.1-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 30px; /* Espacio para el icono de la flecha */
}

.languageSelector select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footerContent {
    gap: 30px;
    justify-content: flex-start; /* Alinea al inicio en pantallas más pequeñas */
  }
  .footerLogo {
    flex-basis: 100%; /* El logo ocupa todo el ancho */
    margin-right: 0;
    text-align: center;
  }
  .footerColumn {
    flex-basis: calc(50% - 15px); /* Dos columnas por fila */
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 16px 30px 16px;
  }
  .footerContent {
    flex-direction: column; /* Columnas apiladas */
    gap: 30px;
  }
  .footerLogo {
    margin-bottom: 20px;
  }
  .footerColumn {
    flex-basis: 100%;
    text-align: center;
  }
  .footerColumn ul li a {
    justify-content: center; /* Centra los enlaces con iconos */
  }
  .footerBottom {
    flex-direction: column; /* Apila los enlaces legales y el selector */
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
  }
  .legalLinks {
    flex-direction: column;
    gap: 10px;
  }
  .languageSelector {
    width: 100%; /* El selector de idioma ocupa todo el ancho */
    text-align: center;
  }
  .languageSelector select {
    width: 80%; /* Ancho del select para móvil */
    max-width: 200px;
  }
}
```