/* ============================================
   BASE.CSS — Reset, Variables, Typography
   Multiservicios El Ángel — Navy & Orange
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: 'Inter', sans-serif; cursor: pointer; }
input, select, textarea { font-family: 'Inter', sans-serif; }

:root {
  /* Brand */
  --orange:        #f5820a;
  --orange-dark:   #d96e00;
  --orange-light:  #fff3e0;
  --orange-mid:    #ffe0b2;
  --navy:          #1a2744;
  --navy-dark:     #111d36;
  --navy-light:    #243156;

  /* UI */
  --text:          #1a1a2e;
  --text-soft:     #374151;
  --muted:         #6b7280;
  --border:        #e5e7eb;
  --bg:            #ffffff;
  --bg-soft:       #fafafa;
  --bg-warm:       #fff8f0;
  --green:         #059669;
  --green-light:   #d1fae5;
  --white:         #ffffff;

  /* Layout */
  --max-w:     1100px;
  --nav-h:     70px;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.13);
  --shadow-orange: 0 8px 32px rgba(245,130,10,.25);
}

h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.15; }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
p  { font-size: 0.97rem; line-height: 1.7; color: var(--text-soft); }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 1.5rem; }
.section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--orange); margin-bottom: 0.6rem; display: block; }
.section-title { margin-bottom: 0.75rem; color: var(--text); }
.section-sub { color: var(--muted); max-width: 520px; margin-bottom: 2.5rem; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-orange { color: var(--orange) !important; }

.skip-link { position: absolute; top: -100px; left: 1rem; background: var(--orange); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-sm); z-index: 9999; transition: top .2s; }
.skip-link:focus { top: .75rem; }

/* Fade-in animation for sections */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .section { padding: 3.5rem 1rem; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) { .hide-desktop { display: none !important; } }