/* ==========================================================================
   enterprise.css — hoja compartida del carril enterprise de la web pública.
   Misma paleta y primitivas que contacto.ejs + utilidades enterprise.
   ========================================================================== */

:root {
  --color-red:#E82B22;--color-wine:#88132D;--color-ink:#191A19;--color-paper:#F8F5F1;
  --text-2:#555;--text-3:#888;
  --success:#10b981;--success-soft:rgba(16,185,129,.08);--error:#ef4444;--error-soft:rgba(239,68,68,.08);
  --border:#e8e4dd;--border-soft:rgba(25,26,25,.06);
  --fw-medium:500;--fw-semi:600;--fw-bold:700;
  --r-sm:8px;--r-md:12px;--r-xl:24px;--r-full:999px;
  --max-w:1200px;--nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse at 80% 10%,rgba(232,43,34,.07),transparent 42%),var(--color-paper);color:var(--color-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:inherit;border:none;background:none}ul{list-style:none}svg{display:block;max-width:100%}
img{max-width:100%;height:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:focus-visible{outline:3px solid var(--color-red);outline-offset:2px;border-radius:4px}
.skip{position:absolute;top:-100%;left:16px;padding:10px 20px;background:var(--color-red);color:#fff;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:var(--fw-semi);font-size:13px;z-index:200;transition:top .2s}.skip:focus{top:0}


/* ── Layout enterprise ────────────────────────────────────────────────── */
.section{padding:64px 0}
.section-in{max-width:var(--max-w);margin:0 auto;padding:0 48px}
.section-alt{background:rgba(255,255,255,.5)}
.hero{padding:80px 0 56px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:1.5px;text-transform:uppercase;color:var(--color-red);margin-bottom:20px}
.eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--color-red)}
.h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1.06;letter-spacing:-1px;margin-bottom:22px;max-width:20ch}
.h1 .hl{color:var(--color-red);font-style:italic}
.lead{font-size:18px;color:var(--text-2);line-height:1.7;max-width:60ch;margin-bottom:32px}
.h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.4px;line-height:1.15;margin-bottom:20px}
.h3{font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.2px;margin-bottom:8px}
.p{font-size:16px;color:var(--text-2);line-height:1.75;max-width:70ch;margin-bottom:16px}
.muted{color:var(--text-3)}
.section h2:not(:first-child){margin-top:8px}

