/* ==========================================================================
   Landing Agar Class — Mobiliario contract a medida
   Estilos encapsulados bajo .landing-agarclass para no chocar con Bootstrap
   ni con los estilos globales del tema.
   ========================================================================== */

.landing-agarclass{
    --bg: #faf7f2;
    --bg-soft: #f2ede4;
    --ink: #0b0b0b;
    --ink-2: #2a2824;
    --ink-3: #6b6760;
    --line: #e6dfd2;
    --line-2: #d9d1bf;
    --accent: #b08a52;
    --dark: #0b0b0b;
    --dark-2: #141311;
    --display: "Cormorant Garamond", "Adobe Caslon Pro", "Garamond", serif;
    --sans: "Inter", -apple-system, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.landing-agarclass *{ box-sizing:border-box; margin:0; padding:0; }
.landing-agarclass a{ color:inherit; text-decoration:none; }
.landing-agarclass img{ max-width:100%; display:block; }
.landing-agarclass button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
.landing-agarclass input,
.landing-agarclass select,
.landing-agarclass textarea{ font-family:inherit; font-size:inherit; color:inherit; }

.landing-agarclass .container{ max-width:1320px; margin:0 auto; padding: 0 40px; }
@media (max-width: 760px){ .landing-agarclass .container{ padding:0 22px; } }

/* ========== HERO ========== */
.landing-agarclass .hero{
    position:relative;
    min-height: 760px;
    background: var(--bg);
    overflow:hidden;
}
.landing-agarclass .hero-media{
    position:absolute; inset:0;
    background-image:url(/images/landing-bg-hero.webp) !important;
    background: linear-gradient(180deg, rgba(11,11,11,.18) 0%, rgba(11,11,11,.05) 35%, rgba(11,11,11,.55) 100%),
                repeating-linear-gradient(135deg, #2a2824 0 2px, #1f1d1a 2px 14px);
}
.landing-agarclass .hero-media::after{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family: var(--mono); font-size:11px; letter-spacing:.12em;
    color: rgba(255,255,255,.6);
    background: rgba(0,0,0,.35); padding: 8px 14px; border: 1px solid rgba(255,255,255,.15);
}
.landing-agarclass .hero-inner{
    position:relative;
    padding: 90px 40px 110px;
    display:grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 60px;
    align-items:end;
    max-width:1400px; margin:0 auto;
    min-height: 760px;
}
.landing-agarclass .hero-copy{ color:#fff; max-width: 640px; align-self:center; }
.landing-agarclass .hero-eyebrow{
    font-family: var(--mono); font-size:11px; letter-spacing: .28em; text-transform:uppercase;
    color: rgba(255,255,255,.8); margin-bottom: 24px;
    display:inline-flex; align-items:center; gap:12px;
}
.landing-agarclass .hero-eyebrow::before{ content:""; width:28px; height:1px; background: var(--accent); display:inline-block; }
.landing-agarclass .hero h1{
    color: white;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(42px, 5.4vw, 82px);
    line-height: 1.02;
    letter-spacing: -.01em;
    margin-bottom: 26px;
    text-wrap: balance;
}
.landing-agarclass .hero h1 em{
    font-style: italic; color: var(--accent); font-weight:300;
}
.landing-agarclass .hero-sub{
    font-size: 17px;
    line-height: 1.6;
    max-width: 540px;
    color: rgba(255,255,255,.86);
    font-weight: 300;
}
.landing-agarclass .hero-meta{
    margin-top: 42px;
    display:flex; gap:40px;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 22px;
}
.landing-agarclass .hero-meta .item .k{ font-family: var(--display); font-size: 34px; color:#fff; font-weight:400; line-height:1; }
.landing-agarclass .hero-meta .item .l{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.65); margin-top:6px; }

/* ========== FORM CARD ========== */
.landing-agarclass .form-card{
    background: #fff;
    padding: 36px 34px 30px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.5), 0 20px 40px -20px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.15);
    max-width: 440px;
    justify-self: end;
    align-self: center;
    position:relative;
}
.landing-agarclass .form-card::before{
    content:""; position:absolute; top:-1px; left:-1px; width: 60px; height:1px; background: var(--accent);
}
.landing-agarclass .form-eyebrow{
    font-family: var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
    color: var(--accent); margin-bottom: 10px;
}
.landing-agarclass .form-card h3{
    font-family: var(--display); font-weight:400; font-size: 30px; line-height:1.15; letter-spacing:-.005em;
    margin-bottom: 8px;
}
.landing-agarclass .form-card .sub{ font-size: 13px; color: var(--ink-3); margin-bottom: 24px; line-height:1.55; }
.landing-agarclass .field{ margin-bottom: 14px; }
.landing-agarclass .field label{
    display:block; font-size: 10px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-3);
    margin-bottom: 6px;
}
.landing-agarclass .field input {
    border-radius: 0;
}
.landing-agarclass .field input,
.landing-agarclass .field select,
.landing-agarclass .field textarea{
    width:100%; border:0; border-bottom:1px solid var(--line-2);
    padding: 8px 0 10px; background:transparent;
    font-size: 15px; color: var(--ink);
    outline: none; transition: border-color .2s;
}
.landing-agarclass .field input:focus,
.landing-agarclass .field select:focus,
.landing-agarclass .field textarea:focus{ border-color: var(--accent); }
.landing-agarclass .field textarea{ resize:none; min-height: 56px; padding-top: 10px; }
.landing-agarclass .field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 12px) 16px, calc(100% - 7px) 16px; background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; }
.landing-agarclass .row-2{ display:grid; grid-template-columns:1fr 1fr; gap: 16px; }
.landing-agarclass .submit{
    margin-top: 18px;
    width:100%; background: var(--ink); color:#fff;
    padding: 16px 18px; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    transition: background .2s, transform .15s;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.landing-agarclass .submit:hover{ background: var(--accent); }
.landing-agarclass .submit .arrow{ transition: transform .2s; }
.landing-agarclass .submit:hover .arrow{ transform: translateX(4px); }
.landing-agarclass .legal{ font-size: 10px; color: var(--ink-3); margin-top: 12px; letter-spacing:.02em; line-height:1.5; }
.landing-agarclass .legal a{ text-decoration: underline; text-underline-offset: 2px; }

.landing-agarclass .hidden-field{ display:none; }

@media (max-width: 1040px){
    .landing-agarclass .hero-inner{ grid-template-columns:1fr; gap:40px; padding: 70px 24px 80px; min-height: unset; }
    .landing-agarclass .form-card{ justify-self: stretch; max-width:none; }
    .landing-agarclass .hero-copy{ max-width:none; }
}

/* Asterisco de campo obligatorio */
.landing-agarclass .field label .req{
    color: var(--accent);
    font-weight: 600;
    margin-left: 2px;
}

/* Honeypot anti-spam: off-screen en lugar de display:none para mejor sigilo frente a bots */
.landing-agarclass .hp{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.landing-agarclass .form-error{
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(154,61,44,.08);
    border-left: 2px solid #9a3d2c;
    color: #9a3d2c;
    font-size: 12px;
    line-height: 1.5;
}

/* ========== SECTION FRAME ========== */
.landing-agarclass section{ padding: 120px 0; }
.landing-agarclass .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom: 64px; }
.landing-agarclass .sec-head .left{ max-width: 680px; }
.landing-agarclass .eyebrow{
    font-family: var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color: var(--accent); margin-bottom: 18px;
    display:inline-flex; align-items:center; gap:12px;
}
.landing-agarclass .eyebrow::before{ content:""; width:26px; height:1px; background: var(--accent); }
.landing-agarclass h2{
    font-family: var(--display); font-weight:300;
    font-size: clamp(36px, 4.2vw, 58px);
    line-height: 1.05; letter-spacing:-.005em;
    color: var(--ink);
    text-wrap: balance;
}
.landing-agarclass h2 em{ font-style: italic; color: var(--accent); font-weight:300; }
.landing-agarclass .sec-head .right{ max-width: 360px; color: var(--ink-3); font-size: 15px; line-height:1.65; font-weight:300; }
@media (max-width: 820px){
    .landing-agarclass .sec-head{ flex-direction:column; align-items:flex-start; margin-bottom:44px; }
    .landing-agarclass section{ padding: 80px 0; }
}

/* ========== VALUES ========== */
.landing-agarclass .values{ background: var(--bg); }
.landing-agarclass .values-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--line);
}
.landing-agarclass .value{
    padding: 40px 30px 44px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position:relative;
}
.landing-agarclass .value:last-child{ border-right:0; }
.landing-agarclass .value .num{
    font-family: var(--mono); font-size:10px; letter-spacing:.24em; color: var(--ink-3);
    margin-bottom: 32px;
}
.landing-agarclass .value .ico{
    width: 44px; height: 44px; margin-bottom: 24px; color: var(--ink-2);
}
.landing-agarclass .value h3{
    font-family: var(--display); font-weight:400; font-size: 24px; line-height:1.2;
    margin-bottom: 10px; letter-spacing:-.005em;
}
.landing-agarclass .value p{ font-size: 14px; line-height:1.65; color: var(--ink-3); font-weight:300; }
@media (max-width: 980px){
    .landing-agarclass .values-grid{ grid-template-columns: 1fr 1fr; }
    .landing-agarclass .value:nth-child(2){ border-right:0; }
    .landing-agarclass .value:nth-child(1),
    .landing-agarclass .value:nth-child(2){ border-bottom:1px solid var(--line); }
}
@media (max-width: 600px){
    .landing-agarclass .values-grid{ grid-template-columns: 1fr; }
    .landing-agarclass .value{ border-right:0 !important; }
}

