/* ===== Tokens ===== */
/* Brandon Text — Regular (400) */
@font-face{
  font-family: "Brandon Text";
  src: url("../Fuentes/HVDFonts-BrandonText-Regular.woff2") format("woff2"),
       url("../Fuentes/HVDFonts-BrandonText-Regular.woff")  format("woff");

}

@font-face{
  font-family: "Brandon Bold";
  src: url("../Fuentes/HVDFonts-BrandonText-Bold.woff2") format("woff2"),
       url("../Fuentes/HVDFonts-BrandonText-Bold.woff")  format("woff");

}

/* Si quieres TODO en Regular, no declares otros pesos.
   (Cuando te pidan Bold/Light/Italic, añadimos más @font-face.) */

/* Fuente global del sitio */
:root{
  --font-sans: "Brandon Text";
  --font-title: "Brandon Bold";
}

p{
  font-family: var(--font-sans);
  font-size: 20px;
  /*font-weight: 400;
  /* Evita “falso bold/italic” si no declaramos otras variantes */

}
@media (min-width: 992px){
  p{
	  font-family: var(--font-sans);
	  font-size: 22px !important;
	  /*font-weight: 400;
	  /* Evita “falso bold/italic” si no declaramos otras variantes */

	}
}
li{
  font-family: var(--font-sans);
  font-size: 20px !important;
  /*font-weight: 400;
  /* Evita “falso bold/italic” si no declaramos otras variantes */

}
h1, h2, h3, h4, h5{
  font-family: var(--font-title);
  font-weight: 700;
  /* Evita “falso bold/italic” si no declaramos otras variantes */

}

