/* =========================================================
   SANTA MARÍA ADMINISTRACIONES — Design tokens
   ========================================================= */
:root{
  /* Color: paleta tomada del escudo (azul marino, dorado, marfil) */
  --navy-1000:#0000;
  --navy-900:#0E2338;
  --navy-800:#153350;
  --navy-700:#1D4066;
  --navy-600:#2A537F;
  --navy-500:#3E6D9C;
  --gold-500:#B7935A;
  --gold-400:#CBA872;
  --gold-200:#E7D6B0;
  --cream-50:#FAF6EC;
  --cream-header:#FCF5E9;   /* mismo tono de fondo que el PNG del escudo */
  --cream-100:#F2EAD6;
  --ink:#1C2430;
  --ink-soft:#4A5568;
  --white:#FFFFFF;

  /* Tipografía */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container-w:1180px;
  --radius-sm:6px;
  --radius-md:10px;
  --header-h:80px;

  /* Sombras */
  --shadow-sm:0 2px 10px rgba(14,35,56,.08);
  --shadow-md:0 14px 34px rgba(14,35,56,.14);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
img{max-width:100%;display:block;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,p{margin:0;}
input,textarea{font:inherit;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* =========================================================
   BASE
   ========================================================= */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:24px;
}

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--navy-900);
  color:var(--white);
  padding:12px 20px;
  z-index:999;
  border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--navy-900);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.15;
}

.section-kicker{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--gold-500);
  font-size:1.05rem;
  margin-bottom:10px;
}
.section-kicker-light{ color:var(--gold-400); }

/* Iconos traídos de la web (Iconify), tratados como imágenes de una sola pieza */
.icon{ width:19px; height:19px; flex-shrink:0; }

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.98rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  white-space:nowrap;
}

.btn-primary{
  background:#25D366;
  color:#0B2312;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-outline-hero{
  border:1.5px solid rgba(250,246,236,.55);
  color:var(--cream-50);
  padding:13.5px 26px;
}
.btn-outline-hero:hover{ background:rgba(250,246,236,.1); border-color:var(--cream-50); }

.btn-ghost-header{
  background:transparent;
  color:var(--navy-800);
  border:1.5px solid var(--navy-700);
  padding:9px 18px;
  font-size:.9rem;
}
.btn-ghost-header:hover{ background:var(--navy-800); color:var(--cream-50); }
.btn-ghost-header:hover .icon{ filter:brightness(0) invert(1); }

.btn-form{ width:100%; justify-content:center; margin-top:6px; }

/* =========================================================
   HEADER — fondo cálido y estable para que el PNG del escudo
   se integre sin recortes ni cajas raras
   ========================================================= */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:var(--cream-header);
  border-bottom:1px solid rgba(183,147,90,.18);
  transition:box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 6px 24px rgba(14,35,56,.1);
  height:90px;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{ display:flex; align-items:center; gap:13px; }

.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:110px;
  border-radius:50%;
  background:var(--cream-header);
  overflow:hidden;
  flex-shrink:0;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; }

.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--navy-900); }
.brand-sub{ font-size:.7rem; letter-spacing:.06em; color:var(--gold-500); }

