/* ===== Design tokens (ajustá a los del PDF si tenés los HEX exactos) ===== */
:root{
  --ink:#0f1114;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#f4f6f8;
  --brand-dark:#0e2030;   /* tono MANERA/dark section */
  --brand-ink:#111111;    /* tono F-ONE/negro */
  --cta:#0d0d0d;
  --cta-contrast:#fff;

  --radius:16px;
  --shadow:0 10px 26px rgba(0,0,0,.08);

  --h1:clamp(2.2rem,3.4vw + .8rem,3.6rem);
  --h2:clamp(1.6rem,2.2vw + .6rem,2.4rem);
  --h3:clamp(1.25rem,1.4vw + .6rem,1.6rem);
  --lead:clamp(1rem,.7vw + .8rem,1.25rem);

  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,"Noto Sans",sans-serif;
  --bs-nav-link-font-size: 1rem;

  --card-size: clamp(400px, 35vw, 500px);
  --card-gap:  clamp(12px, 30vw, 50px);
}
/* Si tenés la fuente exacta del PDF, podés declarar aquí @font-face y reemplazar --font-sans */

html,body{height:100%}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg)}
a{text-decoration:none}
a:hover{opacity:.9}

.eyebrow{letter-spacing:.08em;font-size:.85rem;color:var(--muted);text-transform:uppercase}

