/* =====================================================
   PROYECTO: LANDING PAGE CON FLEXBOX Y VARIABLES CSS

   INSTRUCCIONES
   1. Completa todas las propiedades marcadas con COMPLETA.
   2. Utiliza Flexbox como único sistema de distribución.
   3. No utilices CSS Grid.
   4. No agregues nuevas clases: trabaja con las existentes.
   5. Conserva las propiedades técnicas ya resueltas.

   GUÍA RÁPIDA DE VARIABLES

   Una variable guarda un valor para reutilizarlo:

   :root{
     --color-ejemplo: #264653;
   }

   Para utilizarla dentro de una propiedad se escribe:

   color: var(--color-ejemplo);

   Primero define las variables en :root y después aplícalas
   en las propiedades marcadas con COMPLETA.
   ===================================================== */


/* =====================================================
   1. VARIABLES DEL PROYECTO
   Define aquí la identidad visual antes de continuar.
   Utiliza máximo cuatro colores visuales principales.
   ===================================================== */

:root{
  --color-fondo:#F5EDDC;       /* COMPLETA: fondo general y tarjetas */
  --color-alternativo:#FFFFFF;/* COMPLETA: fondo suave para algunas secciones */
  --color-principal:#1A1A1A ;   /* COMPLETA: texto, encabezado, títulos o pie */
  --color-acento:#D4A373;      /* COMPLETA: botones y elementos destacados */

  --fuente-principal:sans-serif;  /* COMPLETA: ejemplo Arial, sans-serif */
  --ancho-maximo:1200px;     /* COMPLETA: sugerencia entre 1000px y 1200px */
  --radio:20px ;             /* COMPLETA: redondeo general, por ejemplo 8px */
}


/* =====================================================
   2. BASE TÉCNICA
   Estas propiedades ya están resueltas porque controlan
   comportamientos generales del navegador.
   ===================================================== */

*{
  box-sizing: border-box;
  /* Hace que padding y border se incluyan dentro del ancho
     total del elemento y ayuda a evitar desbordamientos. */
}

html{
  scroll-behavior: smooth;
  /* Produce un desplazamiento suave cuando un enlace del
     menú lleva a una sección como #contacto. */
}

body{
  margin: 0; /* Elimina el margen automático del navegador. */
  font-family:var(--fuente principal); /* COMPLETA: utiliza la variable de tipografía */
  background-color:var(--color-alternativo); /* COMPLETA: utiliza la variable de fondo */
  color:var(--color-principal); /* COMPLETA: utiliza la variable de texto */
  line-height: 1.6; /* Mejora la separación y legibilidad del texto. */
}

img{
  display: block;
  /* Evita el pequeño espacio inferior que algunas imágenes
     presentan cuando conservan su comportamiento en línea. */

  width: 100%;
  height: auto;
  /* La imagen ocupa el ancho disponible sin deformarse. */
}

a{
  text-decoration: none; /* Elimina el subrayado predeterminado. */
}

.contenedor{
  width: 90%; /* Deja un margen lateral adaptable. */
  max-width:85%; /* COMPLETA: utiliza la variable de ancho máximo */
  margin: 0 auto; /* Centra horizontalmente el contenedor. */
}


/* =====================================================
   3. ENCABEZADO Y NAVEGACIÓN
   ===================================================== */

header{
  background-color:var(--color-principal); /* COMPLETA: utiliza una variable */
  padding: 18px 0; /* Conserva espacio vertical sin modificar el ancho. */
}

header .contenedor{
  display:flex;/* COMPLETA: usa Flexbox */
    flex-direction: row;
  justify-content: space-between; /* COMPLETA: separa marca y menú */
  align-items:center;
    flex-wrap: nowrap;/* COMPLETA: alinea ambos elementos */
  gap:20px; /* COMPLETA: separación cuando el espacio disminuye */
}

.marca{
  color:var(--color-alternativo); /* COMPLETA: utiliza una variable */
  font-size:50px; /* COMPLETA */
  font-weight:700; /* COMPLETA */
}

nav ul{
  display:flex; /* COMPLETA: usa Flexbox */
  flex-wrap:nowrap;
  /* Permite que el menú baje a otra línea si no cabe.
     Esta propiedad evita un desbordamiento horizontal. */

  justify-content:space-around; /* COMPLETA */
  gap:40px; /* COMPLETA */
  margin: 0;
  padding: 0;
  list-style: none;
  /* Elimina los estilos predeterminados de la lista. */
}

nav a{
  color:var(--color-alternativo); /* COMPLETA: utiliza una variable */
  font-weight:600; /* COMPLETA */
}

nav a:hover{
  color:var(--color-acento); /* COMPLETA: color al pasar el cursor */
}


/* =====================================================
   4. HERO O PORTADA
   ===================================================== */

#inicio{
  background-color:var(--color-fondo); /* COMPLETA: utiliza una variable */
  padding:80px 0; /* COMPLETA */
}

#inicio .contenedor{
  display:flex; /* COMPLETA: usa Flexbox */
  flex-direction:row; /* COMPLETA: distribuye texto e imagen */
  align-items:center; /* COMPLETA */
  gap:40px; /* COMPLETA */
}

#inicio .contenedor > div{
  flex: 1;
  /* Hace que las dos columnas compartan el espacio disponible
     sin usar width: 50%, lo cual evita desbordamientos por el gap. */
}

