/* =========================================
   ControlHorario.digital · UI v3 minimal
   Diseño limpio, moderno y accesible
   ========================================= */

/* ===== Tokens ===== */
:root{
  --bg: #ffffff;            /* fondo blanco para look minimal */
  --bg-weak: #f7f8f9;       /* secciones suaves */
  --ink: #1f2937;           /* gris 800 (legible) */
  --ink-weak: #6b7280;      /* gris 500 */
  --line: #e5e7eb;          /* gris 200 */
  --brand: #455A64;         /* de tu paleta */
  --accent: #BCDECD;        /* de tu paleta */
  --accent-weak: #eaf5f1;   /* derivado */
  --pill: #E3DC6D;          /* badge legal */
  --shadow: 0 8px 24px rgba(2,6,23,.06);
  --radius: 14px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--brand)}

/* ===== Layout ===== */
.container{width:min(1120px, calc(100% - 3rem)); margin-inline:auto}
section{padding:72px 0}
.section-title{font:800 clamp(1.2rem,1rem + 1.4vw,1.9rem)/1.15 system-ui; margin:0 0 10px}
.muted{color:var(--ink-weak)}
.subtle{color:var(--ink-weak)}
.mt-sm{margin-top:12px}

/* ===== Header ===== */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:.7rem; align-items:center; font-weight:800}
.brand small{display:block; font-weight:600; color:var(--ink-weak)}
.brand-logo{width:32px; height:32px}
nav a{padding:.6rem .8rem; border-radius:10px}
nav a:hover{background:var(--bg-weak)}

/* ===== Hero ===== */
.hero{padding:84px 0 44px}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:start}
.h1{font:900 clamp(1.9rem,1.2rem + 1.6vw,2.6rem)/1.1 system-ui; margin:0 0 12px; letter-spacing:-.2px}
.highlight{
  background:linear-gradient(0deg, var(--accent-weak), var(--accent-weak));
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:.06em .18em; border-radius:.25em;
}
.sub{max-width:60ch}

.status-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .65rem; border-radius:999px;
  background:var(--pill); color:#2b2b2b; font-weight:800; font-size:.92rem;
  box-shadow:var(--shadow);
}

.hero-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:16px}
.cta{
  display:inline-grid; place-items:center;
  padding:.78rem 1.05rem; border-radius:12px; font-weight:800;
  background:var(--brand); color:#fff; box-shadow:var(--shadow);
  transition:transform .06s ease, box-shadow .2s ease, background .2s;
}
.cta:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(2,6,23,.10)}
.cta--ghost{background:transparent; color:var(--brand); border:1.5px solid var(--brand); box-shadow:none}
.cta--ghost:hover{background:var(--bg-weak)}
.cta--accent{background:linear-gradient(135deg, var(--brand) 0%, #2e3c45 100%)}

.demo-tip{margin-top:8px; color:var(--ink-weak)}

/* ===== Cards ===== */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand);color:#fff}

/* ===== Cómo ===== */
.how-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}

/* ===== Pricing ===== */
.pricing{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.price-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.badge{position:absolute; top:14px; right:14px; padding:.32rem .6rem; border-radius:999px; font-size:.78rem; font-weight:900; background:var(--accent-weak); color:#0f172a}
.price{font:900 1.9rem/1.1 system-ui; letter-spacing:-.3px; margin:.2rem 0 .8rem}
.price small{font-weight:700; color:var(--ink-weak)}
.ul{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.ul li::before{content:"• "; color:var(--brand); font-weight:900}

/* ===== CTA / Callout ===== */
.callout{background:var(--bg-weak); border:1px dashed var(--line)}

/* ===== Footer ===== */
footer{padding:28px 0 40px; border-top:1px solid var(--line); background:var(--bg)}
.foot{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.foot-links{display:flex; gap:.8rem; flex-wrap:wrap}
.foot a{color:var(--ink-weak)} .foot a:hover{color:var(--brand)}

/* ===== KIOSKO · idéntico app ===== */
.hero-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:var(--shadow)}
.kiosk--app{padding:18px 16px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.kiosk__head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.kiosk__brand{display:flex;align-items:center;gap:10px;color:var(--ink-weak);font-weight:700}
.kiosk__brand img{width:36px;height:36px}
.kiosk__screen{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px}
.krow{display:flex;justify-content:space-between;align-items:center}
.klabel{color:var(--ink-weak);font-weight:600}
#pin{letter-spacing:.08em}

.kiosk__pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.kbtn{
  height:64px;border-radius:16px;border:1px solid var(--line);
  background:#e9eef2; /* tecla clara como en app */
  color:#0f172a;font-weight:900;font-size:1.05rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(15,23,42,.04);
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.kbtn:hover{box-shadow:0 0 0 3px rgba(69,90,100,.08) inset}
.kbtn:active{transform:translateY(1px)}

.kbtn--alt{background:#fff}
.kbtn--ok{
  background:#455A64;color:#fff;border-color:#3d4e57;
  box-shadow:0 2px 0 rgba(16,24,40,.08);
  letter-spacing:.6px;
}
.kbtn--ok:hover{filter:brightness(1.03)}
.kbtn--ok:active{transform:translateY(1px)}

.kiosk__help{margin-top:10px;color:var(--ink-weak);font-size:.95rem}

/* ===== Formularios ===== */
input, textarea{
  border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; padding:.7rem .85rem
}
label{display:grid; gap:.25rem; font-weight:700; color:var(--ink)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .span-2{grid-column:1 / -1}
.contact .cta{box-shadow:none}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .kbtn{height:58px}
}
@media (max-width: 980px){
  section{padding:56px 0}
  .features{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .features{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}

/* ===== Motion safe ===== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}