:root {
  --tph-azul:#1d2d50;
  --tph-fondo:#eff0eb;
  --tph-amarillo:#ffdd01;
  --tph-font-AcuminProCond: 'AcuminProCond';
  --tph-font-FuturaSH: 'FuturaSH';
  --tph-font-Montserrat-Medium: 'MONTSERRAT-MEDIUM';
  
  
  --tph-blanco: #ffffff;
  --tph-negro: #000000;
  --tph-verde:#14B500;
  
  --tph-crema:#DCCEBF;
  --tph-marron:#593D26;
  --tph-font-Futura-Condensed-Bold: 'Futura-Condensed-Bold';
  --tph-font-Futura-Medium:'Futura Medium';
  /* Área personal: colores + tipografía desde el tema */
  --tph-area-personal-color: var(--tph-azul);
  --tph-area-personal-color-rgb: 29 45 80;
  --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: #000000;
  --tph-form-bg: #f6f6f2;
  --tph-font-body: 'Helvetica Neue', Arial, sans-serif;
  --tph-font-special: 'Gotham-Bold';
}

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

@font-face {
  font-family: 'AcuminProCond';
  src: url('../../../fonts/acuminprocond-medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FuturaSH';
  src: url('../../../fonts/FuturaSH-XBoldCon.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MONTSERRAT-MEDIUM';
  src: url('../../../fonts/MONTSERRAT-MEDIUM.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Futura-Condensed-Bold';
  src: url('../../../fonts/Futura-Condensed-Extra-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextCondensed-HeavyItalic';
  src: url('../../../fonts/AvenirNextCondensed-HeavyItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

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

html,
body {
  overflow-x: hidden;
}

body {
  background-color: var(--tph-fondo);
}

/********************************************************************* 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-azul);
  font-family: var(--tph-font-Montserrat-Medium);
}

/* 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{
  max-width: 16%;
  margin-left: 8px;
  margin-bottom: 2%;
}

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

/* 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:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

.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='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.areaCliente{
  color: var(--tph-blanco) !important;;
  display: flex;
  justify-content: center;
  text-align: center;
}

/********************************************************************* botones *********************************************************/
.btn-formulario {
  color: #fff;
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: 2rem;
  font-weight: bold;
  padding: 0rem 2rem 0rem 2rem;
  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: #c62828;
  font-family: var(--tph-font-Futura-Condensed-Bold);
  border-radius: 0;
  padding-left: 4rem;
  min-width: 76%;
  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: #b71c1c;
  color: #fff;
}

#participa #btnReg_l,
#participa #btnWait {
  background-image: none;
  background-color: #c62828;
  color: #fff;
  border-radius: 0;
  border-color: #c62828;
  font-family: var(--tph-font-Futura-Condensed-Bold);
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

#participa #btnWait {
  opacity: 1;
}

/********************************************************************************** modal acceso área personal  *******************************************************************************/

.modal-title-custom,
#accesoMicuentaLabel {
  margin-bottom: 0.45rem;
  color: var(--tph-azul);
  font-family: var(--tph-font-FuturaSH);
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.modal-subtitle {
  margin: 0 auto;
  max-width: 28rem;
  color: color-mix(in srgb, var(--tph-azul) 78%, black 22%);
  font-family: var(--tph-font-AcuminProCond);
  font-size: 1.1rem;
  line-height: 1.3;
}

.modal-icon-wrapper {
  width: 82px;
  height: 82px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tph-amarillo) 0%, #f5bf00 100%);
  box-shadow: 0 14px 28px rgb(29 45 80 / 0.16);
}

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

.btn-acceso-custom,
.btn-cancelar-custom {
  min-height: 58px;
  border-radius: 999px;
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: 1.45rem;
  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, border-color 0.2s ease;
}

.btn-acceso-custom {
  border: 2px solid var(--tph-azul);
  background: var(--tph-azul);
  color: var(--tph-blanco);
  box-shadow: 0 14px 28px rgb(29 45 80 / 0.22);
}

.btn-acceso-custom:hover,
.btn-acceso-custom:focus {
  border-color: var(--tph-negro);
  background: var(--tph-negro);
  color: var(--tph-blanco);
  transform: translateY(-1px);
}

.btn-cancelar-custom {
  border: 2px solid var(--tph-amarillo);
  background: var(--tph-amarillo);
  color: var(--tph-negro);
  box-shadow: 0 10px 22px rgb(255 221 1 / 0.24);
}

.btn-cancelar-custom:hover,
.btn-cancelar-custom:focus {
  border-color: var(--tph-negro);
  background: var(--tph-negro);
  color: var(--tph-amarillo);
  transform: translateY(-1px);
}

.password-wrapper {
  position: relative;
}

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

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tph-azul);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus {
  background: rgb(29 45 80 / 0.08);
  color: var(--tph-azul);
  outline: none;
}

.password-toggle .fa {
  font-size: 1.2rem;
}

/********************************************************************************** header  *******************************************************************************/
.headerClaimBar{
  display: flex;
  justify-content: center;
  padding: 1.4rem 1rem 0.35rem;
}

.headerClaimText{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--tph-azul);
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: clamp(0.62rem, 0.55rem + 0.45vw, 0.95rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.headerClaimText__lead{
  word-spacing: 0.24em;
}

.headerClaimText__trail{
  word-spacing: 0.24em;
}

.headerClaimLogo{
  width: clamp(18px, 1rem + 0.8vw, 34px);
  height: auto;
  flex: 0 0 auto;
}

.headerCurvedTitle{
  display: flex;
  justify-content: center;
  padding: 2.95rem 1rem 1.75rem;
}

.headerCurvedTitle__text{
  display: inline-block;
  color: var(--tph-azul);
  font-family: var(--tph-font-FuturaSH);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 0.85rem + 1.1vw, 2.2rem);
  line-height: 1.1;
  text-align: center;
  transform: rotate(-9deg);
  transform-origin: center center;
}

.headerCurvedTitle__line{
  display: inline-block;
}

.headerCurvedTitle__line--hero{
  font-size: 4.6em;
  line-height: 0.95;
}

.headerCurvedTitle__line--lead{
  font-size: 3.35em;
  line-height: 1;
}

.headerCurvedTitle__line--body{
  font-size: 1.22em;
  line-height: 1;
}

.headerCtaWrap{
  display: flex;
  justify-content: center;
  padding: 1.35rem 1rem 1.5rem;
}

.headerCtaBtn{
  display: inline-block;
  background-color: #c62828;
  color: var(--tph-blanco);
  font-family: var(--tph-font-AcuminProCond);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.45rem);
  line-height: 1;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.75rem 5.75rem;
}

.headerCtaBtn:hover,
.headerCtaBtn:focus{
  background-color: #b71c1c;
  color: var(--tph-blanco);
}

.headerSocialWrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem 1.75rem;
  justify-content: center;
}

.headerSocialIcons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.headerSocialIcon{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.headerSocialText{
  color: var(--tph-azul);
  font-family: var(--tph-font-AcuminProCond);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.06em;
}


.headerTopBandWrap{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.headerTopBand{
  display: block;
  width: 100vw;
  margin-top: 10rem;
}

.headerPrizeWrap{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -22%);
  width: min(100%, 720px);
  padding: 0 1rem 0.75rem;
  z-index: 1;
}

.headerPrizeImg{
  display: block;
  width: 144%;
  height: auto;
  margin-top: 48%;
  margin-left: -20%;
}

.headerTopBand__img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.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__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;
}

/* 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{
  font-family: var(--tph-font-Futura-Condensed-Bold);
  color:var(--tph-blanco);
  line-height: 0.9;
}

.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{
  background-color: var(--tph-amarillo);
}


.txtComoParticipar,.txtComoParticiparMargin{
  color:var(--tph-azul);
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: 3.4rem;
}

.txtComoParticiparMargin{
  margin-top: 6%;
}

.logoAmbarRed{
  width: 28%;
  margin-top: 6%;
}

#mecanica .txtMenor{
  font-family: var(--tph-font-AcuminProCond);
  color: var(--tph-azul);
  font-weight: 500;
}

#mecanica .txtMenor strong{
  font-weight: 700;
}

.mecanicaLegal{
  color: var(--tph-azul);
  font-family: var(--tph-font-AcuminProCond);
  font-size: 0.8rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.mecanicaLegal strong{
  font-weight: 700;
}

.mecanicaIntro{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.8rem;
  line-height: 1.45;
}

.mecanicaPasos{
  gap: 1rem;
}

.mecanicaSteps{
  align-items: stretch;
}

.mecanicaStepCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}

.mecanicaStepCard__img{
  width: min(100%, 280px);
  margin-bottom: 1.5rem;
}

.mecanicaStepCard__badge{
  color: var(--tph-negro);
  font-family: var(--tph-font-Futura-Medium);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mecanicaStepCard__title{
  color: var(--tph-azul);
  font-family: var(--tph-font-FuturaSH);
  font-size: clamp(2rem, 1.1rem + 1.8vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-top:5%;
}

.mecanicaStepCard__body,.mecanicaStepCard__body3{
  color: var(--tph-azul);
  font-family: var(--tph-font-AcuminProCond);
  font-size: 1rem;
  line-height: 1.45;
  max-width: 290px;
  margin-top:2%;
}

.mecanicaSteps > div:nth-child(1) .mecanicaStepCard__body,
.mecanicaSteps > div:nth-child(3) .mecanicaStepCard__body,
.mecanicaSteps > div:nth-child(1) .mecanicaStepCard__body3,
.mecanicaSteps > div:nth-child(3) .mecanicaStepCard__body3{
  font-weight: 700;
}

.mecanicaBottomBand{
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.mecanicaBottomBand__img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.mecanicaPaso{
  width: 100%;
}

.mecanicaPaso__row{
  gap: .75rem;
}

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

.mecanicaPaso__text{
    font-family: var(--tph-font-Futura-Condensed-Bold);
  color: var(--tph-marron);

    line-height: 1.05;
    font-size: 1.2rem;
    margin-top: 6%;
}

.imgBotella{
  width:45%;
}
.divPasos{
  margin-top:2rem;
  --bs-gutter-x: .75rem;
}
/* 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:70%;
  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-azul);
}

#participa .subeTicket h1 {
  font-family: var(--tph-font-Futura-Condensed-Bold);
  font-size: 3.4rem;
  color: var(--tph-azul);
}
#participa .subeTicket p {
  font-family: var(--tph-font-AcuminProCond);
  font-weight: 100;
  font-size: 1rem;
  color: var(--tph-azul);
  margin-bottom: 1rem;
}

.formulario-consumo-responsable {
  color: var(--tph-azul);
  font-family: var(--tph-font-AcuminProCond);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 0.35rem;
}

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

form#formReg_l input {
  border: none;
  font-family: var(--tph-font-AcuminProCond);
}

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

form#formReg_l .form-control:focus,
form#formReg_l .form-control:not(:placeholder-shown) {
  color: var(--tph-form-input);
}

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

form#formReg_l .form-select:required:valid {
  color: var(--tph-form-input);
}

form#formReg_l label.custom-control-label {
  display: block !important;
  color: var(--tph-negro);
  font-family: var(--tph-font-AcuminProCond);
  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-negro);
}

form option {
  color: #000000;
  font-family: var(--tph-font-AcuminProCond);
  font-size: 1rem;
}

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

form .input-group-text {
  background: var(--tph-form-bg);
  border: none;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 2.75rem;
  margin-left: 0.45rem;
}

form#formReg_l .input-group > .input-group-text:last-child {
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}


/* Checkbox tipo switch (bolita) — estilo B/N en este formulario */
form#formReg_l .form-check-label {
  font-family: var(--tph-font-AcuminProCond);
  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: var(--tph-azul);
  border-color: var(--tph-azul);
  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: var(--tph-azul);
  box-shadow: 0 0 0 .25rem rgba(29, 45, 80, .18);
}

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

