:root {
  --tph-blanco: #ffffff;
  --tph-negro: #000000;
  --tph-menu-rojo: #b2292e;
  --tph-naranja: #b2292e;
  --tph-amarillo: #eed440;
  --tph-ambar: #EEA440;
  --tph-texto-como-participar: #cce0a8;
  --tph-verde:#14B500;
  --tph-azul:#0E428A;
  --tph-azul-rgb: 14 66 138;
  --tph-crema:#9c182f;
  --tph-marron:#593D26;
  --tph-negro-bg-titulo-festival: #1A1A1A;

  --tph-font-Futura-Condensed-Bold: 'Nuiform Pro Bold';
  --tph-font-Futura-Medium:'TT Norms Pro medium';

  /* Área personal: colores + tipografía desde el tema */
  --tph-area-personal-color: var(--tph-azul);
  --tph-area-personal-color-rgb: var(--tph-azul-rgb);
  --tph-area-personal-font: var(--tph-font-Futura-Condensed-Bold);

  /* Variables genéricas consumidas por areaPersonal.css */
  --primary-color: var(--tph-area-personal-color);
  --primary-color-rgb: var(--tph-area-personal-color-rgb);
  --primary-font: var(--tph-area-personal-font);
  --primary-color-dark: color-mix(in srgb, var(--primary-color) 78%, var(--tph-negro) 22%);


  --tph-form-label: #000;
  --tph-form-placeholder: #868686;
  --tph-form-input: #000;
  --tph-form-bg: var(--tph-blanco);
  --tph-font-body: 'TT Norms Pro regular', Arial, sans-serif;
  --tph-font-special: 'Nuiform Pro Bold';
  --tph-font-display: 'Bollity';
}

/********************************************************************* fuentes *********************************************************/

@font-face {
  font-family: 'TT Norms Pro regular';
  src: url('../../../fonts/ttnormspro-regular.woff2') format('woff2'),
       url('../../../fonts/ttnormspro-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TT Norms Pro medium';
  src: url('../../../fonts/ttnormspro-medium.woff2') format('woff2'),
       url('../../../fonts/ttnormspro-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nuiform Pro Bold';
  src: url('../../../fonts/UniformExtraCondensed-Bold.woff2') format('woff2'),
       url('../../../fonts/UniformExtraCondensed-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nuiform Pro Medium';
  src: url('../../../fonts/UniformExtraCondensed-Medium.woff2') format('woff2'),
       url('../../../fonts/UniformExtraCondensed-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bollity';
  src: url('../../../fonts/bollity.woff2') format('woff2'),
       url('../../../fonts/bollity.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  overflow-y: auto;
  background-color: var(--tph-crema);
}


/********************************************************************* background *********************************************************/

html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--tph-crema);
  font-family: var(--tph-font-body);
	background-image: url('../../../img/template/ambar-festivales-26/trama-fondo.avif');
	background-repeat: repeat-y;
  background-size: contain;
	background-position: top center;
}


/********************************************************************* botones *********************************************************/
.btn-formulario {
  background-color: var(--tph-naranja);
  color: #fff;
  font-family: var(--tph-font-special);
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5rem;
  padding: 0rem 2rem 0rem 2rem;
}

.btn-formulario:hover {
  background-color: transparent;
  color: var(--tph-naranja);
}

.btn-formulario:focus {
  background-color: var(--tph-naranja);
  color: #fff;
}

.btn-promo {
  background-color: var(--tph-amarillo);
  color: var(--tph-negro);
  font-size: 1rem;
  font-weight: 600;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.50rem;
  padding-bottom: 0.50rem;
  border-radius: 5px;
  width: 80%;
}

.btn-promo:hover {
  background-color: var(--tph-negro);
  color: var(--tph-amarillo);
}

.btn-promo:focus {
  background-color: var(--tph-negro);
  color: var(--tph-amarillo);
}

/********************************************************************* scrollbar css *********************************************************/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--tph-gris);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--tph-gris-claro);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--tph-naranja)
}



/********************************************************************************** MENU  *******************************************************************************/
#mainMenu {
  background-color: var(--tph-menu-rojo);
}

/* Botón de espera "Procesando..." (modal acceso área personal) */
#btnWaitAcceso{
  background-color: var(--tph-azul);
  border-color: var(--tph-azul);
  color: var(--tph-blanco);
  font-family: var(--tph-font-Futura-Condensed-Bold);
}

#btnWaitAcceso:disabled{
  background-color: var(--tph-azul);
  border-color: var(--tph-azul);
  color: var(--tph-blanco);
  opacity: .85;
}

.logoNav{
  width: auto;
  max-width: 100%;
  margin: 3%;
}

.userIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  margin-left: 8px;
  margin-bottom: 2%;
  vertical-align: middle;
}

.navbar-nav .nav-link {
  color: var(--tph-blanco);
}

/* Botón "Área personal": igualar tipografía a los enlaces del menú (p.ej. "Inicio") */
#mainMenu .btn-menu{
  font-family: inherit;
  font-size: var(--bs-nav-link-font-size, inherit);
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;

  /* Letra en negro */
  color: var(--tph-negro);
  background-color: transparent;
  border-color: transparent;

  /* Bootstrap .btn usa variables CSS propias: forzamos herencia para que coincida con .nav-link */
  --bs-btn-font-weight: inherit;
  --bs-btn-font-size: var(--bs-nav-link-font-size, inherit);
}

