@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;600&display=swap');

:root {
    --primary: #e63946;
    --secondary: #457b9d;
    --accent: #f1faee;
    --background: #1d3557;
    --text: #22223b;
    --text-light: #fff;
    --card: #fff;
    --shadow: 0 6px 32px rgba(69,123,157,0.13);
    --gradient: linear-gradient(120deg, #e63946 0%, #457b9d 100%);
    --glass: rgba(255,255,255,0.7);
    --heart: #e63946;
    --ink: #22223b;
}

/* Fondo animado con corazones */
body.pagina-versos {
    background: linear-gradient(120deg, #1d3557 0%, #457b9d 100%);
    font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}
body.pagina-versos::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, #e6394611 0 2px, transparent 2px 40px);
    opacity: 0.13;
}

/* Corazones animados flotando */
.animated-heart {
    position: fixed;
    z-index: 2;
    width: 32px;
    height: 32px;
    pointer-events: none;
    animation: floatHeart 8s linear infinite;
    opacity: 0.7;
}
@keyframes floatHeart {
    0% {
        transform: translateY(100vh) scale(0.7) rotate(-10deg);
        opacity: 0.7;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(-10vh) scale(1.1) rotate(10deg);
        opacity: 0;
    }
}

/* Pluma animada en la esquina */
.writer-pen {
    position: fixed;
    bottom: 18px;
    right: 24px;
    z-index: 10;
    width: 48px;
    height: 48px;
    opacity: 0.8;
    animation: penWiggle 2.5s infinite alternate;
}
@keyframes penWiggle {
    0% { transform: rotate(-8deg) scale(1); }
    60% { transform: rotate(8deg) scale(1.05);}
    100% { transform: rotate(-8deg) scale(1);}
}

/* Contenedor principal */
.versos-amor {
    max-width: 900px;
    margin: 2.5rem auto 0 auto;
    background: var(--glass);
    border-radius: 2rem;
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem 2rem 2rem;
    position: relative;
    z-index: 3;
    backdrop-filter: blur(6px);
    border: 1.5px solid #f1faee55;
    box-shadow: 0 8px 40px #e6394611, 0 2px 8px #457b9d22;
    overflow: hidden;
}

/* Cabecera */
.versos-amor__cabecera {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}
.versos-amor__cabecera::after {
    content: "♥";
    color: var(--primary);
    font-size: 2.5rem;
    position: absolute;
    right: 1.5rem;
    top: 0.2rem;
    opacity: 0.18;
    animation: heartPulse 2.2s infinite;
}
@keyframes heartPulse {
    0%, 100% { transform: scale(1);}
    50% { transform: scale(1.18);}
}

.versos-amor__titulo {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 16px #e6394622, 0 1px 0 #f1faee;
    background: linear-gradient(90deg, #e63946 60%, #457b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.versos-amor__titulo::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url('data:image/svg+xml;utf8,<svg fill="red" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M23.6,3.6c-2.6,0-5,1.3-6.6,3.4C15.4,4.9,13,3.6,10.4,3.6C5.7,3.6,2,7.3,2,12c0,7.1,13,15.4,13.6,15.8c0.3,0.2,0.7,0.2,1,0C17,27.4,30,19.1,30,12C30,7.3,26.3,3.6,23.6,3.6z"/></svg>') no-repeat center/contain;
    vertical-align: middle;
    margin-right: 0.7rem;
    opacity: 0.7;
    animation: heartPulse 2.2s infinite;
}

.versos-amor__subtitulo {
    font-size: 1.25rem;
    color: var(--secondary);
    font-style: italic;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 8px #f1faee88;
    letter-spacing: 0.5px;
}

/* Secciones de versos */
.versos-amor__seccion {
    background: linear-gradient(120deg, #f1faee 80%, #a8dadc 100%);
    border-radius: 1.3rem;
    box-shadow: 0 2px 16px #457b9d22;
    padding: 1.7rem 1.3rem 1.3rem 1.3rem;
    margin-bottom: 2.2rem;
    border-left: 7px solid var(--primary);
    border-right: 7px solid var(--secondary);
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.versos-amor__seccion::before {
    content: "✍️";
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    font-size: 1.3rem;
    opacity: 0.18;
    pointer-events: none;
    animation: penWiggle 3s infinite alternate;
}
.versos-amor__seccion:hover {
    box-shadow: 0 8px 32px #e6394644;
    transform: translateY(-4px) scale(1.012);
}

/* Título de cada verso */
.versos-amor__verso-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--secondary);
    margin-bottom: 0.7rem;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 8px #a8dadc88;
    background: linear-gradient(90deg, #457b9d 60%, #e63946 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.versos-amor__verso-titulo::after {
    content: "♥";
    color: var(--primary);
    font-size: 1.1rem;
    margin-left: 0.6rem;
    vertical-align: middle;
    opacity: 0.5;
    animation: heartPulse 2.2s infinite;
}

/* Texto de los versos */
.versos-amor__texto {
    font-size: 1.18rem;
    color: var(--ink);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    background: #f1faeecc;
    border-radius: 0.7rem;
    padding: 0.7rem 1rem;
    box-shadow: 0 1px 6px #457b9d11;
    font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
    border-left: 3px solid var(--primary);
    border-right: 3px solid var(--secondary);
    position: relative;
}
.versos-amor__texto::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg fill="red" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M23.6,3.6c-2.6,0-5,1.3-6.6,3.4C15.4,4.9,13,3.6,10.4,3.6C5.7,3.6,2,7.3,2,12c0,7.1,13,15.4,13.6,15.8c0.3,0.2,0.7,0.2,1,0C17,27.4,30,19.1,30,12C30,7.3,26.3,3.6,23.6,3.6z"/></svg>') no-repeat center/contain;
    opacity: 0.13;
}

/* Imagen de cada verso */
.versos-amor__imagen {
    display: block;
    margin: 1.2rem auto 0 auto;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px #1d355755, 0 2px 8px #e6394622;
    border: 4px solid var(--secondary);
    max-width: 100%;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    background: var(--accent);
    position: relative;
    z-index: 1;
}
.versos-amor__imagen:hover {
    transform: scale(1.045) rotate(-2deg);
    box-shadow: 0 16px 48px #e6394688, 0 2px 8px #457b9d44;
    border-color: var(--primary);
}

.versos-amor__formulario {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
}

.versos-amor__boton-desamor {
    display: inline-block;
    font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif;
    font-size: 1.13rem;
    font-weight: 600;
    padding: 0.85rem 2.2rem;
    border-radius: 2rem;
    border: none;
    background: linear-gradient(90deg, #3a0ca3 0%, #720026 100%);
    color: #fff;
    box-shadow: 0 4px 18px #72002633, 0 1px 4px #3a0ca322;
    letter-spacing: 1px;
    cursor: pointer;
    margin: 1.5rem auto 0 auto;
    transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
    position: relative;
    outline: none;
    padding-left: 3rem;
}
.versos-amor__boton-desamor::before {
    content: "💔";
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s;
}
.versos-amor__boton-desamor:hover,
.versos-amor__boton-desamor:focus {
    background: linear-gradient(90deg, #720026 0%, #3a0ca3 100%);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 32px #72002655, 0 2px 8px #3a0ca344;
}
.versos-amor__boton-desamor:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px #72002633;
}

/* Separador */
.versos-amor__separador {
    border: none;
    border-top: 2.5px dashed var(--primary);
    margin: 2.5rem 0 1.5rem 0;
    opacity: 0.7;
}



/* Pie de página */
.versos-amor__pie {
    text-align: center;
    margin: 2.5rem auto 1.5rem auto;
    position: relative;
}
.versos-amor__pie::before {
    content: "♥";
    color: var(--primary);
    font-size: 2rem;
    position: absolute;
    left: 1.5rem;
    top: 0.2rem;
    opacity: 0.13;
    animation: heartPulse 2.2s infinite;
}

.versos-amor__dedicatoria {
    font-size: 1.13rem;
    color: var(--primary);
    font-style: italic;
    background: linear-gradient(90deg, #f1faee 60%, #e6394633 100%);
    border-radius: 1.2rem;
    padding: 1.3rem 1.7rem;
    box-shadow: 0 2px 12px #457b9d22;
    display: inline-block;
    border: 1.5px solid #e6394633;
    max-width: 90vw;
    position: relative;
}
.versos-amor__dedicatoria::after {
    content: "✍️";
    position: absolute;
    right: 1.2rem;
    bottom: 0.7rem;
    font-size: 1.2rem;
    opacity: 0.22;
    animation: penWiggle 2.5s infinite alternate;
}

/* Responsive */
@media (max-width: 600px) {
    .versos-amor {
        padding: 1rem 0.2rem;
    }
    .versos-amor__seccion {
        padding: 1rem 0.4rem;
        border-left-width: 4px;
        border-right-width: 4px;
    }
    .versos-amor__titulo {
        font-size: 1.5rem;
    }
    .versos-amor__dedicatoria {
        font-size: 1rem;
        padding: 0.7rem 0.5rem;
    }
    .versos-amor__imagen {
        border-radius: 1rem;
    }
    .writer-pen {
        width: 32px;
        height: 32px;
        bottom: 8px;
        right: 8px;
    }
}