:root {
  --black:#090909;
  --black-soft:#111111;
  --white:#f5f3ee;
  --muted:#929292;
  --gold:#c9a454;
  --gold-light:#ddc178;
  --stone:#b9b5ad;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{min-width:320px;overflow-x:hidden;background:var(--black);color:var(--white);font-family:"Manrope",sans-serif;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;}
::selection{background:var(--gold);color:var(--black);}

.header{
  width:100%;height:72px;padding:0 5.5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
  position:fixed;top:0;left:0;z-index:1000;background:rgba(9,9,9,.82);border-bottom:1px solid rgba(255,255,255,.065);backdrop-filter:blur(18px);
  transition:height .3s ease,background .3s ease;
}
.header.scrolled{height:64px;background:rgba(9,9,9,.96);}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:12px;}
.brand-mark{width:34px;height:34px;overflow:hidden;display:grid;place-items:center;border-radius:6px;background:#75726d;border:1px solid rgba(255,255,255,.1);}
.brand-mark img{width:74px;max-width:none;transform:translateY(-3px) scale(1.55);}
.brand-name{font-size:12px;font-weight:600;letter-spacing:2.7px;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.9);}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{position:relative;font-size:11px;font-weight:600;letter-spacing:.55px;text-transform:uppercase;color:rgba(255,255,255,.64);transition:color .25s ease;}
.nav a::after{content:"";width:0;height:1px;position:absolute;left:0;bottom:-7px;background:var(--gold);transition:width .25s ease;}
.nav a:hover{color:var(--white);}.nav a:hover::after{width:100%;}
.header-cta{justify-self:end;min-width:108px;padding:11px 18px;display:inline-flex;justify-content:center;border:1px solid rgba(201,164,84,.72);color:var(--gold-light);font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;transition:.3s;}
.header-cta:hover{background:var(--gold);color:var(--black);}
.menu-button{display:none;}

.hero{
  min-height:100vh;padding:110px 6% 72px;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;background:var(--black);
}
.hero-glow{width:720px;height:520px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(201,164,84,.07) 0%,rgba(201,164,84,.02) 38%,transparent 72%);filter:blur(4px);pointer-events:none;}
.hero-ring{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(201,164,84,.06);border-radius:50%;pointer-events:none;}
.ring-one{width:480px;height:480px;}.ring-two{width:640px;height:640px;opacity:.55;}
.hero-content{width:min(860px,100%);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.hero-logo{width:108px;height:108px;margin:0 auto 22px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,255,255,.06));}
.hero-eyebrow{margin-bottom:18px;color:var(--gold);font-size:9.5px;font-weight:700;letter-spacing:3.2px;text-transform:uppercase;}
.hero-title{margin:0 auto;color:var(--white);font-family:"DM Serif Display",serif;font-size:clamp(58px,7vw,104px);font-weight:400;line-height:.9;letter-spacing:-3px;text-align:center;}
.hero-title em{display:block;margin-top:8px;color:var(--gold);font-weight:400;}
.hero-description{max-width:650px;margin:28px auto 0;color:rgba(255,255,255,.62);font-size:clamp(14px,1.2vw,17px);line-height:1.75;text-align:center;}
.hero-actions,.contact-actions{margin-top:30px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
.button{min-height:50px;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;transition:.25s;}
.button:hover{transform:translateY(-2px);}
.button-gold{background:var(--gold);border:1px solid var(--gold);color:var(--black);}.button-gold:hover{background:var(--gold-light);border-color:var(--gold-light);}
.button-outline{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--white);}.button-outline:hover{border-color:rgba(201,164,84,.8);color:var(--gold-light);}
.scroll-cue{width:26px;height:44px;display:flex;justify-content:center;position:absolute;bottom:18px;left:50%;z-index:3;border:1px solid rgba(255,255,255,.18);border-radius:18px;transform:translateX(-50%);}
.scroll-cue span{width:3px;height:7px;margin-top:9px;background:var(--gold);border-radius:5px;animation:scrollDot 1.7s ease-in-out infinite;}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(15px)}}

.section-dark,.section-light,.section-stone{padding:120px 7%;}
.section-kicker,.section-number{text-transform:uppercase;}
.section-kicker{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:3px;}
.section-number{margin-bottom:12px;color:rgba(255,255,255,.28);font-size:11px;letter-spacing:2px;}
.section-heading{margin-bottom:65px;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px;align-items:start;}
.section-heading h2{max-width:960px;font-family:"DM Serif Display",serif;font-size:clamp(44px,5vw,72px);font-weight:400;line-height:1.02;letter-spacing:-2px;}
.section-heading h2 span{display:block;color:rgba(255,255,255,.44);font-style:italic;}