#mainMenu .btn-menu:hover,
#mainMenu .btn-menu:focus,
#mainMenu .btn-menu:focus-visible{
  color: var(--tph-negro);
  background-color: transparent;
  border-color: transparent;
}

 .navbar-brand {
  color: var(--tph-blanco);
  max-width: 210px;
}

.active {
  text-decoration: underline;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236C6E74' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .navbar-toggler {
    border: 0;
    box-shadow: none;
    padding: 0.25rem 0;
  }

  .navbar-toggler:focus,
  .navbar-toggler:hover,
  .navbar-toggler:active {
    border: 0;
    box-shadow: none;
    outline: 0;
  }

  .navbar-toggler-icon {
    width: 1.85rem;
    height: 1.85rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23EEA440' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3.8' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

.areaCliente{
  color: var(--tph-blanco) !important;;
}

#accesoMicuenta .modal-dialog {
  max-width: 560px;
}

.modal-area-personal {
  background:
    radial-gradient(circle at top right, rgba(238, 212, 64, 0.2), transparent 34%),
    linear-gradient(180deg, #fff7ee 0%, #fff1df 100%);
  border: 4px solid var(--tph-menu-rojo);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(98, 14, 24, 0.3);
  overflow: hidden;
}

.modal-area-personal .modal-header {
  padding: 1rem 1rem 0;
}

.btn-close-custom {
  margin-left: auto;
  border-radius: 50%;
  background-color: rgba(178, 41, 46, 0.08);
  opacity: 1;
  box-shadow: none;
}

.btn-close-custom:hover,
.btn-close-custom:focus {
  background-color: rgba(178, 41, 46, 0.16);
}

.modal-kicker {
  color: var(--tph-menu-rojo);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.modal-icon-wrapper {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tph-menu-rojo) 0%, #7f1526 100%);
  box-shadow: 0 16px 36px rgba(127, 21, 38, 0.28);
}

.modal-icon-wrapper .fa {
  color: var(--tph-blanco);
  font-size: 2rem;
}

.modal-title-custom {
  margin-bottom: 0.45rem;
  color: var(--tph-menu-rojo);
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: clamp(2.4rem, 4vw, 3.15rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.modal-subtitle {
  margin: 0 auto;
  max-width: 28rem;
  color: #5a2a20;
  font-family: var(--tph-font-body);
  font-size: 1rem;
}

.form-group-custom {
  text-align: left;
}

.form-label-custom {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--tph-menu-rojo);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.form-control-custom {
  min-height: 58px;
  border: 2px solid rgba(178, 41, 46, 0.16);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--tph-negro);
  font-family: var(--tph-font-body);
  font-size: 1rem;
  padding: 0.95rem 1rem;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control-custom::placeholder {
  color: #8b756c;
  opacity: 1;
}

.form-control-custom:hover {
  border-color: rgba(178, 41, 46, 0.32);
}

.form-control-custom:focus {
  border-color: var(--tph-menu-rojo);
  background-color: var(--tph-blanco);
  box-shadow: 0 0 0 0.25rem rgba(178, 41, 46, 0.14);
}

.password-wrapper {
  position: relative;
}

.password-wrapper .form-control-custom {
  padding-right: 3.5rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--tph-menu-rojo);
  font-size: 1.1rem;
  cursor: pointer;
}

.recuperar-pass-link {
  color: var(--tph-menu-rojo);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 0.95rem;
  text-decoration: none;
}

.recuperar-pass-link:hover,
.recuperar-pass-link:focus {
  color: #7f1526;
  text-decoration: underline;
}

.btn-acceso-custom,
.btn-cancelar-custom {
  min-height: 58px;
  border-radius: 999px;
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-acceso-custom {
  border: 2px solid var(--tph-menu-rojo);
  background: linear-gradient(135deg, var(--tph-menu-rojo) 0%, #7f1526 100%);
  color: var(--tph-blanco);
  box-shadow: 0 14px 28px rgba(127, 21, 38, 0.24);
}

.btn-acceso-custom:hover,
.btn-acceso-custom:focus {
  border-color: #8d1628;
  background: linear-gradient(135deg, #c5333b 0%, var(--tph-menu-rojo) 100%);
  color: var(--tph-blanco);
  transform: translateY(-1px);
}

.btn-cancelar-custom {
  border: 2px solid rgba(178, 41, 46, 0.2);
  background-color: transparent;
  color: var(--tph-menu-rojo);
}

.btn-cancelar-custom:hover,
.btn-cancelar-custom:focus {
  border-color: var(--tph-menu-rojo);
  background-color: rgba(178, 41, 46, 0.07);
  color: var(--tph-menu-rojo);
}

.alert-custom {
  margin-bottom: 0;
  border-radius: 18px;
  font-family: var(--tph-font-body);
}

@media (max-width: 575.98px) {
  .modal-area-personal {
    border-radius: 28px;
  }

  .modal-title-custom {
    font-size: 2.3rem;
  }

  .btn-acceso-custom,
  .btn-cancelar-custom {
    font-size: 1.3rem;
  }
}

/********************************************************************* botones *********************************************************/
.btn-formulario {
  color: #fff;
  font-family: var(--tph-font-special);
  font-size: 2rem;
  font-weight: bold;
  padding: 0rem 2rem 0rem 2rem;
  background-image: linear-gradient(to right, #9af750, #5ab127);
  transition: transform 0.3s ease;
  /* Opcional: Efecto al hacer clic */
  border-radius: 10px;
}

.btn-formulario:hover {
  transform: scale(1.05);
  /* Opcional: Efecto al pasar el cursor */
}

.btn-formulario:active {
  transform: scale(0.95);
  /* Opcional: Efecto al hacer clic */
}

.btn-formulario:focus {
  background-color: var(--tph-verde);
  color: #fff;
}

/* Botón principal del formulario */
.btn-participa {
  background-image: none;
  background-color: var(--tph-negro);
  color: var(--tph-blanco);
  font-family: var(--tph-font-display);
  border-radius: 45px;
  padding: 0 120px;  
  font-size: 2.5rem;  
}

.btnParticiparHero {
  background-color: var(--tph-azul);
  color: var(--tph-blanco);
  font-family: var(--tph-font-Futura-Condensed-Bold);
  border-radius: 9999px;
  padding: 0.2rem 4.4rem;
  font-size: 1.8rem;
  width: fit-content;
  text-decoration: none;
}

.btnParticiparHero:hover,
.btnParticiparHero:focus {
  background-color: var(--tph-azul);
  color: var(--tph-blanco);
}

.btn-participa:hover,
.btn-participa:focus {
  background-image: none;
  background-color: var(--tph-azul);
  color: #fff;
}

/********************************************************************************** header  *******************************************************************************/
.divTexto{
  margin-top: 4%;
  margin-left: 2%;
}

.heroParticipantes .divTexto{
  margin-top: 0;
  margin-left: 0;
}

.heroParticipantes__center{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heroParticipantes__headerBadges{
  width: 100%;
  min-height: clamp(200px, 18vw, 320px);
  top: 2.25rem;
  left: 0;
}

.heroParticipantes__headerBadge{
  display: block;
  height: auto;
  object-fit: contain;
}

.heroParticipantes__headerBadge--brand{
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(130px, 14vw, 190px);
}

.heroParticipantes__headerCenter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 21vw, 310px);
}

.heroParticipantes__headerBadge--festival{
  display: block;
  width: 100%;
}

.heroParticipantes__headerInfo{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-inline: 0.75rem;
}

.heroParticipantes__headerInfo .location{
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--tph-blanco);
  font-family: var(--tph-font-special);
  font-size: 1.30rem;  
}

.heroParticipantes__headerInfoImg{
  display: block;
  width: clamp(140px, 12vw, 210px);
  height: auto;
}

.heroParticipantes__headerInfo .responsable {
  color: var(--tph-blanco);
  font-family: var(--tph-font-Futura-Medium);
  line-height: 1;
  width: calc(100vw - 4rem);
  max-width: calc(100vw - 4rem);
  margin-top: 5rem;
  margin-left: calc(50% - 50vw + 2rem);
  margin-right: calc(50% - 50vw + 2rem);
  padding-inline: 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.75rem;
}

.heroParticipantes__doblez{
  width: 46%;
  height: auto;
  margin-top: 4.75rem;
  border-radius: 1.25rem;
}

.heroParticipantes__cta{
  margin-top: 3.5rem;
}

.heroParticipantes__flecha{
  width: 33%;
  height: auto;
}

.heroParticipantes__ctaText{
  font-family: var(--tph-font-Futura-Condensed-Bold);
  color: var(--tph-blanco);
  line-height: 1;
  margin-top: 3rem;
  font-size: 1.8rem;
}

.heroParticipantes{
  position: relative;
  overflow-x: clip;
}

/* Participantes: bloque azul del hero (imagen + título + logo) */
.heroParticipantes__blueBar{
  background-color: var(--tph-azul);
  width: 72%;
  margin-top: 11%;
  position: relative;
  overflow: visible;
}

.heroParticipantes__titleRow{
  display: flex;
  margin-left: 17%;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.heroParticipantes__blueBar--noPrize .heroParticipantes__titleRow{
  margin-left: 112%;
}

.heroParticipantes__titleRow .divTexto{
  text-align: center !important;
}

.heroParticipantes__prizeThumb{
  width: clamp(160px, 16vw, 320px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  margin-left: clamp(3.5rem, 7vw, 14rem);
  /* Sobresale hacia la izquierda del recuadro azul */
  margin-right: clamp(0.5rem, 1.25vw, 1.5rem);
  /* Sobresale por arriba y por abajo del recuadro azul */
  margin-top: clamp(-70px, -4vw, -28px);
  margin-bottom: clamp(-70px, -4vw, -28px);
}

/* Mini carrusel de premios (solo Participantes) */
.heroParticipantes__prizeCarrosel{
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.heroParticipantes__prizeViewport{
  /* Nota: no se puede confiar en overflow-y: visible si overflow-x está hidden;
     el navegador termina recortando también en vertical.
     Usamos clip-path para recortar en X y permitir “sobresalir” en Y. */
  overflow: visible;
  -webkit-clip-path: inset(-160px 0 -160px 0);
  clip-path: inset(-160px 0 -160px 0);
  width: clamp(160px, 16vw, 360px);
}

.heroParticipantes__prizeTrack{
  display: flex;
  transition: transform 250ms ease;
  will-change: transform;
}

.heroParticipantes__prizeItem{
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroParticipantes__prizeCarrosel .heroParticipantes__prizeThumb{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  /* Que sobresalga más por arriba/abajo dentro del mini-carrusel */
  margin-top: clamp(-95px, -6vw, -45px);
  margin-bottom: clamp(-95px, -6vw, -45px);
}

.heroParticipantes__prizeCarrosel{
  overflow: visible;
}

.heroParticipantes__prizeArrow{
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
}

.heroParticipantes__prizeArrow img{
  width: 26px;
  height: auto;
}

.heroParticipantes__teamThumb{
  width: clamp(120px, 14vw, 240px);
  margin-left: 0;
  height: auto;
  border-radius: 1.25rem;
}

/* Thumb fuera del recuadro azul */
.heroParticipantes__teamThumb--float{
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: clamp(0.5rem, 1.25vw, 1.5rem);
  transform: translateY(-50%);
  z-index: 3;
}

.heroParticipantes__logo{
  width: clamp(70px, 10vw, 120px);
  height: auto;
}

.heroParticipantes__premios{
  font-family: var(--tph-font-Futura-Medium);
  margin-top:5%;
  margin-left:31% !important;
  color: var(--tph-blanco);
  background-color: transparent;
}
.tituloBarriga,.tituloCervecera,.tituloBarrigaParticipante,.tituloCerveceraParticipante{
  color:var(--tph-blanco);
  line-height: 0.9;
}

.tituloBarriga,
.tituloBarrigaParticipante{
  font-family: var(--tph-font-display);
}

.tituloCervecera,
.tituloCerveceraParticipante{
  font-family: var(--tph-font-Futura-Condensed-Bold);
}

.tituloBarriga{
  font-size: 8rem;
}

.tituloCervecera{
  font-size: 6.6rem;
}

.tituloBarrigaParticipante,
.tituloCerveceraParticipante{
  line-height: 1;
}

.imgAzucar{
  width: 84%;
}

.txtAzucar{
  font-family: var(--tph-font-Futura-Condensed-Bold);
  color:var(--tph-blanco);
  font-size: 2.5rem;
  padding-left: 17%;
}
.txtCompra{
  font-family: var(--tph-font-Futura-Condensed-Bold);
  color:var(--tph-blanco);
  padding-left: 51%;
  margin-top: 4%;
}
.inicio-sub {
  font-family: var(--tph-font-Futura-Medium);
  color: var(--tph-blanco);
  background-color: var(--tph-azul);
  margin-top: 4%;
}

/* Carrusel de regalos (hero) */
.heroCarroselWrapper{  
  margin-top: 12%;
  width: 100%;
  /* Por defecto oculto (<=1300px). Se activa en media queries. */
  display: none;
  justify-content: center;
}

.heroCarrosel{
  /* 4 elementos visibles */
  --heroCarrosel-visible: 4;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  gap: 1rem;
}

.heroCarrosel__viewport{
  flex: 1 1 auto;
  overflow: hidden;
}

.heroCarrosel__track{
  display: flex;
  transition: transform 250ms ease;
  will-change: transform;
}

.heroCarrosel__item{
  flex: 0 0 calc(100% / var(--heroCarrosel-visible));
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroCarrosel__img{
  display: block;
  width: 100%;
  height: 380px;
  object-fit: contain;
}

.heroCarrosel__arrow{
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
}

.heroCarrosel__arrow img{
  width: 32px;
  height: auto;
}



.imgTripleParticipante{
  margin-top: 94%;
  margin-right: 2%;
}


.imgTriple {
  margin-top: 9%;
  margin-right: 2%;
}

/*********************************************************************DIV ENTRE HEADER Y MECANICA *****************************************************************************/
.linea-negra{
  border: 0;
  height: 3px;
  background-color: #000;  /* negro puro */
  opacity: 1 !important;   /* anula el .25 de Bootstrap */
}

.divEntreHeaderyMecanica{
  background-color: var(--tph-gris);
}

/********************************************************************************************************************************************************************************/

/********************************************************************************** maquinaria  *******************************************************************************/



/********************************************************************************** mecánica  *******************************************************************************/



#mecanica .txtComoParticipar,.txtComoParticiparMargin{
  color:var(--tph-ambar);
  font-family: var(--tph-font-display);
  font-size: 3rem;
}

#mecanica .txtComoParticipar span {
  color: var(--tph-blanco);
}

.txtComoParticiparMargin{
  margin-top: 6%;
}

.txtPromo{
  color: var(--tph-negro);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 1rem;  
}

#mecanica .txtResponsable {
  font-family: var(--tph-font-Futura-Medium);
  color: var(--tph-blanco);
  font-size: 0.6rem;
}

#mecanica .txtMenor {
  color: var(--tph-blanco);
  font-size: 1.6rem;
  font-family: var(--tph-font-special);
  line-height: 1;  
}

.festivalesHero__stepsMobile {
  display: none;
}

.festivalesHero__stepsMobileImg {
  width: min(320px, calc(100vw - 2rem));
  height: auto;
  margin: 1rem auto 0;
}

.separator {
  background-color: var(--tph-ambar);
  height: 3px;
  border: none;
  margin-top: 30px;
}

.source-text {
  color: var(--tph-ambar);
  font-family: var(--tph-font-special);
  font-size: 1.85rem;
}

.source-btns button {
  background: none;
  border:none;
  width: calc(40% - 0.25rem);
}

.source-btns .source-btn p {
  color: var(--tph-blanco);
  font-family: var(--tph-font-special);
  font-size: 1.35rem;
}


.choice-festival {
  color: var(--tph-blanco);
  font-family: var(--tph-font-special);
  font-size: 1.85rem;
  padding: 0 7.18rem;
  line-height: 1;
}

.festivals-btns .d-flex button {
  width: calc(40% - 0.25rem);
  background: none;
  border: none;
}

.festivals-btns button p {
  color: var(--tph-blanco);
  font-family: var(--tph-font-special);
  font-size: 1.25rem;
  margin-top: 10px;
}

.festivals-btns  .d-flex .continue-btn {
  color: var(--tph-negro);
  background-color: var(--tph-ambar);
  font-family: var(--tph-font-display);
  font-size: 2rem;
  padding: 10px 45px;
  border-radius: 30px;
  border:none;
  width: auto;
}

.logos {
  align-items: center;
  gap: 2.25rem;
}

.logos__img {
  display: block;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
  max-width: 100%;
}

.logos__img--ambar {
  width: 2636%;
  max-width: 280px;
  align-self: center;
}

.logos__img--fiesteros {
  width: 48%;
  max-width: 460px;
  align-self: center;
}

#mecanica-titulo {
  margin-top: 3rem;
}

#mecanica .txtPromo {
  color: var(--tph-blanco);
}

.mecanicaPasos{
  gap: 1rem;
}

.mecanicaPaso{
  width: 100%;
}

.mecanicaPaso__row{
  gap: .45rem;
}

.mecanicaPaso__img{
  width: 20%;
  height: auto;
  flex: 0 0 auto;
}

.mecanicaPaso__text{
    font-family: var(--tph-font-Futura-Condensed-Bold);
    color: var(--tph-blanco);
    line-height: 1.05;
    font-size: 1.6rem;
    margin-top: 6%;  
    text-align: left;
    margin-left: 30px;
}

.mecanicaPaso__text span {
  color: var(--tph-ambar);
}

.imgBotella{
  width:45%;
  margin-bottom: -1px;
}
.divPasos{
  margin-top:2rem;
  --bs-gutter-x: .75rem;
}

@media (max-width: 991.98px) {
  .divPasos {
    margin-top: 1.25rem;
    row-gap: 1.5rem;
  }

  .divPasos__media {
    margin-top: 0.5rem;
  }

  .imgBotella {
    width: min(74vw, 300px);
    margin-left: auto;
    margin-right: auto;
  }

  .mecanicaPasos {
    width: 100%;
    gap: 1.25rem;
  }

  .mecanicaPaso {
    margin-bottom: 0 !important;
  }

  .mecanicaPaso__row {
    align-items: center !important;
    gap: 0.8rem;
  }

  .mecanicaPaso__img {
    width: min(20vw, 78px);
  }

  .mecanicaPaso__text {
    margin-top: 0;
    margin-left: 0;
    font-size: clamp(1.2rem, 4.9vw, 1.6rem);
    line-height: 1;
    text-align: center;
  }
}

@media (min-width: 992px){
  .divPasos__media{
    display: flex;
    justify-content: flex-end;
  }

  .divPasos__content{
    display: flex;
    justify-content: flex-start;
  }

  .divPasos__content .mecanicaPasos{
    width: 100%;
    max-width: 32rem;
  }

  .imgBotella{
    width: min(100%, 22rem);
    margin-left: auto;
    margin-right: 0;
  }
}
/* Títulos */
.mec-title {
  color: var(--tph-negro);
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  text-transform: uppercase;
}

.mec-sub {
  color: var(--tph-negro);
  font-weight: 600;
  font-size: clamp(.95rem, .4vw + .8rem, 1.1rem);
}

/* Botones de patrocinio */
.patrocinio-btn {
  background: transparent;
}

.patrocinio-img {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}

.patrocinio-img img {
  display: block;
}

/* Pasos */
.step-icon {
  width: clamp(120px, 24vw, 180px);
  height: auto;
}

.step-badge {
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: #000;
  color: var(--tph-amarillo);
  font-weight: 900;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.step-text {
  color: var(--tph-negro);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
  font-size: clamp(.9rem, .6vw + .75rem, 1.05rem);
}

/* Marca bizum (texto) */
.bizum {
  font-weight: 900;
  text-transform: lowercase;
}



/********************************************************************************** bizum  *******************************************************************************/

/* Fondo negro por si no existe tu utilidad */
.bg-negro {
  background-color: var(--tph-negro, #000);
}

/* Texto legal */
.bizum-legal {
  font-size: clamp(.72rem, .25vw + .65rem, .85rem);
  line-height: 1.35;
  opacity: .95;
  margin-inline: auto;
  max-width: 1100px;
}

/* Logos */
.brand-logo {
  width: clamp(160px, 30vw, 320px);
  height: auto;
  filter: brightness(0) invert(1);
  /* por si algún PNG no es blanco puro */
}


/********************************************************************************** countdown  *******************************************************************************/


#countdown .wrapper {
  text-align: center;
}

#countdown .time {
  color: var(--tph-cuenta-atras);
  font-size: 3.5rem;
  padding: 0.25rem;
  font-family: var(--tph-font-body);
}

#countdown .label {
  font-size: 1rem;
  display: block;
  color: var(--tph-cuenta-atras);
  /* text-shadow     : 2px 2px #FF0620; */
}

#countdown svg {
  font: bold 5rem;
  width: 100%;
  height: 120px;
}

#countdown text {
  fill: none;
  stroke: var(--tph-cuenta-atras);
  stroke-width: 6px;
  stroke-linejoin: round;
  /* text-shadow     : 2px 2px #FF0620; */
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50% {
    text-shadow: 4px 4px var(--tph-cuenta-atras);
  }
}

