/* =====================================================
SITE CONTENT STYLES
Couples Therapy Center
Estilos para artículos Joomla
===================================================== */

:root{

--bg:#f6f8ff;

--blue-dark:#4c82a8;
--blue-mid:#9bb0c7;
--blue-light:#dbecf8;

--accent:#ff7f41;

--card:#dbecf8;/*#e6eef6;*/

--text-dark:#03151a;
--text-clear:#ffffff;

--radius:18px;

--shadow:0 6px 18px rgba(18,40,60,0.12);

}

.page-header h1, .page-header h2, .page-header h3{
    text-align: center;
    margin-top: 30px;
}

.com-content-category-blog, .com-content-article__body {
    margin-top: var(--nav-height);
    width: 100%;
    flex: 1;
    padding-bottom: 20px;
    max-width: 1180px;
    margin-left: auto;
    padding: 20px;
    margin-right: auto;
}


/* ===============================
TIPOGRAFÍA
=============================== */

.section h1{
font-size:2.5rem;
margin-bottom:20px;
text-align:center;
}

.section h2{
font-size:2rem;
margin-bottom:30px;
text-align:center;
}

.section h3{
font-size:1.5rem;
margin-bottom:20px;
}

.section p{
margin-bottom:20px;
line-height:1.6;
}



/* ===============================
SECCIONES
=============================== */

.section{
padding:60px 0;
}

.section-light{
background:var(--bg);
}

.section-dark{
background:var(--blue-dark);
color:var(--text-clear);
}

.section-dark h2,
.section-dark h3{
color:var(--text-clear);
}



/* ===============================
CONTENEDOR
=============================== */

.container{
max-width:1180px;
margin:auto;
padding:0 24px;
}


/* ===============================
HERO WITH TITLE
=============================== */

.hero-plate{
flex-direction:column;
text-align:center;
padding:30px 40px;
}

.hero-text{
color:var(--text-clear);
max-width:520px;
}

.hero-text h1{
color:var(--text-clear);
margin:10px 0 5px;
}

.hero-text p{
color:var(--text-clear);
font-size:1.1rem;
margin:0;
}

@media (max-width:768px){

.hero-plate{
padding:20px;
}

.hero-text h1{
font-size:1.8rem;
}

.hero-text p{
font-size:1rem;
}

}

/* ===============================
INTRO
=============================== */

.intro{
background:var(--bg);
text-align:center;
padding:40px 0;
}

.intro-text{
max-width:800px;
margin:auto;
}



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

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

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

.grid-auto{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:40px;
}



/* ===============================
CARDS
=============================== */

.card{
background:var(--card);
border-radius:var(--radius);
padding:30px;
box-shadow:var(--shadow);
transition:transform .3s;
color:var(--text-dark);;
}

.card:hover{
transform:translateY(-5px);
}

.card h3{
color:var(--blue-dark);
}



/* ===============================
LISTAS
=============================== */

.content-list{
padding-left:20px;
margin:20px 0;
}

.content-list li{
margin-bottom:10px;
line-height:1.5;
}



/* ===============================
PÍLDORAS (MODALITY FEATURE)
=============================== */

.modality-feature{

margin-top:15px;

padding:14px 18px;

background:rgba(255,255,255,0.35);

border-radius:10px;

font-size:0.95rem;

}

.modality-feature strong{

color:var(--accent);

}

/* ===============================
DIFFERENCE ICON
=============================== */

.difference-icon{

font-size:2.5rem;

margin-bottom:20px;

color:var(--accent);

}

/* ===============================
BOTONES
=============================== */

.btn-primary{

display:inline-block;

background:var(--accent);

color:white;

padding:10px 20px;

border-radius:30px;

text-decoration:none;

font-weight:600;

margin-top:15px;

transition:background .3s ease;

}

.btn-primary:hover{

background:#e66a30;

}

.btn-secondary{

display:inline-block;

background:var(--blue-dark);

color:white;

padding:10px 20px;

border-radius:30px;

text-decoration:none;

font-weight:600;

margin-top:15px;

}



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

.cta{

background:var(--blue-light);

text-align:center;

padding:60px 0;

}



/* ===============================
IMÁGENES
=============================== */

.image-frame{

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.image-frame img{

width:100%;

height:auto;

display:block;

}



/* ===============================
UTILIDADES
=============================== */

.center{
text-align:center;
}

.mt-20{
margin-top:20px;
}

.mt-40{
margin-top:40px;
}

.mb-40{
margin-bottom:40px;
}



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

@media (max-width:980px){

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

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

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

}


/* ================================
RECURSOS - estilos exclusivos
================================ */

/* biblioteca de recursos */

.resources-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:40px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:stretch;
}

.resource-card{
position:relative;
}

/* iconos de valor */

.value-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}

.value-item{
text-align:center;
}

.value-icon{
font-size:36px;
margin-bottom:15px;
}

/* modal suscripción */

.subscribe-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(10,25,45,0.95);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:all .3s ease;
z-index:9999;
}

.subscribe-overlay.active{
opacity:1;
visibility:visible;
}

