/* ORIGIN BRANDS v2 — Montserrat + espacios de imagen, sobre Bootstrap 5.3
   Colores conservados: azul marino #182C46 y champagne/dorado. Ajusta las variables si tu tono exacto difiere. */
:root{
  --navy:#182C46;
  --navy-deep:#0F1D30;
  --navy-soft:#223A5C;
  --gold:#C9A66B;
  --gold-light:#E3CFA5;
  --blue:#25507F;
  --ivory:#F7F3EC;
  --ink:#16202E;
  --muted:#5B6676;
  --line:rgba(24,44,70,.14);
  --line-light:rgba(227,207,165,.22);

  --font-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--ink);
  --bs-body-bg:#fff;
  --header-h:76px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--font-body);font-size:1rem;line-height:1.75;font-weight:400;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt"}
.wrap{max-width:1180px;--bs-gutter-x:3rem;padding-inline:1.5rem}

/* ---------- Tipografía ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;color:inherit;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:700}
h1 span,h2 span{color:var(--gold);font-weight:300}
h2{font-size:clamp(1.85rem,3.8vw,3rem);line-height:1.12}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;letter-spacing:-.015em}
p{text-wrap:pretty}
.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:1.25rem;display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor;opacity:.7}
.eyebrow.light{color:var(--gold)}
.small-label{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:.9rem}
.tags{font-size:.7rem;font-weight:600;letter-spacing:.18em;color:var(--gold)}

/* ---------- Accesibilidad ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy);padding:.75rem 1rem;z-index:2000;font-weight:600;border-radius:0 0 .5rem 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- Header / navbar ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:1030;transition:background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.header .navbar{min-height:var(--header-h);padding:0;transition:min-height .35s ease}
.header.is-scrolled{background:rgba(24,44,70,.92);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);box-shadow:0 1px 0 var(--line-light)}
.header.is-scrolled .navbar{min-height:62px}
.brand img{display:block;height:auto;width:clamp(150px,18vw,200px)}
.navbar-nav .nav-link{font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);padding:.5rem 0;position:relative;transition:color .25s}
.navbar-nav .nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:.15rem;height:1px;background:var(--gold);transition:right .3s ease}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--gold-light)}
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after{right:0}
.nav-contact{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:.75rem 1.25rem;border-radius:999px;text-decoration:none;transition:background .25s,transform .25s}
.nav-contact:hover{background:var(--gold-light);color:var(--navy);transform:translateY(-1px)}

.menu-toggle{border:1px solid var(--line-light);border-radius:999px;padding:.5rem 1rem;display:inline-flex;align-items:center;gap:.7rem;color:var(--gold-light);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.menu-toggle:focus{box-shadow:none}
.menu-lines{width:18px;height:10px;position:relative;display:inline-block}
.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s,top .3s}
.menu-lines::before{top:0}.menu-lines::after{top:8px}
.menu-toggle[aria-expanded="true"] .menu-lines::before{top:4px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after{top:4px;transform:rotate(-45deg)}
@media (max-width:991.98px){
  .header .navbar-collapse{background:var(--navy);margin:0 -.75rem;padding:1.25rem 1.5rem 1.75rem;border-top:1px solid var(--line-light)}
  .navbar-nav .nav-link{padding:.85rem 0;font-size:.9rem;border-bottom:1px solid var(--line-light)}
  .navbar-nav .nav-link::after{display:none}
  .nav-contact{margin-top:1.25rem;justify-content:center;width:100%}
  .header{background:var(--navy)}
}

/* ---------- Botones y enlaces ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:1rem 1.75rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s}
.button:hover{transform:translateY(-2px)}
.button.gold{background:var(--gold);color:var(--navy)}
.button.gold:hover{background:var(--gold-light);box-shadow:0 10px 30px -10px rgba(201,166,107,.6)}
.button.blue{background:var(--blue);color:#fff}
.button.blue:hover{background:var(--navy);color:#fff;box-shadow:0 10px 30px -12px rgba(24,44,70,.6)}
.button.outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.button.outline:hover{background:var(--navy);color:#fff}
.text-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.2rem;transition:color .25s,border-color .25s,gap .25s}
.text-link:hover{color:var(--gold);border-color:var(--gold);gap:.8rem}
.text-link.dark{color:var(--blue)}
.text-link.dark:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- Secciones ---------- */
.section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.section.white{background:#fff}
.section.navy{background:var(--navy);color:#fff}
.section.process{background:var(--ivory)}
.section-heading{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:760px}
.section-heading h2{margin:0}

/* Hero */
.hero{background:radial-gradient(1100px 520px at 85% 8%,rgba(201,166,107,.16),transparent 60%),linear-gradient(165deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-soft) 100%);color:#fff;min-height:100svh;display:flex;align-items:stretch;padding:calc(var(--header-h) + 2rem) 0 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(227,207,165,.05) 119px 120px);pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column}
.hero-row{flex:1;padding:2rem 0 3rem}
.hero h1{margin:0 0 1.75rem}
.hero-copy{line-height:1.7;color:rgba(255,255,255,.8);max-width:36rem;margin-bottom:2.5rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.25rem}
.hero-bottom{padding:1.5rem 0 2rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(227,207,165,.85)}
@media (min-width:992px){.hero .media{max-height:68svh;margin-left:auto;max-width:440px}}

/* Nosotros */
.intro{margin-bottom:clamp(3rem,6vw,5rem)}
.intro p{font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.75;color:var(--muted);margin:0}
.intro .col-lg-6:first-child p{color:var(--ink)}
.routes article{background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,border-color .35s}
.routes article:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 28px 50px -30px rgba(24,44,70,.35)}
.routes article h3{margin:0 0 .85rem;color:var(--navy);font-size:clamp(1.3rem,1.9vw,1.55rem)}
.routes article p{color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:1.75rem}
.routes article .text-link{margin-top:auto;align-self:flex-start}
.route-body{padding:1.75rem 2rem 2.25rem;display:flex;flex-direction:column;flex:1}

/* Soluciones / acordeón */
.services-heading{position:sticky;top:calc(var(--header-h) + 2rem)}
.services-heading h2{margin-bottom:1.5rem;color:#fff}
.services-heading p{color:rgba(255,255,255,.75);font-size:1.05rem;line-height:1.75;margin-bottom:2rem}
.services.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--line-light);--bs-accordion-border-radius:0;--bs-accordion-inner-border-radius:0;--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:#fff;--bs-accordion-btn-padding-x:0;--bs-accordion-body-padding-x:0}
.services .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--line-light);color:#fff}
.services .accordion-item:first-child{border-top:1px solid var(--line-light)}
.services .accordion-header{margin:0}
.services .accordion-button{background:transparent;color:#fff;box-shadow:none;padding:1.6rem 0;gap:1.5rem;align-items:baseline;transition:color .25s,padding-left .3s}
.services .accordion-button:hover{color:var(--gold-light);padding-left:.5rem}
.services .accordion-button::after{background-image:none;content:"+";font-family:var(--font-body);font-weight:300;font-size:1.9rem;line-height:1;color:var(--gold);width:auto;height:auto;margin-left:auto;transform:none;transition:transform .3s}
.services .accordion-button:not(.collapsed)::after{content:"+";transform:rotate(45deg)}
.service-number{font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--gold);min-width:2rem}
.service-title{font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.services .detail{padding:0 0 1.9rem 3.5rem}
.services .detail p{color:rgba(255,255,255,.78);font-size:1.02rem;line-height:1.75;max-width:38rem;margin-bottom:1rem}
.services .detail .tags{margin:0}
@media (max-width:991.98px){.services-heading{position:static}.services .detail{padding-left:0}}

/* Proceso */
.process-grid article{background:#fff;border-radius:1.25rem;padding:2rem 1.75rem;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.process-grid article::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(.25);transform-origin:left;transition:transform .5s ease}
.process-grid article:hover{transform:translateY(-5px);box-shadow:0 26px 44px -30px rgba(24,44,70,.4)}
.process-grid article:hover::before{transform:scaleX(1)}
.process-grid article>span{font-family:var(--font-display);font-size:2.6rem;line-height:1;font-weight:300;letter-spacing:-.04em;color:var(--gold);display:block;margin-bottom:1.1rem}
.process-grid h3{color:var(--navy);margin-bottom:.8rem;font-size:1.3rem}
.process-grid p{color:var(--muted);font-size:.98rem;line-height:1.65}
.deliverable{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px dashed var(--line);color:var(--navy)!important;font-size:.92rem!important}
.deliverable strong{font-weight:600;letter-spacing:.04em}

/* Contacto */
.contact-layout h2{color:var(--navy);margin-bottom:1.5rem}
.section-copy{font-size:1.1rem;line-height:1.75;color:var(--muted);max-width:28rem}
#project-form{background:var(--ivory);border:1px solid var(--line);border-radius:1.5rem;padding:clamp(1.5rem,3.5vw,2.75rem);margin:0}
.form-label{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.55rem}
.optional{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.form-control,.form-select{font-family:var(--font-body);font-size:1rem;color:var(--ink);background-color:#fff;border:1px solid rgba(24,44,70,.2);border-radius:.75rem;padding:.9rem 1rem;transition:border-color .2s,box-shadow .2s}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .25rem rgba(37,80,127,.14)}
.form-control::placeholder{color:#8590a0}
.form-help{font-size:.9rem;color:var(--muted);margin:1.1rem 0 .4rem;line-height:1.6}
.direct-contact{font-size:.9rem;color:var(--muted);margin:0}
.direct-contact a{color:var(--blue);font-weight:500;text-underline-offset:3px}
.direct-contact a:hover{color:var(--navy)}
.brief-result{background:#fff;border:1px solid var(--gold);border-radius:1rem;padding:1.5rem}
.brief-result h3{color:var(--navy);font-size:1.35rem}
.brief-result textarea{font-size:.92rem;line-height:1.6;background:var(--ivory)}
.brief-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.brief-actions .button{padding:.8rem 1.25rem}
#brief-status{margin:.9rem 0 0;font-size:.9rem;color:var(--blue);min-height:1.4em}

/* Footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.8);padding:clamp(3rem,6vw,5rem) 0 2rem}
.footer-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line-light)}
.footer-top p{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.35;font-weight:300;color:var(--gold-light);margin:0;text-align:right}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.footer-bottom a{color:var(--gold-light);text-decoration:none;transition:color .25s}
.footer-bottom a:hover{color:var(--gold)}
@media (max-width:575.98px){.footer-top p{text-align:left}}

/* ---------- Animación de entrada ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- Espacios de imagen ----------
   Mientras no exista la foto se ve un bloque de color de la marca.
   Al activar el <img> (ver instrucciones en index-v2.html) la cubre por completo. */
.media{position:relative;margin:0;width:100%;aspect-ratio:var(--ratio,4/3);border-radius:1.25rem;overflow:hidden;
  background:
    radial-gradient(70% 60% at 80% 15%,rgba(201,166,107,.35),transparent 65%),
    linear-gradient(150deg,var(--navy-soft),var(--navy) 55%,var(--navy-deep));
  box-shadow:0 30px 60px -38px rgba(15,29,48,.55)}
.media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(227,207,165,.35);border-radius:calc(1.25rem - 10px);pointer-events:none}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.media:has(img)::after{display:none}
.media-light{background:
    radial-gradient(70% 60% at 20% 20%,rgba(201,166,107,.35),transparent 65%),
    linear-gradient(150deg,#fff,var(--ivory) 55%,var(--gold-light))}
.media-light::after{border-color:rgba(24,44,70,.2)}
.media-wide{margin-bottom:clamp(2.5rem,5vw,4rem)}
.media-wide.media{border-radius:1.5rem}
.media-card{border-radius:0;box-shadow:none}
.media-card::after{border-radius:0;inset:12px}
.media-side{margin-top:2.5rem}
@media (max-width:767.98px){.media-wide{--ratio:16/9!important}}
@media (max-width:991.98px){.media-side{max-width:520px}}