/* ==========================================================================
   SistemasPDV · sistema de diseño

   EL EQUILIBRIO
   El cliente es la PyME y el corporativo a la vez, y quieren cosas distintas:
     · La PyME necesita claridad y legibilidad. Dueños de 45 a 65 años.
     · El corporativo necesita solidez institucional.
   La respuesta: CUERPO CLARO (confianza y lectura) con BANDAS OSCURAS
   en portada y pie (carácter). Ni un blanco genérico ni un oscuro de startup.

   EL COLOR
     Azul institucional = la marca.  Cian = lo técnico.  Y nada más.
   ========================================================================== */

:root{
  /* superficies claras */
  --blanco:#FFFFFF;   --fondo:#F6F9FB;    --fondo-2:#EDF3F8;
  /* texto */
  --tinta:#0E1E2B;    --tinta-2:#4A6070;  --tinta-3:#5F7486;
  /* marca */
  --azul:#12466B;     --azul-h:#0C3352;   --azul-luz:#E3EEF5;
  --cian:#0A7A89;     --cian-f:#0E8FA0;   --cian-luz:#E0F2F4;
  /* bandas oscuras */
  --oscuro:#0B2436;   --oscuro-2:#103049; --oscuro-3:#16405E;
  --o-txt:#EAF2F8;    --o-txt-2:#9FB8CA;  --cian-vivo:#3FC9D9;
  /* estado */
  --exito:#0F7B54;    --alerta:#A9600C;   --error:#A6291F;
  /* líneas y formas */
  --linea:#DCE7EF;    --linea-o:rgba(255,255,255,.14);
  --r:14px; --r-s:10px; --r-l:22px;
  --ancho:1160px;
  --sombra:0 18px 44px -22px rgba(14,30,43,.28);
  --sombra-s:0 2px 10px -4px rgba(14,30,43,.16);
  --t:.22s cubic-bezier(.4,0,.2,1);
  --tit:'Sora',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --txt:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 16px/1.7 var(--txt);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--cian);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--azul)}
h1,h2,h3,h4{font-family:var(--tit);font-weight:600;line-height:1.15;margin:0 0 .5em;
  letter-spacing:-.02em;color:var(--tinta)}
h1{font-size:clamp(2rem,5.2vw,3.7rem);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.4vw,2.45rem);letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem)}
p{margin:0 0 1.1em}
.tenue{color:var(--tinta-2)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px;border-radius:6px}
::selection{background:var(--azul);color:#fff}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.sec{padding:clamp(60px,8vw,104px) 0;position:relative}
.sec--alt{background:var(--fondo-2);border-block:1px solid var(--linea)}
.sec--blanca{background:var(--blanco);border-block:1px solid var(--linea)}

/* --- banda oscura --- */
.oscura{background:var(--oscuro);color:var(--o-txt);position:relative;overflow:hidden}
.oscura h1,.oscura h2,.oscura h3,.oscura h4{color:var(--o-txt)}
.oscura .tenue{color:var(--o-txt-2)}
.oscura .kicker{color:var(--cian-vivo)}
.oscura .kicker::before{background:var(--cian-vivo)}
.oscura a{color:var(--cian-vivo)}
.oscura a:hover{color:#7EE0EC}

.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cian);margin-bottom:16px;font-weight:600}
.kicker::before{content:"";width:24px;height:2px;background:var(--cian);border-radius:2px}
.encabezado-sec{max-width:660px;margin-bottom:clamp(34px,4.5vw,52px)}
.encabezado-sec p{color:var(--tinta-2);font-size:1.05rem;margin:0}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;
  border-radius:var(--r-s);border:1.5px solid transparent;font:600 .95rem/1 var(--txt);
  cursor:pointer;transition:all var(--t);min-height:48px;text-align:center}
