/* ===============================================================
   Theme default DattaGraf Tienda — editorial print-house
   Aesthetic: papel crema + tinta profunda, Fraunces (serif variable)
   para títulos, Geist Sans cuerpo, IBM Plex Mono labels técnicos.
   Layouts asimétricos, marcas de registro, números editoriales,
   whitespace generoso. Reescribí libre.
   --c-primario / --c-secundario los inyecta layout.liquid desde
   Configuración → Apariencia.
   =============================================================== */

:root {
    /* Marca (default ink-blue press; el tenant lo pisa). */
    --c-primario: #14110d;
    --c-primario-soft: #2a251d;
    --c-primario-fg: #f6f3ec;
    --c-secundario: #1854f7;

    /* Paper & ink. */
    --c-paper: #f6f3ec;
    --c-paper-2: #efeae0;
    --c-paper-3: #e6dfd1;
    --c-ink: #14110d;
    --c-ink-2: #2a251d;
    --c-ink-3: #4a4339;
    --c-ink-mute: #7a7163;
    --c-ink-faint: #a89e8c;
    --c-rule: #14110d;
    --c-line: #d8d1bf;

    /* Tipografía. */
    --font-base: 'Geist', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Radios — editorial usa esquinas casi rectas. */
    --r-xs: 2px;
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-pill: 999px;

    /* Sombras: sutiles, casi invisibles. */
    --sh-sm: 0 1px 2px rgba(20,17,13,0.06);
    --sh-md: 0 8px 28px -10px rgba(20,17,13,0.18);
    --sh-lg: 0 24px 48px -16px rgba(20,17,13,0.22);

    /* Transiciones. */
    --t-fast: 0.14s ease;
    --t-base: 0.2s ease;
    --t-slow: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset suave ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-feature-settings: 'ss01', 'cv11';
}
body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-ink);
    background: var(--c-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--c-ink);
    margin: 0 0 0.4em;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: -0.04em;
    font-weight: 400;
    line-height: 0.98;
}
h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--c-rule); margin: 2.5rem 0; }

/* Selección con tinta marca */
::selection { background: var(--c-ink); color: var(--c-paper); }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: 1340px;
    padding: 0 1.5rem;
    margin: 0 auto;
}
.container--angosto { max-width: 760px; }
.container--ancho { max-width: 1500px; }

@media (min-width: 1024px) {
    .container { padding: 0 2.5rem; }
}

.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; padding: 0 0 6rem; }

/* ---------- Header — fino, editorial ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--c-paper) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--c-rule);
}
.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.5rem;
    padding: 1.125rem 1.5rem;
    min-height: 72px;
}
.site-header__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.375rem;
    color: var(--c-ink);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
}
.site-header__logo:hover { color: var(--c-ink); }
.site-header__logo img { max-height: 38px; width: auto; }
.site-header__logo::before {
    content: '◗';
    color: var(--c-ink);
    font-size: 0.6em;
    margin-right: 0.05em;
    transform: translateY(-0.18em);
    display: inline-block;
}
.site-nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
}
.site-nav a {
    color: var(--c-ink-2);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    padding: 0.25rem 0;
    position: relative;
}
.site-nav a:hover { color: var(--c-ink); }
.site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--c-ink);
    transition: right var(--t-base);
}
.site-nav a:hover::after { right: 0; }

.site-header__acciones {
    display: flex;
    gap: 0.875rem;
    align-items: center;
}
.site-header__icono-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--c-ink-2);
    transition: color var(--t-fast);
}
.site-header__icono-link:hover { color: var(--c-ink); }
.site-header__icono-link svg { width: 18px; height: 18px; }

/* Inline search en header — minimal editorial */
.site-header__buscar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--c-line);
    padding: 0.25rem 0;
    width: 11rem;
    transition: width var(--t-base), border-color var(--t-fast);
}
.site-header__buscar:focus-within {
    border-color: var(--c-ink);
    width: 16rem;
}
.site-header__buscar__btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--c-ink-2);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--t-fast);
}
.site-header__buscar:focus-within .site-header__buscar__btn { color: var(--c-ink); }
.site-header__buscar__btn svg { width: 16px; height: 16px; }
.site-header__buscar input {
    border: 0;
    background: transparent;
    outline: none;
    width: 100%;
    font: inherit;
    font-family: var(--font-base);
    font-size: 0.875rem;
    color: var(--c-ink);
    letter-spacing: -0.005em;
    padding: 0;
}
.site-header__buscar input::placeholder { color: var(--c-ink-mute); }
@media (max-width: 880px) {
    .site-header__buscar { width: 36px; border-bottom: 0; }
    .site-header__buscar:focus-within { width: 100%; border-bottom: 1px solid var(--c-ink); }
    .site-header__buscar input { width: 0; transition: width var(--t-base); }
    .site-header__buscar:focus-within input { width: 100%; }
}

