/* Receta común de las invitaciones de MARËA Studio.
   Las piezas son imágenes hechas con la IA de Canva y se publican tal como salen de Canva, con su marca de procedencia:
   Canva prohíbe quitarla, así que no se recomprimen ni se editan. Sombras, tonos y recortes van por CSS, en el navegador.
   Aquí está solo lo que comparten todas. Cada invitación pone en su CSS, después de este, sus colores, sus letras,
   sus imágenes y la geometría de su sobre. Explicado en 01_WEB\invitaciones-canva\RECETA.md. */
:root{
  --col:min(100vw,500px);
  --u:calc(var(--col)/375);                 /* 1 unidad = 1 px en un móvil de 375 */
  --alto:100vh;
  --w:max(var(--col),calc(var(--alto)*.5619));
  --e:calc(var(--w)/944);                   /* 1 píxel de las imágenes de 944 × 1680 */
  --p-niebla:64px;
}
@supports(height:100svh){:root{--alto:100svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{background:var(--suelo)}
html,body{overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}
body{margin:0;background:transparent;color:var(--tinta);font:400 calc(19*var(--u))/1.32 var(--serif)}
body.cerrada{overflow:hidden;height:var(--alto)}
img{display:block}
p{margin:0}
h1,h2{font-weight:400;margin:0}

.fondo{position:fixed;left:0;top:0;width:100%;height:100vh;background:center/cover no-repeat;z-index:-1}
@supports(height:100lvh){.fondo{height:100lvh}}

/* ---------- escena común del sobre y la portada ---------- */
.escena{position:absolute;left:50%;top:50%;width:var(--w);height:calc(1680*var(--e));transform:translate(-50%,-50%)}

/* ---------- el sobre ---------- */
.apertura{display:none}
.js .apertura{display:block;position:fixed;top:0;left:50%;width:var(--col);height:var(--alto);transform:translateX(-50%);z-index:50;overflow:hidden;cursor:pointer;touch-action:none;transition:opacity .9s ease;background:var(--suelo)}
.estatica .apertura{display:none}
.apertura .escena{perspective:calc(1600*var(--e));perspective-origin:50% var(--s-bisagra)}
.a-capa{position:absolute;left:0;top:0;width:100%;height:100%}
/* por dentro, el sobre va forrado de tela */
.a-hueco{clip-path:var(--s-hueco);background:var(--seda) center/100% 100% no-repeat;background-blend-mode:multiply;opacity:0}
.a-dorso{clip-path:var(--s-dorso);transform-origin:50% var(--s-bisagra);transform:rotateX(-180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--dorso) 50% 20%/170% no-repeat}
.a-dorso::after{content:"";position:absolute;inset:0;clip-path:var(--s-forro);background:var(--seda-forro,var(--seda)) center/100% 100% no-repeat;background-blend-mode:multiply}
.a-marcha{clip-path:inset(0 0 var(--s-suelo) 0);opacity:0}
.a-carta{transform:translateY(calc(var(--s-baja)*var(--e)))}
.a-papel{position:absolute;left:calc(var(--c-x)*var(--e));top:calc(var(--c-y)*var(--e));width:calc(var(--c-w)*var(--e));height:calc(var(--c-h)*var(--e))}
.a-papel::before{content:"";position:absolute;inset:5.5% 6.5%;background:var(--c-dentro)}
.a-papel::after{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat}
/* debajo del sello solo hay papel: se tapa con un trozo del propio sobre, sin tocar el archivo */
.a-frente{background:0 0/100% 100% no-repeat;clip-path:var(--s-frente);opacity:0}
.a-frente::after{content:"";position:absolute;inset:0;background:calc(var(--parche-dx)*var(--e)) calc(var(--parche-dy)*var(--e))/100% 100% no-repeat;-webkit-mask-image:radial-gradient(circle at calc(var(--parche-x)*var(--e)) calc(var(--parche-y)*var(--e)),#000 calc(var(--parche-r)*var(--e)),transparent calc(var(--parche-r2)*var(--e)));mask-image:radial-gradient(circle at calc(var(--parche-x)*var(--e)) calc(var(--parche-y)*var(--e)),#000 calc(var(--parche-r)*var(--e)),transparent calc(var(--parche-r2)*var(--e)))}
.a-solapa{background:0 0/100% 100% no-repeat;clip-path:var(--s-solapa);transform-origin:50% var(--s-bisagra);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.monograma{position:absolute;left:calc(var(--s-x)*var(--e));top:calc(var(--s-y)*var(--e));transform:translate(-50%,-50%);white-space:nowrap}
.a-pulso{position:absolute;left:calc(var(--s-x)*var(--e));top:calc(var(--s-y)*var(--e));width:calc(150*var(--e));height:calc(150*var(--e));margin:calc(-75*var(--e)) 0 0 calc(-75*var(--e));border-radius:50%;border:1px solid var(--pulso);animation:pulso 2.4s ease-out infinite;pointer-events:none}
@keyframes pulso{0%{transform:scale(.86);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
.a-boton{position:absolute;left:50%;top:calc(var(--s-boton)*var(--e));transform:translateX(-50%);padding:calc(12*var(--e)) calc(30*var(--e));background:none;border:0;color:var(--a-letra,var(--tinta));font:400 max(11px,calc(12.5*var(--u)))/1.2 var(--caps);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.a-boton:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.a-muestra,.p-muestra{position:absolute;left:0;right:0;top:max(calc(14*var(--u)),env(safe-area-inset-top));text-align:center;font:400 max(11px,calc(11.5*var(--u)))/1.3 var(--caps);letter-spacing:.06em;color:var(--a-letra,var(--tinta));transition:opacity .25s}
.abriendo .a-hueco,.abriendo .a-frente,.abriendo .a-marcha{opacity:1}
.abriendo .a-solapa{transform:rotateX(180deg);transition:transform .95s cubic-bezier(.5,.05,.3,1)}
.abriendo .a-dorso{transform:rotateX(0deg);transition:transform .95s cubic-bezier(.5,.05,.3,1)}
.abriendo .a-pulso,.abriendo .a-boton,.abriendo .a-muestra{opacity:0;animation:none;transition:opacity .25s}
.sacando .a-carta{transform:none;transition:transform 1.1s cubic-bezier(.22,.7,.2,1)}
.fuera{opacity:0;pointer-events:none}

/* ---------- portada ---------- */
.portada{position:relative;width:var(--col);height:var(--alto);margin:0 auto;outline:0}
.p-marco{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - var(--p-niebla)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--p-niebla)),transparent)}
.p-base{position:absolute;left:0;top:0;width:100%;height:100%}
.p-muestra{z-index:2}
.letra{position:absolute;left:calc(var(--l-x)*var(--e));top:calc(var(--l-y)*var(--e));width:calc(var(--l-w)*var(--e));height:calc(var(--l-h)*var(--e));display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--tinta)}
.bajar{position:absolute;z-index:2;left:50%;bottom:max(calc(14*var(--u)),env(safe-area-inset-bottom));transform:translateX(-50%);font:400 max(11px,calc(11.5*var(--u)))/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--a-letra,var(--tinta))}
.bajar::after{content:"";display:block;width:1px;height:calc(22*var(--u));margin:calc(7*var(--u)) auto 0;background:currentColor;transform-origin:top;animation:bajar 2.2s ease-in-out infinite}
@keyframes bajar{0%{transform:scaleY(.2)}55%,100%{transform:scaleY(1)}}

/* ---------- la hoja ---------- */
.hoja{position:relative;width:var(--col);margin:0 auto;padding-bottom:calc(22*var(--u))}
.bloque{position:relative}
.pieza{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 calc(4*var(--u)) calc(6*var(--u)) var(--sombra))}
.et{display:block;font:400 max(11px,calc(12*var(--u)))/1.2 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
h2{font:italic 400 calc(30*var(--u))/1.08 var(--serif);margin-top:calc(9*var(--u));text-wrap:balance}
h2+p{margin-top:calc(9*var(--u))}

/* papel: el recorte de Canva se estira al tamaño del texto; cada invitación pone su imagen en .p-h::before y .p-v::before */
.papel{position:relative;isolation:isolate;padding:calc(30*var(--u)) calc(30*var(--u))}
.papel::before{content:"";position:absolute;z-index:-1;background:center/100% 100% no-repeat;filter:drop-shadow(0 calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.p-h::before{inset:calc(-22*var(--u)) calc(-20*var(--u))}
.p-v::before{inset:calc(-26*var(--u)) calc(-22*var(--u))}

/* cuenta atrás */
.cuenta{display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(14*var(--u))}
.cuenta div{border-left:1px solid var(--linea);padding:calc(2*var(--u)) 0}
.cuenta div:first-child{border-left:0}
.cuenta b{display:block;font:500 calc(38*var(--u))/1.05 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.cuenta small{display:block;margin-top:calc(5*var(--u));font:400 max(11px,calc(11.5*var(--u)))/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-s)}

/* botones y enlaces */
.botones{display:flex;flex-wrap:wrap;gap:calc(10*var(--u));margin-top:calc(16*var(--u))}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:calc(12*var(--u)) calc(16*var(--u));border:1px solid var(--tinta);border-radius:2px;background:transparent;color:var(--tinta);font:400 calc(13*var(--u))/1.1 var(--caps);letter-spacing:.06em;text-decoration:none;cursor:pointer}
.boton:focus-visible,.vienes input:focus-visible+span,.campo input:focus-visible,.campo select:focus-visible,.do-google a:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.do-google{margin-top:calc(2*var(--u));font:italic 400 calc(17*var(--u))/1.2 var(--serif)}
.do-google a{color:var(--tinta);display:inline-block;padding:max(13px,calc(12*var(--u))) calc(8*var(--u)) max(13px,calc(12*var(--u))) 0}
.boton.lleno,.vienes input:checked+span{background:var(--seda) center/cover no-repeat;background-blend-mode:multiply;color:var(--sobre-seda,var(--papel));border-color:var(--seda)}
.boton.lleno{width:100%;margin-top:calc(18*var(--u))}
.aviso{font:italic 400 calc(17*var(--u))/1.25 var(--serif);color:var(--tinta-s);margin-top:calc(10*var(--u))}
.aviso:empty{margin-top:0}
.aviso a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.boton[disabled]{opacity:.7;cursor:default}
/* solo en una invitación de verdad: quién recibe las respuestas */
.f-nota{margin-top:calc(10*var(--u));font:italic 400 max(12px,calc(14*var(--u)))/1.25 var(--serif);color:var(--tinta-s)}
.f-nota a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* formulario */
#f{margin-top:calc(16*var(--u));text-align:left}
.campo{display:block;margin-top:calc(14*var(--u));font:400 max(11px,calc(12*var(--u)))/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.campo input,.campo select{display:block;width:100%;margin-top:calc(4*var(--u));padding:calc(6*var(--u)) 0;border:0;border-bottom:1px solid var(--tinta-s);border-radius:0;background:transparent;color:var(--tinta);font:400 max(16px,calc(20*var(--u)))/1.25 var(--serif);letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none}
.campo select{background:var(--flecha) right center no-repeat}
.vienes{margin:calc(16*var(--u)) 0 0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--u))}
.vienes legend{padding:0;margin-bottom:calc(8*var(--u));font:400 max(11px,calc(12*var(--u)))/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.vienes label{position:relative;display:block;cursor:pointer}
.vienes input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.vienes span{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--tinta-s);border-radius:2px;font:400 calc(18*var(--u))/1.1 var(--serif);text-align:center;padding:0 calc(4*var(--u))}
#si-vienes[hidden]{display:none}

/* pie */
.pie{position:relative;margin:calc(30*var(--u)) auto 0;padding:0 calc(30*var(--u));text-align:center;font:400 max(11.5px,calc(12.5*var(--u)))/1.55 var(--caps);color:var(--a-letra,var(--tinta))}
.pie a{color:inherit}

/* ---------- aparecer al bajar ---------- */
.js [data-a]{opacity:0;transform:translateY(calc(20*var(--u)));transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-a].in,.estatica [data-a]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-a]{opacity:1;transform:none;transition:none}
  .a-pulso,.bajar::after{animation:none}
}

/* ---------- ordenador: la invitación queda en columna sobre el fondo ---------- */
@media (min-width:640px){
  .p-marco{-webkit-mask-image:none;mask-image:none;box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) var(--sombra)}
  .portada{margin-bottom:calc(30*var(--u))}
}
/* móvil en horizontal: la portada se ve entera bajando, para que el aviso y «Desliza» no pisen la letra */
@media (max-height:500px) and (orientation:landscape){
  .portada{height:calc(1680*var(--e))}
}