.btn--p{background:var(--azul);color:#fff;border-color:var(--azul);box-shadow:var(--sombra-s)}
.btn--p:hover{background:var(--azul-h);border-color:var(--azul-h);color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(18,70,107,.7)}
.btn--s{background:var(--blanco);color:var(--azul);border-color:var(--linea)}
.btn--s:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px);box-shadow:var(--sombra-s)}
.btn--wa{background:#128C4A;color:#fff;border-color:#128C4A}
.btn--wa:hover{background:#0E7A40;border-color:#0E7A40;color:#fff;transform:translateY(-2px)}
.oscura .btn--p{background:var(--cian-vivo);color:#052731;border-color:var(--cian-vivo)}
.oscura .btn--p:hover{background:#7EE0EC;border-color:#7EE0EC;color:#052731;
  box-shadow:0 14px 30px -14px rgba(63,201,217,.6)}
.oscura .btn--s{background:transparent;color:var(--o-txt);border-color:var(--linea-o)}
.oscura .btn--s:hover{border-color:var(--cian-vivo);color:var(--cian-vivo)}

/* --- barra --- */
.barra{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t)}
.barra.pegada{border-bottom-color:var(--linea);box-shadow:var(--sombra-s)}
.barra__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.logo{display:flex;align-items:center;gap:12px;color:var(--azul);font-family:var(--tit);
  font-weight:700;letter-spacing:-.02em;font-size:1.08rem}
.logo svg{width:36px;height:36px;color:var(--azul);flex:0 0 auto}
.logo span{color:var(--tinta)}
.logo span b{color:var(--cian);font-weight:700}
.oscura .logo,.pie .logo{color:var(--o-txt)}
.oscura .logo svg,.pie .logo svg{color:var(--cian-vivo)}
.oscura .logo span,.pie .logo span{color:var(--o-txt)}
.oscura .logo span b,.pie .logo span b{color:var(--cian-vivo)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{color:var(--tinta-2);padding:10px 14px;border-radius:var(--r-s);font-size:.93rem;font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--azul);background:var(--azul-luz)}
.barra .btn{padding:11px 20px;min-height:44px;font-size:.88rem}
.menu-btn{display:none;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-s);
  color:var(--tinta);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}

/* --- portada, banda oscura --- */
.hero{padding:clamp(54px,7.5vw,98px) 0 clamp(58px,8vw,104px)}
.hero__rejilla{position:absolute;inset:0;z-index:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 72% 8%,#000 18%,transparent 76%);
  mask-image:radial-gradient(ellipse 90% 62% at 72% 8%,#000 18%,transparent 76%)}
.hero__brillo{position:absolute;top:-240px;right:-180px;width:760px;height:760px;z-index:0;
  pointer-events:none;background:radial-gradient(circle,rgba(63,201,217,.18),transparent 62%)}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,5vw,58px);align-items:center}
.hero h1 em{font-style:normal;color:var(--cian-vivo);display:block}
.hero__entrada{font-size:clamp(1rem,1.55vw,1.15rem);color:var(--o-txt-2);max-width:56ch;margin-bottom:30px}
.hero__acc{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero__datos{display:flex;gap:clamp(18px,3.6vw,42px);flex-wrap:wrap;
  border-top:1px solid var(--linea-o);padding-top:24px;margin-top:12px}
.dato b{display:block;font-family:var(--tit);font-size:clamp(1.02rem,1.9vw,1.28rem);font-weight:700;
  color:var(--cian-vivo);line-height:1.2;letter-spacing:-.02em}
.dato span{font-size:.82rem;color:var(--o-txt-2)}
.hero__marca{position:relative;display:flex;justify-content:center;align-items:center}
.hero__marca svg{width:min(100%,360px);color:var(--cian-vivo);opacity:.95;
  filter:drop-shadow(0 0 54px rgba(63,201,217,.32));animation:flota 7s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* --- tarjetas --- */
.rejilla{display:grid;gap:20px}
.r-2{grid-template-columns:repeat(2,1fr)}
.r-3{grid-template-columns:repeat(3,1fr)}
.r-4{grid-template-columns:repeat(4,1fr)}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(22px,2.5vw,30px);transition:all var(--t);position:relative;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sombra-s)}
.tarjeta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cian);opacity:0;transition:opacity var(--t)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:#C9DAE7}
.tarjeta:hover::before{opacity:1}
.tarjeta h3{margin-bottom:.35em}
.tarjeta p{color:var(--tinta-2);font-size:.96rem;margin-bottom:1em}
.tarjeta__pie{margin-top:auto;padding-top:14px}
.tarjeta__pie a{font-weight:600;font-size:.93rem;display:inline-flex;align-items:center;gap:7px;color:var(--azul)}
.tarjeta__pie a::after{content:"\2192";transition:transform var(--t)}
.tarjeta:hover .tarjeta__pie a::after{transform:translateX(4px)}
.sec--alt .tarjeta{background:var(--blanco)}

/* hexágono de icono */
.hex{width:54px;height:60px;display:grid;place-items:center;margin-bottom:18px;flex:0 0 auto;
  background:var(--azul-luz);color:var(--azul);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background var(--t),color var(--t)}
.tarjeta:hover .hex{background:var(--azul);color:#fff}
.hex svg{width:25px;height:25px}

.lista{list-style:none;padding:0;margin:0 0 4px}
.lista li{position:relative;padding-left:25px;margin-bottom:10px;color:var(--tinta-2);font-size:.95rem}
.lista li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:10px;background:var(--cian);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.oscura .lista li{color:var(--o-txt-2)}
.oscura .lista li::before{background:var(--cian-vivo)}

/* --- proceso --- */
.pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.paso{position:relative;padding-top:36px}
.paso::before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:var(--linea);border-radius:2px}
.paso__n{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;background:var(--azul);
  color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.76rem;font-weight:700}
