/* ════════════════════════════════════════════════════════
   PRO UX ENHANCEMENTS — deckeva.cl
   Scroll-reveal, micro-polish, performance hints
   ════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL BASE ── */
.sr{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.sr.sr--visible{opacity:1;transform:translateY(0)}
.sr-left{opacity:0;transform:translateX(-32px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.sr-left.sr--visible{opacity:1;transform:translateX(0)}
.sr-right{opacity:0;transform:translateX(32px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.sr-right.sr--visible{opacity:1;transform:translateX(0)}
.sr-scale{opacity:0;transform:scale(0.92);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.sr-scale.sr--visible{opacity:1;transform:scale(1)}

/* Stagger children (cards in grids) */
.sr-stagger > *:nth-child(1){transition-delay:0ms}
.sr-stagger > *:nth-child(2){transition-delay:80ms}
.sr-stagger > *:nth-child(3){transition-delay:160ms}
.sr-stagger > *:nth-child(4){transition-delay:240ms}
.sr-stagger > *:nth-child(5){transition-delay:320ms}
.sr-stagger > *:nth-child(6){transition-delay:400ms}
.sr-stagger > *:nth-child(7){transition-delay:480ms}
.sr-stagger > *:nth-child(8){transition-delay:560ms}

/* ── COUNTER ANIMATION ── */
.counter-animated{display:inline-block}

/* ── IMAGE REVEAL ── */
.img-reveal{overflow:hidden}
.img-reveal img,.img-reveal video{transition:transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.img-reveal:hover img,.img-reveal:hover video{transform:scale(1.03)}

/* ── SMOOTH FOCUS STATES (A11Y) ── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ocean,#0e6ba8);outline-offset:3px;border-radius:4px;transition:outline-offset 0.15s ease}

/* ── SECTION DIVIDERS (subtle) ── */
.section-divider{width:60px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ocean,#0e6ba8),var(--gold,#f5a623));margin:0 auto 20px;opacity:0.6}

/* ── FLOATING LABELS (quote form) ── */
.form-group{position:relative}
.form-group .form-label{transition:all 0.2s ease}

/* ── PARTNERS PRO POLISH ── */
.dp-card{transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s ease,border-color 0.3s ease}
.dp-card__img img{transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),filter 0.3s ease}
.dp-card:hover .dp-card__img img{transform:scale(1.06)}
.dp-card__cta svg{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.dp-card:hover .dp-card__cta svg{transform:translateX(5px)}

/* ── HERO V3 ENHANCEMENTS ── */
.hero-v3-content{animation:heroContentIn 1s 0.3s cubic-bezier(0.16,1,0.3,1) both}
@keyframes heroContentIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-v3-spec-card{animation:heroSpecIn 0.8s 0.8s cubic-bezier(0.16,1,0.3,1) both}
@keyframes heroSpecIn{
  from{opacity:0;transform:translateY(20px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.hero-v3-scroll-cue{animation:heroScrollIn 0.6s 1.2s cubic-bezier(0.16,1,0.3,1) both}
@keyframes heroScrollIn{
  from{opacity:0}
  to{opacity:1}
}

/* ── TRUST STRIP ENTRANCE ── */
.trust-strip .trust-item{opacity:0;transform:translateY(10px);animation:trustIn 0.5s cubic-bezier(0.16,1,0.3,1) both}
.trust-strip .trust-item:nth-child(1){animation-delay:0.1s}
.trust-strip .trust-item:nth-child(2){animation-delay:0.25s}
.trust-strip .trust-item:nth-child(3){animation-delay:0.4s}
.trust-strip .trust-item:nth-child(4){animation-delay:0.55s}
@keyframes trustIn{to{opacity:1;transform:translateY(0)}}

/* ── BUTTON MICRO-INTERACTIONS ── */
.btn,.hero-v3-btn,.footer-cta-btn,.dp-card__cta{position:relative;overflow:hidden}
.hero-v3-btn--primary .hv3b-icon{display:inline-block;animation:iconBounce 2s ease-in-out infinite 2s}
@keyframes iconBounce{0%,100%{transform:translateY(0)}15%{transform:translateY(-3px)}30%{transform:translateY(0)}}

/* ── NAVBAR GLASSMORPHISM ENHANCEMENT ── */
nav#navbar{transition:all 0.35s cubic-bezier(0.16,1,0.3,1) !important}
nav#navbar.scrolled{backdrop-filter:blur(16px) saturate(1.2) !important;-webkit-backdrop-filter:blur(16px) saturate(1.2) !important}

/* ── MOBILE TOUCH IMPROVEMENTS ── */
@media(max-width:640px){
  .hero-v3-btn,.btn,.footer-cta-btn,.dp-card__cta,.faq-question,.pay-tab,.ship-tab,.gal-tab{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    min-height:44px
  }
  .t-track{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .t-card{scroll-snap-align:center}
  .payment-tabs,.ship-tabs,.gal-tabs{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .pay-tab,.ship-tab,.gal-tab{scroll-snap-align:start}
}

/* ── SKELETON LOADING FOR IMAGES ── */
img[loading="lazy"]{background:linear-gradient(90deg,#eef2f7 25%,#f6f8fb 50%,#eef2f7 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
img[loading="lazy"].loaded{animation:none;background:transparent}

/* ════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — defensive layer (safe, additive)
   ════════════════════════════════════════════════════════ */

/* Never let media/tables push horizontal scroll */
img,svg,video,canvas,iframe{max-width:100%}
table{max-width:100%}

/* Break long words/emails/URLs so they never overflow on small screens */
@media(max-width:640px){
  .footer-contact-value,.contact-link,.blog-excerpt,.faq-answer-inner,
  .hero-v3-desc,.t-text,.dp-card__desc,.cc-name{
    overflow-wrap:break-word;word-break:break-word;hyphens:auto
  }
  /* Wide data tables get horizontal scroll instead of clipping */
  .install-notice{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .install-table{min-width:0}
}

/* Tablet intermediate (768px): tighten container + section rhythm */
@media(max-width:900px) and (min-width:641px){
  .dp-grid{grid-template-columns:1fr 1fr !important;gap:20px}
  .container{padding-left:22px !important;padding-right:22px !important}
}

/* Landscape phones: prevent fixed-bar stack from eating the hero */
@media(max-height:520px) and (orientation:landscape){
  .hero-v3{min-height:560px}
  .hero-v3-scroll-cue{display:none}
}

/* ════════════════════════════════════════════════════════
   TOUCH FEEDBACK + VISUAL POLISH (:active press states)
   ════════════════════════════════════════════════════════ */
@media(hover:none),(max-width:900px){
  .hero-v3-btn:active,.btn:active,.footer-cta-btn:active,
  .submit-btn:active,.tl-cta-row .btn:active,.dp-card__cta:active{
    transform:scale(0.97);transition:transform 0.1s ease
  }
  .dp-card:active,.feature-card:active,.gal-card:active,
  .blog-card:active,.country-card:active,.pay-card:active{
    transform:scale(0.99);transition:transform 0.1s ease
  }
  .faq-question:active{background:rgba(14,107,168,0.05)}
}

/* Consistent shadow scale across all cards (visual cohesion) */
.dp-card,.feature-card,.testimonial-card,.gal-card,.blog-card,
.pay-card,.country-card,.tl-card,.faq-help-card{
  box-shadow:0 1px 2px rgba(15,23,42,0.04),0 4px 14px rgba(15,23,42,0.05)
}
.dp-card:hover,.feature-card:hover,.gal-card:hover,.blog-card:hover{
  box-shadow:0 10px 30px rgba(14,107,168,0.12)
}

/* SEO cross-banner: subtle polish so it reads less raw */
#seo-cross-banner{letter-spacing:0.2px;border-bottom:1px solid rgba(255,255,255,0.06);padding-right:44px !important}
#seo-cross-banner a{transition:color 0.2s ease,opacity 0.2s ease}

/* ── DISMISSIBLE SEO BANNER (reclaim viewport on mobile) ── */
.seo-x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,0.14);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease;padding:0
}
.seo-x:hover{background:rgba(255,255,255,0.28)}
html.seo-closed #seo-cross-banner{display:none !important}
@media(max-width:640px){
  .seo-x{width:24px;height:24px;right:6px;font-size:14px}
  #seo-cross-banner{padding-right:38px !important}
}

/* ════════════════════════════════════════════════════════
   ANCHOR OFFSET — fixed bars (winter-promo+seo+nav) no longer
   hide section tops when navigating via the menu
   ════════════════════════════════════════════════════════ */
#caracteristicas,#como-trabajamos,#proyectos,#envios,#pagos,
#testimonios,#galeria,#cotizar,#blog,#faq{scroll-margin-top:150px}
@media(max-width:640px){
  #caracteristicas,#como-trabajamos,#proyectos,#envios,#pagos,
  #testimonios,#galeria,#cotizar,#blog,#faq{scroll-margin-top:118px}
}

/* ════════════════════════════════════════════════════════
   READING PROGRESS BAR (top, above everything)
   ════════════════════════════════════════════════════════ */
#read-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1002;
  background:linear-gradient(90deg,var(--ocean,#0e6ba8),var(--gold,#f5a623));
  box-shadow:0 0 8px rgba(245,166,35,0.5);
  transition:width 0.1s linear;pointer-events:none
}

/* ════════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════════ */
#back-to-top{
  position:fixed;bottom:88px;right:20px;z-index:998;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(15,34,64,0.92);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(15,23,42,0.25);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s ease,background 0.2s ease;
  backdrop-filter:blur(8px)
}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{background:var(--ocean,#0e6ba8);transform:translateY(-3px)}
@media(max-width:640px){
  #back-to-top{width:42px;height:42px;bottom:80px;right:16px;font-size:18px}
}

/* ════════════════════════════════════════════════════════
   HERO TITLE <em> — animated gold underline accent
   ════════════════════════════════════════════════════════ */
.hero-v3-line-2 em{position:relative;display:inline-block}
.hero-v3-line-2 em::after{
  content:'';position:absolute;left:0;right:0;bottom:0.06em;height:0.10em;
  background:var(--gold,#f5a623);border-radius:2px;transform:scaleX(0);
  transform-origin:left;animation:emUnderline 0.8s 1.1s cubic-bezier(0.16,1,0.3,1) forwards
}
@keyframes emUnderline{to{transform:scaleX(1)}}

/* ════════════════════════════════════════════════════════
   WHATSAPP FLOAT — gentle attention pulse
   ════════════════════════════════════════════════════════ */
.whatsapp-float{position:relative}
.whatsapp-float::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,0.5);
  animation:waPulse 2.6s ease-out infinite
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.45)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* ════════════════════════════════════════════════════════
   NAV — cleaner, less saturated (FULL PRO)
   Goal: one clear CTA, calmer links, compact lang switcher,
   balanced breathing room between the three nav zones.
   ════════════════════════════════════════════════════════ */

/* 1 · Remove the redundant gold "Ver Precio" pill on desktop.
   Two gold elements side by side (pill + CTA) both pointing to
   #cotizar is what made the bar feel loud. The hero "Ver Precio"
   button and the mobile sticky CTA already cover price intent. */
nav#navbar .nav-price-link{display:none !important}

/* 2 · Calmer nav links — they recede so the CTA leads the eye */
nav#navbar .nav-links{gap:2px !important}
nav#navbar .nav-links li a{
  position:relative;
  color:var(--gray,#475569) !important;
  font-weight:500 !important;
  font-size:14px !important;
  padding:8px 13px !important;
  background:transparent !important;
  transition:color 0.2s ease !important;
}
nav#navbar .nav-links li a:hover{
  color:var(--text-dark,#0a1628) !important;
  background:transparent !important;
}
/* Subtle animated underline instead of a heavy filled pill */
nav#navbar .nav-links li a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--ocean,#0e6ba8);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1)
}
nav#navbar .nav-links li a:hover::after{transform:scaleX(1)}

/* 3 · Compact, minimal language switcher — icon + caret, no wide label */
.lang-trigger .lang-label-current{display:none !important}
.lang-trigger{
  padding:8px 11px !important;
  gap:5px !important;
  background:transparent !important;
  border-color:transparent !important;
}
.lang-trigger:hover{background:rgba(15,23,42,0.05) !important}
.lang-flag-current{font-size:15px}

/* 4 · Single elegant CTA — softer, more refined shadow */
nav#navbar .nav-cta{
  padding:10px 20px !important;
  box-shadow:0 3px 10px rgba(245,166,35,0.22) !important;
}
nav#navbar .nav-cta:hover{box-shadow:0 6px 16px rgba(245,166,35,0.36) !important}

/* 5 · Breathing room + balance between logo | links | actions */
nav#navbar .nav-inner{gap:20px !important}
nav#navbar .nav-right{gap:8px !important}

/* ════════════════════════════════════════════════════════
   FOOTER CTA — center & tighten the composition
   (space-between on the wide strip left it looking off-center)
   ════════════════════════════════════════════════════════ */
.footer-cta-inner{
  max-width:940px;margin-left:auto !important;margin-right:auto !important;
  gap:40px !important
}
@media(max-width:640px){
  .footer-cta-inner{max-width:none;text-align:center;align-items:center !important}
  .footer-cta-text{width:100%}
}

/* ════════════════════════════════════════════════════════
   FOOTER — partners band (compact, text, ordered)
   ════════════════════════════════════════════════════════ */
.footer-partners{
  border-top:1px solid rgba(15,23,42,0.08);
  margin-top:4px;padding:18px 0 2px;position:relative;z-index:1
}
/* Title sits inline with the row on desktop to save vertical space */
.footer-partners__head{margin-bottom:12px}
.footer-partners__eyebrow{display:none}
.footer-partners__title{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  color:var(--text-dark,#0a1628);margin:0;letter-spacing:0
}
.footer-partners__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.footer-partner{
  display:flex;flex-direction:column;gap:0;
  padding:9px 12px;border:1px solid rgba(15,23,42,0.08);border-radius:9px;
  background:rgba(255,255,255,0.5);text-decoration:none;line-height:1.3;
  transition:border-color .2s ease,background .2s ease,transform .2s ease
}
.footer-partner:hover{
  border-color:rgba(14,107,168,0.28);background:#fff;transform:translateY(-1px)
}
.footer-partner__name{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--text-dark,#0a1628)}
.footer-partner__desc{font-size:11px;color:var(--gray,#475569);line-height:1.3}
/* Domain arrow hidden by default to keep cards short; show on hover */
.footer-partner__arrow{
  font-size:10px;font-weight:700;color:var(--ocean,#0e6ba8);letter-spacing:.2px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease
}
.footer-partner:hover .footer-partner__arrow{max-height:16px;opacity:1;margin-top:3px}
@media(max-width:980px){.footer-partners__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .footer-partners__grid{grid-template-columns:1fr 1fr;gap:7px}
  .footer-partner{padding:8px 10px}
  .footer-partner__arrow{display:none}
}

/* Tidy the main footer grid: even columns, consistent rhythm */
.site-footer .footer-grid{align-items:start}

/* Overall footer: tighter vertical rhythm (was too tall) */
.footer-cta{padding:30px 0 !important}
.site-footer .container{padding-top:44px !important}
@media(max-width:640px){
  .footer-cta{padding:24px 0 !important}
  .site-footer .container{padding-top:36px !important}
}

/* ── PREFERS REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .sr,.sr-left,.sr-right,.sr-scale{opacity:1 !important;transform:none !important;transition:none !important}
  .sr-stagger > *{transition-delay:0ms !important}
  .hero-v3-content,.hero-v3-spec-card,.hero-v3-scroll-cue,.trust-strip .trust-item{animation:none !important;opacity:1 !important;transform:none !important}
  img[loading="lazy"]{animation:none !important}
  .hero-v3-btn--primary .hv3b-icon{animation:none !important}
  .hero-v3-line-2 em::after{animation:none !important;transform:scaleX(1) !important}
  .whatsapp-float::before{animation:none !important}
  #read-progress{transition:none !important}
  nav#navbar .nav-links li a::after{transition:none !important}
}