/* ==========================================================================
   GAIA TRAVEL GROUP — tarjeta de contacto digital
   Página autónoma: no depende del CSS del sitio para poder abrirse sola
   desde un QR, en cualquier teléfono y sin conexión rápida.
   ========================================================================== */

:root{
  --ink:#0C3666;
  --ink-deep:#082548;
  --ink-70:#1E2A3A;
  --ink-45:#4A5766;
  --white:#FFFFFF;
  --ivory:#F5F5F5;
  --line:rgba(12,54,102,.15);
  --green:#179224;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:18px; -webkit-text-size-adjust:100%; }

body{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0rem,4vw,2.5rem);
  background:var(--ivory);
  color:var(--ink-70);
  font-family:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400; font-size:1rem; line-height:1.6;
}

.card{
  width:100%; max-width:430px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(8,37,72,.13);
  overflow:hidden;
}

/* ---------- cresta ---------- */

.card__crest{
  display:flex; align-items:center; justify-content:center;
  padding:2.3rem 1.6rem 3.6rem;
  background:
    radial-gradient(120% 140% at 50% 0%, #14477F 0%, var(--ink) 42%, var(--ink-deep) 100%);
}
.card__crest img{ width:auto; height:52px; display:block; }

/* ---------- cuerpo ---------- */

.card__body{
  position:relative;
  padding:0 clamp(1.4rem,5vw,2.2rem) clamp(1.8rem,5vw,2.4rem);
  text-align:center;
}

.card__avatar{
  width:120px; height:120px; margin:-60px auto 1.15rem;
  border-radius:50%; overflow:hidden;
  background:var(--white);
  border:3px solid var(--white);
  box-shadow:0 8px 24px rgba(8,37,72,.20);
  display:flex; align-items:center; justify-content:center;
}
.card__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sin retrato, un monograma sobrio: nunca un hueco gris. */
.card__avatar .mono{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--ink) 0%, var(--ink-deep) 100%);
  color:var(--white);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:2.3rem; letter-spacing:.06em; line-height:1;
}

.card__name{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500; font-size:clamp(1.7rem,6vw,2.05rem); line-height:1.16;
  color:var(--ink); letter-spacing:.005em;
}
.card__role{
  margin-top:.5rem;
  font-size:.8rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-45);
}
.card__org{
  margin-top:.35rem;
  font-size:.86rem; color:var(--ink-70);
}

/* ---------- acción principal ---------- */

.card__save{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; margin-top:1.6rem; padding:1rem 1.4rem;
  background:var(--ink); color:var(--white);
  text-decoration:none;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease);
}
.card__save:hover{ background:var(--ink-deep); }
.card__save svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- enlaces ---------- */

.card__links{ list-style:none; margin-top:1.5rem; text-align:start; }
.card__links li + li{ border-top:1px solid var(--line); }
.card__links a{
  display:flex; align-items:center; gap:.95rem;
  padding:.85rem .2rem;
  color:var(--ink-70); text-decoration:none;
  transition:color .35s var(--ease);
}
.card__links a:hover{ color:var(--ink); }
.card__links svg{
  width:21px; height:21px; flex:none;
  fill:none; stroke:var(--ink); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.card__links li:first-child svg{ stroke:var(--green); }
.card__links span{ display:flex; flex-direction:column; min-width:0; }
.card__links strong{
  font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
}
.card__links small{
  font-size:.92rem; color:var(--ink-70);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
}

/* ---------- pie ---------- */

.card__addr{
  margin-top:1.5rem; padding-top:1.3rem;
  border-top:1px solid var(--line);
  font-style:normal; font-size:.8rem; line-height:1.7; color:var(--ink-45);
}

.card__share{
  margin-top:1.2rem; padding:.7rem 1.5rem;
  background:transparent; border:1px solid var(--line);
  color:var(--ink); cursor:pointer;
  font-family:inherit; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.card__share:hover{ border-color:var(--ink); }

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