/* =========================
   Fuentes
========================= */
@font-face{font-family:"Abhaya Libre";src:local("Abhaya Libre Regular"),local("AbhayaLibre-Regular"),url("/assets/fonts/AbhayaLibre-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Abhaya Libre";src:local("Abhaya Libre SemiBold"),local("AbhayaLibre-SemiBold"),url("/assets/fonts/AbhayaLibre-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Abhaya Libre";src:local("Abhaya Libre ExtraBold"),local("AbhayaLibre-ExtraBold"),url("/assets/fonts/AbhayaLibre-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

/* =========================
   Variables & base
========================= */
:root{
  --gold:#c5a147; --text:#111; --container-w:1100px;

  /* Header / Logo — compacto */
  --logo-h-min:86px; --logo-h-vw:5.6vw; --logo-h-max:104px; --header-pad-y:4px;
  --header-h: calc(clamp(var(--logo-h-min),var(--logo-h-vw),var(--logo-h-max)) + (var(--header-pad-y)*2));

  /* Escala títulos */
  --h2-min:34px; --h2-vw:4.2vw; --h2-max:56px;
  --intro-min:16px; --intro-vw:1.6vw; --intro-max:20px;

  /* Preloader logo */
  --logo-min:280px; --logo-vw:30vw; --logo-max:680px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}
h1,h2,h3,.overline{ font-family:"Abhaya Libre", serif }
h1{ font-weight:800 }
h2{ font-weight:800 }
h3{ font-weight:600 }
section[id]{ scroll-margin-top: calc(var(--header-h) + 16px) }

/* =========================
   Preloader
========================= */
body.preloader-active{ overflow:hidden }
#preloader{
  position:fixed; inset:0; z-index:11000; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; transition:opacity .5s ease;
}
.preloader-logo img{
  width:clamp(var(--logo-min),var(--logo-vw),var(--logo-max));
  height:auto; display:block; object-fit:contain;
}
.preloader-bar-container{
  width:min(460px,86vw); height:10px; background:rgba(0,0,0,.1);
  border-radius:5px; overflow:hidden;
}
.preloader-bar{ height:100%; width:0%; background:var(--gold); transition:width .08s linear }

/* =========================
   Header
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);
  min-height:var(--header-h);
}
.header-inner{
  max-width:var(--container-w); margin:0 auto;
  padding:var(--header-pad-y) 16px;
  display:grid; align-items:center;
  grid-template-columns:1fr auto 1fr; column-gap:12px;
}
.brand{ grid-column:2; justify-self:center; line-height:0 }
.brand img{ height:clamp(var(--logo-h-min),var(--logo-h-vw),var(--logo-h-max)); width:auto; display:block }

.menu-toggle{
  grid-column:3; justify-self:end;
  background:none; border:0; padding:6px; margin:-6px;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
}
.menu-toggle img{ height:28px; width:auto; display:block }

/* Nav opcional (no visible por ahora) */
.primary-nav{ display:none }
.primary-nav ul{ list-style:none; padding:0; margin:0 }
.primary-nav a{ text-decoration:none; color:inherit; padding:6px 4px; display:inline-block }
.primary-nav a:focus-visible, .primary-nav a:hover{ text-decoration:underline }

@media (max-width:899px){
  .primary-nav{
    position:fixed; left:0; right:0; top:calc(var(--header-h) + 1px);
    background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.12);
    padding:16px;
  }
  .primary-nav ul{ display:grid; gap:14px }
}
@media (min-width:900px){
  .menu-toggle{ display:none }
  .header-inner{ grid-template-rows:auto auto; row-gap:6px }
  .primary-nav{
    display:block !important; position:static; box-shadow:none; padding:0;
    grid-column:1 / -1; grid-row:2;
  }
  .primary-nav ul{ display:flex; gap:32px; align-items:center; justify-content:center }
  section[id]{ scroll-margin-top: calc(var(--header-h) + 36px) }
}
.site-header[data-open="true"] .primary-nav{ display:block }

/* =========================
   Hero
========================= */
.hero{ position:relative; height:100vh; min-height:560px; overflow:hidden }
.hero-media{ position:absolute; inset:0 }
.hero-media video, .hero-media .fallback-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.fallback-img{ display:none }

.hero-content{
  position:relative; z-index:1; text-align:center; color:#fff;
  top:50%; transform:translateY(-50%);
  background:transparent !important; backdrop-filter:none !important; box-shadow:none !important;
  max-width:min(1100px,92vw); margin:0 auto; padding:0 8px;
}
.hero h1{
  margin:0 0 12px; font-weight:800; line-height:1.15; letter-spacing:.2px;
  font-size:clamp(28px,5.2vw,64px);
  text-shadow:0 2px 18px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.28);
}
.hero .hero-tagline{
  margin:0; font-weight:400; font-size:clamp(15px,1.4vw,22px); line-height:1.6; opacity:.92;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}

/* =========================
   Secciones y títulos
========================= */
.separador{ height:30px; background:var(--gold) }
.bloque{ padding:60px 20px; max-width:var(--container-w); margin:0 auto }
.bloque header{ margin-bottom:12px }
.section-intro{ margin:6px 0 0 }

.bloque{ padding-top:max(70px,6vw) }
.bloque>header h2{
  font-weight:800;
  font-size:clamp(var(--h2-min),var(--h2-vw),var(--h2-max));
  line-height:1.1; letter-spacing:-.01em;
  margin:0 0 18px; position:relative;
}
.bloque>header h2::after{
  content:""; display:block; width:72px; height:4px; margin-top:14px;
  background:var(--gold); border-radius:2px;
}
.bloque>header .section-intro{
  font-size:clamp(var(--intro-min),var(--intro-vw),var(--intro-max));
  color:#333; opacity:.95; line-height:1.6; margin-top:10px; max-width:70ch;
}
@media (max-width:640px){
  .bloque>header{ text-align:center }
  .bloque>header h2::after{ margin-left:auto; margin-right:auto }
  .bloque>header .section-intro{ margin-left:auto; margin-right:auto }
}

/* =========================
   Carrusel de marcas
========================= */
#marcas .brands-carousel{ position:relative; max-width:var(--container-w); margin:0 auto }
#marcas .brands-viewport{
  position:relative; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-inline:0; scroll-padding-inline:0;
  contain:paint; isolation:isolate;
}
#marcas .brands-viewport::-webkit-scrollbar{ display:none }

