/* ═══════════════════════════════════════════════
   INSIGHT v5 — custom.css
   Solo estilos que Tailwind no puede resolver:
   animaciones, texturas, pseudo-elementos, keyframes.
   ═══════════════════════════════════════════════ */

/* ── SCROLL BEHAVIOR ── */
html { scroll-behavior: smooth; }

/* ── CSS VARIABLES (texturas) ── */
:root {
  --tex-wave: url('../img/tex_wave.png');
  --tex-glass: url('../img/tex_glass.jpg');
  --tex-mesh: url('../img/tex_mesh.png');
}

/* ── SCROLL REVEAL SYSTEM ── */

/* Default: fade + slide up */
.rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv.on {
  opacity: 1;
  transform: none;
}

/* Slide from left */
.rv-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv-left.on {
  opacity: 1;
  transform: none;
}

/* Slide from right */
.rv-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv-right.on {
  opacity: 1;
  transform: none;
}

/* Scale up */
.rv-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv-scale.on {
  opacity: 1;
  transform: none;
}

/* Fade only (no movement) */
.rv-fade {
  opacity: 0;
  transition: opacity .8s ease;
}
.rv-fade.on {
  opacity: 1;
}

/* Stagger children */
.rv-child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.rv-child.on {
  opacity: 1;
  transform: none;
}

/* Delay helpers (applied via data-delay in JS, but also CSS fallbacks) */
.rv.d1, .rv-left.d1, .rv-right.d1 { transition-delay: .15s; }
.rv.d2, .rv-left.d2, .rv-right.d2 { transition-delay: .3s; }
.rv.d3 { transition-delay: .45s; }

/* ── NAV LINK — animated underline ── */
.nav-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(170,205,224,.5);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color .25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #D95749;
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover {
  color: #AACDE0;
}
.nav-link:hover::after {
  width: 100%;
}

/* ── BUTTONS (reusable components) ── */
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: #E8FCB3;
  color: #051926;
  padding: .9rem 1.8rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.btn-p:hover {
  background: #051926;
  color: #F4F5F6;
  transform: translateY(-2px);
}

