/* PACK 004F · Regularización tipográfica global
   Objetivo: que los títulos, subtítulos, navegación, tarjetas y textos tengan una jerarquía coherente
   en toda la web pública y backoffice, usando TildaSans como fuente principal. */

:root {
    --font-display: "TildaSans", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: "TildaSans", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heading: 700;
    --fw-heavy: 800;

    --tracking-tight: -0.035em;
    --tracking-soft: -0.018em;
}

html,
body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

p,
li,
td,
th,
label,
input,
select,
textarea {
    font-weight: var(--fw-regular);
}

strong,
b {
    font-weight: var(--fw-bold);
}

/* Marca y navegación */
.brand,
.brand-text strong,
.public-nav a,
.backoffice-nav a,
.link-button,
.button,
.nav-cta {
    font-family: var(--font-body);
}

.brand-text strong {
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-soft);
}

.brand-text small {
    font-weight: var(--fw-medium);
    letter-spacing: 0;
}

.public-nav a,
.backoffice-nav a {
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
}

.button,
.nav-cta,
.link-button {
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

/* Eyebrows y pequeñas etiquetas */
.eyebrow,
.cover-kicker,
.badge {
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Portada */
.tilda-cover h1,
.hero-section h1,
.page-hero h1,
.cats-original-heading h1,
.faq-original-heading h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    letter-spacing: -0.045em;
}

.tilda-cover p,
.hero-text,
.page-hero p,
.cats-original-heading p,
.faq-original-heading p {
    font-weight: var(--fw-regular);
    letter-spacing: 0;
}

/* Títulos de secciones */
.section-heading h2,
.showcase-copy h2,
.info-card h2,
.feature-card h3,
.story-card h3,
.masonry-card h3,
.price-card h2,
.faq-list h3,
.bo-heading h1 {
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-tight);
}

/* Tarjetas de gatos */
.cat-original-card h2,
.visual-cat-card h3,
.cat-profile-card h2,
.cat-card h2,
.cat-card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    letter-spacing: -0.025em;
}

.cat-original-card p,
.visual-cat-card p,
.cat-profile-card p,
.cat-card p {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    letter-spacing: 0;
}

/* FAQ separada */
.faq-original-copy h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-heading);
    letter-spacing: -0.018em;
}

.faq-original-copy p {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    letter-spacing: 0;
}

/* Reglas */
.clean-list li {
    font-weight: var(--fw-regular);
}

.no-card h2,
.yes-card h2,
.rules-grid h2 {
    font-weight: var(--fw-heading);
}

/* Backoffice */
.backoffice-main h1,
.backoffice-main h2,
.backoffice-main h3,
.bo-panel h2,
.bo-panel h3,
.list-row strong,
.media-card strong {
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-soft);
}

.backoffice-main p,
.backoffice-main span,
.list-row span,
.media-card span {
    font-weight: var(--fw-regular);
}

/* Tamaños y pesos coherentes por contexto */
.cats-original-heading h1,
.faq-original-heading h1 {
    font-size: clamp(38px, 4.4vw, 52px);
    line-height: 1.08;
}

.cats-original-card h2 {
    font-size: clamp(22px, 2vw, 25px);
    line-height: 1.15;
}

.cats-original-card p {
    font-size: 14px;
    line-height: 1.58;
}

.faq-original-copy h2 {
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.25;
}

.faq-original-copy p {
    font-size: clamp(16px, 1.42vw, 18px);
    line-height: 1.65;
}

@media (max-width: 640px) {
    .tilda-cover h1,
    .hero-section h1,
    .page-hero h1,
    .cats-original-heading h1,
    .faq-original-heading h1 {
        letter-spacing: -0.035em;
    }

    .public-nav a,
    .backoffice-nav a {
        font-weight: var(--fw-semibold);
    }
}