/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --db_color-ink:        #111111;
  --db_color-surface:    #FFFFFF;
  --db_color-accent:     #FF0096;
  --db_color-blue:       #1C45D8;
  --db_color-focus:      #00B4DA;
  --db_color-grey-bg:    #F0EFED;
  --db_color-line:       #B8B8B5;
  --db_color-muted:      #5B5B58;
  --db_color-sector:     #282826;

  --db_font: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;

  --db_gap:      32px;  /* _gridGap / _columnGap del JSON */
  --db_side:     8%;    /* _padding left/right de las secciones */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}

html{
  /* Sin scroll-behavior:smooth — prohibido por el brief. */
}

body{
  margin:0;
  font-family:var(--db_font);
  color:var(--db_color-ink);
  background:var(--db_color-surface);
}

img{display:block;max-width:100%;height:auto;}
video{display:block;max-width:100%;}
p{margin:0;}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:0.5px;}
ul{margin:0;}
a{color:inherit;}

:focus-visible{
  outline:3px solid var(--db_color-focus);
  outline-offset:2px;
}

/* ==========================================================================
   3. UTILIDADES DE ACCESIBILIDAD
   ========================================================================== */
.db_visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.db_skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--db_color-ink);
  color:var(--db_color-surface);
  font-size:18px;
  padding:16px 24px;
  text-decoration:underline;
}
.db_skip-link:focus{left:0;}

/* ==========================================================================
   4. BLOQUE: db_divider
   1px solid, sin padding, sin opacity.
   ========================================================================== */
.db_divider{
  width:100%;
  height:0;
  border:0;
  border-top:1px solid var(--db_color-line);
  margin:0;
}
.db_divider-row{width:100%;}
.db_divider-row--page{padding-left:2%;padding-right:2%;}   /* tbszrb */
.db_divider-row--span2{grid-column:span 2;}
.db_divider-row--span3{grid-column:span 3;}
.db_divider-row--span6{grid-column:span 6;}

/* ==========================================================================
   5. BLOQUE: db_section-title  (flecha + h2, repetido en 6 secciones)
   ========================================================================== */
.db_section-title{
  display:flex;
  align-items:center;
  column-gap:8px;
}
.db_section-title__arrow{width:32px;height:32px;flex:0 0 auto;}
.db_section-title__text{font-size:40px;}
.db_section-title--span2{grid-column:span 2;}
.db_section-title--span3{grid-column:span 3;}
.db_section-title--span6{grid-column:span 6;}

/* Subtítulo de sección */
.db_section-subtitle{
  font-size:32px;
  line-height:140%;
  color:var(--db_color-muted);
}

/* ==========================================================================
   6. BLOQUE: db_header
   ========================================================================== */