/********************************************************************************** participa  *******************************************************************************/
#participa-titulo{
  font-size: 3rem;
  background-color: var(--tph-naranja);
  color: var(--tph-blanco);
}

#participa {
  background-color: var(--tph-texto-como-participar);
  padding-bottom: 2rem;
}

#participa .txtComoParticiparMargin {
  color: var(--tph-negro);
}

#participa .subeTicket h1 {
  font-family: var(--tph-font-body);
  font-weight: bold;
  font-size: 3rem;
  color: #fff;
}
#participa .subeTicket p {
  font-family: var(--tph-font-body);
  font-weight: 100;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 12rem;
}

#participa form#formReg_l,
#participa form#formReg_l.row,
#participa form#formReg_l .row,
#participa form#formReg_l .form-row {
  margin-left: 0;
  margin-right: 0;
}

form#formReg_l label {
  display: block;
  color: #000;
  font-family: var(--tph-font-Futura-Medium);
}

form#formReg_l input {
  border: none;
}

form#formReg_l .form-control {
  color: var(--tph-form-input);
  background-color: var(--tph-form-bg);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 1rem;
  border-radius: 24px;
}

form#formReg_l .form-select {
  color: var(--tph-form-input);
  background-color: var(--tph-form-bg);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 1rem;
  border-radius: 24px;
}