#contacto {
  text-align: center;
  background-color: var(--tph-fondo);
   color: var(--tph-azul);
}

#contacto .titulo{
  font-family: var(--tph-font-FuturaSH);
  font-weight: normal;
  font-size: 4rem;
  white-space: nowrap;
  line-height: 0.95;
}

 #contacto p,
 #contacto .horario{
  font-family: var(--tph-font-AcuminProCond);
  font-size: 1.5rem;
  margin-top:1.5%;
}

#contacto .subtitulo {
  font-family: var(--tph-font-FuturaSH);
  font-weight: normal;
  font-size: 4.5rem;
  margin-top:6%;
}

#contacto .subtitulo.mb-2 {
  white-space: nowrap;
  line-height: 0.95;
}

#contacto .subtitulo.mb-0,
#contacto .contactoTextBlock.subtitulo.mb-0 {
  font-family: var(--tph-font-AcuminProCond);
  font-weight: normal;
  font-size: 1.25rem;
}

.contactoCenterBlock{
  display: flex;
  justify-content: center;
}

.contactoTextBlock{
  max-width: 720px;
}

.contactoInfoPacks{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contactoInfoPack{
  margin-bottom: 0;
}

.contactoLogo,
.contactoBotellas{
  display: block;
  height: auto;
  max-width: 100%;
}

.contactoBotellasAyuda{
  max-width: 107%;
}

.contactoLogo{
  width: 55%;
}

.contactoMobileMedia{
  display: flex;
  justify-content: center;
}

.contactoDesktopRow{
  width: 100%;
  margin-top: 0.75rem;
}

.contactoDesktopSide{
  flex: 0 1 18%;
  display: flex;
  align-items: flex-end;
}

.contactoDesktopSide--left{
  justify-content: flex-start;
}

.contactoDesktopSide--right{
  justify-content: flex-end;
}

.contactoDesktopCenter{
  flex: 1 1 64%;
  min-width: 0;
  padding: 0 2rem;
}

.contactoDesktopSide .contactoLogo,
.contactoDesktopSide .contactoBotellas{
  margin: 0;
}

.contactoDesktopSide--left .contactoLogo{
  transform: translateX(3rem);
}

.contactoDesktopSide--right .contactoBotellas{
  transform: translateX(-8rem);
}

#contacto .tel_promo a {
  font-family: var(--tph-font-FuturaSH);
  font-weight: normal;
  font-size: 4rem;
  letter-spacing: -0.06em;
  text-decoration: none;
   color: inherit;
}

