@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@400;600&family=Nunito:wght@400;600;700&display=swap');

:root {
  --oc-oro:       #8B6914;
  --oc-oro-claro: #C9A84C;
  --oc-oro-fondo: #F5E6C0;
  --oc-crema:     #FFFDF5;
  --oc-marron:    #5C3D0A;
  --oc-serif:     "EB Garamond", Georgia, serif;
  --oc-display:   "Cinzel", serif;
  /* Niños */
  --oc-pastel-rose:   #FFE4E1;
  --oc-pastel-blue:   #E0F0FF;
  --oc-pastel-yellow: #FFFDE7;
  --oc-pastel-green:  #E8F5E9;
  --oc-nino-font:     "Nunito", "Comic Sans MS", cursive;
  --oc-nino-titulo:   #5B4FCF;
  --oc-nino-texto:    #333366;
  --oc-nino-borde:    #B39DDB;
}

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

.oc-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 2rem auto; }

/* ── Tarjeta adultos (mismo estilo dorado que estampitas) ── */
.oc-card--adulto {
  width: 220px; min-height: 320px;
  background: var(--oc-crema);
  border: 1.5px solid var(--oc-oro-claro);
  border-radius: 4px;
  box-shadow: inset 0 0 0 5px var(--oc-oro-fondo), inset 0 0 0 7px var(--oc-oro-claro);
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 12px 14px;
  font-family: var(--oc-serif);
  transition: transform .2s, box-shadow .2s;
}
.oc-card--adulto:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 5px var(--oc-oro-fondo), inset 0 0 0 7px var(--oc-oro-claro), 0 10px 24px rgba(92,61,10,.12);
}
.oc-card__ornamento-top, .oc-card__ornamento-bottom { font-family: var(--oc-display); font-size: 12px; color: var(--oc-oro-claro); letter-spacing: 4px; }
.oc-card__ornamento-top  { margin-bottom: 8px; }
.oc-card__ornamento-bottom { margin-top: 10px; }
.oc-card__img-wrap { width: 130px; height: 155px; border: 0.5px solid var(--oc-oro-claro); overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f0e8d0; margin-bottom: 10px; }
.oc-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.oc-card__titulo { font-family: var(--oc-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--oc-marron); text-align: center; margin-bottom: 8px; }
.oc-card__texto { font-style: italic; font-size: 9px; color: #4A3010; text-align: center; line-height: 1.6; padding: 0 4px; border-top: 0.5px solid var(--oc-oro-claro); padding-top: 8px; }

/* ── Tarjeta niños ─────────────────────────────────────── */
.oc-card--nino {
  width: 280px; min-height: 360px;
  background: linear-gradient(135deg, var(--oc-pastel-yellow) 0%, var(--oc-pastel-rose) 50%, var(--oc-pastel-blue) 100%);
  border: 2.5px solid var(--oc-nino-borde);
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 14px;
  font-family: var(--oc-nino-font);
  transition: transform .2s;
  position: relative;
  overflow: hidden;
}
.oc-card--nino::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1.5px dashed var(--oc-nino-borde);
  border-radius: 16px;
  pointer-events: none;
  opacity: .4;
}
.oc-card--nino:hover { transform: translateY(-4px); }

.oc-nino__deco-top, .oc-nino__deco-bottom { display: flex; gap: 8px; }
.oc-nino__deco-top   { margin-bottom: 8px; }
.oc-nino__deco-bottom { margin-top: 10px; }
.oc-nino__estrella { font-size: 14px; color: #FFB300; }
.oc-nino__corazon  { font-size: 12px; color: #E91E63; }

.oc-nino__img-wrap { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 12px rgba(0,0,0,.1); margin-bottom: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.oc-nino__img { width: 100%; height: 100%; object-fit: cover; }
.oc-nino__img-placeholder { width: 140px; height: 140px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border: 3px solid var(--oc-nino-borde); }
.oc-nino__img-placeholder svg { width: 80px; height: 80px; }

.oc-nino__titulo { font-size: 15px; font-weight: 700; color: var(--oc-nino-titulo); text-align: center; margin-bottom: 10px; line-height: 1.2; }
.oc-nino__texto  { font-size: 12px; color: var(--oc-nino-texto); text-align: center; line-height: 1.7; }
.oc-nino__intro  { font-size: 14px; color: #555; text-align: center; margin-bottom: .75rem; font-family: var(--oc-nino-font); max-width: 320px; }

/* ── Botones ────────────────────────────────────────────── */
.oc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.oc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 3px; font-family: var(--oc-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .2s; border: 1.5px solid transparent; }
.oc-btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.oc-btn--stamp { background: var(--oc-marron); color: var(--oc-oro-fondo); border-color: var(--oc-marron); }
.oc-btn--stamp:hover { background: #3D2806; }
.oc-btn--a4 { background: transparent; color: var(--oc-marron); border-color: var(--oc-oro-claro); }
.oc-btn--a4:hover { background: var(--oc-oro-fondo); }
.oc-btn--nino { background: var(--oc-nino-titulo); color: #fff; border-color: var(--oc-nino-titulo); border-radius: 20px; font-family: var(--oc-nino-font); font-size: 13px; text-transform: none; letter-spacing: 0; }
.oc-btn--nino:hover { background: #4338a0; }
.oc-hint { font-size: 11.5px; color: #888; text-align: center; font-family: var(--oc-nino-font); margin: 0; }