form#formReg_l label.custom-control-label {
  display: block !important;
  color: var(--tph-form-label);
  font-size: 1rem;
}

form#formReg_l .form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--tph-form-placeholder);
  ;
  opacity: 1;
  /* Firefox */
}

form#formReg_l .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--tph-form-placeholder);
}

form#formReg_l .form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--tph-form-placeholder);
}

form#formReg_l .form-select::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--tph-form-placeholder);
  opacity: 1;
  /* Firefox */
}

form#formReg_l .form-select:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--tph-form-placeholder);
}

form#formReg_l .form-select::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--tph-form-placeholder);
}

form#formReg_l a {
  color: var(--tph-naranja);
}

form option {
  color: #000000;
  font-size: 1rem;
}

form option:hover {
  background-color: #ffffff;
}

form .input-group-text {
  background: #fff;
  border: none;
}


/* Checkbox tipo switch (bolita) — estilo B/N en este formulario */
form#formReg_l .form-check-label {
  font-family: var(--tph-font-Futura-Medium);
  color: #000;
}

form#formReg_l .form-switch .form-check-input {
  background-color: #fff;
  border-color: #000;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}

form#formReg_l .form-switch .form-check-input:checked {
  background-color: #000;
  border-color: #000;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

form#formReg_l .form-switch .form-check-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .15);
}