@media (max-width: 880px) {
    .site-header__inner { grid-template-columns: auto auto; gap: 1rem; padding: 1rem; }
    .site-nav { display: none; }
}

/* ---------- Footer — column-rule editorial ---------- */
.site-footer {
    background: var(--c-paper-2);
    border-top: 1px solid var(--c-rule);
    margin-top: 6rem;
    color: var(--c-ink-3);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3.5rem 1.5rem 2.5rem;
    max-width: 1340px;
    margin: 0 auto;
}
@media (min-width: 760px) {
    .site-footer__inner {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 3rem;
    }
    .site-footer__col + .site-footer__col {
        border-left: 1px solid var(--c-line);
        padding-left: 2rem;
    }
}
@media (min-width: 1024px) {
    .site-footer__inner { padding: 4rem 2.5rem 2.5rem; }
}
.site-footer h4 {
    font-family: var(--font-mono);
    color: var(--c-ink);
    font-size: 0.6875rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 500;
}
.site-footer p { color: var(--c-ink-3); margin: 0 0 0.5rem; font-size: 0.9375rem; }
.site-footer a {
    color: var(--c-ink-3);
    transition: color var(--t-fast);
    font-size: 0.9375rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.site-footer a:hover {
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.site-footer__brand h4 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--c-ink);
    text-transform: none;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
}
.site-footer__brand p {
    color: var(--c-ink-3);
    max-width: 32ch;
    line-height: 1.5;
}
.site-footer__legal {
    border-top: 1px solid var(--c-line);
    padding: 1.25rem 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--c-ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.site-footer__legal-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Botones — sólo dos formas: solid + sutil ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast),
        border-color var(--t-fast), transform var(--t-fast);
    letter-spacing: -0.005em;
}
.btn:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 2px;
}
.btn::after {
    content: '↗';
    font-family: var(--font-mono);
    font-size: 0.875em;
    transform: translate(-2px, 0) rotate(0deg);
    transition: transform var(--t-base);
    opacity: 0;
    margin-left: -0.5rem;
}
.btn--primario {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}
.btn--primario:hover {
    background: var(--c-ink-2);
    color: var(--c-paper);
    border-color: var(--c-ink-2);
}
.btn--primario:hover::after { opacity: 1; transform: translate(2px, -2px); }

.btn--secundario {
    background: var(--c-secundario);
    color: var(--c-paper);
    border-color: var(--c-secundario);
}

.btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn--ghost:hover {
    background: var(--c-ink);
    color: var(--c-paper);
}

.btn--sutil {
    background: var(--c-paper-2);
    color: var(--c-ink);
    border-color: transparent;
}
.btn--sutil:hover { background: var(--c-paper-3); }

.btn--link {
    background: transparent;
    color: var(--c-ink);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--c-ink);
    border-radius: 0;
}
.btn--link::after { display: none; }
.btn--link:hover { color: var(--c-ink-3); border-color: var(--c-ink-3); }

.btn--lg { padding: 0.9375rem 1.5rem; font-size: 0.9375rem; }
.btn--sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }

