/* Carta gate · un nombre escrito sobre papel de plata; el sobre queda bajo el umbral. */
:root {
  --pdp-parchment-base: #ECE7DD;
  /* pergamino: orilla tostada tibia (taupe, nunca amarillo), luz de lectura arriba, mancha de uso abajo */
  --pdp-parchment-edge: radial-gradient(ellipse 125% 100% at 46% 42%, transparent 50%, rgba(118,106,94,.22) 100%);
  --pdp-parchment-uneven: radial-gradient(ellipse 58% 42% at 84% 90%, rgba(118,106,94,.10), transparent 100%), radial-gradient(ellipse 60% 44% at 22% 18%, rgba(255,255,255,.42), transparent 100%);
  --pdp-parchment-tile: url("../../assets/textures/pergamino.webp");
}

#kc-gate {
  display: grid;
  grid-template-rows: max-content max-content max-content max-content max-content;
  align-content: center;
  justify-items: center;
  row-gap: clamp(.25rem, .7svh, .5rem);
  isolation: isolate;
}

#kc-gate .kc-gate-content {
  display: contents;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: center;
}
#kc-gate .pdp-sr { position: absolute !important; }

#kc-gate .kc-gate-label,
#kc-gate .kc-gate-credit { margin: 0; }
#kc-gate .kc-gate-label {
  visibility: hidden;
  animation: pdp-label-failsafe 2.5s steps(1, end) forwards;
  color: #2B2D30;
  font-family: var(--f-text, Georgia, serif);
  font-size: clamp(1.35rem, 4vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .02em !important;
  line-height: 1.2;
  text-indent: 0 !important;
  text-transform: none !important;
}
#kc-gate .kc-gate-label.pdp-label-ready {
  visibility: visible;
  animation: none;
}
.pdp-label-visual { display: inline-block; white-space: nowrap; }
.pdp-label-word {
  display: inline-block;
  overflow: hidden;
  padding: .12em .055em .16em;
  margin: -.12em -.055em -.16em;
  vertical-align: baseline;
}
.pdp-label-letter {
  display: inline-block;
  transform: translateY(1em) rotate(6deg);
  animation: pdp-label-failsafe-letters 2.5s steps(1, end) forwards;
}
.pdp-label-ready .pdp-label-letter { animation: none; }
.pdp-label-static .pdp-label-letter { transform: none; }
.pdp-label-rule {
  position: relative;
  display: block;
  width: 9rem;
  height: 1px;
  margin: .32em auto 0;
  background: linear-gradient(90deg, rgba(201,205,210,.72), rgba(92,96,102,.62), rgba(201,205,210,.72));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  animation: pdp-label-failsafe-rule 2.5s steps(1, end) forwards;
}
.pdp-label-ready .pdp-label-rule { animation: none; }
.pdp-label-static .pdp-label-rule { transform: scaleX(1); }
.pdp-label-glint {
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(233,234,236,.48) 35%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}
.pdp-label-static .pdp-label-glint { visibility: hidden; }
@keyframes pdp-label-failsafe {
  0%, 99.9% { visibility: hidden; }
  100% { visibility: visible; }
}
@keyframes pdp-label-failsafe-letters {
  0%, 99.9% { transform: translateY(1em) rotate(6deg); }
  100% { transform: none; }
}
@keyframes pdp-label-failsafe-rule {
  0%, 99.9% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
#kc-gate .kc-gate-credit {
  color: #2B2D30;
  font-size: .62rem;
  line-height: 1.25;
  animation: none !important;
}

.pdp-gate-stage {
  position: relative;
  width: min(100vw, 480px, calc((100svh - 420px) * 390 / 300));
  aspect-ratio: 390 / 300;
  margin: 0;
  flex: 0 0 auto;
  pointer-events: none;
}
.pdp-gate-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#kc-gate.kc-gate-opening .pdp-gate-stage { transform: none; }

