@font-face {
        font-family: 'Playfair_Display';
        src: url('../fuentes/Playfair_Display/static/PlayfairDisplay-Regular.ttf');
        /* font-style: normal; */
        /*  font-weight: 100;*/
    }

    :root {
        /* PALETA REFINADA - Rojos sofisticados con matices */
        --rojo-primario: #8A0303;
        --rojo-secundario: #C1121F;
        --rojo-intenso: #a01729;
        --rojo-claro: #d63384;
        --rojo-coral: #c94a65;
        --crema-puro: #fefdfb;
        --blanco-puro: #ffffff;
        --gris-neutro: #6c757d;
        /*--negro-suave: #2d3436;*/
        --negro-suave: #000000;
    }



    /* HERO ARQUITECTÓNICO - Layout de revista moderna */
    .hero-section {
        min-height: 100vh;
        position: relative;
        background: var(--blanco-puro);
        overflow: hidden;
    }

    /* ELEMENTOS GEOMÉTRICOS FLOTANTES MINIMALISTAS */
    .geometric-elements {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .geo-shape {
        position: absolute;
        background: var(--rojo-primario);
        opacity: 0.08;
    }

    .geo-shape.circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        top: 15%;
        right: 10%;
        animation: gentleRotate 15s linear infinite;
        background-color: var(--rojo-secundario);
    }

    .geo-shape.square {
        width: 80px;
        height: 80px;
        top: 70%;
        left: 5%;
        transform: rotate(45deg);
        animation: gentleFloat 8s ease-in-out infinite;
    }

    .geo-shape.triangle {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 50px solid var(--rojo-secundario);
        background: transparent;
        top: 25%;
        left: 15%;
        opacity: 0.1;
        animation: gentleFloat 10s ease-in-out infinite 2s;
    }

    @keyframes gentleRotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes gentleFloat {

        0%,
        100% {
            transform: translateY(0px) rotate(45deg);
        }

        50% {
            transform: translateY(-20px) rotate(45deg);
        }
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 2;
    }

    /* LAYOUT ASIMÉTRICO EDITORIAL */
    .hero-content {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 6rem;
        align-items: stretch;
        min-height: 100vh;
        padding: 4rem 0;
    }

    /* SECCIÓN DE TEXTO - Diseño editorial */
    .text-section {
        font-family: 'Playfair_Display';
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding: 2rem 0;
    }

    /* NÚMERO DECORATIVO ELIMINADO - Diseño más limpio */

    /* ETIQUETA SUPERIOR */
    .text-section .label {
        display: inline-block;
        background: linear-gradient(90deg, var(--rojo-primario), var(--rojo-coral));
        color: white;
        padding: 0.5rem 1.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 2.5rem;
        align-self: flex-start;
        border-radius: 20px;
        opacity: 0;
        transform: translateY(-20px);
        animation: slideDown 1s ease-out 0.5s forwards;
    }



    /* TÍTULO PRINCIPAL - Tipografía expresiva */
    .text-section h1 {
        font-family: 'Playfair_Display', serif;
        font-style: normal;
        font-size: 3.5rem;
        font-weight: 50;
        line-height: 1.1;
        color: var(--negro-suave);
        margin-bottom: 3rem;
        position: relative;
        opacity: 0;
        transform: translateY(30px);
        animation: slideUp 1.2s ease-out 0.8s forwards;
    }

    /* PALABRA DESTACADA CON EFECTO MODERNO */
    .text-section h1 .highlightHero {
        font-family: 'Playfair_Display', serif;
        position: relative;
        color: var(--rojo-primario);
        font-style: italic;
    }

    .text-section h1 .highlightHero::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--rojo-primario), var(--rojo-coral));
        transform: scaleX(0);
        transform-origin: left;
        animation: underlineGrow 1s ease-out 2s forwards;
    }

    @keyframes underlineGrow {
        to {
            transform: scaleX(1);
        }
    }

    /* PÁRRAFOS CON ESPACIADO EDITORIAL */
    .text-section p {
        font-size: 1.15rem;
        line-height: 1.8;
        color: var(--negro-suave);
        margin-bottom: 1.8rem;
        font-weight: 300;
        opacity: 0;
        transform: translateY(20px);
        animation: slideUp 0.8s ease-out forwards;
    }

    .text-section p:nth-of-type(1) {
        animation-delay: 1.2s;
    }

    .text-section p:nth-of-type(2) {
        animation-delay: 1.5s;
    }

    .text-section p:nth-of-type(3) {
        animation-delay: 1.8s;
        font-weight: 400;
        color: var(--rojo-primario);
        font-style: italic;
        font-size: 1.25rem;
        position: relative;
        padding-left: 2rem;
    }

    .text-section p:nth-of-type(3)::before {
        content: '"';
        position: absolute;
        left: 0;
        top: -0.2rem;
        font-size: 3rem;
        color: var(--rojo-primario);
        opacity: 0.3;
        line-height: 1;
    }

    /* SECCIÓN DE IMAGEN - Diseño arquitectónico */
    .image-section {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* MARCO ARQUITECTÓNICO SIN INCLINACIÓN - Diseño recto y elegante */
    .architectural-frame {
        position: relative;
        width: 100%;
        max-width: 450px;
        height: 650px;
        background: white;
        box-shadow:
            0 0 0 1px rgba(185, 28, 60, 0.1),
            0 20px 40px rgba(185, 28, 60, 0.08),
            0 40px 80px rgba(0, 0, 0, 0.02);
        border-radius: 4px;
        overflow: hidden;
        /* SIN ROTACIÓN - Marco recto y limpio */
        transform: translateY(0);
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0;
        animation: fadeInUp 1.5s ease-out 1s forwards;
    }

    .architectural-frame:hover {
        /* HOVER SIN ROTACIÓN - Solo elevación elegante */
        transform: translateY(-15px);
        box-shadow:
            0 0 0 1px rgba(185, 28, 60, 0.15),
            0 30px 60px rgba(185, 28, 60, 0.12),
            0 60px 120px rgba(0, 0, 0, 0.05);
    }

    /* NUEVA ANIMACIÓN SIN PERSPECTIVA */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* BANDA DECORATIVA SUPERIOR */
    .color-band {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: linear-gradient(90deg, var(--rojo-primario), var(--rojo-coral), var(--rojo-claro));
        animation: bandShimmer 3s ease-in-out infinite;
    }

    @keyframes bandShimmer {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    /* CONTENEDOR DE IMAGEN CON CONTROL AVANZADO */
    .image-container {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 0px;
        background: #fafafa;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* AJUSTABLE: cover, contain, fill */
        object-position: center center;
        /* AJUSTABLE: posición */
        transition: all 0.4s ease;

        /* CONTROL DE ZOOM PERSONALIZABLE */
        transform: scale(1.02);
        /* CAMBIAR: 1.0=normal, 1.1=zoom 10% */
    }

    .architectural-frame:hover img {
        transform: scale(1.05);
        /* Zoom en hover */
    }

    /* ELEMENTOS DECORATIVOS FLOTANTES */
    .floating-elements {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .accent-dot {
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--rojo-primario);
        border-radius: 50%;
        opacity: 0.6;
    }

    .accent-dot:nth-child(1) {
        top: 20%;
        left: -3px;
        animation: dotPulse 2s ease-in-out infinite;
    }

    .accent-dot:nth-child(2) {
        bottom: 30%;
        right: -3px;
        animation: dotPulse 2s ease-in-out infinite 1s;
    }

    .accent-dot:nth-child(3) {
        top: 60%;
        left: -3px;
        background: var(--rojo-coral);
        animation: dotPulse 2s ease-in-out infinite 0.5s;
    }

    @keyframes dotPulse {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.6;
        }

        50% {
            transform: scale(1.5);
            opacity: 1;
        }
    }

    /* LÍNEAS DECORATIVAS MINIMALISTAS */
    .accent-line {
        position: absolute;
        background: var(--rojo-primario);
        opacity: 0.15;
    }

    .accent-line.horizontal {
        width: 60px;
        height: 1px;
        top: 50%;
        right: -80px;
        animation: lineExtend 2s ease-out 2.5s forwards;
        transform: scaleX(0);
        transform-origin: left;
    }

    .accent-line.vertical {
        width: 1px;
        height: 80px;
        bottom: 20%;
        left: -30px;
        animation: lineExtend 2s ease-out 3s forwards;
        transform: scaleY(0);
        transform-origin: bottom;
    }

    @keyframes lineExtend {
        to {
            transform: scale(1);
        }
    }

    /* ANIMACIONES PRINCIPALES */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* RESPONSIVE DESIGN ACTUALIZADO */
    @media (max-width: 1024px) {
        .hero-content {
            grid-template-columns: 1fr;
            gap: 4rem;
            text-align: center;
        }

        .text-section h1 {
            font-size: 3.5rem;
        }

        .architectural-frame {
            /* SIN CAMBIOS DE ROTACIÓN EN RESPONSIVE */
            max-width: 400px;
            height: 550px;
        }
    }

    @media (max-width: 768px) {
        .text-section h1 {
            font-size: 2.8rem;
        }

        .text-section p {
            font-size: 1.1rem;
        }

        .architectural-frame {
            max-width: 320px;
            height: 480px;
        }

        .container {
            padding: 0 1.5rem;
        }
    }

    @media (max-width: 480px) {
        .text-section h1 {
            font-size: 2.2rem;
        }

        .architectural-frame {
            height: 420px;
        }

        .hero-content {
            padding: 2rem 0;
            gap: 2.5rem;
        }
    }