/* ══ Focus Template — Base CSS v3 ══ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Body: fondo lateral ─────────────────────────────────────────────────────── */
body.focus-body {
    font-family: var(--fp-font, 'Segoe UI', Arial, sans-serif);
    font-size: var(--fp-font-size, 16px);
    color: var(--fp-text, #222222);
    line-height: var(--fp-lh, 1.65);
    background: var(--fp-bg-outer, #e0e0e0);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── Site container (box centrado) ──────────────────────────────────────────── */
.focus-site {
    max-width: var(--fp-max-width, 1200px);
    margin: 0 auto;
    background: var(--fp-bg-site, #ffffff);
    min-height: 100vh;
    overflow-x: clip;
}

/* ── Secciones ───────────────────────────────────────────────────────────────── */
.focus-band       { width: 100%; }
.focus-band-inner { width: 100%; }
.focus-col        { min-width: 0; }

/* ── Tipografía ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fp-font, 'Segoe UI', Arial, sans-serif);
    color: var(--fp-text, #222222);
    line-height: 1.25;
    margin-bottom: .5em;
}
a { color: var(--fp-primary, #0066cc); text-decoration: none; transition: opacity .18s; }
a:hover { opacity: .78; text-decoration: underline; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Reset módulos Joomla */
.focus-band .moduletable { margin: 0; padding: 0; }

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.fp-topbar {
    width: 100%;
    padding: 7px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ── Logo ────────────────────────────────────────────────────────────────────── */
.fp-logo { display: inline-flex; align-items: center; }
.fp-logo img { display: block; }

/* ── Navegación ──────────────────────────────────────────────────────────────── */
.fp-nav { width: 100%; }
.fp-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}
.fp-nav--vertical .fp-nav-list { flex-direction: column; align-items: flex-start; }
.fp-nav-list li a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity .18s;
}
.fp-nav-list li a:hover { opacity: .65; text-decoration: none; }

/* ── Redes sociales ──────────────────────────────────────────────────────────── */
.fp-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.fp-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    line-height: 1;
}
.fp-social-icon:hover { opacity: .65; }
.fp-social-icon svg { display: block; }

/* ── Banner Focus ────────────────────────────────────────────────────────────── */
.fp-banner-focus {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fp-banner-focus-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
    width: 100%;
}
.fp-banner-focus-logo  { max-height: 80px; width: auto; display: block; margin: 0 auto 6px; }
.fp-banner-focus-title { font-size: clamp(18px, 3vw, 32px); font-weight: 700; letter-spacing: .08em; line-height: 1.1; }
.fp-banner-focus-subtitle { font-size: clamp(10px, 1.5vw, 14px); letter-spacing: .3em; opacity: .75; }

/* ── Banner compuesto ────────────────────────────────────────────────────────── */
.fp-banner-comp-wrap { overflow: hidden; }
.fp-banner-comp-img  { transition: transform .4s ease; }
.fp-banner-comp--hover-zoom .fp-banner-comp-wrap:hover .fp-banner-comp-img { transform: scale(1.06); }
.fp-banner-comp--hover-darken .fp-banner-comp-wrap:hover .fp-banner-comp-img { filter: brightness(.75); }

@media (max-width: 600px) {
    .fp-banner-comp { flex-direction: column !important; height: auto !important; }
    .fp-banner-comp .fp-banner-comp-wrap,
    .fp-banner-comp > div,
    .fp-banner-comp > a { flex: none !important; width: 100% !important; height: 220px !important; }
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.fp-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.fp-hero-inner {
    padding: 80px 40px;
    width: 100%;
    max-width: 860px;
}
.fp-hero-title {
    font-size: clamp(28px, 5vw, 60px);
    font-weight: 700;
    color: #fff;
    margin-bottom: .4em;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.fp-hero-sub {
    font-size: clamp(14px, 2.5vw, 22px);
    color: rgba(255,255,255,.88);
    margin-bottom: 1.6em;
}
.fp-hero-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 6px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .2s;
}
.fp-hero-btn:hover { opacity: .85; }

/* ── Model card ──────────────────────────────────────────────────────────────── */
.fp-model-card {
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    height: 100%;
}
.fp-model-card-img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/4;
    display: block;
}
.fp-model-card-body { padding: 14px 16px; }
.fp-model-card-name { font-size: 15px; margin-bottom: 6px; }
.fp-model-card-text { font-size: 13px; color: #555; line-height: 1.5; }

/* ── Artículo ────────────────────────────────────────────────────────────────── */
.fp-article { }
.fp-article-img  { width: 100%; border-radius: 6px; margin-bottom: 14px; }
.fp-article-title { margin-bottom: 10px; }
.fp-article-body  { font-size: 15px; line-height: 1.7; }
.fp-article-body hr { border: none; border-top: 1px solid #e0e0e0; margin: 20px 0; }

/* ── Lista de artículos ───────────────────────────────────────────────────────── */
.fp-artlist { display: grid; gap: 18px; }
.fp-artlist--grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fp-artlist--list { grid-template-columns: 1fr; }
.fp-artlist-item  { background: #f8f8f8; border-radius: 8px; overflow: hidden; }
.fp-artlist-img   { width: 100%; object-fit: cover; aspect-ratio: 16/9; display: block; }
.fp-artlist-body  { padding: 12px 14px; }
.fp-artlist-title   { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.fp-artlist-excerpt { font-size: 12px; color: #666; margin: 0; line-height: 1.5; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .focus-band-inner {
        flex-direction: column !important;
    }
    .focus-col {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .fp-hero-inner  { padding: 50px 24px; }
    .fp-hero .fp-hero-btn,
    .fp-hero button.fp-hero-btn {
        display: block !important;
        margin: 0 auto !important;
        width: -moz-fit-content;
        width: fit-content;
    }
    .fp-artlist--grid { grid-template-columns: 1fr 1fr; }
    .fp-nav-list li a { padding: 10px 12px; font-size: 13px; }
}

@media (max-width: 480px) {
    .fp-artlist--grid { grid-template-columns: 1fr; }
    .fp-hero-inner    { padding: 36px 16px; }
}