/*
Orbital Foundations
Version: 1.0.0
Text Domain: orbital
*/

/* Variables */

:root {
  color-scheme: light;

  /* Colores https://colourcontrast.cc/ */
  --color-background-primary: hsla(0,0%,100%,1);
  --color-background-inverse: hsla(0,0%,0%,1);
  --color-border: hsla(0,0%,80%,1);
  --color-brand: hsla(0,50%,60%,1);
  --color-selection: var(--color-brand);
  --color-text-primary: hsla(0,0%,0%,1);
  --color-text-secondary: hsla(0,0%,40%,1);
  --color-text-inverse: hsla(0,0%,100%,1);
  --color-interaction-primary: hsla(0,0%,0%,1);
  --color-underline: var(--color-brand);
  --color-interaction-hover: var(--color-brand);

  /* Tipografia */
  --family-primary: "Space Grotesk", 'SF Pro Text', 'SF UI Text', 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --family-secondary: "Space Mono", monospace;

  /* Bases tipográfica*/
  --font-size-base: 16px; /* No lo he usado por ahora */

  /* Escala de texto */
  --font-size-s: 0.875rem;  /* 14px */
  --font-size-m: 1rem;      /* 16px */
  --font-size-l: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;   /* 24px */
  --font-size-xxl: 2rem;    /* 32px */

  /* Altura de lineas */
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-small:1.4;

  /* Escala de espaciado */
  --space-xs: 0.25rem;  /* 4px */
  --space-s: 0.5rem;    /* 8px */
  --space-m: 1rem;      /* 16px */
  --space-l: 1.5rem;    /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-xxl: 2.5rem;   /* 40px */
  --space-xxxl: 3rem;    /* 48px */

  /* Pesos tipográficos */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Escala tipográfica fluida (móvil → desktop) */
  --step--1: clamp(0.875rem, 0.10vw + 0.85rem, 0.95rem);   /* captions / small */
  --step-0:  clamp(1rem, 0.25vw + 0.9rem, 1.125rem);       /* cuerpo base */
  --step-1:  clamp(1.125rem, 0.35vw + 0.95rem, 1.25rem);   /* subtítulo pequeño */
  --step-2:  clamp(1.25rem, 0.5vw + 1rem, 1.5rem);         /* subtítulo / h5 */
  --step-3:  clamp(1.5rem, 0.8vw + 1.05rem, 1.75rem);      /* h4 */
  --step-4:  clamp(1.75rem, 1.1vw + 1.1rem, 2rem);         /* h3 */
  --step-5:  clamp(2rem, 1.4vw + 1.2rem, 2.5rem);          /* h2 */
  --step-6:  clamp(2.5rem, 2vw + 1.2rem, 3.5rem);          /* h1 / hero */
}

/*
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-background-primary: hsla(0 0% 7%, 1);
    --color-text-primary: hsla(0 0% 98%, 1);
  }
} */

/* Estructuras */

html, body { height: 100%; margin: 0; }

.orbital-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "Header"
    "Main"
    "Aside"    
    "Footer";
  gap: 0;
}
.orbital-container-home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "Header"
    "Aside"
    "Main"    
    "Footer";
  gap: 0;
}
.orbital-aside { grid-area: Aside;}
.orbital-header { grid-area: Header;}
.orbital-main { grid-area: Main;}
.orbital-footer { grid-area: Footer;}

.orbital-container,
.orbital-container-home {
  min-height: 100vh; /* Fallback para navegadores que no soportan svh */
  min-height: 100svh;
  margin: 0;
}
.orbital-header {
  padding:var(--space-m) var(--space-xl);
} 
.orbital-main{
  padding: var(--space-xxxl) var(--space-xl) var(--space-xxl) var(--space-xl);
}
.orbital-footer,
.orbital-aside {
  padding: var(--space-xxl) var(--space-xl);
}
@media (min-width: 768px) {
  .orbital-container-home {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "Header Header Header"
      "Aside Main Main"
      "Aside Footer Footer";
  }
  .orbital-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "Header Header Header"
      "Main Main Aside"
      "Footer Footer Aside";
  }
}
@media (min-width: 1200px) {
  .orbital-container-home {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-auto-flow: row;
    grid-template-areas:
      "Header Header"
      "Aside Main"
      "Aside Footer";
  }
  .orbital-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-auto-flow: row;
    grid-template-areas:
      "Header Header"
      "Main Aside"
      "Footer Aside";
  }
}

/* Estilos globales */

html {
  font-size: var(--font-size-base);
}
body {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--family-primary);
  font-size: var(--step-0);
  font-weight: var(--font-weight-regular);
  font-optical-sizing: auto;
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--family-primary);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-l) 0;
  color: var(--color-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
  margin-bottom: var(--space-xl);
  letter-spacing: 0.005em; /* Detalle visual para Space Grotesk */
}
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-4); }
h4 { font-size: var(--step-3); }
h5 { font-size: var(--step-2); }
h6 { font-size: var(--step-1); }

h1 strong,
h2 strong,
h3 strong { font-weight: var(--font-weight-bold); }

p, blockquote, figcaption {
  font-size: var(--step-0);
  margin-bottom: var(--space-l);
  text-wrap: pretty;
}

small, .small {
  font-size: var(--step--1);
  line-height: var(--lh-small);
  color: var(--color-text-secondary);
}

.lead { /* Lead o párrafo introductorio */
  font-size: var(--step-1);
  line-height: calc(var(--lh-body) * 1.05);
  margin-bottom: var(--space-xl);
  color: var(--color-text-primary);
}

a {
  font-size: var(--step-0);
  color: var(--color-text-primary);
  transition: color .3s ease, background-color .3s ease;
  text-decoration:none;
  border-bottom: 1px solid var(--color-underline);
}
a:hover {
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
}
a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
::selection {
  background-color: var(--color-selection);
  color: var(--color-text-inverse);
}

/*
Tontera
Basada en The Hidden Ghost https://codepen.io/Megafry/pen/LEGQWzL
*/

.marsonauta { 
  display:none;
}

@media (min-width: 768px) {
  .marsonauta {
    display: inline-block;
    height: 200vh;
    background: 
      repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
      60% 60%/3000px 3000px,
      repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
      40% 40%/3000px 3000px;
    background-blend-mode: difference;
    width: 33%;
    height: 100vh;
    margin: 60px auto 0 0; /* Los 60px son para que no pise el header */
    left:0;
    position: fixed;
    inset: 0;
    background-clip: text;
    color: transparent;
    text-align: center;
    font-size: clamp(8rem, 19vw, 12rem);
    line-height: 100vh;
  }
  .marsonauta span{
    display:none;
  }
}

@media (min-width: 1200px) {
  .marsonauta {
    width: 50%;
  }
  .marsonauta span{
    display:inline-block
  }
}