#marcas .brands-track{
  display:flex; align-items:stretch; gap:24px;
  padding:8px 8px 4px; margin:0; list-style:none; will-change:transform;
}
#marcas .brands-track>li{
  flex:0 0 clamp(280px,28vw,360px);
  scroll-snap-align:center;
  cursor:pointer;
}

/* Card */
#marcas .brand-figure{
  height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:20px 16px;
  background:#fff; border-radius:16px;
  border:1px solid rgba(17,17,17,.06);
  box-shadow:0 8px 24px rgba(17,17,17,.06);
  transform:translateZ(0); backface-visibility:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
#marcas .brand-figure:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(17,17,17,.10);
  border-color:rgba(17,17,17,.12);
}
#marcas .brand-logo{ height:clamp(56px,7vw,92px); max-width:260px; width:auto; object-fit:contain }
#marcas .brand-figure h3{ margin:8px 0 6px; font-weight:700; letter-spacing:.2px }
#marcas .brand-desc{ margin:0; opacity:.95; line-height:1.45; max-width:42ch }

/* Flechas */
#marcas .brands-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(17,17,17,.12);
  background:#fff; color:var(--gold);
  box-shadow:0 8px 24px rgba(17,17,17,.10);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:transform .15s, background .15s, color .15s, border-color .15s, opacity .15s;
}
#marcas .brands-arrow.prev{ left:-18px }
#marcas .brands-arrow.next{ right:-18px }
#marcas .brands-arrow:hover{ background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-1px) }
#marcas .brands-arrow:disabled{ opacity:.45; transform:none }
#marcas .brands-arrow::before{
  content:""; display:block; width:11px; height:11px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg)
}
#marcas .brands-arrow.prev::before{ transform:rotate(135deg) }
#marcas .brands-carousel:not([data-overflow="true"]) .brands-arrow{ display:none }

@media (min-width:1200px){
  #marcas .brands-track>li{ flex-basis:clamp(300px,26vw,380px) }
}

/* =========================
   Nexo (solo texto, centrado)
========================= */
.nexo{ padding:clamp(48px,6vw,96px) 20px }
.nexo>header{ text-align:center }
.nexo>header h2::after{ display:none }
.nexo-title{
  display:inline-block; margin:0 auto;
  font-family:"Abhaya Libre",serif; font-weight:800;
  line-height:1.06; letter-spacing:-.01em;
  font-size:clamp(42px,8vw,118px);
  color:var(--text);
  position:relative;
}
.nexo-text{ display:block; transition:opacity .35s, transform .35s, filter .35s }
.nexo-text.base{ color:rgba(17,17,17,.18); opacity:1; transform:none }
.nexo-text.hover{ position:absolute; inset:0; color:var(--text); opacity:0; transform:translateY(8%) }
.nexo-title:hover .nexo-text.base{ opacity:0; transform:translateY(-8%); filter:blur(1px) }
.nexo-title:hover .nexo-text.hover{ opacity:1; transform:none }
@media (hover:none){ .nexo-text.base{display:none} .nexo-text.hover{position:static;opacity:1;transform:none} }

