/* Biometrica · estilos del sitio */
@font-face { font-family:"JetBrains Mono"; src:url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --ink:#111111; --paper:#ffffff; --soft:#f2f2f0;
  --muted:rgba(17,17,17,.68); --line:rgba(17,17,17,.2);
  --accent:#1f6b45; --accent-light:#8fe3a6;
  --font:"JetBrains Mono", Consolas, Inconsolata, "DejaVu Sans Mono", "Courier New", monospace;
  --gutter:clamp(1.5rem,6vw,7rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.6 var(--font); overflow-x:hidden; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.skip-link { position:fixed; top:-5rem; left:1rem; z-index:10; padding:.6rem 1rem; color:var(--paper); background:var(--ink); }
.skip-link:focus { top:1rem; }

section, .site-header, .site-footer { padding-right:var(--gutter); padding-left:var(--gutter); }

/* Cabecera */
.site-header { min-height:6.2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); }
.brand { display:block; width:min(15.5rem,52vw); }
.brand img { display:block; width:100%; height:auto; }
nav { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
nav a, .text-link, .email { text-underline-offset:.35em; }
nav a:hover, .text-link:hover, .email:hover { text-decoration-thickness:2px; }

/* Hero */
.hero { min-height:min(40rem,calc(100vh - 6.2rem)); display:flex; flex-direction:column; justify-content:center; padding-top:5rem; padding-bottom:5rem; color:var(--paper);
  background:linear-gradient(rgba(8,14,10,.58),rgba(8,14,10,.82)),url("assets/images/bosque-aereo.jpg") center/cover no-repeat #0b110d; }
.eyebrow, .section-label { font-size:.68rem; font-weight:700; letter-spacing:.11em; }
.eyebrow { color:var(--accent-light); }
h1 { margin:1.4rem 0 2.2rem; font-size:clamp(2rem,4.5vw,4.6rem); line-height:1.08; letter-spacing:-.05em; }
.hero-detail { display:flex; align-items:end; justify-content:space-between; max-width:60rem; gap:2rem; }
.hero-detail p { max-width:36rem; margin:0; color:rgba(255,255,255,.86); font-size:clamp(.92rem,1.2vw,1.05rem); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.8rem; flex:none; }
.button { display:inline-block; padding:.85rem 1.4rem; font:inherit; font-size:.8rem; font-weight:700; text-decoration:none; color:var(--ink); background:var(--accent-light); border:0; cursor:pointer; }
.button:hover { background:var(--paper); }
.text-link { font-size:.8rem; font-weight:700; }
.hero-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:2.6rem 0 0; padding:0; list-style:none; }
.hero-tags li { padding:.3rem .8rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.55); border-radius:999px; }

/* Secciones */
.about, .process, .audience, .faq { padding-top:7rem; padding-bottom:7rem; border-bottom:1px solid var(--line); }
.work { padding-top:7rem; padding-bottom:7rem; background:var(--soft); }
.section-heading { display:grid; grid-template-columns:1fr 2fr; gap:2rem; margin-bottom:4rem; }
.section-heading h2 { margin:0; }
.section-label { color:var(--accent); }
h2 { margin-bottom:1.35rem; font-size:clamp(1.8rem,3.8vw,3.6rem); line-height:1.1; letter-spacing:-.05em; }

.about-body { display:grid; grid-template-columns:1fr 2fr; gap:2rem; }
.about-body p { grid-column:2; max-width:42rem; margin:0 0 1.2rem; font-size:clamp(.95rem,1.25vw,1.1rem); }

/* Servicios */
.areas { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink); }
.area { min-height:15rem; padding:clamp(1.5rem,3vw,2.5rem); background:var(--soft); display:flex; flex-direction:column; }
.area h3 { margin:0 0 .9rem; font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.2; letter-spacing:-.04em; }
.area p, .area-description { max-width:30rem; margin:0; color:var(--muted); font-size:.82rem; }
.area ul { margin:1.1rem 0 0; padding:0; list-style:none; font-size:.78rem; color:var(--muted); }
.area li { padding:.3rem 0; border-top:1px solid var(--line); }
.area-cta { align-self:flex-start; margin-top:1.4rem; font-size:.74rem; font-weight:700; color:var(--accent); text-underline-offset:.3em; }
.area-with-image { padding:0; }
.area-with-image img { display:block; width:100%; height:11rem; object-fit:cover; filter:saturate(.85); }
.area-content { flex:1; display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,2.5rem); }

/* Cómo trabajamos */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin:0 0 3.5rem; padding:0; list-style:none; counter-reset:step; }
.steps li { counter-increment:step; padding-top:1rem; border-top:2px solid var(--ink); }
.steps li::before { content:"0" counter(step); display:block; margin-bottom:.8rem; color:var(--accent); font-size:.75rem; font-weight:700; }
.steps strong { display:block; margin-bottom:.5rem; font-size:1rem; letter-spacing:-.03em; }
.steps span { color:var(--muted); font-size:.83rem; }
.principles { display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none; }
.principles li { padding:.35rem .9rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--ink); border-radius:999px; }

