/* Confirmame.cl · Experiencia: portón de apertura, música, movimiento con volumen y barra inferior */

/* ---------------- Portón ---------------- */
.ap-porton { position: fixed; inset: 0; z-index: 300; perspective: 2000px; perspective-origin: 50% 45%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-puerta { position: absolute; top: 0; bottom: 0; width: 50.1%; overflow: hidden; background-color: var(--pp); transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform 1.6s cubic-bezier(.62,.02,.24,1), box-shadow 1.6s; will-change: transform; }
.ap-izq { left: 0; transform-origin: 0 50%; box-shadow: inset -1px 0 0 rgba(0,0,0,.08); }
.ap-der { right: 0; transform-origin: 100% 50%; box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
.ap-tex, .ap-grano, .ap-sombra { position: absolute; inset: 0; pointer-events: none; }
.ap-der .ap-tex { transform: scaleX(-1); }
/* luz rasante sobre el papel + sombra junto al borde interior */
.ap-izq::after, .ap-der::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; pointer-events: none; }
.ap-izq::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(60,40,20,.10)); }
.ap-der::after { left: 0; background: linear-gradient(90deg, rgba(60,40,20,.14), rgba(0,0,0,0)); }
.ap-sombra { background: #1d140c; opacity: 0; transition: opacity 1.6s; }
.ap-grano { opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* texturas */
.ap-tex-relieve .ap-tex { background: url("apertura/relieve.svg") right center / auto 104% no-repeat, radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); }
.ap-tex-lino .ap-tex { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
  repeating-linear-gradient(90deg, rgba(90,70,40,.07) 0 1px, rgba(0,0,0,0) 1px 3px),
  radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }
.ap-tex-liso .ap-tex { background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.25) 55%, rgba(0,0,0,.04) 100%); }
.ap-tex-kraft .ap-tex { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E"),
  radial-gradient(120% 80% at 30% 20%, rgba(255,240,220,.25), rgba(0,0,0,0) 60%); }
.ap-tex-kraft .ap-grano { opacity: .9; }

/* cinta (cada puerta lleva su mitad) */
.ap-cinta { position: absolute; left: 0; right: 0; top: calc(56% - 22px); height: 44px; background-color: var(--lz);
  background-image: linear-gradient(180deg, rgba(255,255,255,.6) 0, rgba(255,255,255,.08) 28%, rgba(0,0,0,.05) 55%, rgba(255,255,255,.28) 78%, rgba(0,0,0,.14) 100%);
  box-shadow: 0 3px 5px -2px rgba(40,25,10,.25), 0 -1px 0 rgba(0,0,0,.04);
  transition: transform .55s cubic-bezier(.6,0,.8,.4) .3s, opacity .4s .45s; }
.ap-cierre-cinta .ap-cinta { height: 30px; top: calc(56% - 15px); }
/* sello de cera partido en dos */
.ap-cera { position: absolute; top: calc(52% - 60px); width: 120px; height: 120px; color: var(--cera); }
.ap-izq .ap-cera { right: -60px; } .ap-der .ap-cera { left: -60px; }
.ap-cera svg { width: 100%; height: 100%; display: block; }

/* lazo */
.ap-lazo { position: absolute; left: 50%; top: 56%; width: min(84vw, 400px); transform: translate(-50%, -33%); color: var(--lz); pointer-events: none;
  transition: transform 1s cubic-bezier(.55,0,.75,.2), opacity .8s .3s; }
.ap-lazo svg { width: 100%; height: auto; display: block; overflow: visible; }
.ap-nudo { position: absolute; left: 50%; top: 56%; width: 46px; height: 40px; transform: translate(-50%, -50%); border-radius: 14px; background-color: var(--lz);
  background-image: radial-gradient(circle at 45% 35%, rgba(255,255,255,.7), rgba(0,0,0,.12)); box-shadow: 0 4px 8px rgba(40,25,10,.25); transition: opacity .4s; }

/* etiqueta con los nombres */
.ap-etiqueta { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%) rotate(-1.5deg); background: #FFFDF9; padding: 12px 26px 10px; border-radius: 3px;
  box-shadow: 0 6px 18px -8px rgba(40,25,10,.45), 0 0 0 1px rgba(0,0,0,.04); transition: transform .9s cubic-bezier(.55,0,.75,.2), opacity .6s; pointer-events: none; max-width: 80vw; }
