:root {
    --color-base:#4F6BB2;
    --color-secondary:#E94D50;
    --color-extra1:#445258;
}
body {
    background-color: var(--color-base);
    color: #FFF;
    font-family: 'ITC Souvenir Std', sans-serif;
    font-weight: 500;
}
.contenedor { max-width: 650px; margin: auto; }
p { margin-bottom: 10px; }


/********************************
  Home
*************************************/
.home header { font-size: 18px; background-image: url(img/nieve.svg); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }  
.home__formulario { background-color: var(--color-extra1); padding: 50px 40px; padding-bottom: 220px; background-repeat: no-repeat; background-position: center bottom; background-image: url(img/footer_bg.svg); background-size: 100% auto; }


/**********************************
  Formulario
*********************************/
.home__formulario label { font-size: 14px; }
input.form-control {
    padding: 10px 10px; background-color: #FFF; width: 100%; border-radius: 10px; font-size: 10px; color: var(--color-extra1);
}
textarea.form-control {
    background-color: #FFF; width: 100%; border-radius: 15px; height: 210px; font-size: 18px; color:var(--color-extra1); border:none; 
}

.mensaje-box {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #FFF;
  border-radius: 15px;
  overflow: hidden;
  padding: 20px;
}

#mensaje.form-control {
  width: 100%;
  padding: 3px;
  font-size: 16px;
  resize: none;
  height: 120px;
  outline: none;

}

.contador {
  text-align: left;
  font-size: 14px;
  margin-top: 6px;
  color: var(--color-base);
  font-weight: 500;
}

.contador.limite {
  color: #d9534f; /* rojo */
}


.btn { padding: 10px 30px; color: #FFF; background-color: var(--color-base); border-radius: 30px; font-size: 14px; min-width: 200px; text-align: center; }

.home__tipovideo label { text-align: center;  width: 160px; height: 160px; display: block; position: relative; z-index: 9; cursor: pointer; }

.home__tipovideo label span { display: block; color: #FFF; padding: 5px 10px; position: relative; z-index: 1;
background-repeat: no-repeat; background-position: center; background-size: 100%; background-image: url(img/etiqueta.svg); font-size: 11px; margin-top: 120px; }

.home__tipovideo label:before { content: ""; display: block; background-color: #FFF; background-repeat: no-repeat; background-size: 100%; background-position: center; background-image: url(img/churros.webp); width: 160px; height: 160px; border-radius: 50%;  border: 3px solid var(--color-base); overflow: hidden; z-index: 0;
position: absolute; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px; }

.home__tipovideo label[for="croqueta"]:before { background-image: url(img/croqueta.webp); }
.home__tipovideo label[for="kentucky"]:before { background-image: url(img/kentucky.webp); }

.home__tipovideo input { position: absolute; width: 0; height: 0; }
.home__tipovideo input:checked + label:before { border: 3px solid #FFF; box-shadow: 8px 12px 10px 0 #32467a; opacity: .5; transition: all .3s; }


/**********************************
  Preloader
*********************************/
/* --- OVERLAY DEL PRELOADER --- */
  #preloader {
    position: fixed;
    inset: 0;
    background: var(--color-base); /* azul de tu diseño */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Fade out automático después de 3s */
    animation: preloaderFade 0.7s ease forwards;
    animation-delay: 3s;
    min-height: 100vh;   /* Fallback para navegadores viejos */
    min-height: 100dvh;
  }
  #preloader h4{
    font-size: 24px; font-weight: 500; text-align: center; color: #FFF; margin-top: 10px; line-height: 1.2em;
  }
  #preloader img { margin: auto; }
  .preloader__wrap { text-align: center; display: flex;
    flex-direction: column;
    align-items: center; }

  /* Una vez que termina el fade queremos que ya no bloquee clics */
  #preloader.fade-complete {
    pointer-events: none;
  }

  /* --- ANIMACIÓN DEL SARTÉN --- */
  #sarten {
    transform-box: fill-box;
    transform-origin: 70% 60%; /* punto de giro más hacia el mango */
    animation: panRock 0.5s ease-in-out infinite alternate;
  }

  /* Rocking más pronunciado */
  @keyframes panRock {
    0%   { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
  }

  /* Fade del overlay */
  @keyframes preloaderFade {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
  }

@keyframes sartenShake {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.5deg); }
}

