/* ==========================================
   ABOUT PAGE - NUEVO DISEÑO ESTILO ELEGANTE
   Inspirado en CTO Lighting - Estilo Chino Tradicional
   ========================================== */

/* Variables específicas para About - Paleta oscura china */
:root {
    --about-bg: #0a0807;
    --about-bg-warm: #12100e;
    --about-bg-card: #1a1614;
    --about-text: #f3eadf;
    --about-text-muted: #c7b6a4;
    --about-accent: #c9a962;
    --about-red: #C41E3A;
    --about-card-bg: #1a1614;
    --about-card-text: #f3eadf;
    --about-border: rgba(201, 169, 98, 0.25);
}

.bg-cool::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../static/assets/img/preloader/about-bg.jpg');
    opacity: 0.15;
    pointer-events: none;
    background-size: cover;
    background-position: center;
}

/* Override del fondo para la página about */
.about-page {
    background: var(--about-bg) !important;
}

.about-page .corner-frame {
    opacity: 0.15;
}

/* Container específico */
.about-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* ==========================================
   HERO SECTION - Título grande
   ========================================== */
.about-hero-new {
    padding: 180px 0 60px;
    background: var(--about-bg);
    position: relative;
    overflow: hidden;
}

/* Patrón de nubes chinas de fondo */
.about-hero-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at top center, rgba(201, 169, 98, 0.08) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M50 100 Q60 80 80 90 Q100 70 120 85 Q140 65 150 90 Q170 80 170 100 Q180 110 160 115 Q170 130 140 125 Q130 140 110 130 Q90 150 70 130 Q50 145 40 120 Q20 120 30 105 Q20 90 50 100' fill='none' stroke='rgba(201,169,98,0.08)' stroke-width='1'/%3E%3Cpath d='M20 50 Q30 35 45 40 Q55 25 70 35 Q85 20 95 40 Q110 30 110 50 Q120 55 105 60 Q115 70 90 65 Q80 80 65 70 Q50 85 40 70 Q25 80 20 60 Q5 60 15 50 Q5 40 20 50' fill='none' stroke='rgba(201,169,98,0.05)' stroke-width='1' transform='translate(80,120) scale(0.8)'/%3E%3Cpath d='M140 30 Q150 20 160 25 Q170 15 180 25 Q190 15 195 30 Q205 25 200 40 Q210 45 195 50 Q200 60 180 55 Q170 65 160 55 Q145 65 140 50 Q130 55 135 40 Q125 35 140 30' fill='none' stroke='rgba(201,169,98,0.04)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    background-size: auto, 400px 400px;
    opacity: 1;
    pointer-events: none;
}

/* Efecto de ondas decorativas */
.about-hero-new::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath d='M0,100 C360,150 720,50 1080,100 C1260,125 1380,100 1440,100 L1440,200 L0,200 Z' fill='rgba(10,8,7,0.8)'/%3E%3Cpath d='M0,120 C360,170 720,70 1080,120 C1260,145 1380,120 1440,120' fill='none' stroke='rgba(201,169,98,0.15)' stroke-width='1'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
    pointer-events: none;
}

.about-main-title {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--about-text);
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 60px rgba(201, 169, 98, 0.2);
    position: relative;
}

/* ==========================================
   JOURNEY SECTION - Layout asimétrico
   ========================================== */
.about-journey {
    padding: 40px 0 100px;
    background: var(--about-bg);
}

.journey-grid {
    display: grid;
    grid-template-columns: 380px 1fr 480px;
    gap: 40px;
    align-items: start;
}

/* Imagen izquierda */
.journey-image-left {
    position: relative;
}

.journey-image-left .image-placeholder {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--about-border);
    border-radius: 4px;
}

.journey-image-left .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-caption {
    margin-top: 24px;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--about-text-muted);
    max-width: 320px;
}

/* Contenido central */
.journey-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-top: 20px;
}

.journey-text p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--about-text-muted);
    max-width: 380px;
}

.journey-headline h2 {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1.1;
    color: var(--about-accent);
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 30px rgba(201, 169, 98, 0.3);
}

/* Imagen derecha con etiqueta */
.journey-image-right {
    position: relative;
}

.since-tag {
    display: block;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--about-text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.journey-image-right .image-placeholder {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--about-border);
    border-radius: 4px;
}

.journey-image-right .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   CARDS SECTION - Tarjetas informativas
   ========================================== */
.about-cards {
    padding: 80px 0;
    background: var(--about-bg);
}

.cards-header {
    display: flex;
    justify-content: flex-start;
    gap: 120px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--about-border);
}

.cards-label {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--about-text-muted);
    text-transform: uppercase;
}

.cards-title {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--about-accent);
    text-transform: uppercase;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Tarjeta individual */
.info-card {
    background: var(--about-card-bg);
    border: 1px solid var(--about-border);
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--about-accent);
    box-shadow: 0 0 40px rgba(201, 169, 98, 0.1);
}

.card-tag {
    display: inline-block;
    background: var(--about-red);
    color: var(--about-text);
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    padding: 6px 12px;
    text-transform: uppercase;
    margin-bottom: 24px;
    align-self: flex-start;
    border-radius: 2px;
}