#contacto .email_contacto a {
  font-family: var(--tph-font-FuturaSH);
  font-size: 3rem;
  text-decoration: none;
   color: inherit;
}

#contacto .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) {
  .mecanicaLegal,.mecanicaStepCard__body3{
    font-size:1rem;
  }
  .btn-formulario {
    color: #fff;
    font-size: 1.5rem;
    padding: 0rem 1rem 0rem 1rem;
    background-color: #c62828;
    color: #fff;
}
  .mecanicaStepCard__body{
    font-size:1.4rem;
  }
  .mecanicaStepCard__title{
    font-size:3rem;
  }
  .headerCurvedTitle{
    padding: 0.25rem 0.25rem 1rem;
  }
  .mecanicaIntro{
    font-size: 1rem;
  }

  .mecanicaStepCard{
    padding: 0;
  }

  .contactoLogo{
    max-width: 30%;
    margin-top:6%;
  }

  .mecanicaStepCard__img{
    width: min(100%, 230px);
    margin-bottom: 1rem;
  }

  .headerCurvedTitle__text{
    font-size: clamp(1rem, 0.8rem + 1.1vw, 1.45rem);
    transform: rotate(-6deg);
  }
.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: 2.5rem;
  }

  #mecanica .txtMenor{
    margin-top: 12%;
    font-size: 1.7rem;
  }

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

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

  #contacto .titulo {
    font-size: 3.1rem;
    white-space: normal;
    line-height: 1;
  }

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

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

 /* #contacto .subtitulo.mb-2 {
    white-space: normal;
    line-height: 1;
  }*/

  #contacto .subtitulo.mb-0,
  #contacto .contactoTextBlock.subtitulo.mb-0 {
    font-size: 1rem;
  }
