/* ==========================================
   PALETA
========================================== */

:root{
    --taupe:#C7B6A8;
    --charcoal:#4A4A52;
    --cream:#F1EBE1;
    --light:#F8F6F3;
    --black:#1C1C1E;
}

/* ==========================================
   HERO
========================================== */

.dir-hero{
    background:var(--light);
    padding:100px 0 80px;
    border-bottom:1px solid #ddd;
    text-align:center;
}

.dir-kicker{
    display:block;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--taupe);
    margin-bottom:15px;
    font-weight:600;
}

.dir-title{
    font-family:'Cormorant Garamond', serif;
    font-size:4rem;
    font-weight:700;
    color:var(--charcoal);
    margin-bottom:20px;
}

.dir-quote{
    color:#7e766e;
    font-size:1rem;
    font-style:italic;
    max-width:700px;
    margin:auto;
}

/* ==========================================
   SECCIÓN
========================================== */

.dir-section{
    background:var(--light);
    padding:70px 0;
}

/* ==========================================
   ENCABEZADO
========================================== */

.dir-heading{
    margin-bottom:50px;
    position:relative;
}

.dir-heading h2{
    font-family:'Cormorant Garamond', serif;
    font-size:3rem;
    color:var(--charcoal);
    margin:0;
}

.dir-heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-15px;
    width:120px;
    height:3px;
    background:var(--taupe);
}

/* ==========================================
   GRID
========================================== */

.dir-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* ==========================================
   TARJETA
========================================== */

.dir-card{
    background:#fff;
    border:1px solid #e8e3de;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    transition:transform .25s, box-shadow .25s;
}

.dir-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(0,0,0,.10);
}

/* ==========================================
   ÁREA DE LOGO — fondo blanco, altura fija igual para todas
========================================== */

.dir-card-logo{
    background:#fff;
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 32px;
}

/* Todos los logos: mismo contenedor 140×80, object-fit contiene */
.dir-logo-img{
    display:block;
    width:140px;
    height:80px;
    object-fit:contain;
    object-position:center;
    filter:none;
}

.dir-logo-box{
    width:72px;
    height:72px;
    background:var(--taupe);
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.8rem;
    text-align:center;
}

/* ==========================================
   CUERPO — nombre + slogan
========================================== */

.dir-card-body{
    padding:4px 24px 16px;
    text-align:center;
}

.dir-card-name{
    font-size:1rem;
    font-weight:700;
    color:var(--charcoal);
    margin-bottom:4px;
}

.dir-card-slogan{
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#c0824a;   /* naranja/tostado igual a la imagen */
    font-weight:700;
}

/* ==========================================
   SEPARADOR ANTES DE LINKS
========================================== */

.dir-card-links{
    margin-top:auto;
    border-top:1px solid #f0ece8;
    display:flex;
    flex-direction:column;
}

/* ==========================================
   CADA LINK — fila texto + ícono, sin relleno oscuro
========================================== */

.dir-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 22px;
    font-size:.87rem;
    color:#1c1c1e;
    text-decoration:none;
    border-bottom:1px solid #f0ece8;
    transition:background .2s;
    gap:8px;
}

.dir-link:last-child{
    border-bottom:none;
}

.dir-link:hover{
    background:#faf7f5;
}

.dir-link span{
    flex:1;
}

.dir-link i{
    color:#6b6b72;
    font-size:.85rem;
    flex-shrink:0;
}

/* ==========================================
   CTA
========================================== */

.dir-cta{
    background:var(--charcoal);
    padding:90px 0;
}

.dir-cta h2{
    font-family:'Cormorant Garamond', serif;
    color:#fff;
    font-size:3rem;
    margin-bottom:15px;
}

.dir-cta p{
    color:#d9d4cf;
    max-width:700px;
    margin:auto;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){
    .dir-grid{ grid-template-columns:repeat(2,1fr); }
    .dir-title{ font-size:3rem; }
}

@media(max-width:576px){
    .dir-grid{ grid-template-columns:1fr; }
    .dir-title{ font-size:2.2rem; }
    .dir-heading h2{ font-size:2rem; }
}

/* ── CTA button visible sobre fondo oscuro ── */
.btn-aseg-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #8C7B6E;
    color: #ffffff !important;
    border: 2px solid #8C7B6E;
    padding: .9rem 2.2rem;
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s, border-color .3s, transform .3s;
    border-radius: 0;
}
.btn-aseg-cta:hover,
.btn-aseg-cta:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #1C1C1E !important;
    transform: translateY(-2px);
}