/* =========================================================
   NØVA — WEB TEMPLATES
   Hoja de estilos consolidada
========================================================= */


/* =========================================================
   01. BASE GENERAL
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3eadc;
    color: #1f1f1f;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #8b7355;
    outline-offset: 4px;
}


/* =========================================================
   02. NAVBAR
========================================================= */

.navbar {
    width: 100%;
    padding: 22px 6%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    background-color: rgba(243, 234, 220, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(216, 204, 188, .65);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    flex-shrink: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #1f1f1f;
    text-decoration: none;
}

.nova-icon {
    width: 27px;
    height: 27px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg) translateY(1px);
}

.nova-icon span {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #8b7355;
}

.nova-icon span:first-child {
    transform: translate(-3px, -3px);
}

.nova-icon span:last-child {
    transform: translate(3px, 3px);
}

.navbar nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    min-width: 0;
}

.navbar nav a {
    text-decoration: none;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.navbar nav a:hover {
    opacity: .6;
}

.btn-navbar {
    padding: 12px 20px;
    background-color: #1f1f1f;
    color: #fffaf2 !important;
    border: 1px solid #1f1f1f;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform .2s ease,
        opacity .2s ease,
        background-color .2s ease;
}

.navbar > .btn-navbar-desktop {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar nav .btn-navbar-mobile {
    display: none;
}

.navbar > .btn-navbar-desktop:hover,
.navbar nav .btn-navbar-mobile:hover {
    transform: translateY(-2px);
    opacity: .9;
}


/* =========================================================
   03. HERO
========================================================= */

.hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 80px 6% 75px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    width: 46%;
    max-width: 650px;
    position: relative;
    z-index: 10;
}

.hero-tag {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 28px;
}

.hero h1 span {
    display: block;
    color: #8b7355;
}

.hero-description {
    max-width: 560px;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 1.6;
    color: #5f5a53;
}

.hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, opacity .2s ease;
}

.btn-primary {
    background-color: #1f1f1f;
    color: #fffaf2;
}

.btn-secondary {
    border: 1px solid #1f1f1f;
    color: #1f1f1f;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
    opacity: .85;
}


/* =========================================================
   04. HERO SHOWCASE Y MOCKUPS
========================================================= */

.hero-showcase {
    width: 54%;
    height: 510px;
    position: relative;
    flex-shrink: 0;
}

