/* =============================================================
   STYLES.CSS
   Fondo fluido tipo lava: animación CSS pura + layout semántico
   Convención: BEM (bloque__elemento--modificador)
   ============================================================= */

/* -------------------------
   1) Reset + Tokens
--------------------------*/
:root {
  /* Paleta base (puedes ajustarla aquí) */
  --color-primary: #0001fe;
  --color-secondary: #4ecdc4;
  --color-accent-1: #45b7d1;
  --color-accent-2: #96ceb4;
  --color-accent-3: #feca57;

  --bg-page: #0001fe;
  --text-on-dark: rgba(255,255,255,.92);

  /* Efecto */
  --blob-opacity: 0.5;
  --blob-blur: 40px;

  /* Tiempos de animación */
  --anim-fast: 2s;        /* base */
  --anim-medium: 4s;      /* secundaria */
  --anim-slow: 8s;       /* terciaria */

  /* Tipografía */
  --ff-sans: Montserrat, Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;

  /* Dimensiones */
  --container-max: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --radius-2xl: 1.25rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden;}
body {
  margin: 0;
  font-family: var(--ff-sans);
  color: var(--text-on-dark);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

@font-face {
  font-family: 'Asgard Trial';
  src: url('../fonts/asgard-trial.fit-thin.woff2') format('woff2'),
       url('../fonts/asgard-trial.fit-thin.woff') format('woff'),
       url('../fonts/asgard-trial.fit-thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asgard Trial';
  src: url('../fonts/asgard-trial.fit-light.woff2') format('woff2'),
       url('../fonts/asgard-trial.fit-light.woff') format('woff'),
       url('../fonts/asgard-trial.fit-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asgard Trial';
  src: url('../fonts/asgard-trial.fit-regular.woff2') format('woff2'),
       url('../fonts/asgard-trial.fit-regular.woff') format('woff'),
       url('../fonts/asgard-trial.fit-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asgard Trial';
  src: url('../fonts/asgard-trial.fit-medium.woff2') format('woff2'),
       url('../fonts/asgard-trial.fit-medium.woff') format('woff'),
       url('../fonts/asgard-trial.fit-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asgard Trial';
  src: url('../fonts/asgard-trial.fit-bold.woff2') format('woff2'),
       url('../fonts/asgard-trial.fit-bold.woff') format('woff'),
       url('../fonts/asgard-trial.fit-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1 {
    line-height: 2rem;
    margin: 5px 0 0 0;
}

header h2 {
    color: white;
    font-family: 'Asgard Trial', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 0.4px;
}
header h2 .linea {
    font-family: 'Asgard Trial', sans-serif;
    font-weight: 250;
}

/* -------------------------
   2) Layout general
--------------------------*/
 /* Pantalla negra de carga */
#blackScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    opacity: 1;
    transition: opacity 2.2s ease-out;
    pointer-events: none;
}

/* Cuando se agrega la clase fade-out */
#blackScreen.fade-out {
    opacity: 0;
}

.banderin {
  position: fixed;
  top: -16px;
  left: 0;
  background: url('../images/svg-elementos/banderin.svg') no-repeat center center;
  background-size:contain;
  width: 75px;
  height:120px;
}
.foto-perfil {
  position: absolute;
  left: 80px;
  background: url('../images/foto-perfil.jpg') no-repeat center center;
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.9);
}
.foto-perfil-boton div {
  transition: 0.2s ease-in-out;
  opacity: 1;
}
.foto-perfil-boton:hover div {
  background: 
    /* Gradiente dorado con opacidad */
    linear-gradient(
      135deg,
      rgba(255, 224, 102, 0.65) 0%,   /* #FFE066 con opacidad */
      rgba(255, 215, 0, 0.65) 50%,    /* #FFD700 con opacidad */
      rgba(230, 184, 0, 0.65) 100%    /* #E6B800 con opacidad */
    ),
    /* Imagen de perfil debajo */
    url('../images/foto-perfil.jpg') no-repeat center center;
  background-size: cover; /* Ajusta la imagen al contenedor */
  background-blend-mode: normal; /* El gradiente se superpone sin mezclar */
  opacity: 0.85;
  scale: 97%;
}
.site-header {
  position: relative;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
}
.site-header__inner {
  margin: 0 auto;
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.site-header__brand {
  text-decoration: none;
  color: var(--text-on-dark);
  font-weight: 600;
  letter-spacing: .2px;
}
.site-header__brand-text { font-size: 1rem; }

.site-nav {}
.breadcrumbs.socialmedia li a img {
    width: 16px;
}
.breadcrumbs {
    position: fixed;
    list-style: none;
    display: flex;
    flex-direction: column; /* Añade esta línea */
    gap: .5rem;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    opacity: .9;
    right: 20px;
}
.breadcrumbs__item a {
    color: var(--text-on-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.2s ease-in-out;
    padding: 2px 6px;
}
.breadcrumbs__item a:hover { 
    border-bottom-color: currentColor; 
    opacity: 0.7;
}
.breadcrumbs__item--current { opacity: .7; }

.main { min-height: calc(100dvh - 88px); }

/* -------------------------
   3) Hero + Efecto lava
--------------------------*/
.hero {
  position: relative;
  min-height: 500px;
  height: 90dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Contenedor gráfico decorativo (no interferir con el flujo) */
.lava {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg-page);
  z-index: -1;
}

/* Gradiente base suave */
.lava__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(69, 183, 209, 0.03) 0%, transparent 50%);
  animation: baseShift var(--anim-fast) ease-in-out infinite;
}

/* Blobs */
.lava__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--blob-blur));
  opacity: var(--blob-opacity);
  will-change: transform, border-radius;
  mix-blend-mode: screen;
}

