/* =============================================================
   GOLDEN ASSET — 03-components.css
   Capa "Module" (SMACSS): piezas visuales con nombre propio,
   reutilizables e independientes de dónde se coloquen.
   ============================================================= */

/* ---------- Marca / Logotipo ---------- */
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif; font-size:1.22rem; font-weight:500;
  letter-spacing:0.01em; color:var(--gold-bright);
}
.brand.brand-lg{ font-size:1.36rem; }
.brand span.dim{ color:inherit; font-weight:500; }
.brand-block{ display:flex; flex-direction:column; gap:2px; }
.brand-tagline{
  font-family:'JetBrains Mono', monospace; font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-dim); padding-left:19px;
}
@media (max-width:640px){ .brand-tagline{ display:none; } }
.footer-inner .brand{ font-size:1.36rem; }
.footer-tagline{
  font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold-dim); margin-top:2px;
}

/* ---------- Navegación ---------- */
.nav-links a{ font-size:0.84rem; color:var(--paper-dim); letter-spacing:0.03em; transition:color .25s ease; }
.nav-links a:hover{ color:var(--gold-bright); }

.drawer-close{ background:none; border:none; color:var(--paper); cursor:pointer; }
.drawer-links a{ font-family:'Fraunces', serif; font-size:1.9rem; color:var(--paper); }
.drawer-links a span{ color:var(--gold-dim); font-family:'JetBrains Mono', monospace; font-size:0.85rem; margin-right:14px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; font-size:0.82rem; letter-spacing:0.05em;
  text-transform:uppercase; font-weight:600; border:1px solid transparent;
  cursor:pointer; transition:all .25s ease; white-space:nowrap;
}
.btn-gold{ background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:var(--btn-ink); }
.btn-gold:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ---------- Eyebrow (etiqueta pequeña con guion) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:0.76rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:20px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); }

/* ---------- Etiquetas de pilares (hero) ---------- */
.pillar-tags{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:30px; }
.pillar-tags span{
  font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); position:relative; padding-left:14px;
}
.pillar-tags span::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; background:var(--gold); border-radius:50%;
}

/* ---------- Hero: titular y acciones ---------- */
.hero h1{
  font-family:'Fraunces', serif; font-weight:400; font-size:clamp(2.2rem, 4.2vw, 3.6rem);
  line-height:1.14; letter-spacing:-0.01em; color:var(--paper); margin-bottom:26px;
}
.hero h1 em{
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg, var(--gold-bright), var(--gold) 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:1.06rem; color:var(--paper-dim); max-width:480px; margin-bottom:40px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Gráfico de portada (chart) ---------- */
.chart-frame{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); background:var(--panel); }
.chart-frame::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:14.28% 16.6%;
}
.chart-frame svg{ position:relative; width:100%; height:100%; }

.chart-label{ position:absolute; font-family:'JetBrains Mono', monospace; font-size:0.66rem; color:var(--muted); letter-spacing:0.05em; }
.chart-label.tl{ top:16px; left:16px; }

.chart-line{
  fill:none; stroke:var(--gold-bright); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.4s cubic-bezier(.4,0,.2,1) .3s forwards;
  filter:drop-shadow(0 0 6px var(--chart-glow));
}
.chart-line-secondary{ fill:none; stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 5; opacity:0; animation:fadeIn 1s ease 1.9s forwards; }
.chart-vertex{ fill:var(--gold-bright); opacity:0; animation:fadeIn .4s ease forwards; }
.chart-dot{ fill:var(--gold-bright); opacity:0; animation:fadeIn .5s ease 2.6s forwards; }
.chart-fill{ opacity:0; animation:fadeIn 1.4s ease 1.6s forwards; }
.chart-fill-stop-a, .chart-fill-stop-b{ stop-color:var(--gold-bright); }

.axis-label{ font-family:'JetBrains Mono', monospace; font-size:11px; fill:var(--muted); letter-spacing:1px; opacity:0; animation:fadeIn .6s ease 2.1s forwards; }

.chart-badge{
  position:absolute; top:7%; right:5%; background:var(--panel); border:1px solid var(--gold);
  color:var(--gold-bright); font-family:'JetBrains Mono', monospace; font-size:0.72rem; font-weight:500;
  padding:4px 10px; letter-spacing:0.02em; opacity:0; animation:fadeIn .5s ease 2.7s forwards;
  box-shadow:0 4px 10px rgba(20,15,5,0.1);
}
.chart-legend{
  position:absolute; top:44%; left:16px; display:flex; flex-direction:column; gap:7px;
  font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.03em; color:var(--muted); text-align:left;
}
.legend-item{ display:flex; align-items:center; gap:7px; justify-content:flex-start; }
.legend-item i{ width:14px; height:2px; background:var(--gold-bright); display:inline-block; border-radius:1px; }
.legend-item i.dashed{ background:none; border-top:1.5px dashed var(--muted); height:0; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .chart-line, .chart-fill, .chart-dot, .chart-line-secondary, .chart-vertex, .axis-label, .chart-badge{
    animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important;
  }
}

