/* ================================================
   HOTEL ASTURIAS — LINKTREE
   Palette: beige #d4b996 | black #2e2e2e | white
   Layout: icon row + bento grid con imagenes
   ================================================ */

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

:root {
  --beige:       #d4b996;
  --beige-dark:  #c4a67e;
  --black:       #2e2e2e;
  --card-bg:     #2e2e2e;
  --card-hover:  #3a3a3a;
  --white:       #ffffff;
  --silver:      #c8c8c8;
  --radius-card: 18px;
  --transition:  0.25s ease;
}

html { height: 100%; }

body {
  min-height: 100%;
  background-color: var(--beige);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(46,46,46,0.10) 0%, transparent 55%);
  font-family: 'Lato', sans-serif;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px 60px;
}

/* ── Outer wrapper ─────────────────────────────── */
.page-wrapper { width: 100%; max-width: 480px; }

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ══════════════════════════════════════════════
   PROFILE
══════════════════════════════════════════════ */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--black);
  border: 4px solid var(--black);
  box-shadow: 0 6px 28px rgba(46,46,46,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Silver shine sweep on hover */
.logo-ring::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(200,200,200,0.32),
    rgba(255,255,255,0.55),
    rgba(200,200,200,0.32),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.logo-ring:hover::before { left: 150%; }
.logo-ring:hover {
  border-color: var(--silver);
  box-shadow: 0 0 0 3px rgba(200,200,200,0.40), 0 8px 32px rgba(46,46,46,0.45);
  transform: scale(1.04);
}

.logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.hotel-name {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 700;
  color: var(--black); letter-spacing: 0.04em; text-align: center;
}

.hotel-tagline {
  font-size: 0.875rem; font-weight: 300;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--black); opacity: 0.70;
}

/* ══════════════════════════════════════════════
   ICON ROW
══════════════════════════════════════════════ */
.icon-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
  width: 100%;
}

.icon-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: var(--white);
  background: var(--black);
  box-shadow: 0 4px 14px rgba(46,46,46,0.28);
  position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.icon-btn svg { width: 24px; height: 24px; fill: currentColor; position: relative; z-index: 1; }

.icon-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
}
.icon-btn:hover::before { left: 150%; }
.icon-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 22px rgba(46,46,46,0.38); }
.icon-btn:active { transform: scale(0.97); }

.icon-btn--ig   { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.icon-btn--wa   { background: #25d366; }
.icon-btn--web  { background: #4a90d9; }
.icon-btn--maps { background: #ea4335; }

.icon-row-labels {
  display: flex; justify-content: center;
  gap: 20px; width: 100%; margin-bottom: 28px;
}

.icon-row-labels span {
  width: 54px; text-align: center;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--black);
  opacity: 0.70; text-transform: uppercase; white-space: nowrap;
}

/* ── Ornament ──────────────────────────────────── */
.ornament {
  display: flex; align-items: center;
  gap: 10px; width: 100%; margin-bottom: 22px;
  color: var(--black); opacity: 0.35;
}
.ornament .line    { flex: 1; height: 1px; background: var(--black); }
.ornament .diamond { width: 12px; height: 12px; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   BENTO GRID
══════════════════════════════════════════════ */
.bento-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 120px;
  gap: 12px;
}

/* ── Card base ─────────────────────────────────── */
.bento-card {
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 20px rgba(46,46,46,0.28);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);

  /* Background image via CSS variable — falls back to dark if no image */
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-color: var(--card-bg);
}

/* Dark overlay so text is always readable over the image */
.bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(20,15,10,0.55) 0%,
    rgba(20,15,10,0.30) 50%,
    rgba(20,15,10,0.65) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Shine sweep on top of overlay */
.bento-card::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(212,185,150,0.16), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  z-index: 1;
}
.bento-card:hover::before { left: 130%; }

.bento-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 10px 32px rgba(46,46,46,0.40);
}
.bento-card:active { transform: translateY(0) scale(1); }

/* Bring icon and label above overlay */
.bento-icon, .bento-label, .bento-arrow { position: relative; z-index: 2; }

/* ── Span variants ─────────────────────────────── */
.bento-full {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 80px;
  grid-auto-rows: unset;
}

.bento-half { grid-column: span 1; }

.bento-tall { grid-row: span 2; }

/* Mail: beige tint, no image */
.bento-mail {
  background-image: none;
  background-color: var(--beige-dark);
}
.bento-mail .bento-overlay { background: linear-gradient(160deg, rgba(180,140,100,0.30) 0%, rgba(180,140,100,0.10) 100%); }
.bento-mail .bento-label   { color: var(--black); font-size: 0.90rem; }
.bento-mail .bento-arrow   { color: var(--black); opacity: 0.60; }
.bento-mail .bento-icon svg{ fill: var(--black); }
.bento-mail .bento-icon    { background: rgba(46,46,46,0.15); }
.bento-mail:hover { background-color: var(--beige); }

/* ── Icon inside card ─────────────────────────── */
.bento-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}

.bento-icon svg { width: 22px; height: 22px; fill: var(--white); }

/* For half/tall cards: icon top, label bottom */
.bento-half .bento-icon,
.bento-tall .bento-icon { margin-bottom: auto; }

/* ── Label ─────────────────────────────────────── */
.bento-label {
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--white);
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.bento-full .bento-label { flex: 1; font-size: 1rem; }

/* ── Arrow (full-width) ────────────────────────── */
.bento-arrow {
  font-size: 1.5rem; line-height: 1;
  color: rgba(255,255,255,0.70); font-weight: 300;
  transition: transform var(--transition);
}
.bento-card:hover .bento-arrow { transform: translateX(4px); }

/* ── Footer ────────────────────────────────────── */
.footer { margin-top: 36px; text-align: center; }
.footer p {
  font-size: 0.72rem; font-weight: 300;
  letter-spacing: 0.08em; color: var(--black);
  opacity: 0.50; text-transform: uppercase;
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 380px) {
  .hotel-name { font-size: 1.65rem; }
  .icon-btn   { width: 46px; height: 46px; }
  .icon-row, .icon-row-labels { gap: 14px; }
  .icon-row-labels span { width: 46px; font-size: 0.60rem; }
  .bento-grid { grid-auto-rows: 105px; gap: 10px; }
  .bento-full { height: 70px; }
}