.mockup {
    position: absolute;
    overflow: hidden;
    background: #fffaf2;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(31, 31, 31, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}

.mockup-back {
    width: 55%;
    height: 390px;
    top: 55px;
    left: 0;
    transform: rotate(-5deg);
    z-index: 1;
}

.mockup-main {
    width: 63%;
    height: 460px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.mockup-front {
    width: 48%;
    height: 340px;
    right: 0;
    bottom: 25px;
    transform: rotate(5deg);
    z-index: 4;
}

.mockup-main:hover {
    transform: translateX(-50%) translateY(-8px);
    box-shadow: 0 35px 75px rgba(31, 31, 31, .18);
}

.mockup-back:hover {
    transform: rotate(-5deg) translateY(-8px);
    box-shadow: 0 35px 70px rgba(31, 31, 31, .16);
}

.mockup-front:hover {
    transform: rotate(5deg) translateY(-8px);
    box-shadow: 0 35px 70px rgba(31, 31, 31, .18);
}


/* =========================================================
   05. MINI SITES
========================================================= */

.mini-site {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mini-navbar {
    height: 44px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fffaf2;
    position: relative;
    z-index: 5;
}

.mini-navbar::before {
    content: "NØVA";
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.mini-nav {
    display: flex;
    gap: 10px;
}

.mini-nav span {
    font-size: 7px;
    color: #777066;
}


/* =========================================================
   06. AURA — MOCKUP DEL HERO
========================================================= */

.aura-site {
    background: #ede3d6;
}

.aura-hero {
    height: 72%;
    background-image:
        linear-gradient(
            to bottom,
            rgba(31, 31, 31, .04),
            rgba(31, 31, 31, .38)
        ),
        url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=900&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
}

.aura-overlay {
    position: absolute;
    left: 22px;
    bottom: 22px;
    color: white;
}

.aura-overlay small,
.noir-overlay small,
.elan-content small {
    display: block;
    font-size: 7px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.aura-overlay .mockup-title,
.elan-content .mockup-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 10px;
}

.aura-overlay button,
.noir-overlay button,
.elan-content button {
    border: none;
    background: #1f1f1f;
    color: #fffaf2;
    padding: 7px 11px;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 600;
}

.mini-products {
    height: 28%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
}

.mini-product {
    background: #fffaf2;
    position: relative;
    overflow: hidden;
}

.mini-product:nth-child(1) {
    background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=500&q=80');
    background-size: cover;
    background-position: center;
}

.mini-product:nth-child(2) {
    background-image: url('https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&w=500&q=80');
    background-size: cover;
    background-position: center;
}


/* =========================================================
   07. NOIR — MOCKUP DEL HERO
========================================================= */

.noir-site {
    background: #252525;
    color: #fffaf2;
}

.noir-navbar {
    background: #252525;
}

.noir-navbar::before {
    content: "NOIR";
    color: #fffaf2;
}

.noir-navbar .mini-nav span {
    color: #bcb5ac;
}

.noir-hero {
    height: 72%;
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, .55)
        ),
        url('https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=900&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
}

.noir-overlay {
    position: absolute;
    left: 24px;
    bottom: 24px;
}

.noir-overlay small {
    color: #c5aa87;
    margin-bottom: 7px;
}

.noir-overlay .mockup-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 12px;
}

.noir-info {
    height: 28%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 13px 18px;
    gap: 8px;
}

.noir-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.noir-info-item strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
}

.noir-info-item span {
    font-size: 6px;
    color: #aaa39a;
}


/* =========================================================
   08. ÉLAN — MOCKUP DEL HERO
========================================================= */

.elan-site {
    background: #fffaf2;
}

.elan-hero {
    height: 100%;
    position: relative;
    background: #eee4d7;
}

.elan-image {
    position: absolute;
    inset: 0;
}

.elan-image > div {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(
            to bottom,
            rgba(31, 31, 31, .02),
            rgba(31, 31, 31, .32)
        ),
        url('https://images.unsplash.com/photo-1547887538-e3a2f32cb1cc?auto=format&fit=crop&w=700&q=80');
    background-size: cover;
    background-position: center;
}

.elan-content {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: white;
}


/* =========================================================
   09. CATÁLOGO Y ENCABEZADO
========================================================= */

.templates {
    padding: 80px 6% 90px;
    border-bottom: 1px solid #d8ccbc;
}

.section-header {
    max-width: 680px;
    margin-bottom: 48px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #8b7355;
}

.section-label > span {
    width: 18px;
    height: 1px;
    background-color: #1f1f1f;
    flex-shrink: 0;
}

.section-header h2 {
    max-width: 620px;
    margin: 0 0 15px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #1f1f1f;
}

.section-header h2 span {
    color: #8b7355;
}

.section-header > p {
    max-width: 560px;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: .1px;
    color: #6f685e;
}

.catalog-count {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .5px;
    color: #8b7355 !important;
}


/* =========================================================
   10. FILTROS DEL CATÁLOGO
========================================================= */

.template-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 32px;
}

.template-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid #d8ccbc;
    border-radius: 50px;
    background: transparent;
    color: #514a41;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.template-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50px;
    background: rgba(139, 115, 85, .12);
    color: #796344;
    font-size: 10px;
    transition: background-color .25s ease, color .25s ease;
}

.template-filter:hover {
    border-color: #8b7355;
    transform: translateY(-2px);
}

.template-filter.active,
.template-filter[aria-pressed="true"] {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #fffaf2;
}

.template-filter.active span,
.template-filter[aria-pressed="true"] span {
    background: rgba(255, 250, 242, .14);
    color: #fffaf2;
}

.template-filter:focus-visible {
    outline: 2px solid #8b7355;
    outline-offset: 4px;
}


/* =========================================================
   11. GRILLA Y TARJETAS
========================================================= */