.card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}

.card-content h3 {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--about-card-text);
    margin: 0;
}

.card-description {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--about-text-muted);
    margin: 0;
}

/* ==========================================
   PHILOSOPHY SECTION - Filosofía
   ========================================== */
.about-philosophy {
    padding: 100px 0;
    background: var(--about-bg-warm);
    position: relative;
}

.about-philosophy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(196, 30, 58, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

.philosophy-image .image-placeholder {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--about-border);
    border-radius: 4px;
}

.philosophy-image .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.philosophy-content {
    padding: 40px 0;
}

.philosophy-tag {
    display: block;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--about-red);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.philosophy-content h2 {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--about-text);
    margin: 0 0 24px;
}

.philosophy-content p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--about-text-muted);
}

/* ==========================================
   TIMELINE SECTION - Momentos clave
   ========================================== */
.about-timeline-new {
    padding: 100px 0;
    background: var(--about-bg);
}

.timeline-header-new {
    text-align: center;
    margin-bottom: 60px;
}

.timeline-header-new h2 {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--about-text);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.timeline-header-new p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 1rem;
    color: var(--about-text-muted);
}

.timeline-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.timeline-card {
    background: var(--about-card-bg);
    padding: 40px 30px;
    border: 1px solid var(--about-border);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.timeline-card:hover {
    border-color: var(--about-accent);
    background: rgba(201, 169, 98, 0.05);
    transform: translateY(-4px);
}

.timeline-year {
    display: block;
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--about-accent);
    margin-bottom: 16px;
}

.timeline-card h3 {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--about-text);
    margin: 0 0 12px;
}

.timeline-card p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--about-text-muted);
    margin: 0;
}

/* ==========================================
   STATS SECTION - Estadísticas
   ========================================== */
.about-stats-new {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--about-red) 0%, #8a1528 100%);
    position: relative;
    overflow: hidden;
}

.about-stats-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../assets/img/patterns/chinese-pattern.png') repeat;
    opacity: 0.25;
    pointer-events: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
    position: relative;
}

.stat-item {
    padding: 30px;
}

.stat-number {
    display: block;
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--about-accent);
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 30px rgba(201, 169, 98, 0.4);
}

.stat-label {
    display: block;
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.about-cta {
    padding: 120px 0;
    background: var(--about-bg-warm);
    text-align: center;
    position: relative;
}

.about-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center bottom, rgba(201, 169, 98, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.cta-content {
    position: relative;
}

.cta-content h2 {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: var(--about-text);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.cta-content p {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 1.1rem;
    color: var(--about-text-muted);
    margin-bottom: 30px;
}

.about-cta .cta-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.about-cta .cta-phone svg {
    stroke: var(--about-accent);
}

.about-cta .cta-phone a {
    font-family: 'Noto Serif', 'Noto Serif SC', serif;
    font-size: 1.5rem;
    color: var(--about-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-cta .cta-phone a:hover {
    color: var(--about-accent);
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--about-red);
    color: var(--about-text);
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 40px;
    border: 1px solid var(--about-red);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: transparent;
    border-color: var(--about-accent);
    color: var(--about-accent);
}

.cta-btn svg {
    transition: transform 0.3s ease;
}

.cta-btn:hover svg {
    transform: translateX(4px);
}

/* ==========================================
   REVEAL ANIMATIONS
   ========================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   IMAGE PLACEHOLDER STYLES
   ========================================== */
.image-placeholder {
    background: linear-gradient(135deg, #1a1614 0%, #0f0d0b 100%);
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(45deg, transparent 40%, rgba(201, 169, 98, 0.05) 50%, transparent 60%);
    background-size: 200% 200%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.image-placeholder img {
    position: relative;
    z-index: 1;
}

/* ==========================================
   RESPONSIVE - TABLET
   ========================================== */
@media (max-width: 1200px) {
    .about-container {
        padding: 0 40px;
    }

    .journey-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .journey-image-left {
        grid-column: 1;
        grid-row: 1;
    }

    .journey-content {
        grid-column: 2;
        grid-row: 1;
    }

    .journey-image-right {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 600px;
        margin: 40px auto 0;
    }

    .cards-header {
        gap: 60px;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ==========================================
   RESPONSIVE - MOBILE
   ========================================== */
@media (max-width: 768px) {
    .about-container {
        padding: 0 24px;
    }

    .about-hero-new {
        padding: 140px 0 40px;
    }

    .about-main-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .journey-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .journey-content {
        gap: 40px;
    }

    .journey-image-right {
        max-width: 100%;
    }

    .cards-header {
        flex-direction: column;
        gap: 8px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .info-card {
        min-height: 240px;
    }

    .timeline-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-item {
        padding: 20px;
    }

    .about-cta {
        padding: 80px 0;
    }

    .cta-content h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
}

/* ==========================================
   ESTILOS HEREDADOS DEL THEME PRINCIPAL
   ========================================== */
.about-page .header {
    background: transparent;
}

.about-page .header.scrolled {
    background: rgba(10, 8, 7, 0.95);
    backdrop-filter: blur(10px);
}