/*
Theme Name: looplica (campus)
Description: Tema mínimo para el campus de simuladores de curiosea. Portada con la marca y acceso al simulador.
Version: 2.0.0
Author: curiosea
*/

:root {
	/* La piel looplica (V3, 18/09/2026): la misma que la app del simulador.
	   Fondo muy claro para que la tarjeta blanca se despegue. */
	--hueso: #F5F8FF;
	--blanco: #FFFFFF;
	--tinta: #111B30;
	--gris: #566174;
	/* Se siguen llamando --lima por compatibilidad con el plugin (panel-web
	   y la marca del cliente pisan estas dos variables); el VALOR es el
	   azul de looplica. Un cambio de nombre exige tocar el plugin a la vez. */
	--lima: #315DF4;    /* azul looplica (botones y rellenos) */
	--lima-oscuro: #2447C9;   /* azul de texto y de botón al pasar el ratón */
	--lavado: #F5F8FF;  /* azul lavado: fondos de tarjeta suaves */
	--linea: #E2E9ED;
}

* { box-sizing: border-box; }

body.campus {
	margin: 0;
	background: var(--hueso);
	color: var(--tinta);
	font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.campus-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 24px 48px;
}

.campus-marca {
	margin: 0 0 40px;
}
.campus-marca img { height: 34px; width: auto; display: block; }
.campus-marca a { color: var(--tinta); text-decoration: none; display: inline-flex; align-items: baseline; }

.campus-card {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: 22px;
	padding: 36px 32px;
	box-shadow: 0 12px 28px rgba(16, 46, 66, 0.05);
}

.campus-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	font-weight: 700;
	color: var(--lima-oscuro);
	margin: 0 0 10px;
}

h1.campus-titulo {
	font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -0.035em;
	font-size: clamp(1.9rem, 5vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 14px;
}

.campus-lede { color: var(--gris); margin: 0 0 26px; }

.campus-btn {
	display: inline-block;
	background: var(--lima);
	color: #FFFFFF;
	border: 1px solid var(--lima);
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}
/* Al pasar el ratón, turquesa OSCURO. Antes se ponía verde lima (#b6c018, el
   de curiosea): era un resto de la piel antigua que nadie veía hasta que lo
   veía. Un botón no cambia de familia de color al tocarlo. */
.campus-btn:hover, .campus-btn:focus { background: var(--lima-oscuro); border-color: var(--lima-oscuro); }

.campus-btn-ghost {
	display: inline-block;
	margin-left: 10px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px solid var(--linea);
	color: var(--tinta);
	text-decoration: none;
	font-weight: 600;
}
.campus-btn-ghost:hover { border-color: var(--tinta); }

/* Cada simulador en su TARJETA (fondo turquesa lavado, borde suave), en vez de
   una lista con rayitas: es lo que la persona viene a hacer, y eso pide
   presencia. Sin miel: la guía la reserva para el aviso profesional, y aquí no hay avisos. */
.campus-lista {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
	display: grid;
	gap: 12px;
}
.campus-lista li {
	background: var(--lavado);
	border: 1px solid var(--linea);
	border-radius: 18px;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.campus-lista .campus-sim-nombre {
	font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: -0.01em;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	flex: 1 1 260px;
}
.campus-lista .campus-sim-desc {
	font-family: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--gris);
	font-size: 14.5px;
	display: block;
	font-weight: 400;
	margin-top: 3px;
}

.campus-hola { color: var(--gris); font-size: 14.5px; margin: 0 0 22px; }
.campus-hola a { color: var(--lima-oscuro); }

.campus-pie {
	margin-top: 34px;
	color: var(--gris);
	font-size: 13.5px;
}
.campus-pie a { color: var(--lima-oscuro); }

@media (max-width: 520px) {
	.campus-wrap { padding: 40px 18px 32px; }
	.campus-card { padding: 26px 20px; }
	.campus-btn-ghost { margin-left: 0; margin-top: 10px; }
}