.subscribe-form-container{
max-width:480px;
width:90%;
background:#fff;
border-radius:18px;
padding:30px;
}

.form-loading{
display:none;
}

.form-success{
display:none;
}

/* loader */

.loader{
width:40px;
height:40px;
border:4px solid #ddd;
border-top:4px solid #4c82a8;
border-radius:50%;
animation:spin 1s linear infinite;
margin:auto;
}

@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

/* =====================================================
TEAM PROFILES SECTION
===================================================== */

.section-dark{
background:var(--blue-dark);
color:var(--text-clear);
}

.section-dark h2{
color:var(--text-clear);
}


/* GRID DE PERFILES */

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


/* TARJETA PERFIL */

.team-member{
background:var(--card);
color:var(--text-dark);
border-radius:18px;
padding:30px;
box-shadow:var(--shadow);
transition:transform .3s ease;
}

.team-member:hover{
transform:translateY(-5px);
}


/* HEADER PERFIL */

.member-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:20px;
}


/* FOTO PERFIL */

.member-image{
width:120px;
height:120px;
min-width:120px;
border-radius:50%;
object-fit:cover;
border:3px solid var(--accent);
display:block;
}


/* INFORMACIÓN PERFIL */

.member-info h3{
margin:0 0 5px;
font-size:1.5rem;
font-weight:700;
color:var(--blue-dark);
}

.member-specialty{
margin:0;
font-size:.95rem;
color:#6b7f8c;
font-weight:600;
}


/* BIO */

.member-bio{
margin-bottom:20px;
line-height:1.6;
font-size:.95rem;
}


/* DETALLES */

.member-details{
margin-top:15px;
}

.detail-item{
display:flex;
gap:10px;
margin-bottom:12px;
align-items:flex-start;
}

.detail-icon{
font-size:1rem;
color:var(--accent);
margin-top:3px;
}

.detail-content{
flex:1;
font-size:.92rem;
}

.detail-content strong{
font-weight:700;
}

.detail-content ul{
padding-left:18px;
margin-top:5px;
}

.detail-content li{
margin-bottom:4px;
}


/* RESPONSIVE */

@media (max-width:980px){

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

.member-header{
flex-direction:column;
align-items:flex-start;
}

.member-image{
width:100px;
height:100px;
}

}

/* =====================================================
SECCIÓN ENFOQUE COLABORATIVO
===================================================== */

.approach-section{
background:var(--bg);
padding:60px 0;
}

.approach-content{
max-width:900px;
margin:0 auto 40px;
text-align:center;
}

.approach-content h2{
margin-bottom:20px;
}

.approach-content p{
max-width:700px;
margin:0 auto;
}


/* GRID DE VALORES */

.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
}


/* TARJETAS */

.value-card{
text-align:center;
padding:10px 20px;
}

.value-icon{
font-size:48px;
margin-bottom:15px;
}

.value-card h3{
font-size:1.4rem;
font-weight:700;
margin-bottom:10px;
color:var(--text-dark);
}

.value-card p{
font-size:0.95rem;
line-height:1.5;
color:#444;
max-width:220px;
margin:0 auto;
}


/* RESPONSIVE */

@media (max-width:900px){

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

}

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

@media (max-width:980px){

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

}

/* ===============================
CONTACTO
=============================== */

.contact-info-section{
background:var(--blue-dark);
color:var(--text-clear);
}

.contact-info-section h2,
.contact-info-section h3{
color:var(--text-clear);
}



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



.contact-details{
padding-right:20px;
}



.contact-method{
display:flex;
align-items:flex-start;
gap:15px;
margin-bottom:25px;
}



.contact-icon{
background:var(--accent);
color:white;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
flex-shrink:0;
}



.map-container{
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
height:400px;
}



.map-container iframe{
width:100%;
height:100%;
border:none;
}



/* ===============================
FORMULARIO
=============================== */

.contact-form-section{
background:var(--bg);
}



.contact-form-container{
background:var(--blue-dark);
border-radius:18px;
padding:40px;
max-width:700px;
margin:0 auto;
box-shadow:var(--shadow);
}



.contact-form h3{
text-align:center;
margin-bottom:25px;
color:white;
}



.form-group{
margin-bottom:20px;
}



.contact-form label{
display:block;
margin-bottom:6px;
color:white;
}



.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:12px;
border-radius:8px;
border:none;
font-size:14px;
}



.contact-form textarea{
min-height:120px;
resize:vertical;
}



.form-actions{
display:flex;
justify-content:space-between;
margin-top:30px;
gap:20px;
}



@media(max-width:980px){

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

.form-actions{
flex-direction:column;
}

}

.price-section{
background:var(--bg);
text-align:center;
}

.price-tag{
font-size:3rem;
color:var(--accent);
font-weight:bold;
margin:20px 0;
}

.price-note{
font-size:1rem;
color:#7a8b94;
margin-top:10px;
}

.value-icon{
font-size:2.5rem;
margin-bottom:20px;
color:var(--accent);
}

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

.grid-4 h3{
color:var(--blue-dark);
}


@media (max-width:980px){

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

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

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

}