/*
  ALAUDAE INGENIERÍA SPA
  alaudae-shared.css — Design System compartido
  Consistente con index.html aprobado
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Mulish:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --navy:        #002b5c;
  --navy-dark:   #001a3a;
  --navy-mid:    #003d82;
  --navy-light:  #004a99;
  --gold:        #c9a84c;
  --gold-light:  #e8c96e;
  --gold-dim:    rgba(201,168,76,0.15);
  --gold-border: rgba(201,168,76,0.25);
  --white:       #ffffff;
  --off-white:   #f4f7fc;
  --text-body:   #1a2e4a;
  --text-muted:  #5a7099;
  --glass-nav:   rgba(0,43,92,0.80);
  --glass-card:  rgba(0,43,92,0.06);
  --shadow-sm:   0 4px 16px rgba(0,43,92,0.10);
  --shadow-md:   0 8px 32px rgba(0,43,92,0.14);
  --shadow-lg:   0 20px 60px rgba(0,43,92,0.18);
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* ── BASE ── */
body {
  font-family: 'Mulish', 'Segoe UI', Arial, sans-serif;
  background: var(--off-white);
  color: var(--text-body);
  line-height: 1.7;
}

/* ── BACKGROUND (pages with photo bg) ── */
.bg-photo {
  position: fixed; inset: 0; z-index: -2;
  background: url('https://images.unsplash.com/photo-1527443224154-c4a3942d1b92?auto=format&fit=crop&w=1600&q=60')
    no-repeat center/cover;
  filter: brightness(0.38) blur(1px);
}
.bg-photo::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,26,58,0.45) 0%, rgba(0,26,58,0.72) 100%);
}

/* ── NAVBAR ── */
.navbar {
  position: sticky; top:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 56px; height: 82px;
  background: var(--glass-nav);
  backdrop-filter: blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom: 1px solid var(--gold-border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.28);
}
.navbar-logo-wrap { display:flex; align-items:center; gap:16px; }
.navbar img {
  height:64px; transition: transform 0.35s, filter 0.35s;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.navbar img:hover { transform:scale(1.06); filter:drop-shadow(0 0 12px rgba(201,168,76,0.45)); }
.navbar-divider { width:1px; height:36px; background:linear-gradient(180deg,transparent,rgba(201,168,76,0.5),transparent); }
.navbar-tagline { font-size:11px; font-weight:300; letter-spacing:2.5px; text-transform:uppercase; color:rgba(201,168,76,0.8); color:var(--gold); }
.menu-tabs { display:flex; gap:36px; align-items:center; }
.menu-tabs a {
  color:rgba(255,255,255,0.78); text-decoration:none;
  font-weight:500; font-size:14px; letter-spacing:0.5px;
  padding:6px 0; position:relative; transition:color 0.25s;
}
.menu-tabs a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:2px; transition:width 0.3s ease;
}
.menu-tabs a:hover, .menu-tabs a.active { color:var(--white); }
.menu-tabs a:hover::after, .menu-tabs a.active::after { width:100%; }

/* ── PAGE HEADER ── */
.page-header {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
  padding: 72px 56px 60px;
  position: relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; inset:0;
  background: url('https://images.unsplash.com/photo-1527443224154-c4a3942d1b92?auto=format&fit=crop&w=1600&q=60')
    no-repeat center/cover;
  opacity: 0.08;
}
.page-header::after {
  content:''; position:absolute;
  right:-60px; top:-60px; width:320px; height:320px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
}
.page-header-inner { position:relative; z-index:1; max-width:1100px; margin:0 auto; }
.page-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.page-eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--gold); }
.page-header h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,4vw,52px); font-weight:700;
  color:var(--white); letter-spacing:-0.5px; line-height:1.1;
  margin-bottom:16px;
}
.page-header h1 span { color:var(--gold); }
.page-header-sub { font-size:16px; color:rgba(255,255,255,0.65); font-weight:300; max-width:560px; }

/* ── MAIN CONTENT ── */
.page-content {
  max-width:1100px; margin:0 auto;
  padding: 72px 56px 96px;
}

/* ── SECTION ── */
.section { margin-bottom:80px; }
.section-label {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.section-label::after { content:''; flex:0 0 32px; height:1px; background:var(--gold); }
.section h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(22px,2.5vw,30px); font-weight:600;
  color:var(--navy); margin-bottom:20px; line-height:1.2;
}

/* ── SPLIT LAYOUT ── */
.split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center; margin-bottom:80px;
}
.split.reverse { direction:rtl; }
.split.reverse > * { direction:ltr; }
.split img {
  width:100%; border-radius:var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s ease, box-shadow 0.4s;
}
.split img:hover { transform:scale(1.02); box-shadow:0 28px 72px rgba(0,43,92,0.22); }

/* ── HIGHLIGHT BOX ── */
.highlight {
  background: linear-gradient(135deg, rgba(0,43,92,0.05), rgba(201,168,76,0.06));
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 24px; margin:20px 0;
  font-size:15px; font-style:italic; color:var(--navy);
  line-height:1.7;
}