/* Tamaños/posiciones y animaciones */
.lava__blob--1 {
  width: 600px; height: 600px; left: 10%; top: 20%;
  background: radial-gradient(circle, var(--color-primary), rgba(242, 242, 241, 0.6) 70%, transparent);
  animation: float1 var(--anim-fast) ease-in-out infinite, morph1 var(--anim-medium) ease-in-out infinite;
}
.lava__blob--2 {
  width: 500px; height: 500px; right: 15%; bottom: 25%;
  background: radial-gradient(circle, var(--color-secondary), rgba(78, 205, 196, 0.1) 70%, transparent);
  animation: float2 var(--anim-medium) ease-in-out infinite reverse, morph2 var(--anim-fast) ease-in-out infinite;
}
.lava__blob--3 {
  width: 450px; height: 450px; left: 30%; bottom: 15%;
  background: radial-gradient(circle, var(--color-accent-1), rgba(69, 183, 209, 0.1) 70%, transparent);
  animation: float3 var(--anim-slow) ease-in-out infinite, morph3 var(--anim-medium) ease-in-out infinite reverse;
}
.lava__blob--4 {
  width: 350px; height: 350px; right: 25%; top: 30%;
  background: radial-gradient(circle, var(--color-accent-2), rgba(150, 206, 180, 0.1) 70%, transparent);
  animation: float4 var(--anim-fast) ease-in-out infinite reverse, morph4 var(--anim-slow) ease-in-out infinite;
}
.lava__blob--5 {
  width: 280px; height: 280px; left: 60%; top: 10%;
  background: radial-gradient(circle, var(--color-accent-3), rgba(254, 202, 87, 0.1) 70%, transparent);
  animation: float5 var(--anim-medium) ease-in-out infinite, morph5 var(--anim-fast) ease-in-out infinite reverse;
}

/* Overlay sutil para profundidad (si quieres usarlo) */
.lava__overlay {
  position: absolute;
  inset: 0;
  /* Ejemplo: activar si deseas oscurecer ligeramente
     background: rgba(10,10,10,.25); */
  pointer-events: none;
  z-index: 1;
}

/* Círculos */
.circulos {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* giro constante */
    z-index: -1;
}
.circulo__1 {
    position: absolute;
    background: url('../images/svg-elementos/circulo-1.svg') no-repeat center center;
    background-size: contain;
    width: 50%;         /* Escala proporcional al padre */
    min-width: 300px;   /* Nunca será más chico de 400px */
    max-width: 400px;
    aspect-ratio: 1/1;  /* Mantiene proporción cuadrada */
    margin: 0 auto;
    animation: girar-clockwise 90s linear infinite;
}
.circulo__2 {
    position: absolute;
    background: url('../images/svg-elementos/circulo-2.svg') no-repeat center center;
    background-size: contain;
    width: 100%;        /* Escala proporcional al padre */
    min-width: 660px;   /* Nunca será más chico de 400px */
    max-width: 780px;
    aspect-ratio: 1/1;  /* Mantiene proporción cuadrada */
    margin: 0 auto;
    animation: girar-counter 180s linear infinite;
}
.circulo__3 {
    position: absolute;
    background: url('../images/svg-elementos/circulo-3.svg') no-repeat center center;
    background-size: contain;
    width: 100%;        /* Escala proporcional al padre */
    min-width: 780px;   /* Nunca será más chico de 400px */
    max-width: 880px;
    aspect-ratio: 1/1;  /* Mantiene proporción cuadrada */
    margin: 0 auto;
    animation: girar-clockwise 220s linear infinite;
}
.circulo__4 {
    position: absolute;
    background: url('../images/svg-elementos/circulo-4.svg') no-repeat center center;
    background-size: contain;
    width: 100%;        /* Escala proporcional al padre */
    min-width: 950px;   /* Nunca será más chico de 400px */
    max-width: 1100px;
    aspect-ratio: 1/1;  /* Mantiene proporción cuadrada */
    margin: 0 auto;
    animation: girar-counter 280s linear infinite;
}