.paso h4{font-family:var(--tit);font-size:1rem;margin:0 0 .4em;font-weight:600}
.paso p{font-size:.9rem;color:var(--tinta-2);margin:0}

/* --- productos --- */
.producto{background:linear-gradient(135deg,var(--blanco),var(--azul-luz));
  border:1px solid var(--linea);border-radius:var(--r-l);padding:clamp(26px,3.6vw,42px);
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;box-shadow:var(--sombra-s)}
.etiqueta{display:inline-block;font-family:var(--mono);font-size:.68rem;color:var(--alerta);
  background:#FDF3E4;border:1px solid #F0D9B4;padding:4px 10px;border-radius:99px;margin-bottom:12px}

/* --- preguntas frecuentes --- */
.faq{display:grid;gap:10px;max-width:860px}
.faq__i{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.faq__i[open]{border-color:#C2D6E4;box-shadow:var(--sombra-s)}
.faq__i summary{list-style:none;cursor:pointer;padding:19px 56px 19px 24px;position:relative;
  font-family:var(--tit);font-weight:600;font-size:1.02rem;line-height:1.4;
  color:var(--tinta);transition:color var(--t)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--azul)}
.faq__i summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--cian);border-bottom:2px solid var(--cian);
  transform:rotate(45deg);transition:transform var(--t)}
.faq__i[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__r{padding:0 24px 22px;border-top:1px solid var(--linea)}
.faq__r p{color:var(--tinta-2);margin:17px 0 0;font-size:.97rem}

/* --- cta --- */
.cta{background:var(--oscuro);color:var(--o-txt);border-radius:var(--r-l);
  padding:clamp(34px,4.8vw,60px);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 300px at 50% 0,rgba(63,201,217,.16),transparent 70%)}
.cta>*{position:relative}
.cta h2{color:var(--o-txt)}
.cta p{max-width:56ch;margin-inline:auto;color:var(--o-txt-2)}
.cta__acc{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.cta .btn--p{background:var(--cian-vivo);color:#052731;border-color:var(--cian-vivo)}
.cta .btn--p:hover{background:#7EE0EC;border-color:#7EE0EC;color:#052731}
.cta .btn--s{background:transparent;color:var(--o-txt);border-color:var(--linea-o)}
.cta .btn--s:hover{border-color:var(--cian-vivo);color:var(--cian-vivo)}

/* --- formulario --- */
.forma{display:grid;gap:16px}
.campo label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px;color:var(--tinta)}
.campo input,.campo select,.campo textarea{width:100%;background:var(--blanco);
  border:1.5px solid var(--linea);border-radius:var(--r-s);padding:13px 15px;color:var(--tinta);
  font:400 .97rem var(--txt);transition:border-color var(--t),box-shadow var(--t)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--cian);
  box-shadow:0 0 0 3px var(--cian-luz)}
.campo textarea{resize:vertical;min-height:120px}
.campo small{display:block;color:var(--tinta-3);font-size:.82rem;margin-top:6px}
.aviso{padding:14px 16px;border-radius:var(--r-s);font-size:.93rem;border:1px solid}
.aviso--ok{background:#E7F6EF;border-color:#B7E3CE;color:var(--exito)}
.aviso--mal{background:#FBECEA;border-color:#F0C4BF;color:var(--error)}

/* --- pie --- */
.pie{background:var(--oscuro);color:var(--o-txt-2);padding:clamp(44px,6vw,70px) 0 28px}
.pie h4{font-family:var(--tit);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--cian-vivo);margin-bottom:16px;font-weight:600}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:10px}
.pie li a{color:var(--o-txt-2);font-size:.93rem}
.pie li a:hover{color:var(--cian-vivo)}
.pie__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.pie__legal{border-top:1px solid var(--linea-o);padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--o-txt-2);font-size:.85rem}
.pie__legal a{color:var(--o-txt-2)}
.pie__legal a:hover{color:var(--cian-vivo)}

.aparece{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.aparece.visto{opacity:1;transform:none}

/* --- responsive --- */
@media(max-width:980px){
  .hero__in{grid-template-columns:1fr}
  .hero__marca{order:-1;margin-bottom:6px}
  .hero__marca svg{width:min(58%,220px)}
  .r-4{grid-template-columns:repeat(2,1fr)}
  .r-3{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .pie__in{grid-template-columns:1fr 1fr}
  .producto{grid-template-columns:1fr}
}
@media(max-width:720px){
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanco);border-bottom:1px solid var(--linea);padding:12px 20px 20px;
    transform:translateY(-130%);transition:transform var(--t);z-index:59;box-shadow:var(--sombra)}
  .nav.abierto{transform:none}
  .nav a{padding:13px 12px;border-radius:var(--r-s)}
  .menu-btn{display:flex}
  .barra .btn{display:none}
  .r-2,.r-3,.r-4,.pasos,.pie__in{grid-template-columns:1fr}
  .hero__acc .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}