/*
 * ╔══════════════════════════════════════════════════════╗
 * ║  MARTLI CONSTRUCCIONES SRL — Base CSS Compartido    ║
 * ║  Versión : 1.1.0                                    ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  CHANGELOG                                          ║
 * ║  v1.0.0 — CSS base inicial, design system v2.2.0   ║
 * ║  v1.1.0 — Logo URL remota unificada, tagline        ║
 * ║           "Experiencia y Profesionalismo" en todos  ║
 * ║  Fecha   : 2026-04-18                               ║
 * ║  Uso     : Importado por todas las subpáginas       ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  TOKENS de diseño sincronizados con home v2.2.0     ║
 * ║  · Paleta: cream / white / ink / gold               ║
 * ║  · Tipografía: Barlow Condensed + Barlow            ║
 * ║  · Nav, Footer y Chatbot idénticos a la home        ║
 * ╚══════════════════════════════════════════════════════╝
 */

/* ── TOKENS ── */
:root {
  --gold:     #F0AA28;
  --gold-dk:  #D4921A;
  --gold-lt:  #FAB832;
  --cream:    #F7F4EF;
  --cream-dk: #EDE9E2;
  --white:    #FFFFFF;
  --ink:      #111111;
  --ink-mid:  #444444;
  --ink-lt:   #888888;
  --border:   #DEDAD3;
  --red:      #C0232A;
}

/* ── RESET & BASE ── */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:17px; }
body { font-family:'Barlow',sans-serif; background:var(--cream); color:var(--ink); overflow-x:hidden; line-height:1.65; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 5%;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--gold);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}
.logo-wrap { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-img  { height:38px; width:auto; object-fit:contain; }
.logo-div  { width:1px; height:26px; background:var(--border); }
.logo-tag  { font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-lt); line-height:1.3; }
.logo-tag strong { display:block; color:var(--ink); font-weight:700; font-size:14px; letter-spacing:1.5px; }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-mid); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-cta { background:var(--gold)!important; color:var(--ink)!important; padding:9px 22px; font-weight:700!important; clip-path:polygon(0 0,100% 0,100% 68%,90% 100%,0 100%); transition:background .2s!important; }
.nav-cta:hover { background:var(--gold-lt)!important; }

/* ── PAGE HEADER (breadcrumb hero) ── */
.page-header {
  margin-top:68px;
  background:var(--ink);
  padding:64px 6% 52px;
  position:relative;
  overflow:hidden;
}
.page-header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:4px;
  background:var(--gold);
}
.page-header-bg {
  position:absolute; inset:0;
  background:repeating-linear-gradient(-55deg,transparent,transparent 40px,rgba(255,255,255,.015) 40px,rgba(255,255,255,.015) 41px);
}
.breadcrumb {
  font-family:'Barlow Condensed',sans-serif; font-size:13px;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:16px; position:relative; z-index:2;
}
.breadcrumb a { color:var(--gold); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.page-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(40px,6vw,72px);
  font-weight:900; text-transform:uppercase;
  line-height:.92; letter-spacing:-1px;
  color:var(--white); position:relative; z-index:2;
}
.page-title em { font-style:normal; color:var(--gold); }

/* ── CONTENT LAYOUT ── */
.page-body { display:grid; grid-template-columns:1fr 320px; gap:0; }
.page-content { padding:72px 5% 72px 6%; background:var(--white); }
.page-sidebar { background:var(--cream); padding:72px 5% 72px 4%; border-left:1px solid var(--border); }

/* ── CONTENT TYPOGRAPHY ── */
.content-section { margin-bottom:52px; }
.content-section:last-child { margin-bottom:0; }

.content-label {
  display:flex; align-items:center; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold);
  margin-bottom:10px;
}
.content-label::before { content:''; width:18px; height:2px; background:var(--gold); }

.content-h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3vw,36px); font-weight:900;
  text-transform:uppercase; line-height:1; letter-spacing:-.3px;
  color:var(--ink); margin-bottom:20px;
}

.content-p { font-size:17px; font-weight:300; color:var(--ink-mid); line-height:1.8; margin-bottom:16px; }
.content-p:last-child { margin-bottom:0; }
.content-p strong { font-weight:600; color:var(--ink); }

.content-img {
  width:100%; height:auto; display:block;
  margin:32px 0; object-fit:cover;
  border-bottom:3px solid var(--gold);
}

/* Spec table */
.spec-table { width:100%; border-collapse:collapse; margin:24px 0; }
.spec-table th {
  font-family:'Barlow Condensed',sans-serif; font-size:12px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink); background:var(--cream-dk);
  padding:12px 16px; text-align:left; border-bottom:2px solid var(--gold);
}
.spec-table td {
  font-size:15px; font-weight:300; color:var(--ink-mid);
  padding:11px 16px; border-bottom:1px solid var(--border);
}
.spec-table tr:last-child td { border-bottom:none; }
.spec-table tr:hover td { background:var(--cream); }