/* ── Grids y cards ────────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card-lite{background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 26px;box-shadow:0 12px 40px rgba(48,31,22,.06)}
.card-lite h3{margin-bottom:8px}
.card-lite p{font-size:15px;color:var(--text-2);line-height:1.65;margin:0}
.card-lite a.card-link{color:var(--color-red);font-weight:var(--fw-semi);font-size:14px;display:inline-block;margin-top:12px}
.card-thumb{height:120px;border-radius:var(--r-md);margin-bottom:18px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-size:40px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--color-red),var(--color-wine))}

/* ── Listas ───────────────────────────────────────────────────────────── */
.ck-list li{display:flex;gap:14px;padding:10px 0;font-size:15.5px;color:var(--text-2);align-items:flex-start}
.ck-list .ck{flex:0 0 24px;height:24px;border-radius:50%;background:rgba(232,43,34,.1);color:var(--color-red);display:flex;align-items:center;justify-content:center;margin-top:2px}
.ck-list .ck svg{width:13px;height:13px;stroke:var(--color-red);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ck-list strong{color:var(--color-ink)}

/* ── Badge (Disponible / En roadmap) ──────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--fw-semi);padding:3px 10px;border-radius:var(--r-full);letter-spacing:.2px}
.badge-ok{background:var(--success-soft);color:#0f766e;border:1px solid rgba(16,185,129,.25)}
.badge-road{background:rgba(136,19,45,.06);color:var(--color-wine);border:1px solid rgba(136,19,45,.2)}

/* ── CTA row ──────────────────────────────────────────────────────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;font-size:15px;font-weight:var(--fw-semi);border-radius:var(--r-full);transition:all .25s}
.btn-primary{background:var(--color-red);color:#fff}
.btn-primary:hover{background:var(--color-wine);transform:translateY(-2px);box-shadow:0 8px 24px rgba(136,19,45,.25)}
.btn-ghost{background:#fff;color:var(--color-ink);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--color-red);color:var(--color-red)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-item h3{font-size:17px;font-weight:var(--fw-bold);margin-bottom:8px}
.faq-item p{font-size:15px;color:var(--text-2);line-height:1.7;margin:0}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.timeline{position:relative;margin-top:8px;padding-left:28px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.timeline-item{position:relative;padding:0 0 22px 4px}
.timeline-item::before{content:'';position:absolute;left:-28px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--color-red);box-shadow:0 0 0 4px rgba(232,43,34,.12)}
.timeline-item h3{font-size:16px;margin-bottom:4px}
.timeline-item p{font-size:14.5px;color:var(--text-2);margin:0}

/* ── Tabla de integraciones ───────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);font-weight:var(--fw-bold)}
.tbl td{color:var(--text-2)}

/* ── Diagrama de flujo (SVG propio) ───────────────────────────────────── */
.flow{margin:8px 0;color:var(--color-ink)}
.flow svg{width:100%;height:auto}

/* ── Form (reutilizado de contacto.ejs) ───────────────────────────────── */
.card{background:rgba(255,255,255,.96);border-radius:var(--r-xl);padding:40px 36px;box-shadow:0 24px 70px rgba(48,31,22,.1)}
.card > h2{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.card-sub{font-size:14px;color:var(--text-3);margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:var(--fw-semi);color:var(--color-ink);margin-bottom:7px}
.field label .req{color:var(--color-red)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--color-ink);background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-red)}
.field textarea{resize:vertical;min-height:96px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
/* Casillas con área táctil >= 44px. Se usa `.field .check` para ganar a `.field label`
   y `.field input` (que las dejaban en display:block y con el tamaño nativo de ~13px). */
.field .check{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:8px 12px;font-size:14px;color:var(--text-2);font-weight:var(--fw-medium);background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color .2s}
.field .check:has(input:checked){border-color:var(--color-red)}
.field .check input,.field .consent input{flex:0 0 22px;width:22px;height:22px;margin:0;padding:0;accent-color:var(--color-red);cursor:pointer}
.field .consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0;padding:4px 0;font-size:13.5px;font-weight:400;color:var(--text-2);line-height:1.5;cursor:pointer}
.field .consent a{color:var(--color-red);font-weight:var(--fw-semi)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.btn-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;background:var(--color-red);color:#fff;font-size:16px;font-weight:var(--fw-semi);border-radius:var(--r-full);transition:all .3s;margin-top:8px}
.btn-submit:hover{background:var(--color-wine);transform:translateY(-2px);box-shadow:0 8px 24px rgba(136,19,45,.25)}
.btn-submit:disabled{opacity:.6;cursor:wait;transform:none}
.form-note{font-size:12px;color:var(--text-3);text-align:center;margin-top:14px}
.form-note a{color:var(--color-red);font-weight:var(--fw-semi)}
.alert{display:none;padding:14px 16px;border-radius:var(--r-md);font-size:14px;margin-bottom:20px;line-height:1.5}
.alert.show{display:block}
.alert-error{background:var(--error-soft);color:#b91c1c;border:1px solid rgba(239,68,68,.2)}
.done{display:none;text-align:center;padding:36px 12px}
.done.show{display:block}
.done-icon{width:72px;height:72px;margin:0 auto 24px;border-radius:50%;background:var(--success-soft);display:flex;align-items:center;justify-content:center}
.done-icon svg{width:34px;height:34px;stroke:var(--success);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.crumbs{font-size:13px;color:var(--text-3);margin-bottom:16px}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{color:var(--color-red)}
.crumbs span{margin:0 6px}

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,rgba(232,43,34,.06),rgba(136,19,45,.06));border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 36px;text-align:center}
.cta-band h2{margin-bottom:12px}
.cta-band .cta-row{justify-content:center}


/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:960px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .section-in{padding:0 20px}
  .grid-2,.grid-3,.grid-4,.checks{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .card{padding:28px 20px}
}