/* ---------- Mono label & eyebrow ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-ink-mute);
}
.eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--c-ink);
}
.eyebrow--num::before { display: none; }
.eyebrow--num {
    color: var(--c-ink);
}
.eyebrow__num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-mute);
    letter-spacing: 0.04em;
}

/* ---------- Hero — editorial split ---------- */
.hero {
    position: relative;
    padding: 4rem 0 5rem;
    border-bottom: 1px solid var(--c-rule);
    overflow: hidden;
}
@media (min-width: 880px) {
    .hero { padding: 6rem 0 7rem; }
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}
@media (min-width: 880px) {
    .hero__inner { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: end; }
}
.hero__eyebrow {
    margin-bottom: 1.75rem;
    color: var(--c-ink);
}
.hero__titulo {
    font-size: clamp(2.75rem, 7.5vw, 6.5rem);
    margin: 0 0 1.5rem;
    color: var(--c-ink);
    letter-spacing: -0.045em;
    font-weight: 400;
    line-height: 0.92;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.hero__titulo em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    color: var(--c-ink);
}
.hero__subtitulo {
    color: var(--c-ink-3);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    max-width: 50ch;
    margin: 0 0 2rem;
    line-height: 1.45;
    letter-spacing: -0.005em;
}
.hero__acciones { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero__media {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--c-paper-2);
    border: 1px solid var(--c-rule);
    overflow: hidden;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05);
}
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(20,17,13,0.18));
    pointer-events: none;
}

/* Marca de registro decorativa (esquinas del hero) */
.hero__marca {
    position: absolute;
    width: 14px; height: 14px;
    color: var(--c-ink);
}
.hero__marca::before, .hero__marca::after {
    content: ''; position: absolute;
    background: currentColor;
}
.hero__marca::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.hero__marca::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.hero__marca--tl { top: 1.5rem; left: 1.5rem; }
.hero__marca--tr { top: 1.5rem; right: 1.5rem; }
.hero__marca--bl { bottom: 1.5rem; left: 1.5rem; }
.hero__marca--br { bottom: 1.5rem; right: 1.5rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 5rem 0; border-bottom: 1px solid var(--c-line); }
.seccion:last-of-type { border-bottom: 0; }
.seccion--alt { background: var(--c-paper-2); }
.seccion--ink { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink-2); }
.seccion--ink h2, .seccion--ink h3 { color: var(--c-paper); }
.seccion--ink p { color: color-mix(in srgb, var(--c-paper) 75%, transparent); }
.seccion--ink .eyebrow { color: var(--c-paper); }
.seccion--ink .eyebrow::before { background: var(--c-paper); }
.seccion--ink .eyebrow__num { color: color-mix(in srgb, var(--c-paper) 60%, transparent); }
.seccion--apretada { padding: 2rem 0; }

@media (max-width: 640px) { .seccion { padding: 3rem 0; } }

.seccion__header {
    margin-bottom: 3rem;
    max-width: 48ch;
}
.seccion__header--centrado { margin-left: auto; margin-right: auto; text-align: center; }
.seccion__header--split {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: none;
}
.seccion__header__main { flex: 1; min-width: 280px; max-width: 48ch; }
.seccion__titulo {
    font-size: clamp(2rem, 4vw, 3.25rem);
    margin: 1rem 0 0.5rem;
    letter-spacing: -0.035em;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.seccion__bajada {
    color: var(--c-ink-3);
    font-size: 1rem;
    max-width: 56ch;
    margin: 0;
    line-height: 1.5;
}
.seccion__link {
    color: var(--c-ink);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 1px;
    line-height: 1.4;
    align-self: end;
    margin-bottom: 0.75rem;
}
.seccion__link:hover { color: var(--c-ink-3); border-color: var(--c-ink-3); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--productos {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 3rem 1.5rem;
}
.grid--productos-densa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
}
@media (min-width: 640px) { .grid--productos-densa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--productos-densa { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid--categorias { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--c-line); }
.grid--beneficios { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--c-line); }
.grid--pasos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--c-line); }

