/* ==========================================================================
   Invitación de boda María & Aitor — estilos
   Paleta: crema #E7DFCF / #F5EFE3, dorado #8B7C64 / #B49A72, tinta #6E5F49
   ========================================================================== */

/* ---------- base ---------- */
html, body { margin:0; padding:0; background:#E7DFCF; -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* Chrome pinta un cursor de texto al hacer clic si está activa la navegación con cursor (F7). */
html { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }
/* El puntero es siempre la flecha: aquí además la selección de texto ya está desactivada. */
body { cursor: default; }
input, textarea, [contenteditable] { cursor: text; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
a { color:#8B7C64; }
a:hover { color:#6E5F49; }
input, textarea { font-family:'Cormorant Garamond', serif; -webkit-user-select:text; user-select:text; }
input:focus, textarea:focus { outline:none; border-color:#B49A72 !important; }
::placeholder { color:#B3A488; opacity:1; }
img { -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none; pointer-events:none; }
button { font-family:'Cormorant Garamond', serif; }

/* ---------- loading / first-paint gating ---------- */
#content { opacity:0; }
#overlay { position:fixed; inset:0; z-index:50; background:#ECE3D2; }
html:not(.env-ready) #overlay > div { opacity:0; }
html:not(.env-ready) #hamburger, html:not(.env-ready) #scrollTop, html:not(.env-ready) #menuOverlay { opacity:0 !important; pointer-events:none !important; }
@keyframes spin { to { transform:rotate(360deg); } }
.load-mask { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(231,222,204,0.72); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.spin-lg { width:46px; height:46px; border:3px solid rgba(139,124,100,0.3); border-top-color:#8B7C64; border-radius:50%; animation:spin 0.7s linear infinite; }

/* ---------- layout ---------- */
.page { min-height:100vh; width:100%; display:flex; justify-content:center; background:#E7DFCF; font-family:'Cormorant Garamond', serif; }
#content { width:100%; max-width:460px; background:#F5EFE3; box-shadow:0 0 60px -20px rgba(110,95,73,0.35); transition:opacity 0.7s ease 0.15s; }

/* ---------- envelope (posición/animación la fija el JS; aquí solo capas decorativas) ---------- */
.env-stage { position:absolute; inset:0; perspective:1400px; }
.env-base { position:absolute; inset:0; background:#E7DDC6; border-radius:5px; overflow:hidden; box-shadow:inset 0 14px 22px -10px rgba(70,54,30,0.5), 0 22px 46px -26px rgba(78,64,40,0.5); }
.env-letter-card { width:100%; height:100%; overflow:hidden; border-radius:inherit; background:#F7F1E6; }
.env-hero { width:100%; height:auto; display:block; }
.env-front-weave { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg, rgba(108,84,48,0.055) 0 1px, rgba(255,251,242,0.05) 1px 2px), repeating-linear-gradient(90deg, rgba(108,84,48,0.06) 0 1px, rgba(255,251,242,0.05) 1px 2px); background-size:2px 2px; }
.env-front-dots { position:absolute; inset:0; opacity:0.2; background-image:radial-gradient(rgba(120,96,58,0.08) 0.5px, rgba(0,0,0,0) 0.6px); background-size:12px 15px; }
.env-front-glow { position:absolute; inset:0; box-shadow:inset 0 0 40px rgba(120,94,54,0.16); }
.env-front-vee { position:absolute; inset:0; clip-path:polygon(0 100%, 50% 62%, 100% 100%); box-shadow:inset 0 1px 0 rgba(255,250,240,0.3); }
.env-front-lip { position:absolute; inset:0; box-shadow:inset 0 4px 7px -3px rgba(70,54,30,0.4); }
.env-seal-wax { position:absolute; inset:0; width:100%; height:100%; display:block; }
.env-seal-logo { position:relative; width:62px; height:auto; display:block; transform:translate(2px, -1.5px); filter:drop-shadow(0.6px 1px 0.5px rgba(52,36,14,0.7)) drop-shadow(-0.5px -0.7px 0.4px rgba(255,248,220,0.55)); }
#tapHint { position:absolute; left:0; right:0; bottom:8%; text-align:center; z-index:7; pointer-events:none; transition:opacity 0.4s ease; }
.tap-hint-text { font-size:16px; letter-spacing:3px; text-transform:uppercase; color:#5A4C39; text-shadow:0 1px 3px rgba(247,242,232,0.85); }
.tap-hint-arrow { font-size:20px; color:#7C6142; margin-top:8px; text-shadow:0 1px 3px rgba(247,242,232,0.85); }

/* ---------- hero / cover ---------- */
.cover { width:100%; background:#F5EFE3; }
.cover-img { width:100%; height:auto; display:block; }
.hero-fallback { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; background:linear-gradient(160deg,#F7F1E6,#EDE3D0); }
.hero-fallback.cover-fallback { padding:64px 24px; }
.hf-eyebrow { font-family:'Cormorant Garamond',serif; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:#B09E82; }
.hf-name { font-family:'Alex Brush',cursive; font-size:52px; color:#6E5F49; line-height:1.05; margin:10px 0; }
.hf-date { font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:3px; color:#8B7C64; }
.cover-fallback .hf-eyebrow { font-size:13px; letter-spacing:5px; }
.cover-fallback .hf-name { font-size:66px; margin:14px 0; }
.cover-fallback .hf-date { font-size:15px; letter-spacing:4px; }

/* ---------- sections ---------- */
.section { padding:46px 34px 44px; text-align:center; border-top:1px solid rgba(139,124,100,0.2); }
.section.cream { background:#F5EFE3; }
.section.sand { background:#F0E8D9; }
.section.bordered { border-top:1px solid rgba(139,124,100,0.2); }
.section.pt-44 { padding-top:44px; }
.section.pb-46 { padding-bottom:46px; }
.welcome { background:#F5EFE3; padding:44px 20px 40px; text-align:center; border-top:1px solid rgba(139,124,100,0.2); }
.welcome-script { font-family:'Alex Brush', cursive; font-size:30px; color:#A8977B; margin-bottom:16px; }
.welcome-lead { font-size:21px; line-height:1.62; color:#7C6E57; margin:0 auto; max-width:392px; text-wrap:balance; }
.welcome-lead.tight { margin:9px auto 0; max-width:340px; }
.section-lead { font-size:19px; line-height:1.55; color:#7C6E57; margin:0 auto 22px; max-width:330px; }

.eyebrow { font-size:13px; letter-spacing:4px; text-transform:uppercase; color:#B09E82; }
.script-title { font-family:'Alex Brush', cursive; color:#6E5F49; line-height:1.12; margin-top:4px; }
.script-title.lg { font-size:44px; }
.script-title.md { font-size:42px; }
.divider { display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 34px; }
.divider.sm { margin-bottom:20px; }
.divider.footer { margin:16px 0; }
.divider > span { height:1px; width:52px; background:rgba(139,124,100,0.4); }
.divider.footer > span { width:44px; }

/* ---------- schedule ---------- */
.schedule-wrap { max-width:326px; margin:0 auto; position:relative; }
.schedule-rail { position:absolute; left:18px; top:24px; bottom:24px; width:1px; background:rgba(139,124,100,0.35); }
.schedule { display:flex; flex-direction:column; gap:22px; position:relative; }

/* ---------- bus ---------- */
.bus-card { max-width:340px; margin:0 auto 24px; padding:6px 22px 20px; background:#FBF7EE; border:1px solid rgba(139,124,100,0.25); border-radius:8px; text-align:left; box-shadow:0 14px 30px -22px rgba(110,95,73,0.6); }
.bus-route { padding:18px 0; }
.bus-route.divided { border-bottom:1px solid rgba(139,124,100,0.22); }
.route-head { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.route-head > span:last-child { font-size:14px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#A8977B; }
.route-ico { display:flex; align-items:center; justify-content:center; color:#B7A488; flex:0 0 auto; }
.route-stops { display:flex; flex-direction:column; gap:9px; padding-left:4px; }
.stop { display:flex; align-items:baseline; gap:14px; }
.stop > span:first-child { flex:0 0 62px; font-size:20px; font-weight:600; letter-spacing:0.5px; color:#6E5F49; }
.stop > span:last-child { font-size:17px; color:#7C6E57; }

/* ---------- forms ---------- */
.form-col { max-width:340px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.form-col.spaced { margin:18px auto 0; }
.field { width:100%; padding:13px 16px; font-size:18px; color:#6E5F49; background:#FBF7EE; border:1px solid rgba(139,124,100,0.35); border-radius:3px; }
.field.note { resize:none; line-height:1.5; }
.btn-send { padding:13px 40px; background:#8B7C64; color:#F7F2E8; border:none; font-size:15px; letter-spacing:3px; text-transform:uppercase; border-radius:2px; cursor:pointer; box-shadow:0 12px 24px -14px rgba(110,95,73,0.7); }
.btn-send.self-center { align-self:center; margin-top:4px; }
.btn-send:hover { background:#75664f; }
.btn-cancel { padding:9px 26px; background:transparent; color:#8B7C64; border:1px solid rgba(139,124,100,0.5); font-size:12px; letter-spacing:2px; text-transform:uppercase; border-radius:2px; cursor:pointer; margin-top:10px; }
.btn-cancel.self-center { align-self:center; }
.btn-cancel:hover { background:rgba(139,124,100,0.08); }
.lbl { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#B09E82; }
.diet-chips { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:340px; margin:0 auto; }

/* ---------- location ---------- */
.loc-name { font-size:23px; font-weight:600; color:#7C6E57; margin-top:14px; letter-spacing:0.5px; }
.loc-addr { font-size:17px; color:#9A8A70; margin-top:4px; line-height:1.5; }
.map-frame { margin-top:22px; border-radius:6px; overflow:hidden; border:1px solid rgba(139,124,100,0.3); box-shadow:0 16px 34px -20px rgba(110,95,73,0.5); }
.map-frame iframe { border:0; display:block; filter:saturate(0.72) sepia(0.12); }
.map-btn { display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:14px 30px; background:#B49A72; color:#F7F2E8; text-decoration:none; font-size:15px; letter-spacing:3px; text-transform:uppercase; border-radius:2px; box-shadow:0 12px 24px -14px rgba(110,95,73,0.7); }

/* ---------- footer ---------- */
.footer { background:#F5EFE3; padding:44px 34px 46px; text-align:center; border-top:1px solid rgba(139,124,100,0.2); }
.footer-tagline { font-style:italic; font-size:19px; color:#9A8A70; }
.footer-name { font-family:'Alex Brush', cursive; font-size:40px; color:#6E5F49; line-height:1.1; margin-top:2px; }
.footer-date { font-size:15px; letter-spacing:4px; color:#B09E82; margin-top:8px; }

/* ---------- chrome: hamburger, menu, scroll-top ---------- */
#hamburger { position:fixed; top:16px; right:16px; z-index:45; width:46px; height:46px; border-radius:50%; background:rgba(245,239,227,0.94); border:1px solid rgba(139,124,100,0.35); box-shadow:0 8px 20px -12px rgba(110,95,73,0.6); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:opacity 0.4s ease; }
#hamburger span { width:22px; height:2px; background:#6E5F49; border-radius:2px; }
#menuOverlay { position:fixed; inset:0; z-index:55; background:linear-gradient(180deg, #F5EFE3 0%, #EFE6D5 100%); display:flex; align-items:center; justify-content:center; transition:opacity 0.35s ease; }
.menu-close { position:absolute; top:16px; right:22px; background:none; border:none; font-size:40px; line-height:1; color:#8B7C64; cursor:pointer; }
.menu-list { display:flex; flex-direction:column; align-items:center; gap:24px; }
.menu-name { font-family:'Alex Brush', cursive; font-size:46px; color:#6E5F49; line-height:1; margin-bottom:8px; }
.nav-link { font-size:23px; letter-spacing:3px; text-transform:uppercase; color:#8B7C64; cursor:pointer; text-decoration:none; }
#scrollTop { position:fixed; bottom:20px; right:20px; z-index:45; width:50px; height:50px; border-radius:50%; background:#8B7C64; border:none; cursor:pointer; box-shadow:0 12px 24px -10px rgba(110,95,73,0.7); display:flex; align-items:center; justify-content:center; transition:opacity 0.4s ease, transform 0.4s ease; }

/* ---------- popups ---------- */
.pop-bg { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(60,48,34,0.4); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:24px; }
.pop-bg + .pop-bg { z-index:65; }
.pop-card { background:#F5EFE3; border:1px solid rgba(139,124,100,0.35); border-radius:10px; max-width:360px; width:100%; padding:32px 30px 26px; text-align:center; box-shadow:0 30px 60px -20px rgba(80,60,40,0.5); }
.pop-btn-ghost { padding:12px 30px; background:transparent; color:#8B7C64; border:1px solid rgba(139,124,100,0.5); font-size:15px; letter-spacing:2px; text-transform:uppercase; border-radius:2px; cursor:pointer; }
.pop-btn-ghost:hover { background:rgba(139,124,100,0.08); }
.pop-btn-del { padding:12px 30px; background:#C0453A; color:#F7F2E8; border:none; font-size:15px; letter-spacing:2px; text-transform:uppercase; border-radius:2px; cursor:pointer; }
.pop-btn-del:hover { background:#a83a30; }