/* =============================================================
   Archivo: styles.css
   Descripción: Estilos globales + Sección “Brand Comparison”.
   Todos los comentarios añadidos son documentativos.
============================================================= */
*, *::before, *::after {
    /* Reset universal: elimina márgenes/paddings por defecto y
       activa el modelo de caja border-box para cálculo predecible. */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables CSS globales:
   - Tipografías base
   - Colores
   - Espaciados
   Sirven para mantener consistencia y facilitar cambios. */
:root {
    --font-base: arial;
    --font-heading: var(--font-base);
    --color-bg: #f4f4f4;
    --color-text: #333;
    --font-size-h1: 2rem;
    --spacing-base: 1rem;


/* Variables de breakpoints y escala tipográfica para diseño fluido */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-scale-min: 0.875rem;
    --font-scale-max: 1rem;
}

/* Tipografía fluida: el tamaño base de fuente se ajusta entre
   0.875 rem y 1 rem según el ancho de viewport (1.2 vw factor). */
html {
    font-size: clamp(var(--font-scale-min), 1.2vw, var(--font-scale-max));
}

/* Cuerpo: tipografía y color base */
body {
    font-family: var(--font-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Header hero: altura completa, centrado flex y color de fondo
   heredado de variable --color-bg */
header{
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg);
    /* Transición suave para que el cambio de altura
       y la aparición de la sombra no sean bruscos */
    transition: height .5s ease, box-shadow .2s ease;
}

/* Estado compacto: se fija arriba como header */
header.compact{
    position: fixed;
    top:0;
    left:0;
    right:0;
    height: 42px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    z-index: 999;
}
header.compact .brand{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

header.compact #main-nav{
    position: absolute;
    right: 2rem;
}
header.compact .brand{
    z-index: 1000;               /* logo por encima de todo */
}
/* ======> NAVS en modo compacto <====== */
header.compact #main-nav,
header.compact #main-nav1{
    bottom: auto;
    top: 8.8px;
    left: auto;
    transform: none;
    width: auto;        /* sólo lo que ocupa la lista */
}

/* Empuja #main-nav1 al extremo derecho */
.brand{
    font-family: var(--font-heading);
    /* clamp(min, vw, max) = tipografía fluida:
       - 2 rem mínimo en móviles
       - 6 vw escala con pantalla
       - 5 rem tope en desktop grande */
    font-size: clamp(1rem,6vw,9rem);
    margin:0;
    transition: font-size .3s ease;
}
/* --- Partes del logotipo --- */
.createdby{
    font-style: italic;       /* cursiva ligera */
    font-weight: 100;         /* delgado (usa 100-400 según tu fuente) */
    font-size: 0.6em;      /* tamaño relativo al texto padre */
    vertical-align: 0px; /* lo eleva ligeramente */
}

.ads{
    font-style: normal;       /* quita cursiva */
    font-weight: 700;         /* ancho/negrita */
}

.tm{
    font-size: 0.55em;      /* tamaño relativo al texto padre   */
    vertical-align: super;  /* lo convierte en superíndice       */
    margin-left: 0.1em;     /* separación del texto principal    */
    font-style: italic;       /* cursiva ligera */
    font-weight: 100;         /* delgado (usa 100-400 según tu fuente) */
}
.brand a{
    text-decoration: none;   /* sin subrayado */
    color: inherit;          /* mismo color que el texto padre */
}

.brand a:visited{
    color: inherit;          /* evita el morado de link visitado */
}

.brand a:hover,
 .espacio{
        padding: 0px 20px;
      }
header.compact .brand{
    font-size: 1.5rem;
}

#main-nav{
    position: absolute;
    left: -220%;
    transform: translateX(200%);
    bottom: 0.5rem;
    display: flex;
    justify-content: center;
    width: 100%;  
}
#main-nav1{
    position: absolute;
    left: 68%;
    transform: translateX(-30%);
    bottom: 0.5rem;
    display: flex;
    justify-content: center;
    /* Oculto por defecto, se muestra al hacer scroll */
    width: auto;
}



.nav-list{
    list-style:none;
    display:flex;
    gap:2rem;
    padding:0px 0px;
    margin:0;
    font-weight:600;
}

.nav-list a{
    text-decoration:none;
    color: inherit;
}

/* Encabezado gigante con clamp para responsividad */
h1 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-size: clamp(2rem, 10vw, 8rem);
    margin: 0;
    text-align: center;
}

/* Utilidades atómicas (mini Tailwind): alineación, márgenes, padding, font-size */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-base); }
.mb-1 { margin-bottom: var(--spacing-base); }
.p-1 { padding: var(--spacing-base); }
.fs-sm { font-size: 0.875rem; }
.fs-md { font-size: 1rem; }
.fs-lg { font-size: 1.25rem; }

