/*
Theme Name: Omniventa Web
Theme URI: https://omniventa.cl
Author: Sandro Jara Burgos - MejorWeb.cl
Author URI: https://mejorweb.cl
Description: Vitrina comercial de Omniventa — el sistema omnicanal chileno para tiendas (POS + Mercado Libre + Falabella) y corredoras de propiedades (web + fichas + redes sociales con IA). Tema propio del producto.
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omniventa-web
*/

/* Hallmark · theme: custom (vibe: "SaaS chileno serio, panel navy del producto, azul eléctrico")
 * paper oklch(98% 0.003 250) · accent oklch(56% 0.17 255) azul · ink oklch(25% 0.03 250) navy-pizarra
 * display: Space Grotesk (roman) · body: Inter · genre: modern-minimal · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Diversificación vs gyn-propiedades: acento FRÍO (azul vs naranjo), display grotesk (vs condensada DIN),
 * sin ondas — la identidad de Omniventa es la del panel: navy sobrio, bordes netos, azul de acción. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-paper: oklch(98% 0.003 250);
    --color-paper-2: oklch(100% 0 0);
    --color-ink: oklch(25% 0.03 250);
    --color-ink-2: oklch(48% 0.02 250);
    --color-line: oklch(91% 0.005 250);
    --color-accent: oklch(56% 0.17 255);
    --color-accent-deep: oklch(48% 0.16 255);
    --color-navy: oklch(28% 0.045 255);
    --color-navy-deep: oklch(21% 0.04 255);
    --color-ok: oklch(62% 0.15 150);
    --color-wa: oklch(65% 0.17 150);
    --color-focus: oklch(55% 0.15 245);

    --font-display: "Space Grotesk", "Inter", sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-14: 56px; --space-20: 80px;

    --radius-s: 6px; --radius-m: 10px; --radius-l: 16px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 180ms;
}

html, body { overflow-x: clip; }
body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); line-height: 1.6; font-size: 16px;
       min-height: 100vh; display: flex; flex-direction: column; } /* el pie siempre abajo, aun en páginas cortas */
