/* ============================================================
   Acción Digital — hoja de estilos
   Identidad: navy profundo + naranja, geometría angular (chevrons
   del logo) como sello. Tipografía Sora (títulos) + Inter (texto).
   ============================================================ */

:root {
  --navy:    #051E40;
  --navy-2:  #0A2C55;
  --navy-3:  #071b39;
  --orange:  #E9650E;
  --orange-2:#ff7d24;
  --paper:   #F4F6F9;
  --white:   #ffffff;
  --ink:     #0C1B2E;
  --slate:   #5A6B7E;
  --line:    #E4E9F0;
  --line-dk: #16365f;

  --radius:  14px;
  --wrap:    1140px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

b, strong { font-weight: 600; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- chevron motif ---------- */
.chev {
  width: 14px; height: 14px; flex: none;
  clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
  background: var(--orange);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: 28px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand b {
  font-family: "Sora", sans-serif; color: var(--navy);
  font-weight: 600; font-size: 1.12rem; letter-spacing: .01em;
}
.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; padding: 5px; flex: none;
}
.logo-badge img {
  height: 26px; width: auto; display: block;
  animation: logoFloat 3.2s ease-in-out infinite;
  transition: transform .35s var(--ease);
}
.brand:hover .logo-badge img { transform: scale(1.14) rotate(-8deg); animation-play-state: paused; }
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-badge img { animation: none; }
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  color: var(--navy); font-size: .95rem; font-weight: 400;
  position: relative; padding: 4px 0; transition: color .2s;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--orange); transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color: var(--orange); }
.nav-links a.active::after { width:100%; }