.main-nav ul{ display:flex; gap:34px; }
.main-nav a{
  font-size:.95rem;
  font-weight:500;
  color:var(--navy-900);
  position:relative;
  padding-block:6px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:2px;
  background:var(--gold-500);
  transition:right .3s var(--ease);
}
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  position:relative;
}
.nav-toggle img{ width:24px; height:24px; position:absolute; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.nav-toggle .icon-menu-close{ opacity:0; transform:rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .icon-menu-open{ opacity:0; transform:rotate(90deg); }
.nav-toggle[aria-expanded="true"] .icon-menu-close{ opacity:1; transform:rotate(0); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* Espacio reservado para foto aérea de edificios.
   Para activarla: reemplazar el fondo de abajo por
   background-image:url('img/hero-bg.jpg'); */
.hero-media{
  position:absolute; inset:0;
  background:url(img/hero-overlay.png);
  background-size:cover;
  background-position:center;
  z-index:-2;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(1, 2, 3, 0.72) 65%, var(--navy-1000) 100%);
  z-index:-1;
}

.hero-inner{
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:120px;
  max-width:760px;
}

.kicker{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-400);
  font-size:1.15rem;
  margin-bottom:18px;
  opacity:0;
  animation:rise .8s var(--ease) .1s forwards;
}

.hero-title{
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  color:var(--cream-50);
  margin-bottom:22px;
  opacity:0;
  animation:rise .9s var(--ease) .25s forwards;
}

.hero-copy{
  font-size:1.1rem;
  color:var(--cream-100);
  max-width:56ch;
  margin-bottom:36px;
  opacity:0;
  animation:rise .9s var(--ease) .4s forwards;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  opacity:0;
  animation:rise .9s var(--ease) .55s forwards;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.skyline-divider{
  position:absolute;
  left:0; right:0; bottom:-1px;
  width:100%; height:auto;
  fill:var(--cream-50);
  z-index:1;
}

/* =========================================================
   SOBRE NOSOTROS
   ========================================================= */
.about{ padding:120px 0; background:var(--cream-50); }
.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:72px;
  align-items:start;
}
.about h2{ font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:22px; max-width:16ch; }
.lead{ font-size:1.15rem; color:var(--ink); margin-bottom:16px; }
.about-copy > p:not(.lead){ color:var(--ink-soft); margin-bottom:34px; max-width:62ch; }

.about-values{ display:flex; flex-direction:column; gap:26px; }
.about-values li{ display:flex; gap:18px; align-items:flex-start; }
.value-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
}
.value-icon img{ width:19px; height:19px; }
.about-values h3{ font-size:1.08rem; margin-bottom:4px; }
.about-values p{ color:var(--ink-soft); font-size:.98rem; }

.about-emblem{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, var(--cream-100), var(--cream-50));
  border:1px solid var(--gold-200);
  border-radius:var(--radius-sm);
  aspect-ratio:4/5;
}
.emblem-image{
  width:100%;
  height: 100%;
  filter:drop-shadow(0 18px 30px rgba(0, 0, 0, 0.14));
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services{
  padding:120px 0;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  position:relative;
}
.services-title{
  color:var(--cream-50);
  font-size:clamp(1.9rem,3vw,2.5rem);
  max-width:22ch;
  margin-bottom:56px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.service-card{
  background:rgba(250,246,236,.04);
  border:1px solid rgba(203,168,114,.25);
  border-radius:var(--radius-md);
  padding:38px 32px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-500);
  background:rgba(250,246,236,.07);
}

.service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  margin-bottom:22px;
  border-radius:50%;
  background:rgba(203,168,114,.12);
}
.service-icon img{ width:28px; height:28px; }

.service-card h3{ color:var(--cream-50); font-size:1.2rem; margin-bottom:10px; }
.service-card p{ color:var(--cream-100); opacity:.82; font-size:.98rem; }

/* =========================================================
   CÓMO TRABAJAMOS
   ========================================================= */
.process{ padding:120px 0; background:var(--cream-50); }
.process-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:72px;
}
.process-intro h2{ font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:18px; max-width:14ch; }
.process-intro p{ color:var(--ink-soft); max-width:42ch; }

.process-steps{ display:flex; flex-direction:column; gap:38px; }
.process-steps li{ display:flex; gap:24px; align-items:flex-start; }
.step-number{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid var(--gold-500);
  color:var(--navy-900);
  font-family:var(--font-display);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.process-steps h3{ font-size:1.1rem; margin-bottom:6px; }
.process-steps p{ color:var(--ink-soft); font-size:.98rem; max-width:52ch; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{ padding:120px 0; background:var(--navy-900); position:relative; overflow:hidden; }
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
}

.contact-info h2{ color:var(--cream-50); font-size:clamp(1.9rem,3vw,2.4rem); margin-bottom:18px; max-width:14ch; }
.contact-copy{ color:var(--cream-100); opacity:.85; max-width:44ch; margin-bottom:34px; }

.contact-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:46px; }
.contact-list a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--cream-50);
  font-weight:500;
  padding-bottom:6px;
  border-bottom:1px solid rgba(203,168,114,.3);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.contact-list a:hover{ color:var(--gold-400); border-color:var(--gold-400); }

