:root {
    --bg-principal: #f8fafc;
    --bg-tarjeta: #ffffff;
    --color-oscuro: #16306e;
    --color-acento: #5874cf;
    /* Un naranja más vibrante y moderno */
    --color-texto: #051e41;
    --gris-borde: #e2e8f0;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');



/* ─── CONFIGURACIÓN GENERAL Y ESTILOS BASE ─── */
body {
    font-family:"Plus Jakarta Sans", sans-serif;
    background-color: var(--bg-principal);
    color: var(--color-texto);
    margin: 0;
      transition: background-color 0.5s ease;
    padding: 0;
    overflow-x: hidden; /* Crucial para evitar scroll horizontal en el efecto de giro */
}
body.fondo-oscuro {
  background-color: #1b1b1b; /* El color oscuro que desees */
  color: #ffffff; /* Opcional: cambia el color del texto si lo necesitas */
}

header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

  position: sticky; /* O position: sticky, según tu elección anterior */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* --- EFECTO CRISTAL --- */
  background: rgba(255, 255, 255, 0.2); /* Fondo blanco con 20% de opacidad */
  backdrop-filter: blur(8px);          /* Difumina lo que está detrás del header */
  -webkit-backdrop-filter: blur(10px);  /* Soporte para navegadores Safari */
  
  /* --- DETALLES OPCIONALES (Para mejorar el realismo) --- */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Línea brillante sutil abajo */


 
}
#orange {
    color: rgb(235, 185, 92);
}

header>nav>ul>li>a {
    text-decoration: none;
    color: var(--color-texto);
    padding: 5px;
    transition: all 0.3s ease-in-out;
    font-size:large;
}

header>nav>ul>li {
    color:var(--color-texto);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 10px;

}

header>nav>ul>li>a:hover {
   cursor: pointer;
}

header>nav>ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 10px;
    padding: 10px;
}

#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 2.5rem;
    min-height: 80vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/hero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

#hero>h1 {
    font-family:"Plus Jakarta Sans", sans-serif;
    font-size: 2.5rem;
}


.ctn-button {
    text-decoration: none;
    font-size: 1.5em;
    color: white;
    padding: 10px;
    border-radius: 15px;
    outline: none;
    border: 2px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
    /* Fondo blanco semitransparente */
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;

}

.ctn-button:hover {
    background-color: white;
    transform: scale(1.1);
    color: black;
    cursor: pointer;
    font-family:"Plus Jakarta Sans", sans-serif;
}
/* Bloques de espacio para permitir el scroll entre efectos */
.espaciador {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #475569;
    text-align: center;
    border-bottom: 1px dashed #1e293b;
    background: radial-gradient(circle at center, #111827 0%, var(--bg-principal) 100%);
}

.indicador-bajar {
    font-size: 2rem;
    margin-top: 15px;
    animation: rebote 2s infinite;
}

@keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.titulo-seccion {
    color: #6366f1;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
    EFECTO 1: REVELADO ESTILO "MONOS" (Persiana con Trigger JS)
───────────────────────────────────────────────────────────── */
.seccion-revelado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh;
}

.linea-oculta {
    overflow: hidden; /* Corta el texto que está abajo */
    display: block;
    margin-bottom: 5px;
}

.texto-revelado {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    transform: translateY(100%); /* Escondido al inicio */
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.8s ease;
}

/* Clase contenedora que activa JS al hacer scroll */
.linea-oculta.animar .texto-revelado {
    transform: translateY(0);
    opacity: 1;
}

.retraso-1 { transition-delay: 0.1s; }
.retraso-2 { transition-delay: 0.2s; }


/* ─────────────────────────────────────────────────────────────
    EFECTO 2: TEXTO LATERAL CON GIRO (100% Scroll CSS)
───────────────────────────────────────────────────────────── */
.seccion-lateral {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.texto-giro {
 
    transform-origin: bottom left; /* Punto de pivote para el giro */

    
    /* Enlazamos la animación al scroll continuo */
    animation: entrarYGirar linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 60%;
}

@keyframes entrarYGirar {
    from {
        opacity: 0;
        transform: translateX(80vw) rotate(40deg); /* Viene inclinado desde la derecha */
    }
    50%{
        opacity: 1;
        transform: translateX(0) rotate(0deg); /* Termina recto en su lugar */
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg); /* Termina recto en su lugar */
    }
}


/* ─────────────────────────────────────────────────────────────
    EFECTO 3: CARTAS APILABLES / STACKING CARDS (100% Scroll CSS)
─/* ─────────────────────────────────────────────────────────────
    EFECTO 3: CARTAS APILABLES / STACKING CARDS (100% Scroll CSS)
───────────────────────────────────────────────────────────── */
.seccion-cartas {
    display: flex;
    flex-direction: row; /* Cambiado a fila para poner H1 a un lado y cartas al otro */
    justify-content: space-between;
    align-items: flex-start; /* Alinea los elementos al inicio superior */
    gap: 60px; /* Espacio entre el título y la columna de cartas */
    max-width: 1200px; /* Ancho máximo de la sección para pantallas grandes */
    margin: 0 auto;
    padding: 80px 40px 20vh 40px; /* Añadido padding lateral */
}

/* Columna de la izquierda (El H1) */
.seccion-cartas > section:first-of-type {
    flex: 1; /* Toma el espacio necesario de forma flexible */
    position: sticky;
    top: 15vh; /* Se queda congelado a la par que empiezan las cartas */
}

.seccion-cartas h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin: 0;
}