.nav-cta { display:flex; align-items:center; gap:12px; }
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Inter",sans-serif; font-weight:500; font-size:.94rem;
  padding:11px 20px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition: transform .18s var(--ease), background .2s, color .2s, box-shadow .2s;
  white-space: nowrap; position:relative; overflow:hidden;
}
.btn svg { width:18px; height:18px; position:relative; z-index:1; }
.btn > * { position:relative; z-index:1; }
.btn-wa, .btn-dark {
  background: var(--orange); color:#fff;
}
.btn-wa::before, .btn-dark::before {
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn-wa:hover::before, .btn-dark:hover::before { transform: translateX(120%); }
.btn-wa:hover, .btn-dark:hover { background: var(--orange-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(233,101,14,.4); }
.btn-ghost { background: transparent; color:#e7edf5; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { border-color:#fff; color:#fff; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-block { width:100%; justify-content:center; }

.burger { display:none; background:none; border:0; cursor:pointer; padding:6px; }
.burger span { display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.25s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: #041E41;
  color:#fff; overflow:hidden;
  padding: 96px 0 132px;
}
.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(233,101,14,.26), transparent 60%),
    linear-gradient(180deg, rgba(4,30,65,.88) 0%, rgba(2,15,33,.94) 100%);
}
/* angular chevron field on the right */
.hero-glyph {
  position:absolute; right:-60px; top:50%; transform:translateY(-50%); z-index:1;
  width:min(560px,48vw); opacity:.5; pointer-events:none;
}
.hero-glyph svg { width:100%; height:auto; }
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 100% 42%, 62% 100%, 58% 46%, 0 92%);
}
.hero .wrap { position:relative; z-index:2; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:7px 14px; border-radius:100px; font-size:.86rem; color:#eae8e5; margin-bottom:24px;
}
.hero-eyebrow .dot{ width:7px;height:7px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 4px rgba(55,214,122,.18); }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  max-width: 15ch; letter-spacing:-.03em;
}
.hero h1 .accent { color: var(--orange); }
.hero p.lead {
  font-size: clamp(1.05rem,1.6vw,1.28rem); color:#cac8c5;
  max-width: 52ch; margin: 22px 0 34px; line-height:1.55;
}
.hero p.lead b { color: var(--orange); font-weight:600; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-actions .btn { padding:15px 26px; font-size:1rem; }

/* ============================================================
   MARCAS
   ============================================================ */
.brands { padding: 44px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.brands-label {
  text-align:center; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color: var(--slate); margin:0 0 28px;
}
.brands-group { padding: 18px 0; border-top: 1px solid var(--line); }
.brands-group:first-of-type { border-top: 0; padding-top: 0; }
.brands-group:last-child { padding-bottom: 0; }
.brands-group-title {
  text-align:center; font-family:"Sora","Inter",sans-serif; font-size:.95rem; font-weight:500;
  letter-spacing:.01em; color: var(--navy); margin:0 0 16px;
}
.brands-group-title::before, .brands-group-title::after {
  content:""; display:inline-block; width:28px; height:2px; background: var(--orange);
  vertical-align:middle; margin:0 12px; border-radius:2px;
}
.brands-row { display:flex; align-items:center; justify-content:center; gap:34px 40px; flex-wrap:wrap; }
.brands-row img {
  height:28px; width:auto; max-width:130px; object-fit:contain;
  filter:grayscale(1); opacity:.5;
  transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.brands-row img:hover { filter:grayscale(0); opacity:1; transform:translateY(-2px); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding: 92px 0; position:relative; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.section-head { max-width: 620px; margin-bottom: 52px; position:relative; }
.section-head::before {
  content:""; position:absolute; left:-40px; top:-60px; width:260px; height:260px;
  background: radial-gradient(circle, rgba(233,101,14,.10), transparent 70%);
  pointer-events:none; z-index:-1; animation: blobFloat 9s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(14px,-10px) scale(1.08); }
}
.kicker {
  display:inline-flex; align-items:center; gap:9px;
  color: var(--orange); font-weight:600; font-size:.84rem; margin-bottom:16px;
  background: rgba(233,101,14,.09); padding:7px 16px 7px 12px; border-radius:100px;
  letter-spacing:.02em; text-transform:uppercase;
}
.section-head h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); color: var(--navy); }
.section-head p { color: var(--slate); font-size:1.06rem; margin-top:14px; }
.section-alt { background: var(--white); }
.section-navy { background: var(--paper); color: var(--ink); }
.section-navy .section-head h2 { color: var(--navy); }
.section-navy .section-head p { color: var(--slate); }

/* ============================================================
   INTRO (QUIÉNES SOMOS / LO QUE HACEMOS)
   ============================================================ */
.intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:start; }
.intro-col h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--navy); margin-bottom:16px; }
.intro-col p { color: var(--slate); font-size:1.04rem; line-height:1.7; }
.intro-list { display:flex; flex-direction:column; gap:16px; }
.intro-list li {
  display:flex; align-items:flex-start; gap:12px;
  color: var(--ink); font-size:1.02rem; line-height:1.5;
}
.intro-list li svg {
  flex:none; width:22px; height:22px; padding:4px; margin-top:1px;
  background: rgba(233,101,14,.1); color: var(--orange); border-radius:50%;
}

/* ============================================================
   SERVICIOS — dos categorías
   ============================================================ */