.contact-emblem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--cream-header);
  opacity:.9;
}
.contact-emblem img{ width:100%; height:100%; object-fit:contain; }

.contact-form{
  background:var(--cream-50);
  border-radius:var(--radius-md);
  padding:42px;
  box-shadow:var(--shadow-md);
}
.contact-form h3{ font-size:1.3rem; margin-bottom:26px; }

.form-field{ margin-bottom:20px; display:flex; flex-direction:column; gap:7px; }
.form-field label{ font-size:.9rem; font-weight:600; color:var(--navy-900); }
.form-field .optional{ font-weight:400; color:var(--ink-soft); }

.form-field input,
.form-field textarea{
  border:1.5px solid #DDD3BC;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  background:var(--white);
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(183,147,90,.18);
  outline:none;
}
.form-field.has-error input,
.form-field.has-error textarea{ border-color:#C0453A; }

.field-error{
  font-size:.82rem;
  color:#C0453A;
  min-height:1em;
}

.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:12px; text-align:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--navy-900); border-top:1px solid rgba(203,168,114,.2); padding-top:56px; }
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  padding-bottom:40px;
}
.brand-footer .brand-name{ color:var(--cream-50); }
.brand-mark-footer{ background:var(--cream-header); }
.footer-nav{ display:flex; gap:28px; }
.footer-nav a{ color:var(--cream-100); font-size:.92rem; opacity:.85; }
.footer-nav a:hover{ opacity:1; color:var(--gold-400); }
.footer-contact{ display:flex; flex-direction:column; gap:6px; font-size:.92rem; }
.footer-contact a{ color:var(--cream-100); opacity:.85; }
.footer-contact a:hover{ opacity:1; color:var(--gold-400); }

.footer-bottom{
  border-top:1px solid rgba(203,168,114,.15);
  padding:20px 24px;
  text-align:center;
}
.footer-bottom p{ color:var(--cream-100); opacity:.55; font-size:.82rem; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.whatsapp-float{
  position:fixed;
  right:22px; bottom:22px;
  width:60px; height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(14,35,56,.35);
  z-index:200;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:float-pulse 3.2s ease-in-out infinite;
}
.whatsapp-float img{ width:30px; height:30px; }
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 14px 32px rgba(14,35,56,.45); }

@keyframes float-pulse{
  0%, 100%{ box-shadow:0 10px 26px rgba(14,35,56,.35), 0 0 0 0 rgba(37,211,102,.4); }
  50%{ box-shadow:0 10px 26px rgba(14,35,56,.35), 0 0 0 10px rgba(37,211,102,0); }
}

/* =========================================================
   SCROLL REVEAL (una sola vez, sutil)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .about-grid,
  .process-grid,
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
  .about-emblem{ order:-1; max-width:320px; margin-inline:auto; aspect-ratio:1/1; }
  .services-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:var(--header-h);
    left:0; right:0;
    background:var(--cream-header);
    box-shadow:var(--shadow-md);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .main-nav.is-open{ max-height:320px; }
  .main-nav ul{ flex-direction:column; gap:0; padding:8px 24px 20px; }
  .main-nav a{ display:block; padding:14px 0; border-bottom:1px solid var(--cream-100); }
  .main-nav a::after{ display:none; }

  .nav-toggle{ display:flex; }
  .header-actions .btn-ghost-header span{ display:none; }
  .header-actions .btn-ghost-header{ padding:10px; }

  .services-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .container{ padding-inline:20px; }
  .hero-inner{ padding-bottom:90px; }
  .about,.services,.process,.contact{ padding:80px 0; }
  .contact-form{ padding:28px; }
  .btn{ padding:13px 20px; font-size:.92rem; }
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
}