/* ========== GALLERY ========== */
.landing-agarclass .gallery{ background: var(--bg-soft); }
.landing-agarclass .gallery-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.landing-agarclass .gallery-grid .tile{
    display:block;
    aspect-ratio: 1 / 1;
    overflow:hidden;
    position:relative;
    background: #1a1816;
    cursor: zoom-in;
}
.landing-agarclass .gallery-grid .tile img{
    width:100%; height:100%;
    object-fit: cover;
    transition: transform .5s ease, opacity .3s;
}
.landing-agarclass .gallery-grid .tile:hover img{ transform: scale(1.04); opacity:.92; }
@media (max-width: 1040px){
    .landing-agarclass .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
    .landing-agarclass .gallery-grid{ grid-template-columns: 1fr; gap: 10px; }
}

/* ========== LIGHTBOX (fuera del wrapper .landing-agarclass) ========== */
.landing-lightbox{
    position: fixed; inset: 0;
    background: rgba(11,11,11,.94);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 60px 80px;
}
.landing-lightbox[aria-hidden="false"]{ display: flex; }
.landing-lightbox .lb-figure{
    margin: 0;
    max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.landing-lightbox .lb-img{
    max-width: 100%; max-height: calc(100vh - 140px);
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.landing-lightbox .lb-caption{
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: .2em;
    color: rgba(255,255,255,.7);
    text-align: center;
}
.landing-lightbox button{
    position: absolute;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    font-size: 28px; line-height: 1;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.landing-lightbox button:hover{ background: rgba(176,138,82,.6); border-color: #b08a52; }
.landing-lightbox .lb-close{ top: 20px; right: 20px; }
.landing-lightbox .lb-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.landing-lightbox .lb-next{ right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px){
    .landing-lightbox{ padding: 50px 12px; }
    .landing-lightbox button{ width: 40px; height: 40px; font-size: 22px; }
    .landing-lightbox .lb-prev{ left: 10px; }
    .landing-lightbox .lb-next{ right: 10px; }
    .landing-lightbox .lb-close{ top: 10px; right: 10px; }
}

/* ========== DIFERENCIACIÓN (dark) ========== */
.landing-agarclass .diff{
    background: var(--dark);
    color: #e8e4dd;
    padding: 130px 0;
}
.landing-agarclass .diff h2{ color:#fff; }
.landing-agarclass .diff h2 em{ color: var(--accent); }
.landing-agarclass .diff-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 60px;
}
.landing-agarclass .compare{
    border-top: 1px solid rgba(255,255,255,.14);
}
.landing-agarclass .compare .head{
    padding: 20px 0 16px;
    font-family: var(--mono); font-size: 16px; letter-spacing:.2em; text-transform:uppercase;
    color: rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.landing-agarclass .compare.agar .head{
    color: var(--accent);
    font-size: 16px;
}
.landing-agarclass .compare .row{
    display: block !important;
    margin: 0; /* anula los márgenes negativos de gutter de Bootstrap .row */
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display:flex; gap:16px; align-items:flex-start;
    font-size:15px; line-height:1.55; font-weight:300;
}
.landing-agarclass .compare .row .mk{
    flex:0 0 20px; margin-top: 4px;
}
.landing-agarclass .compare.std .row{ color: rgba(255,255,255,.45); }
.landing-agarclass .compare.std .mk
{
    color: rgba(255,255,255,.25);
    padding-right: 10px;
}
.landing-agarclass .compare.agar .row{ color: #f1ece2; }
.landing-agarclass .compare.agar .mk
{
    color: var(--accent);
    padding-right: 10px;
}
@media (max-width: 820px){
    .landing-agarclass .diff-grid{ grid-template-columns: 1fr; gap:40px; }
    .landing-agarclass .diff{ padding: 80px 0; }
}

/* ========== PROCESS ========== */
.landing-agarclass .process{ background: var(--bg); }
.landing-agarclass .process-grid{
    display:grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.landing-agarclass .step{
    padding: 50px 30px 50px 0;
    border-right: 1px solid var(--line);
    position:relative;
}
.landing-agarclass .step:last-child{ border-right:0; padding-right:30px; }
.landing-agarclass .step:not(:first-child){ padding-left: 30px; }
@media (max-width: 900px){
    .landing-agarclass .step:not(:first-child){ padding-left: 0px !important; }
}
.landing-agarclass .step .n{
    font-family: var(--display); font-size: 68px; font-weight:300;
    color: var(--accent); line-height: 1; margin-bottom: 24px;
    font-style: italic;
}
.landing-agarclass .step h3{
    font-family: var(--display); font-weight:400; font-size: 22px; line-height:1.2;
    margin-bottom: 10px;
}
.landing-agarclass .step p{ font-size: 14px; line-height:1.65; color: var(--ink-3); font-weight:300; }
.landing-agarclass .step .dur{
    font-family: var(--mono); font-size:16px; letter-spacing:.2em; color: var(--ink-3);
    margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}
@media (max-width: 900px){
    .landing-agarclass .process-grid{ grid-template-columns: 1fr 1fr; }
    .landing-agarclass .step{ border-right:0; }
    .landing-agarclass .step:nth-child(odd){ border-right: 1px solid var(--line); }
}
@media (max-width: 560px){
    .landing-agarclass .process-grid{ grid-template-columns: 1fr; }
    .landing-agarclass .step{ border-right:0 !important; border-bottom: 1px solid var(--line); }
}

/* ========== CTA / CLOSING ========== */
.landing-agarclass .closing{
    background: var(--bg-soft);
    padding: 140px 0;
    position:relative;
    overflow:hidden;
}
.landing-agarclass .closing::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(176,138,82,.08) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(176,138,82,.05) 0%, transparent 50%);
}
.landing-agarclass .closing-inner{
    position:relative;
    display:grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items:center;
}
.landing-agarclass .closing h2{ font-size: clamp(40px, 4.8vw, 68px); }
.landing-agarclass .closing p{ font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-top: 24px; max-width: 520px; font-weight:300; }
.landing-agarclass .closing .form-card{ max-width:none; }
@media (max-width: 980px){
    .landing-agarclass .closing-inner{ grid-template-columns: 1fr; gap: 50px; }
    .landing-agarclass .closing{ padding: 80px 0; }
}

/* ========== TRUST BAR ========== */
.landing-agarclass .trustbar{
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
}
.landing-agarclass .trustbar-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:30px;
    align-items:center;
}
.landing-agarclass .trust-item{
    display:flex; align-items:center; gap: 16px; justify-content:center;
    text-align:center;
}
.landing-agarclass .trust-item svg{ width:36px; height:36px; stroke:var(--accent); stroke-width:1.2; fill:none; }
.landing-agarclass .trust-item .t{ font-family: var(--display); font-size:19px; font-weight:400; }
.landing-agarclass .trust-item .s{ font-size:12px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 780px){ .landing-agarclass .trustbar-grid{ grid-template-columns: 1fr 1fr; gap:24px; } }

/* ========== SUCCESS STATE ========== */
.landing-agarclass .success{
    text-align:center; padding: 20px 0 10px;
}
.landing-agarclass .success .check{
    width: 54px; height:54px; border-radius:50%; border:1px solid var(--accent);
    display:grid; place-items:center; margin: 0 auto 18px;
}
.landing-agarclass .success .check svg{ width:22px; height:22px; stroke: var(--accent); stroke-width:1.5; fill:none; }
.landing-agarclass .success h4{ font-family: var(--display); font-size: 24px; font-weight:400; margin-bottom: 6px; }
.landing-agarclass .success p{ font-size: 13px; color: var(--ink-3); }