/* Delys — hoja de estilos base
   Paleta tomada de las fichas del negocio, para que web y documentos
   se vean como la misma marca. */

:root{
  --ground:#F2F4F0;
  --paper:#FFFFFF;
  --ink:#16211F;
  --ink2:#586461;
  --muted:#8A9491;
  --line:#E3E7E0;
  --mar:#0E4A63;      /* azul de mar — color principal */
  --mar-d:#093646;
  --limon:#8FA518;    /* acento */
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp:'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:28px 16px 48px;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ---- portada ---- */
.hero{
  background:var(--mar);
  color:#fff;
  border-radius:16px;
  padding:40px 28px 36px;
  text-align:center;
}
.eyebrow{
  margin:0 0 12px;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#A9C8D7;
  font-weight:600;
}
h1{
  font-family:var(--disp);
  font-size:clamp(44px, 13vw, 62px);
  font-weight:800;
  letter-spacing:-.035em;
  margin:0 0 14px;
  line-height:1;
}
.lead{
  margin:0;
  font-size:17px;
  line-height:1.5;
  color:#DCEAF0;
}

/* ---- tarjetas ---- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 24px;
}
h2{
  font-family:var(--disp);
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
address{
  font-style:normal;
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink2);
  margin-bottom:18px;
}
.pendiente{
  margin:0;
  color:var(--muted);
  font-style:italic;
}
.mail{margin:16px 0 0;font-size:15px}
.mail a{color:var(--mar);text-decoration:none}
.mail a:hover{text-decoration:underline}

/* ---- botones ---- */
.btn{
  display:block;
  text-align:center;
  background:var(--limon);
  color:#1D2405;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  padding:14px 20px;
  border-radius:10px;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn-alt{
  background:transparent;
  color:var(--mar);
  border:1.5px solid var(--mar);
}
.btn-alt:hover{background:var(--mar);color:#fff;filter:none}
a:focus-visible{outline:3px solid var(--mar);outline-offset:3px}

/* ---- pie ---- */
footer{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding-top:10px;
}
footer p{margin:0}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}