Diferencia entre revisiones de «Plantilla:HitoV»

Revisión del 16:52 25 ago 2026

.cp-hitov { position: relative; padding-left: 42px; margin: 0 0 2.15em 0; min-height: 58px; font-family: sans-serif; }

/* Línea vertical que enlaza cada hito con el siguiente */ .cp-hitov__linea { position: absolute; left: 13px; top: 17px; bottom: -2.15em; width: 2px;

background: linear-gradient( to bottom, rgba(44, 158, 216, 0.72) 0%, rgba(72, 170, 220, 0.52) 42%, rgba(115, 190, 226, 0.32) 72%, rgba(185, 220, 238, 0.18) 100% ); }

/* Punto de cada fecha */ .cp-hitov__punto { position: absolute; left: 7px; top: 4px;

width: 14px; height: 14px; border-radius: 50%;

background: #38a8dd; border: 3px solid #f7fbff;

box-shadow: 0 0 0 2px rgba(56, 168, 221, 0.20), 0 2px 5px rgba(27, 88, 128, 0.14);

box-sizing: border-box; z-index: 2; }

/* Contenido */ .cp-hitov__contenido { position: relative; top: -1px; }

/* Fecha + título */ .cp-hitov__cabecera { font-size: 0.96em; line-height: 1.45; font-weight: 700; color: #123f70; }

.cp-hitov__fecha { font-weight: 800; color: #0b4c86; }

.cp-hitov__separador { color: #7895ae; font-weight: 600; }

.cp-hitov__titulo { font-weight: 750; color: #154f80; }

/* Texto descriptivo */ .cp-hitov__texto { margin-top: 0.65em;

font-size: 0.92em; line-height: 1.65;

color: #3e5770;

max-width: 850px; }

/* Enlaces algo más integrados visualmente */ .cp-hitov a { text-decoration: none; }

.cp-hitov a:hover { text-decoration: underline; }

/* Móvil */ @media screen and (max-width: 600px) {

.cp-hitov { padding-left: 34px; margin-bottom: 1.8em; }

.cp-hitov__linea { left: 10px; bottom: -1.8em; }

.cp-hitov__punto { left: 4px; }

.cp-hitov__texto { line-height: 1.55; } }

@@ Línea 1: / Línea 1: @@
-<templatestyles src="HitoV/styles.css" />
+.cp-hitov {
+	position: relative;
+	padding-left: 42px;
+	margin: 0 0 2.15em 0;
+	min-height: 58px;
+	font-family: sans-serif;
+}
-<div class="cp-hitov">
+/* Línea vertical que enlaza cada hito con el siguiente */
-	<div class="cp-hitov__linea"></div>
+.cp-hitov__linea {
-	<div class="cp-hitov__punto"></div>
+	position: absolute;
+	left: 13px;
+	top: 17px;
+	bottom: -2.15em;
+	width: 2px;
-	<div class="cp-hitov__contenido">
+	background: linear-gradient(
-		<div class="cp-hitov__cabecera">
+		to bottom,
-			<span class="cp-hitov__fecha">{{{fecha}}}</span>{{#if:{{{titulo|}}}|<span class="cp-hitov__separador"> · </span><span class="cp-hitov__titulo">{{{titulo}}}</span>}}
+		rgba(44, 158, 216, 0.72) 0%,
-		</div>
+		rgba(72, 170, 220, 0.52) 42%,
+		rgba(115, 190, 226, 0.32) 72%,
+		rgba(185, 220, 238, 0.18) 100%
+	);
+}
-		{{#if:{{{texto|}}}|
+/* Punto de cada fecha */
-		<div class="cp-hitov__texto">{{{texto}}}</div>
+.cp-hitov__punto {
-		}}
+	position: absolute;
-	</div>
+	left: 7px;
-</div>
+	top: 4px;
-<noinclude>
+	width: 14px;
-[[Categoría:Plantillas]]
+	height: 14px;
-</noinclude>
+	border-radius: 50%;
+	background: #38a8dd;
+	border: 3px solid #f7fbff;
+	box-shadow:
+0 0 2px rgba(56, 168, 221, 0.20),
+2px 5px rgba(27, 88, 128, 0.14);
+	box-sizing: border-box;
+	z-index: 2;
+}
+/* Contenido */
+.cp-hitov__contenido {
+	position: relative;
+	top: -1px;
+}
+/* Fecha + título */
+.cp-hitov__cabecera {
+	font-size: 0.96em;
+	line-height: 1.45;
+	font-weight: 700;
+	color: #123f70;
+}
+.cp-hitov__fecha {
+	font-weight: 800;
+	color: #0b4c86;
+}
+.cp-hitov__separador {
+	color: #7895ae;
+	font-weight: 600;
+}
+.cp-hitov__titulo {
+	font-weight: 750;
+	color: #154f80;
+}
+/* Texto descriptivo */
+.cp-hitov__texto {
+	margin-top: 0.65em;
+	font-size: 0.92em;
+	line-height: 1.65;
+	color: #3e5770;
+	max-width: 850px;
+}
+/* Enlaces algo más integrados visualmente */
+.cp-hitov a {
+	text-decoration: none;
+}
+.cp-hitov a:hover {
+	text-decoration: underline;
+}
+/* Móvil */
+@media screen and (max-width: 600px) {
+	.cp-hitov {
+		padding-left: 34px;
+		margin-bottom: 1.8em;
+	}
+	.cp-hitov__linea {
+		left: 10px;
+		bottom: -1.8em;
+	}
+	.cp-hitov__punto {
+		left: 4px;
+	}
+	.cp-hitov__texto {
+		line-height: 1.55;
+	}
+}