:root{
  --cem-navy:#1d2230;
  --cem-yellow:#f2c300;
  --cem-ink:#1d2230;
  --cem-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* UX */
html { scroll-behavior:smooth; }
section { scroll-margin-top: 16px; }

/* Utilidad: Bootstrap no trae 6 */
@media (min-width: 992px){
  .py-lg-6{ padding-top:4rem!important; padding-bottom:4rem!important; }
}

/* ===== Header ===== */
.brandbar{ background:var(--cem-navy); color:#fff; padding:.6rem 0; }
.brandbar .brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; }
.brandbar img{ display:block; height:28px; }
.brandbar .abbott img{ height:24px; opacity:.95; }

.navbar-cem{ background:#fff; box-shadow:var(--cem-shadow); padding:.45rem 0; }
.nav-link,.dropdown-toggle{ color:var(--cem-ink); font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.dropdown-toggle::after{ margin-left:.35rem; }

.btn-login{
  background:var(--cem-yellow); border:none; color:var(--cem-ink);
  font-weight:800; letter-spacing:.06em; border-radius:9999px;
  padding:.55rem 1.25rem; line-height:1;
}
.btn-login .bi{ font-size:1rem; }
.btn-icon{ border:none; background:transparent; padding:.25rem .5rem }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:80vh;
  background: var(--cem-navy) url('../img/Hero.jpg') top right / cover no-repeat;
}
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(29,34,48,.88) 0%, rgba(29,34,48,.74) 28%, rgba(29,34,48,0) 58%); }
.hero-content{ position:relative; z-index:1; padding:5rem 0; max-width:560px; color:#fff; }
.hero h1{ font-weight:800; font-size:3rem; margin-bottom:.75rem; }
.hero h3{ color:rgba(255,255,255,.92); font-weight:800; margin-bottom:1rem; }
.hero p{ font-size:1.125rem; color:rgba(255,255,255,.85); }
.btn-inscribir{
  background:var(--cem-yellow); border:none; font-weight:800; color:#1d2230;
  border-radius:12px; padding:.75rem 1.75rem;
}
.btn-inscribir:hover{ filter:brightness(.95); }

@media (max-width: 991.98px){
  .cta-mobile{ display:flex; }
  .btn-login{ padding:.5rem 1rem; }
  .hero{ background:#fff; min-height:auto; }
  .hero::before{ display:none; }
  .hero-figure img{ display:block; width:100%; height:auto;  }
  .hero .container{ padding-top:1rem; padding-bottom:2rem; }
  .hero-content{ padding:1rem 0 0 0; max-width:100%; color:#1d2230; }
  .hero h1{ font-size:1.9rem; color:#1d2230; }
  .hero h3{ font-size:1.25rem; color:#1d2230; }
  .hero p{ font-size:1rem; color:#1d2230; }
}

/* ===== Intro ===== */
.intro-cem{ background:#fff; position:relative; }
.intro-title{
  font-weight:800; color:#111; line-height:1.15;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.25rem);
  margin-bottom:.5rem;
}
.intro-lead{ font-size:1.125rem; color:#333; line-height:1.6; }
.intro-body{ font-size:1.125rem; color:#333; line-height:1.6; }
.intro-figure{ max-width:520px; }
@media (max-width: 991.98px){
  #intro-cem .container{ padding-top:2.25rem; padding-bottom:2.5rem; }
  .intro-figure{ max-width:420px; }
  .intro-title, .intro-lead, .intro-body{ text-align:center; }
  .intro-lead, .intro-body{ font-size:1rem; max-width:36rem; margin-inline:auto; }
}

/* ===== Compromiso ===== */
.compromiso{
  position: relative; z-index:0;
  background: linear-gradient(180deg, var(--cem-yellow) 0%, #fde784 100%);
  color:#111;
}
/* asegurar stacking: contenido arriba, arco al fondo */
.compromiso > *{ position:relative; z-index:1; }
.comp-arc{ position:absolute; z-index:0; left:50%; transform:translateX(-50%); bottom:-38vw;
  width:180vw; height:180vw; background:#fff; border-radius:50%; pointer-events:none; }

.comp-title{ font-weight:800; line-height:1.15; font-size: clamp(1.8rem, 1rem + 2.2vw, 2.2rem); margin-bottom:.25rem; }
.comp-underline{ width:56px; height:4px; background:#fff; border-radius:999px; margin-top:.6rem; display:inline-block; }
.comp-list{ padding-left:1.25rem; margin:0 0 1rem 0; }
.comp-list li{ margin-bottom:.35rem; font-size:1.05rem; }
.btn-cta-dark{
  display:inline-flex; align-items:center; justify-content:center;
  background:#111; color:#ffd23c; border-radius:14px; padding:.65rem 1.2rem;
  font-weight:800; border:none; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.btn-cta-dark:hover{ filter:brightness(.95); color:#ffe36d; }
.comp-photo{
  width: clamp(260px, 42vw, 520px); height:auto; border-radius:50%;
  box-shadow:0 20px 40px rgba(0,0,0,.15); margin-left:max(-80px, -6vw);
}
@media (max-width: 991.98px){
  #compromiso .container{ padding-top:2.25rem; padding-bottom:2.75rem; }
  .comp-title, .comp-list, #compromiso p{ text-align:center; }
  .comp-list{ display:inline-block; text-align:left; margin:auto; }
  .comp-list li{ font-size:1rem; }
  .comp-photo{ margin:0 auto 1rem auto; width: clamp(240px, 70vw, 420px); box-shadow:0 14px 28px rgba(0,0,0,.12); }
  .comp-arc{ bottom:-65vw; width:220vw; height:220vw; }
}

/* ===== Pasos ===== */
.steps-cem{ background:#fff; }
.steps-title{ font-weight:800; color:#111; line-height:1.15;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.45rem); margin-bottom:.25rem; }
.steps-underline{ display:inline-block; width:56px; height:6px; background:var(--cem-yellow); border-radius:4px; margin-top:.4rem; }
.step-num .label{ display:block; font-weight:800; letter-spacing:.14em; font-size:.95rem; color:#111; }
.step-num .num{ display:block; font-weight:800; font-variant-numeric:tabular-nums; line-height:.9; font-size: clamp(3.8rem, 8.5vw, 7.6rem); }
.step-title{ font-weight:800; color:#111; font-size: clamp(1.25rem, .95rem + 1.15vw, 1.8rem); margin:0 0 .25rem 0; }
.step-desc{ font-size:1.0625rem; color:#222; line-height:1.65; max-width:56ch; }
.step-icon{ display:block; height:96px; width:auto; object-fit:contain; }
.steps-note{ font-size:.9375rem; color:#444; line-height:1.5; max-width:980px; margin-inline:auto; }
@media (max-width: 991.98px){
  .step{ text-align:center; padding-block:2rem; }
  .step-icon{ display:none; }
  .steps-title{ font-size: clamp(2.1rem, 5.5vw, 2.4rem); }
  .step-num .label{ font-size:1.05rem; }
  .step-num .num{ font-size: clamp(4.25rem, 14vw, 6.25rem); }
  .step-title{ font-size: clamp(1.4rem, 6vw, 2rem); }
  .step-desc{ font-size:1rem; max-width:36rem; margin-inline:auto; }
}

/* ===== Recompensas ===== */
.rewards-cem{ background:#fff; }
.rewards-title{ font-weight:800; color:#111; line-height:1.15; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem); margin-bottom:.25rem; }
.rewards-underline{ display:inline-block; width:56px; height:6px; background:var(--cem-yellow); border-radius:4px; margin-top:.4rem; }
.rewards-wrap{ max-width:1100px; margin:0 auto; }
.reward-row{
  display:grid; grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);
  align-items:center; justify-items:center; gap: clamp(12px, 2.5vw, 28px);
  padding-block: clamp(14px, 2.4vw, 22px);
}
.left,.right{ display:flex; align-items:center; gap:16px; }
.left{ justify-self:end; } .right{ justify-self:start; }
.eq{ font-weight:900; font-size: clamp(1.8rem, 2.5vw, 2.8rem); line-height:1; color:#111; }
.left-txt,.right-txt{ margin:0; line-height:1.35; color:#111; font-size: clamp(1rem, .9rem + .6vw, 1.125rem); }
.label{ font-weight:600; letter-spacing:.01em; color:#222; }
.num{ font-weight:800; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); }
.ico-sensor{ height:84px; width:auto; object-fit:contain; }
.ico-bottle{ height:96px; width:auto; object-fit:contain; }
@media (max-width: 991.98px){
  .rewards-wrap{ max-width:94%; }
  .ico-sensor,.ico-bottle{ display:none; }
  .reward-row{ grid-template-columns:1fr auto 1fr; gap:12px; padding-block:18px; }
  .left,.right{ justify-content:center; text-align:center; }
  .left-txt,.right-txt{ font-size: clamp(1rem, 3.6vw, 1.125rem); }
  .num{ font-size: clamp(1.4rem, 5vw, 1.9rem); }
}

/* ===== FAQ ===== */
.faq-cem{
  background: linear-gradient(180deg, #f2c300 0%, #f1cf3e 45%, #f6e388 82%, #fff4d6 100%);
  color:#111; overflow:hidden;
}
.faq-title{ font-weight:800; line-height:1.15; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.4rem); margin-bottom:.3rem; }
.faq-underline{ display:inline-block; width:56px; height:6px; background:#fff; border-radius:4px; }
.faq-wrap{ max-width:980px; margin-left: clamp(0px, 8vw, 160px); margin-right:auto; }
.faq-item{ margin-bottom:1.75rem; }
.faq-q{ font-weight:800; font-size: clamp(1.15rem, .95rem + .7vw, 1.4rem); margin-bottom:.25rem; }
.faq-a{ font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height:1.6; margin:0; }
@media (max-width: 991.98px){
  .faq-wrap{ max-width:680px; margin-inline:auto; text-align:center; }
  .faq-item{ margin-bottom:1.5rem; }
}

/* ===== CTA final ===== */
.cta-next{ background:#fff; }
.cta-line1,.cta-line2{ margin:0; font-weight:800; color:#111; line-height:1.2; }
.cta-line1{ font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); }
.cta-line2{ font-size: clamp(1.45rem, 1.05rem + 1.8vw, 2.25rem); }
.cta-link{ color:#0d6efd; text-decoration:none; }
.cta-link:hover{ text-decoration:underline; }
.cta-underline{ display:inline-block; width:56px; height:6px; background:var(--cem-yellow); border-radius:4px; margin-top:.6rem; }

/* ===== Footer ===== */
.footer-cem{ background:var(--cem-navy); color:#fff; }
.footer-cem .container{ padding-top:2.25rem; padding-bottom:2.25rem; }
.footer-head{ position:relative; margin-bottom:1.25rem; }
.footer-head .rule{ display:block; width:100%; height:2px; background:rgba(255,255,255,.40); }
.footer-head .title{ position:absolute; right:0; top:-1.1rem; color:var(--cem-yellow); font-weight:800; letter-spacing:.08em; font-size:.98rem; }
.footer-cem .row.align-items-center{ align-items:flex-start!important; }
.abbott-logo{ height:32px; opacity:.96; margin-top:.35rem; }
.contact-label{ color:#cfd3db; font-weight:800; letter-spacing:.08em; font-size:.9rem; margin-bottom:.25rem; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.38); color:#fff; transition:.2s; }
.social-link i{ font-size:1.05rem; }
.social-link:hover{ color:var(--cem-yellow); border-color:var(--cem-yellow); }
.links{ font-weight:700; margin-top:.35rem; }
.footer-link{ color:#dfe3ea; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }
.sep{ color:#8b92a2; margin:0 .45rem; }
.legal{ color:#dfe3ea; opacity:.95; line-height:1.55; font-size:1rem; margin-top:.75rem; }
.legal a{ color:#7eb3ff; text-decoration:none; }
.legal a:hover{ text-decoration:underline; }
@media (max-width: 991.98px){
  .footer-head .title{ right:50%; transform:translateX(50%); font-size:1.05rem; }
  .footer-cem .text-lg-end{ text-align:center !important; }
  .footer-cem .justify-content-lg-start{ justify-content:center !important; }
  .social-link{ width:38px; height:38px; }
  .links{ margin-top:.5rem; }
  .legal{ max-width:680px; margin-inline:auto; text-align:left; }
}


/* Register From */
.form_container {
    padding: 50px;
	text-align:left;
}

.input-group-prepend {
    height: 100%;
    margin-right: 20px;
}

.input-group-text {
    color: var(--cem-yellow);
    padding: .6rem .75rem;
    background-color: white;
}

.representado {
    display: none;
}
.input-group-text {
    color: var(--cem-yellow);
    padding: .6rem .75rem;
    background-color: white;
}