/* ---------- Cards de producto ---------- */
.card-producto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.card-producto:hover { color: inherit; }
.card-producto:hover .card-producto__imagen img { transform: scale(1.02); }
.card-producto:hover .card-producto__nombre { font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.card-producto__imagen {
    aspect-ratio: 4/5;
    background: var(--c-paper-2);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--c-rule);
}
.card-producto__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
    filter: contrast(1.04);
}
.card-producto__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--c-ink);
}
.card-producto__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.card-producto__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.card-producto__nombre {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.1;
    margin: 0;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: -0.025em;
    transition: font-variation-settings var(--t-slow);
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
    flex: 1;
}
.card-producto__descripcion {
    color: var(--c-ink-mute);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-producto__precio {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.card-producto__precio--cotizar {
    color: var(--c-ink-mute);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---------- Cards de categoría — bordes hairline editoriales ---------- */
.card-categoria {
    background: transparent;
    padding: 1.75rem 1.5rem 2rem;
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    position: relative;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.card-categoria:hover {
    background: var(--c-paper-2);
    color: inherit;
}
.card-categoria__num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--c-ink-mute);
    letter-spacing: 0.12em;
}
.card-categoria h3 {
    color: var(--c-ink);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.card-categoria p {
    color: var(--c-ink-3);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    flex: 1;
}
.card-categoria__cta {
    margin-top: 0.875rem;
    color: var(--c-ink);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 1px;
    align-self: flex-start;
}

/* ---------- Beneficios — sin fondos, sólo type ---------- */
.card-beneficio {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.card-beneficio__num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--c-ink-mute);
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}
.card-beneficio__icono {
    width: 28px;
    height: 28px;
    color: var(--c-ink);
    margin-bottom: 0.375rem;
}
.card-beneficio__icono svg { width: 100%; height: 100%; }
.card-beneficio h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    margin: 0;
    color: var(--c-ink);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.card-beneficio p {
    margin: 0;
    color: var(--c-ink-3);
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* ---------- Pasos — numeración display ---------- */
.paso {
    text-align: left;
    padding: 2.5rem 1.5rem;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    position: relative;
}
.paso__numero {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 0.9;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: -0.05em;
    margin-bottom: 1.5rem;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1';
}
.paso__imagen {
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: var(--c-paper-2);
    border: 1px solid var(--c-rule);
}
.paso__imagen img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.paso h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    margin: 0 0 0.5rem;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: -0.025em;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.paso p { color: var(--c-ink-3); margin: 0; line-height: 1.5; font-size: 0.9375rem; }

/* ---------- Sobre nosotros — magazine block ---------- */
.sobre {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 880px) {
    .sobre { grid-template-columns: 1fr 1.3fr; gap: 4rem; }
    .sobre--invertido .sobre__media { order: 2; }
}
.sobre__media {
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--c-paper-2);
    border: 1px solid var(--c-rule);
}
.sobre__media img { width: 100%; height: 100%; object-fit: cover; }
.sobre__cuerpo p {
    color: var(--c-ink-3);
    line-height: 1.6;
    font-size: 1rem;
}
.sobre__cuerpo p:first-of-type {
    font-size: 1.125rem;
    color: var(--c-ink-2);
}
.sobre__cuerpo p:first-of-type::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 4rem;
    line-height: 0.9;
    padding-right: 0.5rem;
    margin-top: 0.25rem;
    font-weight: 400;
    color: var(--c-ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1';
}

/* ---------- CTA strip — splash de tinta ---------- */
.cta-strip {
    position: relative;
    padding: 4rem 2rem;
    color: var(--c-paper);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background: var(--c-ink);
    margin: 4rem 0 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
}
.cta-strip__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    opacity: 0.35;
    filter: grayscale(0.4) contrast(1.1);
}
.cta-strip h2 {
    color: var(--c-paper);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    margin: 1rem 0 0.75rem;
    letter-spacing: -0.04em;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1';
}
.cta-strip p { color: color-mix(in srgb, var(--c-paper) 80%, transparent); max-width: 56ch; margin: 0 auto 2rem; font-size: 1rem; }
.cta-strip .eyebrow { color: var(--c-paper); }
.cta-strip .eyebrow::before { background: var(--c-paper); }
.cta-strip .btn--primario {
    background: var(--c-paper);
    color: var(--c-ink);
    border-color: var(--c-paper);
}
.cta-strip .btn--primario:hover { background: color-mix(in srgb, var(--c-paper) 92%, transparent); color: var(--c-ink); }

/* ---------- Listing con sidebar ---------- */
.listing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 880px) {
    .listing { grid-template-columns: 220px 1fr; gap: 4rem; }
}
.listing-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (max-width: 879px) { .listing-sidebar { position: static; } }

