@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,0..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400..700,0..1,0..200');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');       

*,
*::before,
*::after {
    box-sizing: border-box;
}
:root {
    /* Tamaño base */
    --font-size-base: 16px;   
    --font-big-special: clamp(2rem, 5vw, 4rem); 
    --font-special: clamp(1.9rem, 5vw, 3.5rem); 
    --font-med-special: clamp(1.5rem, 2vw, 2.5rem); 
    
    --space-unit: 0.5rem; /* 8px base */    
    /* Escala  */
    --space-xxs:  calc(var(--space-unit) * 1);  /* 8px */
    --space-xs:   calc(var(--space-unit) * 2);   /* 16px */
    --space-sm:   calc(var(--space-unit) * 3);   /* 24px */
    --space-md:   calc(var(--space-unit) * 4);   /* 32px */
    --space-lg:   calc(var(--space-unit) * 6);   /* 48px */
    --space-xl:   calc(var(--space-unit) * 8);   /* 64px */
    --space-xxl:   calc(var(--space-unit) * 10);   /* 80px */
    --space-2xl:   calc(var(--space-unit) * 10 * 2);   /* 160px */    
    
    /* Colores */
    --color-primary: #dcd7d7;
    --color-secondary: #19191c;

    /**todo: change greys 1-2-3*/
    
    --color-grey-0: #f4f4f4;
    --color-grey-1:  #bbbbbb;   
    --color-grey-2: #959595;
    --color-grey-3:#828282;
    --color-grey-4: #403d36;    
    --color-grey-5:#232323;

    --color-blue-black:#0a0a0f;
    /*orange*/
    --color-soft-orange-grey:#be8d4e;
    --color-orange:#e2a755;
    --color-sat-orange:#796337;
    --vibe-orange:#eb9b5d;
    /*blue*/
    --color-white-blue:#8ADCFF;    
    --color-med-blue: #0A526E;
    --color-dark-blue: #1C2833;
    /*purple*/
    --color-purple: #7873f5;
    --color-soft-purple:#cf8dce;
    --color-calid-purple: #401e52;
    --color-med-purple: #351e52;
       --color-vibe-purple: #4917d2; 
    /*green*/
    --color-lemon-green:#8ac610;
}

/* Asegurar de que el body y el html no tengan márgenes */
html, body {
    max-width: 100%;
    min-width: 310px;
    
    margin: 0;     
    width: 100%;
    font-size:var(--font-size-base);  
}
body { 
    letter-spacing: 0.4px;        
    font-family: 'Barlow', Arial, sans-serif;
    line-height: 1.5;
     background-color: var(--color-secondary); 
     color:var(--color-primary);
     user-select: none;
     padding: var(--space-xxs) var(--space-lg) var(--space-xxs) var(--space-lg);
     display: flex;
        flex-direction: column;
        gap:48px;
      
}
/** HEADER index*/


.logo {
  all: unset;
  display: flex;
  justify-content: center;
  cursor: pointer
}

.logo img {
  width: 150px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1));
}

/*nav list*/
nav {
  display: flex;
  gap: clamp(var(--space-xs), 2vw, var(--space-md));
  align-self: center;
  border-radius: 15px;
  width: min-content;  
  position:relative;
  padding: 8px var(--space-xs);
  background-color:rgba(25, 25, 28, 0.8);
  backdrop-filter: blur(6px);
}

nav a {
  text-transform: uppercase;
  padding: var(--space-xxs) var(--space-xs);
  white-space: nowrap;
  transition: color 0.5s ease;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

nav a:hover {
  color: #f8d06a; 
  width: auto;
  transition: all 0.1s linear;
}

/*focus nav*/
nav a:focus {
  color: #f8d06a;
}


/*BODY*/
.menu-blog{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.menu-blog a{
    text-decoration: none;
    color: var(--vibe-orange);
    font-weight: 600;
}

h1 {
    font-family: Handlee;
    font-size: var(--font-big-special);
    text-align: center;
}
.h1-ux{
  filter: drop-shadow(0 0 2px var(--vibe-orange));
}
.h1-desarrollo{
  filter: drop-shadow(0 0 9px var(--color-vibe-purple));
}
h2{
   
    font-size: var(--font-med-special);
}
article{
    filter: drop-shadow(0 0 4px var(--vibe-orange));
    padding: var(--space-lg);
    border-radius: 24px;
    max-width: 700px;
  background-color: var(--color-blue-black);
}
.article-desarrollo{
  filter: drop-shadow(0 0 4px var(--color-purple));
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap:var(--space-xs);
  
}
.contacta-div{
   border-radius: 100%;
   padding: var(--space-lg);
  font-family: Handlee, Arial, sans-serif;
   color: var(--color-secondary);
   max-width: 400px;
   font-weight: 700;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
  align-items: center;
  font-size: var(--font-med-special);
}
.contacta-div a{    
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;    
    border-radius: 32px;
    padding: var(--space-xxs) var(--space-md);  
    border: 2px solid var(--color-secondary);
    background-color: var(--color-secondary);
    font-size: var(--font-size-base);
    width: fit-content;
}
.contacta-div a:hover{
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--color-secondary);
    filter: drop-shadow(0 0 3px var(--color-secondary));
}

.ux{
  background-color: var(--vibe-orange);
}
.ux a{
  color: var( --vibe-orange);
}
.web{
  background-color: var(--color-purple);
}
 .web a{
  color: var( --color-purple);
}

/*Footer*/
.link{
   border-radius: 32px;
    padding: var(--space-xxs) var(--space-md);     
    width: fit-content;
    text-decoration: none;
    align-self: center;
    color: var(--vibe-primary); 
    border: 2px solid var(--color-primary);
}

@media (max-width: 450px) {
    body{
        padding: 0 var(--space-xxs) 0 var(--space-xxs);
    }
    article{
    
    padding: var(--space-xs);
    }
  nav {
    width: 100%;
    flex-wrap: wrap;
    top: env(safe-area-inset-top);
    padding: 0;
    gap:var(--space-xxs);
    justify-content: center;
  }
  nav a{
    font-size: 14px;
  }
  .order{
  order: 2;
}
}