/*
  .contactoLogo{
    width: min(100%, 180px);
  }*/
/*
  .contactoBotellas{
    width: min(100%, 220px);
  }*/

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

  #contacto .tel_promo a {
    font-size: 3.5rem;
  }

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

  .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: 1.5rem;
  }
  .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;
  }

  /* Ajustar contenedor del premio en móvil para que se adapte al tamaño de la imagen */
  .headerPrizeWrap{
    width: min(70%, 400px);
  }

}

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

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .headerPrizeImg{
    display: block;
    width: 84%;
    height: auto;
    margin-top: 31%;
    margin-left: 7%;
  }
  .contactoDesktopSide--right .contactoBotellas {
    transform: translateX(-3rem);
}

  .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) and (max-width: 1299.98px) {
  .imgAzucarParticipante {
    width: 97%;
}
.headerPrizeImg{
  display: block;
  width: 98%;
  height: auto;
  margin-top: 32%;
  margin-left: -1%;
}
.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; }

  .headerPrizeImg{
    display: block;
    width: 107%;
    height: auto;
    margin-top: 31%;
    margin-left: 0%;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .headerPrizeImg{
    display: block;
    width: 114%;
    height: auto;
    margin-top: 31%;
    margin-left: -1%;
  }

  .contactoBotellas{
    width: min(87%, 260px);
  }
}

@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;
  }
}