/* ════════════════════════════════════════════════════════════
   ENHANCE.CSS — improvements on top of style.css
   - A11y: focus states, contrast, skip-link
   - UX: sticky header, scrollback, hover refinements, scroll progress
   - Mobile: typography breakpoints, full-width buttons, hamburger chip,
             menu overlay, WhatsApp pill prominence
   - Components: breadcrumbs, FAQ accordion, scroll-progress bar, toast
   - Load AFTER style.css so it wins the cascade where needed.
   ════════════════════════════════════════════════════════════ */

/* ─────── 1. ACCESSIBILITY ─────── */

/* Skip-to-content for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1em;
  z-index: 100000;
  background: linear-gradient(90deg, #804A8A, #56689F);
  color: #fff;
  padding: 1em 1.5em;
  border-radius: 0.8em;
  font-size: 1.6em;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1em; }

/* Visible focus rings everywhere */
*:focus-visible {
  outline: 2px solid #9380E1 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
.boton:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 4px !important;
}

/* Contrast bumps — secondary greys WCAG AA on dark backgrounds */
section p,
.industria-card p,
.visor-card p,
.bloque p,
footer p {
  color: #b8b8b8;
}
header p { color: #e8e8e8; }
.blog-card p,
.related-card p { color: #aaaaaa; }


/* ─────── 2. STICKY HEADER (compresses on scroll) ─────── */

body {
  scroll-behavior: smooth;
}
html {
  scroll-padding-top: 9em;
}

.site-nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.5em 0;
  background: transparent;
  transition: background .3s ease, padding .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
  pointer-events: none;
}
.site-nav-bar > .container { pointer-events: auto; }
.site-nav-bar.scrolled {
  padding: 0.8em 0;
  background: rgba(14, 14, 14, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.3em 1.5em rgba(0,0,0,0.45);
}
.site-nav-bar .top {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2em !important;
  flex-wrap: nowrap !important;
}
.site-nav-bar .top > a:first-child { flex-shrink: 0; }
.site-nav-bar .top > a:first-child img {
  width: 22em !important;
  max-width: 100%;
  height: auto;
  display: block;
  transition: width .3s;
}
.site-nav-bar.scrolled .top > a:first-child img { width: 18em !important; }

/* Cloned nav links — mirror the header nav styling that was scoped to `header nav` */
.site-nav-bar nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}
.site-nav-bar nav a {
  font-size: 1.7em;
  color: #b8b8b8;
  margin: 0 1.2em;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 400;
  transition: color .25s;
}
.site-nav-bar nav a:hover { color: #ffffff; }
.site-nav-bar nav a.activo,
.site-nav-bar nav a[aria-current="page"] { color: #9380E1; }

/* Hamburger inside sticky bar — same chip style, only on mobile */
.site-nav-bar .botonMenuMobile {
  flex: 0 0 auto !important;
  width: 5em !important;
  height: 5em !important;
}
@media (min-width: 1101px) {
  .site-nav-bar nav { display: flex !important; }
  .site-nav-bar .botonMenuMobile { display: none !important; }
}
@media (max-width: 1100px) {
  .site-nav-bar nav { display: none !important; }
  .site-nav-bar .botonMenuMobile { display: flex !important; }
}
@media (max-width: 1400px) {
  .site-nav-bar nav a { font-size: 1.5em; margin: 0 0.9em; }
}
@media (max-width: 1250px) {
  .site-nav-bar nav a { font-size: 1.35em; margin: 0 0.7em; }
}

/* Push hero content below the sticky bar so nothing sits underneath.
   Nota: el JS también aplica esto via inline style (que gana sobre todo CSS).
   Estas reglas son el fallback por si JS tarda en ejecutar. */
header.has-sticky-bar,
header.hb.has-sticky-bar { padding-top: 11em !important; }
@media (max-width: 1100px) {
  header.has-sticky-bar,
  header.hb.has-sticky-bar { padding-top: 10em !important; }
}
@media (max-width: 700px) {
  header.has-sticky-bar,
  header.hb.has-sticky-bar { padding-top: 9em !important; }
}
@media (max-width: 480px) {
  header.has-sticky-bar,
  header.hb.has-sticky-bar { padding-top: 8em !important; }
}

/* Hide the original header.top (kept as fallback for no-JS) when bar is mounted */
header.bar-mounted > .container > .top { display: none !important; }


/* ─────── 3. SCROLL-PROGRESS BAR ─────── */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #804A8A, #56689F);
  z-index: 100001;
  transition: width .08s linear;
  pointer-events: none;
}


/* ─────── 4. BACK-TO-TOP FLOATING BUTTON ─────── */

#scrollTop {
  position: fixed;
  bottom: 9em;
  right: 2em;
  width: 5em;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,20,20,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  z-index: 998;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s, transform .25s, background .2s, border-color .2s;
}
#scrollTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scrollTop:hover {
  background: linear-gradient(135deg, #804A8A, #56689F);
  border-color: transparent;
}
#scrollTop svg {
  width: 1.8em; height: 1.8em;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}
