/* Negocity: página principal. Paleta de la marca: verde #09672C, crema #FFFEFA y tinta.
   styles.css (paneles) usa exactamente los mismos valores. */
:root{
  --papel:#F6F8F5; --blanco:#fff; --tinta:#102A1A; --tinta-suave:#4B6152; --linea:#DCE6DE;
  --verde:#09672C; --verde-osc:#07501F; --verde-tenue:#E4F1E8; --verde-claro:#0D7A37; --verde-hondo:#054A1D;
  --crema:#FFFEFA;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --texto:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --ancho:1120px; --golpe:cubic-bezier(.2,1.4,.4,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--papel);color:var(--tinta);font:18px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid rgba(9,103,44,.5);outline-offset:3px;border-radius:6px}
::selection{background:#cfe8d6}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;
  font:700 17px/1 var(--texto);text-decoration:none;color:var(--crema);background:var(--verde);border:0;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px rgba(9,103,44,.7);transition:background .15s,transform .12s}
.boton:hover{background:var(--verde-osc)}
.boton:active{transform:scale(.97)}
.boton-grande{min-height:58px;padding:0 30px;font-size:19px;border-radius:16px}
.boton-chico{min-height:42px;padding:0 16px;font-size:15px;border-radius:12px}
.boton-tinta{background:var(--tinta);box-shadow:none}
.boton-tinta:hover{background:#081a0f}
.boton-claro{background:var(--crema);color:var(--verde);box-shadow:none}
.boton-claro:hover{background:var(--verde-tenue)}
.boton-ancho{width:100%}
.enlace-secundario{font-weight:700;color:var(--verde-osc);text-underline-offset:4px}
.enlace-boton{font:600 16px var(--texto);color:var(--tinta);background:none;border:0;padding:10px 12px;cursor:pointer;border-radius:10px}
.enlace-boton:hover{background:var(--verde-tenue)}

/* barra superior */
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;max-width:var(--ancho);margin:0 auto;
  padding:14px 24px;background:rgba(246,248,245,.9);backdrop-filter:saturate(1.4) blur(10px)}
.marca{display:inline-flex;align-items:center;text-decoration:none}
.logo-h{display:block;height:32px;width:auto}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;color:var(--tinta-suave)}
.menu a:hover{color:var(--tinta);background:var(--verde-tenue)}
.entrar{position:relative}
.entrar-menu{position:absolute;right:0;top:calc(100% + 8px);width:300px;padding:8px;background:#fff;border:1px solid var(--linea);
  border-radius:16px;box-shadow:0 18px 40px -18px rgba(18,48,46,.45)}
.entrar-menu a{display:grid;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none}
.entrar-menu a:hover{background:var(--verde-tenue)}
.entrar-menu span{font-size:14px;color:var(--tinta-suave)}

/* hero */
main{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:56px 0 88px}
.hero h1{font-size:clamp(46px,7.2vw,92px);font-weight:800;line-height:.95;letter-spacing:-.045em}
.entrada{font-size:20px;line-height:1.55;color:var(--tinta-suave);max-width:36ch}
.hero .entrada{margin-top:24px}
.acciones-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.nota-hero{margin-top:16px;font-size:15px;color:var(--tinta-suave)}

/* la tarjeta de la demostración */
.demo{display:grid;gap:18px;justify-items:center}
.tarjeta{position:relative;width:100%;max-width:440px;aspect-ratio:1012/638;padding:24px 24px 20px;border-radius:24px;color:#fff;
  background:var(--verde);
  box-shadow:0 30px 60px -28px rgba(5,74,29,.8),0 0 0 7px var(--verde) inset,0 0 0 10px var(--crema) inset;display:flex;flex-direction:column;
  transform:rotate(-2.5deg)}