.db_header{
  position:relative;              /* solo para anclar el panel del menú móvil */
  overflow:hidden;                /* el logo es más alto que los 130px: se recorta */
  background:var(--db_color-surface);
  height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:8%;
  padding-right:0;
}
.db_header__inner{
  display:grid;
  grid-template-columns:2fr 9fr 1fr;
  align-items:stretch;
  width:100%;
}
.db_header__logo{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.db_header__logo-link{display:block;}
.db_header__nav{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  column-gap:var(--db_gap);
  font-family:var(--db_font);
  font-weight:700;
  font-size:20px;
}
.db_header__list{
  display:flex;
  flex-direction:row;
  align-items:center;
  column-gap:var(--db_gap);
  list-style:none;
  padding:0;
  margin:0;
}
.db_header__link{
  text-decoration:none;
  color:var(--db_color-ink);
}
.db_header__toggle{
  display:none;                   /* solo ≤991px */
  flex-direction:column;
  justify-content:center;
  row-gap:6px;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.db_header__toggle-bar{
  display:block;
  width:32px;
  height:3px;
  background:var(--db_color-ink);
  margin:0 auto;
}
.db_header__access{
  background:var(--db_color-blue);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:0;
  padding:0;
  cursor:pointer;
}
.db_header__access-icon{width:54px;height:54px;object-fit:cover;}

/* ==========================================================================
   7. BLOQUE: db_hero
   ========================================================================== */
.db_hero{padding-left:0;padding-right:0;}
.db_hero__inner{width:100%;height:80vh;}
.db_hero__frame{
  overflow:hidden;
  min-width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.db_hero__image{
  object-fit:cover;
  min-width:100%;
  min-height:100%;
}

/* ==========================================================================
   8. BLOQUE: db_intro  ("Ciudades sin barreras")
   ========================================================================== */
.db_intro{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_intro__inner{
  display:grid;
  grid-template-columns:6fr 4fr;
  gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_intro__title{font-size:48px;line-height:120%;}
.db_intro__text{font-size:48px;font-weight:400;line-height:120%;}
.db_intro__logo{display:flex;justify-content:flex-end;}
.db_intro__logo-img{max-width:30%;}

/* ==========================================================================
   9. BLOQUE: db_videos  ("Qué es NaviLens")
   ========================================================================== */
.db_videos{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_videos__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_videos__text{padding-right:6%;font-size:32px;line-height:140%;}
.db_videos__media{}
.db_videos__player{width:100%;}
.db_videos__caption{
  text-decoration:underline;
  font-weight:400;
  font-size:24px;
  line-height:2;
}

/* ==========================================================================
   10. BLOQUE: db_how  ("Cómo funciona")
   ========================================================================== */
.db_how{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_how__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--db_gap);
  width:100%;
}
.db_how__text{font-size:32px;line-height:140%;}
.db_how__codes{
  display:flex;
  align-items:flex-start;
  column-gap:var(--db_gap);
}
.db_how__qr{border:1px solid var(--db_color-ink);min-width:0;}
.db_how__pdf{min-width:0;}
.db_how__pdf-img{border:1px solid var(--db_color-ink);}
.db_how__pdf-caption{
  text-decoration:underline;
  font-weight:400;
  font-size:24px;
  line-height:2;
}

/* ==========================================================================
   11. BLOQUE: db_steps  (NaviLens en 3 pasos)
   ========================================================================== */
.db_steps{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_steps__inner{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--db_gap);
  width:100%;
  padding-top:2%;
  padding-bottom:5%;
}
.db_steps__heading{font-size:30px;}
.db_steps__text{font-size:24px;line-height:140%;}

/* ==========================================================================
   12. BLOQUE: db_features  (franja magenta)
   ========================================================================== */
.db_features{
  padding-left:var(--db_side);
  padding-right:var(--db_side);
  background:var(--db_color-accent);
}
.db_features__inner{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--db_gap);
  width:100%;
  padding-top:2%;
  padding-bottom:2%;
}
.db_features__item{
  display:flex;
  flex-direction:column;
  row-gap:var(--db_gap);
  align-items:center;
}
.db_features__icon{width:60%;}
.db_features__text{
  font-size:24px;
  line-height:140%;
  text-align:center;
  color:var(--db_color-surface);
}

/* ==========================================================================
   13. BLOQUE: db_compare  (NaviLens vs NaviLens Go)
   ========================================================================== */
.db_compare{
  padding-left:var(--db_side);
  padding-right:var(--db_side);
  background:var(--db_color-grey-bg);
}
.db_compare__inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_compare__stores{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  width:40%;
}
.db_compare__stores-label{font-size:24px;line-height:140%;}
.db_compare__store-link{display:block;}
.db_compare__store-logo{min-width:100%;}
.db_compare__screen{padding-left:6%;}
.db_compare__screen-img{width:50%;object-fit:cover;}
.db_compare__requirements{
  display:flex;
  align-items:flex-end;
  padding-right:48px;
}
.db_compare__app{padding-right:48px;}
.db_compare__app-head{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  padding-left:8%;
}
.db_compare__app-logo{width:20%;}
.db_compare__app-name{font-size:30px;}
.db_compare__app-claim{font-size:24px;line-height:140%;}
.db_compare__list{
  font-size:24px;
  line-height:140%;
  padding-right:12%;
}
.db_compare__list li{margin-bottom:16px;}
.db_compare__list li:last-child{margin-bottom:0;}
.db_compare__download{padding-left:24px;}
.db_compare__download--navilens{grid-column:2;}
.db_compare__download--go{grid-column:3;}
.db_compare__download-text{
  text-decoration:underline;
  font-weight:400;
  font-size:24px;
  line-height:2;
}

/* ==========================================================================
   14. BLOQUE: db_stats  (franja magenta con contadores)
   ========================================================================== */
.db_stats{
  padding-left:var(--db_side);
  padding-right:var(--db_side);
  background:var(--db_color-accent);
}
.db_stats__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--db_gap);
  width:100%;
  padding-top:2%;
  padding-bottom:2%;
}
.db_stats__item{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  align-items:center;
  justify-content:center;
}
.db_stats__label{
  font-size:24px;
  line-height:140%;
  font-weight:700;
  text-align:center;
  color:var(--db_color-surface);
}
.db_stats__label--bottom{line-height:100%;}
.db_stats__number{
  font-size:92px;
  font-weight:400;
  line-height:1;
  color:var(--db_color-surface);
}
.db_stats__row{
  display:flex;
  align-items:center;
  justify-content:center;
}
.db_stats__plus{
  font-size:90px;
  line-height:120%;
  color:var(--db_color-surface);
}
.db_stats__row .db_stats__number{font-size:90px;}

/* ==========================================================================
   15. BLOQUE: db_sectors
   ========================================================================== */
.db_sectors{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_sectors__inner{
  display:grid;
  grid-template-columns:3fr 7fr;
  gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_sectors__figure{
  display:flex;
  height:300px;
  align-self:flex-start;
  column-gap:var(--db_gap);
}
.db_sectors__image{object-fit:cover;width:100%;height:100%;}
.db_sectors__body{
  padding-right:24%;
  display:flex;
  flex-direction:column;
  row-gap:16px;
  align-self:flex-start;
}
.db_sectors__heading{font-size:30px;}
.db_sectors__text{
  font-size:24px;
  line-height:140%;
  color:var(--db_color-sector);
}

/* ==========================================================================
   16. BLOQUE: db_partners  (Alianzas en el mundo)
   ========================================================================== */
.db_partners{padding-left:var(--db_side);padding-right:var(--db_side);}
.db_partners__inner{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_partners__item{
  display:flex;
  align-items:center;
  justify-content:center;
  column-gap:var(--db_gap);
  min-width:100%;
  max-height:80px;
}
/* Walmart, Nestlé, Bayer y New York City Subway */
.db_partners__item--100{
  max-height:none;
  height:100px;
}
.db_partners__logo{object-fit:contain;height:100%;}
.db_partners__logo--tall{height:160%;}   /* Nestlé */
.db_partners__logo--auto{height:auto;}   /* Walmart: sin _height en el JSON */

/* ==========================================================================
   17. BLOQUE: db_faq
   ========================================================================== */
.db_faq{
  padding-left:var(--db_side);
  padding-right:var(--db_side);
  background:var(--db_color-grey-bg);
}
.db_faq__inner{
  display:flex;
  flex-direction:column;
  width:100%;
  padding-top:5%;
  padding-bottom:10%;
  row-gap:var(--db_gap);
  column-gap:var(--db_gap);
}
.db_faq__wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.db_faq__accordion{width:50%;}
.db_faq__item{}
.db_faq__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:24px 0;
  border:0;
  border-bottom:1px solid var(--db_color-line);
  background:transparent;
  font-family:var(--db_font);
  font-size:24px;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  color:var(--db_color-ink);
  cursor:pointer;
}
.db_faq__trigger[aria-expanded="true"]{
  border-bottom-color:var(--db_color-grey-bg);
}
.db_faq__icon{font-size:24px;flex:0 0 auto;}
.db_faq__panel{
  border-bottom:1px solid var(--db_color-line);
  padding-right:14%;
  padding-bottom:24px;
  font-size:22px;
  line-height:1.4;
}
.db_faq__panel[hidden]{display:none;}
.db_faq__title{font-size:inherit;font-weight:inherit;letter-spacing:inherit;}

/* ==========================================================================
   18. BLOQUE: db_footer
   ========================================================================== */
.db_footer{
  padding-left:var(--db_side);
  padding-right:var(--db_side);
  background:var(--db_color-ink);
}
.db_footer__inner{
  display:grid;
  grid-template-columns:3fr 7fr;
  column-gap:var(--db_gap);
  row-gap:var(--db_gap);
  width:100%;
  padding-top:5%;
  padding-bottom:5%;
}
.db_footer__brand{display:flex;align-items:center;column-gap:var(--db_gap);}
.db_footer__logo{object-fit:contain;object-position:0;height:80px;}
.db_footer__text{
  font-size:16px;
  color:var(--db_color-surface);
}
.db_footer__text a{color:var(--db_color-surface);}
.db_footer__social{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  column-gap:var(--db_gap);
  list-style:none;
  padding:0;
  margin:0;
}
.db_footer__social-link{
  background:var(--db_color-surface);
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
}
.db_footer__social-link:hover{background:var(--db_color-accent);}
.db_footer__social-icon{font-size:32px;color:var(--db_color-ink);}

/* ==========================================================================
   19. RESPONSIVE  — PROVISIONAL, a la espera de la maqueta móvil.
   Breakpoints pedidos: 1100 / 991 / 767 / 375
   ========================================================================== */

/* ---------- ≤ 1100px : misma estructura, tipografía más chica ---------- */
@media (max-width:1100px){
  .db_section-title__text{font-size:34px;}
  .db_section-subtitle{font-size:26px;}
  .db_header__nav,
  .db_header__list{column-gap:20px;}
  .db_header__nav{font-size:16px;}
  .db_intro__title,
  .db_intro__text{font-size:38px;}
  .db_videos__text,
  .db_how__text{font-size:26px;}
  .db_videos__caption,
  .db_how__pdf-caption,
  .db_compare__download-text{font-size:20px;}
  .db_steps__heading,
  .db_compare__app-name,
  .db_sectors__heading{font-size:26px;}
  .db_steps__text,
  .db_features__text,
  .db_compare__stores-label,
  .db_compare__app-claim,
  .db_compare__list,
  .db_sectors__text,
  .db_stats__label{font-size:20px;}
  .db_stats__number{font-size:68px;}
  .db_stats__plus,
  .db_stats__row .db_stats__number{font-size:66px;}
  .db_faq__trigger{font-size:20px;}
  .db_faq__panel{font-size:19px;}
  .db_features__inner{grid-template-columns:repeat(3,1fr);}
  .db_partners__inner{grid-template-columns:repeat(4,1fr);}
  .db_compare__stores{width:100%;}
}

/* ---------- ≤ 991px : una columna + menú desplegable ---------- */
@media (max-width:991px){
  .db_header{height:96px;}
  .db_header__inner{grid-template-columns:1fr auto auto;column-gap:16px;}
  .db_header__nav{justify-content:flex-end;}
  .db_header__toggle{display:flex;}
  .db_header__list{
    display:none;
    position:absolute;
    top:96px;
    left:0;
    right:0;
    z-index:20;
    flex-direction:column;
    align-items:flex-start;
    row-gap:0;
    background:var(--db_color-surface);
    border-top:1px solid var(--db_color-line);
    padding:8px 8%;
  }
  .db_header__list--open{display:flex;}
  .db_header__item{width:100%;}
  .db_header__link{display:block;width:100%;padding:16px 0;}
  .db_header__item + .db_header__item .db_header__link{
    border-top:1px solid var(--db_color-line);
  }
  .db_header__access{width:64px;height:64px;align-self:center;}

  .db_hero__inner{height:60vh;}

  .db_intro__inner,
  .db_videos__inner,
  .db_how__inner,
  .db_steps__inner,
  .db_sectors__inner,
  .db_footer__inner{grid-template-columns:1fr;}

  .db_intro__logo{justify-content:flex-start;}
  .db_intro__logo-img{max-width:40%;}

  .db_section-title--span2,
  .db_section-title--span3,
  .db_section-title--span6,
  .db_divider-row--span2,
  .db_divider-row--span3,
  .db_divider-row--span6{grid-column:1 / -1;}

  .db_videos__text,
  .db_sectors__body{padding-right:0;}

  .db_compare__inner{grid-template-columns:1fr;}
  .db_compare__download--navilens,
  .db_compare__download--go{grid-column:1 / -1;}
  .db_compare__requirements{padding-right:0;align-items:flex-start;}
  .db_compare__app{padding-right:0;}
  .db_compare__screen{padding-left:0;}
  .db_compare__screen-img{width:70%;}

  .db_stats__inner{grid-template-columns:repeat(2,1fr);row-gap:48px;}
  .db_partners__inner{grid-template-columns:repeat(3,1fr);}

  .db_faq__accordion{width:100%;}
  .db_faq__panel{padding-right:0;}

  .db_footer__social{justify-content:flex-start;}
}

/* ---------- ≤ 767px ---------- */
@media (max-width:767px){
  :root{--db_side:6%;--db_gap:24px;}
  .db_header{padding-left:6%;}
  .db_header__list{padding-left:6%;padding-right:6%;}
  .db_section-title__text{font-size:28px;}
  .db_section-subtitle{font-size:22px;}
  .db_intro__title,
  .db_intro__text{font-size:30px;}
  .db_videos__text,
  .db_how__text{font-size:22px;}
  .db_steps__heading,
  .db_compare__app-name,
  .db_sectors__heading{font-size:24px;}
  .db_steps__text,
  .db_features__text,
  .db_compare__stores-label,
  .db_compare__app-claim,
  .db_compare__list,
  .db_sectors__text,
  .db_stats__label,
  .db_videos__caption,
  .db_how__pdf-caption,
  .db_compare__download-text,
  .db_faq__trigger{font-size:18px;}
  .db_faq__panel{font-size:17px;}
  .db_stats__number{font-size:56px;}
  .db_stats__plus,
  .db_stats__row .db_stats__number{font-size:54px;}
  .db_features__inner{grid-template-columns:repeat(2,1fr);}
  .db_partners__inner{grid-template-columns:repeat(2,1fr);}
  .db_how__codes{flex-direction:column;row-gap:24px;}
  .db_hero__inner{height:50vh;}
  .db_sectors__figure{height:220px;}
  .db_compare__screen-img{width:100%;}
  .db_compare__app-logo{width:30%;}
  .db_intro__logo-img{max-width:55%;}
}

/* ---------- ≤ 375px ---------- */
@media (max-width:375px){
  :root{--db_side:5%;}
  .db_header{padding-left:5%;}
  .db_header__list{padding-left:5%;padding-right:5%;}
  .db_section-title__text{font-size:24px;}
  .db_intro__title,
  .db_intro__text{font-size:26px;}
  .db_videos__text,
  .db_how__text,
  .db_section-subtitle{font-size:19px;}
  .db_steps__text,
  .db_features__text,
  .db_compare__list,
  .db_sectors__text,
  .db_stats__label{font-size:17px;}
  .db_stats__inner{grid-template-columns:1fr;}
  .db_features__inner{grid-template-columns:1fr;}
  .db_features__icon{width:45%;}
  .db_stats__number{font-size:48px;}
  .db_stats__plus,
  .db_stats__row .db_stats__number{font-size:46px;}
  .db_sectors__figure{height:180px;}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

.db_header__link{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.db_header__link::after{
  position:absolute;
  right:0;
  bottom:-6px;
  left:0;
  height:2px;
  background:var(--db_color-accent);
  content:"";
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 180ms ease;
}
.db_header__link:hover::after,
.db_header__link:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}
.db_header__toggle-bar{
  transition:transform 180ms ease,opacity 180ms ease;
}
.db_header__toggle[aria-expanded="true"] .db_header__toggle-bar:nth-child(1){
  transform:translateY(9px) rotate(45deg);
}
.db_header__toggle[aria-expanded="true"] .db_header__toggle-bar:nth-child(2){
  opacity:0;
}
.db_header__toggle[aria-expanded="true"] .db_header__toggle-bar:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}
.db_accessibility-panel{
  position:fixed;
  top:130px;
  right:0;
  z-index:100;
  display:none;
  width:280px;
  padding:16px;
  background:var(--db_color-surface);
  border:1px solid var(--db_color-line);
}
.db_accessibility-panel[data-open="true"]{
  display:grid;
  row-gap:8px;
}
.db_accessibility-panel__button{
  min-height:44px;
  padding:8px 12px;
  color:var(--db_color-ink);
  background:var(--db_color-surface);
  border:1px solid var(--db_color-ink);
  font-family:var(--db_font);
  font-size:18px;
  text-align:left;
  cursor:pointer;
}
.db_how__pdf-caption .dosbit-download__link{
  display:block;
  color:inherit;
}
.db_how__pdf-image-link{display:block;}
body.db-accessibility-large{zoom:1.2;}
body.db-accessibility-contrast{filter:contrast(1.35);}
body.db-accessibility-grayscale{filter:grayscale(1);}

@media (max-width:991px){
  .db_accessibility-panel{top:96px;}
}

@media (max-width:767px){
  .db_accessibility-panel{left:0;width:100%;}
}