/* Importar solo los pesos necesarios de Figtree */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;800&display=swap');

/* ============================================
   VARIABLES GLOBALES
   ============================================ */
:root {
  /* Tipografía */
  --font-family: 'Figtree', sans-serif;
  --font-weight-normal: 600;
  --font-weight-bold: 800;
  
  /* Colores */
  --color-background: rgb(0, 0, 0);
  --color-text: rgb(255, 0, 0);
  
  /* Tamaños de fuente */
  --font-size-small: 1em;
  --font-size-large: 2em;
  
  /* Espaciado */
  --spacing-small: 10px;
  --spacing-medium: 20px;
}

/* Reset general */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   VIDEO DE FONDO
   ============================================ */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* ============================================
   BODY
   ============================================ */
body {
  background: transparent;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  min-height: 100vh;
  width: 100vw;

  display: grid;
  grid-template-rows: auto 1fr auto; /* header - centro - footer */
  grid-template-columns: 1fr;
  padding: var(--spacing-medium);
  position: relative;
}

/* ============================================
   CLASES DE TEXTO
   ============================================ */
.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-normal);
}

.text-small-bold {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.text-large-bold {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
}

/* ============================================
   LAYOUT SUPERIOR
   ============================================ */
.superior {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.superior-principal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-start;
  gap: var(--spacing-medium);
}

.superior-izquierda {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-medium);
  align-items: flex-start;
}

.superior-centro {
  text-align: center;
}

.superior-derecha {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-medium);
}

.superior-derecha > div:first-child {
  text-align: left;
}

.superior-derecha .derecha-derecha {
  text-align: right;
}

/* ============================================
   FOOTER
   ============================================ */
.inferior {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  box-sizing: border-box;
  position: fixed;
  bottom: var(--spacing-medium);
  left: var(--spacing-medium);
  right: var(--spacing-medium);
}

.inferior-esquinas {
  display: flex;
  justify-content: space-between;
}

.inferior-frase {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* ============================================
   ZONA CENTRAL
   ============================================ */
.centro {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  text-align: center;
}

/* ============================================
   ENLACES PERSONALIZADOS
   ============================================ */
.extra a,
.derecha-derecha a {
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.extra a:hover,
.derecha-derecha a:hover {
  color: rgb(240, 230, 243);
}
.logo-pica2 {
  max-width: 28vw;   /* se ajusta al ancho de la pantalla */
  height: auto;      /* mantiene proporción */
  padding-bottom: 1em;
}

/*.logo-pica2 {
  width: 1000px;   
  height: auto;   
}

.logo-pica2 {
  max-width: 100vw;   
  max-height: 100vh;  
  width: auto;        
  height: auto;     
  object-fit: contain; 
} */
.logo-p2 {
  width: 35px;   /* 👈 Aquí controlas el ancho */
  height: auto;  /* Mantiene proporción */
}

/* ============================================
   ADAPTACIÓN MÓVIL
   ============================================ */
@media (max-width: 768px) {
  .superior-principal {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    gap: var(--spacing-medium);
    width: 100%;
  }

  .superior-centro {
    display: none;
  }

  .superior-izquierda,
  .superior-derecha {
    display: flex;
    flex-direction: row;  
    justify-content: space-between;
    width: 100%;



  }
  /* Alinear a la derecha solo los enlaces en móvil */
.superior-izquierda .extra {
  text-align: right;
  align-items: flex-end;
}

  .superior-izquierda > div,
  .superior-derecha > div {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
    gap: 5px; 
  }

  .text-small {
    font-size: 0.9em;
  }

  .text-large-bold {
    font-size: 1.5em;
  }

  .inferior-frase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  
    gap: 1px; 
    padding-bottom: 3em;
  }

  .centro {
    margin-top: -100px;
  }
}