/* Para quién */
.audience { background:var(--soft); }
.audience-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.audience-list li { display:grid; grid-template-columns:1fr 2fr; gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.audience-list strong { font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:-.03em; }
.audience-list li > div p { max-width:44rem; margin:0 0 .9rem; color:var(--muted); font-size:.85rem; }
.audience-list li > div .audience-uses { margin:0; color:var(--accent); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* Preguntas */
.faq-list { border-top:1px solid var(--ink); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:1.3rem 0; font-weight:700; }
.faq details p { max-width:42rem; margin:0 0 1.4rem; color:var(--muted); font-size:.88rem; }

/* Contacto */
.contact { padding-top:7rem; padding-bottom:7rem; color:var(--paper); background:var(--ink); }
.contact .section-label { color:var(--accent-light); }
.contact h2 { margin-top:1.4rem; margin-bottom:2.75rem; }
.contact-form { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 2rem; max-width:52rem; margin-bottom:2rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field-wide, .form-actions, .form-note { grid-column:1 / -1; }
.contact-form label { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.contact-form label span { font-weight:400; text-transform:none; letter-spacing:0; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; padding:.8rem .9rem; font:inherit; color:var(--paper); background:transparent; border:1px solid rgba(255,255,255,.45); border-radius:0; }
.contact-form select option { color:var(--ink); }
.contact-form :focus-visible, .contact :focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }
.contact-form button { padding:.9rem 1.6rem; font:inherit; font-weight:700; color:var(--ink); background:var(--accent-light); border:0; cursor:pointer; }
.contact-form button:hover { background:var(--paper); }
.contact-form button:disabled { opacity:.6; cursor:wait; }
.form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem; }
.form-status { margin:0; font-size:.85rem; }
.form-note { margin:0; color:rgba(255,255,255,.7); font-size:.74rem; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-alt { margin:0; font-size:.85rem; color:rgba(255,255,255,.75); }
.email { font-size:clamp(1.05rem,2.25vw,1.9rem); font-weight:700; overflow-wrap:anywhere; }
.contact-alt .email { font-size:inherit; }

/* Pie */
.site-footer { display:flex; flex-direction:column; gap:2rem; padding-top:2.5rem; padding-bottom:2.5rem; color:var(--paper); background:#050505; }
.site-footer img { width:min(13rem,62vw); height:auto; }
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2rem; color:rgba(255,255,255,.6); font-size:.72rem; }
.footer-row p { margin:0; }
.footer-row a { color:rgba(255,255,255,.8); }

/* Páginas legales */
.legal { padding-top:5rem; padding-bottom:6rem; max-width:52rem; }
.legal h1 { font-size:clamp(1.8rem,3.4vw,3rem); margin:1rem 0 2rem; }
.legal h2 { margin:2.5rem 0 .8rem; font-size:1.15rem; letter-spacing:-.02em; }
.legal p, .legal li { color:var(--muted); font-size:.9rem; }
.legal ul { padding-left:1.2rem; }

@media (max-width:860px) {
  .steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .site-header { min-height:0; flex-direction:column; align-items:flex-start; gap:.8rem; padding-top:1.25rem; padding-bottom:1.25rem; }
  .brand { width:min(14rem,72vw); }
  .hero, .work, .contact { padding-top:4.5rem; padding-bottom:4.5rem; }
  .about, .process, .audience, .faq { padding-top:4.5rem; padding-bottom:4.5rem; }
  .hero { min-height:32rem; }
  .hero-detail, .section-heading { display:grid; grid-template-columns:1fr; align-items:start; gap:1.5rem; }
  .section-heading { margin-bottom:3rem; }
  .about-body, .audience-list li, .contact-form, .steps { grid-template-columns:1fr; gap:.8rem; }
  .about-body p { grid-column:1; }
  .contact-form { gap:1.2rem; }
  .areas { grid-template-columns:1fr; }
  .area { min-height:12rem; }
}

/* Proyectos en desarrollo */
.projects { padding-top:7rem; padding-bottom:7rem; border-bottom:1px solid var(--line); }
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; }
.project { padding:1.5rem 0 1.8rem; border-top:1px solid var(--ink); }
.project h3 { margin:.9rem 0 .6rem; font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.03em; }
.project p { max-width:30rem; margin:0; color:var(--muted); font-size:.85rem; }
.status { display:inline-block; padding:.2rem .6rem; font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--accent); }
.status-explore { color:var(--accent); background:transparent; border:1px solid var(--accent); }
.projects-note { margin:2rem 0 0; color:var(--muted); font-size:.82rem; }
@media (max-width:640px) { .projects { padding-top:4.5rem; padding-bottom:4.5rem; } .projects-grid { grid-template-columns:1fr; } }
.projects-grid .project:last-child:nth-child(odd) { grid-column:1 / -1; }