*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}

html{overscroll-behavior:none;height:100%;background:#040408}
html.modal-open{overflow:hidden;}
html.modal-open body{overflow:hidden;}
body{
  overflow-x:hidden;overscroll-behavior:none;
  font-family:'DM Mono',monospace;color:#fff;min-height:100%;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 18% 22%,#130e22 0%,#07070d 55%,#040408 100%);
}

/* ── Hero ── */
.hero{
  position:fixed;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;z-index:30;pointer-events:none;
}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(32px,5vw,64px);margin-bottom:20px}
.hero p{font-size:clamp(14px,1.2vw,18px);color:rgba(255,255,255,.65);line-height:1.8}

/* ── Scene ── */
.scene{position:fixed;inset:0;overflow:hidden;z-index:5}

/* ── Card wrap ── */
.card-wrap{position:absolute;transform:translateZ(0);opacity:0}
.flip{width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
/* LOW_END: sin preserve-3d, el flip es cross-fade (ver script.js) */
.flip-flat{transform-style:flat !important;-webkit-transform-style:flat !important;}
.flip-flat .face.front{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;}
.flip-flat .face.back {transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;}
.face{
  position:absolute;inset:0;border-radius:10px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}

/* ── Card back ── */
.face.back{
  background-color:#c8102e;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:rotateY(0deg);
  isolation:isolate;
}
.face.back::before{
  content:'';position:absolute;inset:0;
  background-color:#b8001f;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='%23d4102a' stroke-width='1'/%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:20px 20px;
}
.face.back::after{
  content:'';position:absolute;inset:6%;
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 2px rgba(180,0,30,.8),
    inset 0 0 0 4px rgba(255,255,255,.25),
    0 0 0 1px rgba(255,255,255,.1);
}
.back-center{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;user-select:none;
}
.back-center svg{
  width:32%;height:auto;opacity:.45;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.2));
}

/* ── Card fronts ── */
.face.front{
  transform:rotateY(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.face.front.normal{background:#fff center/cover no-repeat}
.face.front.special{
  background:#111;display:flex;flex-direction:column;
  justify-content:flex-end;padding:16px;
}
.face.front.special img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-1;filter:brightness(.55);
}
.face.front.special h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(15px,2vw,20px);margin-bottom:4px;line-height:1.2;
}
.face.front.special p{font-size:clamp(11px,1.1vw,13px);color:rgba(255,255,255,.85);line-height:1.5}

/* ── Modal base ── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;z-index:1000;
}
.modal-box{
  background:#111;padding:40px;border-radius:18px;
  max-width:600px;width:90%;transform:scale(.8);position:relative;
  contain:layout style;
}
.modal-box h2{font-family:'Playfair Display',serif;margin-bottom:15px}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);font-size:18px;line-height:1;
  cursor:pointer;z-index:999;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.modal-close:hover{background:rgba(255,255,255,.16);color:#fff;}

/* ── Shared modal header (familia, amigos, hobbies, musica) ── */
.fam-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:24px 28px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.fam-header h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(18px,2.5vw,24px);margin-bottom:4px;
}
.fam-subtitulo{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.04em;}

/* ── Easter egg modal ── */
.egg-box{
  text-align:center;max-width:420px!important;
  background:linear-gradient(145deg,#1a0a0e 0%,#111 60%);
  border:1px solid rgba(220,50,80,.25);
}
.egg-heart{
  font-size:64px;line-height:1;margin-bottom:16px;color:#dc3250;
  filter:drop-shadow(0 0 18px rgba(220,50,80,.5));
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}
.egg-box h2{font-family:'Playfair Display',serif;font-size:22px;color:#dc3250;margin-bottom:14px;letter-spacing:.08em}
.egg-box p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.7;font-style:italic}

/* ── Performance: mobile ── */
@media (max-width:768px){
  .face{box-shadow:0 4px 16px rgba(0,0,0,.5);}
}
@media (prefers-reduced-motion:reduce){
  .card-wrap,.flip,.face,.fam-item img,.mus-artista-bg{
    transition:none!important;animation:none!important;
  }
  .egg-heart{animation:pulse 1.8s ease-in-out infinite;}
}