.ov-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
a { color: var(--color-accent-deep); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ── Header: la barra navy del producto ── */
.ov-header { background: var(--color-navy-deep); position: sticky; top: 0; z-index: 50; }
.ov-header-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.ov-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; text-decoration: none; letter-spacing: 0.2px; }
.ov-logo span { color: oklch(70% 0.14 255); }
.ov-nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.ov-nav a { color: oklch(88% 0.01 250); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.ov-nav a:hover { color: #fff; border-bottom-color: var(--color-accent); }
.ov-header-cta { background: var(--color-accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.88rem; padding: var(--space-2) var(--space-5); border-radius: 999px; white-space: nowrap; transition: background var(--dur) var(--ease-out); }
.ov-header-cta:hover { background: var(--color-accent-deep); }

/* ── Hero: copy a la izquierda, el panel del producto a la derecha ── */
.ov-hero { background: var(--color-navy-deep); color: #fff; padding: var(--space-20) 0 var(--space-14); overflow: hidden; }
.ov-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-10); align-items: center; }
.ov-hero-art { position: relative; }
.ov-hero-art svg { width: 100%; height: auto; display: block; transform: perspective(1400px) rotateY(-8deg) rotateX(2deg); transform-origin: left center; }
.ov-hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-8); color: oklch(80% 0.01 250); font-size: 0.88rem; }
.ov-hero-proof li { padding-left: 20px; position: relative; }
.ov-hero-proof li::before { content: "✓"; position: absolute; left: 0; color: var(--color-ok); font-weight: 700; }
/* Carrusel del hero: las diapositivas se apilan en la misma celda y se funden */
.ov-slides { display: grid; }
.ov-slide { grid-area: 1 / 1; opacity: 0; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.ov-slide.is-on { opacity: 1; pointer-events: auto; }
.ov-dots { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.ov-dots button { background: transparent; border: 1px solid oklch(100% 0 0 / 0.3); color: oklch(85% 0.01 250); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.ov-dots button:hover { border-color: #fff; color: #fff; }
.ov-dots button.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
/* Selector de rubro en planes */
.ov-rubro { display: inline-flex; gap: 4px; background: var(--color-line); padding: 4px; border-radius: 999px; margin-top: var(--space-6); }
.ov-rubro button { background: transparent; border: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-ink-2); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.ov-rubro button.is-on { background: var(--color-paper-2); color: var(--color-navy); box-shadow: 0 1px 3px oklch(30% 0.04 255 / 0.15); }
.ov-plan-prueba { border: 1px dashed var(--color-accent); background: oklch(97% 0.015 255); }
.ov-btn-ghost-dark { background: transparent; color: var(--color-accent-deep); border: 1px solid var(--color-accent); }
.ov-btn-ghost-dark:hover { background: var(--color-accent); color: #fff; }
.ov-logo { display: inline-flex; align-items: center; gap: 10px; }
.ov-logo-mark { width: 30px; height: 30px; border-radius: 7px; }
.ov-hero-kicker { color: oklch(70% 0.14 255); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.ov-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; max-width: 20ch; overflow-wrap: anywhere; text-wrap: pretty; }
.ov-hero p { color: oklch(85% 0.01 250); font-size: 1.05rem; max-width: 52ch; margin-top: var(--space-5); }
.ov-hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.ov-btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: var(--space-3) var(--space-6); border-radius: 999px; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ov-btn:active { transform: translateY(1px); }
.ov-btn-primary { background: var(--color-accent); color: #fff; }
.ov-btn-primary:hover { background: var(--color-accent-deep); }
.ov-btn-ghost { background: transparent; color: #fff; border: 1px solid oklch(100% 0 0 / 0.35); }
.ov-btn-ghost:hover { border-color: #fff; }
.ov-btn-wa { background: var(--color-wa); color: #fff; }
.ov-btn-wa:hover { filter: brightness(1.08); }

/* ── Secciones ── */
.ov-section { padding: var(--space-20) 0; }
.ov-section-alt { background: var(--color-paper-2); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ov-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--color-navy); line-height: 1.2; max-width: 30ch; }
.ov-h2::after { content: ""; display: block; width: 52px; height: 4px; background: var(--color-accent); margin-top: var(--space-3); border-radius: 2px; }
.ov-lead { color: var(--color-ink-2); max-width: 60ch; margin-top: var(--space-4); }

/* Verticales (2 tarjetas) */
.ov-verticales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.ov-vert { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-l); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ov-vert:hover { transform: translateY(-3px); box-shadow: 0 14px 34px oklch(30% 0.04 255 / 0.12); }
.ov-vert-emoji { font-size: 2rem; }
.ov-vert h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-navy); }
.ov-vert p { color: var(--color-ink-2); font-size: 0.95rem; }
.ov-vert ul { list-style: none; margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.ov-vert li { padding-left: 26px; position: relative; font-size: 0.93rem; }
.ov-vert li::before { content: "✓"; position: absolute; left: 0; color: var(--color-ok); font-weight: 700; }

/* ── Planes ── */
.ov-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-10); align-items: stretch; }
.ov-plan { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-l); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.ov-plan-destacado { border: 2px solid var(--color-accent); position: relative; }
.ov-plan-badge { position: absolute; top: -13px; left: var(--space-6); background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; }
.ov-plan h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-navy); }
.ov-plan-precio { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.2vw, 2.1rem); color: var(--color-ink); }
.ov-plan-precio small { font-size: 0.95rem; font-weight: 500; color: var(--color-ink-2); }
.ov-plan-nota { color: var(--color-ink-2); font-size: 0.85rem; }
.ov-plan ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.ov-plan [hidden] { display: none !important; } /* el selector de rubro esconde la lista del otro rubro */
.ov-plan-precio small { white-space: nowrap; }
.ov-plan li { padding-left: 26px; position: relative; font-size: 0.92rem; }
.ov-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--color-ok); font-weight: 700; }
.ov-plan .ov-btn { margin-top: auto; text-align: center; }

/* ── CTA final ── */
.ov-cta-final { background: var(--color-navy-deep); color: #fff; border-radius: var(--radius-l); padding: var(--space-10); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.ov-cta-final h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem); max-width: 26ch; }

/* ── Páginas internas ── */
.ov-main { padding: var(--space-14) 0 var(--space-20); width: 100%; }
.ov-titulo { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-navy); margin-bottom: var(--space-6); }
.ov-prose { max-width: 68ch; }
.ov-prose > * + * { margin-top: var(--space-4); }
.ov-prose h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-navy); margin-top: var(--space-8); }

/* ── Footer ── */
.ov-footer { background: var(--color-navy-deep); color: #fff; padding: var(--space-8) 0; margin-top: auto; }
.ov-footer-in { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }
.ov-footer strong { font-family: var(--font-display); }
.ov-footer-datos { font-size: 0.85rem; opacity: 0.75; }
.ov-footer-credito { margin-left: auto; font-size: 0.8rem; opacity: 0.55; }

@media (max-width: 900px) {
    .ov-hero-grid { grid-template-columns: 1fr; }
    .ov-hero-art { max-width: 560px; margin-top: var(--space-4); }
    .ov-hero-art svg { transform: none; }
}
@media (max-width: 720px) {
    .ov-nav { display: none; }
    .ov-hero { padding: var(--space-14) 0 var(--space-10); }
    .ov-section { padding: var(--space-14) 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; } }