/* =========================
   Contacto (CTA final minimal)
========================= */
.contact{ padding-bottom: clamp(80px, 8vw, 140px) }
.contact-cta{ display:none } /* matamos la tarjeta vieja si quedara */

#contacto{ padding: clamp(60px, 7vw, 100px) 20px }
#contacto > header{
  text-align: center;
  margin: 0 0 14px;
}
#contacto > header h2{
  margin: 0;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.01em;
  font-size: clamp(36px, 4.8vw, 64px);
  color: var(--text);
}
#contacto .section-intro{
  margin: 0;
  color: #444;
  opacity: .9;
  font-size: clamp(16px, 1.6vw, 20px);
}
#contacto .contact-mail{ text-align:center; margin-top:10px }
#contacto .contact-mail a,
#contacto a[href^="mailto:"]{
  display:inline-block; font-weight:800;
  font-size:clamp(20px, 2.2vw, 28px); color:var(--text);
  text-decoration:none; border-bottom:2px solid var(--gold); padding-bottom:2px;
}
#contacto a[href^="mailto:"]:hover{ color:var(--gold); border-bottom-color:transparent }

/* =========================
   Reduce motion
========================= */
@media (prefers-reduced-motion:reduce){
  #preloader, .preloader-bar, .brand-figure, .brands-arrow, .nexo-text{ transition:none }
}

/* =========================
   Footer
========================= */
.site-footer{
  padding: 24px 16px;
  text-align: center;
  color: #555;
}
/* =========================
   Equipo
========================= */
#equipo .equipo-wrap{
  position: relative;
  max-width: min(var(--container-w), 92vw);
  margin: 0 auto;
}

/* Título decorativo grande */
#equipo .about-title{
  font-size: clamp(42px, 11vw, 120px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -10%);
  pointer-events: none;
  white-space: nowrap;
  font-family: "Abhaya Libre", serif;
  background: linear-gradient(to bottom, rgba(8,42,123,.35) 30%, rgba(255,255,255,0) 76%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

/* Contenedor y pista del carrusel */
#equipo .carousel-container{
  width: 100%;
  height: clamp(320px, 48vw, 460px);
  position: relative;
  perspective: 1000px;
  margin-top: clamp(40px, 8vw, 80px);
  overscroll-behavior-x: contain;
}
#equipo .carousel-track{
  width: 100%;
  height: 100%;
  display: flex; justify-content: center; align-items: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}

/* Tarjetas */
#equipo .card{
  position: absolute;
  width: clamp(190px, 24vw, 280px);
  height: clamp(260px, 34vw, 380px);
  background:#fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.14);
  transition: all .8s cubic-bezier(.25,.46,.45,.94);
  cursor: pointer;
  will-change: transform, opacity;
}
#equipo .card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: all .8s cubic-bezier(.25,.46,.45,.94);
}

/* Estados de profundidad/posición */
#equipo .card.center{ z-index:10; transform: scale(1.1) translateZ(0) }
#equipo .card.left-2  { z-index:1; transform: translateX(-400px) scale(.8)  translateZ(-300px); opacity:.7 }
#equipo .card.left-1  { z-index:5; transform: translateX(-200px) scale(.9)  translateZ(-100px); opacity:.9 }
#equipo .card.right-1 { z-index:5; transform: translateX( 200px) scale(.9)  translateZ(-100px); opacity:.9 }
#equipo .card.right-2 { z-index:1; transform: translateX( 400px) scale(.8)  translateZ(-300px); opacity:.7 }
#equipo .card.hidden  { opacity:0; pointer-events:none }

#equipo .card:not(.center) img{ filter: grayscale(100%) }

/* Flechas */
#equipo .nav-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(8,42,123,.6); color:#fff;
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  z-index: 20; transition: transform .3s, background .3s;
  font-size: 1.5rem; border: 0; outline: none; padding-bottom: 2px;
}
#equipo .nav-arrow.left{ left: 8px; padding-right: 3px }
#equipo .nav-arrow.right{ right: 8px; padding-left: 3px }
#equipo .nav-arrow:hover{ background: rgba(0,0,0,.8); transform: translateY(-50%) scale(1.08) }
#equipo .nav-arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* Info del miembro */
#equipo .member-info{
  text-align:center; margin-top: clamp(20px, 4vw, 40px);
  transition: opacity .5s ease-out;
}
#equipo .member-name{
  color: rgb(8,42,123);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight: 800; margin: 0 0 8px; position: relative; display: inline-block;
}
#equipo .member-name::before, #equipo .member-name::after{
  content:""; position:absolute; top:100%; width: 80px; height:2px; background: rgb(8,42,123);
}
#equipo .member-name::before{ left: -100px }
#equipo .member-name::after { right:-100px }

