/* =====================================================
   CleanCheaper - main.css
   Estrategia: MOBILE FIRST.
   Se escribe para pantallas pequeñas primero, y se usan
   @media (min-width: ...) para ir agregando estilos a
   medida que la pantalla crece. Así garantizamos que
   funcione en CUALQUIER tamaño: celular, tablet, laptop,
   monitor grande, etc.
   ===================================================== */

:root {
	--cc-blue: #1565c0;
	--cc-blue-dark: #0d3f78;
	--cc-blue-light: #e8f1fb;
	--cc-white: #ffffff;
	--cc-gray: #5a6472;
	--cc-gray-light: #f4f6f8;
	--cc-success: #2e7d32;
	--cc-danger: #c62828;
	--cc-warning: #f9a825;

	--cc-radius: 10px;
	--cc-shadow: 0 4px 14px rgba(0,0,0,0.08);
	--cc-max-width: 1180px;
	--cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--cc-font);
	color: #222;
	line-height: 1.6;
	font-size: 16px;
	background: var(--cc-white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cc-blue); text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--cc-blue-dark); }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }

.cc-container {
	width: 100%;
	max-width: var(--cc-max-width);
	margin: 0 auto;
	padding: 0 16px;
}

/* =================== BOTONES =================== */
.cc-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--cc-radius);
	font-weight: 600;
	cursor: pointer;
	border: none;
	font-size: 1rem;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.cc-btn:active { transform: scale(0.97); }
.cc-btn-primary { background: var(--cc-blue); color: var(--cc-white); }
.cc-btn-primary:hover { background: var(--cc-blue-dark); }
.cc-btn-light { background: var(--cc-white); color: var(--cc-blue-dark); }
.cc-btn-lg { padding: 16px 30px; font-size: 1.1rem; }
.cc-btn:disabled { opacity: .4; cursor: not-allowed; }

/* =================== HEADER / NAV (mobile-first) =================== */
.cc-header {
	background: var(--cc-white);
	box-shadow: var(--cc-shadow);
	position: sticky;
	top: 0;
	z-index: 100;
}
.cc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
}
.cc-logo-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.cc-logo-img img {
	max-height: 42px;
	width: auto;
	display: block;
}
.cc-logo-texto {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--cc-blue-dark);
	white-space: nowrap;
}
@media (min-width: 900px) {
	.cc-logo-img img { max-height: 54px; }
	.cc-logo-texto { font-size: 1.4rem; }
}

.cc-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.cc-menu-toggle span {
	display: block;
	height: 3px;
	background: var(--cc-blue-dark);
	border-radius: 2px;
}

.cc-nav {
	position: fixed;
	top: 0;
	right: -100%;
	width: min(80%, 320px);
	height: 100vh;
	background: var(--cc-white);
	box-shadow: -6px 0 20px rgba(0,0,0,0.15);
	padding: 80px 24px 24px;
	transition: right .3s ease;
	z-index: 99;
}
.cc-nav.is-open { right: 0; }

.cc-nav-list { list-style: none; margin: 0; padding: 0; }
.cc-nav-list li { margin-bottom: 18px; }
.cc-nav-list a { font-weight: 600; font-size: 1.1rem; color: var(--cc-blue-dark); }
.cc-nav-cta { margin-top: 12px; width: 100%; text-align: center; }

/* Desktop: el menú deja de ser un cajón lateral y se vuelve horizontal */
@media (min-width: 900px) {
	.cc-menu-toggle { display: none; }
	.cc-nav {
		position: static;
		width: auto;
		height: auto;
		box-shadow: none;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 28px;
	}
	.cc-nav-list { display: flex; gap: 28px; }
	.cc-nav-list li { margin: 0; }
	.cc-nav-cta { width: auto; margin-top: 0; }
}

/* =================== HERO =================== */
.cc-hero {
	background: linear-gradient(135deg, var(--cc-blue-light), var(--cc-white));
	padding: 56px 0;
	text-align: center;
}
.cc-hero-text p { font-size: 1.1rem; color: var(--cc-gray); margin-bottom: 24px; }

@media (min-width: 900px) {
	.cc-hero { padding: 100px 0; }
	.cc-hero-text { max-width: 700px; margin: 0 auto; }
}

/* =================== SECCIONES / GRID responsive =================== */
.cc-section { padding: 48px 0; }
.cc-section-title { text-align: center; margin-bottom: 32px; }

.cc-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr; /* mobile: 1 columna */
}
@media (min-width: 640px) {
	.cc-grid-3 { grid-template-columns: repeat(2, 1fr); } /* tablet: 2 columnas */
}
@media (min-width: 1000px) {
	.cc-grid-3 { grid-template-columns: repeat(3, 1fr); } /* desktop: 3 columnas */
}

.cc-card {
	background: var(--cc-gray-light);
	border-radius: var(--cc-radius);
	padding: 24px;
	box-shadow: var(--cc-shadow);
}

/* =================== CTA banner =================== */
.cc-cta-banner {
	background: var(--cc-blue);
	color: var(--cc-white);
	text-align: center;
	padding: 48px 16px;
}
.cc-cta-banner h2 { color: var(--cc-white); }

/* =================== FOOTER =================== */
.cc-footer { background: var(--cc-blue-dark); color: #d7e4f5; padding: 40px 0 0; }
.cc-footer h3, .cc-footer h4 { color: var(--cc-white); }
.cc-footer a { color: #d7e4f5; }
.cc-footer-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	padding-bottom: 28px;
}
@media (min-width: 700px) {
	.cc-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.cc-footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.cc-footer-menu { list-style: none; margin: 0; padding: 0; }
.cc-footer-menu li { margin-bottom: 8px; }
.cc-footer-menu a { color: #d7e4f5; }
.cc-footer-menu a:hover { color: #fff; text-decoration: underline; }
.cc-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding: 16px;
	text-align: center;
	font-size: .85rem;
}

/* =================== Contenido genérico de páginas =================== */
.cc-content { padding: 40px 0; }
.cc-page-title { margin-bottom: 8px; }
.cc-page-subtitle { color: var(--cc-gray); margin-bottom: 28px; }

/* Utilidad: nunca permitir overflow horizontal en celulares pequeños */
img, table, .cc-grid, .cc-container { max-width: 100%; }