#vapor1 {
  animation: subirVapor 1.8s infinite ease-in-out;
}
#vapor2 {
  animation: subirVapor 1.8s infinite ease-in-out 0.4s;
}
#vapor3 {
  animation: subirVapor 1.8s infinite ease-in-out 0.8s;
}

@keyframes subirVapor {
  0% { transform: translateY(0px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}


/**********************************
  tarjeta
*********************************/
body.tarjeta header {
  padding-bottom: 150px;
}
.tarjeta__video {
  background-color: var(--color-extra1);
    padding: 1px 20px;
    padding-bottom: 220px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(img/footer_bg.svg);
    background-size: 100% auto;
}
.compartir__social a {
  width: 40px; height: 40px; padding: 10px; border-radius: 50%; background-color: var(--color-base);
}
.video-container {
    position: relative;
    width: 100%;
    height: 390px; /* Altura completa de la ventana */
    overflow: hidden;
    background-color: #FFF;
    margin-top: -120px;
}

/* Estilo para el video */
#video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta el video para cubrir el contenedor */
    z-index: 1; /* Coloca el video detrás del contenido */
    display: none;
    pointer-events: none;
}

#video-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta el video para cubrir el contenedor */
    z-index: 1; /* Coloca el video detrás del contenido */
    pointer-events: none;
}

/* Estilo para el contenido encima del video */
.content {
    position: relative;
    z-index: 1; /* Coloca el contenido encima del video */
    color: #333; /* Color del texto */
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 30px;
    padding-left: 55%;
    padding-right: 60px;    
}
body.tarjeta .content {    
    font-family: 'Arsilon', sans-serif;
    font-size: 20px;
    line-height: 1.3em;
}
body.tarjeta .content.kentucky { padding-top: 55px; }
.content .origen{ font-size: .8em; }
body.tarjeta .content h3{
  font-style: italic; font-family: 'ITC Souvenir Std', sans-serif;
}

.rojo { color: var(--color-secondary); }


/****************** Video Audio **********************/


    .video-wrapper video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .sound-toggle {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 10;
        border: 2px solid #FFF;
        border-radius: 999px;
        padding: 8px 10px;
        font-size: 18px;
        cursor: pointer;
        background: var(--color-base);
        color: #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    }

    .sound-toggle:focus {
        outline: 2px solid #fff;
    }


/************* Boton Play ********************/
.play-btn {
    position: absolute;
    z-index: 50;
    font-size: 42px;
    background-color: rgba(0,0,0,0.65);
    background-image: url(img/icon-play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    border: 0;
    width: 100%;
    height: 100%;
    color: white;
    cursor: pointer;
    top: 0;
    left: 0;
}

.play-btn:hover {
    /* background: rgba(0,0,0,0.6); */
}



/************ Animacion palabras ************/
.type-in {
    opacity: 0;            /* escondido al cargar */
    display: block;        /* evita que el texto colapse */
}

.word {
    opacity: 0;
    display: inline-block;
    animation: fadeInUp 0.4s forwards;
    white-space: nowrap;
}
.letter {
    opacity: 0;
    display: inline-block;
    animation: fadeInUp 0.25s forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.only-mobile {
    display: none;
}


@media screen and (max-width: 768px) {
    .video-container {
        height: 550px;
    }
    #video-bg { display: block;  }
    #video-bg2 { display: none;  }
    .content {      
      top: 72%;
      transform: translateY(-50%);
      padding: 25px 35px;
  }
  .only-mobile { display: block; }
  .only-desktop { display: none; }
}