.pdp-letter-wrap {
  position: relative;
  z-index: 2;
  width: min(64vw, 300px);
  aspect-ratio: 1;
  margin-top: clamp(-130px, -25.64vw, -92px);
  overflow: visible;
  isolation: isolate;
  transform-origin: 50% 50%;
}
.pdp-letter-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.pdp-letter-layer,
.pdp-letter-layer svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pdp-letter-layer { visibility: hidden; opacity: 0; }
.pdp-letter-layer svg { visibility: visible; }
.pdp-letter-back { z-index: 0; }
.pdp-letter-sheet { z-index: 1; }
.pdp-letter-mouth { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.pdp-letter-mouth.is-emerging { -webkit-clip-path: var(--pdp-mouth-clip); clip-path: var(--pdp-mouth-clip); }
.pdp-letter-flap-side,
.pdp-letter-flap-bottom { z-index: 2; }
.pdp-letter-linework { z-index: 3; }
.pdp-letter-flap { z-index: 4; transform-origin: 40% 26.4%; }
.pdp-letter-dashes { z-index: 5; }
.pdp-letter-wash { opacity: 0; }
.pdp-letter-linework path { vector-effect: non-scaling-stroke; }
.pdp-letter-flap-front,
.pdp-letter-flap-back { opacity: 0; }
.pdp-letter-seal { visibility: hidden; opacity: 0; transform-origin: 50% 47.5%; }
.pdp-letter-seal-fill { stroke: var(--carta-ink, #2B2D30); }
.pdp-letter-highlight { stroke: var(--carta-lead-white, #FAFAF8); }
.pdp-letter-light-dash { filter: drop-shadow(0 0 1px rgba(31, 31, 31, .2)); }

.pdp-letter-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* mensaje corto: hoja compacta, letra grande (los números viven también en openFull) */
  width: min(80vw, 19rem);
  height: min(60svh, 25rem);
  max-height: 60svh;
  padding: clamp(1.35rem, 7vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgba(118, 106, 94, .30);
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
  background-color: var(--pdp-parchment-base, #ECE7DD);
  background-image: var(--pdp-parchment-edge), var(--pdp-parchment-uneven), var(--pdp-parchment-tile);
  background-size: 100% 100%, 100% 100%, 100% 100%, 512px 512px;
  background-position: center, center, center, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  color: #1F1F1F;
  box-shadow: 0 14px 34px rgba(31, 31, 31, .20), inset 0 0 18px rgba(118, 106, 94, .16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  text-align: center;
}
.pdp-letter-sheet::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(43, 45, 48, .22);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  box-shadow: inset 0 0 0 3px rgba(233,234,236,.9);
  background-image:
    linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)), linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)),
    linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)), linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)),
    linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)), linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)),
    linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48)), linear-gradient(rgba(62,65,70,.48), rgba(62,65,70,.48));
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position: left top, left top, right top, right top, right bottom, right bottom, left bottom, left bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}
.pdp-letter-sheet > * { position: relative; margin: 0; opacity: 0; }
.pdp-letter-sheet.is-front { z-index: 10; }
.pdp-letter-sheet.is-readable > * { opacity: 1; }
.pdp-letter-greeting {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #1F1F1F;
  font-family: var(--f-inscription, Georgia, serif);
  font-size: clamp(1.45rem, 6.6vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}
.pdp-letter-body {
  max-width: 30ch;
  margin-top: 1.2rem !important;
  color: #2B2D30;
  font-family: var(--f-text, Georgia, serif);
  font-size: clamp(1.2rem, 5.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.4;
}
.pdp-letter-signature {
  margin-top: 1.35rem !important;
  color: #2B2D30;
  font-family: var(--f-name, cursive);
  font-size: clamp(2.8rem, 13vw, 3.6rem);
  line-height: 1;
}

.pdp-letter {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pdp-letter:focus-visible { outline: 2px solid #1F1F1F; outline-offset: 5px; }
.pdp-letter.is-readable::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(88vw, 22rem);
  height: min(76svh, 33rem);
  transform: translate(-50%, -50%) rotate(-20deg) scale(.869565);
  pointer-events: auto;
}
.pdp-letter.is-reduced-readable::before {
  transform: translate(calc(-50% + var(--pdp-sheet-dx, 0px)), calc(-50% + var(--pdp-sheet-dy, 0px)));
}
.pdp-letter.is-writing::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: var(--pdp-glint-x, 50%);
  top: var(--pdp-glint-y, 50%);
  width: 18px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(228,231,236,.55) 27%, rgba(228,231,236,0) 72%);
  pointer-events: none;
}

#kc-gate .pdp-letter-hint {
  margin: 0;
  min-height: 1.35em;
  color: #2B2D30;
  font-family: var(--f-inscription, Georgia, serif);
  font-size: .78rem;
  line-height: 1.35;
  letter-spacing: .12em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: transform .18s ease, visibility 0s linear .18s;
}
#kc-gate .pdp-letter-hint.is-visible { visibility: visible; }
#kc-gate .pdp-letter-hint.is-opening { transform: translateY(-.55rem) scale(.94); visibility: hidden; }

/* Core owns this button and its listeners; carta only keeps it out of view and flow. */
#kc-gate .kc-gate-cta {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}
#kc-gate .kc-gate-cta-icon { display: none !important; }

@media (max-height: 760px) {
  .pdp-letter-wrap { width: min(64vw, 270px); }
  #kc-gate .kc-gate-credit { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  #kc-gate .kc-gate-label,
  #kc-gate .kc-gate-credit { animation: none !important; }
  #kc-gate .kc-gate-label { visibility: hidden; animation: pdp-label-failsafe 2.5s steps(1, end) forwards !important; }
  #kc-gate .kc-gate-label.pdp-label-ready { visibility: visible; animation: none !important; }
  .pdp-label-letter { transform: none; animation: none; }
  .pdp-label-rule { transform: scaleX(1); animation: none; }
  .pdp-label-glint { visibility: hidden; }
  #kc-gate .pdp-letter-hint { opacity: 1; visibility: visible; }
}

#kc-gate.pdp-pixel-exit.kc-gate-opening,
#kc-gate.pdp-pixel-exit.kc-gate-opened {
  opacity: 1;
  visibility: visible;
  transition: none;
  pointer-events: none;
}
#kc-gate.pdp-pixel-exit { pointer-events: none; }
#kc-gate.pdp-pixel-done { transition: none; }
body.pdp-pixel-exit #kc-main { transition: none; opacity: 1; visibility: visible; }
.pdp-pixel-glints {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  pointer-events: none;
}