/* ============================================================
   RESUMEN GENERAL – CÓMO FUNCIONA HTML + CSS (VERSIÓN PARA CSS)
   ============================================================ */

/* 
   1. ESTRUCTURA TIPO “MATRIOSKA”
   --------------------------------
   El HTML funciona como cajas dentro de cajas:
   body -> articles -> sections -> img/p/h1-6 -> etc.

   Cada elemento es padre de los que contiene.
   Los estilos de un padre pueden afectar a sus hijos.
*/


/* 
   2. FLEXBOX (display:flex y flex-wrap)
   ---------------------------------------
   Los estilos flex SOLO afectan a los HIJOS DIRECTOS
   del elemento al que se los aplicamos.

   Ejemplo:
   article {
     display: flex;
     flex-wrap: wrap;
   }

   ➜ Esto organiza p, img, section… que están dentro del article.

   Flexbox depende también de:
   - flex-direction
   - justify-content
   - align-items
   - flex-wrap
   - width (muy importante para colocar elementos)
*/


/* 
   3. WIDTH – LO MÁS IMPORTANTE PARA ORGANIZAR
   ---------------------------------------------
   El width decide si un elemento va en una línea completa
   o comparte línea con otros.

   Ejemplos:
   - h1 que debe ocupar toda la línea:
       h1 { width: 100%; }

   - Imagen y texto en la misma línea:
       img { width: 30%; }
       section { width: 68%; }

   Si el width no cabe, flex-wrap lo saltará a la siguiente línea.
*/


/* 
   4. ESTILOS GENERALES vs. ESTILOS ESPECÍFICOS
   ----------------------------------------------
   • Estilos globales: afectan a todos los elementos del mismo tipo
     p { ... }

   • Estilos específicos: se usa una ruta o selector concreto
     article:nth-of-type(2) > section > p { ... }

   Los estilos más específicos siempre ganan.
*/


/* 
   5. CUANDO TODO ES IGUAL MENOS UN ELEMENTO
   -------------------------------------------
   Primero defines el estilo general:
      p { ... }

   Luego personalizas el caso concreto:
      article:nth-of-type(3) p:last-of-type { ... }

   Esto sobrescribe el general sin afectarlo.
*/


/* 
   6. RESUMEN ÚLTIMO
   -------------------
   - El HTML es una estructura jerárquica (matrioska).
   - Flexbox organiza SOLO a los hijos del elemento con display:flex.
   - El width controla qué va en cada línea.
   - Se aplican estilos generales y luego se sobrescriben con los específicos.
   - Es cuestión de “jugar” con el ancho y la jerarquía.
*/