/*	COMPONENTS OW — EXTENSIÓ REUTILITZABLE SOBRE W3.CSS
	==================================================
	No modificar w3.css original.
	Aquest bloc crea una capa pròpia reutilitzable per a webs corporatives.
*/

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

/* === W3-THEME — Àgora School (Blue Academic) ===
   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}

/* === Slideshow text === */
.slideshow-titular{color:#ffffff;font-weight:700;text-shadow:2px 2px 6px rgba(0,0,0,0.7)}
.slideshow-subtitular{color:#f0f0f0;text-shadow:1px 1px 4px rgba(0,0,0,0.6)}

/* === 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}

/* === Portadaguay (cards imatge fons per a la home) === */
.portadaguay1,.portadaguay2,.portadaguay3{
	min-height:320px;
	position:relative;
	background:var(--color-primary-dark) center/cover no-repeat;
	border-radius:6px;
	overflow:hidden;
}
.portadaguay1{background-image:url('../img/slideshow/primera.webp')}
.portadaguay2{background-image:url('../img/slideshow/segunda.webp')}
.portadaguay3{background-image:url('../img/slideshow/tercera.webp')}
.portadaguay-text{
	position:absolute;bottom:0;left:0;right:0;
	background:rgba(13,33,55,0.78);
	padding:18px 16px;
	color:#fff;
	text-align:center;
}
.portadaguay-text h2,.portadaguay-text p{color:#fff}
.portadaguay-text button{
	background:var(--color-primary);color:#fff;
	padding:8px 18px;border:none;cursor:pointer;
	font-weight:bold;border-radius:4px;margin-top:8px;
}
.portadaguay-text button:hover{background:var(--color-primary-dark)}

/* === 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}

/* === Hero === */
.ow-hero{background:linear-gradient(90deg,#ffffff 0%,var(--color-bg-light) 100%);padding:80px 20px}
.ow-hero-subtitle{font-size:20px;margin:25px 0;color:var(--color-text)}

/* === 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;
}

/* === Blocs de procés === */
.ow-process-step{
	background:#ffffff;padding:26px;border-radius:12px;
	min-height:200px;border-top:5px solid var(--color-primary);
}
.ow-step-number{
	background:var(--color-primary);color:#ffffff;
	width:42px;height:42px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	font-weight:bold;margin-bottom:16px;
}

/* === 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}

/* === Treatment cards (compatibilitat) === */
.treatments-grid{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;margin-top:35px;
}
.treatment-card{
	background:#ffffff;padding:28px;min-height:330px;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%;
}
.treatment-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.10)}
.treatment-icon{font-size:36px;line-height:1;margin-bottom:14px;color:var(--color-primary)}
.treatment-card h3{margin-top:8px;margin-bottom:12px;color:var(--color-primary-dark);font-weight:700}
.treatment-card p{flex-grow:1;margin-bottom:20px}
.small-link{margin-top:auto;color:var(--color-primary);font-weight:700;text-decoration:none;font-size:15px}
.small-link:hover{text-decoration:underline}

/* ============================================================
   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,.treatments-grid{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}
	.ow-hero{padding:50px 20px}
	.titular1{font-size:22px}.titular3{font-size:20px}

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

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

	.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}
}
}