@media (max-width: 700px) {
  #scrollTop { bottom: 10em; right: 1.5em; width: 4.5em; height: 4.5em; }
}


/* ─────── 5. ENHANCED HOVER STATES ─────── */

.blog-card,
.industria-card,
.related-card,
.visor-card .bloque {
  position: relative;
  overflow: hidden;
}
.blog-card::after,
.industria-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 0% 0%, rgba(128,74,138,0.10), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.blog-card:hover::after,
.industria-card:hover::after { opacity: 1; }

.boton {
  transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.2em 2.5em rgba(128,74,138,0.35);
}
.boton:active { transform: translateY(0); }


/* ─────── 6. HERO ENTRY ANIMATION ─────── */

@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(2.5em); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
header > .container > h1,
header.hb > .container > h1 {
  animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) .15s both;
}
header > .container > p,
header.hb > .container > p {
  animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) .35s both;
}
header .botones {
  animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) .55s both;
}
header .foto {
  animation: heroFadeIn 1.2s ease .25s both;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ─────── 7. BREADCRUMBS ─────── */

.breadcrumb-bar {
  background: #161616;
  border-bottom: 1px solid #232323;
  padding: 1.5em 0;
}
.breadcrumb-bar .container { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.breadcrumb-bar a,
.breadcrumb-bar span {
  font-size: 1.5em;
  color: #888;
  text-decoration: none;
}
.breadcrumb-bar a { color: #9380E1; transition: color .15s; }
.breadcrumb-bar a:hover { color: #fff; }
.breadcrumb-bar .sep { color: #444; margin: 0 0.3em; user-select: none; }
.breadcrumb-bar .current { color: #ccc; font-weight: 500; }


/* ─────── 8. FAQ ACCORDION (home/faq) ─────── */

.faq-list { max-width: 90em; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid #2a2a2a;
  transition: border-color .2s;
}
.faq-item:first-child { border-top: 1px solid #2a2a2a; }
.faq-item.open { border-color: rgba(128,74,138,0.4); }
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 2.4em 0.5em;
  background: none;
  border: none;
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.faq-q .ico {
  flex-shrink: 0;
  width: 1.4em; height: 1.4em;
  border-radius: 50%;
  background: linear-gradient(135deg, #804A8A, #56689F);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.faq-q .ico::before,
.faq-q .ico::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 1px;
}
.faq-q .ico::before { width: 0.7em; height: 2px; }
.faq-q .ico::after  { width: 2px; height: 0.7em; transition: transform .3s; }
.faq-item.open .faq-q .ico::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  color: #b8b8b8;
}
.faq-a p {
  padding: 0 0.5em 2.4em;
  font-size: 1.8em;
  line-height: 1.55em;
  color: #c0c0c0;
  margin: 0;
}
.faq-item.open .faq-a { max-height: 50em; }


/* ─────── 9. MOBILE TYPOGRAPHY + LAYOUT FINE-TUNING ─────── */

@media (max-width: 1100px) {
  header h1 { font-size: 5em !important; line-height: 1.1em; max-width: 100%; }
  header p  { font-size: 2.4em !important; max-width: 100%; }
  .titulo   { font-size: 3.6em !important; line-height: 1.2em; }
  section { padding: 9em 0 !important; }
  .container { padding: 0 5em; }
}
@media (max-width: 700px) {
  header h1 { font-size: 4.2em !important; }
  header p  { font-size: 2.2em !important; }
  .titulo   { font-size: 3em !important; }
  section   { padding: 7em 0 !important; }
  .container { padding: 0 3.5em; }
  /* Full-width hero buttons on phone */
  header .botones { width: 100%; }
  header .botones .boton { width: 100%; min-width: 0; margin: 0.6em 0 !important; }
}
@media (max-width: 480px) {
  header h1 { font-size: 3.6em !important; }
  header p  { font-size: 2em !important; }
  .titulo   { font-size: 2.6em !important; }
  .container { padding: 0 2.8em; }
}


/* ─────── 10. WHATSAPP PILL — bigger on mobile, badge animation ─────── */

#botonwhatsapp::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: waPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 700px) {
  #botonwhatsapp {
    bottom: 2em !important;
    right: 2em !important;
    left: auto !important;
    font-size: 7px !important;
  }
  #botonwhatsapp span { box-shadow: 0 0.8em 2em rgba(0,0,0,0.5); }
}


/* ─────── 11. VIDEO MODAL — scroll lock helper ─────── */

body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}
.video-modal,
.popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(4px);
  padding: 4em 3em;
}
.video-modal.open,
.popup-overlay.open { display: flex; }
.video-modal-inner { width: 100%; max-width: 110em; position: relative; }


/* ─────── 12. ARTICLE — author/date meta ─────── */

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.2em;
  flex-wrap: wrap;
  margin-bottom: 2em;
  font-size: 1.6em;
  color: #888;
}
.article-meta .author {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.article-meta .author-avatar {
  width: 2.2em; height: 2.2em;
  border-radius: 50%;
  background: linear-gradient(135deg, #804A8A, #56689F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
}
.article-meta .dot { color: #444; }
.article-meta time { color: #aaa; }


/* ─────── 13. PROGRESSIVE FORM — stepped feel ─────── */

#contactForm .form-field {
  opacity: 0;
  transform: translateY(0.6em);
  animation: heroFadeUp .55s ease both;
}
#contactForm .form-field:nth-child(1) { animation-delay: 0.05s; }
#contactForm .form-field:nth-child(2) { animation-delay: 0.15s; }
#contactForm .form-field:nth-child(3) { animation-delay: 0.25s; }
#contactForm .form-field:nth-child(4) { animation-delay: 0.35s; }
#contactForm .form-field:nth-child(5) { animation-delay: 0.45s; }
#contactForm .form-field:nth-child(6) { animation-delay: 0.55s; }
#contactForm .form-field input,
#contactForm .form-field textarea,
#contactForm .form-field select {
  transition: border-color .2s, background .2s, box-shadow .2s;
}
#contactForm .form-field input:focus,
#contactForm .form-field textarea:focus,
#contactForm .form-field select:focus {
  border-color: #9380E1 !important;
  box-shadow: 0 0 0 3px rgba(147,128,225,0.18) !important;
}


/* ─────── 14. TOAST NOTIFICATION ─────── */

#toast {
  position: fixed;
  left: 50%;
  bottom: 3em;
  transform: translateX(-50%) translateY(2em);
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 1.4em 2.2em;
  border-radius: 1em;
  color: #fff;
  font-size: 1.6em;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 100002;
  box-shadow: 0 1.2em 3em rgba(0,0,0,0.5);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ─────── 15. FAQPAGE HOME SECTION ─────── */

#home-faq { background: #141414; }
#home-faq .container { max-width: 90em; }
#home-faq .titulo { text-align: center; margin-bottom: 1em; }
#home-faq .subtitle {
  text-align: center;
  color: #999;
  font-size: 2em;
  max-width: 50em;
  margin: 0 auto 4em;
}


/* ─────── 15.5 RIBBON SPEED ─────── slow down so logos are readable */
.ribbon-track {
  animation: ribbon-scroll 110s linear infinite !important;
}
@media (max-width: 700px) {
  .ribbon-track { animation-duration: 70s !important; }
}


/* ─────── 16. FORM RESPONSIVENESS ─────── */

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* Print: hide chrome */
@media print {
  .site-nav-bar, #scrollTop, #botonwhatsapp, .scroll-progress, .breadcrumb-bar,
  .video-modal, .popup-overlay, footer { display: none !important; }
}