/* ── CARD ── */
.card {
  background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:32px;
  border:1px solid rgba(0,43,92,0.06);
  transition:box-shadow 0.3s, transform 0.3s;
}
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card-accent { border-top:3px solid var(--gold); }

/* ── GRID CARDS ── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }

/* ── INFO CARD (contact style) ── */
.info-card {
  background:var(--off-white); padding:28px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); border:1px solid rgba(0,43,92,0.07);
}
.info-card h3 { font-family:'Playfair Display',serif; font-size:18px; color:var(--navy); margin-bottom:8px; }
.info-card p { font-size:15px; color:var(--text-muted); line-height:1.6; }
.info-card-featured {
  background:linear-gradient(135deg, var(--navy), var(--navy-mid));
  color:var(--white); padding:28px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.info-card-featured h3 { font-family:'Playfair Display',serif; font-size:20px; color:var(--gold); margin-bottom:10px; }
.info-card-featured p { font-size:15px; color:rgba(255,255,255,0.8); line-height:1.6; }

/* ── TABLE ── */
.tbl-wrap { overflow-x:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; background:var(--white); }
thead tr { background:linear-gradient(135deg, var(--navy), var(--navy-mid)); }
thead th {
  padding:16px 18px; text-align:left; color:var(--white);
  font-size:13px; font-weight:600; letter-spacing:0.5px;
}
thead th:first-child { border-radius:var(--radius-md) 0 0 0; }
thead th:last-child  { border-radius:0 var(--radius-md) 0 0; }
tbody td {
  padding:14px 18px; border-bottom:1px solid rgba(0,43,92,0.07);
  font-size:14px; color:var(--text-body); vertical-align:top;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:nth-child(even) td { background:rgba(0,43,92,0.025); }
tbody tr:hover td { background:rgba(201,168,76,0.06); }
td strong { color:var(--navy); }

/* ── QUOTE ── */
.blockquote {
  border-left:4px solid var(--gold); margin:0;
  padding:24px 28px;
  background:rgba(0,43,92,0.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.blockquote p { font-size:16px; font-style:italic; color:var(--navy); line-height:1.8; }

/* ── SUMMARY BOX ── */
.summary-box {
  background:linear-gradient(135deg, var(--navy), var(--navy-mid));
  color:var(--white); padding:56px 48px; border-radius:var(--radius-lg);
  text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.summary-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,168,76,0.15) 0%, transparent 60%);
}
.summary-box p { position:relative; font-size:18px; line-height:1.85; max-width:720px; margin:0 auto; }
.summary-box strong { color:var(--gold); }

/* ── FORM ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-group label { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-muted); }
input[type=text], input[type=email], input[type=tel], textarea, select {
  padding:14px 16px; border-radius:var(--radius-sm);
  border:1.5px solid rgba(0,43,92,0.15); font-family:'Mulish',sans-serif;
  font-size:15px; color:var(--text-body); background:var(--white);
  transition:border 0.3s, box-shadow 0.3s; outline:none;
}
input:focus, textarea:focus, select:focus {
  border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,43,92,0.08);
}
textarea { resize:vertical; min-height:120px; }

/* ── BUTTON ── */
.btn-primary {
  display:inline-block; padding:14px 32px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--white); font-family:'Mulish',sans-serif;
  font-size:15px; font-weight:700; border:none; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:transform 0.3s, box-shadow 0.3s;
  letter-spacing:0.3px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,43,92,0.3); }
.btn-gold {
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--navy); font-weight:700;
}
.btn-gold:hover { box-shadow:0 8px 24px rgba(201,168,76,0.35); }

/* ── SUCCESS MSG ── */
.success-msg {
  display:none; background:#edfff4; border-left:5px solid #28a745;
  padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:20px;
  font-weight:600; color:#155724; font-size:15px;
}

/* ── FOOTER ── */
footer {
  background:linear-gradient(180deg, var(--navy-dark) 0%, #000f22 100%);
  border-top:1px solid var(--gold-border);
  color:rgba(255,255,255,0.45); text-align:center;
  padding:32px 20px; font-size:13px; letter-spacing:0.3px;
}
footer span { color:var(--gold); }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .navbar{padding:0 28px;}
  .navbar-tagline,.navbar-divider{display:none;}
  .page-content{padding:56px 28px 72px;}
  .page-header{padding:56px 28px 48px;}
}
@media(max-width:768px){
  .navbar{flex-direction:column;height:auto;padding:18px 20px;gap:14px;}
  .menu-tabs{gap:20px;flex-wrap:wrap;justify-content:center;}
  .menu-tabs a{font-size:13px;}
  .split,.split.reverse{grid-template-columns:1fr;direction:ltr;gap:32px;}
  .page-content{padding:40px 20px 60px;}
  .page-header{padding:48px 20px 40px;}
  .card-grid{grid-template-columns:1fr;}
  .summary-box{padding:40px 24px;}
}