/* Steps */
.steps { display:flex; flex-direction:column; gap:0; margin:24px 0; }
.step { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--border); }
.step:last-child { border-bottom:none; }
.step-num {
  font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:900;
  color:var(--gold); line-height:1; flex-shrink:0; width:40px;
}
.step-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.step-body { font-size:16px; font-weight:300; color:var(--ink-mid); line-height:1.7; }

/* Highlight box */
.highlight-box {
  background:var(--cream); border-left:4px solid var(--gold);
  padding:24px 28px; margin:28px 0;
}
.highlight-box p { font-size:17px; font-weight:400; color:var(--ink-mid); line-height:1.75; }

/* ── SIDEBAR ── */
.sidebar-widget { margin-bottom:40px; }
.sidebar-title {
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--ink);
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:2px solid var(--gold);
}
.sidebar-links { list-style:none; display:flex; flex-direction:column; gap:0; }
.sidebar-links li { border-bottom:1px solid var(--border); }
.sidebar-links a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:16px; font-weight:400;
  color:var(--ink-mid); text-decoration:none; transition:color .2s;
}
.sidebar-links a:hover { color:var(--gold); }
.sidebar-links a.current { color:var(--gold); font-weight:600; }
.sidebar-links a::after { content:'→'; font-size:14px; opacity:.4; }
.sidebar-links a:hover::after, .sidebar-links a.current::after { opacity:1; }

.sidebar-cta {
  background:var(--gold); padding:28px 24px;
  clip-path:polygon(0 0,100% 0,100% 92%,94% 100%,0 100%);
}
.sidebar-cta-title {
  font-family:'Barlow Condensed',sans-serif; font-size:22px;
  font-weight:900; text-transform:uppercase; color:var(--ink);
  line-height:1; margin-bottom:10px;
}
.sidebar-cta-sub { font-size:15px; color:rgba(17,17,17,.65); margin-bottom:20px; line-height:1.5; }
.sidebar-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--gold);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
  padding:12px 22px; clip-path:polygon(0 0,100% 0,100% 70%,90% 100%,0 100%);
  transition:opacity .2s;
}
.sidebar-cta-btn:hover { opacity:.85; }

/* ── CTA STRIP ── */
.cta-strip {
  background:var(--gold); padding:64px 6%;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.cta-strip::before,.cta-strip::after { content:''; position:absolute; border-radius:50%; border:60px solid rgba(0,0,0,.05); }
.cta-strip::before { width:420px; height:420px; right:-80px; top:-190px; }
.cta-strip::after  { width:240px; height:240px; right:290px; bottom:-130px; }
.cta-overline { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(17,17,17,.45); margin-bottom:8px; }
.cta-headline { font-family:'Barlow Condensed',sans-serif; font-size:clamp(32px,4.5vw,52px); font-weight:900; text-transform:uppercase; line-height:.93; letter-spacing:-.5px; color:var(--ink); }
.btn-ink { display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--gold); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; padding:14px 28px; clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%); white-space:nowrap; border:none; cursor:pointer; position:relative; z-index:2; transition:opacity .2s; }
.btn-ink:hover { opacity:.88; }
.btn-wa { display:inline-flex; align-items:center; gap:9px; background:rgba(17,17,17,.12); border:1.5px solid rgba(17,17,17,.2); color:var(--ink); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; padding:14px 24px; white-space:nowrap; position:relative; z-index:2; transition:background .2s; }
.btn-wa:hover { background:rgba(17,17,17,.2); }