.templates-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 25px;
}

.template-card {
    height: 100%;
    min-width: 0;
    background-color: #fffaf2;
    border: 1px solid rgba(139, 115, 85, .12);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(45, 35, 22, .035);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.template-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(45, 35, 22, .10);
    border-color: rgba(139, 115, 85, .28);
}

/* El atributo hidden permite que funcionen los filtros JS. */
.template-card[hidden] {
    display: none !important;
}

.template-image {
    height: 350px;
    background-color: #e8dfd2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: #1f1f1f;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: background-position .5s ease;
}

/* Degradado por encima de la imagen y por debajo del texto. */
.template-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 18, 15, .04) 15%,
        rgba(20, 18, 15, .15) 42%,
        rgba(20, 18, 15, .66) 100%
    );
    pointer-events: none;
}

.template-card:hover .template-image {
    background-position: center 45%;
}

.template-image:focus-visible {
    outline: 3px solid #8b7355;
    outline-offset: -5px;
}

.template-category {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    padding: 7px 11px;
    background-color: #fffaf2;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1f1f1f;
}

.preview-content {
    position: relative;
    z-index: 1;
    width: 75%;
    text-align: left;
    color: #fffaf2;
}

.preview-small {
    display: block;
    margin-bottom: 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fffaf2;
}

.preview-content h3 {
    margin-bottom: 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -1px;
    color: #fffaf2;
}

