/* ================== Be Vietnam Pro (self-hosted TTF) ================== */
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Thin.ttf") format("truetype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-ExtraLight.ttf") format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Be Vietnam Pro"; src:url("./fonts/BeVietnamPro-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
:root{ --bg:#fff; --fg:#000; --white:#fff; --black:#000; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height:1.5; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* Header */
.header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(6px); transition:all .35s ease; border-bottom:1px solid #eee; }
.header-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:30px 20px; transition:padding .35s ease; }
.logo img{ height:84px; transition:height .35s ease; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ font-weight:500; }
.nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
.menu-toggle{ display:none; border:0; background:transparent; padding:8px; border-radius:10px; }
.menu-toggle:active{ transform:scale(0.98); }
.header.shrink .header-inner{ padding:15px 20px; }
.header.shrink .logo img{ height:42px; }
main{ padding-top:130px; }
.section{ position:relative; }
.full-bleed{ width:100%; }

/* Home - main image */
#inicio{ position:relative; overflow:hidden; }
.hero-image{ width:100%; height:80vh; object-fit:cover; filter:grayscale(100%) contrast(1.05); }

/* ARECO overlay */
#areco-overlay{ position:absolute; top:0; left:0; width:100%; height:80vh; z-index:500; pointer-events:none; opacity:0; transition:opacity .35s ease; }
#inicio.overlay-show #areco-overlay{ opacity:1; }
#areco-overlay .word{
  position:absolute;
  /* Sale un poco hacia arriba del borde de la foto */
  top: clamp(-96px, -8vh, -32px);
  left:50%;
  transform: translateX(-50%) scale(1);
  transform-origin: top center;
  white-space:nowrap; color:#000;
  font-weight:400; font-style:normal; font-synthesis:none; text-transform:none; line-height:1;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size:min(24vw, 60vh);
  letter-spacing: clamp(0.04em, 0.6vw, 0.18em);
}
#areco-overlay .word .a-alt{ font-family: Arial, "Source Sans 3", "Source Sans Pro", "Noto Sans", system-ui, sans-serif !important; font-weight:400; font-style:normal !important; font-synthesis:none; text-transform:none; }

