/* =========================================================
   🎨 PRÁCTICA – Hero fluido
   Objetivo: aplicar variables (tokens), modo oscuro, medidas 
   fluidas y principios básicos de diseño coherente.
   ========================================================= */


 /* ========================
   🎯 VARIABLES (TOKENS)
   Define variables para:
   - color de fondo
   - color de texto
   - color destacado (acento)
   - anchura máxima del contenedor
   ======================== */

 :root {
   --color-bg: #ffffff;
   --color-text: #111111;
   --color-primary: #0055ff;
   --color-acento: (var(--color-primary))
 }

 /* ========================
  🌙 MODO OSCURO AUTOMÁTICO
  Sobrescribe las variables cuando el usuario
  tenga activado el modo oscuro en el sistema.
  ======================== */
 @media (prefers-color-scheme: dark) {
   :root {
     --color-bg: #121212;
     --color-text: #f0f0f0;
     --color-primary: #4d8dff;
     --color-acento: (var(--color-primary))
   }
 }

 /* -------------------------
  BODY
  - Usa una tipografía del sistema (system-ui) font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  - Aplica color de fondo y color de texto

  ------------------------- */

 body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   background-color: var(--color-bg);
   color: var(--color-text);
   margin: 0;
 }

 a {
   color: var(--color-primary);
   text-decoration: none;
 }

 /* -------------------------
  CABECERA
    - Padding vertical de 1rem
  - Texto centrado horizontalmente
  - Tamaño de fuente 
  - Color de texto destacado    
  ------------------------- */
 .header {
   padding-block: 1rem;
   text-align: center;
   font-size: 1.2;
   --color: var(--color-primary)
 }

 /* -------------------------
  CONTENEDOR PRINCIPAL
    - Anchura del 90%
  - Máximo ancho definido por variable
  - Centrado horizontal
  ------------------------- */
 .container {
   width: 90%;
   max-width: var(--anchura-max);
   margin-inline: auto;
   text-align: center;
 }

 /* =========================================================
  🦸‍♀️ SECCIÓN HERO
  ========================================================= */

 /* -------------------------
  SECCIÓN HERO
  - Padding fluido: mínimo 1rem, preferido 5vw, máximo 4rem
  - Texto centrado
  ------------------------- */
 .hero {
   padding: clamp(1rem, 5vw, 4rem);
   text-align: center;
   font-size: clamp(1rem, 2.5vw, 1.5rem);
   line-height: 1.5;
   background-color: color-mix(in srgb, var(--color-text) 5%, transparent);
 }

 /* -------------------------
  TÍTULO DEL HERO
  - Márgenes 0 excepto inferior (0.5rem)
  - Tamaño de fuente fluido: min 2rem, pref 5vw, max 4rem
  - Ajusta interlineado y espaciado entre letras
  ------------------------- */
 .hero_title {
   margin: 0 0 0.5rem 0;
   font-size: clamp(2rem, 5vw, 4rem);
   line-height: 1.2;
   letter-spacing: 0.5px;
 }

 /* -------------------------
  SUBTÍTULO DEL HERO
  - Anchura máxima para limitar líneas
  - Centrado horizontal del bloque
  - Tamaño de fuente fluido: min 1rem, pref 2.5vw, max 1.5rem
  - Color
  ------------------------- */
 .hero_subtitle {
   max-width: 60ch;
   margin-inline: auto;
   font-size: clamp(1rem, 2. 5vw, 1.5rem);
   opacity: 0.85;
 }

 .hero__cta {
   display: inline-block;
   margin-top: 2rem;
   padding: 0.75rem 1.5rem;
   background-color: var(--color-primary);
   color: #fff;
   border-radius: 0.5em;
   font-weight: 600;
   text-decoration: none;
   transition: 0.2s;
 }

 .hero__cta:hover {
   transform: translateY(-3px);
   filter: brightness(1.1);
 }


 /* -------------------------
  BOTÓN DE ACCIÓN
  - Margen superior para separarlo del texto
  - Color de fondo
  - color de texto (con contraste alto)
  - Sin subrayado text-decoration
  - Bordes redondeados
  - Padding fluido: más horizontal que vertical
  - Peso de fuente (grosor) 600 font-weight:
  ------------------------- */