.ap-etiqueta span { font: 400 clamp(24px, 6.5vw, 34px)/1 'Allura', 'Great Vibes', cursive; color: #3E3229; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.ap-etiqueta i { font-style: normal; color: #A8876A; }
.ap-cierre-cinta .ap-etiqueta { top: 56%; transform: translate(-50%, 18px) rotate(3deg); }
.ap-cierre-cinta .ap-etiqueta::before { content: ""; position: absolute; left: 50%; top: -20px; width: 1px; height: 22px; background: rgba(60,45,30,.5); }

.ap-pie { position: absolute; left: 0; right: 0; bottom: calc(5.5vh + env(safe-area-inset-bottom)); text-align: center; pointer-events: none; transition: opacity .4s; }
.ap-para { margin: 0 0 8px; font: 400 15px/1.3 'Cormorant Garamond', Georgia, serif; font-style: italic; color: rgba(50,38,28,.75); }
.ap-para b { font-weight: 500; font-style: normal; }
.ap-hint { margin: 0; font: 500 11px/1 'Jost', 'Montserrat', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: rgba(60,45,30,.55); animation: apPulso 2.4s ease-in-out infinite; }
.ap-tex-kraft .ap-hint, .ap-tex-kraft .ap-para { color: rgba(40,25,12,.75); }
@keyframes apPulso { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.ap-tocar { position: absolute; inset: 0; background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.ap-tocar:focus-visible { outline: 2px solid rgba(0,0,0,.3); outline-offset: -8px; }

/* respiración del cierre mientras espera */
.ap-porton:not(.abre) .ap-lazo { animation: apRespira 3.2s ease-in-out infinite; }
@keyframes apRespira { 0%,100% { transform: translate(-50%, -33%) scale(1); } 50% { transform: translate(-50%, -34%) scale(1.015); } }

/* ---- secuencia de apertura ---- */
.ap-porton.abre { cursor: default; }
.ap-porton.abre .ap-lazo { animation: none; transform: translate(-50%, 80vh) rotate(-14deg) scale(.92); opacity: 0; }
.ap-porton.abre .ap-etiqueta { transform: translate(-50%, 60vh) rotate(12deg); opacity: 0; }
.ap-porton.abre .ap-nudo, .ap-porton.abre .ap-pie { opacity: 0; }
.ap-porton.abre .ap-izq .ap-cinta { transform: translateX(-105%); opacity: 0; }
.ap-porton.abre .ap-der .ap-cinta { transform: translateX(105%); opacity: 0; }
.ap-porton.abre-puertas .ap-izq { transform: rotateY(-108deg); box-shadow: 20px 0 60px rgba(0,0,0,.25); }
.ap-porton.abre-puertas .ap-der { transform: rotateY(108deg); box-shadow: -20px 0 60px rgba(0,0,0,.25); }
.ap-porton.abre-puertas .ap-sombra { opacity: .45; }
.ap-porton.fin { opacity: 0; transition: opacity .5s; pointer-events: none; }
/* la portada aparece desde atrás con un leve zoom */
html.ap-espera .hero { transform: scale(1.06); filter: brightness(.92); }
html.ap-abriendo .hero { transform: none; filter: none; transition: transform 2.2s cubic-bezier(.2,.7,.2,1), filter 2.2s; }
@media (prefers-reduced-motion: reduce) { .ap-puerta, .ap-lazo, .ap-etiqueta, .ap-cinta { transition-duration: .01s !important; } }

/* ---------------- Música ---------------- */
.exp-musica { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 150; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: #3A2F27; box-shadow: 0 8px 24px -10px rgba(0,0,0,.45); display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s; }
.exp-musica:active { transform: scale(.94); }
.exp-musica .barras { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.exp-musica .barras i { width: 3px; height: 4px; border-radius: 2px; background: currentColor; }
.exp-musica.suena .barras i { animation: expEq .9s ease-in-out infinite; }
.exp-musica.suena .barras i:nth-child(2) { animation-delay: -.3s; } .exp-musica.suena .barras i:nth-child(3) { animation-delay: -.6s; } .exp-musica.suena .barras i:nth-child(4) { animation-delay: -.15s; }
@keyframes expEq { 0%,100% { height: 4px; } 50% { height: 16px; } }
.exp-musica:not(.suena)::after { content: ""; position: absolute; width: 26px; height: 1.6px; background: currentColor; transform: rotate(-40deg); border-radius: 2px; }
html.con-barra .exp-musica { bottom: calc(76px + env(safe-area-inset-bottom)); }
[data-theme="noche"] .exp-musica, [data-theme="velas"] .exp-musica { background: rgba(30,26,22,.9); color: #F3E6D3; }

/* ---------------- Barra inferior ---------------- */
.exp-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; justify-content: center; gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(0,0,0,.06); transform: translateY(110%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html.con-barra.barra-on .exp-barra { transform: none; }
.exp-barra a { flex: 1; max-width: 120px; text-align: center; padding: 10px 4px 8px; text-decoration: none; color: #6F655C; font: 500 9.5px/1 'Jost', 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; border-radius: 12px; white-space: nowrap; transition: color .2s, background .2s; }
.exp-barra a.on { color: #2A2420; background: rgba(0,0,0,.05); }
[data-theme="noche"] .exp-barra, [data-theme="velas"] .exp-barra { background: rgba(23,20,17,.9); border-top-color: rgba(255,255,255,.08); }
[data-theme="noche"] .exp-barra a, [data-theme="velas"] .exp-barra a { color: rgba(243,230,211,.6); }
[data-theme="noche"] .exp-barra a.on, [data-theme="velas"] .exp-barra a.on { color: #F3E6D3; background: rgba(255,255,255,.07); }
html.con-barra .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }

/* ---------------- Movimiento con volumen ---------------- */
html.mov-volumen .exp-mov { transition: translate 1.1s cubic-bezier(.2,.75,.2,1), rotate 1.1s cubic-bezier(.2,.75,.2,1), scale 1.1s cubic-bezier(.2,.75,.2,1), opacity .9s ease;
  transform-origin: 50% 0; }
html.mov-volumen .exp-mov:not(.exp-in) { translate: 0 70px; rotate: x 14deg; scale: .96; opacity: .35; }
html.mov-volumen .exp-tilt { transform: perspective(1400px) rotateX(var(--tx, 0deg)) skewY(var(--sk, 0deg)); transform-origin: 50% 50%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { html.mov-volumen .exp-mov { translate: none !important; rotate: none !important; scale: none !important; opacity: 1 !important; } html.mov-volumen .exp-tilt { transform: none !important; } }
/* pantallas anchas: la filigrana se repite en espejo hacia el borde exterior */
.ap-tex-relieve .ap-tex::before { content: ""; position: absolute; inset: 0; background: url("apertura/relieve.svg") right center / auto 104% no-repeat; transform: scaleX(-1); opacity: 0; }
@media (min-aspect-ratio: 4/5) { .ap-tex-relieve .ap-tex::before { opacity: 1; } }
@media (min-width: 900px) { .ap-etiqueta span { font-size: 40px; } .ap-lazo { width: 440px; } }