/* Color utility classes */

/* Container for centered content */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-base);
    padding-right: var(--spacing-base);
    width: 100%;
}

/* Responsive image reset */
img, picture {
    max-width: 100%;
    display: block;
}

/* Dark mode: invierte fondo y texto si el usuario prefiere esquema oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #121212;
        --color-text: #e0e0e0;
    }
}
@media (max-width: 576px) {
    /* Ajustes para móviles */
    header.compact {
        height: 56px; /* altura reducida en móviles */
        padding: 0 1rem; /* menos padding */
    }
    header.compact .brand {
        font-size: 1.25rem; /* tamaño más pequeño en móviles */
    }
    .brand {
        font-size: 1.2rem; /* tamaño más pequeño en móviles */
    }
}
/* === Brand Comparison Section ===
   Espaciado vertical extra para separar de otros bloques */
#brand-compare{
    /* vertical rhythm */
    padding-block: calc(var(--spacing-base) * 4);
}

#brand-compare h2{
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: calc(var(--spacing-base) * 2);
}

/* ------------------------------------------------------------------ */
/* #brand-compare-container                                           */
/* ------------------------------------------------------------------ */
/* Este contenedor usa CSS Grid.                                      */
/* - Por defecto (móviles): 1 columna (se apilan verticalmente).      */
/* - Tablets medianos (≥500 px): 2 columnas.                          */
/* - Escritorio (≥768 px): 3 columnas.                                */
/* Cambia los valores de los breakpoints si tu diseño lo requiere.    */
/* ------------------------------------------------------------------ */
#brand-compare-container{
    display: grid;
    gap: calc(var(--spacing-base) * 2);
    /* 1 columna por defecto */
    grid-template-columns: 1fr;
}

/* 2‑column grid en tablets */
@media (min-width: 500px) and (max-width: 767px){
    #brand-compare-container{
        /* 2 columnas de igual ancho */
        grid-template-columns: repeat(1, 1fr);
    }
}

/* 3‑column grid en desktop */
@media (min-width: 768px){
    #brand-compare-container{
        /* 3 columnas de igual ancho */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tarjeta individual: radio, sombra, padding y transición */
.brand-card{
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    padding: calc(var(--spacing-base) * 2);
    transition: transform .3s ease, box-shadow .3s ease;
    cursor: pointer;
}

.brand-card:hover{
    /* Al pasar el mouse, contraemos la tarjeta un 3 % en vez de desplazarla. */
    transform: scale(0.97);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

.brand-name{
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: .25rem;
}

.brand-idea{
    color: var(--color-text);
    opacity: .8;
    font-size: .875rem;
}

.brand-phrase{
    margin-top: .75rem;
    font-style: italic;
}

/* Utility helpers for this section (mini‑Tailwind) */
.grid{ display:grid; }
.gap-6{ gap: calc(var(--spacing-base) * 2); }
.text-primary{ color:#db0000; } /* ajusta a tu paleta */

@media (prefers-color-scheme: dark) {
    .text-primary{ color: #ffcc00; } /* tono más oscuro en dark mode */
}

.text-secondary{ color:#a60000; } /* ajusta a tu paleta */

@media (prefers-color-scheme: dark) {
    .text-secondary{ color: #e5aa09; } /* tono más oscuro en dark mode */
}
a.text-primary,
a.text-primary:visited{ color:#db0000; }

a.text-secondary,
a.text-secondary:visited{ color:#a60000; }

@media (prefers-color-scheme: dark){
  a.text-primary,
  a.text-primary:visited{ color:#ffcc00; }
  a.text-secondary,
  a.text-secondary:visited{ color:#e5aa09; }
}

@media (min-width: var(--breakpoint-md)){
    .md-grid-3
{ grid-template-columns: repeat(3,1fr); }
}

/* Dark‑mode tweaks */
@media (prefers-color-scheme: dark) {
    .brand-card{ background:#1e1e1e; }
}
.spaced{
    margin-top: 18rem;
}
/* Ajuste para que el ancla quede visible bajo el header fijo */
#start{
    scroll-margin-top: 20rem;   /* igual o mayor que tu header compacto */
}
#start2{
    scroll-margin-top: 61rem;   /* igual o mayor que tu header compacto */
}
#mision{
    scroll-margin-top: 60px;   /* igual o mayor que tu header compacto */
}
#mision2{
    scroll-margin-top: 750px;   /* igual o mayor que tu header compacto */
}
.contenedor {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* espaciado uniforme entre hijos */
  }

/* ===== Responsive (≤576 px) =================================== */
/* (bloque hamburger/mobile menu eliminado) */

/* hamburger button hidden on desktop */

/* ====================== Fin de styles.css ====================== */