/* =============================================================================
   Coste Coche — hoja de estilos principal

   Criterios de diseño:
   - Mobile-first. Todo escala hacia arriba, nunca al revés.
   - Aspecto de publicación especializada: serif para titulares, sans para datos.
   - Cifras siempre con numeración tabular, para que las tablas se lean en columna.
   - Sin sombras difusas ni degradados: la estética es sobria, de informe.
   - Sin fuentes externas: se usa la pila del sistema. Cero peticiones, cero CLS.
   ============================================================================= */

/* ------------------------------- 1. Tokens ------------------------------- */

:root{
	--tinta:#1a1a19;
	--tinta-suave:#55534d;
	--tinta-tenue:#7a776f;
	--papel:#ffffff;
	--papel-alt:#faf9f6;
	--linea:#e4e1da;
	--linea-fuerte:#cfccc3;

	--acento:#0b4f6c;          /* azul profundo: sobrio, financiero */
	--acento-claro:#e8f0f4;
	--dinero:#0b6b4f;          /* verde para datos oficiales */
	--aviso:#8a6100;           /* ámbar para datos de mercado */
	--alerta:#a6432b;          /* rojo tierra para estimaciones */

	--serif:Georgia,'Iowan Old Style','Times New Roman',serif;
	--sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

	--ancho:72rem;
	--ancho-texto:42rem;
	--radio:.375rem;
}

/* ------------------------------- 2. Base ------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
	margin:0;
	font-family:var(--sans);
	font-size:1.0625rem;
	line-height:1.65;
	color:var(--tinta);
	background:var(--papel);
	text-rendering:optimizeLegibility;
}

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

a{color:var(--acento);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

h1,h2,h3,h4{
	font-family:var(--serif);
	line-height:1.2;
	letter-spacing:-.01em;
	margin:0 0 .5em;
	text-wrap:balance;
}
h1{font-size:clamp(1.75rem,5.5vw,2.6rem)}
h2{font-size:clamp(1.35rem,4vw,1.8rem);margin-top:2.25em}
h3{font-size:clamp(1.15rem,3vw,1.35rem);margin-top:1.75em}

p,ul,ol{margin:0 0 1.25em}
li{margin-bottom:.4em}

.screen-reader-text{
	position:absolute!important;
	width:1px;height:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}

.cct-saltar{
	position:absolute;left:-9999px;
	background:var(--acento);color:#fff;
	padding:.75rem 1.25rem;z-index:100;
}
.cct-saltar:focus{left:.5rem;top:.5rem}

/* ------------------------------ 3. Layout ------------------------------ */

.cct-contenedor{
	width:100%;
	max-width:var(--ancho);
	margin-inline:auto;
	padding-inline:1.25rem;
}

.cct-principal{display:block;min-height:50vh}

.cct-articulo{
	max-width:var(--ancho-texto);
	margin-inline:auto;
	padding:1.5rem 1.25rem 3rem;
}

/* Con barra lateral en pantallas anchas. El texto nunca se ensancha de más. */
.cct-con-lateral{
	max-width:var(--ancho);
	margin-inline:auto;
	padding:1.5rem 1.25rem 3rem;
}
@media(min-width:64rem){
	.cct-con-lateral{
		display:grid;
		grid-template-columns:minmax(0,1fr) 19rem;
		gap:3rem;
		align-items:start;
	}
	.cct-con-lateral .cct-articulo{padding:0;max-width:var(--ancho-texto)}
	.cct-lateral{position:sticky;top:1.5rem}
}
.cct-lateral{display:none}
@media(min-width:64rem){.cct-lateral{display:block}}

.cct-rejilla{display:grid;gap:1.5rem}
@media(min-width:40rem){
	.cct-rejilla--2{grid-template-columns:repeat(2,1fr)}
	.cct-rejilla--3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:64rem){
	.cct-rejilla--3{grid-template-columns:repeat(3,1fr)}
}

/* ----------------------------- 4. Cabecera ----------------------------- */

.cct-cabecera{
	border-bottom:1px solid var(--linea);
	background:var(--papel);
	position:sticky;top:0;z-index:20;
}

.cct-cabecera__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	min-height:3.75rem;
}

.cct-logo{
	font-family:var(--serif);
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:-.02em;
	margin:0;
}
.cct-logo a{color:var(--tinta);text-decoration:none}

.cct-menu-boton{
	display:flex;align-items:center;justify-content:center;
	width:2.75rem;height:2.75rem;
	background:none;border:1px solid var(--linea-fuerte);
	border-radius:var(--radio);cursor:pointer;
}
.cct-menu-boton__barras,
.cct-menu-boton__barras::before,
.cct-menu-boton__barras::after{
	display:block;width:1.1rem;height:2px;background:var(--tinta);position:relative;
}
.cct-menu-boton__barras::before{content:'';position:absolute;top:-6px}
.cct-menu-boton__barras::after{content:'';position:absolute;top:6px}

