:root{
  --brand:#343075;        /* morado base */
  --accent:#1BA1F2;       /* azul acento */
  --bg:#FFFFFF;
  --text:#1E1E1E;
  --muted:#6B6B6B;
  --soft:#F5F5F7;
  --success:#28A745;
  --error:#DC3545;
  --radius:16px;
  --container:1200px;

  /* Header */
  --header-large: 200px;   /* estado “arriba” visual */
  --header-compact: 120px; /* estado compacto */
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  /* Para que los anclajes no queden ocultos por el header */
  scroll-padding-top: var(--header-compact);
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height:1.6;
  padding-top: var(--header-compact);
}

/* Containers & grid */
.container{width:100%;max-width:var(--container);padding:0 20px;margin:0 auto}
.section{padding:64px 0}
.section--alt{background:var(--soft)}
.grid{display:grid;gap:32px}
.grid--2{grid-template-columns:1.1fr 0.9fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* Header fijo, nunca desaparece */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-compact);
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, height .001s linear;
}
.header__row{
  min-height: var(--header-compact);
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 0;
  transition: padding .35s ease;
}
.brand img{
  height: 100px; width:auto;
  transform-origin: left center;
  transform: scale(1);
  transition: transform .35s ease, opacity .35s ease;
  will-change: transform;
}

/* Estado “arriba del todo” */
.site-header.at-top{
  height: var(--header-large);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.site-header.at-top .header__row{ padding: 18px 0; }
.site-header.at-top .brand img{
  /* Escala visual hacia ~200px */
  transform: scale(calc(var(--header-large) / 100)); /* 100px = altura base del logo */
  opacity: 1;
}

/* Navegación */
.nav{display:flex;gap:20px;align-items:center}
.nav__link{color:#1e1e1e;text-decoration:none;opacity:.9}
.nav__link:hover{opacity:1}

/* Hero */
.hero{position:relative;min-height:80vh;display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.hero__content{position:relative;z-index:1;color:#fff;padding:48px 0}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 12px}
.lead{font-size:clamp(16px,2.4vw,20px);opacity:.95;margin-bottom:20px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Cards / media */
.media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0;margin:16px 0 0;list-style:none}
.kpis strong{color:var(--brand)}
.muted{color:var(--muted)}

/* Productos */
.products{display:grid;gap:2rem}
.product.card{
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;
  background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 10px rgba(0,0,0,0.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product.card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,0.1)}
.product__media img{max-width:200px;height:auto;margin-bottom:1rem}
.product__body h3{font-size:1.25rem;margin-bottom:.75rem;color:#343075}
.product__body p{font-size:.95rem;color:#444;margin-bottom:1.25rem;line-height:1.5}
.product__body .btn{margin-top:auto}

/* Botones */
.btn{
  --btn-bg:#eee;--btn-fg:#222;--btn-bd:#ddd;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:700;cursor:pointer
}
.btn--sm{padding:8px 14px;font-weight:600}
.btn--primary{--btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:#fff;border-width:2px}
.section:not(.hero) .btn--ghost{--btn-fg:var(--brand);--btn-bd:var(--brand)}

/* CTA band */
.cta{padding:48px 0}
.cta__box{
  background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border-radius:var(--radius);
  padding:28px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap
}

/* Formulario */
.hp {
  display: none !important;   /* oculta completamente en navegadores normales */
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.form{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.form__row{display:flex;flex-direction:column;margin-bottom:14px}
label{font-weight:600;margin-bottom:6px}
input,textarea{
  width:100%;padding:12px 14px;border:1px solid #dadada;border-radius:12px;
  font:inherit;outline:none;background:#fff;transition:box-shadow .2s,border-color .2s
}
input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(52,48,117,.15)}
textarea{resize:vertical;min-height:120px}
.form__status{min-height:20px;font-size:.95rem}

/* Acciones del formulario (alineación botón + legal) */
.form-actions{
  display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;
}
.form-actions .btn{margin:0}
.form-legal{margin:0;font-size:.95rem;color:#5f5f5f;line-height:1.4}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:22px 0;background:#fff}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__links{display:flex;gap:14px}
.footer__links a{text-decoration:none;color:var(--text);opacity:.85}
.footer__links a:hover{opacity:1}

/* Botón flotante "volver al inicio" */
.backtop{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:44px;height:44px;border-radius:999px;border:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;text-decoration:none;font-size:20px;font-weight:700;
  box-shadow:0 8px 22px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, filter .2s ease;
}
.backtop:hover{filter:brightness(1.08)}
.backtop.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}

@media (max-width:1024px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){.grid--4{grid-template-columns:1fr}}
@media (max-width:640px){
  .form-actions{flex-direction:column;align-items:flex-start}
  .form-legal{font-size:.9rem}
}