.btn-s {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #051926;
  text-decoration: none;
  border-bottom: 1px solid rgba(5,25,38,.3);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.btn-s:hover { border-color: #D95749; color: #D95749; }

/* ── NAV LINK ACTIVE ── */
.nav-link--active {
  color: #AACDE0 !important;
}
.nav-link--active::after {
  width: 100% !important;
  background: #D95749;
}

/* ── FOOTER LINKS ── */
.footer-link {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: rgba(244,245,246,.3);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.footer-link:hover {
  color: #AACDE0;
  padding-left: 4px;
}

/* ── SEC-LABEL (reusable) ── */
.sec-label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

/* ── HERO TEXTURES ── */
.hero-tex {
  background-image: var(--tex-wave);
}
.hm-mesh {
  background-image: var(--tex-mesh);
}
.hm-wave {
  background-image: var(--tex-wave);
}

/* ── HERO CURVE (right panel) ── */
.hero-right::before {
  content: '';
  position: absolute;
  top: -1px; bottom: -1px; left: -1px;
  width: 80px;
  background: #AACDE0;
  border-radius: 0 50% 50% 0;
  z-index: 3;
}

/* ── ASTERISK SPIN ── */
.hm-ast { animation: astSpin 30s linear infinite; }
@keyframes astSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── TYPEWRITER CURSOR ── */
.tw-cursor { animation: blink .7s step-end infinite; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── EYEBROW LINE ── */
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: #051926;
  flex-shrink: 0;
  opacity: .4;
}

/* ── STATS BAND TEXTURE ── */
.stats-band {
  background-image: var(--tex-wave);
}

/* ── ABOUT STRIPES ── */
.about-stripes {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 60px,
    rgba(170,205,224,.035) 60px,
    rgba(170,205,224,.035) 61px
  );
}

/* ── SERVICIOS TEXTURE ── */
#servicios {
  background-image: var(--tex-mesh);
}

/* ── METODOLOGIA BG ── */
.metodologia-bg {
  background-image: var(--tex-glass);
}

/* ── PRINCIPIOS GLOW ── */
.principios-glow {
  background:
    radial-gradient(ellipse at 20% 100%, rgba(232,252,179,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 0%, rgba(170,205,224,.05) 0%, transparent 35%);
}

/* ── PRINCIPIOS HOVER COLORS ── */
.val-card:hover .val-title { color: #D95749; }
.val-card:hover .val-desc  { color: rgba(244,245,246,.6); }

/* ── PERFIL BG ── */
.perfil-bg {
  background-image: var(--tex-wave);
}

/* ── ENFOQUE GLOW ── */
.enfoque-glow {
  background: radial-gradient(ellipse at 90% 10%, rgba(170,205,224,.2) 0%, transparent 40%);
}

/* ── CLIENTES TEXTURE ── */
#clientes {
  background-image: var(--tex-wave);
}

/* ── INSIGHTS — now light bg, no texture needed ── */

/* ── INSIGHT CARD HOVER TYPE COLOR ── */
/* (now handled by Tailwind group-hover) */

/* ── LOGOS CAROUSEL ── */
.logos-carousel {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  animation: logosScroll 28s linear infinite;
  width: max-content;
}
@keyframes logosScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Logo images (cuando se reemplacen los placeholders) */
.logo-item img {
  max-height: 100px;
  width: auto;
  filter: grayscale(100%) opacity(.4);
  transition: filter .3s;
}
.logo-item img:hover {
  filter: grayscale(0%) opacity(1);
}

/* ── CF7 CONTACT FORM ── */
.wpcf7-form p { margin: 0 !important; padding: 0 !important; }
.wpcf7-form p br { display: none; }
.wpcf7-form-control-wrap { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; }
.wpcf7 { margin: 0; padding: 0; }
.cf7-lbl { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: #63797F; margin-bottom: .25rem; }
.cf7-fld { font-family: 'Barlow', sans-serif !important; font-size: .875rem !important; font-weight: 400 !important; background: rgba(255,255,255,0.9) !important; border: 1px solid rgba(5,25,38,0.12) !important; color: #051926 !important; padding: .75rem 1rem !important; outline: none !important; width: 100% !important; box-sizing: border-box; transition: border-color .15s; border-radius: 0 !important; -webkit-appearance: none; appearance: none; box-shadow: none !important; }
.wpcf7-form textarea.cf7-fld { height: 80px !important; min-height: 80px; resize: vertical; }
.cf7-fld:focus { border-color: #AACDE0 !important; box-shadow: none !important; }
select.cf7-fld { -webkit-appearance: auto !important; appearance: auto !important; }
.wpcf7-not-valid.cf7-fld { border-color: #D95749 !important; }
.cf7-btn { display: inline-flex !important; align-items: center; gap: .5rem; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 600 !important; font-size: .68rem !important; letter-spacing: .22em; text-transform: uppercase; background: #D95749 !important; color: #fff !important; border: none !important; padding: .75rem 1.5rem !important; cursor: pointer; transition: background .2s, transform .15s; border-radius: 0 !important; box-shadow: none !important; }
.cf7-btn:hover { background: #051926 !important; transform: translateY(-2px); }
.wpcf7-spinner { display: none !important; }
.wpcf7-not-valid-tip { font-family: 'Barlow', sans-serif; font-size: .75rem; color: #D95749; margin-top: .2rem; display: block; }
.wpcf7-response-output { font-family: 'Barlow', sans-serif !important; font-size: .875rem !important; border: none !important; border-left: 3px solid #AACDE0 !important; padding: .75rem 1rem !important; margin: 1rem 0 0 !important; background: rgba(170,205,224,0.08); }
.wpcf7-form.invalid .wpcf7-response-output { border-color: #D95749 !important; background: rgba(217,87,73,0.06); }

/* ── CF7 CHECKBOXES ── */
.cf7-checkboxes { display: grid !important; grid-template-columns: 1fr; gap: .5rem; margin-top: .25rem; }
@media (min-width: 640px) { .cf7-checkboxes { grid-template-columns: 1fr 1fr; } }
.cf7-checkboxes .wpcf7-list-item { margin: 0 !important; display: block; }
.cf7-checkboxes .wpcf7-list-item:last-of-type { grid-column: 1 / -1; }
.cf7-checkboxes .wpcf7-list-item label { display: flex; align-items: center; gap: .625rem; font-family: 'Barlow', sans-serif; font-size: .92rem; font-weight: 400; color: rgba(5,25,38,.7); cursor: pointer; transition: color .15s; }
.cf7-checkboxes .wpcf7-list-item label:hover { color: #051926; }
.cf7-checkboxes input[type="checkbox"] { accent-color: #D95749; width: 1rem; height: 1rem; margin: 0; }
.cf7-checkboxes .wpcf7-list-item-label { padding: 0; }

/* ── TICKER ── */
.ticker-track { animation: ticker 36s linear infinite; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── CTA GLOW ── */
.cta-glow {
  background: radial-gradient(ellipse at 100% 50%, rgba(232,252,179,.35) 0%, transparent 45%);
}

/* ── CONTACT STRIPES ── */
.contact-stripes {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 60px,
    rgba(170,205,224,.03) 60px,
    rgba(170,205,224,.03) 61px
  );
}

/* ── MOBILE NAV OPEN ── */
.mnav.open {
  display: flex;
}

/* ── FORM OK STATE ── */
#form-ok.show {
  display: flex;
}

/* ── PLACEHOLDER STYLING ── */
input::placeholder,
textarea::placeholder {
  color: rgba(5,25,38,.25);
  font-weight: 300;
}
select option {
  background: white;
  color: #051926;
}

/* ═══ BLOG CONTENT TYPOGRAPHY ═══ */
.blog-content {
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(5,25,38,.7);
}

.blog-content .lead {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(5,25,38,.6);
  border-left: 3px solid #AACDE0;
  padding-left: 1.2rem;
  margin-bottom: 2.5rem;
}

.blog-content h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #051926;
  margin-top: 2.5rem;
  margin-bottom: .8rem;
  letter-spacing: -.01em;
}

.blog-content h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #051926;
  margin-top: 2rem;
  margin-bottom: .6rem;
}

.blog-content p {
  margin-bottom: 1.2rem;
}

.blog-content blockquote {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #63797F;
  border-left: 3px solid #D95749;
  padding: 1rem 0 1rem 1.4rem;
  margin: 2rem 0;
  background: rgba(217,87,73,.03);
}

.blog-content ul {
  margin: 1rem 0 1.5rem 1.2rem;
  list-style: none;
}

.blog-content ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .6rem;
}

.blog-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 5px;
  height: 5px;
  background: #D95749;
  border-radius: 50%;
}

.blog-content ul li strong {
  font-weight: 500;
  color: #051926;
}

.blog-content a {
  color: #D95749;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.blog-content a:hover {
  color: #051926;
}

/* ── PAGINADOR BLOG ── */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(5,25,38,.45);
  border: 1px solid rgba(5,25,38,.12);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.page-numbers:hover {
  background: #051926;
  color: #F4F5F6;
  border-color: #051926;
}
.page-numbers.current {
  background: #D95749;
  color: #fff;
  border-color: #D95749;
}
.page-numbers.dots {
  border: none;
  color: rgba(5,25,38,.25);
  cursor: default;
}
.page-numbers.prev,
.page-numbers.next {
  color: rgba(5,25,38,.4);
}