/* =================================================================
   Portal-vitrina BajioIA · Landing pages
   SOFT-001 — Identidad de Producto Digital: lienzo claro, superficies
   glass, glow IA azul→violeta SOLO en interacción/acentos, cobre como
   hilo con la marca. El software NO usa navy de fondo (eso es MAR-001).
   ================================================================= */

/* ---------- Tipografía self-hosted: Inter (subset latin) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens (SOFT-001) ---------- */
:root{
  /* Base clara — el software vive en lienzo luminoso */
  --canvas:      #FFFFFF;
  --canvas-soft: #FAFBFF;
  /* Acentos de IA — gradiente firma (SOLO interacción / acentos / momento IA) */
  --ai-blue:     #1BA1E3;
  --ai-violet:   #9B72CB;
  /* Cobre — hilo con la marca comercial (detalles / acentos) */
  --copper:      #B87333;
  --copper-soft: #cd9b6e;
  /* Texto */
  --ink-1: #1A1A22;   /* primario */
  --ink-2: #5B5B66;   /* secundario */
  --ink-3: #8b8b96;   /* terciario */
  /* Glass */
  --glass:        rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.78);
  --hairline:     rgba(20,30,60,0.08);

  --font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius: 18px;
  --maxw: 70rem;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

body{
  font-family:var(--font);
  font-weight:400;
  font-synthesis:none;
  color:var(--ink-1);
  line-height:1.6;
  background:
    radial-gradient(1100px 620px at 6% -14%, rgba(27,161,227,0.07), transparent 60%),
    radial-gradient(1000px 640px at 105% -6%, rgba(155,114,203,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f4f6fc 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Header / marca ---------- */
.site-header{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(1.4rem,4vw,2.1rem) clamp(1.25rem,5vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:inline-flex; align-items:center; gap:0.6rem; color:var(--ink-1); }
.brand__mark{ width:34px; height:34px; }
.brand__word{ font-size:1.26rem; letter-spacing:-0.005em; line-height:1; }
.brand__word b{ font-weight:500; }
.brand__word span{ font-weight:500; color:var(--ink-2); }
.site-header__tag{
  font-size:0.78rem; font-weight:500; color:var(--ink-2);
  padding:0.34rem 0.8rem; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* ---------- Hero / intro ---------- */
.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(2.5rem,8vw,5.5rem) clamp(1.25rem,5vw,2.5rem) clamp(1.4rem,5vw,2.6rem);
}
.hero__eyebrow{
  font-size:0.82rem; font-weight:500; letter-spacing:0.04em;
  color:var(--copper); margin-bottom:1rem;
}
.hero__title{
  font-weight:500; letter-spacing:-0.025em; line-height:1.05;
  font-size:clamp(2.4rem,7vw,4.4rem); max-width:15ch; color:var(--ink-1);
}
.hero__title .accent{
  background:linear-gradient(110deg, var(--ai-blue), var(--ai-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__intro{
  margin-top:1.3rem; max-width:48ch;
  font-size:clamp(1.02rem,2.4vw,1.16rem); color:var(--ink-2); font-weight:400;
}
.hero__rule{
  margin-top:2rem; width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--copper), var(--copper-soft));
}

/* ---------- Catálogo / categorías ---------- */
.catalog{ max-width:var(--maxw); margin:0 auto; padding:1rem clamp(1.25rem,5vw,2.5rem) 2rem; }
.category{ padding:clamp(1.8rem,6vw,3.2rem) 0; }
.category__head{ margin-bottom:clamp(1.4rem,4vw,2.1rem); }
.category__label{
  font-weight:500; letter-spacing:-0.01em; font-size:clamp(1.5rem,4vw,2.05rem); color:var(--ink-1);
  display:inline-flex; align-items:center; gap:0.7rem;
}
.category__label::before{
  content:""; width:22px; height:2px; background:var(--copper); display:inline-block; border-radius:2px;
}
.category__blurb{ margin-top:0.55rem; color:var(--ink-2); max-width:54ch; font-size:0.98rem; }

/* ---------- Grid de tarjetas ---------- */
.grid{ display:grid; gap:clamp(1rem,3vw,1.5rem); grid-template-columns:1fr; }
@media (min-width:620px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(3,1fr); } }

/* Tarjeta glass (SOFT-001) — superficie translúcida sobre lienzo claro */
.card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--radius); overflow:hidden; isolation:isolate;
  background:var(--glass);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 18px 42px -30px rgba(20,30,60,0.45), 0 2px 8px -6px rgba(20,30,60,0.16);
  transition:transform 0.55s var(--spring), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  will-change:transform;
}
/* Hairline gradiente azul→violeta (momento IA) — aparece discreto en hover/foco */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--ai-blue), var(--ai-violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity 0.5s var(--ease); pointer-events:none; z-index:2;
}
.card:hover, .card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.9);
  box-shadow:
    0 30px 60px -32px rgba(20,30,60,0.40),
    0 0 32px -10px rgba(27,161,227,0.34),
    0 0 44px -8px rgba(155,114,203,0.30);
  outline:none;
}
.card:hover::before, .card:focus-visible::before{ opacity:0.7; }