/* Home - copy */
.inicio-copy{ max-width:1200px; margin:28px auto 0; padding:0 20px; }
.inicio-copy h1{ font-size:clamp(28px,3.5vw,46px); margin:0 0 14px; font-weight:500; }
.inicio-actions{ margin:16px 0 48px; }
.btn{ display:inline-block; padding:12px 20px; border-radius:999px; border:2px solid var(--black); font-weight:500; transition:all .25s ease; }
.btn.dark{ background:#000; color:#fff; }
.btn.dark:hover{ opacity:.85; transform:translateY(-1px); }

/* Resto */
.hero-block{ position:relative; }
.hero-block .label{ position:absolute; left:24px; bottom:24px; color:#fff; }
.hero-block .label h3{ margin:0 0 10px; font-size:clamp(22px,3vw,36px); text-shadow:0 2px 18px rgba(0,0,0,.6); }
.hero-block .label .btn{ border:2px solid #fff; background:#fff; color:#000; }
.hero-block .label .btn:hover{ background:#000; color:#fff; }

.cards{ max-width:1200px; margin:32px auto 64px; padding:0 20px; display:flex; justify-content:center; }
.card{ border:1px solid #eaeaea; padding:28px; border-radius:16px; background:#fff; overflow:hidden; position:relative; width:100%; max-width:900px; }
.card{ animation: cardFloatStrong 5.5s ease-in-out infinite; }
@keyframes cardFloatStrong{ 0%{ transform:translateY(0) scale(1); box-shadow:0 6px 22px rgba(0,0,0,.08);} 35%{ transform:translateY(-12px) scale(1.01);} 50%{ box-shadow:0 16px 38px rgba(0,0,0,.12);} 70%{ transform:translateY(-6px) scale(1.005);} 100%{ transform:translateY(0) scale(1); box-shadow:0 6px 22px rgba(0,0,0,.08);} }
@keyframes pulseBorder{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,0,0,.08);} 50%{ box-shadow:0 0 0 6px rgba(0,0,0,.04);} }
.card{ animation-name: cardFloatStrong, pulseBorder; animation-duration:5.5s, 3.6s; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out; }
.card::before{ content:""; position:absolute; top:-150%; left:0; right:0; height:150%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%); transform:translateY(0); animation: sweepDown 6.8s linear infinite; pointer-events:none; }
@keyframes sweepDown{ 0%{ transform:translateY(-10%);} 100%{ transform:translateY(110%);} }
.card h3{ margin-top:0; text-align:center; }
.clients-ticker{ position:relative; min-height:32px; }
.clients-row{ display:flex; align-items:center; justify-content:center; gap:24px; opacity:0; transition:opacity .35s ease; min-height:32px; }
.clients-row.show{ opacity:1; }
.clients-row .item{ font-size:18px; font-weight:600; white-space:nowrap; }

main.page{ padding-top:170px; }
.page{ max-width:1000px; margin:0 auto; padding:0 20px 60px; }
.page h1{ font-size:clamp(28px,3vw,40px); margin:0 0 12px; }
.page .intro{ color:#111; font-size:1.1rem; line-height:1.7; margin:0 0 18px; }
.member{ display:grid; grid-template-columns:1fr; gap:18px; align-items:center; margin:28px 0 46px; }
.member img{ border-radius:12px; width:100%; height:auto; max-width:520px; }
.member .bio{ color:#111; font-size:1.125rem; line-height:1.6; }
.member .bio h3{ margin:0 0 8px; font-size:1.35rem; }
@media(min-width:900px){ .member{ grid-template-columns:1.05fr 1fr; } .member.right{ grid-template-columns:1fr 1.05fr; } }
.member .photo{ order:1; } .member .bio{ order:2; }
.member.right .photo{ order:2; } .member.right .bio{ order:1; }

.project-hero{ position:relative; }
.carousel{ position:relative; width:100%; height:72vh; overflow:hidden; }
.carousel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.carousel img.active{ opacity:1; }

.project-meta{ max-width:1200px; margin:18px auto 36px; padding:0 20px; display:grid; grid-template-columns:1fr; gap:6px; color:#111; }
.project-meta div{ padding:6px 0; border-bottom:1px dashed #eee; }

footer{ border-top:1px solid #eee; padding:46px 20px; background:#fff; font-size:19px; }
.footer-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.contact h4{ margin:0 0 12px; font-size:24px; }
.contact a{ display:block; margin:6px 0; }
.wapp{ display:flex; align-items:center; justify-content:flex-end; }
.wapp a{ display:inline-flex; padding:6px; border-radius:12px; border:1px solid #eaeaea; }

/* =========================
   Ajustes responsive - móvil en vertical
   ========================= */
@media (max-width: 768px) and (orientation: portrait){
  .header-inner{ padding:14px 16px; }
  .logo img{ height:48px; }
  .header.shrink .header-inner{ padding:10px 16px; }
  .header.shrink .logo img{ height:40px; }
  main{ padding-top:86px; }

  /* Mostrar botón hamburguesa, ocultar nav por defecto */
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{ position:fixed; top:calc(env(safe-area-inset-top, 0px) + 64px); left:0; right:0; background:rgba(255,255,255,.98); border-bottom:1px solid #eee; display:none; flex-direction:column; gap:0; padding:10px 16px 14px; z-index:1200; }
  .nav a{ display:block; padding:12px 6px; font-size:18px; }
  .header.menu-open .nav{ display:flex; }
  body.no-scroll{ overflow:hidden; }

  /* Hero */
  .hero-image{ height:68vh; }
  #areco-overlay{ height:68vh; }
  #areco-overlay .word{ font-size:min(22vw, 40vh); letter-spacing: clamp(0.02em, 0.4vw, 0.12em); }

  /* Labels sobre imágenes */
  .hero-block .label{ left:16px; bottom:16px; }

  /* Card */
  .clients-row .item{ font-size:16px; }

  /* Footer */
  .footer-inner{ grid-template-columns:1fr; }
  .wapp{ justify-content:flex-start; }
}