.cct-nav{display:none}
.cct-menu-abierto .cct-nav{
	display:block;
	position:absolute;left:0;right:0;top:100%;
	background:var(--papel);
	border-bottom:1px solid var(--linea);
	padding:.5rem 1.25rem 1rem;
}

.cct-nav__lista{list-style:none;margin:0;padding:0}
.cct-nav__lista a{
	display:block;
	padding:.7rem 0;
	font-size:1rem;font-weight:550;
	color:var(--tinta);text-decoration:none;
	border-bottom:1px solid var(--linea);
}

@media(min-width:64rem){
	.cct-menu-boton{display:none}
	.cct-nav{display:block}
	.cct-nav__lista{display:flex;gap:1.5rem;align-items:center}
	.cct-nav__lista a{padding:.25rem 0;border:0;font-size:.9375rem}
	.cct-nav__lista a:hover{color:var(--acento)}
	/* La calculadora se destaca: es el activo de la web. */
	.cct-nav__lista .cct-destacado a{
		background:var(--acento);color:#fff;
		padding:.5rem .9rem;border-radius:var(--radio);
	}
}

/* ------------------------------ 5. Migas ------------------------------ */

.cct-migas{font-size:.8125rem;color:var(--tinta-tenue);margin-bottom:1.25rem}
.cct-migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cct-migas li:not(:last-child)::after{content:'›';margin-left:.4rem;color:var(--linea-fuerte)}
.cct-migas a{color:var(--tinta-tenue)}

/* ------------------------------ 6. Firma ------------------------------ */

.cct-firma{
	border-top:1px solid var(--linea);
	border-bottom:1px solid var(--linea);
	padding:1rem 0;
	margin:1.5rem 0 2rem;
}
.cct-firma__autor{display:flex;align-items:center;gap:.75rem}
.cct-firma__avatar{border-radius:50%;flex-shrink:0}
.cct-firma__nombre{display:block;font-size:.9375rem;font-weight:600}
.cct-firma__nombre a{color:var(--tinta)}
.cct-firma__fechas{display:block;font-size:.8125rem;color:var(--tinta-tenue)}
.cct-firma__actualizado{color:var(--dinero);font-weight:600}
.cct-firma__nota{font-size:.8125rem;color:var(--tinta-tenue);margin:.6rem 0 0}

/* --------------------- 7. Respuesta directa (clave SEO) --------------------- */

/* Primer bloque del artículo: la cifra que el lector vino a buscar.
   Existe para responder en 5 segundos y para ser citable por buscadores. */
.cct-respuesta{
	background:var(--acento-claro);
	border-left:3px solid var(--acento);
	border-radius:0 var(--radio) var(--radio) 0;
	padding:1.1rem 1.25rem;
	margin:0 0 2rem;
	font-size:1.09375rem;
}
.cct-respuesta p:last-child{margin-bottom:0}
.cct-respuesta strong{font-variant-numeric:tabular-nums}

/* ------------------------------ 8. Tablas ------------------------------ */

.cct-articulo table,.cc-tabla-coste table{
	width:100%;
	border-collapse:collapse;
	font-size:.9375rem;
	margin:1.5rem 0;
}
.cct-articulo th,.cct-articulo td,
.cc-tabla-coste th,.cc-tabla-coste td{
	text-align:left;
	padding:.6rem .5rem;
	border-bottom:1px solid var(--linea);
	vertical-align:top;
}
.cct-articulo thead th,.cc-tabla-coste thead th{
	font-family:var(--sans);
	font-size:.75rem;
	font-weight:650;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--tinta-tenue);
	border-bottom:2px solid var(--linea-fuerte);
}
.cct-articulo td,.cc-tabla-coste td{font-variant-numeric:tabular-nums}

/* En móvil las tablas anchas se desplazan en lugar de romper el diseño. */
.cct-tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.cct-tabla-scroll table{margin:0;min-width:34rem}

.cc-tabla-coste{margin:2rem 0;padding:0}
.cc-tabla-coste__titulo{
	font-family:var(--serif);
	font-size:1.15rem;font-weight:700;
	margin-bottom:.25rem;
}
.cc-tabla-coste tfoot .cc-total th,
.cc-tabla-coste tfoot .cc-total td{
	border-top:2px solid var(--linea-fuerte);
	border-bottom:0;
	font-weight:700;
	font-size:1rem;
}
.cc-tabla-coste tfoot .cc-total--secundario th,
.cc-tabla-coste tfoot .cc-total--secundario td{
	border-top:0;font-weight:500;font-size:.875rem;color:var(--tinta-suave);
}
.cc-fila-depreciacion th,.cc-fila-depreciacion td{font-style:italic;color:var(--tinta-suave)}