.tarjeta-arriba{display:flex;justify-content:space-between;gap:12px}
.tarjeta-negocio{font:800 26px/1.05 var(--display);letter-spacing:-.03em}
.tarjeta-premio{margin-top:6px;font-size:14px;font-weight:600;color:#cfe8d6}
.tarjeta-qr{width:66px;height:66px;flex:none;padding:5px;background:#fff;border-radius:8px}
.tarjeta-qr svg,.tarjeta-qr img{display:block;width:100%;height:100%}
.sellos{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.sellos li{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,254,250,.5);display:grid;place-items:center}
.sellos li.puesto{border:0;background:var(--crema);animation:sellar .38s var(--golpe) both}
.sellos li.puesto::after{content:"";width:30%;height:52%;margin-top:-10%;border:solid var(--verde);border-width:0 3px 3px 0;transform:rotate(40deg)}
@keyframes sellar{0%{transform:scale(1.9) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0)}}
.tarjeta-cliente{margin-top:14px;font:700 18px/1 var(--display);letter-spacing:-.02em}
.ganaste{position:absolute;inset:0;border-radius:24px;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;
  text-align:center;color:var(--crema);background:rgba(5,58,24,.92);backdrop-filter:blur(2px);animation:aparecer .3s ease both}
.ganaste p{font-size:18px;max-width:22ch}
.sello-premio{width:64px;height:64px;animation:sellar .45s var(--golpe) both}
.sello-premio circle{fill:var(--crema)}
.sello-premio path{fill:none;stroke:var(--verde);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes aparecer{from{opacity:0}}
.demo-controles{display:grid;justify-items:center;gap:10px;text-align:center}
.demo-estado{font-size:15px;color:var(--tinta-suave);min-height:1.6em}

/* secciones */
.seccion{padding:80px 0;border-top:1px solid var(--linea)}
.seccion h2{font-size:clamp(34px,4.6vw,54px);font-weight:800;line-height:1;letter-spacing:-.035em;max-width:18ch}

.pasos-inicio{list-style:none;counter-reset:paso;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.pasos-inicio li{counter-increment:paso;padding-top:20px;border-top:3px solid var(--tinta)}
.pasos-inicio li::before{content:counter(paso);display:block;font:800 44px/1 var(--display);color:var(--verde);margin-bottom:14px}
.pasos-inicio h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.pasos-inicio p{font-size:16px;color:var(--tinta-suave)}

.seccion-dividida{display:grid;grid-template-columns:1fr 1.15fr;gap:56px}
.seccion-dividida .entrada{margin-top:20px}
.foto{margin:32px 0 0}
.foto img{display:block;width:100%;height:auto;border-radius:18px;background:var(--linea)}
.foto-ancha{margin-top:56px}
.foto-ancha img{aspect-ratio:21/9;object-fit:cover;object-position:50% 55%}
.ventajas{margin:0;display:grid;gap:0}
.ventajas div{padding:22px 0;border-bottom:1px solid var(--linea)}
.ventajas div:first-child{padding-top:4px}
.ventajas dt{font:700 21px/1.2 var(--display);letter-spacing:-.02em}
.ventajas dd{margin:6px 0 0;color:var(--tinta-suave);font-size:17px}

.giros{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.giros li{padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-weight:600}

.precio{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start}
.precio-texto .entrada{margin-top:20px}
.precio-caja{padding:32px;background:#fff;border-radius:24px;border:1px solid var(--linea)}
.monto{font:800 76px/1 var(--display);letter-spacing:-.05em;display:flex;align-items:flex-start;gap:4px}
.moneda{font-size:34px;margin-top:8px}
.periodo{align-self:flex-end;margin:0 0 10px 8px;font:600 17px/1.2 var(--texto);letter-spacing:0;color:var(--tinta-suave)}
.incluye{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:12px}
.incluye li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.incluye li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3.2 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.letra-chica{margin-top:14px;font-size:14px;color:var(--tinta-suave);text-align:center}

.faq{margin-top:36px;max-width:780px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font:700 20px/1.3 var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border:solid var(--verde);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq details p{padding:0 0 22px;color:var(--tinta-suave);max-width:62ch}

.cierre{margin:40px 0 80px;padding:72px 32px;border-radius:32px;text-align:center;color:var(--crema);
  background:var(--verde);box-shadow:0 0 0 10px var(--verde) inset,0 0 0 13px var(--crema) inset}
.cierre h2{font-size:clamp(32px,4.6vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.035em;max-width:16ch;margin:0 auto 32px}

.pie{max-width:var(--ancho);margin:0 auto;padding:32px 24px 48px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--linea);font-size:15px;color:var(--tinta-suave)}
.marca-pie .logo-h{height:28px}
.pie nav{display:flex;gap:18px;margin-left:auto}
.pie nav a{text-underline-offset:3px}

/* celular y tableta */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:44px;padding:28px 0 64px}
  .pasos-inicio{grid-template-columns:1fr 1fr;gap:36px 28px}
  .seccion-dividida,.precio{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  body{font-size:17px}
  .barra{gap:10px;padding:12px 16px}
  .menu{display:none}
  .entrar{margin-left:auto}
  .logo-h{height:28px}
  main{padding:0 16px}
  .entrada{font-size:18px}
  .boton-grande{width:100%}
  .acciones-hero{gap:16px;justify-content:center}
  .hero-texto{text-align:left}
  .tarjeta{padding:20px 20px 18px;border-radius:20px;transform:rotate(-1.5deg)}
  .tarjeta-negocio{font-size:21px}
  .tarjeta-qr{width:52px;height:52px}
  .sellos{gap:5px}
  .seccion{padding:56px 0}
  .pasos-inicio{grid-template-columns:1fr}
  .precio-caja{padding:24px}
  .cierre{padding:48px 20px;border-radius:24px}
  .pie nav{margin-left:0}
  .entrar-menu{position:fixed;left:16px;right:16px;top:64px;width:auto}
}
@media (max-width:640px){ .barra .boton-chico{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after{animation:none!important;transition:none!important}
}