/* ============================================================
   Conectar.net — brand.css
   Sistema de diseño extraído de los mockups aprobados en
   Claude Design (Landing, Backoffice, Galería de Íconos).
   ============================================================ */

:root {
    /* Paleta de marca (colores reales de los mockups) */
    --coral: #FF6B5E;
    --coral-hover: #ff8a80;
    --turquesa: #2FC3C8;
    --verde: #1FA37E;        /* badge "Negocio verificado" */
    --dorado: #F2C14E;       /* destacado */
    --petroleo: #14232B;     /* header/hero, fondo oscuro */
    --petroleo-alt: #0E3B4A; /* variante oscura secundaria */
    --crema: #FBFAF7;        /* fondo general */
    --crema-alt: #F4F3EF;
    --borde: #E5E1D6;
    --borde-alt: #EEECE5;
    --gris-texto: #5F6E75;
    --gris-claro: #A8BEC7;
    --grafito: #14232B;

    /* Tipografía */
    --font-base: 'Ubuntu', sans-serif;
    --font-mono: 'Ubuntu Mono', monospace;   /* para stats/datos numéricos */
    --font-icons: 'Material Symbols Rounded';

    /* Radios (de los mockups: 16px tarjetas, 22px pills/botones) */
    --radius-card: 16px;
    --radius-pill: 22px;
    --radius-chico: 8px;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-base);
    background: var(--crema);
    color: var(--grafito);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.material-symbols-rounded {
    font-family: var(--font-icons);
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
}

/* ── Botones ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-hover); }
.btn-turquesa { background: var(--turquesa); color: #fff; }
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--borde);
    color: var(--grafito);
}
.btn-outline:hover { border-color: var(--turquesa); color: var(--turquesa); }

/* ── Chips de categoría ── */
.chip {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--borde);
    color: var(--grafito);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
}
.chip:hover { border-color: var(--turquesa); color: var(--turquesa); }
.chip.activo { background: var(--turquesa); border-color: var(--turquesa); color: #fff; }

/* ── Badges de estado ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}
.badge-verificado { background: rgba(31,163,126,0.12); color: var(--verde); }
.badge-sin-reclamar { background: rgba(242,193,78,0.15); color: #B8860B; }

/* ── Tarjetas (fichas) ── */
.tarjeta {
    background: #fff;
    border: 1px solid var(--borde-alt);
    border-radius: var(--radius-card);
    padding: 20px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20,35,43,0.08);
}