.wrap{max-width:1296px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 16px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:1.2em;height:1.2em;flex:none;fill:currentColor}

.toolbar {justify-content: end;}
.logo {max-height: 250px}

header button.navbar-toggler {background-color: transparent !important; color: #fff !important; border-color: #fff;}
@media (max-width: 767px) {
    nav.navbar .navbar-toggler {margin: 24px auto !important;}
    header {height: 90px !important; min-height: inherit;}
    header nav.navbar .navbar-brand {width: 75px !important;
}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {align-items: start !important;}

/* ===== Hero ===== */
.hero{color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:0.8fr 1fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}}
.hero h1{font-family:var(--f-tit);font-weight:700;font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);margin-bottom:16px}
.hero .lead{font-size:1.15rem;color:#D9E6F3;max-width:44ch;margin-bottom:24px}
.fecha-h{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--azul-noche);border-radius:var(--r);padding:10px 16px;font-weight:700;margin-bottom:28px}
.fecha-h svg{color:var(--azul)}
.fecha-h .cd{font-weight:500;color:var(--tx-2);border-left:1px solid var(--borde);padding-left:12px;font-variant-numeric:tabular-nums}
.buscador{background:#fff;color:var(--tx);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:1fr auto;gap:10px;max-width:560px;box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.buscador label{grid-column:1/-1;font-weight:700}
.buscador select{min-height:48px;border:1px solid #A9B7C6;border-radius:var(--r);padding:0 12px;background:#fff}
@media(max-width:480px){.buscador{grid-template-columns:1fr}}
/* Identificador familiar: familia pictográfica en la línea del Kit */
.familia{justify-self:center;width:min(100%,600px)}
.familia img{width:100%;height:auto;display:block}
@media(max-width:900px){.familia{width:min(100%,460px);order:-1}}
.familia .p{transform-box:fill-box;transform-origin:center bottom;animation:llega .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) * 80ms + 150ms)}
@keyframes llega{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.familia .p{animation:none}}
.borde-fam{height:14px;background:repeating-linear-gradient(90deg,var(--azul) 0 56px,#FFFFFF 56px 64px,var(--rojo) 64px 84px,#FFFFFF 84px 92px,var(--mosaico) 92px 148px,#FFFFFF 148px 156px)}

/* ===== Secciones ===== */
.s{padding:64px 0}
.s.gris{background:var(--gris-bg)}
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.bajada{color:var(--tx);margin:8px 0 32px;max-width:80ch}

header .toolbar {justify-content: end}

.item.oculto {display: none;}
.item small svg {color: var(--color-primario);}
.form-control {appearance: auto !important;}
select.form-control {padding: 8px 15px}
@media (max-width:767px) {
  .img-beneficio {overflow: hidden; max-height: 100px; border-radius: 10px}
  .img-beneficio img {margin-top: -50px}
}

.etiquetas {font-size: 0.9em;}
.etiquetas .tag {padding-left: 8px}
.etiquetas .tag svg {margin-right: 4px}

.marcas img {max-height: 120px;}