/* ── FOOTER ── */
footer { background:var(--ink); padding:60px 6% 28px; }
.foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:60px; margin-bottom:48px; }
.foot-logo { height:36px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1); }
.foot-desc { font-size:15px; font-weight:300; color:#BBBBBB; line-height:1.75; max-width:300px; }
.foot-col-title { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#FFFFFF; margin-bottom:18px; border-bottom:1px solid #333; padding-bottom:10px; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-links a { font-size:15px; font-weight:400; color:#BBBBBB; text-decoration:none; transition:color .2s; }
.foot-links a:hover { color:var(--gold); }
.foot-bottom { border-top:1px solid #2A2A2A; padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.foot-copy { font-size:13px; color:#888888; }
.foot-social { display:flex; gap:8px; }
.soc-btn { width:40px; height:40px; border:1px solid #333; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:border-color .2s, background .2s; }
.soc-btn:hover { border-color:var(--gold); background:rgba(240,170,40,.08); }

/* ── CHAT ── */
.chat-launcher { position:fixed; bottom:28px; right:28px; z-index:8999; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.chat-bubble { background:var(--white); border:1px solid var(--border); box-shadow:0 4px 20px rgba(0,0,0,.1); border-radius:12px; padding:14px 18px; max-width:230px; font-size:14px; color:var(--ink-mid); line-height:1.45; cursor:pointer; animation:popUp .5s ease 1.8s both; }
.chat-bubble strong { color:var(--gold); }
.chat-btn { width:62px; height:62px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 4px 24px rgba(240,170,40,.45); transition:transform .2s, box-shadow .2s; animation:popUp .4s ease .9s both; position:relative; }
.chat-btn:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(240,170,40,.55); }
.chat-ping { position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:var(--red); border-radius:50%; border:2px solid var(--cream); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:.6;} }
@keyframes popUp { from{transform:translateY(18px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.chat-modal { position:fixed; bottom:104px; right:28px; z-index:8999; width:356px; background:var(--white); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:none; flex-direction:column; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.chat-modal.open { display:flex; animation:modalIn .25s ease; }
@keyframes modalIn { from{transform:scale(.92) translateY(10px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
.chat-head { background:var(--gold); padding:15px 18px; display:flex; align-items:center; justify-content:space-between; }
.chat-head-name { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink); }
.chat-head-sub { font-size:12px; color:rgba(17,17,17,.55); margin-top:2px; }
.chat-x { background:none; border:none; color:rgba(17,17,17,.45); cursor:pointer; font-size:20px; line-height:1; padding:4px; transition:color .2s; }
.chat-x:hover { color:var(--ink); }
.chat-body { padding:16px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; max-height:300px; }
.cmsg { padding:10px 14px; font-size:14px; line-height:1.5; max-width:86%; }
.cmsg.bot { background:var(--cream); color:var(--ink); align-self:flex-start; border-radius:4px 12px 12px 12px; }
.cmsg.usr { background:var(--gold); color:var(--ink); align-self:flex-end; border-radius:12px 4px 12px 12px; font-weight:600; }
.chat-opts { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.copt { background:rgba(240,170,40,.08); border:1px solid rgba(240,170,40,.3); color:var(--ink-mid); font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:9px 14px; text-align:left; cursor:pointer; border-radius:4px; transition:background .2s; }
.copt:hover { background:rgba(240,170,40,.18); color:var(--ink); }
.chat-foot { border-top:1px solid var(--border); padding:10px; display:flex; gap:8px; }
.cinput { flex:1; background:var(--cream); border:1px solid var(--border); color:var(--ink); font-family:'Barlow',sans-serif; font-size:14px; padding:10px 14px; outline:none; border-radius:4px; transition:border-color .2s; }
.cinput:focus { border-color:var(--gold); }
.cinput::placeholder { color:var(--ink-lt); }
.csend { background:var(--gold); border:none; color:var(--ink); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:1px; padding:10px 16px; border-radius:4px; cursor:pointer; transition:background .2s; }
.csend:hover { background:var(--gold-lt); }

/* ── FADE ── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.vis { opacity:1; transform:translateY(0); }

/* ── MOBILE ── */
@media(max-width:900px){
  .page-body { grid-template-columns:1fr; }
  .page-sidebar { border-left:none; border-top:1px solid var(--border); padding:48px 6%; }
  .cta-strip { grid-template-columns:1fr; }
  .foot-top { grid-template-columns:1fr; gap:40px; }
  .foot-bottom { flex-direction:column; gap:16px; }
  .nav-links { display:none; }
}

/* ── CRÉDITO ARGOO SHIMMER ──────────────────────────────
   Componente: Firma del desarrollador en footer.
   Recibe: —
   Hace: Pulso dorado cada 4s sobre texto sutil.
         Al hover detiene la animación y resalta en dorado.
   Retorna: —
   Versión: 1.0.0 — 2026-04-18
   ─────────────────────────────────────────────────────── */
@keyframes argoo-shimmer {
  0%,  70% { color: rgba(255,255,255,.28); }
  80%       { color: rgba(240,170,40,.85);
              text-shadow: 0 0 12px rgba(240,170,40,.35); }
  100%      { color: rgba(255,255,255,.28); }
}
.argoo-credit {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.28);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: argoo-shimmer 4s ease-in-out infinite;
  transition: color .2s, text-shadow .2s;
}
.argoo-credit:hover {
  animation: none;
  color: rgba(240,170,40,.9);
  text-shadow: 0 0 12px rgba(240,170,40,.35);
}
.argoo-credit img {
  border-radius: 2px;
  opacity: .45;
  transition: opacity .2s;
}
.argoo-credit:hover img { opacity: .9; }
.argoo-dev-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.argoo-dev-label {
  color: rgba(255,255,255,.18);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}