.listing-sidebar__seccion h4 {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-ink-mute);
    margin: 0 0 1rem;
    font-weight: 500;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-line);
}
.listing-sidebar__busqueda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-rule);
    padding: 0.5rem 0;
    transition: border-color var(--t-fast);
}
.listing-sidebar__busqueda:focus-within { border-color: var(--c-ink); }
.listing-sidebar__busqueda svg { width: 14px; height: 14px; color: var(--c-ink-mute); flex-shrink: 0; }
.listing-sidebar__busqueda input {
    border: 0;
    background: transparent;
    outline: none;
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    color: var(--c-ink);
}
.listing-sidebar__busqueda input::placeholder {
    color: var(--c-ink-mute);
    font-family: var(--font-base);
}
.listing-sidebar__categorias {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.listing-sidebar__categorias li + li { border-top: 1px dotted var(--c-line); }
.listing-sidebar__categorias a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    color: var(--c-ink-3);
    font-size: 0.9375rem;
    transition: color var(--t-fast);
    letter-spacing: -0.005em;
}
.listing-sidebar__categorias a:hover { color: var(--c-ink); }
.listing-sidebar__categorias a.activa {
    color: var(--c-ink);
    font-weight: 500;
}
.listing-sidebar__categorias a.activa::before {
    content: '◆';
    margin-right: 0.5rem;
    font-size: 0.5em;
    transform: translateY(-0.2em);
    display: inline-block;
}
.listing-sidebar__count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--c-ink-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* ---------- Listing toolbar ---------- */
.listing-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-rule);
    flex-wrap: wrap;
}
.listing-toolbar__count {
    font-family: var(--font-mono);
    color: var(--c-ink);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.listing-toolbar__count strong { color: var(--c-ink); font-weight: 500; }
.listing-toolbar__orden {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--c-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.listing-toolbar__orden select {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-rule);
    border-radius: 0;
    padding: 0.375rem 1.5rem 0.375rem 0;
    font: inherit;
    font-family: var(--font-base);
    text-transform: none;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    color: var(--c-ink);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2314110d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
}
.listing-toolbar__orden select:focus { outline: none; border-color: var(--c-ink); }

.listing-header {
    margin-bottom: 3rem;
    padding-bottom: 0;
    border-bottom: 0;
}
.listing-header h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    margin: 1rem 0 0.5rem;
    letter-spacing: -0.045em;
    font-weight: 400;
    line-height: 0.95;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.listing-header p { color: var(--c-ink-3); margin: 0; font-size: 1rem; max-width: 56ch; }

/* ---------- Vacío ---------- */
.vacio {
    text-align: center;
    padding: 5rem 1rem;
    color: var(--c-ink-mute);
    border: 1px dashed var(--c-line);
}
.vacio__icono { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; opacity: 0.5; }
.vacio h3 { color: var(--c-ink); margin: 0 0 0.75rem; font-size: 1.5rem; font-family: var(--font-display); }
.vacio p { margin: 0 0 1.5rem; font-size: 0.9375rem; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ---------- Paginación ---------- */
.paginador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-rule);
    flex-wrap: wrap;
}
.paginador__nav {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 1px;
}
.paginador__nav:hover { color: var(--c-ink-3); border-color: var(--c-ink-3); }
.paginador__estado {
    color: var(--c-ink-mute);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* ---------- Producto detalle ---------- */
.producto-detalle { padding: 2rem 0 6rem; }
.producto-detalle__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 880px) {
    .producto-detalle__inner { grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: start; }
}
.producto-detalle__galeria {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.producto-detalle__imagen-principal {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--c-paper-2);
    border: 1px solid var(--c-rule);
}
.producto-detalle__imagen-principal img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.producto-detalle__thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 4px;
}
.producto-detalle__thumbnails img {
    width: 64px; height: 80px;
    object-fit: cover;
    border: 1px solid var(--c-line);
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color var(--t-fast);
}
.producto-detalle__thumbnails img:hover { border-color: var(--c-ink); }
.producto-detalle__thumbnails img.is-active { border-color: var(--c-ink); }
.producto-detalle__info { position: sticky; top: 100px; }
@media (max-width: 879px) { .producto-detalle__info { position: static; } }
.breadcrumbs {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--c-ink-mute);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.breadcrumbs a { color: var(--c-ink-mute); }
.breadcrumbs a:hover { color: var(--c-ink); }
.breadcrumbs span { color: var(--c-ink-faint); }
.producto-detalle__nombre {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 1rem;
    letter-spacing: -0.04em;
    line-height: 1;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.producto-detalle__descripcion {
    color: var(--c-ink-3);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
}
.producto-detalle__descripcion-corta { color: var(--c-ink-3); margin-bottom: 2rem; line-height: 1.6; font-size: 1rem; }
.producto-detalle__configurador {
    background: var(--c-paper-2);
    border: 1px solid var(--c-rule);
    padding: 1.75rem;
    margin-top: 1rem;
}

/* ---------- Contacto ---------- */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 880px) {
    .contacto-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; }
}
.contacto-datos h2, .contacto-form h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.contacto-datos p { color: var(--c-ink-3); }
.contacto-datos__bloque {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--c-line);
}
.contacto-datos__bloque strong {
    display: block;
    color: var(--c-ink-mute);
    margin-bottom: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.contacto-datos__bloque a { color: var(--c-ink); border-bottom: 1px solid var(--c-ink); padding-bottom: 1px; }
.contacto-datos__bloque a:hover { color: var(--c-ink-3); border-color: var(--c-ink-3); }

/* ---------- Páginas custom ---------- */
.pagina-custom__header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-rule); }
.pagina-custom__cuerpo { color: var(--c-ink-3); line-height: 1.7; font-size: 1rem; max-width: 64ch; }
.pagina-custom__cuerpo h2 { margin-top: 2.5rem; font-size: 1.875rem; font-family: var(--font-display); }
.pagina-custom__cuerpo h3 { margin-top: 2rem; font-size: 1.25rem; font-family: var(--font-display); }
.pagina-custom__cuerpo ul, .pagina-custom__cuerpo ol { padding-left: 1.5rem; }
.pagina-custom__cuerpo blockquote {
    border-left: 2px solid var(--c-ink);
    padding: 0.5rem 0 0.5rem 1.5rem;
    color: var(--c-ink-2);
    margin: 1.75rem 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1';
}
.pagina-custom__cuerpo a {
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-ink);
    padding-bottom: 1px;
}
.pagina-custom__cuerpo a:hover { color: var(--c-ink-3); border-color: var(--c-ink-3); }

/* ---------- Animaciones ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero__contenido > * {
        animation: subir 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .hero__eyebrow { animation-delay: 0.05s; }
    .hero__titulo { animation-delay: 0.15s; }
    .hero__subtitulo { animation-delay: 0.3s; }
    .hero__acciones { animation-delay: 0.45s; }
    .hero__media { animation: subir 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
}
@keyframes subir {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}