/* ============================================================
   CAMP · Estilos personalizados (Arbitration and Mediation Center Paraguay)
   Subir a:  public_html/css/camp-custom.css
   Llamar desde cada módulo con:
   <link rel="stylesheet" href="/css/camp-custom.css">
   ------------------------------------------------------------
   COLORES INSTITUCIONALES: azul + blanco
   >>> Cambiá SOLO --camp-blue por el azul exacto del logo CAMP <<<
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@500;600&family=Lato:wght@400&display=swap');

:root{
    --camp-blue:      #0f5aa8;   /* AZUL INSTITUCIONAL CAMP — reemplazar por el exacto */
    --camp-blue-dark: #0a2c4a;   /* Azul profundo (para el overlay sobre la foto)     */
    --camp-white:     #ffffff;
}

/* ==================== HERO (bloque principal) ==================== */
.camp-hero{
    position:relative; width:100%; min-height:560px;
    display:flex; align-items:center; overflow:hidden; box-sizing:border-box;
}
.camp-hero *{ box-sizing:border-box; }
.camp-hero__img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:1;
}
.camp-hero__overlay{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(100deg,
        rgba(10,44,74,.90) 0%,
        rgba(10,44,74,.64) 45%,
        rgba(10,44,74,.24) 100%);
}
.camp-hero__inner{
    position:relative; z-index:3; width:100%; max-width:1180px;
    margin:0 auto; padding:0 60px;
    opacity:0; transform:translateY(18px);
    animation:campFadeUp .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.camp-hero__rule{
    display:block; width:64px; height:3px;
    background:var(--camp-white); margin-bottom:28px;
}
.camp-hero__title{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    color:var(--camp-white) !important;
    font-size:clamp(38px, 5vw, 68px) !important;
    font-weight:600 !important; line-height:1.08 !important;
    letter-spacing:.5px !important; margin:0 0 34px 0 !important;
    max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* ==================== BANDA (Our Services) ==================== */
.camp-band{
    position:relative; width:100%; min-height:440px;
    display:flex; align-items:center; justify-content:center;
    text-align:center; overflow:hidden; box-sizing:border-box;
}
.camp-band *{ box-sizing:border-box; }
.camp-band__img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:1;
}
.camp-band__overlay{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(15,90,168,.30), rgba(10,44,74,.92));
}
.camp-band__inner{
    position:relative; z-index:3; padding:60px 24px;
    display:flex; flex-direction:column; align-items:center;
}
.camp-band__eyebrow{
    font-family:'Montserrat', sans-serif;
    text-transform:uppercase; letter-spacing:4px; font-size:12px;
    color:#9dc3e6; margin-bottom:16px;
}
.camp-band__title{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    color:var(--camp-white) !important;
    font-size:clamp(34px, 4.5vw, 58px) !important;
    font-weight:600 !important; line-height:1.1 !important; margin:0 !important;
}
.camp-band__rule{
    display:block; width:70px; height:3px;
    background:var(--camp-white); margin:24px 0 32px 0;
}

/* ==================== BOTÓN (compartido) ==================== */
.camp-hero__btn,
.camp-band__btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--camp-white);
    color:var(--camp-blue) !important;
    font-family:'Montserrat', sans-serif !important;
    font-weight:600; text-transform:uppercase; letter-spacing:2px;
    font-size:13px; padding:15px 34px; border-radius:2px;
    text-decoration:none !important;
    border:2px solid var(--camp-white);
    transition:all .3s ease;
}
.camp-hero__btn span,
.camp-band__btn span{ transition:transform .3s ease; }
.camp-hero__btn:hover,
.camp-band__btn:hover{
    background:var(--camp-blue);
    color:var(--camp-white) !important;
    border-color:var(--camp-blue);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.camp-hero__btn:hover span,
.camp-band__btn:hover span{ transform:translateX(5px); }

/* ==================== Animación ==================== */
@keyframes campFadeUp{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
    .camp-hero__inner{ animation:none; opacity:1; transform:none; }
}

/* ==================== Celulares ==================== */
@media (max-width:768px){
    .camp-hero{ min-height:460px; }
    .camp-hero__inner{ padding:0 26px; }
    .camp-hero__title{ font-size:34px !important; }
    .camp-band{ min-height:360px; }
    .camp-band__title{ font-size:32px !important; }
}