.cats { display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; }
.cats .cat:nth-child(1){ transition-delay:0s; }
.cats .cat:nth-child(2){ transition-delay:.12s; }
.cat {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 34px; position:relative; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .6s var(--ease);
}
.cat:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(5,30,64,.12); border-color: rgba(233,101,14,.35); }
.cat::before{
  content:""; position:absolute; left:0; top:0; width:6px; height:100%;
  background: var(--orange);
}
.cat .cat-num {
  font-family:"Sora"; font-weight:600; color: var(--line);
  font-size:3rem; position:absolute; top:14px; right:22px; line-height:1;
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.cat:hover .cat-num { transform: scale(1.12); color: rgba(233,101,14,.28); }
.cat h3 { font-size:1.5rem; color:var(--navy); margin-bottom:8px; max-width:80%; }
.cat .cat-sub { color:var(--slate); font-size:.95rem; margin-bottom:22px; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.cat-b .svc-grid { grid-template-columns:1fr; }
.svc-item {
  display:flex; align-items:center; gap:14px;
  background: var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.svc-item:hover { border-color: rgba(233,101,14,.35); transform:translateY(-3px); box-shadow:0 10px 22px rgba(5,30,64,.10); }
.svc-item .ic {
  width:40px; height:40px; flex:none; border-radius:10px;
  background: rgba(233,101,14,.12); color:var(--orange);
  display:grid; place-items:center;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.svc-item:hover .ic { transform: scale(1.12) rotate(-6deg); background: var(--orange); color:#fff; }
.svc-item .ic svg { width:20px; height:20px; }
.svc-item .svc-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.svc-item .svc-text b { font-weight:500; font-size:1.02rem; color:var(--navy); line-height:1.3; }
.svc-item small { display:block; color:#3D4D60; font-weight:400; font-size:.88rem; line-height:1.4; }

/* ============================================================
   PROCESO — secuencia numerada (numbering justified)
   ============================================================ */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; counter-reset: step; }
.steps .step:nth-child(1){ transition-delay:0s; }
.steps .step:nth-child(2){ transition-delay:.1s; }
.steps .step:nth-child(3){ transition-delay:.2s; }
.steps .step:nth-child(4){ transition-delay:.3s; }
.step { position:relative; padding-top: 20px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.step::before{
  content: counter(step,decimal-leading-zero); counter-increment: step;
  font-family:"Sora"; font-weight:600; font-size:1.05rem; color: var(--navy);
  background:#fff; border:2px solid var(--orange); width:46px; height:46px;
  border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  transition: transform .45s var(--ease) .15s;
}
.step:not(.reveal)::before, .step.in::before { transform: scale(1); }
.step.reveal:not(.in)::before { transform: scale(.4); }
.step h4 { font-size:1.12rem; color:var(--navy); margin-bottom:8px; }
.step p { color:var(--slate); font-size:.94rem; margin:0; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:42px; left:58px; right:-11px; height:2px;
  background: linear-gradient(90deg,var(--orange),transparent);
  transform: scaleX(0); transform-origin:left; transition: transform .7s var(--ease) .35s;
}
.step.in:not(:last-child)::after { transform: scaleX(1); }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.prods { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.prods .prod:nth-child(3n+1){ transition-delay:0s; }
.prods .prod:nth-child(3n+2){ transition-delay:.08s; }
.prods .prod:nth-child(3n+3){ transition-delay:.16s; }
.prod {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:0; display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .6s var(--ease);
}
.prod:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(5,30,64,.14); border-color: rgba(233,101,14,.35); }
.prod-photo {
  aspect-ratio: 1 / 1; background:#eef2f7; display:block;
  width:100%; object-fit:contain; object-position:center; padding:10px; box-sizing:border-box;
  transition: transform .4s var(--ease);
}
.prod:hover .prod-photo { transform: scale(1.06); }
.prod-body { padding:22px 26px 26px; display:flex; flex-direction:column; flex:1; }
.prod .tag {
  align-self:flex-start; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--orange); background:rgba(233,101,14,.10); padding:5px 10px; border-radius:6px; margin-bottom:16px;
}
.prod h4 { font-size:1.18rem; color:var(--navy); margin-bottom:8px; }
.prod .desc { color:var(--slate); font-size:.92rem; flex:1; margin-bottom:18px; }
.prod .price { font-family:"Sora"; font-weight:600; font-size:1.5rem; color:var(--navy); margin-bottom:0; }
.prod .price small { font-size:.8rem; color:var(--slate); font-weight:500; }
.prod .btn { justify-content:center; }

/* ============================================================
   GALERÍA / REDES SOCIALES
   ============================================================ */
.gallery-scroll {
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--orange) var(--line);
  padding-bottom:14px; cursor:grab;
}
.gallery-scroll:active { cursor:grabbing; }
.gallery-scroll::-webkit-scrollbar { height:8px; }
.gallery-scroll::-webkit-scrollbar-track { background:var(--line); border-radius:4px; }
.gallery-scroll::-webkit-scrollbar-thumb { background:var(--orange); border-radius:4px; }
.gallery { display:flex; gap:20px; }
.gallery .gallery-item:nth-child(1){ transition-delay:0s; }
.gallery .gallery-item:nth-child(2){ transition-delay:.08s; }
.gallery .gallery-item:nth-child(3){ transition-delay:.16s; }
.gallery-item {
  position:relative; flex: 0 0 240px; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow:hidden;
  background: #1a1a1a; box-shadow: 0 14px 34px rgba(5,30,64,.16);
  scroll-snap-align:start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .6s var(--ease);
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(5,30,64,.24); }
.gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  position:absolute; left:0; right:0; bottom:0; padding:18px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  color:#fff; font-weight:600; font-size:.92rem; line-height:1.3;
}
.gallery-cta { display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

.social-icons { display:flex; gap:36px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.social-icon {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:var(--navy); font-weight:600; font-size:.85rem;
}
.social-icon .social-ic {
  width:60px; height:60px; border-radius:50%; flex:none;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  animation: socialFloat 2.8s ease-in-out infinite;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 8px 18px rgba(5,30,64,.18);
}
.social-icon .social-ic svg { width:28px; height:28px; }
.social-icon:nth-child(1) .social-ic { animation-delay: 0s; }
.social-icon:nth-child(2) .social-ic { animation-delay: .35s; }
.social-icon:nth-child(3) .social-ic { animation-delay: .7s; }
.social-icon:hover .social-ic {
  background: var(--orange); transform: scale(1.15) translateY(-4px);
  box-shadow: 0 14px 26px rgba(233,101,14,.32);
  animation-play-state: paused;
}
@keyframes socialFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-icon .social-ic { animation: none; }
}

/* ============================================================
   SOBRE / MVV
   ============================================================ */
.mvv { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:10px; }
.mvv .card:nth-child(1){ transition-delay:0s; }
.mvv .card:nth-child(2){ transition-delay:.1s; }
.mvv .card:nth-child(3){ transition-delay:.2s; }
.mvv .card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .6s var(--ease);
}
.mvv .card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(5,30,64,.12); border-color: rgba(233,101,14,.35); }
.mvv .card .ic { width:44px;height:44px;border-radius:11px;background:rgba(233,101,14,.12);color:var(--orange);display:grid;place-items:center;margin-bottom:18px; transition: transform .3s var(--ease), background .3s var(--ease); }
.mvv .card:hover .ic { transform: scale(1.12) rotate(-6deg); background: var(--orange); color:#fff; }
.mvv .card .ic svg{width:22px;height:22px;}
.mvv .card h4 { color:var(--navy); font-size:1.2rem; margin-bottom:10px; }
.mvv .card p { color:var(--slate); font-size:.95rem; margin:0; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-band {
  background: linear-gradient(120deg, var(--orange) 0%, #c9530a 100%);
  color:#fff; border-radius:20px; padding:52px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band::before {
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background: rgba(255,255,255,.10); pointer-events:none;
  animation: blobFloat 8s ease-in-out infinite;
}
.cta-band::after {
  content:""; position:absolute; left:10%; bottom:-90px; width:180px; height:180px;
  border-radius:50%; background: rgba(255,255,255,.07); pointer-events:none;
  animation: blobFloat 10s ease-in-out infinite reverse;
}
.cta-band > * { position:relative; z-index:1; }
.cta-band h3 { font-size: clamp(1.5rem,3vw,2.2rem); max-width:20ch; }
.cta-band p { color:rgba(255,255,255,.9); margin:10px 0 0; }
.cta-band .btn-white { background:#fff; color:var(--navy); }
.cta-band .btn-white:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.2); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact { display:grid; grid-template-columns: 1fr 1.1fr; gap:34px; align-items:stretch; }
.contact-info { display:flex; flex-direction:column; gap:14px; }
.cinfo {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; display:flex; gap:16px; align-items:flex-start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cinfo:hover { transform: translateX(4px); box-shadow: 0 12px 28px rgba(5,30,64,.08); border-color: rgba(233,101,14,.3); }
.cinfo .ic { width:42px;height:42px;flex:none;border-radius:11px;background:var(--orange);color:#fff;display:grid;place-items:center; transition: transform .3s var(--ease); }
.cinfo:hover .ic { transform: scale(1.1) rotate(-6deg); }
.cinfo .ic svg{width:20px;height:20px;}
.cinfo .lbl { font-size:.82rem; color:var(--slate); }
.cinfo .val { font-weight:500; color:var(--navy); font-size:1.02rem; }
.cinfo .val a:hover { color:var(--orange); }
.cinfo .num-row { display:flex; gap:8px; margin-top:8px; }
.chip-wa { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500;
  color:var(--orange); background:rgba(233,101,14,.10); padding:6px 11px; border-radius:8px; }
.chip-wa:hover{ background:rgba(233,101,14,.18); }
.map-wrap { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:360px; }
.map-wrap iframe { width:100%; height:100%; min-height:360px; border:0; display:block; }

.socials { display:flex; gap:12px; margin-top:4px; }
.socials a {
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--orange); color:#fff; transition: transform .18s var(--ease), background .2s;
}
.socials a:hover { transform:translateY(-3px); background:var(--orange-2); }
.socials svg{width:20px;height:20px;}

.about-contact { margin-top:64px; }
.about-contact-title { font-size:1.4rem; color:var(--navy); margin-bottom:22px; }
.about-contact-grid { display:grid; grid-template-columns: 1.15fr 1.35fr .8fr; gap:18px; align-items:stretch; }
.about-contact-grid .cinfo { height:100%; box-sizing:border-box; }
.about-map { margin-top:18px; min-height:340px; }
.about-map iframe { min-height:340px; }
.about-contact-grid .cinfo:hover { transform: translateY(-4px); }
@media (max-width: 940px){ .about-contact-grid { grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper); color: var(--slate); padding:56px 0 26px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:34px; margin-bottom:36px; }
.foot-brand { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.foot-brand b { color: var(--navy); font-family:"Sora"; font-size:1.1rem; }
.site-footer p { font-size:.92rem; max-width:38ch; }
.foot-col h5 { color: var(--navy); font-size:.95rem; margin:0 0 14px; font-family:"Sora"; }
.foot-col a { display:block; color: var(--slate); font-size:.92rem; padding:5px 0; }
.foot-col a:hover { color:var(--orange); }
.foot-bottom { border-top:1px solid var(--line); padding-top:20px; font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float {
  position:fixed; right:22px; bottom:22px; z-index:60;
  background: var(--orange); color:#fff; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(233,101,14,.45);
  transition: transform .2s var(--ease);
  border:0; cursor:pointer; padding:0;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--orange); animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.6);opacity:0} }

/* ============================================================
   SELECTOR DE ÁREA PARA WHATSAPP
   ============================================================ */
.wa-picker-overlay {
  position:fixed; inset:0; z-index:200;
  background: rgba(5,15,30,.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity .2s var(--ease);
}
.wa-picker-overlay.open { opacity:1; pointer-events:auto; }
.wa-picker {
  position:relative; background:#fff; border-radius:16px; padding:28px 26px;
  max-width:420px; width:100%; box-shadow:0 30px 60px rgba(4,30,65,.35);
  transform: translateY(14px) scale(.97); transition: transform .25s var(--ease);
}
.wa-picker-overlay.open .wa-picker { transform: translateY(0) scale(1); }
.wa-picker-close {
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background: var(--paper); border:0; color: var(--slate); cursor:pointer;
  display:grid; place-items:center; transition: background .2s, color .2s;
}
.wa-picker-close:hover { background: var(--orange); color:#fff; }
.wa-picker-close svg { width:16px; height:16px; }
.wa-picker h3 { font-size:1.28rem; color: var(--navy); margin:0 0 6px; padding-right:30px; }
.wa-picker-sub { color: var(--slate); font-size:.92rem; margin:0 0 20px; }
.wa-picker-option {
  display:flex; align-items:center; gap:14px; padding:14px; border-radius:12px;
  border:1px solid var(--line); margin-bottom:10px; transition: border-color .2s, background .2s, transform .2s;
}
.wa-picker-option:last-child { margin-bottom:0; }
.wa-picker-option:hover { border-color: var(--orange); background: rgba(233,101,14,.06); transform: translateX(3px); }
.wa-picker-ic {
  flex:none; width:42px; height:42px; border-radius:10px; background: rgba(233,101,14,.1);
  color: var(--orange); display:grid; place-items:center;
}
.wa-picker-ic svg { width:22px; height:22px; }
.wa-picker-text { display:flex; flex-direction:column; gap:2px; }
.wa-picker-text b { color: var(--navy); font-size:.98rem; }
.wa-picker-text small { color: var(--slate); font-size:.82rem; }

/* ============================================================
   DETALLE DE PRODUCTO
   ============================================================ */
.prod-modal-overlay {
  position:fixed; inset:0; z-index:200;
  background: rgba(5,15,30,.6); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding:12px;
  opacity:0; pointer-events:none; transition: opacity .2s var(--ease);
}
.prod-modal-overlay.open { opacity:1; pointer-events:auto; }
.prod-modal {
  position:relative; background:#fff; border-radius:18px; overflow:hidden;
  max-width:720px; width:100%; max-height:96vh; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 30px 60px rgba(4,30,65,.35);
  transform: translateY(14px) scale(.97); transition: transform .25s var(--ease);
}
.prod-modal-overlay.open .prod-modal { transform: translateY(0) scale(1); }
.prod-modal-close {
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.92); border:0; color: var(--navy); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition: background .2s, color .2s;
}
.prod-modal-close:hover { background: var(--orange); color:#fff; }
.prod-modal-close svg { width:16px; height:16px; }
.prod-modal-photo {
  background: var(--paper); display:flex; align-items:center; justify-content:center;
  padding:24px; box-sizing:border-box;
}
.prod-modal-photo img { max-width:65%; max-height:200px; width:auto; height:auto; object-fit:contain; }
.prod-modal-body { padding:22px 24px; display:flex; flex-direction:column; }
.prod-modal-body .tag {
  align-self:flex-start; background: rgba(233,101,14,.1); color: var(--orange);
  font-size:.7rem; font-weight:600; padding:4px 10px; border-radius:100px; margin-bottom:8px;
}
.prod-modal-body h3 { font-size:1.22rem; color: var(--navy); margin-bottom:6px; line-height:1.25; }
.prod-modal-body p { color: var(--slate); line-height:1.45; margin-bottom:12px; font-size:.9rem; }
.prod-modal-specs {
  background: var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
}
.prod-modal-specs b { display:block; font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color: var(--orange); margin-bottom:6px; }
.prod-modal-specs ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
.prod-modal-specs li {
  position:relative; padding-left:14px; color: var(--ink); font-size:.82rem; line-height:1.35;
}
.prod-modal-specs li::before {
  content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background: var(--orange);
}
.prod-modal-body .price { font-family:"Sora"; font-weight:600; font-size:1.4rem; color: var(--navy); margin-bottom:14px; }
.prod-modal-body .btn { padding:11px 20px; font-size:.88rem; }
@media (max-width:640px){
  .prod-modal { grid-template-columns:1fr; max-height:92vh; }
  .prod-modal-photo { min-height:150px; padding:16px; }
  .prod-modal-photo img { max-height:130px; }
  .prod-modal-body { padding:18px 20px; }
}

/* ============================================================
   MINIBOT DE PREGUNTAS FRECUENTES
   ============================================================ */
.bot-toggle {
  position:fixed; left:22px; bottom:22px; z-index:60;
  background:#fff; color:var(--navy); width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(5,30,64,.18);
  border:2px solid var(--orange); cursor:pointer; transition: transform .2s var(--ease), background .2s, color .2s;
}
.bot-toggle:hover { transform: scale(1.08); background: var(--orange); color:#fff; }
.bot-toggle svg { width:26px; height:26px; }
.bot-toggle .bot-toggle-close { display:none; }
.bot-toggle.active .bot-toggle-chat { display:none; }
.bot-toggle.active .bot-toggle-close { display:block; }

.bot-panel {
  position:fixed; left:22px; bottom:90px; z-index:60;
  width:min(360px, calc(100vw - 44px)); height:min(500px, calc(100vh - 140px));
  background:#fff; border-radius:18px; box-shadow:0 20px 50px rgba(5,30,64,.28);
  display:none; flex-direction:column; overflow:hidden; border:1px solid var(--line);
}
.bot-panel.open { display:flex; }
.bot-header {
  background:#fff; color:var(--navy); padding:16px 18px; flex:none; border-bottom:2px solid var(--orange);
  display:flex; align-items:center; justify-content:space-between;
}
.bot-header-info { display:flex; align-items:center; gap:11px; }
.bot-avatar {
  width:38px; height:38px; border-radius:50%; background:rgba(233,101,14,.12); color:var(--orange);
  display:grid; place-items:center; flex:none;
}
.bot-avatar svg { width:20px; height:20px; }
.bot-header-info b { display:block; font-size:.95rem; }
.bot-header-info .bot-status { display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--slate); }
.bot-header-info .bot-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#37d67a; flex:none; }
.bot-close { background:none; border:0; color:var(--navy); font-size:1.6rem; line-height:1; cursor:pointer; padding:2px 6px; opacity:.6; }
.bot-close:hover { opacity:1; }

.bot-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background: var(--paper); }
.bot-msg { max-width:84%; padding:10px 13px; border-radius:14px; font-size:.88rem; line-height:1.45; }
.bot-msg a { color:inherit; font-weight:500; }
.bot-msg-bot { background:#fff; border:1px solid var(--line); color:var(--navy); border-bottom-left-radius:4px; align-self:flex-start; }
.bot-msg-user { background: var(--orange); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }

.bot-quickbar { flex:none; background: var(--paper); padding:6px 16px 0; border-top:1px solid var(--line); }
.bot-quick-toggle {
  background:none; border:0; color:var(--navy); font-size:.78rem; font-weight:600;
  padding:7px 2px; cursor:pointer; display:flex; align-items:center; gap:5px;
}
.bot-quick-toggle .chev { font-size:.7rem; transition: transform .2s; }
.bot-quick-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.bot-quick { display:flex; flex-wrap:wrap; gap:8px; padding:2px 16px 12px; flex:none; background: var(--paper); max-height:130px; overflow-y:auto; }
.bot-quick.collapsed { display:none; }
.bot-chip {
  background:#fff; border:1px solid var(--line); color:var(--navy);
  font-size:.78rem; font-weight:500; padding:7px 12px; border-radius:100px; cursor:pointer;
  transition: border-color .2s, background .2s;
}
.bot-chip:hover { border-color: var(--orange); background: rgba(233,101,14,.06); }

.bot-input-row { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex:none; background:#fff; }
.bot-input-row input {
  flex:1; min-width:0; border:1.5px solid var(--line); border-radius:100px; padding:10px 15px;
  font-size:.88rem; font-family:inherit;
}
.bot-input-row input:focus { outline:none; border-color: var(--orange); }
.bot-input-row button {
  width:40px; height:40px; border-radius:50%; background: var(--orange); color:#fff;
  border:0; display:grid; place-items:center; cursor:pointer; flex:none;
  transition: background .2s;
}
.bot-input-row button:hover { background: var(--orange-2); }
.bot-input-row button svg { width:17px; height:17px; }

/* ============================================================
   REVEAL (scroll) — pedido por el cliente, sutil
   ============================================================ */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} }

/* hero entrance orchestration */
.hero .anim { opacity:0; transform: translateY(20px); animation: rise .7s var(--ease) forwards; }
.hero .anim.d1{animation-delay:.05s}.hero .anim.d2{animation-delay:.18s}
.hero .anim.d3{animation-delay:.3s}.hero .anim.d4{animation-delay:.44s}
@keyframes rise { to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){ .hero .anim{opacity:1;transform:none;animation:none;} }

/* ============================================================
   CONSULTA PAGE
   ============================================================ */
.consulta-hero {
  background: linear-gradient(180deg,#fff5ec,var(--paper));
  color: var(--ink); padding: 60px 0 40px;
}
.consulta-hero h1 { font-size: clamp(2rem,4vw,3rem); color: var(--navy); }
.consulta-hero p { color: var(--slate); margin-top:12px; max-width:52ch; }
.consulta-body { padding: 48px 0 90px; }
.consulta-card {
  max-width:560px; margin:-70px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:34px; box-shadow:0 20px 50px rgba(5,30,64,.12); position:relative; z-index:3;
}
.field { margin-bottom:18px; }
.field label { display:block; font-weight:500; font-size:.92rem; color:var(--navy); margin-bottom:7px; }
.field input {
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:11px;
  font-size:1rem; font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
.field input:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(233,101,14,.14); }
.field .hint { font-size:.8rem; color:var(--slate); margin-top:6px; }

.result { margin-top:26px; }
.result-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.result-top { background:#fff; color:var(--navy); border-bottom:2px solid var(--orange); padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.result-top .ord { font-family:"Sora"; font-weight:600; font-size:1.3rem; }
.badge { padding:7px 14px; border-radius:100px; font-weight:600; font-size:.85rem; background:var(--orange); color:#fff; white-space:nowrap; }
.result-body { padding:22px 24px; }
.rrow { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.96rem; }
.rrow:last-child{ border-bottom:0; }
.rrow .k { color:var(--slate); }
.rrow .v { font-weight:500; color:var(--navy); text-align:right; }

/* status stepper */
.stepper { display:flex; align-items:center; margin:6px 0 22px; }
.stepper .dot { width:16px;height:16px;border-radius:50%;background:var(--line);flex:none;position:relative;z-index:2; }
.stepper .bar { flex:1; height:3px; background:var(--line); }
.stepper .dot.done{ background:var(--orange); }
.stepper .bar.done{ background:var(--orange); }
.stepper .dot.current{ background:var(--orange); box-shadow:0 0 0 5px rgba(233,101,14,.18); }
.stepper-labels { display:flex; justify-content:space-between; font-size:.72rem; color:var(--slate); margin-bottom:20px; }

.alert { padding:15px 18px; border-radius:12px; font-size:.95rem; margin-top:22px; }
.alert-warn { background:#fff5ec; border:1px solid #ffd9b8; color:#9a4d0b; }
.spinner { width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px){
  .cats{ grid-template-columns:1fr; }
  .intro-grid{ grid-template-columns:1fr; gap:40px; }
  .prods{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:not(:last-child)::after{ display:none; }
  .mvv{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0; background:#fff;
    flex-direction:column; gap:0; padding:10px 24px 20px; display:none;
    border-bottom:1px solid var(--line); max-height:calc(100vh - 74px); overflow-y:auto;
    box-shadow:0 14px 30px rgba(5,30,64,.10);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-cta .btn-ghost, .nav-cta .btn-outline{ display:none; }
  .burger{ display:block; }
}
@media (max-width: 720px){
  .svc-grid{ grid-template-columns:1fr; }
  .prods{ grid-template-columns:1fr; }
  .gallery-item{ flex-basis:200px; }
  .brands-row{ gap:24px 28px; }
  .brands-row img{ height:24px; max-width:110px; }
  .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:34px; }
  .section{ padding:64px 0; }
  .hero{ padding:40px 0 88px; }
  .hero-glyph{ opacity:.22; }
  .hero-eyebrow{ margin-bottom:16px; }
  .hero h1{ font-size:2.15rem; }
  .hero p.lead{ margin:14px 0 22px; }
  .hero-actions{ gap:10px; }
  .bot-toggle{ left:16px; bottom:16px; width:52px; height:52px; }
  .bot-panel{ left:12px; right:12px; width:auto; bottom:80px; height:min(70vh, 520px); }
}