/* ========================================================= TAROT WEB DISEÑO VISUAL - PRIMERA MAQUETA ========================================================= */ /* ---------- CONFIGURACIÓN GENERAL ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: "Cormorant Garamond", Georgia, serif; color: #f5ead0; background: radial-gradient(circle at 50% 18%, rgba(78, 61, 112, 0.28) 0%, rgba(18, 18, 38, 0.18) 30%, transparent 58% ), radial-gradient(circle at 20% 80%, rgba(61, 46, 88, 0.18), transparent 45% ), linear-gradient( 135deg, #080b18 0%, #101429 45%, #080a15 100% ); position: relative; overflow-x: hidden; } /* ---------- ESTRELLAS SUTILES DEL FONDO ---------- */ /* ---------- CIELO ESTRELLADO: 7 + 7 + 7 ---------- */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.9; background-image: /* 7 ESTRELLAS GRANDES */ radial-gradient(ellipse 2px 13px at 8% 12%, #fff2c5, transparent), radial-gradient(ellipse 13px 2px at 8% 12%, #fff2c5, transparent), radial-gradient(ellipse 2px 12px at 32% 28%, #e3edff, transparent), radial-gradient(ellipse 12px 2px at 32% 28%, #e3edff, transparent), radial-gradient(ellipse 2px 14px at 73% 9%, #fff2c5, transparent), radial-gradient(ellipse 14px 2px at 73% 9%, #fff2c5, transparent), radial-gradient(ellipse 2px 12px at 91% 39%, #e3edff, transparent), radial-gradient(ellipse 12px 2px at 91% 39%, #e3edff, transparent), radial-gradient(ellipse 2px 14px at 16% 76%, #fff2c5, transparent), radial-gradient(ellipse 14px 2px at 16% 76%, #fff2c5, transparent), radial-gradient(ellipse 2px 13px at 82% 83%, #fff2c5, transparent), radial-gradient(ellipse 13px 2px at 82% 83%, #fff2c5, transparent), radial-gradient(ellipse 2px 12px at 52% 56%, #e3edff, transparent), radial-gradient(ellipse 12px 2px at 52% 56%, #e3edff, transparent), /* 7 ESTRELLAS MEDIANAS */ radial-gradient(ellipse 1.5px 8px at 21% 19%, #fff7de, transparent), radial-gradient(ellipse 8px 1.5px at 21% 19%, #fff7de, transparent), radial-gradient(ellipse 1.5px 7px at 56% 15%, #dce8ff, transparent), radial-gradient(ellipse 7px 1.5px at 56% 15%, #dce8ff, transparent), radial-gradient(ellipse 1.5px 8px at 96% 63%, #fff7de, transparent), radial-gradient(ellipse 8px 1.5px at 96% 63%, #fff7de, transparent), radial-gradient(ellipse 1.5px 7px at 5% 48%, #dce8ff, transparent), radial-gradient(ellipse 7px 1.5px at 5% 48%, #dce8ff, transparent), radial-gradient(ellipse 1.5px 8px at 42% 88%, #fff7de, transparent), radial-gradient(ellipse 8px 1.5px at 42% 88%, #fff7de, transparent), radial-gradient(ellipse 1.5px 7px at 69% 67%, #dce8ff, transparent), radial-gradient(ellipse 7px 1.5px at 69% 67%, #dce8ff, transparent), radial-gradient(ellipse 1.5px 8px at 31% 52%, #fff7de, transparent), radial-gradient(ellipse 8px 1.5px at 31% 52%, #fff7de, transparent), /* 7 ESTRELLAS PEQUEÑAS */ radial-gradient(ellipse 1px 5px at 44% 7%, #ffffff, transparent), radial-gradient(ellipse 5px 1px at 44% 7%, #ffffff, transparent), radial-gradient(ellipse 1px 5px at 87% 22%, #ffffff, transparent), radial-gradient(ellipse 5px 1px at 87% 22%, #ffffff, transparent), radial-gradient(ellipse 1px 4px at 12% 91%, #ffffff, transparent), radial-gradient(ellipse 4px 1px at 12% 91%, #ffffff, transparent), radial-gradient(ellipse 1px 5px at 59% 43%, #ffffff, transparent), radial-gradient(ellipse 5px 1px at 59% 43%, #ffffff, transparent), radial-gradient(ellipse 1px 4px at 77% 94%, #ffffff, transparent), radial-gradient(ellipse 4px 1px at 77% 94%, #ffffff, transparent), radial-gradient(ellipse 1px 5px at 29% 58%, #ffffff, transparent), radial-gradient(ellipse 5px 1px at 29% 58%, #ffffff, transparent), radial-gradient(ellipse 1px 4px at 94% 91%, #ffffff, transparent), radial-gradient(ellipse 4px 1px at 94% 91%, #ffffff, transparent), /* RESPLANDORES DE LAS 7 ESTRELLAS GRANDES */ radial-gradient(circle 25px at 8% 12%, rgba(255, 222, 144, 0.22), transparent), radial-gradient(circle 23px at 32% 28%, rgba(179, 205, 255, 0.20), transparent), radial-gradient(circle 27px at 73% 9%, rgba(255, 222, 144, 0.22), transparent), radial-gradient(circle 23px at 91% 39%, rgba(179, 205, 255, 0.20), transparent), radial-gradient(circle 27px at 16% 76%, rgba(255, 222, 144, 0.22), transparent), radial-gradient(circle 25px at 82% 83%, rgba(255, 222, 144, 0.22), transparent), radial-gradient(circle 24px at 52% 56%, rgba(179, 205, 255, 0.20), transparent); } /* ---------- CONTENEDOR PRINCIPAL ---------- */ .contenedor { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 35px 20px 70px; text-align: center; position: relative; } /* ---------- ZONA DEL MAZO ---------- */ .zona-mazo { display: flex; justify-content: center; align-items: center; min-height: 230px; position: relative; } /* El botón no parece un botón tradicional */ .mazo-boton { border: none; background: transparent; padding: 0; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .mazo-boton:hover { transform: translateY(-5px); } .mazo-boton:active { transform: translateY(1px); } /* ========================================================= DORSO DEL MAZO Estética tarot pixel-art dorado / azul noche ========================================================= */ .mazo-visual { width: 140px; height: 220px; position: relative; filter: drop-shadow(0 0 10px rgba(225, 184, 79, 0.28)) drop-shadow(0 18px 25px rgba(0, 0, 0, 0.75)); transition: filter 0.5s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center center; } /* ========================================================= MAZO ABIERTO ========================================================= */ .mazo-visual.mazo-abierto { transform: scale(1.08) translateY(-8px); filter: drop-shadow(0 0 14px rgba(225, 184, 79, 0.45)) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.75)); } /* ========================================================= CARTAS QUE FORMAN EL MAZO ========================================================= */ .carta-mazo { position: absolute; width: 116px; height: 199px; left: 9px; top: 9px; overflow: hidden; border-radius: 8px; border: 2px solid #b67c20; background: radial-gradient( circle at 50% 50%, rgba(218, 172, 57, 0.10), transparent 45% ), linear-gradient( 145deg, #111a31 0%, #050914 100% ); } /* Carta posterior */ .carta-mazo-trasera { transform: translate(-9px, 5px) rotate(-3deg); opacity: 0.55; } /* Carta intermedia */ .carta-mazo-media { transform: translate(-4px, 2px) rotate(-1.5deg); opacity: 0.82; } /* ========================================================= CARTA PRINCIPAL ========================================================= */ .carta-mazo-principal { display: flex; justify-content: center; align-items: center; overflow: hidden; background-image: url("Tarot Rider Waite Smith 1910/Dorso.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; border: none; box-shadow: 0 0 14px rgba(225, 184, 79, 0.30), 0 8px 18px rgba(0, 0, 0, 0.55); } /* ---------- CAJETÍN DE INSTRUCCIONES ---------- */ .instrucciones { width: min(650px, 100%); margin: 0 auto 45px; padding: 16px 24px; position: relative; display: flex; justify-content: center; align-items: center; gap: 13px; background: linear-gradient( 135deg, rgba(48, 35, 24, 0.95), rgba(22, 20, 25, 0.97) ); border: 3px solid #b88935; outline: 1px solid rgba(244, 210, 125, 0.45); box-shadow: 0 0 0 4px rgba(69, 43, 17, 0.85), 0 0 18px rgba(207, 159, 65, 0.18), inset 0 0 15px rgba(218, 175, 83, 0.08); } /* pequeños detalles dorados */ .instrucciones::before, .instrucciones::after { content: "◆"; position: absolute; top: 50%; transform: translateY(-50%); color: #e0b95f; font-size: 11px; } .instrucciones::before { left: 8px; } .instrucciones::after { right: 8px; } .instrucciones p { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; color: #f0dfb8; } .ornamento { color: #e1bb5c; font-size: 22px; } /* ---------- ZONA DE LAS TRES CARTAS ---------- */ .zona-tirada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; align-items: start; } /* ---------- POSICIONES ---------- */ .posicion-carta { min-width: 0; } .posicion-carta h2 { margin: 0 0 14px; font-family: "Cinzel", Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: 1px; color: #e6cc8b; text-shadow: 0 0 8px rgba(215, 177, 83, 0.25); } /* ---------- ESPACIO DONDE IRÁ LA CARTA ---------- */ .espacio-carta { width: 100%; aspect-ratio: 800 / 1371; max-width: 170px; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; background: linear-gradient( 145deg, rgba(20, 30, 45, 0.82), rgba(7, 11, 21, 0.92) ); /* Marco azul cielo. Varias capas para darle una apariencia ligeramente irregular y luminosa. */ border: 3px solid rgba(116, 207, 238, 0.90); outline: 1px solid rgba(164, 230, 249, 0.35); box-shadow: 0 0 0 2px rgba(40, 103, 130, 0.55), 0 0 8px rgba(87, 194, 235, 0.28), 0 0 20px rgba(65, 170, 215, 0.10), inset 0 0 25px rgba(74, 181, 224, 0.08); color: rgba(126, 211, 239, 0.90); transition: box-shadow 0.3s ease, transform 0.3s ease; } /* Pequeñas irregularidades luminosas. Ayudan a quitar la sensación de rectángulo perfectamente digital. */ .espacio-carta::before { content: ""; position: absolute; inset: -2px; border: 1px solid rgba(136, 219, 243, 0.55); opacity: 0.55; filter: blur(0.35px); pointer-events: none; } /* ---------- TEXTO PASADO / PRESENTE / FUTURO ---------- */ .espacio-carta span { font-family: "Cinzel", Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #8fd9f2; text-shadow: 0 0 5px rgba(99, 203, 239, 0.45), 0 0 12px rgba(74, 181, 224, 0.20); opacity: 0.92; } /* ---------- CAJETÍN DE RESULTADO ---------- */ .resultado { width: 100%; margin-top: 45px; padding: 30px 35px; min-height: 190px; background: linear-gradient( 145deg, rgba(25, 23, 28, 0.97), rgba(11, 12, 20, 0.98) ); border: 3px solid #b88935; outline: 1px solid rgba(242, 207, 117, 0.35); box-shadow: 0 0 0 4px rgba(65, 42, 18, 0.8), 0 0 25px rgba(197, 150, 58, 0.13), inset 0 0 30px rgba(217, 172, 75, 0.06); } /* Encabezado */ .resultado-cabecera { display: flex; justify-content: center; align-items: center; gap: 12px; } .resultado-cabecera span { color: #d9af54; font-size: 16px; } .resultado h2 { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 25px; font-weight: 600; color: #e4c879; } .resultado p { margin: 18px auto 0; max-width: 600px; font-size: 20px; line-height: 1.45; color: #d8cdb6; } /* ---------- PUBLICIDAD ---------- */ .publicidad { position: fixed; top: 50%; transform: translateY(-50%); width: 170px; text-align: center; z-index: 5; } .publicidad-izquierda { left: 20px; } .publicidad-derecha { right: 20px; } .publicidad > span { display: block; margin-bottom: 8px; font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: 1px; color: rgba(218, 198, 153, 0.65); } /* Marco de publicidad */ .espacio-publicidad { width: 170px; height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient( 145deg, #171821, #0d0f19 ); border: 4px solid #b88935; outline: 1px solid rgba(238, 199, 103, 0.4); box-shadow: 0 0 0 5px rgba(53, 34, 17, 0.85), 0 0 20px rgba(204, 157, 62, 0.12), inset 0 0 25px rgba(216, 169, 69, 0.06); } .espacio-publicidad p { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 17px; color: #9e9da5; } .espacio-publicidad small { margin-top: 8px; font-family: Arial, sans-serif; font-size: 11px; color: #777781; } /* ========================================================= RESPONSIVE ========================================================= */ /* Pantallas donde los anuncios laterales ya no caben */ @media (max-width: 1200px) { .publicidad { display: none; } .contenedor { width: min(800px, calc(100% - 30px)); } } /* TABLET */ @media (max-width: 650px) { .contenedor { width: calc(100% - 24px); padding: 25px 8px 50px; } .zona-mazo { min-height: 200px; } .instrucciones { margin-bottom: 35px; padding: 14px 20px; } .instrucciones p { font-size: 19px; } .zona-tirada { gap: 10px; } .posicion-carta h2 { font-size: 14px; letter-spacing: 0.5px; } .espacio-carta { max-width: 125px; } .resultado { padding: 25px 18px; } .resultado h2 { font-size: 21px; } .resultado p { font-size: 18px; } } /* CELULAR PEQUEÑO */ @media (max-width: 430px) { .contenedor { width: calc(100% - 16px); padding-left: 4px; padding-right: 4px; } .zona-tirada { gap: 6px; } .posicion-carta h2 { font-size: 12px; } .espacio-carta { max-width: 105px; } .instrucciones p { font-size: 17px; } .resultado { padding: 22px 14px; } } /* ---------- LIMPIEZA DEFINITIVA DEL ANTIGUO SOL ---------- */ .sol-mistico, .sol-mistico::before, .sol-mistico::after { display: none !important; } .carta-mazo-principal::before, .carta-mazo-principal::after { display: none !important; } /* ---------- CARTA DENTRO DEL ESPACIO ---------- */ .espacio-carta img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 6px; } /* ---------- CARTA ACTIVA ---------- */ .espacio-carta.carta-activa { border-color: #c5f3ff; box-shadow: 0 0 0 3px rgba(100, 205, 255, 0.85), 0 0 18px rgba(105, 216, 255, 0.95), 0 0 38px rgba(77, 193, 255, 0.60), 0 0 60px rgba(77, 193, 235, 0.25), inset 0 0 25px rgba(105, 216, 255, 0.18); transform: translateY(-3px); } /* ========================================================= ABANICO DE CARTAS Primera etapa: mostrar las 78 cartas ========================================================= */ /* Ventana visible del abanico */ .abanico { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0) scale(0); width: min(1600px, 96vw); height: 190px; display: flex; align-items: center; /* La cinta comienza desde la izquierda */ justify-content: flex-start; overflow: hidden; pointer-events: none; opacity: 0; transition: transform 0.7s ease, opacity 0.5s ease; } /* Cinta que contiene las 78 cartas */ .cinta-cartas { display: flex; align-items: center; flex-shrink: 0; width: max-content; height: 100%; transform: translateX(0); transition: transform 0.08s linear; padding-top: 30px; } /* Abanico visible */ .abanico.abierto { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; } /* Cada carta del abanico */ .carta-abanico { flex-shrink: 0; width: 76px; aspect-ratio: 800 / 1371; height: auto; margin-left: -55px; background-image: url("Tarot Rider Waite Smith 1910/Dorso.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.65), 0 0 4px rgba(225, 184, 79, 0.25); border: 1px solid #a97929; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Primera carta */ .carta-abanico:first-child { margin-left: 0; } .mazo-visual.oculto { opacity: 0; transform: scale(0.85); pointer-events: none; } /* Margen de seguridad para la publicidad lateral */ @media (min-width: 1201px) { .abanico { width: min(1600px, calc(100vw - 460px)); } } .carta-abanico { position: relative; cursor: pointer; } .carta-abanico:hover { transform: translateY(-22px) scale(1.05); z-index: 100; box-shadow: 0 0 12px rgba(255, 211, 105, 0.8), 0 0 24px rgba(225, 184, 79, 0.35); } .cinta-cartas:hover .carta-abanico:not(:hover) { z-index: 0; } .carta-abanico.seleccionada { opacity: 0; pointer-events: none; transform: none; box-shadow: none; } .carta-abanico.seleccionada:hover { opacity: 0; transform: none; box-shadow: none; } /* Carta temporal que viaja desde el abanico */ .carta-voladora { position: fixed; z-index: 10000; pointer-events: none; transform-style: preserve-3d; perspective: 1000px; } .cara-voladora { position: absolute; inset: 0; border-radius: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; backface-visibility: hidden; border: 1px solid #c9a45d; box-shadow: 0 0 12px rgba(255, 211, 105, 0.7), 0 0 24px rgba(225, 184, 79, 0.35); } .cara-voladora.trasera { background-image: url("Tarot Rider Waite Smith 1910/Dorso.jpg"); } .cara-voladora.frontal { transform: rotateY(180deg); } .contenido-volador { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: center center; } /* ---------- TÍTULO PRINCIPAL ---------- */ .cabecera-tarot { text-align: center; margin-bottom: 35px; } .cabecera-tarot h1 { display: flex; flex-direction: column; gap: 4px; margin: 0; font-family: "Cinzel", Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 600; line-height: 1.25; letter-spacing: 2px; color: #f2d58e; text-shadow: 0 0 18px rgba(225, 184, 79, 0.25); } .cabecera-tarot p { margin: 15px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 3vw, 27px); font-style: italic; color: #e9d5af; } /* ---------- MARCO BARROCO DE INTERPRETACIONES ---------- */ .resultado { position: relative; border: 35px solid transparent; border-image-source: url("marcos_barrocos/marco_barroco_completo.png"); border-image-slice: 180; border-image-width: 35px; border-image-repeat: stretch; border-style: solid; } /* Fondo uniforme detrás del marco barroco */ #resultado { box-shadow: none; outline: none; background: linear-gradient( 145deg, #19171c, #0b0c14 ); background-clip: border-box; } /* MARCO BARROCO DEL CAJETÍN DE INSTRUCCIONES */ .instrucciones { position: relative; border: 35px solid transparent; border-image-source: url("marcos_barrocos/marco_barroco_completo.png"); border-image-slice: 180; border-image-width: 35px; border-image-repeat: stretch; box-shadow: none; outline: none; background-clip: border-box; } /* INSTRUCCIONES CON FONDO TRANSPARENTE */ .instrucciones { background: transparent !important; background-color: transparent !important; box-shadow: none; outline: none; } /* INTERPRETACIONES CON FONDO TRANSPARENTE */ #resultado { background: transparent !important; background-color: transparent !important; box-shadow: none; outline: none; } /* ========================================================= JOYA MÁGICA DEL MAGO SUERTUDO Etapa 1: rubí decorativo ========================================================= */ /* Espacio reservado entre las cartas y la interpretación */ .zona-joya { width: 100%; min-height: 125px; display: flex; align-items: center; justify-content: center; position: relative; margin-top: 20px; } /* Joya centrada */ .joya-magica { width: 100px; height: 100px; position: relative; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 10px rgba(230, 50, 85, 0.25)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55)); } /* Montura octogonal dorada */ .joya-montura { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; clip-path: polygon( 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30% ); background: linear-gradient( 135deg, #fff1bb 0%, #d7a644 24%, #785016 55%, #f3cf78 78%, #a46b22 100% ); box-shadow: inset 0 0 0 2px #fff0b0; } /* Piedra preciosa */ .joya-rubi { width: 88px; height: 88px; position: relative; overflow: hidden; clip-path: polygon( 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30% ); background: radial-gradient( circle at 32% 22%, #ffd6df 0%, #ff4b70 22%, #d60039 53%, #790020 80%, #380010 100% ); } /* Facetas del rubí */ .faceta { position: absolute; inset: 0; } .faceta-superior { clip-path: polygon( 30% 0%, 70% 0%, 60% 34%, 40% 34% ); background: rgba(255, 205, 220, 0.48); } .faceta-izquierda { clip-path: polygon( 0% 30%, 40% 34%, 50% 50%, 30% 100%, 0% 70% ); background: rgba(255, 80, 115, 0.27); } .faceta-derecha { clip-path: polygon( 100% 30%, 60% 34%, 50% 50%, 70% 100%, 100% 70% ); background: rgba(75, 0, 25, 0.35); } .faceta-inferior { clip-path: polygon( 30% 100%, 70% 100%, 50% 50% ); background: rgba(85, 0, 30, 0.35); } /* Faceta central brillante */ .joya-centro { position: absolute; width: 42px; height: 42px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient( 135deg, rgba(255, 180, 200, 0.8), rgba(215, 0, 55, 0.65) 48%, rgba(90, 0, 35, 0.8) ); border: 1px solid rgba(255, 200, 215, 0.45); } /* Reflejo de luz */ .joya-reflejo { position: absolute; width: 34px; height: 12px; top: 15px; left: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); transform: rotate(-35deg); filter: blur(3px); } /* Ajustar la separación entre la joya y la interpretación */ .zona-joya + .resultado { margin-top: 20px; } /* ========================================================= TRANSFORMACIÓN DEL RUBÍ EN BOTÓN DE DONACIONES ========================================================= */ /* Las dos formas ocupan el mismo centro */ .joya-magica { position: relative; width: 100px; height: 100px; } .joya-montura { position: absolute; inset: 0; transition: opacity 0.35s ease, transform 0.55s ease; transform-origin: center; } /* Botón redondo inicialmente invisible */ .boton-donacion-rubi { position: absolute; left: 0; top: 0; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 7px solid #d9dce4; background: radial-gradient( ellipse at 31% 20%, #ffd9d7 0%, #ff696f 16%, #fa1637 39%, #c80027 69%, #690018 100% ); box-shadow: 0 6px 0 #747886, 0 9px 17px #000000aa, 0 0 19px #ffc95166, inset 0 2px 3px #ffffff99, inset 0 0 0 2px rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.35); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.55) rotate(-30deg); transform-origin: center; transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1), visibility 0.35s; } /* Reflejo brillante del botón */ .boton-donacion-rubi::before { content: ""; position: absolute; top: 12px; left: 15px; width: 43px; height: 15px; border-radius: 50%; background: #ffffff99; transform: rotate(-29deg); filter: blur(2px); pointer-events: none; } /* Inscripción DONAR */ .boton-donacion-rubi span { position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1px; color: #fff6ce; text-shadow: 0 2px 3px #72001d, 0 0 7px #ffe8a1; } /* ========================================================= TRANSFORMACIÓN ACTIVADA ========================================================= */ /* El octógono se recoge y se desvanece */ .joya-magica.transformada .joya-montura { opacity: 0; transform: scale(0.55) rotate(45deg); } /* El botón redondo aparece en su lugar */ .joya-magica.transformada .boton-donacion-rubi { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) rotate(0deg); } /* Rebote periódico después de la transformación */ .joya-magica.transformada .boton-donacion-rubi.rebotando { animation: reboteMagico 3.2s infinite; } @keyframes reboteMagico { 0%, 70%, 100% { transform: translateY(0) scale(1); } 77% { transform: translateY(-7px) scale(1.045); } 83% { transform: translateY(1px) scale(0.975); } 89% { transform: translateY(-3px) scale(1.015); } 95% { transform: translateY(0) scale(1); } } /* Reacción visual al pasar el cursor */ .joya-magica.transformada .boton-donacion-rubi:hover { filter: brightness(1.17); } /* Efecto al pulsar el botón */ .joya-magica.transformada .boton-donacion-rubi.pulsado { animation: pulsarRubi 0.42s ease-out; } @keyframes pulsarRubi { 0% { transform: scale(1); } 30% { transform: translateY(6px) scale(0.86); filter: brightness(1.4); } 55% { transform: translateY(-10px) scale(1.14); filter: brightness(2); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .joya-montura, .boton-donacion-rubi { transition: none !important; animation: none !important; } } /* ========================================================= REFINAMIENTO DEL BOTÓN RUBÍ ========================================================= */ /* La palabra DONAR aparece sin girar */ .boton-donacion-rubi span { display: inline-block; opacity: 0; transform: rotate(30deg); transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); } /* Al terminar la transformación, el texto queda derecho */ .joya-magica.transformada .boton-donacion-rubi span { opacity: 1; transform: rotate(0deg); transition-delay: 0.3s; } /* Al regresar a la joya, ocultar el texto inmediatamente */ .joya-magica:not(.transformada) .boton-donacion-rubi span { opacity: 0; transition: opacity 0.12s ease, transform 0.55s ease; } /* ========================================================= BOTÓN RUBÍ: ARO CONTINUO Y TEXTO INDEPENDIENTE ========================================================= */ /* Contenedor fijo: ni la piedra ni el texto desplazan la joya */ .donacion-boton-contenedor { position: absolute; inset: 0; width: 100px; height: 100px; pointer-events: none; } /* El botón conserva su propia animación de transformación */ .donacion-boton-contenedor .boton-donacion-rubi { left: 0; top: 0; /* Borde circular sin los quiebres del estilo ridge */ border: 7px solid #d9dce4; box-shadow: 0 6px 0 #747886, 0 9px 17px #000000aa, 0 0 19px #ffc95166, inset 0 2px 3px #ffffff99, inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25); } /* Solo el botón recibe los clics */ .joya-magica.transformada .boton-donacion-rubi { pointer-events: auto; } /* Texto centrado, completamente independiente del giro */ .donacion-texto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1px; color: #fff6ce; text-shadow: 0 2px 3px #72001d, 0 0 7px #ffe8a1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s; } /* La palabra aparece cuando el botón casi ha terminado de girar */ .joya-magica.transformada .donacion-texto { opacity: 1; visibility: visible; transition-delay: 0.35s; } /* Al regresar a la joya, las letras se desvanecen primero */ .joya-magica:not(.transformada) .donacion-texto { opacity: 0; visibility: hidden; transition-delay: 0s; } /* Respetar la preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .donacion-texto { transition: none !important; } } /* ========================================================= DONAR: ACOMPAÑAR EL REBOTE Y LA PULSACIÓN ========================================================= */ /* El texto sigue el rebote del botón, sin girar */ .joya-magica.transformada .boton-donacion-rubi.rebotando ~ .donacion-texto { animation: reboteTextoDonar 3.2s infinite; } @keyframes reboteTextoDonar { 0%, 70%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); } 77% { transform: translate(-50%, -50%) translateY(-7px) scale(1.045); } 83% { transform: translate(-50%, -50%) translateY(1px) scale(0.975); } 89% { transform: translate(-50%, -50%) translateY(-3px) scale(1.015); } 95% { transform: translate(-50%, -50%) translateY(0) scale(1); } } /* El texto también se hunde al pulsar el botón */ .joya-magica.transformada .boton-donacion-rubi.pulsado ~ .donacion-texto { animation: pulsarTextoDonar 0.42s ease-out; } @keyframes pulsarTextoDonar { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) translateY(6px) scale(0.86); } 55% { transform: translate(-50%, -50%) translateY(-10px) scale(1.14); } } /* Reducir el movimiento cuando el usuario lo prefiera */ @media (prefers-reduced-motion: reduce) { .donacion-texto { animation: none !important; } } /* ========================================================= ESCENARIO DE DONACIONES ========================================================= */ /* Mantener la joya en el centro de la página */ .escenario-donacion { position: relative; width: 100px; height: 100px; flex: 0 0 100px; } /* ========================================================= CHISPAS DORADAS ========================================================= */ .chispas-magicas { position: absolute; inset: -23px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s; } /* Aparecen cuando el rubí se convierte en botón */ .joya-magica.transformada .chispas-magicas { opacity: 1; visibility: visible; transition-delay: 0.35s; } .chispa-magica { position: absolute; color: #ffe078; text-shadow: 0 0 5px #fff2b2, 0 0 12px #ffc443; pointer-events: none; animation: brilloChispa 2.5s ease-in-out infinite alternate; } /* Distribución alrededor del botón */ .chispa-1 { top: 0; left: 14px; font-size: 25px; } .chispa-2 { top: 15px; right: 0; font-size: 20px; animation-delay: 0.7s; } .chispa-3 { bottom: 3px; right: 15px; font-size: 26px; animation-delay: 1.2s; } .chispa-4 { bottom: 20px; left: 0; font-size: 19px; animation-delay: 0.4s; } .chispa-5 { top: 62px; right: -6px; font-size: 14px; animation-delay: 1.8s; } /* Cada chispa aparece y desaparece suavemente */ @keyframes brilloChispa { 0% { opacity: 0.08; transform: scale(0.3) rotate(-25deg); } 100% { opacity: 1; transform: scale(1.2) rotate(35deg); } } /* ========================================================= BOCADILLO DE CÓMIC ========================================================= */ .donacion-bocadillo { position: absolute; /* A la derecha de la joya, sin moverla */ left: calc(100% + 35px); top: 50%; width: 235px; padding: 19px 22px; background: #ffffff; color: #111111; border: 3px solid #111111; border-radius: 45% 48% 43% 46% / 40% 44% 42% 45%; box-shadow: 4px 5px 0 #050505; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateX(-12px) scale(0.85); transform-origin: left center; z-index: 20; } .donacion-bocadillo p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; line-height: 1.4; color: #111111; } /* ========================================================= APARICIÓN CONSECUTIVA ========================================================= */ /* El bocadillo aparece después de la transformación */ .escenario-donacion:has(.joya-magica.transformada) .donacion-bocadillo { visibility: visible; animation: aparecerBocadillo 0.65s ease 0.75s both; } @keyframes aparecerBocadillo { from { opacity: 0; transform: translateY(-50%) translateX(-12px) scale(0.85); } to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } } /* Al volver a ser joya, el bocadillo desaparece */ .escenario-donacion:not(:has(.joya-magica.transformada)) .donacion-bocadillo { opacity: 0; visibility: hidden; animation: none; } /* ========================================================= PANTALLAS PEQUEÑAS ========================================================= */ @media (max-width: 650px) { /* En móvil, el bocadillo aparece encima de la joya para evitar que se salga de la pantalla. */ .donacion-bocadillo { left: 50%; top: auto; bottom: calc(100% + 22px); width: 210px; transform-origin: center bottom; } /* Punta triangular del bocadillo, orientada hacia el rubí */ .donacion-bocadillo::after { content: ""; position: absolute; /* Sale del lado izquierdo del bocadillo */ left: -22px; top: 57%; width: 28px; height: 23px; background: #ffffff; /* Triángulo estrecho: la punta mira hacia el botón */ clip-path: polygon( 0% 50%, 100% 0%, 100% 100% ); transform: none; border: none; } .escenario-donacion:has(.joya-magica.transformada) .donacion-bocadillo { animation: aparecerBocadilloMovil 0.65s ease 0.75s both; } @keyframes aparecerBocadilloMovil { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.85); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .chispa-magica { animation: none !important; opacity: 0.8; } .escenario-donacion:has(.joya-magica.transformada) .donacion-bocadillo { animation: none !important; opacity: 1; transform: translateY(-50%); } } /* ========================================================= DESAPARICIÓN SUAVE DE LA MAGIA ========================================================= */ /* Las chispas se desvanecen durante un segundo */ .chispas-magicas { transition: opacity 1s ease, visibility 0s linear 1s; } /* Al transformarse en botón, aparecen rápidamente */ .joya-magica.transformada .chispas-magicas { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.35s, visibility 0s linear; } /* El bocadillo conserva su posición mientras desaparece */ .donacion-bocadillo { transition: opacity 1s ease, visibility 0s linear 1s; } /* Al regresar a la joya, el bocadillo se desvanece sin cambiar de tamaño ni desplazarse */ .escenario-donacion:not(:has(.joya-magica.transformada)) .donacion-bocadillo { opacity: 0; visibility: hidden; animation: desaparecerBocadillo 1s ease forwards; } @keyframes desaparecerBocadillo { from { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } to { opacity: 0; transform: translateY(-50%) translateX(0) scale(1); } } /* ========================================================= PUNTA TRIANGULAR DEL BOCADILLO ========================================================= */ /* Desactivar cualquier punta anterior */ .donacion-bocadillo::after { content: none !important; } /* Triángulo negro exterior */ .punta-bocadillo { position: absolute; width: 32px; height: 26px; left: -25px; top: 55%; background: #111111; clip-path: polygon( 0% 50%, 100% 0%, 100% 100% ); z-index: 1; pointer-events: none; } /* Triángulo blanco interior */ .punta-bocadillo::after { content: ""; position: absolute; inset: 3px 0 3px 4px; background: #ffffff; clip-path: polygon( 0% 50%, 100% 0%, 100% 100% ); } /* El texto permanece encima del fondo del bocadillo */ .donacion-bocadillo p { position: relative; z-index: 2; } /* ========================================================= BOCADILLO DEL MAGO CON IMAGEN PNG ========================================================= */ .donacion-bocadillo { /* Conservamos su ubicación a la derecha del rubí */ left: calc(100% + 35px); top: 50%; /* Proporciones de la imagen: 1945 × 809 */ width: 250px; height: 104px; box-sizing: border-box; /* Sustituimos el dibujo CSS por el PNG */ background: url("imagenes/bocadillo_mago.png") center center / 100% 100% no-repeat; border: none; border-radius: 0; box-shadow: none; padding: 0; /* El contenedor no debe bloquear el botón */ pointer-events: none; } /* Eliminar definitivamente las puntas anteriores */ .donacion-bocadillo::before, .donacion-bocadillo::after { content: none !important; } .punta-bocadillo { display: none !important; } /* Texto centrado en la zona blanca de la imagen */ .donacion-bocadillo p { position: absolute; left: 18%; top: 50%; width: 76%; margin: 0; padding: 0; transform: translateY(-50%); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 1.3; color: #111111; text-align: center; z-index: 2; } /* ========================================================= MENSAJE DESLIZANTE DEL MAGO SUERTUDO ========================================================= */ /* Ventana invisible dentro de la zona blanca del PNG */ .ventana-mensaje { position: absolute; left: 22%; top: 50%; width: 72%; height: 34px; transform: translateY(-50%); display: flex; align-items: center; overflow: hidden; /* Desvanecimiento suave en los extremos */ -webkit-mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); } /* Una sola línea, un poco más grande */ .mensaje-deslizante { display: inline-block; flex: 0 0 auto; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 800; color: #111111; padding-left: 100%; animation: deslizarMensaje 11s linear infinite; } /* El mensaje entra por la derecha y sale por la izquierda */ @keyframes deslizarMensaje { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* El mensaje no se mueve mientras el bocadillo está oculto */ .escenario-donacion:not(:has(.joya-magica.transformada)) .mensaje-deslizante { animation-play-state: paused; } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .mensaje-deslizante { animation: none !important; padding-left: 0; font-size: 13px; white-space: normal; text-align: center; } } /* ============================================== PIE DE PÁGINA - EL TAROT DEL MAGO SUERTUDO ============================================== */ .pie-pagina { width: 100%; box-sizing: border-box; margin-top: 75px; padding: 38px 24px 26px; background: #141728; border-top: 1px solid #b58a3e; text-align: center; } .pie-contenido { max-width: 780px; margin: 0 auto; } .pie-marca { font-family: 'UnifrakturCook', Georgia, serif; font-size: 27px; font-weight: 700; line-height: 1.3; color: #f3d99d; text-shadow: 0 0 9px rgba(255, 207, 113, 0.18); } .pie-lema { margin: 8px 0 22px; font-family: Georgia, serif; font-size: 14px; font-style: italic; color: #e6d1a6; } .pie-separador { width: 120px; height: 1px; margin: 0 auto 23px; background: linear-gradient( to right, transparent, #d3a64b, transparent ); } .pie-aviso { max-width: 660px; margin: 0 auto 22px; font-family: Georgia, serif; font-size: 13px; line-height: 1.8; color: #d7d5dd; } .pie-creditos { max-width: 690px; margin: 0 auto 22px; font-family: Georgia, serif; font-size: 12px; line-height: 1.7; color: #bdb8c4; } .pie-copyright { margin: 0; font-family: Georgia, serif; font-size: 11px; letter-spacing: 0.5px; color: #e1c17e; } @media (max-width: 650px) { .pie-pagina { padding: 32px 20px 24px; } .pie-marca { font-size: 23px; } } /* ========================================== BOCADILLO DEL MAGO: AJUSTE PARA CELULARES ========================================== */ @media (max-width: 650px) { /* Reservar espacio para el bocadillo y el rubí */ .zona-joya { min-height: 220px; margin-top: 15px; align-items: flex-end; padding-bottom: 5px; } /* Bocadillo centrado encima del botón */ .donacion-bocadillo { left: 50%; top: auto; bottom: calc(100% + 18px); width: min(250px, calc(100vw - 36px)); height: 104px; transform-origin: center bottom; } /* Mantener la animación de aparición centrada */ .escenario-donacion:has(.joya-magica.transformada) .donacion-bocadillo { animation: aparecerBocadilloMovil 0.65s ease 0.75s both; } /* Desaparecer sin moverse de su posición */ .escenario-donacion:not(:has(.joya-magica.transformada)) .donacion-bocadillo { animation: desaparecerBocadilloMovil 1s ease forwards; } @keyframes desaparecerBocadilloMovil { from { opacity: 1; transform: translateX(-50%) scale(1); } to { opacity: 0; transform: translateX(-50%) scale(1); } } } /* Bocadillo exclusivo para celulares */ @media (max-width: 650px) { .donacion-bocadillo { background-image: url("imagenes/bocadillo_mago_celular.png"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } } /* Ajustar solo la imagen del bocadillo en celular */ @media (max-width: 650px) { .donacion-bocadillo { background-position: center 10px; } } /* Recorrido definitivo del mensaje en celulares */ @media (max-width: 650px) { .ventana-mensaje { left: 12%; width: 76%; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 3%, black 97%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 3%, black 97%, transparent 100% ); } } /* ========================================================= PUBLICIDAD EXCLUSIVA PARA MÓVIL ========================================================= */ .publicidad-movil { display: none; } @media (max-width: 650px) { .publicidad-movil { width: 100%; margin: 32px auto 10px; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease; } .publicidad-movil.visible { display: block; opacity: 1; max-height: 350px; transform: translateY(0); } .publicidad-movil > span { display: block; margin-bottom: 8px; font-family: "Cinzel", Georgia, serif; font-size: 11px; letter-spacing: 1px; color: rgba(218, 198, 153, 0.65); } .espacio-publicidad-movil { width: min(100%, 360px); min-height: 100px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient( 145deg, #171821, #0d0f19 ); border: 3px solid #b88935; outline: 1px solid rgba(238, 199, 103, 0.4); box-shadow: 0 0 0 4px rgba(53, 34, 17, 0.85), 0 0 20px rgba(204, 157, 62, 0.12), inset 0 0 25px rgba(216, 169, 69, 0.06); } .espacio-publicidad-movil p { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #9e9da5; } .espacio-publicidad-movil small { margin-top: 6px; font-family: Arial, sans-serif; font-size: 10px; color: #777781; } } /* ========================================================= NAVEGACIÓN PRINCIPAL DEL MAGO SUERTUDO ========================================================= */ .nav-mago { width: min(720px, 100%); margin: 0 auto 28px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(225, 185, 95, 0.58); background: rgba(8, 11, 24, 0.72); box-shadow: 0 0 16px rgba(225, 184, 79, 0.10); } .nav-mago__item { min-height: 38px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; font-family: "Cinzel", Georgia, serif; font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0.6px; color: #e6cc8b; text-decoration: none; border-right: 1px solid rgba(225, 185, 95, 0.30); transition: background 0.25s ease, color 0.25s ease, text-shadow 0.25s ease; } .nav-mago__item:last-child { border-right: 0; } .nav-mago__item:not(.nav-mago__item--futuro):hover { color: #fff0bd; background: rgba(184, 137, 53, 0.16); text-shadow: 0 0 10px rgba(225, 184, 79, 0.35); } /* La sección activa conserva el marco dorado, pero recibe un brillo plateado. */ .nav-mago__item.activo { color: #f4f7ff; background: rgba(210, 220, 235, 0.10); text-shadow: 0 0 5px rgba(255, 255, 255, 0.85), 0 0 12px rgba(205, 220, 240, 0.65), 0 0 20px rgba(180, 200, 225, 0.32); box-shadow: inset 0 0 12px rgba(225, 235, 248, 0.12), 0 0 10px rgba(205, 220, 240, 0.20); } .nav-mago__item--futuro { min-width: 0; } @media (max-width: 650px) { .nav-mago { margin-bottom: 22px; } .nav-mago__item { min-height: 36px; padding: 7px 5px; font-size: 9px; letter-spacing: 0.25px; } } /* ========================================================= BIBLIOTECA MAGICA - BARAJA VIVA /cartas/ ========================================================= */ .biblioteca-baraja { width: min(1120px, 96vw); height: 355px; margin: 4px 50% 22px; transform: translateX(-50%); position: relative; overflow: hidden; display: flex; align-items: center; } .abanico-biblioteca { width: 100%; height: 335px; overflow: hidden; position: relative; display: flex; align-items: center; cursor: default; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); } .cinta-cartas-biblioteca { display: flex; align-items: center; width: max-content; height: 100%; padding: 155px 70px 18px; will-change: transform; } .carta-viva { flex: 0 0 auto; width: 76px; aspect-ratio: 800 / 1371; margin-left: -54px; position: relative; border-radius: 5px; border: 1px solid #a97929; background: url("Tarot Rider Waite Smith 1910/Dorso.jpg") center/cover no-repeat; box-shadow: 0 0 5px rgba(0,0,0,.7), 0 0 5px rgba(225,184,79,.25); transform-origin: 50% 88%; transition: transform .34s ease, box-shadow .34s ease; transform-style: preserve-3d; } .carta-viva:first-child { margin-left: 0; } .carta-viva.ola { transform: translateY(var(--subida-ola, -27px)) rotate(var(--inclinacion, 0deg)) scale(var(--escala-ola, 1.045)); box-shadow: 0 0 13px rgba(245,226,184,.78), 0 0 28px rgba(189,205,255,.35); } .carta-viva.revelada { transform: translateY(-45px) rotateY(180deg) scale(1.14); z-index: 80; box-shadow: 0 0 16px rgba(238,238,255,.9), 0 0 34px rgba(188,205,255,.5); } .carta-viva .cara-viva { position: absolute; inset: 0; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; } .carta-viva .cara-viva.dorso { background-image: url("Tarot Rider Waite Smith 1910/Dorso.jpg"); } .carta-viva .cara-viva.frente { transform: rotateY(180deg); } .instrucciones-biblioteca { margin-top: 0; } @media (max-width: 650px) { .biblioteca-baraja { width: calc(100vw - 18px); height: 315px; margin-bottom: 18px; } .abanico-biblioteca { height: 305px; } .cinta-cartas-biblioteca { padding: 148px 38px 12px; } .carta-viva { width: 66px; margin-left: -47px; } .carta-viva.ola { transform: translateY(var(--subida-ola, -22px)) rotate(var(--inclinacion,0deg)) scale(var(--escala-ola, 1.04)); } .carta-viva.revelada { transform: translateY(-36px) rotateY(180deg) scale(1.10); } } @media (prefers-reduced-motion: reduce) { .carta-viva { transition: none; } } /* Chispas mágicas de la cresta de la ola */ .chispas-ola { position: absolute; width: 1px; height: 1px; z-index: 95; pointer-events: none; } .chispas-ola span { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #ffe8a6; box-shadow: 0 0 4px #fff6cf, 0 0 9px #ffd86a, 0 0 15px rgba(255, 190, 45, .9); opacity: 0; animation: chispaMagicaOla .95s ease-out var(--demora, 0s) forwards; } .chispas-ola span:nth-child(2n) { width: 3px; height: 3px; } @keyframes chispaMagicaOla { 0% { opacity: 0; transform: translate(0, 0) scale(.25); } 18% { opacity: 1; transform: translate(calc(var(--x) * .35), calc(var(--y) * .35)) scale(1.25); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.15); } } @media (prefers-reduced-motion: reduce) { .chispas-ola { display: none; } } /* Biblioteca: joyas selectoras (independiente de la baraja viva) */ .selector-arcanos { max-width: 780px; margin: 28px auto 56px; text-align: center; color: #f1dca2; } .selector-arcanos h2 { font-family: Cinzel,serif; font-size: clamp(16px,2.3vw,23px); letter-spacing: .12em; margin-bottom: 16px; } .joyas-selector { display: flex; justify-content: center; gap: clamp(16px,5vw,80px); align-items: start; } .joya-opcion { background: none; border: 0; color: #e9d39a; font-family: Cinzel,serif; font-size: clamp(12px,2vw,16px); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px; } .joya-opcion:focus-visible { outline: 2px solid #ffe7ac; outline-offset: 5px; } .joya-imagen { display: block; position: relative; width: clamp(88px,16vw,138px); aspect-ratio: 1084 / 1451; overflow: hidden; } .joya-imagen img { width: 100%; height: 100%; object-fit: contain; display: block; } .joya-reflejo { position: absolute; inset: 27% 13% 23%; pointer-events: none; background: linear-gradient(115deg,transparent 35%,rgba(255,255,255,.02) 44%,rgba(255,255,255,.48) 49%,rgba(255,255,255,.08) 54%,transparent 65%); transform: translateX(-170%); animation: barrido-joya 5.8s ease-in-out infinite; mix-blend-mode: screen; clip-path: polygon(19% 0,81% 0,100% 14%,100% 86%,81% 100%,19% 100%,0 86%,0 14%); } .joya-amatista .joya-reflejo { animation-delay: 2.6s; } @keyframes barrido-joya { 0%,17% {transform:translateX(-170%)} 42%,100% {transform:translateX(170%)} } .panel-arcanos { margin: 22px auto; padding: 20px; max-width: 630px; background: linear-gradient(145deg,#171329,#21152b); box-shadow: 0 0 20px #d6a84a22; /* Mismo marco de pan de oro de los cajetines existentes */ border: 35px solid transparent; border-image-source: url("marcos_barrocos/marco_barroco_completo.png"); border-image-slice: 180; border-image-width: 35px; border-image-repeat: stretch; } .panel-arcanos[hidden], .lista-arcanos[hidden] { display:none; } .panel-arcanos h3 { font-family: Cinzel,serif; margin: 0 0 12px; } .lista-arcanos { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); max-height: none; overflow-y: visible; gap:8px; } .palos-arcanos { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom: 15px; } .opcion-carta, .palos-arcanos button { background:#2b2139; color:#f4e0b6; border:1px solid #a4864d; padding:10px; font-family: 'Cormorant Garamond',serif; font-size:18px; cursor:pointer; } .opcion-carta:hover,.palos-arcanos button:hover { background:#48315a; } @media(prefers-reduced-motion:reduce){.joya-reflejo{animation:none}} /* Biblioteca: pulsación mágica de las joyas y sus rótulos. No afecta a las animaciones ni al estado de la baraja. */ .joya-opcion .joya-imagen, .joya-opcion > span:last-child { transform-origin: center center; } .joya-opcion.pulsando-joya .joya-imagen { animation: joya-pulsacion-gema 460ms cubic-bezier(.2,.72,.25,1) both; } .joya-opcion.pulsando-joya > span:last-child { animation: joya-pulsacion-letras 460ms cubic-bezier(.2,.72,.25,1) both; } @keyframes joya-pulsacion-gema { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(230,240,255,0)); } 30% { transform: scale(.91); filter: drop-shadow(0 0 15px rgba(225,236,255,.95)) drop-shadow(0 0 25px rgba(255,255,255,.65)); } 65% { transform: scale(1.045); filter: drop-shadow(0 0 18px rgba(227,238,255,.78)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(230,240,255,0)); } } @keyframes joya-pulsacion-letras { 0% { transform: scale(1); color: #e9d39a; text-shadow: none; } 30% { transform: scale(.94); color: #f8fbff; text-shadow: 0 0 9px #f2f6ff, 0 0 19px rgba(213,229,255,.95), 0 0 30px rgba(222,234,255,.55); } 65% { transform: scale(1.035); color: #f4f5f9; text-shadow: 0 0 12px rgba(237,243,255,.8); } 100% { transform: scale(1); color: #e9d39a; text-shadow: none; } } @media (prefers-reduced-motion: reduce) { .joya-opcion.pulsando-joya .joya-imagen, .joya-opcion.pulsando-joya > span:last-child { animation: none; } } /* El cero del Loco debe leerse claramente como cifra. */ /* Evita que el navegador reubique la vista al cambiar entre listas de arcanos. */ .selector-arcanos, .selector-arcanos * { overflow-anchor: none; } /* Etapa 4: carta elegida, separada de la baraja para levitar con suavidad. */ .carta-elegida-flotante { position: absolute; z-index: 120; width: 91px; aspect-ratio: 800 / 1371; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%) translateY(-15px) scale(.75); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .35s ease; perspective: 700px; filter: drop-shadow(0 0 10px rgba(248,219,155,.75)); } .carta-elegida-flotante.visible { opacity: 1; transform: translate(-50%, -50%) translateY(-74px) scale(1.18); animation: carta-levitando 3.2s ease-in-out .8s infinite; } .carta-elegida-interior { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 1s ease .15s; } .carta-elegida-flotante.visible .carta-elegida-interior { transform: rotateY(180deg); } .carta-elegida-dorso, .carta-elegida-frente { position: absolute; inset: 0; display: block; border: 1px solid #e5c576; border-radius: 5px; background-size: cover; background-position: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 18px rgba(243,215,148,.7); } .carta-elegida-dorso { background-image: url("Tarot Rider Waite Smith 1910/Dorso.jpg"); } .carta-elegida-frente { transform: rotateY(180deg); } @keyframes carta-levitando { 0%, 100% { transform: translate(-50%, -50%) translateY(-74px) scale(1.18); } 50% { transform: translate(-50%, -50%) translateY(-83px) scale(1.18); } } @media(max-width:650px) { .carta-elegida-flotante { width: 78px; } .carta-elegida-flotante.visible { animation-name: carta-levitando; } } @media(prefers-reduced-motion:reduce) { .carta-elegida-flotante.visible { animation: none; } .carta-elegida-interior { transition: none; } } /* ETAPA 4: prueba visual del lema en una capa detrás de la baraja. Solo se aplica a la biblioteca, nunca a la tirada de tres cartas. */ body:has(.biblioteca-baraja) .cabecera-tarot { position: relative; } body:has(.biblioteca-baraja) .cabecera-tarot > p { position: absolute; top: calc(100% + 62px); left: 0; width: 100%; margin: 0; pointer-events: none; } body:has(.biblioteca-baraja) .biblioteca-baraja { z-index: 1; } /* Biblioteca: cinta del lema continua, independiente de la baraja viva. */ body:has(.biblioteca-baraja) .cabecera-tarot > .lema-cinta { position: absolute; top: calc(100% + 62px); left: 50%; width: 100vw; max-width: 100vw; height: 40px; transform: translateX(-50%); margin: 0; overflow: hidden; pointer-events: none; z-index: 0; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 3vw, 27px); font-style: italic; color: #e9d5af; } .lema-cinta-pista { display: flex; width: max-content; height: 100%; align-items: center; animation: lema-cinta-deslizar 105s linear infinite; will-change: transform; } .lema-cinta-grupo { display: flex; flex: 0 0 auto; align-items: center; min-width: 100vw; justify-content: space-around; } .lema-frase { flex: 0 0 auto; } .lema-separador { flex: 0 0 auto; font-size: .55em; color: #e5c576; margin: 0 1.4em; font-style: normal; } @keyframes lema-cinta-deslizar { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lema-cinta-pista { animation: none; } } /* Biblioteca: donación entre dos topacios, sin alterar el abanico. */ body:has(.biblioteca-baraja) .cabecera-tarot { position: relative; } body:has(.biblioteca-baraja) .donacion-topacios { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); z-index: 3; width: min(760px, 94vw); display: flex; justify-content: center; align-items: center; gap: clamp(6px, 1.8vw, 18px); height: 49px; } .donacion-topacio { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: clamp(48px, 7vw, 74px); height: 48px; transform-origin: center; transition: filter .2s ease; } .donacion-topacio img { display:block; width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 0 7px rgba(255,202,76,.6)); } .donacion-topacio:hover img { filter:drop-shadow(0 0 12px rgba(255,235,158,.95)); } .donacion-mensaje { position: relative; flex: 1 1 auto; min-width: 0; text-decoration: none; text-align: center; font-family: "Cinzel", Georgia, serif; font-size: clamp(11px, 1.45vw, 17px); line-height: 1.35; color: #f4d995; text-shadow: 0 0 7px rgba(250,246,224,.72), 0 0 13px rgba(222,174,65,.6); transition: filter .2s ease; } .donacion-mensaje-contenido { display:flex; justify-content:center; align-items:center; gap:clamp(4px,.8vw,9px); flex-wrap:wrap; } .donacion-rombo { color:#fff0b7; font-size:.65em; } #fraseTopacio { font-family:"Cormorant Garamond", Georgia,serif; font-size:1.2em; } .donacion-mensaje:hover { filter:brightness(1.22); } .donacion-topacio:focus-visible,.donacion-mensaje:focus-visible { outline:2px solid #f7e8a6; outline-offset:3px; border-radius:8px; } .donacion-topacio:active,.donacion-topacio.pulsacion-topacio { animation: pulsar-topacio .46s ease-out; } .donacion-mensaje:active,.donacion-mensaje.pulsacion-topacio { animation: pulsar-texto-topacio .46s ease-out; } @keyframes pulsar-topacio { 0%,100% { transform:scale(1); } 38% { transform:scale(.85); filter:drop-shadow(0 0 12px #fff) brightness(1.5); } 72% { transform:scale(1.06); } } @keyframes pulsar-texto-topacio { 0%,100% { transform:scale(1); } 38% { transform:scale(.97); filter:brightness(1.7) drop-shadow(0 0 10px #fff); } 72% { transform:scale(1.025); } } @media(max-width:600px) { body:has(.biblioteca-baraja) .donacion-topacios { height:54px; top:calc(100% + 0px); gap:5px; } .donacion-topacio { width:43px; } .donacion-mensaje { font-size:10px; } #fraseTopacio { font-size:1.12em; } } @media(prefers-reduced-motion:reduce) { .donacion-topacio:active,.donacion-topacio.pulsacion-topacio, .donacion-mensaje:active,.donacion-mensaje.pulsacion-topacio { animation:none; } } /* Solo el mensaje central se desliza; los topacios permanecen intactos. */ .donacion-mensaje { display: block; overflow: hidden; white-space: nowrap; height: 42px; line-height: 42px; text-align: left; isolation: isolate; } .donacion-mensaje-contenido { position: absolute; top: 0; left: 100%; width: max-content; max-width: none; height: 100%; display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: clamp(4px, .8vw, 9px); white-space: nowrap; will-change: transform; } .donacion-mensaje-contenido > * { flex: 0 0 auto; white-space: nowrap; } @media(max-width:600px) { .donacion-mensaje { height: 42px; line-height: 42px; } } /* ETAPA 5: transición suave y página individual */ .carta-elegida-flotante.abriendo-detalle { animation: none!important; filter: drop-shadow(0 0 18px #ffe59b) drop-shadow(0 0 30px #dba93d); transform: translate(-50%,-50%) translateY(-74px) scale(1.10); } .destello-transicion { position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,222,135,.28),rgba(255,221,151,.10) 44%,transparent 78%);opacity:0;transition:opacity .42s ease; } .destello-transicion.activo {opacity:1;} .detalle-carta { max-width:1050px;margin:20px auto 70px;padding:0 20px; } .volver-biblioteca {display:inline-block;margin:0 0 20px;color:#f1d793;text-decoration:none;font-family:Cinzel,serif;} .volver-biblioteca:hover {text-decoration:underline;} .detalle-contenido {display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:clamp(22px,4vw,52px);align-items:start;} .detalle-marco {aspect-ratio:800/1371;border:2px solid #b99548;border-radius:10px;position:relative;display:grid;place-items:center;background:rgba(15,12,40,.45);box-shadow:inset 0 0 20px rgba(212,169,75,.20),0 0 17px rgba(210,177,93,.17);} .detalle-marco-espera {font-size:40px;color:#b99b58;opacity:.55;} .detalle-marco.aterrizada .detalle-marco-espera {display:none;} .detalle-marco img {width:100%;height:100%;object-fit:contain;border-radius:8px;} .detalle-lectura {text-align:left;color:#f4e8d3;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(19px,2vw,23px);line-height:1.42;} .detalle-lectura h2,.detalle-lectura h3 {font-family:Cinzel,serif;color:#e7c475;margin:0 0 10px;} .detalle-lectura h3 {font-size:17px;margin-top:24px;} .detalle-lectura p {margin:0 0 12px;} .detalle-concepto {color:#d9b75b;font-style:italic;} .carta-viajera {position:fixed;z-index:1000;border:1px solid #f1d78b;border-radius:7px;background-size:100% 100%;background-position:center;pointer-events:none;box-shadow:0 0 22px rgba(248,206,109,.7);transition:left 1.5s cubic-bezier(.2,.75,.2,1),top 1.5s cubic-bezier(.2,.75,.2,1),width 1.5s,height 1.5s,transform 1.5s;transform-style:preserve-3d;} @media(max-width:600px){.detalle-contenido{grid-template-columns:1fr;justify-items:center;}.detalle-marco{width:min(250px,70vw)}.detalle-lectura{width:100%;}.detalle-carta{padding:0 15px;}} @media(prefers-reduced-motion:reduce){.carta-viajera{transition:none;}.destello-transicion{transition:none;}} /* Etapa 5: continuidad visual sin repetir el nacimiento ni el giro de la carta. */ .carta-elegida-flotante.detalle-continuacion, .carta-elegida-flotante.detalle-continuacion.visible { transition: none !important; opacity: 1; transform: translate(-50%, -50%) translateY(-74px) scale(1.18); animation: carta-levitando 3.2s ease-in-out infinite; } .carta-elegida-flotante.detalle-continuacion .carta-elegida-interior { transition: none !important; transform: rotateY(180deg) !important; } .velo-entrada-detalle { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at center,rgba(255,222,135,.24),rgba(255,221,151,.09) 44%,rgba(13,9,36,.06) 78%); opacity: 1; transition: opacity .52s ease-out; } .velo-entrada-detalle.desvanecer { opacity: 0; } @media (prefers-reduced-motion: reduce) { .velo-entrada-detalle { transition: none; } .carta-elegida-flotante.detalle-continuacion.visible { animation: none; } } /* Etapa 5: aterrizaje sin deformación; mismo tamaño que la imagen final. */ .carta-viajera.carta-viajera-proporcional { box-sizing: border-box; border: 0; border-radius: 8px; background-size: 100% 100%; transform-origin: center center; transition: none; will-change: transform; } /* Biblioteca: alternancia discreta de instrucciones iniciales, sin cambiar el cajetín. */ .instrucciones-biblioteca p { transition: opacity .38s ease; } .instrucciones-biblioteca p.instruccion-desvaneciendo { opacity: 0; } @media (prefers-reduced-motion: reduce) { .instrucciones-biblioteca p { transition: none; } } /* Etapa 9: lema de la portada, reutilizando la cinta de la biblioteca. */ body:not(:has(.biblioteca-baraja)) .cabecera-tarot > .lema-cinta { width: 100%; height: 36px; margin: 15px 0 0; overflow: hidden; pointer-events: none; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 3vw, 27px); font-style: italic; color: #e9d5af; } /* Brillo pasajero de cada letra de la instrucción. */ body:not(:has(.biblioteca-baraja)) .instrucciones p.instruccion-escribiendo { transition: opacity 420ms ease; } .instruccion-escribiendo .instruccion-letra { opacity: 0; animation: instruccion-aparecer 310ms ease-out forwards; animation-delay: var(--retardo-letra); } @keyframes instruccion-aparecer { 0% { opacity: 0; color: #fff0b6; text-shadow: 0 0 11px #f9cf5a, 0 0 19px #c79531; } 55% { opacity: 1; color: #ffe4a2; text-shadow: 0 0 8px rgba(255,210,105,.8); } 100% { opacity: 1; color: inherit; text-shadow: none; } } @media (prefers-reduced-motion: reduce) { .instruccion-escribiendo .instruccion-letra { animation: none; opacity: 1; } body:not(:has(.biblioteca-baraja)) .instrucciones p.instruccion-escribiendo { transition: none; } } /* ETAPA 9 — Diamante de la buena suerte (forma previa a la donación). Se modifica exclusivamente la apariencia de la joya inicial. El botón DONAR y las transiciones originales se conservan. */ .zona-joya .joya-magica .joya-montura { background: transparent url("imagenes/diamante_lista.png") center center / contain no-repeat; box-shadow: none; clip-path: none; } .zona-joya .joya-magica .joya-montura .joya-rubi { display: none; } /* ETAPA 9 — Pulsador DONAR de cristal. La montura metálica está incluida en ambas imágenes. El botón permanece centrado y mantiene la transformación y el rebote existentes. */ .donacion-boton-contenedor .boton-donacion-rubi { box-sizing: border-box; border: 0; padding: 0; border-radius: 50%; background: transparent url("imagenes/donar_sin_pulsar.png") center / contain no-repeat; box-shadow: none; /* Los filtros se aplican al conjunto sin distorsionar la imagen. */ filter: drop-shadow(0 0 5px rgba(255,177,69,.24)); } /* La imagen ya lleva grabado DONAR: no superponer otro texto. */ .donacion-boton-contenedor .boton-donacion-rubi::before, .donacion-boton-contenedor .boton-donacion-rubi::after { content: none; } .joya-magica .donacion-texto { display: none !important; } /* El cambio es inmediato, depende de la presión y no de un temporizador. */ .joya-magica.transformada .boton-donacion-rubi:active { background-image: url("imagenes/donar_pulsado.png"); filter: drop-shadow(0 0 9px rgba(255,207,98,.55)); } /* Accesibilidad: el teclado conserva un indicador de foco visible. */ .joya-magica.transformada .boton-donacion-rubi:focus-visible { outline: 2px solid #f3d18b; outline-offset: 4px; }