.card__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:#eaf0fb; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__body{ padding:1.1rem 1.2rem 1.25rem; display:flex; flex-direction:column; gap:0.3rem; }
.card__title{ font-weight:500; font-size:1.06rem; line-height:1.25; color:var(--ink-1); }
.card__subtitle{ color:var(--ink-2); font-size:0.9rem; }
.card__cue{
  margin-top:0.7rem; display:inline-flex; align-items:center; gap:0.4rem;
  color:var(--copper); font-weight:500; font-size:0.84rem; letter-spacing:0.01em;
}
.card__cue svg{ width:17px; height:17px; transition:transform 0.45s var(--spring); }
.card:hover .card__cue svg{ transform:translateX(4px); }

/* Placeholder "Pronto…" (categoría vacía) */
.placeholder{
  grid-column:1 / -1;
  border-radius:var(--radius);
  border:1px dashed rgba(20,30,60,0.16);
  background:rgba(255,255,255,0.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:clamp(2.1rem,6vw,3.3rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
}
.placeholder__mark{ color:var(--copper); font-size:1.3rem; opacity:0.9; }
.placeholder__text{ font-weight:500; font-size:1.22rem; letter-spacing:0.01em; color:var(--ink-1); }
.placeholder__sub{ color:var(--ink-3); font-size:0.92rem; }

/* ---------- CTA comercial → WhatsApp (acento SOFT-001) ---------- */
.cta-wa{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.85rem 1.5rem; border-radius:999px;
  font-family:var(--font); font-weight:500; font-size:1rem; line-height:1; letter-spacing:-0.005em;
  color:#fff; text-align:center;
  background:linear-gradient(110deg, var(--ai-blue), var(--ai-violet));
  box-shadow:0 14px 30px -14px rgba(27,161,227,0.55), 0 2px 8px -4px rgba(155,114,203,0.5);
  transition:transform 0.5s var(--spring), box-shadow 0.5s var(--ease), filter 0.4s var(--ease);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cta-wa__icon{ width:20px; height:20px; flex:none; }
.cta-wa:hover, .cta-wa:focus-visible{
  transform:translateY(-2px); filter:saturate(1.08); outline:none;
  box-shadow:0 22px 44px -16px rgba(27,161,227,0.7), 0 0 26px -6px rgba(155,114,203,0.55);
}
.cta-wa:focus-visible{ outline:2px solid var(--ai-violet); outline-offset:3px; }
.cta-wa:active{ transform:translateY(0) scale(0.99); }
.cta-wa--lg{ padding:1rem 1.9rem; font-size:1.06rem; }

/* CTA del hero */
.hero__cta{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.8rem 1.1rem; }
.hero__offer{ font-size:0.96rem; color:var(--ink-2); max-width:34ch; }
.hero__offer strong{ color:var(--copper); font-weight:500; }

/* ---------- Banda comercial (oferta + CTA, glass sobre lienzo claro) ---------- */
.offer{ max-width:var(--maxw); margin:clamp(1.5rem,5vw,3rem) auto 0; padding:0 clamp(1.25rem,5vw,2.5rem); }
.offer__card{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:22px; padding:clamp(2rem,6vw,3.4rem);
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 22px 50px -34px rgba(20,30,60,0.5);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
/* Glow firma sutil (momento IA, en una esquina — no de fondo) */
.offer__card::before{
  content:""; position:absolute; z-index:-1; top:-40%; right:-25%; width:60%; height:130%;
  background:radial-gradient(closest-side, rgba(27,161,227,0.13), rgba(155,114,203,0.08) 55%, transparent 72%);
  pointer-events:none;
}
.offer__eyebrow{ font-size:0.82rem; font-weight:500; letter-spacing:0.04em; color:var(--copper); }
.offer__title{ margin-top:0.5rem; font-weight:500; font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:-0.02em; color:var(--ink-1); }
.offer__lead{ margin-top:0.9rem; max-width:46ch; font-size:clamp(1rem,2.4vw,1.12rem); color:var(--ink-2); }
.offer__lead strong{ color:var(--ink-1); font-weight:500; }
.offer__note{ margin-top:0.7rem; max-width:52ch; font-size:0.92rem; color:var(--ink-3); line-height:1.6; }
.offer .cta-wa{ margin-top:1.6rem; }

/* ---------- Footer ---------- */
.site-footer{
  max-width:var(--maxw); margin:2rem auto 0; padding:2.4rem clamp(1.25rem,5vw,2.5rem) 3rem;
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  color:var(--ink-3); font-size:0.84rem;
}
.site-footer a{ color:var(--ink-2); }
.site-footer a:hover{ color:var(--copper); }

.error{ color:var(--ink-2); padding:2rem 0; }

/* ---------- Reveal (blur + spring al entrar) ---------- */
.reveal{ opacity:0; transform:translateY(20px); filter:blur(6px);
  transition:opacity 0.8s var(--ease), transform 0.8s var(--spring), filter 0.8s var(--ease); }
.reveal.visible{ opacity:1; transform:none; filter:blur(0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .card:hover{ transform:none; }
  .cta-wa:hover, .cta-wa:focus-visible{ transform:none; }
}