.preview-button {
    display: inline-block;
    padding: 9px 14px;
    background-color: #fffaf2;
    color: #1f1f1f;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

.preview-button:hover {
    transform: translateY(-2px);
    opacity: .9;
}


/* =========================================================
   12. IMÁGENES DE LOS TEMPLATES
========================================================= */

/* BRASA — Hamburguesería */

.brasa-preview {
    background-image:
        linear-gradient(
            to bottom,
            rgba(31, 31, 31, .05),
            rgba(31, 31, 31, .72)
        ),
        url('https://images.unsplash.com/photo-1550547660-d9450f859349?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.brasa-preview .preview-small {
    color: #fffaf2;
}


/* PARFUM — Perfumería */

.parfum-preview {
    background-image:
        linear-gradient(
            to bottom,
            rgba(39, 35, 31, .20),
            rgba(39, 35, 31, .78)
        ),
        url('https://images.unsplash.com/photo-1541643600914-78b084683601?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.parfum-preview .preview-content h3 {
    max-width: 270px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.5px;
}

.parfum-preview .preview-small {
    color: #e7d4bf;
}

.parfum-preview .preview-button {
    border-radius: 2px;
}


/* STREET — Indumentaria urbana */

.street-preview {
    background-image:
        linear-gradient(
            to bottom,
            rgba(31, 31, 31, .05),
            rgba(31, 31, 31, .72)
        ),
        url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.street-preview .preview-content h3 {
    max-width: 230px;
}


/* FORMA — Entrenamiento */

.forma-preview {
    background-color: #343a32;
    background-image:
        linear-gradient(
            180deg,
            rgba(14, 18, 14, .08),
            rgba(14, 18, 14, .72)
        ),
        url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.forma-preview .preview-small {
    color: #d3e1ad;
}


/* CORTE — Barbería */

.corte-preview {
    background-color: #302822;
    background-image:
        linear-gradient(
            180deg,
            rgba(25, 20, 16, .08),
            rgba(25, 20, 16, .76)
        ),
        url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}


/* HABITAT — Inmobiliaria */

.habitat-preview {
    background-color: #b5a58e;
    background-image:
        linear-gradient(
            180deg,
            rgba(30, 28, 23, .02),
            rgba(30, 28, 23, .66)
        ),
        url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}


/* LEX — Estudio jurídico */

.lex-preview {
    background-color: #38332c;
    background-image:
        linear-gradient(
            180deg,
            rgba(20, 19, 17, .12),
            rgba(20, 19, 17, .8)
        ),
        url('https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.lex-preview .preview-small {
    color: #d9c19b;
}


/* MOKA — Cafetería */

.moka-preview {
    background-color: #6f4b35;
    background-image:
        linear-gradient(
            180deg,
            rgba(36, 24, 17, .05),
            rgba(36, 24, 17, .76)
        ),
        url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}


/* AURA — Estética y belleza */

.aura-preview {
    background-color: #a98e80;
    background-image:
        linear-gradient(
            180deg,
            rgba(40, 27, 25, .04),
            rgba(40, 27, 25, .62)
        ),
        url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}


/* VIÑA — Vinos y experiencias */

.vina-preview {
    background-color: #4c302e;
    background-image:
        linear-gradient(
            180deg,
            rgba(27, 17, 18, .08),
            rgba(27, 17, 18, .76)
        ),
        url('https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.vina-preview .preview-small {
    color: #dfc39b;
}


/* DULZURA — Pastelería */

.dulzura-preview {
    background-color: #cbaea3;
    background-image:
        linear-gradient(
            180deg,
            rgba(54, 34, 31, .02),
            rgba(54, 34, 31, .60)
        ),
        url('https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}


/* NÓMADA — Viajes */

.nomada-preview {
    background-color: #61746c;
    background-image:
        linear-gradient(
            180deg,
            rgba(19, 31, 28, .04),
            rgba(19, 31, 28, .68)
        ),
        url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.nomada-preview .preview-small {
    color: #d8e0ce;
}


/* SAVIA — Nutrición */

.savia-preview {
    background-color: #78866c;
    background-image:
        linear-gradient(
            180deg,
            rgba(25, 37, 25, .02),
            rgba(25, 37, 25, .65)
        ),
        url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.savia-preview .preview-small {
    color: #dce8c9;
}


/* CALMA — Psicología */

.calma-preview {
    background-color: #b7a79a;
    background-image:
        linear-gradient(
            180deg,
            rgba(46, 37, 33, .03),
            rgba(46, 37, 33, .64)
        ),
        url('https://images.squarespace-cdn.com/content/v1/62d99f5472e5ae253964ba52/3af5a4e4-fe71-43a0-933b-aab9cdabe360/Therapy%2BOffice%2BChatGTP.png');
    background-position: center;
}


/* MÉDICO — Profesionales de la salud */

.medico-preview {
    background-color: #7b9b9a;
    background-image:
        linear-gradient(
            180deg,
            rgba(20, 40, 41, .02),
            rgba(20, 40, 41, .68)
        ),
        url('https://images.unsplash.com/photo-1622902046580-2b47f47f5471?auto=format&fit=crop&w=900&q=80');
    background-position: center;
}

.medico-preview .preview-small {
    color: #d4f0e9;
}


/* =========================================================
   13. INFORMACIÓN, DISPONIBILIDAD Y PRECIO
========================================================= */

.template-info {
    min-height: 112px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background-color: #fffaf2;
}

.template-details {
    min-width: 0;
}

.template-details h3 {
    margin: 0 0 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #1f1f1f;
}

.template-details p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8b7355;
}

.template-meta {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.template-status {
    padding: 5px 9px;
    border: 1px solid #d9c9ad;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: #796344;
    white-space: nowrap;
}

/* =========================================================
   14. CTA — CONTACTO
========================================================= */

.cta {
    position: relative;
    margin: 70px 6% 100px;
    padding: 120px 50px;
    background-color: #1f1f1f;
    color: #fffaf2;
    text-align: center;
    border-radius: 24px;
    overflow: hidden;
}

.cta::before {
    content: "NØVA";
    position: absolute;
    right: -35px;
    bottom: -85px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(180px, 23vw, 360px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.08em;
    color: rgba(255, 250, 242, .035);
    pointer-events: none;
}

.cta::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -150px;
    left: -100px;
    border: 1px solid rgba(255, 250, 242, .10);
    border-radius: 50%;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
}

.cta .section-label {
    justify-content: center;
    color: #c9c1b7;
}

.cta .section-label > span {
    background-color: #c5aa87;
}

.cta h2 {
    margin-bottom: 25px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(52px, 7vw, 92px);
    line-height: .95;
    letter-spacing: -4px;
    font-weight: 600;
}

.cta h2 span {
    display: block;
    color: #c5aa87;
}

.cta p {
    max-width: 560px;
    margin: 0 auto 40px;
    font-size: 17px;
    line-height: 1.7;
    color: #aaa39a;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    background-color: #fffaf2;
    color: #1f1f1f;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.btn-cta:hover {
    transform: translateY(-4px);
    background-color: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}


/* =========================================================
   15. CÓMO FUNCIONA
========================================================= */

.how-it-works {
    padding: 85px 6%;
    border-top: 1px solid #d8ccbc;
}

.how-header {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 60px;
}

.how-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 52px;
    line-height: .98;
    letter-spacing: -2px;
}

.how-header h2 span {
    color: #8b7355;
}

.how-header > p {
    max-width: 360px;
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.7;
    color: #6f675d;
}

.steps {
    width: 100%;
    border-top: 1px solid #d8ccbc;
}

.step {
    min-height: 145px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 25px;
    padding: 27px 0;
    border-bottom: 1px solid #d8ccbc;
    transition:
        padding-left .25s ease,
        padding-right .25s ease,
        background-color .25s ease;
}

.step:hover {
    padding-left: 12px;
    padding-right: 12px;
    background-color: rgba(255, 250, 242, .35);
}

.step-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #8b7355;
}

.step-content {
    max-width: 700px;
    min-width: 0;
}

.step-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
    margin-bottom: 8px;
}

.step-content p {
    max-width: 550px;
    font-size: 14px;
    line-height: 1.6;
    color: #6f675d;
}

.step-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8ccbc;
    border-radius: 50%;
    font-size: 15px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .25s ease, transform .25s ease;
}

.step:hover .step-arrow {
    opacity: 1;
    transform: translateX(0);
}

.how-features {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
    padding-top: 35px;
}

.how-features span {
    font-size: 12px;
    font-weight: 600;
    color: #777066;
}

.how-features span:not(:last-child)::after {
    content: "·";
    margin-left: 35px;
    color: #b7aa9a;
}


/* =========================================================
   16. NOSOTROS
========================================================= */

.about {
    padding: 100px 6%;
    background-color: #1f1f1f;
    color: #fffaf2;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    align-items: start;
}

.about .section-label {
    color: #fffaf2;
}

.about .section-label > span {
    background-color: #fffaf2;
}

.about-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -2px;
}

.about-header h2 span {
    color: #c5aa87;
}

.about-content {
    max-width: 650px;
}

.about-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #c9c1b7;
}

.about-content .about-main {
    margin-bottom: 25px;
    font-size: 21px;
    line-height: 1.5;
    color: #fffaf2;
}

.about-detail {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #4a4641;
    display: flex;
    gap: 25px;
}

.about-detail span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: #c5aa87;
}

.about-detail p {
    max-width: 350px;
    font-size: 14px;
}


/* =========================================================
   17. FOOTER
========================================================= */

.footer {
    padding: 55px 6% 25px;
    background-color: #1f1f1f;
    color: #fffaf2;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 45px;
    padding-bottom: 45px;
}

.footer-brand {
    max-width: 300px;
}

.footer-brand .logo {
    margin-bottom: 25px;
    color: #fffaf2;
    transform: none;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    color: #aaa39a;
}

.footer-links {
    display: flex;
    gap: 70px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column > span {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #c5aa87;
}

.footer-column a {
    color: #fffaf2;
    text-decoration: none;
    font-size: 14px;
    transition: opacity .2s ease;
}

.footer-column a:hover {
    opacity: .6;
}

.footer-bottom {
    padding-top: 25px;
    border-top: 1px solid #4a4641;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: #77716a;
}


/* =========================================================
   18. MENÚ HAMBURGUESA
========================================================= */

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(31, 31, 31, .15);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #1f1f1f;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle.active span:first-child {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:last-child {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   19. ANIMACIONES DE APARICIÓN
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.template-card.reveal.is-visible:hover {
    transform: translateY(-6px);
}

.reveal-fade {
    opacity: 0;
    transition: opacity .8s ease;
}

.reveal-fade.is-visible {
    opacity: 1;
}



/* =========================================================
   20. TABLETS Y PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1100px) {
    .hero {
        gap: 30px;
    }

    .hero-content {
        width: 45%;
    }

    .hero-showcase {
        width: 55%;
        transform: scale(.92);
        transform-origin: center right;
    }

    .templates-grid {
        gap: 22px;
    }

    .about {
        gap: 60px;
    }
}

@media (min-width: 651px) and (max-width: 900px) {
    .navbar {
        padding: 20px 5%;
        gap: 18px;
    }

    .navbar nav {
        gap: 18px;
    }

    .navbar nav a {
        font-size: 13px;
    }

    .navbar .btn-navbar {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .hero {
        min-height: auto;
        padding: 65px 5% 75px;
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        width: 100%;
        max-width: 750px;
    }

    .hero h1 {
        font-size: clamp(44px, 9vw, 68px);
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-showcase {
        width: 100%;
        max-width: 650px;
        height: 500px;
        transform: none;
    }

    .templates {
        padding: 75px 5%;
    }

    .templates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .template-image {
        height: 310px;
    }

    .template-info {
        padding: 20px;
    }

    .template-filters {
        gap: 8px;
    }

    .template-filter {
        padding: 10px 12px;
        font-size: 11px;
    }

    .how-it-works {
        padding: 75px 5%;
    }

    .how-header {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .how-header > p {
        max-width: 500px;
    }

    .about {
        padding: 85px 5%;
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cta {
        padding: 90px 5%;
    }

    .footer {
        padding: 55px 5% 25px;
    }

    .footer-top {
        flex-direction: column;
        gap: 45px;
    }

    .footer-links {
        gap: 70px;
    }
}


/* =========================================================
   21. CELULARES
========================================================= */

@media (max-width: 650px) {

    /* NAVBAR */

    .navbar {
        padding: 18px 5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .navbar .logo {
        font-size: 27px;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .navbar > .btn-navbar-desktop {
        display: none;
    }

    .navbar nav {
        position: static;
        display: flex;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        min-width: 0;
        order: 4;
        white-space: normal;
        background: #f3eadc;
        border-top: 1px solid rgba(31, 31, 31, .12);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            max-height .3s ease,
            opacity .25s ease,
            visibility .3s ease;
    }

    .navbar nav.open {
        max-height: 320px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .navbar nav a:not(.btn-navbar) {
        display: block;
        padding: 14px 4px;
        font-size: 14px;
        border-bottom: 1px solid rgba(31, 31, 31, .08);
    }

    .navbar nav .btn-navbar-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        margin: 12px 0 10px;
        padding: 12px 20px;
        background: #1f1f1f;
        color: #fffaf2 !important;
        border: 1px solid #1f1f1f;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
    }

    /* HERO */

    .hero {
        padding: 55px 5% 65px;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        text-align: center;
    }

    .hero-showcase {
        height: 390px;
    }

    .mockup-back {
        width: 60%;
        height: 280px;
        top: 35px;
        left: -3%;
    }

    .mockup-main {
        width: 70%;
        height: 350px;
        top: 25px;
    }

    .mockup-front {
        width: 53%;
        height: 250px;
        right: -3%;
        bottom: 15px;
    }

    .aura-overlay .mockup-title,
    .noir-overlay .mockup-title,
    .elan-content .mockup-title {
        font-size: 21px;
    }

    /* ENCABEZADOS */

    .section-header h2,
    .how-header h2,
    .about-header h2 {
        font-size: 42px;
    }

    .section-header {
        margin-bottom: 32px;
    }

    .templates {
        padding: 60px 5% 70px;
    }

    /* FILTROS */

    .template-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 3px 2px 12px;
        margin-bottom: 24px;
        gap: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .template-filters::-webkit-scrollbar {
        display: none;
    }

    .template-filter {
        flex: 0 0 auto;
        padding: 10px 13px;
        font-size: 11px;
        white-space: nowrap;
    }

    .template-filter:hover {
        transform: none;
    }

    /* CATÁLOGO: DOS COLUMNAS */

    .templates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
        align-items: stretch;
    }

    .template-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 100%;
        border-radius: 12px;
    }

    .template-image {
        width: 100%;
        height: 165px;
        min-height: 165px;
        max-height: none;
        flex-shrink: 0;
        border-radius: 12px 12px 0 0;
    }

    .template-category {
        top: 10px;
        left: 10px;
        right: auto;
        bottom: auto;
        z-index: 3;
        max-width: calc(100% - 20px);
        padding: 5px 7px;
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .05em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-content {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        padding: 12px;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .preview-small {
        font-size: 8px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .preview-content h3 {
        font-size: clamp(16px, 4vw, 21px);
        line-height: 1.15;
        letter-spacing: -.5px;
        margin: 0 0 6px;
        overflow-wrap: anywhere;
    }

    .preview-content h4 {
        font-size: clamp(16px, 4vw, 21px);
        line-height: 1.15;
    }

    .preview-content p {
        font-size: 11px;
        line-height: 1.35;
        margin-top: 4px;
    }

    .preview-button {
        padding: 7px 9px;
        font-size: 9px;
        border-radius: 5px;
    }

    .parfum-preview .preview-content h3,
    .street-preview .preview-content h3 {
        max-width: 100%;
    }

    .parfum-preview .preview-content h3 {
        font-size: clamp(16px, 4vw, 21px);
        line-height: 1.15;
        letter-spacing: -.25px;
    }

    /* INFORMACIÓN DE CADA TARJETA */

    .template-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex: 1;
        min-width: 0;
        min-height: 0;
        padding: 12px;
        gap: 6px;
        box-sizing: border-box;
    }

    .template-details {
        width: 100%;
        min-width: 0;
    }

    .template-details h3 {
        font-size: 15px;
        line-height: 1.3;
        margin: 0 0 4px;
        overflow-wrap: anywhere;
    }

    .template-details p {
        font-size: 11px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .template-meta {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .template-status {
        padding: 4px 7px;
        font-size: 9px;
    }

    /* CÓMO FUNCIONA */

    .step {
        grid-template-columns: 35px minmax(0, 1fr) 25px;
        gap: 10px;
        padding: 24px 0;
    }

    .step-content h3 {
        font-size: 19px;
    }

    .step-content p {
        font-size: 12px;
    }

    .step-arrow {
        width: 26px;
        height: 26px;
        font-size: 12px;
        opacity: 1;
        transform: none;
    }

    .how-features {
        gap: 12px 20px;
        justify-content: flex-start;
    }

    .how-features span {
        font-size: 11px;
    }

    .how-features span:not(:last-child)::after {
        margin-left: 20px;
    }

    /* NOSOTROS */

    .about-content .about-main {
        font-size: 18px;
    }

    .about-detail {
        flex-direction: column;
        gap: 10px;
    }

    /* FOOTER */

    .footer-links {
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* CTA */

    .cta {
        margin: 20px 5% 65px;
        padding: 75px 22px;
        border-radius: 18px;
    }

    .cta h2 {
        font-size: 46px;
        letter-spacing: -2.5px;
    }

    .cta p {
        font-size: 15px;
    }

    .btn-cta {
        width: 100%;
    }

    .cta::before {
        right: -25px;
        bottom: -25px;
        font-size: 180px;
    }
}


/* =========================================================
   22. CELULARES MUY ANGOSTOS
========================================================= */

@media (max-width: 360px) {
    .templates-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .template-image {
        height: 210px;
        min-height: 210px;
    }

    .preview-content {
        padding: 16px;
    }

    .preview-content h3,
    .preview-content h4 {
        font-size: 22px;
    }

    .template-info {
        padding: 15px;
    }

    .template-details h3 {
        font-size: 17px;
    }

    .template-details p {
        font-size: 11px;
    }
}

/* =========================================================
   23. MOVIMIENTO REDUCIDO — ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal.is-visible,
    .reveal-fade,
    .reveal-fade.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
    }

    .template-filter,
    .template-card,
    .template-image {
        transition: none !important;
    }
}