/* ============== SHARED STYLES — Cronoiberia / Orientación 360 ============== */
:root{
  --ink:        #0E1B2C;
  --ink-2:      #1B2A41;
  --paper:      #F6F1E8;
  --paper-2:    #ECE4D3;
  --line:       #1B2A4122;
  --brand:      #C8311A;
  --brand-2:    #E8642D;
  --accent:     #2E7D5B;
  --gold:       #C9A24A;
  --white:      #FFFFFF;

  --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-xl: 36px;
  --shadow-sm: 0 1px 0 #1B2A411a, 0 1px 2px #1B2A4112;
  --shadow-md: 0 10px 30px -12px #0E1B2C2a, 0 2px 6px #0E1B2C12;
  --maxw: 1200px;

  --t-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --t-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --t-mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(20px, 4vw, 56px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: var(--t-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 17px;}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline: var(--pad);}
.display{font-family:var(--t-display); font-weight:700; letter-spacing:-0.02em; line-height:1.02;}
.eyebrow{font-family:var(--t-mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color: var(--brand); display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; display:inline-block;}
.eyebrow.light{color: var(--brand-2)}

.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; font-family:var(--t-body); font-weight:700; font-size:15px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; text-decoration:none;}
.btn-primary{background: var(--brand); color: var(--white);}
.btn-primary:hover{background:#a8260f; transform: translateY(-1px)}
.btn-secondary{background: transparent; color: var(--ink); border-color: var(--ink);}
.btn-secondary:hover{background: var(--ink); color: var(--paper)}
.btn-ghost{background: transparent; color: var(--ink); border-color: transparent; padding-inline:0;}
.btn-ghost:hover{color:var(--brand)}

/* nav */
.nav{position: sticky; top:0; z-index:30; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--paper) 80%, transparent); border-bottom: 1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--ink); font-weight:800; font-family: var(--t-display); font-size:20px; letter-spacing:-.01em}
.logo-mark{width:36px; height:36px; border-radius:999px; background: var(--ink); color: var(--brand); display:grid; place-items:center; font-family: var(--t-mono); font-weight:700; font-size:13px;}
.nav-links{display:flex; gap:28px; font-weight:600; font-size:14px}
.nav-links a{text-decoration:none; opacity:.78}
.nav-links a:hover, .nav-links a.active{opacity:1; color: var(--brand)}
.nav .btn{padding:10px 16px; font-size:13px}
@media (max-width: 880px){ .nav-links{display:none} }

/* sections */
section.block{ padding: clamp(64px, 8vw, 112px) 0; }
.block-head{display:grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; max-width: 880px}
.block-head h2{font-family:var(--t-display); font-weight:700; font-size: clamp(34px, 4.4vw, 56px); margin:0; letter-spacing:-.02em; line-height:1.05}
.block-head p{font-size:18px; color:#1B2A41bb; max-width: 64ch; margin:0}

/* sub hero */
.sub-hero{padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 64px); background: radial-gradient(900px 400px at 80% -10%, #E8642D22, transparent 60%), var(--paper); border-bottom:1px solid var(--line)}
.sub-hero h1{font-family:var(--t-display); font-weight:700; font-size: clamp(38px, 5.6vw, 72px); letter-spacing:-.025em; line-height:1.02; margin:18px 0 18px}
.sub-hero p.lead{font-size: clamp(18px, 1.6vw, 22px); color: #1B2A41cc; max-width: 60ch; margin: 0 0 24px}
.crumbs{font-family:var(--t-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#1B2A4188}
.crumbs a{text-decoration:none; color:inherit}
.crumbs a:hover{color: var(--brand)}

/* footer */
footer.foot{background: var(--ink); color: #F6F1E8aa; padding: 40px 0 64px; border-top: 1px solid #ffffff10;}
footer.foot .row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
footer.foot a{color: var(--paper); text-decoration:none; opacity:.8}
footer.foot a:hover{opacity:1}
footer.foot small{font-family:var(--t-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}

/* final cta block (re-used) */
.final{background: radial-gradient(900px 400px at 90% 20%, #E8642D33, transparent 60%), radial-gradient(700px 400px at 10% 80%, #2E7D5B22, transparent 60%), var(--ink); color: var(--paper);}
.final-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items:center;}
@media (max-width: 900px){ .final-grid{grid-template-columns:1fr; gap:36px} }
.final h2{font-family: var(--t-display); font-weight:700; font-size: clamp(36px, 5vw, 60px); letter-spacing:-.025em; line-height:1.04; margin:0 0 18px; color: var(--paper);}
.final h2 em{font-style:normal; color: var(--brand-2)}
.final p{font-size:19px; color:#F6F1E8d0; max-width: 50ch; margin: 0 0 28px}
.final .btn-primary{background: var(--brand-2)}
.final .btn-primary:hover{background: #d05216}
.final .btn-secondary{color: var(--paper); border-color: var(--paper)}
.final .btn-secondary:hover{background: var(--paper); color: var(--ink)}
.contact-card{background: #ffffff0a; border: 1px solid #ffffff20; border-radius: var(--r-lg); padding: 28px; display:grid; gap: 14px; backdrop-filter: blur(6px);}
.contact-row{display:flex; gap:14px; align-items:center}
.contact-row .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background: var(--brand); color:var(--paper); flex-shrink:0;}
.contact-row b{display:block; font-family:var(--t-display); font-weight:600; font-size:16px}
.contact-row span{font-size:14px; color:#F6F1E8aa; font-family: var(--t-mono); letter-spacing:.04em}

.icon{width:1.1em; height:1.1em; vertical-align: -2px}