/* ── ONLY WHAT TAILWIND CANNOT DO ── */
html { scroll-behavior: smooth; }
body { cursor: none; }

/* ── CUSTOM CURSOR ── */
.cursor { width:10px; height:10px; background:#d4a017; border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:100000; transform:translate(-50%,-50%); transition:width .3s,height .3s; }
.cursor-ring { width:36px; height:36px; border:1px solid #0e0d0b; border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:width .3s,height .3s; }
@media (pointer: coarse) { body { cursor: auto; } .cursor, .cursor-ring { display: none; } }

/* ── ANIMATIONS ── */
@keyframes preloaderPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.05);opacity:1} }
@keyframes scrollPulse    { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes marquee        { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes slideIn        { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeUp         { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.scroll-line    { animation: scrollPulse 2s ease-in-out infinite; }
.marquee-inner  { display:flex; animation: marquee 22s linear infinite; white-space:nowrap; }
.cot-panel.active { animation: slideIn .4s ease forwards; }

/* ── FADE UP (IntersectionObserver) ── */
.fade-up { opacity:0; transform:translateY(40px); transition:opacity .8s, transform .8s; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up:nth-child(2){transition-delay:.1s} .fade-up:nth-child(3){transition-delay:.2s} .fade-up:nth-child(4){transition-delay:.3s}

/* ── SERVICE CARD GOLD LINE ── */
.service-card { position:relative; overflow:hidden; transition:background .4s; }
.service-card::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:#d4a017; transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.service-card:hover::before { transform:scaleX(1); }
.service-cta { opacity:0; transform:translateY(10px); transition:all .4s ease; }
.service-card:hover .service-cta { opacity:1; transform:translateY(0); }

/* ── COTIZADOR STEP LINE ── */
.cot-step.active .cot-step-num { background:#0e0d0b; color:#f2ede6; border-color:#0e0d0b; }
.cot-step.done .cot-step-num { background:#d4a017; color:#0e0d0b; border-color:#d4a017; }
.cot-step:not(:last-child)::after { content:''; position:absolute; left:50%; right:-50%; top:18px; height:2px; background:#c8bfaf; transition:background .5s; z-index:0; }
.cot-step.done:not(:last-child)::after { background:#d4a017; }

/* ── CUSTOM RANGE SLIDER ── */
.cot-range { -webkit-appearance:none; appearance:none; width:100%; height:2px; background:#c8bfaf; outline:none; margin:20px 0; cursor:pointer; }
.cot-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; background:#d4a017; cursor:pointer; border:2px solid #0e0d0b; border-radius:0; }
.cot-range::-moz-range-thumb { width:20px; height:20px; background:#d4a017; cursor:pointer; border:2px solid #0e0d0b; border-radius:0; }

/* ── SELECT ARROW ── */
.cot-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6256' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; padding-right:24px; }

/* ── HERO GRID OVERLAY ── */
.hero-grid { background: repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(14,13,11,.04) 59px,rgba(14,13,11,.04) 60px), repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(14,13,11,.04) 59px,rgba(14,13,11,.04) 60px); }
.hero-vignette { background: radial-gradient(ellipse at 30% 60%,rgba(14,13,11,0.2),transparent 60%), linear-gradient(to right,rgba(242,237,230,0.8),transparent 70%), linear-gradient(to bottom,rgba(14,13,11,0.2) 0%,transparent 50%,rgba(14,13,11,0.3) 100%); }

/* ── NAV SCROLLED (JS adds this class) ── */
nav.scrolled { background: rgba(242,237,230,0.9) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(14,13,11,0.08); }
nav.scrolled .logo-img { height: 60px; }

/* ── MOBILE NAV ── */
@media (max-width: 768px) {
  nav { padding: 20px 24px; }
  #menu-toggle { display: block; }
  #nav-links { position:fixed; top:0; right:-100%; width:80%; height:100vh; background:#f2ede6; flex-direction:column; justify-content:center; align-items:center; gap:40px; transition:right .4s ease; box-shadow:-10px 0 30px rgba(0,0,0,.05); z-index:100; }
  #nav-links.active { right:0; }
  #nav-links a { font-size:16px; }
  #hero { grid-template-columns:1fr !important; min-height:100svh; }
  .hero-right { display:none !important; }
  .hero-left { padding:100px 24px 60px !important; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
  .about-grid { grid-template-columns:1fr !important; }
  .about-left { position:static !important; top:auto !important; }
  .lab-grid { grid-template-columns:1fr !important; }
  .lab-sticky { position:static !important; top:auto !important; }
  .services-grid { grid-template-columns:1fr !important; }
  .cot-header-grid { grid-template-columns:1fr !important; }
  .cot-services-grid { grid-template-columns:repeat(2,1fr) !important; }
  .contact-grid { grid-template-columns:1fr !important; }
}

/* ── COTIZADOR SELECTIONS ── */
.cot-svc.selected {
  background: rgba(212,160,23,0.1);
  border-color: #d4a017;
}
.cot-svc.selected div:last-child {
  background: #d4a017;
  border-color: #d4a017;
  color: #0e0d0b;
}
.cot-pill.selected {
  background: #0e0d0b;
  color: #f2ede6;
  border-color: #0e0d0b;
}