/* Animaciones de rotación */
@keyframes girar-clockwise {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes girar-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}


/* Contenido del hero por encima del efecto */
.hero__content {
    position: relative;
    text-align: center;
    /* backdrop-filter: blur(2px); */
    padding: 0 var(--space-3);
    z-index: 2;
}
.hero__content .hero__ervices {
    max-width: 600px;
}
.hero__content header {
    position: relative;
    /* top: -40px; */
    display: flex;
    flex-flow: column;
    align-items: center;
}
.hero__logo {
    background: url('../images/dedalo-imagotipo-bco.svg') no-repeat center center;
    width: 100%;
    max-width: 80px;
    height: auto;
}
.hero__title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 2px;
  /* margin: 0 0 var(--space-3); */
  margin: 30px 0 0 0;
  opacity: 1;
}
.hero__content .texto-logo {
    position: relative;
    left: -10000px;
}
.hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* espacio entre icono y texto */
  padding: 10px 24px;
  border: 1px solid #fff;
  border-radius: 9999px; /* forma de píldora */
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.hero__subtitle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.hero__subtitle svg {
  width: 20px;
  height: 20px;
  fill: #fff; /* asegúrate que el icono sea blanco */
}
.hero__subtitle img {
  width: 20px;
  height: 20px;
}


/* -------------------------
   4) FAQ
--------------------------*/
.section-title {
  text-align: center;
  font-size: clamp(1.25rem, 3vw, 1.4rem);
  margin: var(--space-4) auto var(--space-3);
  font-weight: 600;
}
.faq {
  max-width: 800px;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-3);
}
.faq__item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.faq__q { cursor: pointer; font-weight: 600; font-size: 0.9rem;}
.faq__a { margin-top: .5rem; line-height: 1.7; font-size: 0.85rem;}

/* -------------------------
   BOTÓN FLOTANTE CHAT
--------------------------*/
.messenger-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    /* background-color: #D4BF79; */
    background: linear-gradient(135deg, #FFE066 0%, #FFD700 50%, #E6B800 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    z-index: 1000;
}

.messenger-btn small {
    position: absolute;
    font-family: 'Asgard Trial', 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 0.8rem;
    font-weight: 400;
    -webkit-text-stroke: 0.5px black;
}

.messenger-btn svg {
    color: white;
    width: 50px;
    height: 50px;
}

.messenger-btn:hover {
    background-color: black;
    transform: scale(1.1); /* solo agranda, ya no mueve */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* Animación de rebote al cargar la página */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}


.messenger-btn {
    animation: bounce 2s ease 1;
}

/* -------------------------
   5) Footer
--------------------------*/
.site-footer {
  padding: var(--space-3);
  text-align: center;
  opacity: .85;
  font-size: 0.8rem;
}

