/* =========================================================
   🎨 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-fondo: rgba(234, 234, 234, 0.53);
    --color-fondo2: rgba(128, 128, 128, 0.141);
    --color-text: black;
    --color-primary: rgb(55, 0, 119);
    --width-max: 1320px;
    --color-text2: orange;
   }

   /* ========================
  🌙 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-fondo: rgb(0, 0, 0);
        --color-fondo2: rgba(75, 75, 75, 0.298);
        --color-text: rgb(0, 213, 255);
        --color-primary: rgb(255, 145, 0);
        --width-max: 1320px;
        --color-text2: rgb(13, 0, 255);
     }
   }
  /* =========================================================
  🧱 ESTRUCTURA GLOBAL
  ========================================================= */
   /* -------------------------
  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{
    background-color: var(--color-fondo);
    color: var(--color-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    
  }


 /* -------------------------
  CABECERA
    - Padding vertical de 1rem
  - Texto centrado horizontalmente
  - Tamaño de fuente 
  - Color de texto destacado    
  ------------------------- */
header{
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bolder;
  color: var(--color-primary);
}
    
 /* -------------------------
  CONTENEDOR PRINCIPAL
    - Anchura del 90%
  - Máximo ancho definido por variable
  - Centrado horizontal
  ------------------------- */
  .container{
    width: 90%;
    max-width: var(--width-max);
    margin-inline: auto;
}

   
  /* =========================================================
  🦸‍♀️ 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;
    line-height: 1.2;
    background-color: var(--color-fondo2);
  }


/* -------------------------
  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.1;
    letter-spacing: 2px;
    text-shadow:0px 5px 50px rgb(255, 255, 255);
  }

/* -------------------------
  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: clamp(45ch, 60ch, 755ch);
    margin: 1.6rem auto;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--color-text);
    padding: 1rem;
  }


  /* -------------------------
  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:
  ------------------------- */ 
  
  .hero__cta{
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary);
    color: var(--color-text2);
    text-decoration: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: 600
  }

  .hero__cta:hover{
    background-color: var(--color-text);
    color: var(--color-text2);
    
  }

  .hero__cta:focus{
    text-decoration: underline;
    transition-duration: 0.5s;
    background-color: rgba(255, 0, 0, 0.534);
    color: var(--color-primary);
    filter: brightness(3);
  }

  .cambio{
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--color-primary);
    color: var(--color-text2);
    text-decoration: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: 600;
    box-shadow:currentColor 0px 15px 25px 5px;
  }

  .cambio:hover{
    text-decoration: underline;
    transition-duration: 1s;
    transform: translateX(0.6rem);
 
  }

  .cambio:focus{
    border-style: none double none double;
    transition-duration: 0.5s;
    background-color: hwb(300 0% 70%);
    color: var(--color-primary);
    filter: brightness(1.5);
  }