/********************************************************************************** contacto  *******************************************************************************/

#contacto {
  text-align: center;  
  color: var(--tph-blanco);
}

.titulo{
  color: var(--tph-blanco);
  font-family: var(--tph-font-display);
  font-size: 3.5rem;
}

#contacto p , .horario{
  color: var(--tph-blanco);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 1.5rem;
}

#contacto .subtitulo {
  font-family: var(--tph-font-Futura-Medium);
  font-size: 1.125rem;
}

#contacto .tel_promo a {
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--tph-blanco);
}

#contacto .email_contacto a {
  font-family: var(--tph-font-Futura-Condensed-Bold);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tph-blanco);
  font-size: 1.5rem;
}

.horario{
  font-size: 1.1rem !important;
  margin-top: 6%;
}

footer {
  background-color: var(--tph-negro);
  max-width: 100%;
  margin-top: 5rem;
}

footer .container {
  width: inherit;
}

footer {
  padding: 2rem;
  background-color: var(--tph-negro);
  color: #ffffff;
}

footer a {
  color: #fff;
}

footer p {
  color: #fff;
}

footer .logo-footer {
  max-width: 200px;
}

footer .small {
  font-size: 0.7rem;
}


/********************************************************************************** media query  *******************************************************************************/
@media (max-width: 767.98px) {

  body {
    background-image: none;
  }

  .txtComoParticiparMargin {
    margin-top: 3rem;
    font-size: clamp(2.2rem, 8vw, 2.85rem);
    line-height: 0.94;
  }

  .festivalesHero__stepsMobile {
    display: block;
  }

  #mecanica .txtResponsable {
    font-size: 1rem;
  }
  
  #mecanica .txtComoParticipar {
    font-size: clamp(2.4rem, 8.5vw, 3rem);
    text-wrap: balance;
    line-height: 0.95;
  }

  #mecanica .container,
  #participa .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .divPasos {
    margin-top: 1.25rem;
    row-gap: 1.5rem;
  }

  .divPasos__media {
    margin-top: 0.5rem;
  }

  .imgBotella {
    width: min(74vw, 300px);
    margin-left: auto;
    margin-right: auto;
  }

  .mecanicaPasos {
    width: 100%;
    gap: 1.25rem;
  }

  .mecanicaPaso {
    margin-bottom: 0 !important;
  }

  .mecanicaPaso__row {
    align-items: center !important;
    gap: 0.8rem;
  }

  .mecanicaPaso__img {
    width: min(20vw, 78px);
  }

  .mecanicaPaso__text {
    margin-top: 0;
    margin-left: 0;
    font-size: clamp(1.2rem, 4.9vw, 1.6rem);
    line-height: 1;
    text-align: center;
  }

  #mecanica .txtMenor {
    font-size: 2.5rem;
    margin-top: 2rem;
  }  

  #mecanica .source-text {
    font-size: 4rem;
    line-height: 1;
    margin: 2rem 0 4rem 0;
  }

  .source-btns .source-btn p {
    font-size: 2rem;
  }

  .source-btns {
    width: 100%;
  }

  .source-btns button {
    width: 100%;
  }

  .choice-festival {
    color: var(--tph-ambar);
    font-size: 3rem;
    padding: 0;
    margin: 2.5rem 0;
  }  

  .festivals-btns .d-flex {
    width: 100%;
  }

  .festivals-btns .d-flex button {
    width: 100%;    
  }

  .festivals-btns .d-flex .continue-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: clamp(1.7rem, 6vw, 2rem);
    padding: 0.7rem 1.1rem;
    margin: 3rem 0;
  }

  .festivals-btns button p {
    font-size: 2rem;
  }

  .participar-mobile {
    font-size: 2.5rem;
    color: var(--tph-blanco);
    font-family: var(--tph-font-display);
    background-color: var(--tph-ambar);
    border-radius: 30px;
    width: auto;
    margin: 0 auto;
    padding: 5px 30px;
  }

  #mecanica-titulo span {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
  }

  #mecanica .txtPromo {
    color: var(--tph-blanco);
    font-size: 2rem;
    line-height: 1;
    padding: 0 2.2rem;
  }

  #mecanica .mecanicaPaso__img {
    width: min(30vw, 120px);    
  }

  #mecanica .mecanicaPaso__text {
    font-size: 3.5rem;    
  }

  #mecanica .mecanicaPaso {
    margin: 3rem 0;
  }


  #mecanica .imgBotella {
    margin-top: 4rem;
  }

  #participa .txtComoParticiparMargin {
    color: var(--tph-negro);
  }

  #participa .txtPromo {
    font-size: 1.2rem;
  }

  .logos {
    flex-direction: column;
    gap: 1rem;
  }

  .logos__img--ambar {
    width: min(68%, 220px);
    max-width: 220px;
  }

  .logos__img--fiesteros {
    width: min(78%, 260px);
    max-width: 260px;
  }

  #countdown .time {
    font-size: clamp(2.3rem, 9vw, 3rem);
  }

  #countdown .label {
    font-size: 0.85rem;
  }

  #countdown svg {
    height: 96px;
  }

  .countdown-card {
    padding: 2rem 1.1rem !important;
    border-radius: 1.5rem;
  }

  .countdown-title {
    font-size: clamp(1.35rem, 5.4vw, 1.8rem);
    line-height: 1;
    margin-bottom: 1.25rem !important;
  }

  #participa {
    padding-top: 0.25rem;
    padding-bottom: 3rem;
  }

  #participa .txtPromo {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem !important;
    font-size: 1.2rem;
    line-height: 1.2;
  }

  #participa form#formReg_l .row,
  #participa form#formReg_l .form-row {
    row-gap: 0.65rem;
  }

  form#formReg_l label,
  form#formReg_l label.custom-control-label,
  form#formReg_l .form-check-label {
    font-size: 0.96rem;
    line-height: 1.2;
  }

  form#formReg_l .form-control,
  form#formReg_l .form-select,
  form#formReg_l .input-group-text {
    min-height: 3.15rem;
    border-radius: 1.55rem;
    padding: 0.8rem 1.05rem;
  }

  .btn-participa {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 1.4rem;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    line-height: 1;
  }

  .heroParticipantes__headerInfo {
    width: 100%;
    padding-inline: 0;
  }

  .heroParticipantes__headerInfo .location {
    background-color: var(--tph-negro-bg-titulo-festival);
    width: 100%;
    box-sizing: border-box;
    padding: 15px 30px;
    white-space: normal;
    line-height: 1.05;
    border-radius: 5px;
  }

  .heroParticipantes__headerInfoImg {
    width: min(88%, 280px);
    margin-top: 2rem !important;    
  }

  .heroParticipantes__headerInfo .responsable {
    color: var(--tph-blanco);
    font-family: var(--tph-font-Futura-Medium);
    line-height: 1;
    width: calc(100vw - 4rem);
    max-width: calc(100vw - 4rem);
    margin-top: 5rem;
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
    padding-inline: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.75rem;
  }

  .heroParticipantes__cta {
    margin-top: 0;
  }
  .divTexto{
    margin-left: 0;
    text-align: center;
  }

  .heroTitleBlock {
    margin-top:0%;
  }
  .tituloBarriga {
    font-size: 3.5rem;
  }

  .tituloCervecera {
    font-size: 2.9rem;
  }

  .imgAzucar,.imgAzucarParticipante {
    width: 77%;
  }

  .imgTriple--mobile {
    width: 16%;
    margin-top: 2rem;
    margin-left: 2.5rem;
  }

  .txtCompra{
    margin-top: 6%;
    padding-left: 0;
    text-align: center;
  }

  .txtComoParticipar{
    font-size: 1.8rem;
  }
  

  .inicio-sub {
    font-size: 0.8rem;
    margin-top:-8%;
  }

  .logoAmbarRed {
    width: 82%;
    margin-top: -12%;
  }

  #contacto .titulo {
    font-size: 2.3rem;
  }

  #contacto p {
    font-size: 1.15rem;
  }

  #contacto .subtitulo {
    font-size: 1.15rem;
  }

  #contacto .tel_promo a,
  #contacto .email_contacto a {
    font-size: 1.8rem;
  }

  #contacto .horario {
    font-size: 0.95rem !important;
  }

  .heroParticipantes__headerBadges {
    top: 40% !important;
    transform: translateY(-50%);
  }

  .heroParticipantes__doblez {
    width: 45%;
    height: auto;
    margin-top: 1.75rem;
    border-radius: 1.25rem;
}
  .heroParticipantes__ctaText {
    margin-top: 1.5rem;
    font-size: 1.2rem;
  }

  .tituloBarrigaParticipante{
    font-size: 3.6rem;
  }

  .tituloCerveceraParticipante{
    font-size: 3rem;
  }

  .btn-participa {
    padding: 0.5rem 4rem;
    font-size: 3rem;
  }
  .heroParticipantes__flecha {
    width: 28%;
  }

  /* Carrusel en móvil: 1 sola imagen visible */
  .heroCarroselWrapper{
    display: flex;
    margin-top: 0.75rem;
  }

  .heroCarrosel{
    --heroCarrosel-visible: 1;
    max-width: 520px;
  }

  .heroCarrosel__img{
    height: 220px;
  }

}