/* -------------------------
   6) Animaciones clave
--------------------------*/
@keyframes baseShift {
  0%, 100% {
    background:
      radial-gradient(ellipse at center, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 20%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(69, 183, 209, 0.03) 0%, transparent 50%);
  }
  25% {
    background:
      radial-gradient(ellipse at 30% 70%, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 30%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 60%, rgba(69, 183, 209, 0.03) 0%, transparent 50%);
  }
  50% {
    background:
      radial-gradient(ellipse at 60% 40%, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 60%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 30%, rgba(69, 183, 209, 0.03) 0%, transparent 50%);
  }
  75% {
    background:
      radial-gradient(ellipse at 80% 20%, rgba(255, 107, 107, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(78, 205, 196, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(69, 183, 209, 0.03) 0%, transparent 50%);
  }
}

@keyframes float1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(30px,-40px) scale(1.1); }
  50% { transform: translate(-20px,-20px) scale(.9); }
  75% { transform: translate(-40px,30px) scale(1.05); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  20% { transform: translate(-25px,35px) scale(1.08); }
  40% { transform: translate(40px,20px) scale(.92); }
  60% { transform: translate(20px,-30px) scale(1.12); }
  80% { transform: translate(-35px,-15px) scale(.88); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  30% { transform: translate(45px,25px) scale(.95); }
  60% { transform: translate(-30px,40px) scale(1.15); }
  90% { transform: translate(25px,-35px) scale(.85); }
}
@keyframes float4 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-40px,-30px) scale(1.2); }
  66% { transform: translate(35px,-25px) scale(.8); }
}
@keyframes float5 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-25px,45px) scale(1.3); }
}

@keyframes morph1 {
  0%,100%{ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%   { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%   { border-radius: 50% 30% 60% 70% / 60% 70% 40% 50%; }
  75%   { border-radius: 70% 50% 40% 30% / 40% 50% 60% 70%; }
}
@keyframes morph2 {
  0%,100%{ border-radius: 40% 70% 60% 30% / 70% 50% 40% 60%; }
  20%   { border-radius: 60% 30% 50% 70% / 40% 60% 70% 30%; }
  40%   { border-radius: 30% 60% 40% 70% / 60% 40% 30% 70%; }
  60%   { border-radius: 70% 40% 60% 50% / 30% 70% 60% 40%; }
  80%   { border-radius: 50% 60% 30% 40% / 70% 30% 50% 60%; }
}
@keyframes morph3 {
  0%,100%{ border-radius: 50% 60% 70% 40% / 60% 40% 50% 70%; }
  33%   { border-radius: 70% 30% 40% 60% / 50% 70% 60% 30%; }
  66%   { border-radius: 40% 50% 60% 70% / 70% 60% 40% 50%; }
}
@keyframes morph4 {
  0%,100%{ border-radius: 60% 50% 40% 70% / 50% 70% 30% 60%; }
  50%   { border-radius: 30% 70% 60% 40% / 70% 30% 60% 50%; }
}
@keyframes morph5 {
  0%,100%{ border-radius: 70% 40% 50% 60% / 40% 60% 70% 50%; }
  25%   { border-radius: 50% 70% 30% 60% / 60% 50% 40% 70%; }
  50%   { border-radius: 60% 30% 70% 50% / 50% 40% 60% 30%; }
  75%   { border-radius: 40% 60% 50% 30% / 70% 60% 50% 40%; }
}

/* -------------------------
   7) Responsividad
   ------------------------- */

/* CSS base móvil */
@media (max-width: 768px) {
    .lava__blob--1,
    .lava__blob--2,
    .lava__blob--3,
    .lava__blob--4,
    .lava__blob--5 {
        transform: scale(0.7);
    }     
    header h2 {
        font-size: 1.2rem;
    }
    .hero__content {
        padding: 0 25px;
    }
    .hero__title {
        margin: 20px 0;
    }
    .breadcrumbs {
        display: flex;
        flex-direction:row; /* iconos en posición horizontal */
    }
    .circulo__1 {
      background: url('../images/svg-elementos/circulo-1-mobile.svg') no-repeat center center;
    }
    .circulo__2 {
      background: url('../images/svg-elementos/circulo-2-mobile.svg') no-repeat center center;
        min-width: 430px;   /* Nunca será más chico de 400px */
        max-width: 450px;
    }
    .circulo__3 {
      background: url('../images/svg-elementos/circulo-3-mobile.svg') no-repeat center center;
        min-width: 500px;   /* Nunca será más chico de 400px */
        max-width: 550px;
    }
    .circulo__4 {
      background: url('../images/svg-elementos/circulo-4-mobile.svg') no-repeat center center;
        min-width: 620px;   /* Nunca será más chico de 400px */
        max-width: 630px;
    }  
}

/* Tablet y arriba */
@media (min-width: 769px) and (max-width: 1023px) {
    body { 
        
    }
}

/* -------------------------
   8) Accesibilidad y preferencias
--------------------------*/
@media (prefers-reduced-motion: reduce) {
  /* Reducimos velocidad/actividad manteniendo lo esencial */
  .lava__gradient,
  .lava__blob {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}