/*	BLOG CLÍNICA SANCHO — hereda los estilos de la web principal (clinicasancho.net)
	==================================================
	Copia del style.css de la web principal + componentes .blog-* al final.
	No modificar w3.css original.
*/

/* === Variables corporatives === */
:root {
	--color-primary:      #1976D2;
	--color-primary-dark: #0D2137;
	--color-text:         #333333;
	--color-bg-light:     #F5F8FA;
	--color-white:        #FFFFFF;
	--color-accent:       #F59E0B;
}

/* === W3-THEME ===
   Usa siempre los nombres de clase originales, solo cambia los valores de color.
*/
.w3-theme-l5,.w3-hover-theme-l5:hover{color:#0D2137!important;background-color:#EBF5FB!important}
.w3-theme-l4,.w3-hover-theme-l4:hover{color:#0D2137!important;background-color:#BBDEFB!important}
.w3-theme-l3,.w3-hover-theme-l3:hover{color:#0D2137!important;background-color:#90CAF9!important}
.w3-theme-l2,.w3-hover-theme-l2:hover{color:#ffffff!important;background-color:#0D2137!important}
.w3-theme-l1,.w3-hover-theme-l1:hover{color:#0D2137!important;background-color:#EBF5FB!important}
.w3-theme,.w3-hover-theme:hover{color:#0D2137!important;background-color:#F5F8FA!important}
.w3-theme-d1,.w3-hover-theme-d1:hover{color:#ffffff!important;background-color:#1565C0!important}
.w3-theme-d2{color:#1976D2!important}
.w3-theme-d3,.w3-hover-theme-d3:hover{color:#ffffff!important;background-color:rgba(13,33,55,0.82)!important}
.w3-theme-d4{color:#0D2137!important}
.w3-theme-d5,.w3-hover-theme-d5:hover{color:#ffffff!important;background-color:#F59E0B!important}
.w3-text-theme,.w3-hover-text-theme:hover{color:#333333!important}
.w3-border-theme,.w3-hover-border-theme:hover{border-color:#1976D2!important}

/* === Titulars i textos === */
.titular1{font-size:30px;font-weight:700;color:#0D2137;margin:16px 0;line-height:1.25}
.titular2{font-size:22px;font-weight:700;color:#1976D2;margin:12px 0}
.titular3{font-size:26px;font-weight:700;color:#0D2137;margin:12px 0}
.titular4{font-size:18px;font-weight:700;color:#0D2137}
.subtitular1{font-size:18px;font-weight:400;color:#555;margin-bottom:8px}
.subtitular3{font-size:16px;font-weight:400;color:#666;margin-bottom:8px}

/* === Menú === */
.menufront{font-weight:600;letter-spacing:0.3px}

/* === Social icons === */
.logofacebook{color:#1877F2}
.logotwitter{color:#1DA1F2}
.logoinsta{color:#E1306C}

/* === Separadors === */
.section-spacer{height:60px}
.section-spacer-sm{height:20px}

/* === Contenidors generals === */
.ow-section{padding:70px 20px}
.ow-section-light{background:var(--color-bg-light)}
.ow-container{max-width:1180px;margin:0 auto}

/* === Titulars utils === */
.ow-section-title{color:var(--color-primary-dark);font-weight:700;line-height:1.25}
.ow-section-intro{max-width:860px;margin:0 auto 35px auto;font-size:17px;color:var(--color-text)}

/* === Grid modern === */
.ow-grid{display:grid;gap:24px}
.ow-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ow-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ow-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* === Targetes === */
.ow-card{
	background:var(--color-white);
	padding:28px;border-radius:12px;
	box-shadow:0 6px 18px rgba(0,0,0,0.06);
	transition:all 0.2s ease-in-out;
	display:flex;flex-direction:column;height:100%;
}
.ow-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.10)}
.ow-card-icon{font-size:36px;line-height:1;margin-bottom:14px;color:var(--color-primary)}
.ow-card h3{margin-top:8px;margin-bottom:12px;color:var(--color-primary-dark);font-weight:700}
.ow-card p{flex-grow:1;margin-bottom:20px;color:var(--color-text)}
.ow-card-link{margin-top:auto;color:var(--color-primary);font-weight:700;text-decoration:none;font-size:15px}
.ow-card-link:hover{text-decoration:underline}

/* === Botons === */
.ow-btn-primary{
	background:var(--color-primary);color:#ffffff;
	padding:14px 24px;border-radius:6px;text-decoration:none;
	display:inline-block;font-weight:600;margin:6px 8px 6px 0;
}
.ow-btn-primary:hover{background:var(--color-primary-dark);color:#ffffff}
.ow-btn-secondary{
	border:2px solid var(--color-primary);color:var(--color-primary);
	padding:12px 22px;border-radius:6px;text-decoration:none;
	display:inline-block;font-weight:600;margin:6px 8px 6px 0;background:transparent;
}
.ow-btn-secondary:hover{background:var(--color-primary);color:#ffffff}

/* === Caixes de confiança === */
.ow-trust-item{
	background:#ffffff;border-left:4px solid var(--color-primary);
	padding:16px;margin-bottom:12px;
	box-shadow:0 4px 12px rgba(0,0,0,0.05);
	min-height:56px;display:flex;align-items:center;font-weight:600;
}

/* === FAQ === */
.ow-faq-box{border-bottom:1px solid #ddd;padding:22px 0}
.ow-faq-box h3{margin-bottom:8px;font-size:20px;font-weight:700;color:var(--color-primary-dark)}

/* === CTA final === */
.ow-cta-final{background:var(--color-primary-dark);color:#ffffff;padding:70px 20px;text-align:center}
.ow-cta-final h2,.ow-cta-final p{color:#ffffff}

/* === Barra mòbil fixa === */
.ow-mobile-fixed-bar{display:none}

/* ============================================================
   COMPONENTS BLOG
   ============================================================ */

/* Tarjeta de artículo en el listado */
.blog-card{
	background:var(--color-white);border-radius:12px;overflow:hidden;
	box-shadow:0 6px 18px rgba(0,0,0,0.06);
	display:flex;flex-direction:column;height:100%;
	transition:all 0.2s ease-in-out;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.10)}
.blog-card-img{width:100%;height:230px;object-fit:cover;display:block}
.blog-card-body{padding:24px 26px 26px 26px;display:flex;flex-direction:column;flex-grow:1}
.blog-card-body h2{font-size:21px;font-weight:700;color:var(--color-primary-dark);margin:10px 0 12px 0;line-height:1.3}
.blog-card-body p{flex-grow:1;color:var(--color-text);font-size:15px;line-height:1.7;margin-bottom:18px}

/* Meta de artículo (fecha · autor) */
.blog-meta{font-size:14px;color:#667;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blog-meta i{color:var(--color-primary)}

/* Cuerpo de artículo */
.blog-article{max-width:880px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--color-text)}
.blog-article h2{font-size:26px;font-weight:700;color:var(--color-primary-dark);margin:44px 0 16px 0;line-height:1.3}
.blog-article h3{font-size:20px;font-weight:700;color:var(--color-primary);margin:30px 0 10px 0}
.blog-article p{margin:0 0 18px 0}
.blog-article ul{margin:0 0 20px 0;padding-left:22px}
.blog-article ul li{margin-bottom:10px}
.blog-article a{color:var(--color-primary);font-weight:600}
.blog-article a:hover{text-decoration:underline}

/* Imagen destacada del artículo */
.blog-hero-img{width:100%;border-radius:12px;display:block;margin:24px 0 8px 0;max-height:420px;object-fit:cover}

/* Caja destacada dentro del artículo */
.blog-note{
	background:var(--color-bg-light);border-left:4px solid var(--color-primary);
	padding:18px 20px;margin:26px 0;border-radius:0 8px 8px 0;font-size:16px;
}

/* ============================================================
   Media queries — ORDRE CORRECTE: max-width decreixent
   ============================================================ */

/* ≤992px : tablets */
@media (max-width:992px){
	html,body{font-size:14px;line-height:1.2}
	h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}h4{font-size:16px}
	.w3-large{font-size:16px!important}.w3-xlarge{font-size:20px!important}
	.w3-xxlarge{font-size:28px!important}.w3-xxxlarge{font-size:36px!important}
	.w3-jumbo{font-size:52px!important}

	.ow-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ow-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ≤768px : mòbils */
@media (max-width:768px){
	html,body{font-size:14px;line-height:1.2}
	h1{font-size:20px}h2{font-size:18px}h3{font-size:16px}h4{font-size:14px}
	.w3-large{font-size:16px!important}.w3-xlarge{font-size:18px!important}
	.w3-xxlarge{font-size:20px!important}.w3-xxxlarge{font-size:22px!important}
	.w3-jumbo{font-size:36px!important}

	.ow-section{padding:50px 20px}
	.titular1{font-size:22px}.titular3{font-size:20px}

	.ow-grid-2,.ow-grid-3,.ow-grid-4{grid-template-columns:1fr}
	.ow-card{min-height:auto}

	.ow-cta-final{padding:50px 20px}

	.blog-article{font-size:16px}
	.blog-article h2{font-size:21px;margin-top:34px}
	.blog-article h3{font-size:18px}
	.blog-card-img{height:190px}

	.ow-mobile-fixed-bar{
		display:flex;position:fixed;bottom:0;left:0;right:0;
		z-index:9999;background:#ffffff;
		box-shadow:0 -4px 12px rgba(0,0,0,0.15);
	}
	.ow-mobile-fixed-bar a{
		flex:1;text-align:center;padding:12px 6px;font-size:14px;
		text-decoration:none;font-weight:bold;color:var(--color-primary-dark);
		border-right:1px solid #ddd;
	}
	body{padding-bottom:58px}
}