#equipo .member-role{
  color:#848696; font-size: clamp(0.9rem, 2.6vw, 1.2rem);
  font-weight: 600; opacity:.9; text-transform: uppercase; letter-spacing:.1em;
  margin: 2px 0 0;
}

/* Dots */
#equipo .dots{ display:flex; justify-content:center; gap:10px; margin-top: clamp(26px, 5vw, 42px) }
#equipo .dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(8,42,123,.22);
  cursor:pointer; transition: transform .3s, background .3s; border:0;
}
#equipo .dot.active{ background: rgb(8,42,123); transform: scale(1.2) }
#equipo .dot:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* Mobile tweaks */
@media (max-width: 768px){
  #equipo .card.left-2  { transform: translateX(-250px) scale(.8)  translateZ(-300px) }
  #equipo .card.left-1  { transform: translateX(-120px) scale(.9)  translateZ(-100px) }
  #equipo .card.right-1 { transform: translateX( 120px) scale(.9)  translateZ(-100px) }
  #equipo .card.right-2 { transform: translateX( 250px) scale(.8)  translateZ(-300px) }

  #equipo .member-name::before, #equipo .member-name::after{ width:50px }
  #equipo .member-name::before{ left:-70px }
  #equipo .member-name::after { right:-70px }
}
/* =========================
   Nosotros (Dueños)
========================= */
#nosotros .owners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
  justify-items: center;
}

#nosotros .owner {
  text-align: center;
  max-width: 320px;
}

#nosotros .owner img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  margin-bottom: 16px;
}

#nosotros .owner-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(8,42,123);
  margin-bottom: 6px;
}

#nosotros .owner-role {
  color: #777;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* ================================
   Centrado global de títulos
==================================*/

/* Centrar títulos y subtítulos en todas las secciones */
section header,
.hero-content,
.nexo header {
  text-align: center;
}

/* Subtítulos (intro) */
section header .section-intro,
.hero-content .hero-tagline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px; /* evita líneas demasiado largas */
}

/* Ajuste para el título gigante del nexo */
.nexo-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ====== Marcas: estilo alineado a Equipo ====== */
#marcas .brand-figure{
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  transition: transform .35s ease, box-shadow .35s ease, border-color .2s ease,
              filter .3s ease, opacity .3s ease;
  will-change: transform, filter, opacity;
}

#marcas .brand-logo{
  filter: grayscale(100%) contrast(1.05) brightness(.9);
  opacity: .65;
  transition: filter .35s, opacity .35s, transform .35s;
}

/* Slide más centrado */
#marcas .brands-slide.is-center .brand-figure{
  transform: scale(1.06);
  box-shadow: 0 26px 60px rgba(0,0,0,.18);
}
#marcas .brands-slide.is-center .brand-logo{
  filter: none;
  opacity: 1;
}

/* Flechas sólidas como Equipo */
#marcas .brands-arrow{
  width: 44px; height: 44px;
  background: rgba(8,42,123,.85);
  color:#fff; border:0;
}
#marcas .brands-arrow:hover{ background: rgba(0,0,0,.85) }

/* (Opcional) más aire entre cards */
#marcas .brands-track{ gap: 32px; }

/* ===== PATCH: unificar acento al dorado (sin romper nada) ===== */
:root{
  /* si querés, podés reutilizar este token en más lugares */
  --accent: var(--gold);
}

/* Equipo: colores al dorado */
#equipo .about-title{
  /* antes: rgba(8,42,123,.35) */
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--accent) 35%, transparent) 30%,
    rgba(255,255,255,0) 76%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#equipo .nav-arrow{
  background: var(--accent);
  color: #fff;
}
#equipo .nav-arrow:hover{ background: #000 }

#equipo .member-name{
  color: var(--accent);
}
#equipo .member-name::before,
#equipo .member-name::after{
  background: var(--accent);
}

#equipo .dot{
  /* antes: rgba(8,42,123,.22) */
  background: color-mix(in oklab, var(--accent) 35%, transparent);
}
#equipo .dot.active{ background: var(--accent) }

/* Marcas: flechas al dorado (resto intacto) */
#marcas .brands-arrow{
  background: var(--accent);
  color:#fff; border:0;
}
#marcas .brands-arrow:hover{ background:#000 }

/* “Nosotros” (dueños): nombre en dorado */
#nosotros .owner-name{ color: var(--accent) }