/* ====== Fuentes (AC) ====== */
@font-face{ font-family:"ACFont"; src:url("../assets/fonts/ACFont.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"ACFontBold"; src:url("../assets/fonts/ACFontBold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"ACFontRegular"; src:url("../assets/fonts/ACFontRegular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* ====== Variables ====== */
:root{
  --black:#0A0A0A; --orange:#FF6A00; --blue:#1486C9;
  --text:#eaeaea; --muted:#9aa0a6;
  --container-w:min(1200px,92vw); --radius:16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--black); color:var(--text);
  font-family:"ACFontRegular",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(16px,1.2vw,18px); line-height:1.6;
  transition:background-color .6s ease,color .4s ease;
}
img{ max-width:100%; display:block; height:auto; }

/* ====== Helpers ====== */
.container{ width:var(--container-w); margin-inline:auto; }
.bold{ font-family:"ACFontBold",sans-serif; font-weight:700; }
.regular{ font-family:"ACFontRegular",sans-serif; }
.accent-orange{ color:var(--orange); }
.accent-blue{ color:var(--blue); }
.accent-white{ color:#fff; }

/* Todo lo que lleve esta clase usará fuente del sistema (números, @, flechas, etc.) */
.alt-font{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important; }

.btn{
  display:inline-block; padding:1.05rem 1.35rem; border-radius:14px;
  background:var(--orange); color:#000; text-decoration:none;
  font-family:"ACFontBold"; font-size:clamp(15px,1.2vw,18px);
  transition:transform .15s ease,opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.95; }
.btn-cta{ background:var(--blue); color:#000; }
.btn-lg{ padding:1.15rem 1.55rem; font-size:clamp(16px,1.4vw,20px); }

/* ====== Header/Nav ====== */
.site-header{
  position:fixed; top:0; left:0; right:0; transform:translateY(-100%);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  background:rgba(10,10,10,.72); backdrop-filter:blur(8px);
  z-index:50; box-shadow:0 0 0 transparent;
}
.site-header.visible{ transform:translateY(0%); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand-logo{ width:28px; height:28px; object-fit:contain; }
.brand-name{ font-family:"ACFontBold"; letter-spacing:.3px; }
.main-nav{ display:flex; gap:16px; align-items:center; }
.main-nav a{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px; }
.main-nav a:hover{ background:rgba(255,255,255,.06); }
@media (max-width:760px){ .brand-name{ display:none; } .main-nav a:not(.btn){ display:none; } }

/* ====== Secciones y color al scrollear ====== */
.section{ padding:clamp(56px,8vw,96px) 0; transition:background-color .6s ease,color .4s ease; }
.bg-dark{ background:var(--black); color:var(--text); }
.bg-orange{ background:var(--orange); color:#111; }
.bg-blue{ background:var(--blue); color:#fff; }

/* ====== Hero ====== */
.hero{ min-height:92vh; display:grid; place-items:center; text-align:center; }
.hero-logo{ width:clamp(96px,14vw,160px); margin-inline:auto; margin-bottom:16px; }
.hero-title{ font-family:"ACFont",sans-serif; font-size:clamp(42px,9vw,96px); line-height:.95; margin:0 0 8px 0; letter-spacing:-.02em; }
.hero-subtitle{ margin:0; font-size:clamp(16px,3.4vw,28px); letter-spacing:.2px; }

/* ====== Video Strip (gruesa, cover) ====== */
.video-strip{ position:relative; height:clamp(260px,34vh,460px); overflow:hidden; }
.video-embed{ width:100%; height:100%; position:relative; }
.video-embed iframe{
  position:absolute; left:50%; top:50%; width:120%; height:120%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.video-overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.15),rgba(10,10,10,.15)); }

/* ====== About ====== */
.about h2{ font-family:"ACFont"; margin-top:0; color:#111; font-size:clamp(28px,4.2vw,44px); }
.lead{ font-family:"ACFontBold"; color:#111; }
.about-grid{ display:grid; gap:28px; grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .about-grid{ grid-template-columns:1.2fr .8fr; } }

/* Bullets sin usar glifos de la font */
.bullets{ list-style:none; padding-left:0; margin:12px 0; }
.bullets li{ position:relative; padding-left:20px; margin-bottom:8px; }
.bullets li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:8px; background:#111; border-radius:50%;
}

/* Founder: círculo tapa abajo + cabeza sobresale */
.founder-stack{ position:relative; width:clamp(220px,36vw,360px); margin-inline:auto; }
.circle-clip{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:999px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,#fff 0 40%,#f1f1f1 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.founder-img-base,
.founder-img-head{
  position:absolute; left:50%; bottom:-6%;
  transform:translateX(-50%);
  width:115%; height:auto; object-fit:contain;
}
.circle-ring{
  position:absolute; inset:0; pointer-events:none; border-radius:999px;
  border:6px solid var(--blue); transform:scale(1.02);
}
/* sólo mostrar parte alta en la capa superior */
.founder-img-head{ clip-path:inset(0 0 58% 0); z-index:2; }

/* ====== Services ====== */
.services h2{ font-family:"ACFont"; margin-top:0; color:#111; font-size:clamp(28px,4.2vw,44px); }
.services-grid{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:20px; }
.card{ background:#fff; color:#111; padding:20px 18px; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.1); }
.card h3{ margin:0 0 6px 0; font-family:"ACFontBold"; }
.post-block{ margin:20px 0 14px 0; padding:16px; border-radius:14px; background:#fff; color:#111; }

.how-we-work{ display:grid; gap:12px; grid-template-columns:repeat(4,1fr); margin:14px 0 20px; }
.how-we-work .step{
  background:#111; color:#fff; text-align:center; padding:12px 10px;
  border-radius:12px; font-family:"ACFontBold";
}
.how-we-work .step span{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:999px;
  background:var(--blue); color:#000; margin-right:8px;
  /* números en fuente alternativa */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (min-width:840px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

/* ====== Contact (AZUL) ====== */
.contact h2{ text-align:center; font-family:"ACFont"; font-size:clamp(24px,4vw,36px); margin-top:0; }
.bg-blue .contact-lines a{ color:#fff; }
.bg-blue .social-icons a{ background:rgba(255,255,255,.18); }
.bg-blue .social-icons a:hover{ background:rgba(255,255,255,.26); }

/* solo iconos */
.social-icons{
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin:16px 0 6px;
}
.social-icons a{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.06);
  transition:transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.social-icons a:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.social-icons img{ width:24px; height:24px; object-fit:contain; }
@media (min-width:760px){ .social-icons a{ width:52px; height:52px; } .social-icons img{ width:28px; height:28px; } }

.contact-lines{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.contact-lines a{ text-decoration:none; }
.contact-lines a:hover{ text-decoration:underline; }

/* ====== Footer ====== */
.site-footer{ padding:18px 0; background:#0b0b0b; color:#9ea3a8; font-size:.95em; text-align:center; }

/* ====== Portfolio ====== */
.page-title{ font-family:"ACFont"; font-size:clamp(28px,5vw,44px); margin:0 0 8px 0; }
.page-desc{ margin:0 0 18px 0; color:var(--muted); }
.grid16x9{ display:grid; gap:14px; grid-template-columns:1fr; }
.thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.35); }
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease, opacity .25s ease; }
.thumb:hover img{ transform:scale(1.03); opacity:.96; }
@media (min-width:760px){ .grid16x9{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1140px){ .grid16x9{ grid-template-columns:repeat(3,1fr); } }