.cc-barra{
	display:inline-block;
	width:var(--peso,0%);max-width:3.5rem;height:.4rem;
	margin-right:.4rem;vertical-align:middle;
	background:var(--acento);opacity:.35;border-radius:2px;
}

/* --------------------- 9. Datos y sellos de confianza --------------------- */

/* Una estimación jamás debe parecer visualmente un dato oficial. */
.cc-dato{
	font-variant-numeric:tabular-nums;
	font-weight:600;
	border-bottom:1px dotted currentColor;
	cursor:help;
}
.cc-dato--oficial{color:var(--dinero)}
.cc-dato--mercado{color:var(--aviso)}
.cc-dato--estimacion{color:var(--alerta);font-style:italic}
.cc-dato--caducado{border-bottom-style:dashed;opacity:.85}

.cc-sello,.cct-sello{
	display:inline-block;
	font-size:.6875rem;font-weight:650;
	text-transform:uppercase;letter-spacing:.04em;
	padding:.15rem .45rem;border-radius:2px;
	vertical-align:middle;
}
.cct-sello--oficial{background:#e6f2ed;color:var(--dinero)}
.cct-sello--mercado{background:#fbf1de;color:var(--aviso)}
.cct-sello--estimacion{background:#f9eae6;color:var(--alerta)}

.cct-aviso{
	background:var(--papel-alt);
	border:1px solid var(--linea);
	border-left:3px solid var(--aviso);
	border-radius:0 var(--radio) var(--radio) 0;
	padding:.9rem 1.1rem;
	font-size:.9375rem;
	color:var(--tinta-suave);
}

/* ------------------------------ 10. Fuentes ------------------------------ */

.cc-fuentes{
	background:var(--papel-alt);
	border:1px solid var(--linea);
	border-radius:var(--radio);
	padding:1.25rem;
	margin:2.5rem 0 0;
	font-size:.875rem;
}
.cc-fuentes h2{font-size:1rem;margin:0 0 .75rem;font-family:var(--sans);font-weight:650}
.cc-fuentes ul{list-style:none;margin:0;padding:0}
.cc-fuentes li{padding:.4rem 0;border-bottom:1px solid var(--linea)}
.cc-fuentes li:last-child{border-bottom:0}
.cc-fuentes__fecha{color:var(--tinta-tenue);font-size:.8125rem}

/* ----------------------------- 11. Tarjetas ----------------------------- */

.cct-tarjeta{
	border:1px solid var(--linea);
	border-radius:var(--radio);
	overflow:hidden;
	background:var(--papel);
	display:flex;flex-direction:column;
}
.cct-tarjeta__imagen{display:block;aspect-ratio:16/9;background:var(--papel-alt)}
.cct-tarjeta__imagen img{width:100%;height:100%;object-fit:cover}
.cct-tarjeta__cuerpo{padding:1rem 1.1rem 1.1rem;flex:1}
.cct-tarjeta__titulo{font-size:1.0625rem;margin:0 0 .4rem;line-height:1.3}
.cct-tarjeta__titulo a{color:var(--tinta);text-decoration:none}
.cct-tarjeta__titulo a:hover{color:var(--acento);text-decoration:underline}
.cct-tarjeta__extracto{font-size:.9375rem;color:var(--tinta-suave);margin:0 0 .6rem}
.cct-tarjeta__meta{font-size:.75rem;color:var(--tinta-tenue);margin:0}

/* ------------------------------ 12. Hub ------------------------------ */

.cct-hub__cabecera{
	background:var(--papel-alt);
	border-bottom:1px solid var(--linea);
	padding:2.5rem 0;
	margin-bottom:2.5rem;
}
.cct-hub__intro{max-width:var(--ancho-texto);font-size:1.09375rem;color:var(--tinta-suave)}

.cct-relacionados{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linea)}
.cct-relacionados h2{margin-top:0;font-size:1.25rem}

/* ------------------------------ 13. Ficha ------------------------------ */

.cct-ficha__resumen{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1px;
	background:var(--linea);
	border:1px solid var(--linea);
	border-radius:var(--radio);
	overflow:hidden;
	margin:1.5rem 0 2rem;
}
@media(min-width:40rem){.cct-ficha__resumen{grid-template-columns:repeat(4,1fr)}}

.cct-ficha__celda{background:var(--papel);padding:1rem .9rem;text-align:center}
.cct-ficha__cifra{
	display:block;
	font-size:clamp(1.15rem,4vw,1.5rem);
	font-weight:700;
	font-variant-numeric:tabular-nums;
	color:var(--acento);
	line-height:1.15;
}
.cct-ficha__etiqueta{display:block;font-size:.75rem;color:var(--tinta-tenue);margin-top:.25rem}

/* ---------------------------- 14. Publicidad ---------------------------- */

/* La altura mínima la inyecta el plugin por posición: aquí solo la presentación.
   El contenedor reserva su espacio antes de cargar nada, por eso no hay CLS. */
.cc-ad{margin:2.5rem 0;text-align:center;contain:layout}
.cc-ad__etiqueta{
	display:block;
	font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
	color:#a8a49c;margin-bottom:.35rem;
}
.cc-ad__slot{display:block;overflow:hidden}

/* -------------------------------- 15. Pie -------------------------------- */

.cct-pie{
	background:var(--papel-alt);
	border-top:1px solid var(--linea);
	margin-top:4rem;
	padding:2.5rem 0 2rem;
	font-size:.9375rem;
}
.cct-pie__superior{display:grid;gap:2rem;margin-bottom:2rem}
@media(min-width:48rem){.cct-pie__superior{grid-template-columns:1fr 2fr}}

.cct-logo--pie{font-size:1.1rem;margin:0 0 .35rem}
.cct-pie__descripcion{color:var(--tinta-suave);margin:0;font-size:.875rem}

.cct-pie__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}
.cct-pie__lista a{color:var(--tinta-suave);text-decoration:none}
.cct-pie__lista a:hover{color:var(--acento);text-decoration:underline}

.cct-pie__confianza{
	border-top:1px solid var(--linea);
	border-bottom:1px solid var(--linea);
	padding:1.25rem 0;
	font-size:.875rem;
	color:var(--tinta-suave);
	max-width:48rem;
}
.cct-pie__confianza p{margin:0}

.cct-pie__legal{
	display:flex;flex-wrap:wrap;
	justify-content:space-between;align-items:center;
	gap:1rem;padding-top:1.5rem;
	font-size:.8125rem;
}
.cct-pie__lista--legal{font-size:.8125rem}
.cct-pie__copy{margin:0;color:var(--tinta-tenue)}

/* ----------------------------- 16. Impresión ----------------------------- */

@media print{
	.cct-cabecera,.cct-pie,.cc-ad,.cct-lateral,.cct-relacionados{display:none}
	body{font-size:11pt;color:#000}
	.cct-articulo{max-width:none}
	a::after{content:' (' attr(href) ')';font-size:9pt;color:#555}
}

/* --------------------------- 17. Portada --------------------------- */

.cct-portada__hero{
	background:var(--papel-alt);
	border-bottom:1px solid var(--linea);
	padding:2.5rem 0 2rem;
	margin-bottom:2.5rem;
}
.cct-portada__hero h1{margin-bottom:.35rem}

.cct-portada__datos{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1px;
	background:var(--linea);
	border:1px solid var(--linea);
	border-radius:var(--radio);
	overflow:hidden;
	margin-top:1.75rem;
	max-width:32rem;
}
.cct-portada__actualizado{
	grid-column:1/-1;
	background:var(--papel);
	margin:0;
	padding:.6rem .9rem;
	font-size:.75rem;
	color:var(--tinta-tenue);
	text-align:center;
}

.cct-portada__seccion{margin-bottom:3.5rem}
.cct-portada__seccion h2{margin-top:0}

/* ------------------------- 18. Herramientas ------------------------- */

.cct-herramienta{padding:1.5rem 1.25rem 3rem}
.cct-herramienta__contenido{margin-top:1.5rem}

/* ------------------------- 19. Paginación ------------------------- */

.cct-paginacion{margin:2.5rem 0}
.cct-paginacion .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.cct-paginacion .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:2.5rem;min-height:2.5rem;padding:0 .6rem;
	border:1px solid var(--linea-fuerte);border-radius:var(--radio);
	text-decoration:none;font-size:.9375rem;
}
.cct-paginacion .page-numbers.current{background:var(--acento);border-color:var(--acento);color:#fff}

/* -------------------------- 20. Búsqueda -------------------------- */

.cct-busqueda{display:flex;gap:.5rem;margin:1.5rem 0 2.5rem;max-width:32rem}
.cct-busqueda input[type="search"]{
	flex:1;min-height:2.75rem;padding:.6rem .75rem;
	font:inherit;font-size:1rem;
	border:1px solid var(--linea-fuerte);border-radius:var(--radio);
}
.cct-busqueda .cc-btn{
	font:inherit;font-weight:600;padding:.6rem 1.1rem;min-height:2.75rem;
	background:var(--acento);color:#fff;border:1px solid var(--acento);
	border-radius:var(--radio);cursor:pointer;
}