:root {

    /* Colores */
    --pruple: #6b5b75;
    --opurple: #4a434f;

    --green: #3eb991;
    --ogreen: #3f544b;

    /* --orange:#f7953c; */
    --orange:#e08836;
}




@font-face {
    font-family: 'Oduda'; /* Nombre que darás a la fuente */
    src: url('../fonts/Oduda.otf') format('opentype'); /* Ruta a la fuente */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Permite un reemplazo rápido mientras carga */
}

@font-face {
  font-family: 'Europa';
  src: url('../fonts/EuropaGroteskSH-Med.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Righteos';
  src: url('../fonts/Righteous-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




*{
    margin: 0;
    padding: 0;
}

*, *::before, *::after{box-sizing: border-box;}

body{min-height: 100dvh;}

input, button, textarea, select{font: inherit;}

p{text-wrap: pretty; font-family: 'Europa'; color: var(--opurple);}

h1, h2, h3, h4, h5, h6{text-wrap: balance;}

img, video, svg {height: auto; max-width: 100%;}

body{

    /* background: linear-gradient(190deg, #1a1321, #422f52, #b8a9c9, #ffffff, #ffffff); */

    background: linear-gradient(190deg, #1a1321, #422f52, #b8a9c9, #fff, #fff);

    background-size: 300% 300%;
    animation: gradientBG 3s ease infinite;
    overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.114); /* dark overlay */
  z-index: 0;
}


@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bground{
    width: 100%;
    margin: 0 auto;
    /* border: 1px solid red; */
    height: 35dvh;
    display: flex;
    justify-content: center;
    align-items:end;
}

.bground img{
    width: 22rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.774));
}


.text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 0rem;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  /* border: 1px solid salmon; */
}

.text-inner {
  max-width: 800px;
}

/* .text h1 {
  color: #4a424f;
  color: #3f554b;
  font-family: 'Oduda', sans-serif;
  text-transform: uppercase;
  font-size: 2.5rem;
  letter-spacing: 1.5px;
  margin-bottom: 2.5rem;
} */

.typewriter-line {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  font-family: 'Europa', sans-serif;
  font-size: 3.3rem;
  color: #4a424f;
  letter-spacing: 0.8px;
  width: 0;
  opacity: 0;
  border-right: 2px solid transparent; /* Por defecto oculto */
}

/* Dots en otro color */
.dots {
  color: var(--green);
  font-size: 4rem !important;
}

/* Animaciones por línea */
.line1 {
  animation: typing1 6s steps(12, end) infinite;
}
.line2 {
    color: var(--orange) !important;
  animation: typing2 6s steps(3, end) infinite;
}
.line3 {
  animation: typing3 6s steps(14, end) infinite;
}

/* Keyframes con cursor que desaparece justo al final del texto */
@keyframes typing1 {
  0%   { width: 0; opacity: 0; border-right: 1px solid #6c5b7b; }
  10%  { opacity: 1; }
  25%  { width: 100%; }
  26%  { border-right: 1px solid transparent; } /* se apaga justo después de escribir */
  100% { opacity: 1; width: 100%; }
}

@keyframes typing2 {
  20%  { width: 0; opacity: 0; border-right: 1px solid #6c5b7b; }
  30%  { opacity: 1; }
  45%  { width: 100%; }
  46%  { border-right: 1px solid transparent; }
  100% { opacity: 1; width: 100%; }
}

@keyframes typing3 {
  40%  { width: 0; opacity: 0; border-right: 1px solid #6c5b7b; }
  50%  { opacity: 1; }
  65%  { width: 100%; }
  66%  { border-right: 1px solid transparent; }
  100% { opacity: 1; width: 100%; }
}



.contact_cont{
  /* border: solid 1px green; */
  width: 90%;
  margin: 0 auto;
  height: 12dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
}


.contact_cont .v-icon{
  font-size: 3.1rem;
  color: var(--opurple) !important;
}

.contact_cont #whatsapp{
  color: var(--green) !important;
}

.contact_cont #instagram{
  color: #e08836 !important;
}

.contact_cont #brochure{
  font-size: 2.5rem !important;
}

.derechos{
  /* border: 1px solid orange !important; */
  height: 8dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.derechos p > strong{
  letter-spacing: .08rem;
}


.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20dvh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  animation: waveFloat 5s ease-in-out infinite;
}

.wave1 {
  animation-delay: 0s;
  opacity: .3;
}

.wave2 {
  animation-delay: 3s; /* mitad del ciclo para alternancia */
  opacity: .2;
}

@keyframes waveFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(1rem); /* sube o baja ligeramente */
  }
}