/* ── FUENTES LOCALES ── */
@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
 
@font-face {
    font-family: 'Norse';
    src: url('../fonts/Norse-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: 'Norse';
    src: url('../fonts/Norse-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: 'NotoSerif';
    src: url('../fonts/NotoSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: 'NotoSerif';
    src: url('../fonts/NotoSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* ── HERO ── */
.hero {
    height: 100vh;
    min-height: 600px;
    background-color: #3a2518;
    /* background-image: url('img/hero.jpg'); background-size: cover; background-position: center top; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(43,29,22,0.25) 0%,
        rgba(43,29,22,0.15) 40%,
        rgba(43,29,22,0.55) 100%
    );
}
.hero-text {
    position: relative;
    z-index: 2;
}/* ── HERO ── */
.hero {
    height: 100vh;
    min-height: 600px;
    background-color: #3a2518;
    background-image: url('../img/griego-latin-hero.webp'); background-size: cover; background-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(43,29,22,0.35) 20%, rgba(43,29,22,0.25) 25%, rgba(43,29,22,0.95) 50%, rgba(43,29,22,0.25)75%, rgba(43,29,22,0.35)80% )
}

.hero-text {
    position: relative;
    z-index: 2;
}

.main-title {
    font-family: 'Norse', cursive;
    font-size: clamp(3.2rem, 9vw, 7rem);
    color: var(--crema);
    letter-spacing: 6px;
    line-height: 1;
    text-shadow:
        6px 6px 0px rgba(142, 78, 53, 0.5),
        14px 14px 0px rgba(142, 78, 53, 0.4);
}

.tagline {
    font-family: 'Cinzel';
    font-size: clamp(0.75rem, 4vw, 2rem);
    letter-spacing: 6px;
    color: var(--gold-light);
    margin-top: 14px;
    text-transform: uppercase;
    opacity: 0.95;
    text-shadow:
        3px 3px 0px rgba(142, 78, 53, 0.5),
        5px 5px 0px rgba(142, 78, 53, 0.4);
}

/* ── CATEGORÍAS ── */
.categories-bar {
    background: var(--terracotta);
    padding: 48px 5%;
    display: flex;
    justify-content: space-around;
    gap: 40px;
    flex-wrap: wrap;
}

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.circle-box {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: var(--crema);
    margin-bottom: 12px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

.categories-bar .cat-item:nth-child(1) .circle-box{
    background-image: url('../img/mitologia-clasica.webp'); background-size: cover;
}

.categories-bar .cat-item:nth-child(2) .circle-box{
    background-image: url('../img/gramatica-latin-griego.webp'); background-size: cover;
}

.categories-bar .cat-item:nth-child(3) .circle-box{
    background-image: url('../img/filosofia-clasica.webp'); background-size: cover;
}

.categories-bar .cat-item:nth-child(4) .circle-box{
    background-image: url('../img/vida-diaria-roma-grecia.webp'); background-size: cover;
}

.categories-bar .cat-item:nth-child(5) .circle-box{
    background-image: url('../img/arqueologia.webp'); background-size: cover;
}

.cat-item:hover .circle-box {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(43,29,22,0.35);
}

.cat-item p {
    color: var(--crema);
    font-family: 'Cinzel';
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ── BLOG SLIDER ── */
.blog-entries {
    padding: 70px 5% 80px;
    background: var(--sand);
    position: relative;
}

.blog-title {
    font-family: 'Cinzel';
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--dark);
    margin-bottom: 36px;
}

.slider-wrapper {
    position: relative;
}

.blog-track-outer {
    overflow: hidden;
}

.blog-track {
    display: flex;
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card {
    flex: 0 0 calc(25% - 18px);
    min-width: 220px;
    cursor: pointer;
}

.blog-img {
    width: 100%;
    height: 200px;
    background: var(--dark-mid);
    /* background-image: url('img/post-X.jpg'); background-size: cover; */
    margin-bottom: 14px;
}

.blog-card h3 {
    font-family: 'Cinzel';
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--terracotta);
    margin-bottom: 6px;
    line-height: 1.4;
}

.blog-card p {
    font-size: 0.85rem;
    color: var(--dark-mid);
    line-height: 1.6;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--terracotta);
    border: none;
    border-radius: 50%;
    color: var(--crema);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    box-shadow: 0 3px 10px rgba(43,29,22,0.3);
}

.slider-btn:hover { background: var(--terracotta-dark); }
.slider-btn.prev { left: -20px; }
.slider-btn.next { right: -20px; }

/* ── INFO BLOCKS (imagen + texto lado a lado) ── */
.info-block {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 90px 8%;
}

.info-block.reverse { flex-direction: row-reverse; }

.info-img {
    flex: 0 0 44%;
    max-width: 44%;
}

.torn-img {
    width: 100%;
    height: 480px;
    background: var(--dark-mid);
    /* background-image: url('img/X.jpg'); background-size: cover; background-position: center; */
    clip-path: polygon(
        2% 2%, 5% 0%, 10% 3%, 18% 0%, 25% 2%,
        33% 0%, 41% 3%, 50% 0%, 58% 2%,
        67% 0%, 74% 3%, 83% 0%, 91% 2%,
        97% 0%, 100% 3%,
        98% 15%, 100% 30%, 97% 50%,
        100% 65%, 98% 80%, 100% 95%,
        97% 100%, 90% 97%, 82% 100%,
        73% 97%, 65% 100%, 57% 97%,
        48% 100%, 40% 97%, 31% 100%,
        22% 97%, 14% 100%, 6% 97%,
        0% 100%,
        2% 85%, 0% 70%, 3% 55%,
        0% 40%, 2% 25%, 0% 10%
    );
}

.info-txt { flex: 1; }

.info-txt p {
    line-height: 1.85;
    font-size: 0.97rem;
    margin-bottom: 1rem;
}

.sand-bg { background: var(--sand-light); }
.terracotta-bg { background: var(--terracotta); color: var(--crema); }
.terracotta-bg p { color: var(--crema); opacity: 0.92; }

.greek-heading {
    font-family: 'Norse';
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--terracotta);
    margin-bottom: 24px;
    line-height: 1.1;
}

.greek-heading.white { color: var(--crema); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .info-block,
    .info-block.reverse {
        flex-direction: column;
        padding: 60px 6%;
    }
    .info-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .torn-img { height: 320px; }
    .blog-card { flex: 0 0 calc(50% - 12px); }
    .categories-bar { gap: 24px; }
    .circle-box { width: 90px; height: 90px; }
}

@media (max-width: 600px) {
    .blog-card { flex: 0 0 100%; }
    .menu a { margin-left: 14px; font-size: 0.72rem; }
}