a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

a {outline : none;}
a img {outline : none;}
img {border : 0;}

:root {
    --coast-sand: #f7efe3;
    --coast-sand-deep: #ead9c2;
    --coast-foam: #fdf9f2;
    --coast-sea: #86b7c9;
    --coast-sea-deep: #4f8ea8;
    --coast-turquoise: #7cc7c9;
    --coast-sky: #d8edf3;
    --coast-text: #5c5f61;
    --coast-title: #5f95b6;
    --coast-white: rgba(255, 255, 255, 0.92);
    --coast-shadow: 0 24px 70px rgba(73, 111, 128, 0.12);
    --button-blue: #87abde;
    --button-blue-hover: #6f9bd4;
    --button-blue-soft: #eef3fc;
    --button-blue-shadow: 0 16px 32px rgba(135, 171, 222, 0.28);
}

html {
    font-size: 12.5px;
}

body {
    font-size: 1.78rem;
    line-height: 1.65;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: var(--coast-text);
    background:
        radial-gradient(circle at top left, rgba(216, 237, 243, 0.6), transparent 32%),
        linear-gradient(180deg, #fefcf8 0%, #f7f0e6 46%, #fcfaf5 100%);
}

body.mobile-menu-open {
    overflow: hidden;
}

p,
li,
a,
button,
input,
select,
textarea,
label {
    font-size: 1em;
    font-family: 'Bricolage Grotesque', sans-serif;
}

small,
.small {
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Bricolage Grotesque', sans-serif;
}


/* Estilos de margen y tamaño */

.m-t-10 {margin-top:10px;}
.m-t-20 {margin-top:20px;}
.m-t-30 {margin-top:30px;}
.m-t-40 {margin-top:40px;}
.m-t-50 {margin-top:50px;}

.m-b-10 {margin-bottom:10px;}
.m-b-20 {margin-bottom:20px;}
.m-b-30 {margin-bottom:30px;}
.m-b-40 {margin-bottom:40px;}
.m-b-50 {margin-bottom:50px;}


.p-0 { padding: 0; }

.p-t-10 {padding-top:10px;}
.p-t-20 {padding-top:20px;}
.p-t-30 {padding-top:30px;}
.p-t-40 {padding-top:40px;}
.p-t-50 {padding-top:50px;}
.p-t-60 {padding-top:60px;}
.p-t-70 {padding-top:70px;}
.p-t-80 {padding-top:80px;}
.p-t-90 {padding-top:90px;}
.p-t-100 {padding-top:100px;}
.p-t-120 {padding-top:120px;}
.p-t-130 {padding-top:130px;}
.p-t-140 {padding-top:140px;}
.p-t-150 {padding-top:150px;}
.p-t-160 {padding-top:160px;}
.p-t-170 {padding-top:170px;}
.p-t-180 {padding-top:180px;}
.p-t-200 {padding-top:200px;}
.hero-suites .navbar {
     z-index: 10;
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;
}


/* =========================
   CASTING
========================= */

.casting-section{
  background-color: #b63d12;
  min-height: 146px;
  padding: 14px 15px 12px;
  color: #ffe7b8;
  flex-direction: column;
  justify-content: center;
}

.casting-promo{
  color: #ffe7b8;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
}

.casting-promo strong{
  font-weight: 800;
}

.casting-title{
  color: #ffe7b8;
  font-family: 'Anton', sans-serif;
  font-size: clamp(3.2rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.casting-terms{
  color: #ffe7b8;
  font-size: .62rem;
  font-weight: 400;
  line-height: 1.2;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 767.98px){

  .casting-section{
    min-height: 138px;
    padding: 15px 15px 12px;
  }

  .casting-promo{
    font-size: 1.15rem;
  }

  .casting-title{
    font-size: clamp(2.75rem, 9vw, 4rem);
    line-height: 1.05;
  }

  .casting-terms{
    font-size: .6rem;
  }

}

@media (max-width: 575.98px){

  .casting-promo{
    font-size: 1rem;
  }

  .casting-title{
    font-size: clamp(2.35rem, 10vw, 3.3rem);
  }

}



/* =========================
   SECCIÓN GENERAL
========================= */

.casting-detail{
  background: #ffffff;
  color: #444;
}

/* Composición de la sección de personajes */
.casting-intro{
  position: relative;
  max-width: 860px;
  height: 389px;
  padding-top: 35px;
  padding-bottom: 0;
}

.casting-intro > .row{
  position: static;
  display: block;
}

.casting-copy{
  width: 47%;
  padding-top: 21px;
}

.casting-character-column{
  position: absolute;
  z-index: 2;
  top: 35px;
  right: -64px;
  width: 390px;
  padding: 0;
}


/* =========================
   TÍTULO
========================= */

.casting-question{
  font-size: clamp(1.85rem, 2.75vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  color: #111;
  font-family: 'Bricolage Grotesque', sans-serif;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 1.4rem !important;
}

.casting-question span{
  background-color: #f8aa1c;
  padding: 0 .25em;
  border-radius: 50px;
}

.casting-question::after{
  content: "";
  position: absolute;
  left: 28px;
  bottom: -7px;
  width: 130px;
  height: 5px;
  border-top: 2px solid #f8aa1c;
  border-bottom: 1px solid #f8aa1c;
  transform: rotate(-2deg);
}


/* =========================
   TEXTO
========================= */

.casting-detail p{
  font-size: 1rem;
  line-height: 1.45;
}


/* =========================
   TARJETA
========================= */

.casting-character-carousel{
  width: 306px;
  max-width: 100%;
}

.character-card{
  max-width: 306px;
  width: 100%;
  border: 1px solid #30140d;
  border-radius: 21px;
  overflow: hidden;
  background-color: #35170f;
  box-shadow: none;
}

.character-image{
  height: 276px;
  object-fit: cover;
}

.character-info{
  color: #fff;
  padding: 32px 30px 32px;
  min-height: 392px;
}

.character-info h3{
  font-size: 1.62rem;
  font-weight: 800;
  line-height: 1;
}

.character-info h4{
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.05;
}

.character-info p{
  font-size: .94rem;
  line-height: 1.08;
  margin-bottom: .95rem;
}

.character-info .btn{
  font-size: .92rem;
  font-weight: 600;
  padding: .58rem .7rem;
  margin-top: 1.25rem;
}


/* =========================
   FLECHAS
========================= */

.casting-arrow{
  color: #e56b32;
  font-size: 3rem;
  line-height: 1;
  transition: transform .2s ease;
}

.casting-arrow:hover{
  transform: scale(1.15);
}


/* =========================
   BLOQUE NARANJA
========================= */

.participa-section{
  background-color: #c33a00;
  color: #fff;
  min-height: 350px;
}

.participa-container{
  max-width: 860px;
  padding-top: 48px;
  padding-bottom: 45px;
}

.participa-container .row{
  margin: 0;
}

.participa-container .row > div{
  width: 53%;
  padding: 0 14px;
}

.participa-title{
  color: #ffd05e;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.participa-section p{
  color: #fff;
  font-size: .95rem;
  line-height: 1.45;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 767.98px){

  .casting-question{
    text-align: center;
    white-space: normal;
  }

  .casting-detail p{
    text-align: center;
  }

  .participa-title{
    text-align: center;
  }

}

@media (max-width: 991.98px){

  .casting-intro{
    height: auto;
    max-width: 100%;
    padding: 32px 18px 24px;
  }

  .casting-intro > .row{
    display: flex;
    flex-direction: column;
  }

  .casting-copy,
  .casting-character-column{
    position: static;
    width: 100%;
  }

  .casting-copy{
    padding: 0 0 20px;
  }

  .casting-character-column{
    padding: 0;
  }

  .participa-container{
    padding: 30px 18px;
  }

  .participa-container .row > div{
    width: 100%;
    padding: 0;
  }

  .casting-arrow{
    font-size: 2rem;
  }

  .character-info{
    padding: 20px;
  }

}



/* =========================
   SECCIÓN GENERAL
========================= */

.casting-form-section{
  background-color: #c83b00;
  min-height: auto;
}

.casting-form-section.py-5{
  padding-top: 54px !important;
  padding-bottom: 50px !important;
}


/* =========================
   CONTENEDOR FORMULARIO
========================= */

.casting-form-box{
  background-color: #fff;
  border-radius: 22px;
  max-width: 654px;
  margin: 0 auto;
  padding: 43px 87px 35px;
}

.casting-form-box form > .mb-3{
  margin-bottom: .9rem !important;
}


/* =========================
   LABELS
========================= */

.casting-label{
  font-size: .74rem;
  color: #c7c7c7;
  margin-bottom: 3px;
}

.casting-label.active-label{
  color: #f0442d;
}


/* =========================
   INPUTS
========================= */

.casting-input{
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  height: 38px;
  min-height: 38px;
  padding-left: 24px;
  font-size: 1rem;

  box-shadow:
    0 8px 15px rgba(0,0,0,.12);
}

.casting-input::placeholder{
  color: #777;
}


/* INPUT ACTIVO ROJO */
.casting-input.active-input{
  border-color: #ef4a32;
}


/* FOCUS */
.casting-input:focus,
.form-select:focus{
  border-color: #ef4a32;
  box-shadow:
    0 0 0 .15rem rgba(239,74,50,.12),
    0 8px 15px rgba(0,0,0,.12);
}


/* =========================
   ARCHIVO
========================= */

.casting-upload-title{
  color: #bdbdbd;
  font-size: .74rem;
  text-transform: uppercase;
  margin-bottom: 9px;
}


/* Input accesible; el área visible activa este selector de archivos. */
.casting-file{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.casting-upload-area{
  align-items: center;
  background: #fffaf8;
  border: 1px dashed #eaa493;
  border-radius: 10px;
  color: #525252;
  cursor: pointer;
  display: flex;
  gap: 13px;
  min-height: 86px;
  padding: 14px 16px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  width: 100%;
}

.casting-upload-area:hover,
.casting-upload-area.is-dragging{
  background: #fff3ee;
  border-color: #ef4a32;
}

.casting-file:focus-visible + .casting-upload-area{
  border-color: #ef4a32;
  box-shadow: 0 0 0 .2rem rgba(239, 74, 50, .18);
}

.casting-upload-icon{
  align-items: center;
  background: #ffebe4;
  border-radius: 50%;
  color: #ef4a32;
  display: flex;
  flex: 0 0 44px;
  font-size: 1.7rem;
  height: 44px;
  justify-content: center;
}

.casting-upload-copy{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.casting-upload-copy strong{
  color: #5b5b5b;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.casting-upload-copy strong span{
  color: #e44930;
  text-decoration: underline;
}

.casting-upload-copy small{
  color: #999;
  font-size: .72rem;
  line-height: 1.3;
}

.casting-attachment-icon{
  color: #b9a29b;
  font-size: 1.3rem;
}

.casting-upload-area.has-file{
  background: #f6fbf7;
  border-color: #75a985;
}

.casting-upload-area.has-file .casting-upload-icon{
  background: #e5f3e8;
  color: #4d8b5c;
}

.casting-upload-area.has-error{
  border-color: #dc3545;
}

.casting-upload-feedback{
  color: #777;
  font-size: .72rem;
  margin-top: 5px;
  min-height: 1em;
}


/* =========================
   CHECKBOX
========================= */

.casting-check{
  color: #b5b5b5;
  font-size: .64rem;
  line-height: 1.4;
}

.casting-check a{
  color: #ee4934;
  text-decoration: none;
}

.casting-form-box .form-check.mb-3{
  margin-top: 1.1rem;
  margin-bottom: 1.15rem !important;
}

.casting-recaptcha{
  margin: .4rem 0 .9rem;
  min-height: 0;
}

.casting-recaptcha:empty{
  display: none;
}


/* =========================
   BOTÓN
========================= */

.casting-submit{
  background-color: #f1472e;
  color: white;

  border-radius: 50px;
  border: none;

  padding: 9px 20px;

  font-size: 1.25rem;
  font-weight: 600;

  letter-spacing: .05em;

  box-shadow:
    0 6px 10px rgba(0,0,0,.15);

  transition:
    transform .2s ease,
    background-color .2s ease;
}

.casting-submit:hover{
  background-color: #d93d27;
  color: white;
  transform: translateY(-2px);
}

.casting-submit:disabled{
  opacity: .75;
  transform: none;
}

.casting-form-feedback{
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.4;
  margin-top: 14px;
  padding: 11px 13px;
  text-align: center;
}

.casting-form-feedback.is-success{
  background: #edf7ef;
  color: #397449;
}

.casting-form-feedback.is-info{
  background: #eef4fa;
  color: #355a78;
}

.casting-form-feedback.is-error{
  background: #fff0ed;
  color: #bd3d2b;
}


/* =========================
   CONTACTO
========================= */

.casting-contact{
  color: #fff;
  font-size: .78rem;
}

.casting-contact a{
  color: #fff;
  text-decoration: none;
}

.casting-form-section .casting-contact.mt-4{
  margin-top: 42px !important;
}

.casting-form-section .casting-contact + .text-center.mt-4{
  margin-top: 48px !important;
}


/* =========================
   LOGO
========================= */

.casting-logo{
  max-width: 150px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 767.98px){

  .casting-form-section{
    padding-left: 15px;
    padding-right: 15px;
  }

  .casting-form-box{
    padding: 30px 22px;
    border-radius: 18px;
  }

  .casting-contact{
    font-size: .72rem;
    line-height: 1.5;
  }

  .casting-logo{
    max-width: 130px;
  }

}