/* Capistream · Portal (capibarastream.com) — sistema de diseño propio. Identidad cálida y terrosa (verde bosque + terracota sobre papel crema), deliberadamente distinta del look "teal SaaS genérico" y del panel interno. */ /* ============================== TOKENS ============================== */ :root{ --paper: #f6f1e7; --paper-deep: #efe7d6; --paper-rgb: 246,241,231; --surface: #fffdf8; --surface-2: #fbf6ea; --ink: #211d16; --ink-soft: #4d473a; --muted: #82796a; --muted-2: #a89d89; --ink-rgb: 33,29,22; /* Negro suave fijo (no se invierte con el tema, a diferencia de --ink) — para texto que debe leerse oscuro siempre, sin importar claro/oscuro. */ --soft-black: #211d16; --line: rgba(var(--ink-rgb),.10); --line-2: rgba(var(--ink-rgb),.06); --line-strong:rgba(var(--ink-rgb),.16); /* Color de acento — elegible por el cliente en Perfil > Apariencia. Bosque es el valor por defecto. --forest-* quedan como alias para no tener que tocar las referencias ya existentes en las plantillas. */ --accent: #2f4a37; --accent-deep: #1f3226; --accent-rgb: 47,74,55; --accent-soft: rgba(var(--accent-rgb),.09); --accent-soft-2: rgba(var(--accent-rgb),.16); /* Texto/íconos sobre un fondo sólido --accent (burbujas, botones primarios). En claro --accent es oscuro y --paper es clara → texto claro, bien. En oscuro --accent se aclara a propósito (para leerse como detalle sobre fondo negro) pero --paper se oscurece → este mismo alias da texto oscuro ahí, así nunca queda texto claro sobre un acento pastel claro. */ --accent-ink: var(--paper); --forest: var(--accent); --forest-deep: var(--accent-deep); --forest-soft: var(--accent-soft); --forest-soft-2: var(--accent-soft-2); --terracotta: #c1602f; --terracotta-deep: #9c4a22; --terracotta-soft: rgba(193,96,47,.12); --gold: #b8862f; --gold-soft: rgba(184,134,47,.14); --ok: #2f7d4f; --ok-soft: rgba(47,125,79,.12); --warn: #a8721f; --warn-soft: rgba(168,114,31,.13); --err: #b3402f; --err-soft: rgba(179,64,47,.11); --info: #3a5fa8; --info-soft: rgba(59,130,246,.12); --whatsapp: #25d366; --whatsapp-ink: #0a3d1f; --shadow-sm: 0 2px 10px rgba(33,24,10,.05); --shadow-md: 0 14px 34px rgba(33,24,10,.08); --shadow-lg: 0 30px 70px rgba(33,24,10,.14); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --max: 1180px; --ease: cubic-bezier(.22,.85,.35,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .22s; --dur-slow: .5s; /* Una sola tipografía para todo el portal (estilo WhatsApp Web: sans-serif limpia, seria, sin serif decorativa). --font-display se mantiene como alias por compatibilidad con estilos existentes, pero apunta a la misma fuente que --font-body. */ --font-body: 'DM Sans', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ============================== TEMA OSCURO ============================== */ /* Se activa con data-theme="dark" en (ver base.html). Negro "bonito" neutro (estilo WhatsApp), no marrón. Los tonos pasteles de --accent se reafinan para que se vean bien sobre fondo oscuro. */ :root[data-theme="dark"]{ --paper: #0c0c0d; --paper-deep: #060607; --paper-rgb: 12,12,13; --surface: #17171a; --surface-2: #1e1e22; --ink: #f0efed; --ink-soft: #cac8c4; --muted: #8f8d89; --muted-2: #737270; --ink-rgb: 240,239,237; --accent: #6fae86; --accent-deep: #4f8a68; --accent-rgb: 111,174,134; --terracotta-soft: rgba(193,96,47,.18); --gold-soft: rgba(184,134,47,.20); --ok-soft: rgba(47,125,79,.22); --warn-soft: rgba(168,114,31,.22); --err-soft: rgba(179,64,47,.22); --info: #7ea6e6; --info-soft: rgba(59,130,246,.20); --shadow-sm: 0 2px 10px rgba(0,0,0,.30); --shadow-md: 0 14px 34px rgba(0,0,0,.40); --shadow-lg: 0 30px 70px rgba(0,0,0,.55); } /* ============================== ACENTOS (pasteles y suaves) ============================== */ /* Bosque = el default definido arriba. El resto se activa con data-accent="..." en , combinado o no con el tema oscuro. */ [data-accent="terracota"]{ --accent:#c1602f; --accent-deep:#9c4a22; --accent-rgb:193,96,47; } [data-accent="lavanda"]{ --accent:#6b5b95; --accent-deep:#52436f; --accent-rgb:107,91,149; } [data-accent="cielo"]{ --accent:#43708a; --accent-deep:#33566b; --accent-rgb:67,112,138; } [data-accent="rosa"]{ --accent:#b5657a; --accent-deep:#8f4a5c; --accent-rgb:181,101,122; } [data-accent="miel"]{ --accent:#a87d2c; --accent-deep:#7e5c1c; --accent-rgb:168,125,44; } [data-accent="amarillo"]{ --accent:#b89b2e; --accent-deep:#8f7620; --accent-rgb:184,155,46; } [data-accent="turquesa"]{ --accent:#3a9188; --accent-deep:#2c6e67; --accent-rgb:58,145,136; } [data-theme="dark"][data-accent="terracota"]{ --accent:#e2916a; --accent-deep:#b5623a; --accent-rgb:226,145,106; } [data-theme="dark"][data-accent="lavanda"]{ --accent:#b3a4d6; --accent-deep:#8a78b8; --accent-rgb:179,164,214; } [data-theme="dark"][data-accent="cielo"]{ --accent:#8ec2dc; --accent-deep:#5a9cb8; --accent-rgb:142,194,220; } [data-theme="dark"][data-accent="rosa"]{ --accent:#e3a3b3; --accent-deep:#c07588; --accent-rgb:227,163,179; } [data-theme="dark"][data-accent="miel"]{ --accent:#dcb46a; --accent-deep:#b8913f; --accent-rgb:220,180,106; } [data-theme="dark"][data-accent="amarillo"]{ --accent:#e8cf6a; --accent-deep:#c2a83f; --accent-rgb:232,207,106; } [data-theme="dark"][data-accent="turquesa"]{ --accent:#7ecbc2; --accent-deep:#4a9e94; --accent-rgb:126,203,194; } /* ============================== RESET / BASE ============================== */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family: var(--font-body); font-weight:300; line-height:1.7; color: var(--ink); background: radial-gradient(1000px 460px at 8% -8%, rgba(var(--accent-rgb),.06), transparent 60%), radial-gradient(900px 420px at 108% 4%, rgba(193,96,47,.05), transparent 55%), var(--paper); -webkit-font-smoothing: antialiased; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } img{ max-width:100%; display:block; } ::selection{ background: var(--forest-soft-2); } h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:700; letter-spacing:-.01em; color:var(--ink); } p{ margin:0; } .muted{ color:var(--muted); } .mono{ font-family:var(--font-mono); } .container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.001s!important; scroll-behavior:auto!important; } } /* ============================== TOPBAR ============================== */ .p-topbar{ position:sticky; top:0; z-index:40; background: rgba(246,241,231,.82); backdrop-filter: blur(14px) saturate(140%); border-bottom:1px solid var(--line-2); } .p-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; flex-wrap:wrap; } .p-brand{ display:flex; align-items:center; gap:11px; } .p-brand-mark{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; background: linear-gradient(150deg, var(--forest), var(--forest-deep)); color:#f3ead9; font-family:var(--font-display); font-weight:700; font-size:17px; box-shadow: 0 6px 16px rgba(var(--accent-rgb),.30); } .p-brand-text{ display:flex; flex-direction:column; line-height:1.1; } .p-brand-text b{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.01em; } .p-brand-text span{ font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em; } .p-nav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .p-nav a{ font-weight:600; font-size:14.5px; color:var(--ink-soft); position:relative; padding:4px 0; } .p-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--terracotta); transition:right var(--dur) var(--ease); } .p-nav a:hover::after{ right:0; } .p-nav a:hover{ color:var(--ink); } .p-navright{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ============================== BUTTONS ============================== */ .p-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius: var(--r-sm); border:1px solid var(--line-strong); background: var(--surface); color:var(--ink); font-weight:700; font-size:14px; cursor:pointer; transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur), box-shadow var(--dur); white-space:nowrap; } .p-btn:hover{ transform: translateY(-1.5px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); } .p-btn:active{ transform: translateY(0); } .p-btn.p-btn-primary{ background: var(--forest); border-color: var(--forest); color:var(--accent-ink); } .p-btn.p-btn-primary:hover{ background: var(--forest-deep); box-shadow: 0 10px 24px rgba(var(--accent-rgb),.28); } .p-btn.p-btn-terracotta{ background: var(--terracotta); border-color: var(--terracotta); color:#fff6ee; } .p-btn.p-btn-terracotta:hover{ background: var(--terracotta-deep); box-shadow: 0 10px 24px rgba(193,96,47,.3); } .p-btn.p-btn-whatsapp{ background: var(--whatsapp); border-color: var(--whatsapp); color:var(--whatsapp-ink); } .p-btn.p-btn-whatsapp:hover{ background:#1fbd5a; } .p-btn.p-btn-ghost{ background:transparent; border-color:transparent; } .p-btn.p-btn-ghost:hover{ background: rgba(var(--ink-rgb),.04); } .p-btn.p-btn-full{ width:100%; } .p-btn.p-btn-sm{ min-height:38px; padding:0 15px; font-size:13px; } .p-btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; } /* ============================== PILLS / BADGES ============================== */ .p-pill{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--forest-soft-2); background: var(--forest-soft); color:var(--forest-deep); font-weight:700; font-size:13px; } .p-pill .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; } .p-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-weight:700; font-size:12.5px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); } .p-chip .mini{ width:7px; height:7px; border-radius:50%; background:currentColor; } .p-chip.ok{ color:var(--ok); background:var(--ok-soft); border-color:rgba(47,125,79,.22); } .p-chip.warn{ color:var(--warn); background:var(--warn-soft); border-color:rgba(168,114,31,.22); } .p-chip.danger{ color:var(--err); background:var(--err-soft); border-color:rgba(179,64,47,.2); } /* ============================== CARD ============================== */ .p-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } /* ============================== SECTION HEAD ============================== */ .p-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background: var(--terracotta-soft); border:1px solid rgba(193,96,47,.22); color: var(--terracotta-deep); font-size:12.5px; font-weight:700; letter-spacing:.02em; } .p-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .p-section-head h2{ font-size:clamp(26px,3.6vw,38px); line-height:1.05; } .p-section-head p{ margin:10px 0 0; color:var(--muted); max-width:62ch; line-height:1.6; font-size:15px; } /* ============================== FLASH MESSAGES ============================== */ .p-flash-stack{ display:grid; gap:10px; margin-bottom:18px; } .p-flash{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); padding:13px 16px; box-shadow: var(--shadow-sm); font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; } .p-flash.success{ border-color:rgba(47,125,79,.25); background:var(--ok-soft); } .p-flash.warning{ border-color:rgba(168,114,31,.25); background:var(--warn-soft); } .p-flash.error{ border-color:rgba(179,64,47,.25); background:var(--err-soft); } .p-flash.info{ border-color:var(--line-strong); } /* ============================== FORMS ============================== */ .p-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; } .p-field label{ font-size:13px; font-weight:700; color:var(--ink-soft); } .p-field .help{ font-size:12px; color:var(--muted); } .p-input, input:not([type=checkbox]):not([type=radio]).p-in, select.p-in, textarea.p-in{ width:100%; min-height:46px; padding:0 14px; border-radius: var(--r-sm); border:1px solid var(--line-strong); background: var(--surface); color:var(--ink); font-family:inherit; font-size:14.5px; transition: border-color var(--dur), box-shadow var(--dur); } textarea.p-in{ min-height:110px; padding:12px 14px; resize:vertical; } .p-input:focus, input.p-in:focus, select.p-in:focus, textarea.p-in:focus{ outline:none; border-color: var(--forest); box-shadow: 0 0 0 4px var(--forest-soft); } /* ============================== ANIMATIONS ============================== */ @keyframes p-fade-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } [data-reveal]{ opacity:0; transform:translateY(12px); } [data-reveal].in{ animation: p-fade-up var(--dur-slow) var(--ease-out) forwards; } .p-stagger > *{ opacity:0; } .p-stagger.in > *{ animation: p-fade-up .6s var(--ease-out) forwards; } .p-stagger.in > *:nth-child(1){ animation-delay:.02s; } .p-stagger.in > *:nth-child(2){ animation-delay:.08s; } .p-stagger.in > *:nth-child(3){ animation-delay:.14s; } .p-stagger.in > *:nth-child(4){ animation-delay:.2s; } .p-stagger.in > *:nth-child(5){ animation-delay:.26s; } .p-stagger.in > *:nth-child(n+6){ animation-delay:.3s; } .p-copy-btn.copied{ color: var(--ok) !important; border-color: rgba(47,125,79,.4) !important; } /* ============================== FOOTER ============================== */ .p-footer{ padding:40px 0 46px; color:var(--muted); font-size:13.5px; border-top:1px solid var(--line-2); margin-top:40px; } .p-footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; } /* ============================== UTIL ============================== */ .flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } @media (max-width:760px){ .container{ width:min(var(--max), calc(100% - 24px)); } .p-nav{ width:100%; justify-content:flex-start; gap:16px; } .p-navright{ width:100%; justify-content:flex-start; } }