/* A partir de 992px (desktop) */
@media (min-width: 992px) {
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .tituloBarriga{
    font-size: 5rem;
  }
.heroParticipantes__logo {
    width: clamp(70px, 7vw, 120px);
    height: auto;
}
  .tituloCervecera{
    font-size: 4.1rem;
  }
.heroParticipantes__teamThumb{
    top:57%;
        width: clamp(120px, 20vw, 240px);
}
  .imgAzucar{
    width: 58%;
  }

  .heroParticipantes__titleRow{
    margin-left: 0;
  }

  .heroParticipantes__prizeThumb{
    width: clamp(180px, 16vw, 360px);
    margin-right: 0;
            margin-left: 0;
    margin-top: clamp(-95px, -6vw, -45px);
    margin-bottom: clamp(-95px, -6vw, -45px);
  }
.heroParticipantes__premios {
    margin-top: 3%;
    margin-left: 9% !important;}
.heroParticipantes__cta {
    margin-top: 0.5rem;
}
  .txtCompra{
    font-size: 0.8rem;
    line-height: 1.15;
  }

  .heroCarroselWrapper{ display: flex; margin-top: 0.4rem; }
  .heroCarrosel{ max-width: 760px; gap: .6rem; }
  .heroCarrosel__img{ height: 240px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .tituloBarrigaParticipante{
    font-size: 4.4rem;
  }

  .tituloCerveceraParticipante{
    font-size: 3.6rem;
  }

  .imgAzucarParticipante{
    width: 85%;
  }
}

@media (min-width: 1200px) {
  .imgAzucarParticipante {
    width: 97%;
}
.heroParticipantes__logo {
    width: clamp(70px, 10vw, 82px);
    height: auto;
}

  .tituloBarriga{
    font-size: 5.8rem;
  }

  .tituloCervecera{
    font-size: 4.7rem;
  }

  .imgAzucar{
    width: 62%;
  }

  /* Mostrar carrusel también en 1200px (se mantiene oculto en 768–1199) */
  .heroCarroselWrapper{ display: flex; margin-top: 0.4rem; }
  .heroCarrosel{ max-width: 900px; gap: .6rem; }
  .heroCarrosel__img{ height: 290px; }

.tituloBarrigaParticipante {
    font-size: 5rem;
}
.tituloCerveceraParticipante {
    font-size: 4.1rem;
}
.heroParticipantes__titleRow {
    margin-left: 3%;
}
}

@media (min-width: 1300px) {
  .tituloBarriga {
    font-size: 6.6rem;
  }

  .tituloCervecera {
    font-size: 5.4rem;
  }

  .tituloBarrigaParticipante {
    font-size: 5rem;
  }
  .tituloCerveceraParticipante {
    font-size: 4.1rem;
  }
.heroParticipantes__titleRow {
    display: flex;
    margin-left: 2%;
  }
  .heroParticipantes__premios {
    margin-left: 25%;
  }
  .imgAzucar {
    width: 72%;
}
  /* Mostrar carrusel desde 1300px */
  .heroCarroselWrapper{ display: flex; margin-top: clamp(0.75rem, 2vw, 2.75rem); }

  /* Tamaño “normal” entre 1300px y 1599px */
  .heroCarrosel{ max-width: 1100px; }
  .heroCarrosel__img{ height: 380px; }
}

/* Solo para “responsive 1300px” (aprox 1300–1399px): carrusel más pequeño */
@media (min-width: 1300px) and (max-width: 1399.98px) {
  .heroCarroselWrapper{ margin-top: 0.4rem; }
  .heroCarrosel{ max-width: 900px; gap: .6rem; }
  .heroCarrosel__img{ height: 300px; }
}

@media (min-width: 1600px) {
  /* Grande a partir de 1600px */
  .tituloBarriga{
    font-size: 6rem;
  }

  .tituloCervecera{
    font-size: 4.8rem;
  }

  .imgAzucar{
    width: 65%;
  }

  .tituloBarrigaParticipante{
    font-size: 7rem;
  }

  .tituloCerveceraParticipante{
    font-size: 5.8rem;
  }

 .imgAzucarParticipante{
    width: 91%;
}
  .heroCarrosel{ max-width: 1320px; }
  .heroCarrosel__img{ height: 500px; }
  .heroCarrosel__arrow img{ width: 36px; }
}
@media (min-width: 1900px) {
  .header-branding{
    width:90%;
  }
  .h2Header {
    font-size: 3.5rem;
  }
}