/**
 * CuantoConsume — Landings SEO de aparatos
 * ────────────────────────────────────────────────────────────────
 * Mismos tokens de marca que home.css (verde esmeralda, blanco cálido,
 * gris oscuro, ámbar), reescritos aquí bajo ".cc-landing" para que esta
 * plantilla (que también ejecuta wp_head()/wp_footer(), igual que la
 * HOME) mantenga su propia especificidad frente al CSS del tema.
 *
 * Sin emojis como elemento visual: los iconos son trazos SVG inline
 * mínimos (un solo <svg> por icono, sin librería de iconos).
 */

.cc-landing {
	--cc-l-verde: #0b6e4f;
	--cc-l-verde-oscuro: #075c41;
	--cc-l-blanco-calido: #fbf9f5;
	--cc-l-superficie: #f2f6f3;
	--cc-l-gris-oscuro: #1c2622;
	--cc-l-ambar: #e2952f;
	--cc-l-texto: #17241d;
	--cc-l-muted: #55655d;
	--cc-l-borde: #e4e2da;

	--cc-l-font-display: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
	--cc-l-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cc-landing,
.cc-landing *,
.cc-landing *::before,
.cc-landing *::after {
	box-sizing: border-box;
}

body.cc-landing {
	margin: 0;
	background: var(--cc-l-blanco-calido);
	color: var(--cc-l-texto);
	font-family: var(--cc-l-font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.cc-landing a { color: inherit; }

.cc-landing :focus-visible {
	outline: 3px solid var(--cc-l-ambar);
	outline-offset: 2px;
}

.cc-landing__contenedor {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

.cc-landing h1,
.cc-landing h2,
.cc-landing h3 {
	font-family: var(--cc-l-font-display);
	color: var(--cc-l-texto);
	line-height: 1.25;
	margin: 0 0 12px;
}

.cc-landing h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); margin-top: 40px; }
.cc-landing h3 { font-size: 1.05rem; }

.cc-landing section { padding: 20px 0; }

/* ── Cabecera simple (logo + volver) ─────────────────────────── */

.cc-landing-header {
	border-bottom: 1px solid var(--cc-l-borde);
	background: var(--cc-l-blanco-calido);
}

.cc-landing-header__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cc-landing-header__logo {
	font-family: var(--cc-l-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--cc-l-verde-oscuro);
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */

.cc-landing-breadcrumbs {
	font-size: 0.8rem;
	color: var(--cc-l-muted);
	padding: 14px 0 0;
}

.cc-landing-breadcrumbs a {
	text-decoration: none;
	color: var(--cc-l-muted);
}

.cc-landing-breadcrumbs a:hover { color: var(--cc-l-verde-oscuro); }

.cc-landing-breadcrumbs__sep {
	margin: 0 6px;
	color: var(--cc-l-borde);
}

/* ── Hero + respuesta rápida ─────────────────────────────────── */

.cc-landing-hero h1 {
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
}

.cc-landing-hero__respuesta {
	font-size: 1rem;
	color: var(--cc-l-muted);
	max-width: 640px;
	margin: 0 0 20px;
}

.cc-landing-rapida {
	background: var(--cc-l-superficie);
	border-radius: 14px;
	padding: 18px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

.cc-landing-rapida__item {
	text-align: center;
}

.cc-landing-rapida__valor {
	font-family: var(--cc-l-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--cc-l-verde-oscuro);
	font-variant-numeric: tabular-nums;
}

.cc-landing-rapida__etiqueta {
	font-size: 0.72rem;
	color: var(--cc-l-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 2px;
}

/* ── Tabla de escenarios ─────────────────────────────────────── */

.cc-landing-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.cc-landing-tabla th,
.cc-landing-tabla td {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid var(--cc-l-borde);
}

.cc-landing-tabla th {
	color: var(--cc-l-muted);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cc-landing-tabla td { font-variant-numeric: tabular-nums; }

/* ── Contenido editorial ─────────────────────────────────────── */

.cc-landing-editorial ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.cc-landing-editorial li {
	margin-bottom: 6px;
	color: var(--cc-l-muted);
}

.cc-landing-editorial p {
	color: var(--cc-l-muted);
	margin: 0 0 16px;
}

.cc-landing-comparacion {
	background: #eaf4ef;
	border: 1px solid #cfe6da;
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--cc-l-verde-oscuro);
	font-size: 0.92rem;
}

/* ── FAQ ──────────────────────────────────────────────────────── */

.cc-landing-faq__item {
	border-bottom: 1px solid var(--cc-l-borde);
	padding: 14px 0;
}

.cc-landing-faq__item summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.98rem;
	list-style: none;
}

.cc-landing-faq__item summary::-webkit-details-marker { display: none; }

.cc-landing-faq__item summary::before {
	content: "+";
	display: inline-block;
	width: 16px;
	color: var(--cc-l-verde);
	font-weight: 700;
}

.cc-landing-faq__item[open] summary::before { content: "–"; }

.cc-landing-faq__item p {
	margin: 8px 0 0 16px;
	color: var(--cc-l-muted);
	font-size: 0.9rem;
}

/* ── Relacionados ─────────────────────────────────────────────── */

.cc-landing-relacionados__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-landing-relacionados__tarjeta {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid var(--cc-l-borde);
	border-radius: 10px;
	padding: 12px 14px;
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--cc-l-texto);
	transition: border-color 0.15s ease;
}

.cc-landing-relacionados__tarjeta:hover { border-color: var(--cc-l-verde); }

.cc-landing-relacionados__icono {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--cc-l-verde);
}

/* ── CTA final ────────────────────────────────────────────────── */

.cc-landing-cta {
	background: var(--cc-l-verde);
	border-radius: 14px;
	padding: 24px 20px;
	text-align: center;
	color: #ffffff;
}

.cc-landing-cta h2 {
	color: #ffffff;
	margin-top: 0;
}

.cc-landing-cta__boton {
	display: inline-block;
	background: #ffffff;
	color: var(--cc-l-verde-oscuro) !important;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 8px;
	margin-top: 6px;
}

/* ── Espacios de anuncios (vacíos, sin CLS) ──────────────────── */

.cc-landing-ads-slot {
	max-width: 900px;
	margin: 0 auto;
}

/* ── Footer ──────────────────────────────────────────────────── */

.cc-landing-footer {
	background: var(--cc-l-gris-oscuro);
	color: #d8ded9;
	padding: 26px 0;
	margin-top: 30px;
}

.cc-landing-footer__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.82rem;
}

.cc-landing-footer__inner a {
	color: #d8ded9;
	text-decoration: none;
	margin-left: 14px;
}

.cc-landing-footer__inner a:hover { color: #ffffff; }

/* ── Archivo / categoría (listados) ──────────────────────────── */

.cc-landing-listado__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.cc-landing-listado__categoria-titulo {
	margin-top: 36px;
}