Monarca del Reino Oscuro
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Ficha de Personaje - Kael Crown</title>
<style>
/* ============================================================
RESET
============================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
min-height: 100%;
}
body {
background:
radial-gradient(
ellipse at 50% 10%,
rgba(91, 16, 30, .18),
transparent 42%
),
radial-gradient(
ellipse at 15% 90%,
rgba(61, 10, 20, .16),
transparent 40%
),
#080708;
color: #d8cbcd;
font-family:
Georgia,
"Times New Roman",
serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-x: hidden;
}
/* ============================================================
PARTÍCULAS OSCURAS DEL FONDO
============================================================ */
.ambient-particles {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.ambient-particle {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #9b263d;
opacity: .08;
box-shadow:
0 0 6px rgba(156, 32, 55, .65);
animation:
darkPulse
var(--duration)
ease-in-out
var(--delay)
infinite;
}
.ambient-particle.big {
width: 3px;
height: 3px;
background: #b6374c;
box-shadow:
0 0 7px rgba(180, 45, 67, .75),
0 0 15px rgba(135, 23, 42, .45);
}
@keyframes darkPulse {
0%,
100% {
opacity: .04;
transform: scale(.65) translateY(0);
}
50% {
opacity: .48;
transform: scale(1.45) translateY(-8px);
}
}
/* ============================================================
CONTENEDOR PRINCIPAL
============================================================ */
.card-container {
position: relative;
z-index: 2;
width: min(720px, 100%);
padding: 43px 40px;
overflow: hidden;
border-radius: 10px;
border:
1px solid
rgba(117, 38, 49, .45);
background:
radial-gradient(
ellipse at 50% 110%,
rgba(107, 20, 35, .20),
transparent 48%
),
radial-gradient(
ellipse at 50% -10%,
rgba(76, 14, 25, .12),
transparent 45%
),
linear-gradient(
145deg,
rgba(24, 13, 16, .99),
rgba(11, 9, 11, .99)
);
box-shadow:
0 30px 80px rgba(0,0,0,.90),
0 0 45px rgba(105, 18, 34, .13),
inset 0 0 75px rgba(82, 16, 29, .08);
animation:
cardEntrance
1.15s
ease
both;
transition:
border-color 1s ease,
box-shadow 1s ease;
}
/* ============================================================
BORDE INTERIOR
============================================================ */
.card-container::after {
content: "";
position: absolute;
inset: 9px;
border-radius: 6px;
border:
1px solid
rgba(164, 75, 87, .075);
pointer-events: none;
z-index: 1;
}
/* ============================================================
LÍNEA SUPERIOR
============================================================ */
.top-line {
position: absolute;
top: 0;
left: 7%;
width: 86%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
#68202c,
#b14a5c,
#68202c,
transparent
);
box-shadow:
0 0 12px rgba(156, 40, 59, .55);
animation:
linePulse
3s
ease-in-out
infinite;
z-index: 8;
}
@keyframes linePulse {
0%,
100% {
opacity: .45;
}
50% {
opacity: 1;
box-shadow:
0 0 18px rgba(164, 45, 63, .75);
}
}
/* ============================================================
RAMAS / ENREDADERAS
============================================================ */
.vine {
position: absolute;
z-index: 7;
pointer-events: none;
color: #64202b;
opacity: .82;
filter:
drop-shadow(
0 0 4px
rgba(142, 31, 48, .28)
);
transform-origin: center;
animation:
vineMove
4.8s
ease-in-out
infinite;
}
/*
Movimiento individual de cada esquina.
Ahora las ramas se balancean y suben/bajan
ligeramente, haciendo el movimiento mucho
más perceptible.
*/
.vine-left {
top: -10px;
left: -8px;
width: 280px;
height: 145px;
animation-delay: 0s;
}
.vine-right {
top: -10px;
right: -8px;
width: 280px;
height: 145px;
transform:
scaleX(-1);
animation-delay: -1.2s;
}
.vine-bottom-left {
bottom: -10px;
left: -8px;
width: 280px;
height: 145px;
transform:
scaleY(-1);
animation-delay: -2.4s;
}
.vine-bottom-right {
bottom: -10px;
right: -8px;
width: 280px;
height: 145px;
transform:
scale(-1, -1);
animation-delay: -3.6s;
}
@keyframes vineMove {
0%,
100% {
opacity: .65;
transform:
translate(0, 0)
rotate(-1deg)
scale(1);
filter:
drop-shadow(
0 0 3px
rgba(142, 31, 48, .24)
);
}
25% {
opacity: .82;
transform:
translate(2px, -2px)
rotate(1deg)
scale(1.008);
}
50% {
opacity: .98;
transform:
translate(-1px, 2px)
rotate(2deg)
scale(1.018);
filter:
drop-shadow(
0 0 8px
rgba(151, 34, 52, .48)
);
}
75% {
opacity: .82;
transform:
translate(-2px, -1px)
rotate(-1.5deg)
scale(1.008);
}
}
/*
Conservamos las transformaciones de las ramas
derechas/inferiores durante la animación.
*/
.vine-right {
animation-name: vineMoveRight;
}
.vine-bottom-left {
animation-name: vineMoveBottomLeft;
}
.vine-bottom-right {
animation-name: vineMoveBottomRight;
}
@keyframes vineMoveRight {
0%,
100% {
opacity: .65;
transform:
scaleX(-1)
translate(0, 0)
rotate(-1deg);
}
25% {
opacity: .82;
transform:
scaleX(-1)
translate(2px, -2px)
rotate(1deg);
}
50% {
opacity: .98;
transform:
scaleX(-1)
translate(-1px, 2px)
rotate(2deg);
filter:
drop-shadow(
0 0 8px
rgba(151, 34, 52, .48)
);
}
75% {
opacity: .82;
transform:
scaleX(-1)
translate(-2px, -1px)
rotate(-1.5deg);
}
}
@keyframes vineMoveBottomLeft {
0%,
100% {
opacity: .65;
transform:
scaleY(-1)
translate(0, 0)
rotate(-1deg);
}
25% {
opacity: .82;
transform:
scaleY(-1)
translate(2px, -2px)
rotate(1deg);
}
50% {
opacity: .98;
transform:
scaleY(-1)
translate(-1px, 2px)
rotate(2deg);
filter:
drop-shadow(
0 0 8px
rgba(151, 34, 52, .48)
);
}
75% {
opacity: .82;
transform:
scaleY(-1)
translate(-2px, -1px)
rotate(-1.5deg);
}
}
@keyframes vineMoveBottomRight {
0%,
100% {
opacity: .65;
transform:
scale(-1, -1)
translate(0, 0)
rotate(-1deg);
}
25% {
opacity: .82;
transform:
scale(-1, -1)
translate(2px, -2px)
rotate(1deg);
}
50% {
opacity: .98;
transform:
scale(-1, -1)
translate(-1px, 2px)
rotate(2deg);
filter:
drop-shadow(
0 0 8px
rgba(151, 34, 52, .48)
);
}
75% {
opacity: .82;
transform:
scale(-1, -1)
translate(-2px, -1px)
rotate(-1.5deg);
}
}
/* ============================================================
TALLOS CURVOS
============================================================ */
.stem {
position: absolute;
height: 2px;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent,
#65212d 20%,
#9b3748 70%,
transparent
);
box-shadow:
0 0 5px rgba(139, 31, 49, .35);
animation:
stemGlow
3.2s
ease-in-out
infinite;
}
.stem.main {
width: 260px;
left: -5px;
bottom: 37px;
transform:
rotate(-15deg);
}
.stem.branch-one {
width: 115px;
left: 47px;
bottom: 56px;
transform:
rotate(25deg);
animation-delay: -.7s;
}
.stem.branch-two {
width: 105px;
left: 112px;
bottom: 30px;
transform:
rotate(-28deg);
animation-delay: -1.4s;
}
.stem.branch-three {
width: 82px;
left: 181px;
bottom: 50px;
transform:
rotate(23deg);
animation-delay: -2.1s;
}
@keyframes stemGlow {
0%,
100% {
opacity: .55;
filter: brightness(.8);
}
50% {
opacity: 1;
filter:
brightness(1.35)
drop-shadow(
0 0 5px
rgba(166, 43, 62, .55)
);
}
}
/* ============================================================
ESPINAS
============================================================ */
.thorn {
position: absolute;
width: 0;
height: 0;
border-left:
5px solid transparent;
border-right:
5px solid transparent;
border-bottom:
17px solid #752535;
filter:
drop-shadow(
0 0 4px
rgba(161, 39, 57, .55)
);
animation:
thornMove
2.8s
ease-in-out
infinite;
}
.thorn.t1 {
left: 55px;
bottom: 49px;
transform:
rotate(38deg);
}
.thorn.t2 {
left: 96px;
bottom: 59px;
transform:
rotate(-25deg);
animation-delay: -.6s;
}
.thorn.t3 {
left: 142px;
bottom: 36px;
transform:
rotate(34deg);
animation-delay: -1.2s;
}
.thorn.t4 {
left: 185px;
bottom: 52px;
transform:
rotate(-29deg);
animation-delay: -1.8s;
}
@keyframes thornMove {
0%,
100% {
opacity: .48;
filter:
brightness(.8)
drop-shadow(
0 0 3px
rgba(161, 39, 57, .35)
);
}
50% {
opacity: 1;
filter:
brightness(1.4)
drop-shadow(
0 0 8px
rgba(183, 46, 65, .82)
);
}
}
/* ============================================================
ROSAS OSCURAS
============================================================ */
.rose {
position: absolute;
width: 42px;
height: 42px;
color: #792535;
font-size: 32px;
line-height: 42px;
text-align: center;
text-shadow:
0 0 5px rgba(154, 36, 55, .65),
0 0 15px rgba(114, 20, 35, .45);
animation:
roseFloat
3.4s
ease-in-out
infinite;
}
.rose::after {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(193, 51, 70, .28),
transparent 70%
);
filter: blur(5px);
z-index: -1;
animation:
roseGlow
2.6s
ease-in-out
infinite;
}
.rose-left {
top: 14px;
left: 15px;
animation-delay: -.2s;
}
.rose-right {
top: 14px;
right: 15px;
animation-delay: -1.1s;
}
.rose-bottom-left {
bottom: 12px;
left: 15px;
animation-delay: -2s;
}
.rose-bottom-right {
bottom: 12px;
right: 15px;
animation-delay: -2.8s;
}
@keyframes roseFloat {
0%,
100% {
transform:
translate(0, 0)
rotate(-4deg)
scale(.92);
opacity: .58;
}
25% {
transform:
translate(2px, -3px)
rotate(1deg)
scale(.99);
opacity: .78;
}
50% {
transform:
translate(-1px, -5px)
rotate(5deg)
scale(1.07);
opacity: 1;
text-shadow:
0 0 7px rgba(178, 44, 65, .8),
0 0 18px rgba(133, 23, 41, .6),
0 0 28px rgba(103, 17, 32, .35);
}
75% {
transform:
translate(-2px, -2px)
rotate(0deg)
scale(.98);
opacity: .76;
}
}
@keyframes roseGlow {
0%,
100% {
opacity: .35;
transform: scale(.85);
}
50% {
opacity: .85;
transform: scale(1.15);
}
}
/* ============================================================
HOJAS
============================================================ */
.leaf {
position: absolute;
width: 17px;
height: 9px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#531b27,
#8b2b3d
);
box-shadow:
0 0 5px rgba(135, 31, 48, .32);
opacity: .8;
transform-origin:
0% 50%;
animation:
leafSway
2.7s
ease-in-out
infinite;
}
.leaf.l1 {
left: 78px;
bottom: 57px;
transform:
rotate(-25deg);
}
.leaf.l2 {
left: 118px;
bottom: 43px;
transform:
rotate(34deg);
animation-delay: -.65s;
}
.leaf.l3 {
left: 160px;
bottom: 57px;
transform:
rotate(-30deg);
animation-delay: -1.3s;
}
.leaf.l4 {
left: 205px;
bottom: 38px;
transform:
rotate(31deg);
animation-delay: -1.95s;
}
@keyframes leafSway {
0%,
100% {
opacity: .58;
filter:
brightness(.75);
margin-top: 0;
}
25% {
opacity: .78;
filter:
brightness(1);
margin-top: -2px;
}
50% {
opacity: 1;
filter:
brightness(1.35)
drop-shadow(
0 0 6px
rgba(156, 38, 58, .55)
);
margin-top: -4px;
}
75% {
opacity: .76;
filter:
brightness(1);
margin-top: -1px;
}
}
/* ============================================================
ORNAMENTOS CENTRALES
============================================================ */
.ornament {
position: absolute;
z-index: 8;
color: #8f3344;
pointer-events: none;
text-shadow:
0 0 6px rgba(157, 42, 61, .6),
0 0 14px rgba(118, 25, 40, .3);
animation:
ornamentPulse
2.8s
ease-in-out
infinite;
}
.ornament.top {
top: 21px;
left: 50%;
transform:
translateX(-50%);
font-size: 14px;
}
.ornament.bottom {
bottom: 20px;
left: 50%;
transform:
translateX(-50%);
font-size: 13px;
animation-delay:
-1.4s;
}
@keyframes ornamentPulse {
0%,
100% {
opacity: .35;
filter:
brightness(.7);
transform:
translateX(-50%)
scale(.85)
rotate(0deg);
}
50% {
opacity: 1;
filter:
brightness(1.4);
text-shadow:
0 0 9px rgba(190, 49, 70, .9),
0 0 20px rgba(145, 27, 46, .55);
transform:
translateX(-50%)
scale(1.18)
rotate(45deg);
}
}
/* ============================================================
CONTENIDO
============================================================ */
.content {
position: relative;
z-index: 10;
}
/* ============================================================
CABECERA
============================================================ */
.header {
text-align: center;
border-bottom:
1px solid
rgba(112, 42, 53, .42);
padding-bottom: 25px;
margin-bottom: 25px;
animation:
fadeUp
.9s
.1s
both;
}
.header h1 {
color: #eee3e4;
font-size:
clamp(
2rem,
6vw,
2.65rem
);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
text-shadow:
0 2px 5px rgba(0,0,0,.9),
0 0 12px rgba(142, 31, 49, .26);
animation:
titlePulse
4s
ease-in-out
infinite;
}
.header .subtitle {
color: #a74454;
font-style: italic;
font-size: 1.08rem;
letter-spacing: 1.5px;
text-shadow:
0 0 8px rgba(148, 42, 58, .3);
}
@keyframes titlePulse {
0%,
100% {
text-shadow:
0 2px 5px rgba(0,0,0,.9),
0 0 10px rgba(142,31,49,.20);
}
50% {
text-shadow:
0 2px 5px rgba(0,0,0,.9),
0 0 18px rgba(154,38,57,.42);
}
}
/* ============================================================
ESTADÍSTICAS
============================================================ */
.stats-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
margin-bottom: 30px;
}
.stat-item {
position: relative;
min-height: 78px;
padding: 14px 15px;
background:
linear-gradient(
145deg,
rgba(41, 19, 23, .65),
rgba(14, 10, 12, .82)
);
border:
1px solid
rgba(105, 42, 52, .38);
border-radius: 5px;
box-shadow:
inset 0 0 18px
rgba(98, 20, 33, .05),
0 4px 12px
rgba(0,0,0,.18);
transition:
border-color .35s ease,
transform .35s ease,
box-shadow .35s ease;
overflow: hidden;
}
.stat-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background:
linear-gradient(
180deg,
transparent,
#792838,
transparent
);
opacity: .8;
animation:
statGlow
3s
ease-in-out
infinite;
}
.stat-item:hover {
transform:
translateY(-2px);
border-color:
rgba(148, 49, 65, .65);
box-shadow:
0 6px 18px
rgba(0,0,0,.3),
0 0 14px
rgba(119, 27, 43, .08);
}
.stat-item strong {
color: #8f7378;
text-transform: uppercase;
font-size: .72rem;
letter-spacing: 1.5px;
display: block;
margin-bottom: 7px;
}
.stat-item span {
color: #e2d7d9;
font-size: .94rem;
font-weight: 600;
line-height: 1.35;
}
@keyframes statGlow {
0%,
100% {
opacity: .45;
}
50% {
opacity: 1;
box-shadow:
0 0 9px
rgba(156, 39, 59, .55);
}
}
/* ============================================================
SECCIONES
============================================================ */
.section {
margin-bottom: 25px;
opacity: 0;
animation:
sectionReveal
.9s
ease
forwards;
}
.section:nth-of-type(1) {
animation-delay: .35s;
}
.section:nth-of-type(2) {
animation-delay: .55s;
}
.section:nth-of-type(3) {
animation-delay: .75s;
}
.section-title {
position: relative;
color: #a64454;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom:
1px solid
rgba(112, 42, 53, .35);
padding-bottom: 7px;
margin-bottom: 12px;
text-shadow:
0 0 7px rgba(148, 38, 57, .24);
}
.section-title::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 45px;
height: 1px;
background: #8f3042;
box-shadow:
0 0 7px rgba(153, 41, 59, .55);
animation:
sectionLine
2.5s
ease-in-out
infinite;
}
@keyframes sectionLine {
0%,
100% {
width: 35px;
opacity: .55;
}
50% {
width: 65px;
opacity: 1;
box-shadow:
0 0 10px
rgba(173, 45, 65, .75);
}
}
.section p {
line-height: 1.72;
color: #bfb0b3;
font-size: .96rem;
text-align: justify;
}
@keyframes sectionReveal {
from {
opacity: 0;
transform:
translateY(12px);
filter:
blur(3px);
}
to {
opacity: 1;
transform:
translateY(0);
filter:
blur(0);
}
}
/* ============================================================
FRASE FINAL
============================================================ */
.hook-box {
position: relative;
background:
linear-gradient(
135deg,
rgba(82, 22, 32, .25),
rgba(8, 7, 9, .72)
);
border-left:
2px solid
#8c3042;
border-right:
1px solid
rgba(120, 38, 52, .22);
padding:
18px
20px;
border-radius:
0
7px
7px
0;
margin-top: 29px;
font-style: italic;
color: #d7c3c7;
font-size: .94rem;
line-height: 1.65;
box-shadow:
inset 0 0 25px
rgba(119, 25, 41, .06),
0 0 20px
rgba(89, 17, 30, .06);
opacity: 0;
animation:
hookReveal
1s
1.05s
ease
forwards;
}
.hook-box::before {
content: "✦";
position: absolute;
top: -9px;
left: 22px;
color: #ad4658;
background: #110b0e;
padding:
0 9px;
font-size: 11px;
text-shadow:
0 0 8px rgba(169, 48, 67, .65);
animation:
hookStar
2.4s
ease-in-out
infinite;
}
@keyframes hookStar {
0%,
100% {
opacity: .4;
transform: scale(.8);
}
50% {
opacity: 1;
transform: scale(1.2);
text-shadow:
0 0 10px rgba(190, 52, 74, .9);
}
}
@keyframes hookReveal {
from {
opacity: 0;
transform:
translateY(10px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ============================================================
ENTRADA
============================================================ */
@keyframes cardEntrance {
from {
opacity: 0;
transform:
translateY(18px)
scale(.975);
filter:
blur(5px);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
filter:
blur(0);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform:
translateY(10px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 600px) {
body {
padding: 10px;
align-items: center;
}
.card-container {
padding:
38px
20px;
}
.stats-grid {
grid-template-columns:
1fr;
}
.header h1 {
font-size:
1.75rem;
letter-spacing:
2px;
}
.header .subtitle {
font-size:
.95rem;
}
.section p {
font-size:
.91rem;
line-height:
1.7;
}
.vine-left,
.vine-right,
.vine-bottom-left,
.vine-bottom-right {
width: 185px;
height: 110px;
}
.stem.main {
width: 170px;
}
.stem.branch-one {
width: 80px;
}
.stem.branch-two {
width: 75px;
}
.stem.branch-three {
width: 60px;
}
.rose {
font-size:
25px;
}
.stat-item {
min-height:
70px;
}
}
/* ============================================================
REDUCCIÓN DE MOVIMIENTO
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration:
.01ms !important;
animation-iteration-count:
1 !important;
transition-duration:
.01ms !important;
}
}
</style>
</head>
<body>
<!-- ==========================================================
PARTÍCULAS AMBIENTALES
========================================================== -->
<div class="ambient-particles">
<div
class="ambient-particle big"
style="
left:12%;
top:18%;
--duration:5s;
--delay:0s;
"
></div>
<div
class="ambient-particle"
style="
left:82%;
top:16%;
--duration:6s;
--delay:1.5s;
"
></div>
<div
class="ambient-particle big"
style="
left:88%;
top:72%;
--duration:7s;
--delay:2s;
"
></div>
<div
class="ambient-particle"
style="
left:17%;
top:78%;
--duration:5.5s;
--delay:3s;
"
></div>
<div
class="ambient-particle"
style="
left:68%;
top:42%;
--duration:6.5s;
--delay:1s;
"
></div>
</div>
<!-- ==========================================================
TARJETA
========================================================== -->
<main class="card-container">
<!-- Línea superior -->
<div class="top-line"></div>
<!-- Ornamentación central -->
<div class="ornament top">
✦
</div>
<div class="ornament bottom">
✦
</div>
<!-- ======================================================
RAMA SUPERIOR IZQUIERDA
====================================================== -->
<div class="vine vine-left">
<div class="stem main"></div>
<div class="stem branch-one"></div>
<div class="stem branch-two"></div>
<div class="stem branch-three"></div>
<div class="thorn t1"></div>
<div class="thorn t2"></div>
<div class="thorn t3"></div>
<div class="thorn t4"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
</div>
<!-- ======================================================
RAMA SUPERIOR DERECHA
====================================================== -->
<div class="vine vine-right">
<div class="stem main"></div>
<div class="stem branch-one"></div>
<div class="stem branch-two"></div>
<div class="stem branch-three"></div>
<div class="thorn t1"></div>
<div class="thorn t2"></div>
<div class="thorn t3"></div>
<div class="thorn t4"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
</div>
<!-- ======================================================
RAMA INFERIOR IZQUIERDA
====================================================== -->
<div class="vine vine-bottom-left">
<div class="stem main"></div>
<div class="stem branch-one"></div>
<div class="stem branch-two"></div>
<div class="stem branch-three"></div>
<div class="thorn t1"></div>
<div class="thorn t2"></div>
<div class="thorn t3"></div>
<div class="thorn t4"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
</div>
<!-- ======================================================
RAMA INFERIOR DERECHA
====================================================== -->
<div class="vine vine-bottom-right">
<div class="stem main"></div>
<div class="stem branch-one"></div>
<div class="stem branch-two"></div>
<div class="stem branch-three"></div>
<div class="thorn t1"></div>
<div class="thorn t2"></div>
<div class="thorn t3"></div>
<div class="thorn t4"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
</div>
<!-- ======================================================
ROSAS
====================================================== -->
<div class="rose rose-left">
❀
</div>
<div class="rose rose-right">
❀
</div>
<div class="rose rose-bottom-left">
❀
</div>
<div class="rose rose-bottom-right">
❀
</div>
<!-- ======================================================
CONTENIDO
====================================================== -->
<div class="content">
<!-- CABECERA -->
<header class="header">
<h1>
𓆩 Kael Crown 𓆪
</h1>
<div class="subtitle">
・ El Rey Sombrío ・
</div>
</header>
<!-- ==================================================
DATOS
================================================== -->
<div class="stats-grid">
<div class="stat-item">
<strong>
Edad
</strong>
<span>
Desconocida
</span>
</div>
<div class="stat-item">
<strong>
Altura
</strong>
<span>
1.98 m
</span>
</div>
<div class="stat-item">
<strong>
Especie
</strong>
<span>
Humano / Rey del Reino Oscuro
</span>
</div>
<div class="stat-item">
<strong>
Estado
</strong>
<span>
Guardián de la última hada
</span>
</div>
</div>
<!-- ==================================================
APARIENCIA
================================================== -->
<section class="section">
<div class="section-title">
༺ Apariencia ༻
</div>
<p>
De presencia imponente y figura colosal, Kael domina
cualquier espacio en el que entra. Posee una
complexión fuerte y marcada por la guerra, rasgos
afilados y una mirada fría que rara vez muestra
emoción. Viste con armadura pesada y ropajes oscuros
que parecen absorber la poca luz de su castillo de
piedra negra.
</p>
</section>
<!-- ==================================================
PERSONALIDAD
================================================== -->
<section class="section">
<div class="section-title">
༺ Personalidad ༻
</div>
<p>
Severo, distante, estricto y de pocas palabras. Kael
es un gobernante pragmático que prioriza el control
sobre todas las cosas. No dudará en usar la fuerza
para mantener el orden. Bajo su porte inquebrantable,
carga con un dolor constante por una sombra que
consume su pecho en secreto — algo que oculta
implacablemente bajo una máscara de hierro.
</p>
</section>
<!-- ==================================================
SITUACIÓN ACTUAL
================================================== -->
<section class="section">
<div class="section-title">
༺ Situación Actual ༻
</div>
<p>
Tras una intensa persecución, Kael ha capturado a la
última hada existente: tú. Te mantiene cautiva en la
torre central de su castillo, limitada por
brazaletes con runas que inhiben tu magia. Él busca
orden y sumisión, pero ignora que tu simple
presencia es la única medicina capaz de aliviar la
corrosión que amenaza con destruir su vida.
</p>
</section>
<!-- ==================================================
FRASE FINAL
================================================== -->
<div class="hook-box">
"¿Intentarás negociar con el frío rey, buscarás la forma
de romper tus restricciones mágicas, o usarás tu
presencia para notar la debilidad que él intenta
ocultar?"
</div>
</div>
</main>
</body>
</html>
0