.statement{background:#111;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);}
.statement-inner{max-width:1020px;margin:0 auto;text-align:center;}
.statement h2{margin-top:22px;font-family:"DM Serif Display",serif;font-size:clamp(46px,5.8vw,82px);font-weight:400;line-height:1;letter-spacing:-2.5px;}
.statement h2 span{display:block;color:var(--gold);font-style:italic;}
.statement > .statement-inner > p:last-child{max-width:700px;margin:28px auto 0;color:rgba(255,255,255,.56);font-size:16px;line-height:1.78;}

.section-light{color:#111;background:#e7e4dc;}.section-light .section-number{color:rgba(10,10,10,.36);}.section-light .section-heading h2 span{color:rgba(10,10,10,.46);}
.service-list{border-top:1px solid rgba(10,10,10,.18);}
.service-row{padding:32px 8px;display:grid;grid-template-columns:65px minmax(0,1fr) 40px;gap:22px;align-items:center;border-bottom:1px solid rgba(10,10,10,.18);transition:.3s;}
.service-row:hover{padding-left:22px;padding-right:22px;background:rgba(255,255,255,.34);}
.service-number{color:#81775f;font-size:11px;letter-spacing:2px;}
.service-copy h3{margin-bottom:8px;font-family:"DM Serif Display",serif;font-size:clamp(28px,3.2vw,44px);font-weight:400;line-height:1.05;}
.service-copy p{max-width:700px;color:#66615a;font-size:14px;line-height:1.7;}
.service-arrow{justify-self:end;font-size:24px;transition:.25s;}.service-row:hover .service-arrow{transform:translate(4px,-4px);}

.section-stone{color:#111;background:var(--stone);}.section-stone .section-number{color:rgba(10,10,10,.38);}.section-stone .section-kicker{color:#6f5826;}.section-stone .section-heading h2 span{color:rgba(10,10,10,.46);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(10,10,10,.18);border-bottom:1px solid rgba(10,10,10,.18);}
.process-card{min-height:315px;padding:26px;display:flex;flex-direction:column;border-right:1px solid rgba(10,10,10,.18);}.process-card:last-child{border-right:none;}
.process-card>span{color:#705e34;font-size:11px;letter-spacing:2px;}.process-card h3{margin-top:auto;margin-bottom:14px;font-family:"DM Serif Display",serif;font-size:34px;font-weight:400;}.process-card p{color:rgba(10,10,10,.58);font-size:14px;line-height:1.7;}

.contact{min-height:700px;padding:115px 7%;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;background:#0a1712;}
.contact-glow{width:620px;height:620px;position:absolute;top:50%;left:50%;border:1px solid rgba(201,164,84,.08);border-radius:50%;transform:translate(-50%,-50%);}
.contact-inner{width:min(880px,100%);position:relative;z-index:2;}.contact h2{margin-top:22px;font-family:"DM Serif Display",serif;font-size:clamp(56px,6.8vw,94px);font-weight:400;line-height:.94;letter-spacing:-3px;}.contact h2 span{display:block;color:rgba(255,255,255,.44);font-style:italic;}.contact-inner>p:not(.section-kicker){max-width:640px;margin:28px auto 0;color:rgba(255,255,255,.58);line-height:1.75;}.contact-meta{margin-top:28px;display:flex;justify-content:center;flex-wrap:wrap;gap:18px 28px;color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.8px;}

.footer{padding:48px 7% 22px;display:grid;grid-template-columns:1fr auto;gap:42px;background:#070707;}.footer-brand{display:flex;align-items:center;gap:15px;}.footer-mark{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:var(--gold);font-family:"DM Serif Display",serif;font-size:20px;}.footer-brand strong{font-size:14px;letter-spacing:1px;}.footer-brand p{margin-top:4px;color:rgba(255,255,255,.38);font-size:12px;}.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:20px;}.footer-links a{color:rgba(255,255,255,.5);font-size:12px;transition:.2s;}.footer-links a:hover{color:var(--gold);}.footer-bottom{padding-top:20px;grid-column:1/-1;display:flex;justify-content:space-between;gap:25px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.3);font-size:11px;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s ease;}.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:1050px){
  .header{grid-template-columns:1fr auto;}.nav,.header-cta{display:none;}.menu-button{width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;justify-self:end;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:50%;cursor:pointer;}.menu-button span{width:17px;height:1px;background:#fff;transition:.25s;}.menu-button.active span:first-child{transform:translateY(4px) rotate(45deg);}.menu-button.active span:last-child{transform:translateY(-4px) rotate(-45deg);}.nav.open{width:90%;padding:26px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:absolute;top:72px;left:5%;background:rgba(9,9,9,.98);border:1px solid rgba(255,255,255,.1);}
  .section-heading{grid-template-columns:1fr;gap:24px;}.process-grid{grid-template-columns:repeat(2,1fr);}.process-card:nth-child(2){border-right:none;}.process-card:nth-child(-n+2){border-bottom:1px solid rgba(10,10,10,.18);}
}

@media(max-width:700px){
  .header{height:64px;padding:0 5%;}.brand-mark{width:34px;height:34px;}.brand-name{font-size:10.5px;letter-spacing:2px;}.hero{min-height:100svh;padding:92px 5% 72px;}.hero-logo{width:86px;height:86px;margin-bottom:20px;}.hero-eyebrow{max-width:290px;margin-left:auto;margin-right:auto;line-height:1.7;}.hero-title{font-size:clamp(56px,17vw,78px);line-height:.91;letter-spacing:-2px;}.hero-description{margin-top:25px;font-size:14px;}.hero-actions,.contact-actions{flex-direction:column;}.hero-actions .button,.contact-actions .button{width:100%;}.ring-one{width:350px;height:350px;}.ring-two{width:480px;height:480px;}.section-dark,.section-light,.section-stone{padding:88px 5%;}.section-heading{margin-bottom:48px;}.section-heading h2{font-size:44px;}.statement h2{font-size:50px;}.statement>.statement-inner>p:last-child{font-size:15px;}.service-row{padding:26px 0;grid-template-columns:38px minmax(0,1fr) 22px;gap:12px;}.service-row:hover{padding-left:8px;padding-right:8px;}.service-copy h3{font-size:30px;}.service-copy p{font-size:13px;}.process-grid{grid-template-columns:1fr;}.process-card{min-height:250px;border-right:none;border-bottom:1px solid rgba(10,10,10,.18);}.process-card:last-child{border-bottom:none;}.contact{min-height:640px;padding:88px 5%;}.contact h2{font-size:57px;}.footer{padding:44px 5% 20px;grid-template-columns:1fr;}.footer-links{align-items:flex-start;flex-direction:column;gap:12px;}.footer-bottom{flex-direction:column;gap:7px;}
}


/* =========================================================
   PORTADA V3 — DISEÑO FINAL ELEGIDO
========================================================= */

.header {
    height: 74px;
    padding: 0 4.2%;
    grid-template-columns: 1fr auto 1fr;
    background: rgba(7, 7, 7, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
}

.header.scrolled {
    height: 68px;
    background: rgba(7, 7, 7, 0.97);
}

.brand {
    gap: 14px;
}

.brand-symbol {
    width: 32px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-name {
    font-size: 13px;
    letter-spacing: 3.6px;
    font-weight: 600;
}

.nav {
    gap: 38px;
}

.nav a {
    font-size: 11px;
    letter-spacing: 1.15px;
}

.header-cta {
    min-width: 124px;
    padding: 12px 22px;
    color: var(--gold-light);
    background: transparent;
    border: 1px solid rgba(201, 164, 84, 0.78);
}

.hero {
    min-height: 100vh;
    padding: 118px 5% 84px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(201, 164, 84, 0.07) 0%,
            rgba(201, 164, 84, 0.025) 28%,
            transparent 61%
        ),
        #070707;
}

.hero-glow {
    width: 920px;
    height: 760px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(201, 164, 84, 0.10) 0%,
            rgba(201, 164, 84, 0.035) 35%,
            transparent 70%
        );
    filter: blur(8px);
    pointer-events: none;
}

.hero-watermark {
    width: min(560px, 48vw);
    height: min(560px, 48vw);
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: contain;
    transform: translate(-50%, -48%);
    opacity: 0.075;
    filter:
        sepia(1)
        saturate(1.6)
        hue-rotate(355deg)
        brightness(1.2)
        drop-shadow(0 0 44px rgba(201, 164, 84, 0.12));
    pointer-events: none;
    user-select: none;
}

.hero-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -48%);
    pointer-events: none;
}

.ring-one {
    width: min(570px, 52vw);
    height: min(570px, 52vw);
    border: 1px solid rgba(201, 164, 84, 0.16);
}

.ring-two {
    width: min(790px, 68vw);
    height: min(790px, 68vw);
    border: 1px solid rgba(201, 164, 84, 0.08);
}

.ring-three {
    width: min(980px, 82vw);
    height: min(980px, 82vw);
    border: 1px solid rgba(201, 164, 84, 0.035);
}

.hero-content {
    width: min(980px, 100%);
    position: relative;
    z-index: 3;
    margin-top: 10px;
}

.hero-eyebrow {
    margin: 0 auto 26px;
    color: #d8ad43;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.hero-title {
    max-width: 920px;
    margin: 0 auto;
    color: #f5f1e9;
    font-family: "DM Serif Display", serif;
    font-size: clamp(72px, 8.1vw, 126px);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -3.4px;
    text-align: center;
}

.hero-title em {
    display: block;
    margin-top: 12px;
    color: #d1a644;
    font-style: italic;
    font-weight: 400;
}

.hero-description {
    max-width: 690px;
    margin: 34px auto 0;
    color: rgba(255, 255, 255, 0.69);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.75;
    text-align: center;
}

.hero-actions {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.hero-actions .button {
    min-width: 250px;
    min-height: 58px;
    gap: 24px;
}

.button-arrow {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.button:hover .button-arrow {
    transform: translateX(4px);
}

.scroll-cue {
    width: auto;
    height: auto;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 0;
    color: var(--gold);
}

.scroll-cue::before {
    content: "";
    width: 28px;
    height: 48px;
    border: 1px solid rgba(201, 164, 84, 0.65);
    border-radius: 18px;
}

.scroll-cue .scroll-dot {
    width: 4px;
    height: 8px;
    margin: 0;
    position: absolute;
    top: 9px;
    background: var(--gold);
    border-radius: 4px;
    animation: scrollDot 1.7s ease-in-out infinite;
}

.scroll-cue small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 1050px) {
    .header {
        grid-template-columns: 1fr auto;
    }

    .hero-watermark {
        width: 520px;
        height: 520px;
    }

    .ring-one {
        width: 520px;
        height: 520px;
    }

    .ring-two {
        width: 690px;
        height: 690px;
    }

    .ring-three {
        width: 850px;
        height: 850px;
    }
}

@media (max-width: 700px) {
    .header {
        height: 66px;
        padding: 0 5%;
    }

    .brand-symbol {
        width: 26px;
        height: 38px;
    }

    .brand-name {
        font-size: 10.5px;
        letter-spacing: 2.2px;
    }

    .hero {
        min-height: 100svh;
        padding: 100px 5% 82px;
    }

    .hero-content {
        margin-top: 0;
    }

    .hero-watermark {
        width: 390px;
        height: 390px;
        opacity: 0.065;
    }

    .ring-one {
        width: 360px;
        height: 360px;
    }

    .ring-two {
        width: 500px;
        height: 500px;
    }

    .ring-three {
        width: 640px;
        height: 640px;
    }

    .hero-eyebrow {
        max-width: 320px;
        margin-bottom: 22px;
        font-size: 9px;
        line-height: 1.8;
        letter-spacing: 2.5px;
    }

    .hero-title {
        font-size: clamp(58px, 18vw, 82px);
        line-height: 0.9;
        letter-spacing: -2px;
    }

    .hero-description {
        margin-top: 27px;
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
        min-width: 0;
    }

    .scroll-cue {
        bottom: 10px;
    }
}


/* =========================================================
   RETOQUES FINALES V4
   1) Logo del fondo más grande
   2) Tarjetas del proceso con movimiento y más personalidad
========================================================= */

/* LOGO DE FONDO MÁS GRANDE */
.hero-watermark {
    width: min(760px, 60vw) !important;
    height: min(760px, 60vw) !important;
    opacity: 0.085 !important;
    transform: translate(-50%, -48%) scale(1.08) !important;
}

.ring-one {
    width: min(650px, 58vw) !important;
    height: min(650px, 58vw) !important;
}

.ring-two {
    width: min(880px, 74vw) !important;
    height: min(880px, 74vw) !important;
}

.ring-three {
    width: min(1080px, 88vw) !important;
    height: min(1080px, 88vw) !important;
}


/* TARJETAS DEL PROCESO */
.process-card {
    position: relative;
    overflow: hidden;
    cursor: default;

    transition:
        transform 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

.process-card::before {
    content: "";
    width: 0;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    background: #9a7426;

    transition: width 0.35s ease;
}

.process-card::after {
    content: "→";
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;

    position: absolute;
    left: 28px;
    bottom: 26px;

    color: #111;
    border: 1px solid rgba(112, 88, 38, 0.55);
    border-radius: 50%;

    font-size: 19px;

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}

.process-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.10);
}

.process-card:hover::before {
    width: 100%;
}

.process-card:hover::after {
    opacity: 1;
    transform: translateY(0);
    color: #f7f3e8;
    background: #8d6b27;
}

.process-card > span {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.process-card h3 {
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.process-card p {
    padding-bottom: 58px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.process-card:hover > span {
    color: #8a6826;
    transform: translateX(5px);
}

.process-card:hover h3 {
    color: #6e511c;
    transform: translateX(7px);
}

.process-card:hover p {
    color: rgba(10, 10, 10, 0.72);
    transform: translateX(7px);
}


/* MÓVIL */
@media (max-width: 700px) {
    .hero-watermark {
        width: 470px !important;
        height: 470px !important;
    }

    .ring-one {
        width: 410px !important;
        height: 410px !important;
    }

    .ring-two {
        width: 560px !important;
        height: 560px !important;
    }

    .ring-three {
        width: 720px !important;
        height: 720px !important;
    }

    .process-card {
        min-height: 290px;
    }

    .process-card::after {
        opacity: 1;
        transform: translateY(0);
    }
}