/* ==========================
   PLANTILLA CSS CONVERTIDA
   ==========================
   Archivo CSS listo para usar.
   Los comentarios explican qué hace cada bloque.
*/

/* === 1. RESET / CONFIGURACIÓN GLOBAL === */
* {
  margin: 0;               /* Elimina márgenes predeterminados */
  padding: 0;              /* Elimina rellenos predeterminados */
  box-sizing: border-box;  /* Incluye padding y borde en el tamaño total */
}

/* === 2. CONFIGURACIÓN DEL BODY === */
body {
  font-family: Arial, Helvetica, sans-serif; /* Fuente principal */
  background-color: #f5f5f5; /* Color de fondo general */
  color: #333;              /* Color del texto */
  line-height: 1.5;         /* Altura de línea legible */
}

/* === 3. CABECERA === */
header {
  background-color: #333; /* Fondo oscuro */
  color: white;           /* Texto en blanco */
  padding: 20px;          /* Espaciado interno */
  text-align: center;     /* Centra el texto */
  border-bottom: 5px solid #555; /* Línea decorativa inferior */
}

/* === 4. TEXTOS / TITULOS / PÁRRAFOS === */
h1 {
  font-size: 2.5em;       /* Tamaño grande */
  text-transform: uppercase; /* Todo en mayúsculas */
  margin-bottom: 0.5em;
}

p {
  font-size: 1.1em;       /* Tamaño moderado */
  text-indent: 30px;      /* Sangría en la primera línea */
  margin-bottom: 15px;    /* Separación entre párrafos */
}

/* === 5. CONTENEDORES GENERALES === */
.container {
  width: 80%;             /* Ancho del contenido */
  margin: 0 auto;         /* Centrado en la página */
  padding: 20px;          /* Espaciado interno */
  background-color: #fff; /* Fondo interno */
  border-radius: 10px;    /* Bordes redondeados */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* === 6. FLEXBOX (clase base) === */
.flex {
  display: flex;          /* Activa Flexbox */
  justify-content: space-between; /* Distribuye elementos con espacio */
  align-items: center;    /* Alineación vertical */
  flex-wrap: wrap;        /* Permite saltar de línea si no cabe */
}

/* Variantes útiles (comentadas) */
/* .flex-column { flex-direction: column; } */
/* .flex-center { justify-content: center; align-items: center; } */

/* === 7. GRID BÁSICO === */
.grid-container {
  display: grid;                          /* Activa CSS Grid */
  grid-template-columns: repeat(3, 1fr);  /* Tres columnas iguales */
  gap: 20px;                              /* Espaciado entre celdas */
}

/* === 8. IMÁGENES === */
img {
  max-width: 100%;     /* Evita desbordes */
  height: auto;
  display: block;
  border-radius: 10px; /* Bordes redondeados */
}

img.logo {
  width: 150px;        /* Tamaño fijo para logo */
  border: 3px solid #ccc; /* Borde decorativo */
}

/* === 9. BOTONES === */
button,
.btn {
  background-color: #4CAF50; /* Verde principal */
  color: white;              /* Texto blanco */
  padding: 10px 20px;        /* Espaciado */
  border: none;              /* Sin borde */
  border-radius: 8px;        /* Bordes redondeados */
  cursor: pointer;           /* Cambia el cursor */
  transition: background-color 0.3s ease, transform 0.15s ease;
}

button:hover,
.btn:hover {
  background-color: #45a049; /* Color al pasar el ratón */
  transform: translateY(-2px);
}

/* === 10. TARJETAS O BLOQUES === */
.card {
  background: #fff;          /* Fondo */
  border: 1px solid #ddd;    /* Borde */
  border-radius: 10px;       /* Bordes redondeados */
  padding: 20px;             /* Interior */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra */
}

/* === 11. TABLAS === */
table {
  width: 100%;               /* Ocupa todo el ancho */
  border-collapse: collapse; /* Une las líneas */
}

th, td {
  border: 1px solid #ccc;    /* Bordes de celdas */
  padding: 10px;             /* Espaciado */
  text-align: left;
}

th {
  background-color: #333;
  color: white;              /* Encabezado de tabla */
}

/* === 12. FOOTER === */
footer {
  background-color: #222;    /* Fondo oscuro */
  color: white;
  padding: 15px;
  text-align: center;
  border-top: 5px solid #444; /* Línea decorativa */
}

/* === 13. MEDIA QUERIES (RESPONSIVE) === */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
  }
  .container {
    width: 92%;
  }
}

@media (max-width: 768px) {
  .container {
    width: 95%;              /* Más ancho en pantallas pequeñas */
    padding: 15px;
  }

  .flex {
    flex-direction: column;  /* Cambia a vertical en móviles */
    align-items: stretch;
  }

  h1 {
    font-size: 2em;
  }
}

/* === 14. ANIMACIONES === */
.box {
  animation: mover 3s infinite; /* Ejecuta la animación */
}

@keyframes mover {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

/* ==========================
   FIN DEL ARCHIVO
   ========================== */