h1{
  margin: 0 0 18px;
  font-size:45px; /* COMPLETA */
  line-height: 1.1; /* Mantiene compacto el título principal. */
  color:var(--color-principal); /* COMPLETA: utiliza una variable */
}

#inicio p{
  margin: 0 0 28px;
  color:var(--color-principal); /* COMPLETA: utiliza una variable */
  font-size:20px ; /* COMPLETA */
}

#inicio img{
  border-radius:var(--radio);/* COMPLETA: utiliza la variable de radio */
}


/* =====================================================
   5. BOTONES
   ===================================================== */

.boton{
  display:inline-flex; /* COMPLETA: usa inline-flex */
  justify-content:flex-start; /* COMPLETA */
  align-items:flex-start; /* COMPLETA */
  background-color:var(--color-acento);  ; /* COMPLETA: utiliza la variable de acento */
  color:var(--color-arternativo); /* COMPLETA */
  padding:12px 24px ; /* COMPLETA */
  border-radius:var(--radio) ; /* COMPLETA: utiliza la variable de radio */
  font-weight:bold; /* COMPLETA */
  transition: transform 0.2s ease;
  /* Suaviza el cambio de posición aplicado en :hover. */
}

.boton:hover{
  transform: translateY(-2px);
  /* Desplaza el botón dos píxeles hacia arriba para dar una
     respuesta visual sencilla al pasar el cursor. */
}


/* =====================================================
   6. SECCIONES GENERALES
   El selector :not(#inicio) aplica la regla a todas las
   secciones de main excepto a la portada.
   ===================================================== */

main section:not(#inicio){
  padding:10px; /* COMPLETA */
}

main section:not(#inicio) .contenedor{
  display:flex; /* COMPLETA: usa Flexbox */
  flex-direction:column; /* COMPLETA: organiza el contenido verticalmente */
}

h2{
  margin: 0 0 28px;
  font-size:40px ; /* COMPLETA */
  line-height: 1.2; /* Mantiene legibles los títulos de sección. */
  color:var(--color-principal); /* COMPLETA: utiliza una variable */
}

#experiencias h2,
#contacto h2{
  text-align:center; /* COMPLETA */
}


/* =====================================================
   7. TARJETAS
   ===================================================== */

.tarjetas{
  display:flex; /* COMPLETA: usa Flexbox */
  flex-direction:row; /* COMPLETA */
  align-items: stretch; /* COMPLETA: permite igualar alturas */
  gap:20px; /* COMPLETA */
}

.tarjetas article{
  flex: 1;
  /* Cada tarjeta recibe la misma parte del espacio disponible.
     No es necesario utilizar width: 33.33%. */

  background-color:var(--color-arternativo) ; /* COMPLETA: utiliza una variable */
  border:1px solid var(--color-acento) ; /* COMPLETA: combina grosor, estilo y variable de color */
  border-radius: var(--radio); /* COMPLETA: utiliza la variable de radio */
  padding:20px ; /* COMPLETA */
}

.tarjetas h3{
  margin: 0 0 12px;
  color:var(--color-principal) ; /* COMPLETA: utiliza una variable */
  font-size:21px; /* COMPLETA */
}

.tarjetas p{
  margin: 0;
  color:var(--color-principal) ; /* COMPLETA: utiliza una variable */
}


/* =====================================================
   8. NOSOTROS Y CONTACTO
   ===================================================== */

#nosotros{
  background-color:var(--color-fondo) ; /* COMPLETA: utiliza una variable */
}

#nosotros .contenedor{
  max-width: 800px;
  /* Limita la longitud de las líneas para facilitar la lectura. */
}

#nosotros p{
  margin:0 16px;
}

#contacto{
  background-color:var(--color-alternativo) ; /* COMPLETA: utiliza una variable */
  text-align:center; /* COMPLETA */
  padding-bottom: 10px;
  
}

#contacto .contenedor{
  align-items:center; /* COMPLETA: centra sus elementos en el eje transversal */
}

#contacto p{
  max-width: 650px;
  margin: 0 0 24px;
  color:var(--color-principal) ; /* COMPLETA: utiliza una variable */
}


/* =====================================================
   9. PIE DE PÁGINA
   ===================================================== */

footer{
  background-color:var(--color-principal); /* COMPLETA: utiliza una variable */
  color:var(--color-alternativo); /* COMPLETA */
  padding:25px 0 ; /* COMPLETA */
}

footer .contenedor{
  display:flex; /* COMPLETA: usa Flexbox */
  justify-content:center; /* COMPLETA */
  align-items:center; /* COMPLETA */
  text-align:center ; /* COMPLETA */
}

footer p{
  margin: 0;
}


/* =====================================================
   10. VERSIÓN MÓVIL

   La media query aplica estas reglas cuando la ventana mide
   768 px o menos. Solo cambia la dirección de los elementos;
   no utiliza Grid ni crea una estructura nueva.
   ===================================================== */

@media (max-width: 768px){

  header .contenedor{
    flex-direction:column; /* COMPLETA: coloca marca y menú en vertical */
  }

  nav ul{
    justify-content:center; /* COMPLETA: centra el menú */
  }

  #inicio{
    padding:20px; /* COMPLETA: reduce el espacio de la portada */
  }

  #inicio .contenedor{
    flex-direction:column; /* COMPLETA: apila texto e imagen */
  }

  .tarjetas{
    flex-direction:column; /* COMPLETA: apila las tarjetas */
  }

  h1{
    font-size:64px; /* COMPLETA: reduce el título principal */
  }
}