/* ---------- Strip items ---------- */
.strip-item{ font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
.strip-item strong{ color:var(--gold-bright); font-weight:500; }
.strip-item .n{ color:var(--gold-dim); margin-right:6px; }

/* ---------- Section heading ---------- */
.section-head h2{ font-family:'Fraunces', serif; font-weight:400; font-size:clamp(1.9rem, 3vw, 2.6rem); max-width:600px; }
.section-head .num{ font-family:'JetBrains Mono', monospace; color:var(--gold-dim); font-size:0.85rem; text-align:right; }

/* ---------- Pillar card (Consultoría / Asesoría / Auditoría / Outsourcing) ---------- */
.pillar-card{ background:var(--panel); padding:46px 44px; }
.pillar-top{ display:flex; align-items:baseline; gap:16px; margin-bottom:14px; }
.pillar-num{ font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--gold-dim); }
.pillar-title{ font-family:'Fraunces', serif; font-size:1.55rem; font-weight:500; color:var(--paper); }
.pillar-line{ font-family:'Fraunces', serif; font-style:italic; color:var(--gold-bright); font-size:1rem; margin-bottom:28px; }
.sub-list{ display:flex; flex-direction:column; gap:20px; }
.sub-item{ padding-left:18px; border-left:1px solid var(--line); }
.sub-item h4{ font-size:0.96rem; font-weight:600; color:var(--paper); margin-bottom:5px; }
.sub-item p{ font-size:0.88rem; color:var(--paper-dim); }
@media (max-width:820px){ .pillar-card{ padding:38px 28px; } }

/* ---------- About: fotografía + copy ---------- */
.about-visual{ position:relative; }
.photo-stack{ position:relative; }
.photo-main{ width:100%; height:340px; object-fit:cover; border:1px solid var(--line); filter:saturate(0.92) contrast(1.02); }
.photo-accent{
  position:absolute; width:48%; height:180px; object-fit:cover; right:-22px; bottom:-30px;
  border:5px solid var(--ink); box-shadow:0 16px 34px rgba(30,24,14,0.22);
}
.about-visual .corner-tl, .about-visual .corner-br{ position:absolute; width:22px; height:22px; z-index:2; }
.about-visual .corner-tl{ top:-1px; left:-1px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.about-visual .corner-br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); }
.tagline-caption{ margin-top:44px; font-family:'Fraunces', serif; font-style:italic; font-size:1.25rem; color:var(--gold-bright); line-height:1.5; }
.tagline-caption .cap{ display:block; font-family:'JetBrains Mono', monospace; font-style:normal; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:10px; }

.about-copy p{ color:var(--paper-dim); font-size:1.02rem; margin-bottom:22px; max-width:540px; }
.about-copy p:first-child{ color:var(--paper); font-size:1.18rem; font-family:'Fraunces', serif; line-height:1.5; }
.pillars-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.pillar-mini{ border-top:1px solid var(--gold-dim); padding-top:16px; }
.pillar-mini h4{ font-size:0.9rem; font-weight:600; color:var(--paper); margin-bottom:8px; }
.pillar-mini p{ font-size:0.86rem; color:var(--muted); margin:0; }
@media (max-width:900px){
  .pillars-mini{ grid-template-columns:1fr; }
  .photo-accent{ width:52%; height:150px; right:-14px; bottom:-22px; }
}

/* ---------- Banner (foto de compromiso) ---------- */
.banner-bg{
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80');
  background-size:cover; background-position:center; filter:grayscale(0.1) contrast(1.05);
}
.banner-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,10,8,0.86), rgba(11,10,8,0.68)); }
.banner-content{ position:relative; z-index:1; max-width:640px; }
.banner-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:#e9c877; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.banner-eyebrow::before{ content:''; width:26px; height:1px; background:#c9a24a; }
.banner-content h2{ font-family:'Fraunces', serif; font-weight:400; font-size:clamp(1.9rem, 3.4vw, 2.7rem); color:#f5f1e6; line-height:1.25; }

/* ---------- Contact info ---------- */
.contact-info{ display:flex; flex-direction:column; gap:0; }
.info-row{ padding:26px 0; border-bottom:1px solid var(--line-soft); }
.info-row:first-child{ padding-top:0; }
.info-row .k{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-dim); display:block; margin-bottom:8px; }
.info-row .v{ font-family:'Fraunces', serif; font-size:1.18rem; color:var(--paper); }
.info-row a.v:hover{ color:var(--gold-bright); }
.info-note{ font-size:0.88rem; color:var(--muted); margin-top:28px; line-height:1.7; }

/* ---------- Formulario de contacto ---------- */
.contact-form{ border:1px solid var(--line); padding:44px; background:var(--panel); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  background:var(--ink); border:1px solid var(--line); color:var(--paper);
  padding:13px 14px; font-family:'Inter', sans-serif; font-size:0.92rem; transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a7c46' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
.form-submit{ width:100%; justify-content:center; margin-top:6px; }
.form-success{ display:none; font-size:0.9rem; color:var(--gold-bright); margin-top:14px; text-align:center; }
.form-error{ display:none; font-size:0.85rem; color:#b04a3a; margin-top:14px; text-align:center; }
@media (max-width:900px){ .contact-form{ padding:30px 24px; } }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- Footer meta ---------- */
.footer-meta{ font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--muted); text-align:right; line-height:1.9; }
.footer-meta a:hover{ color:var(--gold-bright); }
@media (max-width:600px){ .footer-meta{ text-align:left; } }