/* ===== Header ===== */
/* Header / Nav */
.site-header{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.06);position:sticky;top:0;z-index:1040}
.nav-main{min-height:64px}
.nav-left img{display:block}
.brand-divider{display:inline-block;width:1px;height:18px;background:#cfd3da}

.nav-center a{color:#0f1114;font-weight:600;letter-spacing:.02em}
.nav-center a:hover{opacity:.8}

.icon-btn{background:transparent;border:0;padding:6px;line-height:1;border-radius:8px}
.icon-btn:focus{outline:2px solid #1112;outline-offset:2px}
.icon{display:inline-block;width:22px;height:22px}

/* Search collapse bar */
.search{background:#f5f7f9;border-top:1px solid #e6e9ee;border-bottom:1px solid #e6e9ee}
.search-form{padding:10px 0}
.search-form .form-control{border-radius:999px}
.search-form .btn{border-radius:999px}

/* Offcanvas mobile menu */
.offcanvas .nav-link{font-weight:600;color:#0f1114}
.offcanvas .nav-link:hover{opacity:.8}

.nav-left img{
  height: clamp(40px, 5vw, 45px); /* subí el tope si querés más grande */
  width: auto;                      /* mantiene proporción */}
/* Ajusta la línea divisoria para que acompañe el nuevo alto */
.brand-divider{ height: clamp(20px, 2vw, 30px);}
/* Si al crecer los logos querés un header un toque más alto */
.nav-main{ min-height: 72px; }

/* ===== HERO ===== */
.hero{position:relative;min-height:82vh;display:grid;place-items:center;text-align:center;color:#fff;background:#0b0f14}
.hero{background-image:url('/assets/images/bg-hero.jpg');background-size:cover;background-position:center}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.5))}
.hero__inner{position:relative;z-index:1;padding:64px 12px}
.hero__divider{display:inline-block;width:1px;height:24px;background:rgba(255,255,255,.5)}
.hero__title{font-size:var(--h1);font-weight:800;margin:.75rem 0 .5rem}
.hero__lead{font-size:var(--lead);opacity:.95}
.hero__actions{margin-top:1rem}
.hero__scroll{margin-top:2.25rem;font-size:.9rem;letter-spacing:.12em;opacity:.8}
.nowrap{white-space:nowrap}
.btn-cta{background:var(--cta);color:var(--cta-contrast);border:none;border-radius:999px;padding:.85rem 1.4rem;font-weight:700}

/* ===== Help strip ===== */
.help-strip{background:var(--surface);padding:18px 0;border-top:1px solid #e7e9ee;border-bottom:1px solid #e7e9ee}

/* ===== Cards Duo ===== */
.cards-duo{padding:40px 0}
.card-block{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.card-block.alt{background:var(--brand-dark);color:#fff}
.card-block .btn{border-radius:999px}

/* ===== Princípios ===== */
.principios{padding:40px 0}
.principio{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;height:100%}
.principio__title{font-size:var(--h2);line-height:1.1;margin-bottom:.5rem}
.link-arrow{font-weight:700}
.link-arrow::after{content:" →";}

/* ===== Ribbon ===== */
.ribbon{margin-top:12px;background:var(--brand-ink);color:#fff;border-radius:999px;padding:10px 18px;text-align:center;font-size:.95rem}

/* ===== Footer ===== */
.site-footer{background:#0f1114;color:#cbd5e1;margin-top:48px;padding:32px 0}
.site-footer a{color:#e5e7eb}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);margin-top:20px;padding-top:12px}

/* ===== Responsive tweaks ===== */
@media (max-width:991.98px){
  .hero{min-height:68vh}
  .hero__title{line-height:1.1}
}


/* ===== HERO layout centrado con claims debajo ===== */
.hero{
  position:relative;
  min-height:72vh;
  background:url('/assets/images/bg-hero.jpg') center/cover no-repeat;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
}
.hero__inner{ position:relative; z-index:1; padding:64px 12px; }

/* Contenedor de las dos marcas */
.hero__brandpair{
  display:flex; align-items:flex-start; justify-content:center; gap:28px;
  flex-wrap:nowrap;
}

/* Nombres de marca */
.hero__brand-name{
  font-weight:800;
  font-size:clamp(2.2rem, 4.2vw + .5rem, 4.2rem);
  letter-spacing:.01em;
  line-height:1.0;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* Subtítulos debajo de cada marca */
.hero__brand-sub{
  margin-top:.25rem;
  font-weight:400;
  font-size:clamp(0.95rem, .9vw + .6rem, 1.2rem);
  opacity:.95;
}

/* Separador vertical entre F-one y MANERA */
.hero__divider{
  align-self:center;
  display:inline-block;
  width:1px; /* finita */
  height:clamp(48px, 8vw, 96px); /* más larga en pantallas grandes */
  background:
          linear-gradient(
                  180deg,
                  rgba(255,255,255,0) 0%,
                  rgba(255,255,255,.85) 20%,
                  rgba(255,255,255,.85) 80%,
                  rgba(255,255,255,0) 100%
          );
  opacity:.95;
  margin:0 10px;
  /* leve brillo para que se lea sobre fondos oscuros del hero */
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}

/* Responsive: apilar en mobile, ocultar | y mantener jerarquía */
@media (max-width: 991.98px){
  .hero{ min-height:60vh; }
  .hero__brandpair{
    flex-direction:column;
    gap:16px;
  }
  .hero__divider{ display:none; }
}

/* ================================================== */
/* ===== Grid de 2 tarjetas cuadradas con hover ===== */
/* ================================================== */

.brand-grid__wrap{
  display:grid;
  grid-template-columns: 1fr;            /* mobile: una abajo de otra */
  justify-items: center;
  gap: 14px;                              /* gap chico en mobile */
}

/* ≥ lg (desktop): dos columnas y gap grande */
@media (min-width: 992px){
  .brand-grid__wrap{
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 150px;                            /* ajustá acá el “bastante gap” */
  }
}

/* Tarjeta base */
.brand-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:16px;
  isolation:isolate;
  will-change:transform;
  transform:translateZ(0);
  width: var(--card-size);
}
.brand-card__img{
  aspect-ratio: 1 / 1;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* Overlay oscuro + contenido centrado */
.brand-card__overlay{
  pointer-events:none;
  position:absolute; inset:0;
  display:grid; place-items:center;
  gap:18px;
  opacity:0; transition:opacity .35s ease;
}
.brand-card__overlay::before{             /* oscurecer */
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(90%) brightness(80%);
  transition:opacity .35s ease;
  opacity:1;
}
.brand-card__logo{
  position:relative; z-index:1;
  height:clamp(140px,7vw,100px); width:auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.25));
}

/* Botón pill con borde fino y radio 25% */
.brand-card__btn{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 17vw, 120px);
  height: clamp(40px, 5vw, 40px);
  border: 1px solid #fff;
  border-radius: 25px;
  color: #fff;
  text-transform: none;
  font-weight: 500;
  backdrop-filter: brightness(105%);
}

/* Flecha finita centrada */
.brand-card__arrow{
  display:inline-block;
  width:42px; height:1px; background:#fff; position:relative;
}
.brand-card__arrow::after{
  content:""; position:absolute; right:0; top:-4px;
  width:10px; height:10px;
  border-right:1px solid #fff; border-top:1px solid #fff;
  transform:rotate(45deg);
}

/* Hover */
.brand-card:hover .brand-card__img{ transform:scale(1); }
.brand-card:hover .brand-card__overlay{ opacity:1; }

/* Centrar logo + botón y acercarlos */
.brand-card__overlay{
  display:flex;                 /* en vez de grid */
  flex-direction:column;        /* logo arriba, botón abajo */
  align-items:center;
  justify-content:center;       /* centra vertical/horizontal */
  gap:10px;                     /* <— ajustá este valor para acercar/alejar */
}

/* En mobile, aún más cerca si querés */
@media (max-width: 991.98px){
  .brand-card__overlay{ gap:8px; }
}
/* Soporte táctil (mostrar overlay al tocar) */
@media (hover:none){
  .brand-card .brand-card__overlay{ opacity:1; }
}

/* En mobile: una abajo de la otra, centradas */
@media (max-width: 991.98px){
  .brand-grid__wrap{
    grid-template-columns: 1fr;
    justify-items: center;                /* centra cada card */
  }
  .brand-card{
    width: min(100%, var(--card-size));   /* evita desbordes en pantallas chicas */
  }
}

/* Botón/ícono flotante centrado entre cards (desktop) */
.brand-float{
  position: absolute;
  left: 50%;
  bottom: 0px;                     /* "bien abajo", ajustá -10 / -24px a gusto */
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
}
.brand-float img{
  width: 100%;
  height: auto;
}

/* Mobile: reubicar debajo de las cards (ya no hay "entre medio") */
@media (max-width: 991.98px){
  .brand-float{
    position: static;
    transform: none;
    margin: 10px auto 0;
  }
}