/* ============================================================
   Piumer Age Verify – Estilo Corporativo
   Negro + Dorado · Identidad Piumer.es
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --pav-overlay:      rgba(0, 0, 0, 0.96);
  --pav-modal-bg:     #0a0a0a;
  --pav-modal-bg2:    #111111;
  --pav-border:       rgba(193, 161, 90, 0.35);
  --pav-border-light: rgba(193, 161, 90, 0.15);

  /* Paleta dorada extraída del logo Piumer */
  --pav-gold:         #c1a15a;
  --pav-gold-mid:     #d4b470;
  --pav-gold-light:   #e8cf96;
  --pav-gold-dim:     rgba(193, 161, 90, 0.6);

  --pav-white:        #f5f0e8;
  --pav-muted:        #6a6050;
  --pav-radius:       0px;         /* Piumer usa esquinas rectas */

  --pav-font-display: 'Playfair Display', Georgia, serif;
  --pav-font-body:    'Raleway', sans-serif;

  --pav-shadow: 0 0 80px rgba(193, 161, 90, 0.08),
                0 40px 100px rgba(0, 0, 0, 0.9);
}

/* ── Overlay ── */
.piumer-age-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pav-overlay);
  backdrop-filter: blur(8px) saturate(0.4);
  -webkit-backdrop-filter: blur(8px) saturate(0.4);
  padding: 1rem;
  animation: pav-in 0.5s ease forwards;
}

.piumer-age-overlay--hidden {
  animation: pav-out 0.45s ease forwards;
  pointer-events: none;
}

@keyframes pav-in  { from { opacity:0 } to { opacity:1 } }
@keyframes pav-out { from { opacity:1 } to { opacity:0 } }

/* ── Modal ── */
.piumer-age-modal {
  position: relative;
  background: linear-gradient(160deg, var(--pav-modal-bg) 0%, var(--pav-modal-bg2) 100%);
  border: 1px solid var(--pav-border);
  max-width: 460px;
  width: 100%;
  padding: 3rem 2.75rem 2.5rem;
  text-align: center;
  box-shadow: var(--pav-shadow);
  animation: pav-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  /* Sutil textura de fondo */
  background-image:
    linear-gradient(160deg, #0a0a0a 0%, #111111 100%),
    radial-gradient(ellipse at 50% 0%, rgba(193,161,90,0.07) 0%, transparent 60%);
}

@keyframes pav-rise {
  from { opacity:0; transform: translateY(20px) scale(0.98) }
  to   { opacity:1; transform: translateY(0)    scale(1)    }
}

/* ── Ornamentos de esquina ── */
.pav-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--pav-gold);
  border-style: solid;
  opacity: 0.6;
}
.pav-corner--tl { top:14px;    left:14px;    border-width: 1px 0 0 1px; }
.pav-corner--tr { top:14px;    right:14px;   border-width: 1px 1px 0 0; }
.pav-corner--bl { bottom:14px; left:14px;    border-width: 0 0 1px 1px; }
.pav-corner--br { bottom:14px; right:14px;   border-width: 0 1px 1px 0; }

/* ── Logo ── */
.piumer-age-logo {
  margin-bottom: 1.6rem;
}
.piumer-age-logo-img {
  height: 56px;
  width: auto;
  display: inline-block;
  /* El logo tiene fondo negro — lo hacemos mix-blend para que encaje siempre */
  filter: drop-shadow(0 2px 12px rgba(193,161,90,0.3));
}

/* ── Divisor con estrella ── */
.pav-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 1.6rem;
  max-width: 280px;
}
.pav-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pav-gold-dim), transparent);
}
.pav-divider__icon {
  width: 14px;
  height: 14px;
  color: var(--pav-gold);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Badge 18+ ── */
.piumer-age-badge-wrap {
  margin-bottom: 1.25rem;
}
.piumer-age-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  border: 2px solid var(--pav-gold);
  border-radius: 50%;
  width: 66px;
  height: 66px;
  justify-content: center;
  align-items: center;
  color: var(--pav-gold);
  box-shadow: 0 0 20px rgba(193,161,90,0.15), inset 0 0 20px rgba(193,161,90,0.04);
}
.piumer-age-badge span {
  font-family: var(--pav-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.piumer-age-badge sup {
  font-family: var(--pav-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: -6px;
}

/* ── Textos ── */
.piumer-age-title {
  font-family: var(--pav-font-display);
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--pav-white);
  margin: 0 0 0.3rem;
  letter-spacing: 0.04em;
}

.piumer-age-subtitle {
  font-family: var(--pav-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pav-gold);
  margin: 0 0 1.25rem;
}
.piumer-age-subtitle em {
  font-style: normal;
}

.piumer-age-desc {
  font-family: var(--pav-font-body);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--pav-muted);
  line-height: 1.75;
  margin: 0 0 2rem;
  letter-spacing: 0.02em;
}
.piumer-age-desc strong {
  color: var(--pav-white);
  font-weight: 500;
}

/* ── Botones ── */
.piumer-age-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.piumer-btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-family: var(--pav-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.28s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

/* Botón Sí – dorado sólido */
.piumer-btn--yes {
  background: linear-gradient(135deg, var(--pav-gold) 0%, var(--pav-gold-mid) 50%, var(--pav-gold) 100%);
  background-size: 200% 100%;
  color: #0a0a0a;
  border-color: var(--pav-gold-mid);
}
.piumer-btn--yes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pav-gold-light) 0%, var(--pav-gold-mid) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.piumer-btn--yes:hover::after { opacity: 1; }
.piumer-btn--yes:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(193,161,90,0.3); }
.piumer-btn--yes:active { transform: translateY(0); }
.piumer-btn--yes span { position: relative; z-index: 1; }

/* Botón No – contorno discreto */
.piumer-btn--no {
  background: transparent;
  color: var(--pav-muted);
  border-color: rgba(106,96,80,0.35);
}
.piumer-btn--no:hover {
  color: var(--pav-white);
  border-color: var(--pav-border);
  background: rgba(255,255,255,0.03);
}

/* ── Legal ── */
.piumer-age-legal {
  font-family: var(--pav-font-body);
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--pav-muted);
  line-height: 1.65;
  margin: 0;
  opacity: 0.75;
}
.piumer-age-legal a {
  color: var(--pav-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.piumer-age-legal a:hover { border-bottom-color: var(--pav-gold); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .piumer-age-modal {
    padding: 2.25rem 1.5rem 2rem;
  }
  .piumer-age-title { font-size: 1.35rem; }
  .piumer-age-logo-img { height: 44px; }
}