/* ============================================================
   DIBJ — hoja global.
   Portada tal cual del <helmet> de "DIBJ Landing.dc.html":
   resets, @keyframes, media queries y comportamiento del menú.
   El resto de estilos van inline en el marcado (patrón del diseño).
   ============================================================ */

* { box-sizing: border-box; }

/* El tema es oscuro, y hay que decirselo al navegador: sin esto los
   controles que dibuja el sistema operativo (la lista desplegable de un
   <select>, el calendario, la barra de scroll) salen en claro. En el
   desplegable "Me interesa" eso dejaba las opciones en blanco sobre blanco,
   ilegibles. */
:root { color-scheme: dark; }

html, body { margin: 0; padding: 0; }
body {
  background: #171515;
  color: #fdfcfc;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #fdfcfc; text-decoration: none; }
a:hover { color: #cfcdcd; }
img { max-width: 100%; }
::selection { background: #fdfcfc; color: #201d1d; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: #fdfcfc #201d1d; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #201d1d; }
::-webkit-scrollbar-thumb { background: #fdfcfc; border-radius: 10px; border: 3px solid #201d1d; }
::-webkit-scrollbar-thumb:hover { background: #cfcdcd; }

:focus-visible { outline: 2px solid #fdfcfc; outline-offset: 3px; border-radius: 4px; }

@keyframes ringPulse {
  0%, 100% {
    box-shadow: 0 0 55px rgba(255,255,255,0.18), 0 0 120px rgba(255,255,255,0.1), inset 0 0 90px rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.32);
  }
  50% {
    box-shadow: 0 0 120px rgba(255,255,255,0.5), 0 0 220px rgba(255,255,255,0.26), inset 0 0 150px rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.72);
  }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Formulario ----------
   El <select> se dibuja como los demas campos: fuera la flecha del sistema y
   una propia en SVG, con sitio reservado a la derecha para que no pise al
   texto de la opcion mas larga. Las opciones llevan color explicito porque
   algunos navegadores no heredan el del control. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239a9898' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
select option { background: #1e1c1c; color: #fdfcfc; }
input::placeholder, textarea::placeholder { color: #7c7a79; }

/* ---------- FAQ (acordeón nativo, uno abierto a la vez vía name=) ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.faq .fq-ic { transition: transform .28s ease; }
details.faq[open] .fq-ic { transform: rotate(45deg); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Sin JS o con motion reducido, nada se queda invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Pestañas de capacidades ---------- */
.cap-panel[hidden] { display: none; }
.cap-tab[aria-selected="true"] {
  /* !important: gana al style inline de la pestaña */
  background: #fdfcfc !important;
  color: #201d1d !important;
  border-color: #fdfcfc !important;
}

/* ---------- Capturas de producto ---------- */
/* En reposo van en blanco y negro; recuperan el color al pasar el ratón
   o al recibir el foco por teclado. */
.shot img {
  filter: grayscale(1);
  transition: filter .45s ease, transform .45s ease;
}
.prod-card:hover .shot img,
.prod-card:focus-within .shot img {
  filter: grayscale(0);
  transform: scale(1.03);
}
/* En pantallas tactiles no hay hover: se muestran ya en color. */
@media (hover: none) {
  .shot img { filter: grayscale(0); }
}

/* ---------- Franja institucional del Kit Digital ---------- */
/* Es una sola línea mientras quepa; por debajo envuelve y los
   separadores verticales sobran. */
@media (max-width: 1040px) {
  .kd-row { flex-wrap: wrap !important; }
  .kd-sep { display: none !important; }
}

/* ---------- Retículas responsive ---------- */
@media (max-width: 960px) {
  .navlinks { display: none !important; }
  .g4 { grid-template-columns: repeat(2,1fr) !important; }
  .g3 { grid-template-columns: repeat(2,1fr) !important; }
  .g2s { grid-template-columns: 1fr !important; }
  .story-media { height: 240px !important; }
  .footg { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .hero-h1 { font-size: clamp(34px, 8vw, 60px) !important; }
  .split { grid-template-columns: 1fr !important; }
  .cap-tabs { overflow-x: auto; }
}
@media (max-width: 640px) {
  .g4, .g3, .g2 { grid-template-columns: 1fr !important; }
  .stats3 { grid-template-columns: 1fr !important; }
  .stats3 > div { border-right: none !important; padding: 16px 0 !important; }
  .stats3 > div:not(:last-child) { border-bottom: 1px solid rgba(154,152,152,0.08) !important; }
  .footg { grid-template-columns: 1fr !important; }
  .tb-left { display: none !important; }
  .pad-card { padding: 34px 22px !important; }
  .marquee-track { font-size: 14px !important; gap: 40px !important; }
  body { padding-bottom: 68px; } /* hueco del panel inferior fijo */
}

/* ---------- Navegación móvil ---------- */
.hamb { display: none; }
.mobile-menu { display: none; }
.mobile-panel { display: none; }

@media (max-width: 960px) {
  .hablemos-btn { display: none !important; }
  .hamb {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 42px; height: 42px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid rgba(154,152,152,0.18); border-radius: 6px;
  }
  .hamb .bar {
    width: 19px; height: 2px; background: #fdfcfc; border-radius: 2px;
    transition: transform .3s ease, opacity .22s ease;
  }
  .hamb[data-open="true"] { border-color: rgba(255,255,255,0.5); }
  .hamb[data-open="true"] .bar1 { transform: translateY(7px) rotate(45deg); }
  .hamb[data-open="true"] .bar2 { opacity: 0; }
  .hamb[data-open="true"] .bar3 { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    position: fixed; inset: 0; z-index: 60; padding: 80px 24px 40px;
    background: rgba(7,9,12,0.98); backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .34s cubic-bezier(.2,.7,.2,1), transform .34s cubic-bezier(.2,.7,.2,1), visibility .34s;
  }
  .mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu a {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fdfcfc; padding: 14px 0;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .mobile-menu[data-open="true"] a { opacity: 1; transform: none; }
  .mobile-menu[data-open="true"] a:nth-child(1) { transition-delay: .08s; }
  .mobile-menu[data-open="true"] a:nth-child(2) { transition-delay: .13s; }
  .mobile-menu[data-open="true"] a:nth-child(3) { transition-delay: .18s; }
  .mobile-menu[data-open="true"] a:nth-child(4) { transition-delay: .23s; }
  .mobile-menu[data-open="true"] a:nth-child(5) { transition-delay: .28s; }
  .mobile-menu[data-open="true"] a:nth-child(6) { transition-delay: .33s; }
}

@media (max-width: 640px) {
  .tb-inner { justify-content: center !important; gap: 26px !important; }
  .mobile-panel {
    display: grid; grid-template-columns: repeat(3,1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(23,21,21,0.94); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(154,152,152,0.18);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-panel .mp-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: #fdfcfc; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
    padding: 8px 4px; border-radius: 8px; -webkit-tap-highlight-color: transparent;
  }
  .mobile-panel .mp-item:active { background: rgba(154,152,152,0.12); }
  .mobile-menu { padding-bottom: 96px; }
  .hero-ring {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 58%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 58%);
  }
}

/* Bloquea el scroll del fondo con el menú abierto */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}