/* Columna de la derecha (Contenedor de las cartas) */
.seccion-cartas > section:last-of-type {
    flex: 1.2; /* Le damos un poco más de espacio a la columna de las cartas */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px; /* Distancia de separación vertical entre cartas */
}

/* Las propiedades de .carta se mantienen intactas para preservar tu animación actual */
.carta {
    position: sticky;
    top: 15vh; 
    width: 100%; /* Ahora se adapta al ancho de su columna contenedora */
    max-width: 550px;
    height: 320px;
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
    border: 3px solid rgb(189, 187, 187);
    background-color: #2b2b2b;
    
    animation: achicarCarta linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
}

@keyframes achicarCarta {
    to {
        transform: scale(0.92) translateY(-20px);
        filter: brightness(0.4) blur(2px);
    }
}

.carta span {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
}

.carta h2 {
    font-size: 2.2rem;
    margin: 10px 0 15px 0;
    font-weight: 800;
}

.carta p {
    font-size: 1.1rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Adaptación para pantallas móviles (vuelve a una columna si el espacio es reducido) */
@media (max-width: 992px) {
    .seccion-cartas {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-top: 40px;
    }
    .seccion-cartas > section:first-of-type {
        position: relative;
        top: 0;
        text-align: center;
    }
    .seccion-cartas h1 {
        font-size: 2.5rem;
    }
}
/* --- Contenedor General de Servicios --- */
#servicios {
  max-width: 1100px;
  margin: 60px auto;
  padding: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.center { text-align: center; }
.subr {
  font-size: 2.5rem;
  margin-bottom: 40px;
  position: relative;
}

/* --- Estructura de Tabla de Planes (Adiós Cartas Simples) --- */
.tabla-planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.plan-col {
  background-color: var(--bg-tarjeta, #ffffff);
  border: 1px solid var(--gris-borde, #e2e8f0);
  border-radius: 16px;
  padding: 35px 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Plan Destacado (Pro) */
.plan-col.pro {
  border: 2px solid #ca9f5a; /* Tono dorado/acento elegante, no amarillo chillón */
  transform: scale(1.03);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.badge-pro {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #ca9f5a;
  color: #fff;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tipografías internas */
.plan-col h3 {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  color: #1a202c;
}

.plan-col .precio {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a202c;
  margin-bottom: 15px;
}

.plan-col .descripcion {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 25px;
  min-height: 60px;
}

/* Listas Limpias */
.plan-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-col li {
  font-size: 0.95rem;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Iconos sutiles sin usar emojis pesados si no quieres, o usando estos modernos */
.plan-col li.yes::before { content: "✓"; color: #2bf3a4; font-weight: bold; font-size: 1.1rem; }
.plan-col li.no::before { content: "✕"; color: #e53e3e; font-weight: bold; font-size: 1.1rem; }

.plan-col .sublista-titulo {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #718096;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

/* --- Sección Mensualidades Estilo Split --- */
.seccion-mensualidades {
  margin-top: 80px;
  background: var(--bg-alternativo, #f7fafc);
  padding: 40px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.mensualidad-info h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.mensualidad-opciones {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.opcion-bloque {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.opcion-bloque:hover {
  border-color: #6a9fd1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.opcion-detalle h4 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}
.opcion-detalle p {
  margin: 0;
  font-size: 0.85rem;
  color: #718096;
}

.opcion-precio {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .tabla-planes { grid-template-columns: 1fr; gap: 30px; }
  .plan-col.pro { transform: scale(1); }
  .seccion-mensualidades { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}


#importante{
    font-weight:900;
    background-color: #6a9fd1;
    padding:5px;
    border-radius: 10px;
}

/* Nosotros */
#nosotros {
    display: flex;

}

.nosotros-container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #333;

}

.nosotros-container p {
    margin-bottom: 15px;

}

#imagennoso {
    max-width: 50%;
}

#imagenl {
    max-width: 100%;
    max-height: 100%;
    border: 20px solid #333;
    box-sizing: border-box;
}

#nosotros h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Fin nosotros */

/* Contactanos */

/* --- Formulario Estilo Monos (Minimalismo Radical) --- */
form {
    background-color: transparent; /* Adiós a la tarjeta oscura rígida */
    text-align: left;
    width: 100%;
    max-width: 700px; /* Un poco más ancho da sensación de limpieza */
    margin: 40px auto;
    padding: 0; /* Sin paddings internos forzados de caja */
    box-shadow: none; /* Sin sombras artificiales de IA */
}

/* Encabezados planos */
.form-titulo {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 800;
    color: #111111;
    font-size: 2.2rem;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.form-subtitulo {
    color: #666666;
    font-size: 1.05rem;
    margin-bottom: 40px;
}

/* Distribución limpia en cuadrícula o filas */
.form-group-row {
    display: flex;
    gap: 30px; /* Más espacio aireado */
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    width: 100%;
}

/* Ocultamos los labels tradicionales si quieres la estética pura de Monos, 
   o los dejamos muy sutiles y pequeños arriba */
form label {
    color: #111111;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Inputs reducidos a una sola línea inferior minimalista */
input, select, textarea {
    width: 100%;
    height: auto;
    padding: 12px 4px; /* Padding lateral mínimo porque se alinea con la línea */
    box-sizing: border-box;
    border-radius: 0px; /* Adiós bordes redondeados tipo plantilla */
    background-color: transparent; /* Fondo limpio */
    border: none;
    border-bottom: 2px solid #e0e0e0; /* Solo línea inferior */
    color: #111111;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Textareas sin redimensionado tosco */
textarea {
    resize: vertical;
    min-height: 100px;
}

/* Placeholders discretos */
input::placeholder, textarea::placeholder {
    color: #aaaaaa;
}

/* Interacción de foco limpia (La línea cambia al color de acento) */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom-color: #ff5a1f; /* Línea de acento Monos */
    background-color: transparent;
    box-shadow: none; /* Nada de resplandores extraños */
}

/* Reset de validaciones nativas del navegador */
input:valid, select:valid, textarea:valid,
input:invalid, select:invalid, textarea:invalid {
    border-bottom: 2px solid #e0e0e0;
}
input:focus:invalid, select:focus:invalid, textarea:focus:invalid {
    border-bottom-color: #ff5a1f;
}

/* Botón Sólido, Plano e Irreverente */
.btn-premium {
    width: auto; /* No ocupa todo el ancho, se ve más sofisticado a la izquierda */
    display: inline-block;
    background: #111111; /* Bloque negro puro */
    color: #ffffff;
    border: none;
    padding: 16px 40px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px; /* Botón en forma de píldora plana, muy de agencia moderna */
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
    font-family: system-ui, -apple-system, sans-serif;
    margin-top: 15px;
}

.btn-premium:hover {
    background: #ff5a1f; /* Cambia instantáneamente al color de la marca */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 90, 31, 0.2);
}

/* Adaptación móvil impecable */
@media (max-width: 600px) {
    .form-group-row {
        flex-direction: column;
        gap: 0;
    }
    .btn-premium {
        width: 100%; /* En móviles sí puede ocupar todo el ancho para facilitar el clic */
        text-align: center;
    }
}

/* Fin contactanos */
/* Preguntas Frequentes */
/* Contenedor principal */
.faq-contenedor {
    max-width: 600px;
    margin: 40px auto;
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-contenedor h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Cada elemento de pregunta */
.faq-item {
    background-color: #ffffff;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

/* Ocultar la flecha por defecto en algunos navegadores */
.faq-titulo::-webkit-details-marker {
    display: none;
}

/* La pregunta */
.faq-titulo {
    padding: 18px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.3s ease;
    list-style: none;
    /* Oculta la flecha en Firefox/Safari */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-titulo:hover {
    background-color: #f1f1f1;
}

/* Icono dinámico para el estado abierto */
.faq-titulo::after {
    content: '▼';
    font-size: 12px;
    color: #888;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-titulo::after {
    transform: rotate(180deg);
}

/* El contenido desplegable */
.faq-contenido {
    padding: 18px 20px;
    color: #555;
    line-height: 1.5;
    border-top: 1px solid #e0e0e0;
    /* Animación de entrada */
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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


/* Preguntas Frecuentes */

/* Reseñas */
#reseñas {
    display: flex;
    flex-wrap: nowrap; /* Mantiene las tarjetas en una sola línea horizontal */
    overflow-x: auto;  /* Permite el deslizamiento horizontal */
    gap: 20px;         /* Espacio de separación entre las 6 tarjetas */
    padding: 30px 20px; /* Espacio arriba/abajo para que las sombras respiren */
    
    /* EFECTO PREMIUM: Deslizamiento magnético (tipo App móvil) */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; /* Suavidad extra en iPhones */
}

/* Truco Pro: Ocultamos la barra de scroll fea del navegador para que quede ultra limpio */
#reseñas::-webkit-scrollbar {
    display: none;
}

.box {
    background-color: #e2e8f0; /* Un tono oscuro alineado con tu nuevo diseño (puedes cambiarlo) */
    color: black;
    border: 2px solid black;
    border-radius: 15px;
    
    /* Ajuste de tamaño profesional */
    width: 320px;       /* 1000px era enorme. 320px es perfecto para PC y pantallas de móvil */
    flex-shrink: 0;     /* ¡OBLIGATORIO! Evita que Flexbox aplaste tus tarjetas */
    
    min-height: 220px;  /* Altura mínima para que quepa el texto de la reseña */
    padding: 25px;
    box-sizing: border-box;
    
    /* Se alinea magnéticamente al centro de la pantalla al deslizar */
    scroll-snap-align: center; 
    
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* El contenedor padre que controla la posición de los botones */
.wrapper-carrusel {
    position: relative;
    max-width: 1100px; /* Centrado y alineado con el resto de tu web */
    margin: 0 auto;
    padding: 0 40px; /* Espacio para que los botones no tapen el texto */
}

/* Estilo Base de los Botones (Premium y circulares) */
.btn-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.2s ease-in-out;
    
    /* Crucial para que el enlace parezca un botón */
    text-decoration: none; 
}
/* Posición de cada botón en los extremos */
.btn-flecha.prev {
    left: 10px;
}

.btn-flecha.next {
    right: 10px;
}

/* Efecto Hover (Toque de color naranja al pasar el ratón) */
.btn-flecha:hover {
    background-color: #ff5a1f; /* Tu naranja de acento */
    color: #ffffff;
    border-color: #ff5a1f;
    transform: translateY(-50%) scale(1.1); /* Se hace un pelín más grande */
}

/* Ocultar los botones en móviles (En el móvil es mejor deslizar con el dedo) */
@media (max-width: 768px) {
    .btn-flecha {
        display: none;
    }
    .wrapper-carrusel {
        padding: 0; /* Aprovecha todo el ancho en móviles */
    }
}


/* Footer */
/* Contenedor principal del Footer */
footer {
    background-color: rgb(51,48,48); /* Azul ultra oscuro */
    color: #94a3b8; /* Gris suave */
    padding: 60px 20px 20px 20px;
    font-family: 'Inter', sans-serif;
    border-top: 1px solid #1e293b;
}

/* Distribución con Flexbox */
.footer-contenedor {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
}

/* Estilo general de las columnas */
.footer-columna {
    flex: 1;
    min-width: 250px;
}

/* Hacemos que la columna de presentación sea más ancha para equilibrar */
.info-freelancer {
    flex: 2; /* Ocupa el doble de espacio que la de navegación */
    max-width: 550px;
}

/* Tipografías */
.footer-columna h3 {
    font-family: 'Playfair Display', serif;
    color: #ffffff;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.footer-columna h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-descripcion {
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Enlaces */
.footer-columna ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-columna ul li {
    margin-bottom: 12px;
}

.footer-columna ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer-columna ul li a:hover {
    color: #ff5a1f; /* Color de acento naranja */
}

.text-orange {
    color: #ff5a1f;
}

/* --- Barra Inferior --- */
.footer-inferior {
    max-width: 1100px;
    margin: 60px auto 0 auto; /* Más margen superior para separarlo bien */
    padding-top: 20px;
    border-top: 1px solid #1e293b;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.footer-inferior p {
    margin: 5px 0;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-contenedor {
        flex-direction: column;
        gap: 35px;
    }
    .info-freelancer {
        max-width: 100%;
    }
    .footer-inferior {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* Fin footer */

/* Ajustes Generales */
.center {
    text-align: center;
}

.destacar {
    font-weight: 800;
}

.section {
    background-color: var(--bg-tarjeta);
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
}




/* Fin */