/* ============================================================================
   PROPUESTAS DE ESTILO DE LA INTERFAZ (?look=cine | acuarela | boda)
   Solo se aplican con la clase look-<nombre> en <html>; sin ella, nada cambia.
   ============================================================================ */

/* Selector de propuestas en la portada */
.look-switch { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; gap: 6px; align-items: center; font: 600 .85rem var(--font); background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 8px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.look-switch a { text-decoration: none; color: #333; padding: 4px 10px; border-radius: 999px; }
.look-switch a.on { background: #1b1b2f; color: #fff; }

/* ---------------------------------------------------------------------------
   CINE · película de animación: cristal esmerilado, sombras suaves, sin trazo negro
   --------------------------------------------------------------------------- */
html.look-cine {
    --ink: #1d2433;
    --glass: rgba(255, 255, 255, .55); --glass-strong: rgba(255, 255, 255, .7); --glass-white: rgba(255, 255, 255, .6);
    --glass-blur: blur(18px) saturate(1.5);
}
.look-cine .title-card { padding: 34px 40px 30px; border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 30px 80px rgba(20, 30, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .7); animation: lookRise .9s cubic-bezier(.2, .8, .2, 1) both; }
.look-cine .title-logo { width: 64px; height: 64px; font: 700 2rem 'Fredoka'; border: none; border-radius: 18px; background: linear-gradient(145deg, #ff5f8f, #ff2e63); color: #fff; box-shadow: 0 10px 24px rgba(255, 46, 99, .45); animation: none; display: grid; place-items: center; }
.look-cine .title { font: 700 clamp(3rem, 7vw, 5.4rem)/1 'Playfair Display', serif; letter-spacing: -1px; color: #1d2433; -webkit-text-stroke: 0; text-shadow: none; margin: 18px 0 6px; }
.look-cine .title span { background: linear-gradient(90deg, #ff2e63, #ff8a5c); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.look-cine .title-sub { background: none; border: none; box-shadow: none; padding: 0; font: 500 1.15rem 'Fredoka'; color: #3d4659; backdrop-filter: none; }
.look-cine .btn { border: none; border-radius: 999px; box-shadow: 0 10px 26px rgba(255, 46, 99, .35); background: linear-gradient(135deg, #ff5f8f, #ff2e63); color: #fff; letter-spacing: .5px; }
.look-cine .btn:hover { box-shadow: 0 14px 30px rgba(255, 46, 99, .45); transform: translateY(-2px); }
.look-cine .btn-ghost { background: rgba(255, 255, 255, .8); color: #1d2433; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.look-cine .hud span { border: none; border-radius: 999px; box-shadow: 0 8px 22px rgba(20, 30, 60, .18); padding: 7px 16px; font-weight: 600; }
.look-cine #hud-stage { background: rgba(29, 36, 51, .78); color: #fff; }
.look-cine #pb-name { font: 700 clamp(2.4rem, 5vw, 3.8rem) 'Playfair Display', serif; -webkit-text-stroke: 0; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.look-cine #pb-sub { border: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .15); border-radius: 999px; font: 500 1.1rem 'Fredoka'; padding: 6px 16px; }
.look-cine .question-card { border: 1px solid rgba(255, 255, 255, .75); border-radius: 26px; box-shadow: 0 24px 60px rgba(20, 30, 60, .25); background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .45)); }
.look-cine #qc-place { font: italic 700 1.25rem 'Playfair Display', serif; color: #ff2e63; }
.look-cine #qc-text { font-weight: 600; color: #1d2433; }
.look-cine .option-btn { border: 1px solid rgba(29, 36, 51, .08); border-radius: 18px; box-shadow: 0 6px 16px rgba(20, 30, 60, .1); background: rgba(255, 255, 255, .82); }
.look-cine .option-btn:hover:not(:disabled) { background: #fff; box-shadow: 0 10px 22px rgba(20, 30, 60, .16); }
.look-cine .opt-letter { border: none; background: linear-gradient(145deg, #ff5f8f, #ff2e63); color: #fff; }
.look-cine #qc-toggle, .look-cine #qc-thumb { border: none; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.look-cine .drag-hint { border: none; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }

/* ---------------------------------------------------------------------------
   ACUARELA · cuento ilustrado: papel, tinta y letra a mano
   --------------------------------------------------------------------------- */
html.look-acuarela { --ink: #3a2c22; --glass: rgba(250, 243, 226, .9); --glass-strong: rgba(250, 243, 226, .94); --glass-white: rgba(252, 247, 236, .92); --glass-blur: none; }
.look-acuarela .title-card, .look-acuarela .question-card, .look-acuarela #pb-sub, .look-acuarela .hud span, .look-acuarela .option-btn, .look-acuarela #qc-toggle {
    background-color: #faf3e2;
    background-image: radial-gradient(rgba(180, 140, 90, .08) 1px, transparent 1px), radial-gradient(rgba(180, 140, 90, .06) 1px, transparent 1px);
    background-size: 7px 7px, 13px 13px; background-position: 0 0, 3px 5px;
}
.look-acuarela .title-card { padding: 30px 38px; border: 2px solid #3a2c22; border-radius: 6px 22px 8px 26px / 22px 8px 26px 10px; box-shadow: 6px 8px 0 rgba(58, 44, 34, .18); transform: rotate(-1deg); animation: lookRise .9s ease both; }
.look-acuarela .title-logo { border: 2px solid #3a2c22; background: #f6c8c0; color: #3a2c22; border-radius: 50% 46% 52% 48%; font-family: 'Caveat'; animation: none; }
.look-acuarela .title { font: 700 clamp(3.4rem, 8vw, 6rem)/.95 'Caveat', cursive; color: #3a2c22; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; }
.look-acuarela .title span { color: #c2485e; }
.look-acuarela .title-sub { border: none; box-shadow: none; background: none; font: 600 1.2rem 'Playfair Display', serif; font-style: italic; color: #6b5444; padding: 0; }
.look-acuarela .btn { font-family: 'Caveat'; font-size: 1.8rem; background: #c2485e; color: #fffaf0; border: 2px solid #3a2c22; border-radius: 14px 6px 16px 8px; box-shadow: 3px 4px 0 rgba(58, 44, 34, .3); }
.look-acuarela .hud span { border: 2px solid #3a2c22; border-radius: 4px 12px 6px 14px; box-shadow: 2px 3px 0 rgba(58, 44, 34, .2); font-family: 'Caveat'; font-size: 1.25rem; }
.look-acuarela #pb-name { font: 700 clamp(3rem, 6vw, 4.6rem) 'Caveat', cursive; color: #fffaf0; -webkit-text-stroke: 1.5px #3a2c22; text-shadow: 3px 4px 0 rgba(58, 44, 34, .35); }
.look-acuarela #pb-sub { border: 2px solid #3a2c22; box-shadow: none; font-family: 'Caveat'; }
.look-acuarela .question-card { border: 2px solid #3a2c22; border-radius: 8px 24px 10px 22px / 22px 10px 24px 8px; box-shadow: 5px 7px 0 rgba(58, 44, 34, .18); }
.look-acuarela #qc-place { font-family: 'Caveat'; color: #c2485e; }
.look-acuarela #qc-text { font: 600 clamp(1.15rem, 1.5vw, 1.4rem) 'Playfair Display', serif; color: #3a2c22; }
.look-acuarela .option-btn { border: 1.5px solid #3a2c22; border-radius: 10px 4px 12px 6px; box-shadow: 2px 3px 0 rgba(58, 44, 34, .2); }
.look-acuarela .opt-letter { border: 1.5px solid #3a2c22; background: #f6c8c0; font-family: 'Caveat'; font-size: 1.3rem; }

/* ---------------------------------------------------------------------------
   BODA · invitación: crema, dorado, serif fina, mucho aire
   --------------------------------------------------------------------------- */
html.look-boda { --ink: #5a4a3a; --gold: #b8924a; --glass: rgba(255, 250, 244, .82); --glass-strong: rgba(255, 250, 244, .9); --glass-white: rgba(255, 250, 244, .86); --glass-blur: blur(10px); }
.look-boda .title-card { position: relative; padding: 44px 50px 38px; text-align: center; background: rgba(255, 250, 244, .9); border-radius: 4px; box-shadow: 0 30px 70px rgba(120, 80, 60, .25); animation: lookRise 1.1s ease both; }
.look-boda .title-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--gold); pointer-events: none; }
.look-boda .title-card::after { content: ''; position: absolute; inset: 15px; border: .5px solid rgba(184, 146, 74, .45); pointer-events: none; }
.look-boda #title-screen { justify-content: center; align-items: center; }
.look-boda .title-logo { margin: 0 auto; width: 58px; height: 58px; border: 1px solid var(--gold); background: none; color: var(--gold); border-radius: 50%; font: italic 400 1.6rem 'Playfair Display', serif; animation: none; display: grid; place-items: center; box-shadow: none; }
.look-boda .title { font: 400 clamp(2.8rem, 6vw, 4.6rem)/1.05 'Playfair Display', serif; letter-spacing: .5px; -webkit-text-stroke: 0; text-shadow: none; color: #5a4a3a; margin: 20px 0 10px; }
.look-boda .title span { font-style: italic; background: linear-gradient(100deg, #9c7536, #e3c27a 45%, #a67c3c 60%, #e8cf92); -webkit-background-clip: text; background-clip: text; color: transparent; }
.look-boda .title-sub { background: none; border: none; box-shadow: none; padding: 0; font: 400 .95rem 'Fredoka'; letter-spacing: 4px; text-transform: uppercase; color: #8a7765; }
.look-boda .title-sub em { font-family: 'Playfair Display'; text-transform: none; letter-spacing: 0; color: var(--gold); font-size: 1.15rem; }
.look-boda .btn { background: none; color: #5a4a3a; border: 1px solid var(--gold); border-radius: 0; box-shadow: none; font: 400 1rem 'Fredoka'; letter-spacing: 5px; text-transform: uppercase; padding: 1em 2.6em; transition: background .3s, color .3s; }
.look-boda .btn:hover { background: var(--gold); color: #fffaf4; transform: none; box-shadow: none; }
.look-boda .hud span { border: 1px solid rgba(184, 146, 74, .6); border-radius: 0; box-shadow: none; font: 400 .85rem 'Fredoka'; letter-spacing: 2px; text-transform: uppercase; color: #5a4a3a; background: rgba(255, 250, 244, .85); }
.look-boda #hud-stage { background: rgba(255, 250, 244, .85); color: var(--gold); }
.look-boda #pb-name { font: italic 400 clamp(2.6rem, 5vw, 4rem) 'Playfair Display', serif; -webkit-text-stroke: 0; color: #fffaf4; text-shadow: 0 4px 30px rgba(90, 60, 40, .55); }
.look-boda #pb-sub { border: none; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); border-radius: 0; box-shadow: none; background: rgba(255, 250, 244, .85); font: 400 1rem 'Fredoka'; letter-spacing: 2px; color: #5a4a3a; }
.look-boda .question-card { border: none; border-radius: 2px; box-shadow: 0 20px 60px rgba(120, 80, 60, .22); outline: 1px solid var(--gold); outline-offset: -8px; }
.look-boda #qc-place { font: italic 400 1.2rem 'Playfair Display', serif; color: var(--gold); }
.look-boda #qc-text { font: 400 clamp(1.1rem, 1.5vw, 1.35rem)/1.4 'Playfair Display', serif; color: #5a4a3a; }
.look-boda .option-btn { border: 1px solid rgba(184, 146, 74, .5); border-radius: 0; box-shadow: none; background: rgba(255, 250, 244, .9); color: #5a4a3a; }
.look-boda .option-btn:hover:not(:disabled) { background: #fff; border-color: var(--gold); }
.look-boda .opt-letter { border: 1px solid var(--gold); background: none; color: var(--gold); font: italic 400 1.1rem 'Playfair Display', serif; }
.look-boda #qc-toggle, .look-boda #qc-thumb { border: 1px solid var(--gold); border-radius: 0; box-shadow: none; }

@keyframes lookRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Recuadro "Unidad Tesla" de la portada en cada estilo */
.look-cine .tesla-box { border: none; border-radius: 20px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.look-acuarela .tesla-box { border: 1.5px dashed #3a2c22; border-radius: 10px; background: transparent; box-shadow: none; font-family: 'Playfair Display', serif; }
.look-acuarela .tesla-box .btn { font-size: 1.3rem; }
.look-boda .tesla-box { border: none; border-top: 1px solid rgba(184, 146, 74, .5); border-radius: 0; background: none; box-shadow: none; padding-top: 18px; color: #8a7765; }
.look-boda .tesla-box .row { justify-content: center; }
.look-boda .tesla-box .btn { font-size: .8rem; letter-spacing: 3px; padding: .9em 1.6em; }