/* =====================================================
   INVITACIÓN 50 AÑOS DE DEYA · ESTILOS
   ÍNDICE: 1 Variables · Marco de celular · 2 Sobre
   3 Portada · Música · 4 Frase · 5 Fecha y lugar
   6 Ubicación · 7 Vestimenta · 8 Formulario
   9 Galería · 10 Gracias · 11 Footer
   ✏️ CAMBIAR colores y fuentes en :root (sección 1);
   los nombres de fuente deben coincidir con el <link> de Google Fonts en index.html.
   ===================================================== */

/* ===== 1. VARIABLES (cambia colores y fuentes aquí) ===== */
:root{
  --verde:#4d5e2b; --verde-osc:#2f3b1a; --verde-cl:#dce4c4; --verde-xcl:#eef2de;
  --oro:#c19a3e; --oro-cl:#ecd48e; --crema:#f7f1de; --texto:#2b3319;
  --f-titulo:'Cormorant Garamond',serif; --f-script:'Great Vibes',cursive; --f-texto:'Montserrat',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#1b2310;font-family:var(--f-texto);color:var(--texto);font-weight:300;line-height:1.7}
body.lock{overflow:hidden}
/* Marco de celular (centrado en escritorio) */
.phone{max-width:430px;margin:0 auto;background:var(--crema);position:relative;overflow:hidden;min-height:100vh;box-shadow:0 0 60px #000a}
@media(min-width:600px){.phone{margin:24px auto;border-radius:36px;border:8px solid #0d1207;min-height:calc(100vh - 48px)}}
section{padding:64px 26px;position:relative;text-align:center}
h2{font-family:var(--f-titulo);font-weight:700;font-size:2.1rem;color:var(--verde-osc);line-height:1.15;margin-bottom:6px}
.script{font-family:var(--f-script);color:var(--oro);font-size:2.4rem;line-height:1.1}
.sep{height:1px;margin:0 auto;width:70%;background:linear-gradient(90deg,transparent,var(--oro),transparent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:50px;border:1.5px solid var(--oro);background:var(--verde);color:#fff;font:600 .85rem var(--f-texto);text-decoration:none;cursor:pointer;transition:.25s}
.btn:hover{background:var(--verde-osc);box-shadow:0 0 14px #c19a3e88}
.btn.ghost{background:transparent;color:var(--verde-osc)}
.btn i{color:var(--oro-cl)} .btn.ghost i{color:var(--oro)}
/* Flores acuarela */
.flor{position:absolute;width:190px;height:190px;pointer-events:none;opacity:.9}
.tl{top:-30px;left:-40px} .tr{top:-30px;right:-40px;transform:scaleX(-1)}
.bl{bottom:-40px;left:-40px;transform:scaleY(-1)} .br{bottom:-40px;right:-40px;transform:scale(-1)}
/* Animación de aparición */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s}
.rv.on{opacity:1;transform:none}

/* ===== 2. SOBRE / CARTA POP-UP ===== */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--verde),var(--verde-osc));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity 1s .9s,visibility 0s 1.9s}
#intro.abierto{opacity:0;visibility:hidden}
#intro .script{color:var(--oro-cl);font-size:3.8rem;text-align:center}
.sobre{width:340px;height:228px;position:relative;perspective:900px}
.sobre .cuerpo{position:absolute;inset:0;background:linear-gradient(135deg,#e8e2c4,#cfd5aa);border-radius:6px;z-index:3;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);box-shadow:0 10px 30px #0008}
.sobre .tapa{position:absolute;top:0;left:0;width:100%;height:60%;background:linear-gradient(#bfc795,#a9b378);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s;z-index:4}
.sobre .sello{position:absolute;top:48%;left:50%;width:50px;height:50px;margin:-21px;border-radius:50%;background:radial-gradient(var(--oro-cl),var(--oro));z-index:5;display:grid;place-items:center;color:var(--verde-osc);font:700 2rem var(--f-titulo);transition:opacity .4s}
.sobre .carta{position:absolute;left:14px;right:14px;top:10px;height:90%;background:var(--crema);border:1px solid var(--oro);border-radius:4px;z-index:2;display:grid;place-items:center;font:italic 500 1.5rem var(--f-titulo);color:var(--verde-osc);transition:transform .9s .6s}

/* VIDEO DE FONDO (ocupa toda la pantalla) */
#intro .fondo-video{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  min-width:100%; min-height:100%;
  object-fit:cover !important;
  object-position:50%;   /* ✏️ CAMBIAR: punto de enfoque del recorte */
  opacity:.3;                /* ✏️ CAMBIAR: 0.15 sutil · 0.5 más visible */
  z-index:0; pointer-events:none;
        /* ✏️ CAMBIAR: sube o baja hasta que desaparezcan las barras */
  transform-origin:center;
}
#intro > *:not(.fondo-video){position:relative;z-index:1}

#intro.abierto .tapa{transform:rotateX(180deg);z-index:1}
#intro.abierto .sello{opacity:0}
#intro.abierto .carta{transform:translateY(-120px) scale(1.15)}

/* ===== 3. PORTADA ===== */
#portada{background:linear-gradient(var(--verde-xcl),var(--crema));padding-top:90px;min-height:100vh}
.marco{width:290px;height:380px;margin:12px auto 24px;border-radius:145px 145px 16px 16px;border:4px solid var(--oro);padding:6px;background:var(--crema);box-shadow:0 0 0 3px var(--verde-cl),0 12px 30px #2f3b1a44;position:relative;z-index:1}
.marco img{width:100%;height:100%;object-fit:cover;border-radius:138px 138px 10px 10px;background:linear-gradient(160deg,var(--verde-cl),var(--oro-cl))}

.cincuenta{font-family:var(--f-titulo);font-size:6.5rem;font-weight:700;line-height:1.05;padding:.06em .1em .04em;background:linear-gradient(var(--oro-cl),var(--oro) 60%,#8c6a1c);-webkit-background-clip:text;background-clip:text;color:transparent; margin-top:-12px;}
#portada h2{font-size:4.5rem}
.fecha-portada{font:600 1.5rem var(--f-titulo);letter-spacing:.3em;color:var(--verde);margin:12px 0 24px}

#cuenta{display:flex;justify-content:center;gap:10px}
#cuenta div{width:76px;padding:12px 0;border-radius:14px;background:var(--verde);border:1.5px solid var(--oro);color:#fff;position:relative;z-index:1}
#cuenta b{display:block;font:700 2rem var(--f-titulo);color:var(--oro-cl)}
#cuenta small{font-size:.72rem;letter-spacing:.08em}

/* ===== MÚSICA ===== */
#musica{position:fixed;bottom:18px;right:calc(50% - min(50vw,215px) + 14px);z-index:90;width:52px;height:52px;border-radius:50%;border:2px solid var(--oro);background:var(--verde-osc);color:var(--oro-cl);font-size:1.1rem;cursor:pointer;box-shadow:0 4px 14px #0007}
#musica.suena{animation:pulso 1.4s infinite}
#musica.suena i{animation:giro 3s linear infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 #c19a3ecc}100%{box-shadow:0 0 0 16px #c19a3e00}}
@keyframes giro{to{transform:rotate(360deg)}}
#yt{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-9px}

/* ===== 4. FRASE ===== */
#frase{background:var(--verde-osc);color:var(--crema)}
#frase p{font:italic 500 1.45rem/1.5 var(--f-titulo);position:relative;z-index:1}
#frase .script{display:block;margin-bottom:14px}

/* ===== 5. FECHA Y LUGAR ===== */
.tarjeta{background:#fff9;border:1px solid var(--oro);border-radius:22px;padding:26px 20px;margin-top:22px;position:relative;z-index:1}
.tarjeta i.ic{font-size:1.8rem;color:var(--oro);margin-bottom:6px}
.tarjeta h3{font:700 1.6rem var(--f-titulo);color:var(--verde)}
.hora{font:600 1.05rem var(--f-texto);color:var(--verde-osc)}
.tarjeta p{font-size:.92rem}

/* ===== 6. UBICACIÓN ===== */
#ubicacion{background:var(--verde-xcl)}
.mapa{width:100%;height:240px;border:3px solid var(--oro);border-radius:20px;margin:20px 0;position:relative;z-index:1}

/* ===== 7. VESTIMENTA ===== */
.muestras{display:flex;justify-content:center;gap:18px;margin:22px 0 14px;position:relative;z-index:1}
.muestras span{width:62px;height:62px;border-radius:50%;border:3px solid var(--oro);box-shadow:0 4px 12px #0003}

/* ===== 8. FORMULARIO ===== */
#rsvp{background:var(--verde-cl)}
form{text-align:left;margin-top:20px;position:relative;z-index:1}
label.t{display:block;font-weight:600;font-size:.85rem;margin:16px 0 6px;color:var(--verde-osc)}
input[type=text]{width:100%;padding:13px 16px;border-radius:50px;border:1.5px solid var(--oro);background:#fffd;font:inherit;font-size:1rem}
input:focus{outline:2px solid var(--verde)}
.num{display:flex;align-items:center;justify-content:center;gap:16px}
.num button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--oro);background:var(--verde);color:#fff;font-size:1.2rem;cursor:pointer}
.num input{width:70px;text-align:center;padding:10px;border-radius:14px;border:1.5px solid var(--oro);font:700 1.3rem var(--f-titulo);background:#fffd}
.radios{display:flex;gap:12px}
.radios label{flex:1;cursor:pointer}
.radios input{position:absolute;opacity:0}
.radios span{display:block;text-align:center;padding:12px;border-radius:50px;border:1.5px solid var(--oro);background:#fffd;font-weight:600;transition:.2s}
.radios input:checked+span{background:var(--verde);color:#fff;box-shadow:0 0 12px #c19a3e99}
.radios input:focus-visible+span{outline:2px solid var(--verde-osc)}
.err{color:#9b2c1d;font-size:.78rem;min-height:1.1em;margin-top:4px;padding-left:12px}
#ok{display:none;text-align:center;padding:26px;border:1.5px solid var(--oro);border-radius:20px;background:#fffc;margin-top:20px}
#ok i{font-size:2.2rem;color:var(--verde)}

/* ===== 9. GALERÍA ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0;position:relative;z-index:1}
.grid div{aspect-ratio:1;border-radius:12px;border:1.5px solid var(--oro);display:grid;place-items:center;color:#fff9;font-size:1.4rem;background:linear-gradient(135deg,var(--verde),var(--verde-osc))}
.grid div:nth-child(2n){background:linear-gradient(135deg,var(--oro-cl),var(--oro))}
.grid div:nth-child(3n){background:linear-gradient(135deg,var(--verde-cl),#b9c48c);color:var(--verde)}
#qr{width:150px;height:150px;border:3px solid var(--oro);border-radius:14px;padding:6px;background:#fff;margin:6px auto 16px;display:block;position:relative;z-index:1}

/* ===== 10. GRACIAS ===== */
#gracias{background:var(--verde-osc);color:var(--crema)}
#gracias h2{color:var(--oro-cl)}
.botones{display:flex;flex-direction:column;gap:12px;margin-top:22px;align-items:center;position:relative;z-index:1}

/* ===== FONDO ACUARELA EN TODO EL SITIO ===== */
.phone{
  background-color:#f7f1de !important;
  background-image:
    linear-gradient(#f7f1dead,#f5f7de85),
    url('image/fondo.png') !important;      /* ✏️ CAMBIAR: ruta de tu imagen, SIN diagonal al inicio */
  background-size:auto, 100% auto !important;
  background-position:top center !important;
  background-repeat:no-repeat, repeat-y !important;
}
#portada, #lugar, #ubicacion, #vestimenta, #galeria{background:none !important}
.flor{display:none}

/* ===== 11. FOOTER ===== */
footer{background:#000;color:#fff;padding:36px 24px;text-align:center;font-size:.82rem}
footer b{color:var(--oro)} footer a{color:var(--oro-cl);text-decoration:none}
footer p{margin:6px 0}
footer i{color:var(--oro);margin-right:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== RESPONSIVO (pegar al FINAL de styles.css) ===== */
:root{--ancho:430px}                    /* ✏️ CAMBIAR: ancho máximo de la invitación */
.phone{max-width:var(--ancho)}
#musica{right:calc(50% - min(50vw,calc(var(--ancho) / 2)) + 14px)}
img,video,iframe{max-width:100%}

/* --- Tamaños fluidos: se adaptan al ancho de cualquier celular --- */
#intro .script{font-size:clamp(2.4rem,11vw,3.8rem)}
.sobre{width:min(340px,86vw);height:calc(min(340px,86vw) * .67)}
.marco{--mw:min(290px,76vw);width:var(--mw);height:calc(var(--mw) * 1.31);border-radius:calc(var(--mw) / 2) calc(var(--mw) / 2) 16px 16px}
.marco img{border-radius:calc(var(--mw) / 2 - 7px) calc(var(--mw) / 2 - 7px) 10px 10px}

/* --- Celulares pequeños (360 px o menos) --- */
@media (max-width:360px){
  section{padding:52px 18px}
  h2{font-size:1.8rem}
  #portada h2{font-size:2rem}
  .cincuenta{font-size:5rem}
  .fecha-portada{font-size:1.3rem}
  #cuenta{gap:6px}
  #cuenta div{width:62px}
  #cuenta b{font-size:1.6rem}
  .flor{width:140px;height:140px}
  .btn{padding:11px 20px}
}

/* --- Tablets y computadoras --- */
@media (min-width:768px){
  :root{--ancho:600px}
  section{padding:80px 56px}
  h2{font-size:2.6rem}
  #portada h2{font-size:3rem}
  .marco{--mw:min(340px,60vw)}
  .mapa{height:320px}
  .flor{width:230px;height:230px}
  #frase p{font-size:1.7rem}
  .tarjeta p{font-size:1rem}
}

/* --- Celular en horizontal (pantalla baja) --- */
@media (max-height:520px) and (orientation:landscape){
  #intro{gap:12px}
  #intro .script{font-size:2rem}
  .sobre{transform:scale(.7)}
  #portada{min-height:auto;padding-top:60px}
}