/*
 * Tabla de Campus — estilos tomados del diseño de Figma (RM Foundation Campus Experience).
 *
 * Todos los selectores van prefijados con .cet para ganar en especificidad a los
 * estilos globales del tema y del kit de Elementor (que estilan button y a).
 */

.cet {
	--cet-navy: #0F2145;      /* Secondary/Dark Blue */
	--cet-ink: #14142B;       /* Neutral/Gray 90 */
	--cet-gold: #9B6D31;      /* Primary/Dark gold */
	--cet-gray: #5E6A83;      /* Neutral/Gray 50 */
	--cet-gray-30: #ABB4C1;   /* Neutral/Gray 30 */
	--cet-cream: #F9F3EB;     /* Gold 10 */
	--cet-font: 'RM Neue', Arial, sans-serif;
	--cet-font-ext: 'Helvetica Neuel', 'Helvetica Neue', Arial, sans-serif;

	font-family: var(--cet-font);
	color: var(--cet-navy);
}

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

/* Nombre del programa (escritorio y móvil) */
.cet .cet-prog-pre {
	display: block;
	margin-bottom: 4px;
	color: #fff;
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: -0.88px;
	text-transform: uppercase;
}

.cet .cet-prog-name {
	display: block;
	color: var(--cet-gold);
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 900;
	font-size: 44px;
	line-height: 44px;
	letter-spacing: -3.52px;
	text-transform: uppercase;
}

/* ============================ tabla escritorio ============================ */

.cet .cet-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cet .cet-table {
	width: 100%;
	max-width: 1296px;   /* ancho de la tabla en el diseño */
	min-width: 0;        /* por debajo de ese ancho la tabla se estrecha */
	margin: 0 auto;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: none;
}

/*
 * El tema pone un borde gris a todas las celdas (table td, table th) y una
 * línea sobre la cabecera con una propiedad lógica de mucha especificidad
 * (table thead:first-child tr:first-child th). Se anulan aquí; los bordes
 * blancos del diseño se declaran después.
 */
.cet .cet-table th.cet-th,
.cet .cet-table td.cet-cell,
.cet .cet-table td.cet-prog,
.cet .cet-table td.cet-cta {
	border: 0 none;
	border-block-start: 0 none;
}

/* 16 px de aire arriba + 14 px de relleno de celda, como en el diseño */
.cet .cet-th {
	padding: 30px 8px 14px;
	border: 0;
	background: none;
	color: #fff;
	text-align: left;
	vertical-align: top;
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
}

.cet .cet-th-precio {
	padding-top: 22px;   /* 16 px de aire + 6 px de relleno */
	padding-bottom: 6px;
}

.cet .cet-th-sub {
	display: block;
	color: var(--cet-gray-30);
	font-family: var(--cet-font);
	font-style: normal;
	font-size: 12px;
	line-height: 16px;
	text-transform: none;
}

/* Anchos exactos del diseño (sobre 1296 px) */
.cet .cet-th-prog   { width: 14.04%; }  /* 182 */
.cet .cet-th-mod    { width: 12.04%; }  /* 156 */
.cet .cet-th-edad   { width: 12.04%; }  /* 156 */
.cet .cet-th-fechas { width: 11.27%; }  /* 146 */
.cet .cet-th-precio { width: 14.66%; }  /* 190 */
.cet .cet-th-det    { width: 10.19%; }  /* 132 */
.cet .cet-th-cta    { width: 11.73%; }  /* 152 */

/*
 * Cada programa es un bloque con marco blanco de 1 px a los lados y una
 * separación de 2 px entre bloques (medido sobre el diseño). Solo el primer
 * bloque lleva borde superior, para que esa separación no se duplique.
 *
 * Los laterales van en las celdas del programa y del botón, que ocupan todas
 * las filas del bloque: si se pusieran con :first-child / :last-child
 * aparecerían líneas blancas dentro del bloque, en la segunda fila en adelante.
 */
.cet .cet-table td.cet-prog { border-left: 1px solid #fff; }
.cet .cet-table td.cet-cta  { border-right: 1px solid #fff; }
.cet .cet-table .cet-group > tr:last-child > td { border-bottom: 2px solid #fff; }
.cet .cet-table td.cet-prog,
.cet .cet-table td.cet-cta { border-bottom: 2px solid #fff; }
.cet .cet-table .cet-group:first-of-type > tr:first-child > td { border-top: 1px solid #fff; }

/*
 * El último bloque cierra el marco de la tabla: lleva un borde fino de 1 px,
 * igual que el superior y los laterales, no la banda de separación de 2 px.
 */
.cet .cet-table .cet-group:last-of-type > tr:last-child > td,
.cet .cet-table .cet-group:last-of-type td.cet-prog,
.cet .cet-table .cet-group:last-of-type td.cet-cta {
	border-bottom: 1px solid #fff;
}

/* La tabla entera es un rectángulo redondeado: solo las esquinas exteriores */
.cet .cet-table .cet-group:first-of-type td.cet-prog { border-top-left-radius: 8px; }
.cet .cet-table .cet-group:first-of-type td.cet-cta  { border-top-right-radius: 8px; }
.cet .cet-table .cet-group:last-of-type td.cet-prog  { border-bottom-left-radius: 8px; }
.cet .cet-table .cet-group:last-of-type td.cet-cta   { border-bottom-right-radius: 8px; }

.cet .cet-cell {
	padding: 16px 8px;
	color: var(--cet-navy);
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
}

/* Franjas alternas: gris translúcido sobre blanco, como en el diseño */
.cet .cet-row-a > .cet-cell {
	background-color: #fff;
	background-image: linear-gradient(rgba(171, 180, 193, .2), rgba(171, 180, 193, .2));
}

.cet .cet-row-b > .cet-cell {
	background-color: #fff;
	background-image: linear-gradient(rgba(171, 180, 193, .4), rgba(171, 180, 193, .4));
}

.cet .cet-prog {
	padding: 12px 16px;
	background: var(--cet-ink);
	vertical-align: middle;
}

.cet .cet-mod {
	padding: 18px 8px;
}

/* Modalidad e icono ⓘ siempre en la misma línea */
.cet .cet-mod-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cet .cet-mod .cet-mod-txt {
	font-weight: 700;
}


/* ------------------------------- icono ⓘ + globo ------------------------- */

.cet .cet-info {
	position: relative;
	display: inline-block;
	flex: none;
	cursor: pointer;
	outline: none;
}

.cet .cet-info-ic {
	display: block;
	width: 16px;
	height: 16px;
	background: var(--cet-gold);
	-webkit-mask: url('/wp-content/uploads/2025/10/info.svg') no-repeat center / contain;
	        mask: url('/wp-content/uploads/2025/10/info.svg') no-repeat center / contain;
}

.cet .cet-tip {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	z-index: 40;
	transform: translateX(-50%);
	width: max-content;
	max-width: 240px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--cet-navy);
	box-shadow: 0 4px 16px rgba(15, 33, 69, .24);
	color: #fff;
	font-family: var(--cet-font);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}

.cet .cet-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--cet-navy);
}

.cet .cet-info:hover .cet-tip,
.cet .cet-info:focus .cet-tip,
.cet .cet-info.cet-open .cet-tip {
	display: block;
}

/* --------------------------- desplegable de fechas ----------------------- */

.cet .cet-drop {
	position: relative;
	display: inline-block;
}

/* Se repite .cet-drop-btn para ganar al estilo global de botones del tema. */
.cet .cet-drop-btn,
.cet button.cet-drop-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: rgba(171, 180, 193, .3);
	box-shadow: none;
	color: var(--cet-navy);
	font-family: var(--cet-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.cet button.cet-drop-btn:hover,
.cet button.cet-drop-btn:focus {
	background: rgba(171, 180, 193, .5);
	color: var(--cet-navy);
	box-shadow: none;
}

.cet .cet-chev {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--cet-navy);
	transition: transform .2s ease;
	-webkit-mask: url('/wp-content/uploads/2026/08/angle-small-down.svg') no-repeat center / contain;
	        mask: url('/wp-content/uploads/2026/08/angle-small-down.svg') no-repeat center / contain;
}

.cet .cet-drop.cet-open .cet-chev {
	transform: rotate(180deg);
}

.cet .cet-drop-panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 60;
	width: max-content;
	min-width: 180px;
	max-width: 280px;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 33, 69, .2);
}

/* Puente invisible para que el panel no se cierre al pasar por el hueco */
.cet .cet-drop-panel::before {
	content: '';
	position: absolute;
	top: -10px;
	right: -6px;
	bottom: -10px;
	left: -6px;
	z-index: -1;
}

.cet .cet-drop.cet-open .cet-drop-panel {
	display: block;
}

.cet .cet-drop-month {
	display: block;
	margin: 8px 0 2px;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--cet-cream);
	color: var(--cet-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.cet .cet-drop-month:first-child {
	margin-top: 0;
}

.cet .cet-drop-item {
	display: block;
	padding: 4px 12px;
	border-bottom: 1px solid rgba(171, 180, 193, .4);
	color: var(--cet-navy);
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

.cet .cet-drop-item:last-child,
.cet .cet-drop-item + .cet-drop-month {
	border-bottom: 0;
}

.cet .cet-drop-item:has(+ .cet-drop-month) {
	border-bottom: 0;
}

/* ---------------------------------- precio ------------------------------- */

/*
 * Se mantiene en una línea mientras quepa y al estrecharse salta de línea
 * entera, sin separar nunca un importe de su símbolo de euro. El contenedor
 * va dentro de la celda, no en el propio <td>, para no romper la tabla.
 */
.cet .cet-precio-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
}

.cet .cet-pre        { color: var(--cet-navy); white-space: nowrap; }
.cet .cet-old        { color: var(--cet-gray); text-decoration: line-through; white-space: nowrap; }
.cet .cet-new        { color: var(--cet-navy); font-size: 16px; line-height: 24px; white-space: nowrap; }
.cet .cet-precio-txt { color: var(--cet-navy); }

/* ------------------------- enlace de detalles y botón -------------------- */

.cet .cet-det {
	text-align: center;
}

.cet .cet-det a,
.cet a.cet-det-link {
	color: var(--cet-gold);
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.cet .cet-det a:hover,
.cet a.cet-det-link:hover {
	color: var(--cet-gold);
	opacity: .75;
}

.cet .cet-cta {
	padding: 12px;
	background: var(--cet-navy);
	text-align: center;
	vertical-align: middle;
}

.cet a.cet-btn {
	display: inline-block;
	width: auto;
	padding: 10px 16px 6px;
	border: 2px solid #fff;
	border-radius: 96px;
	background: none;
	color: #fff;
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 900;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.24px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.cet a.cet-btn:hover {
	background: #fff;
	color: var(--cet-navy);
}

.cet a.cet-btn--gold {
	border-color: var(--cet-gold);
	color: var(--cet-gold);
}

.cet a.cet-btn--gold:hover {
	background: var(--cet-gold);
	color: #fff;
}

/* ============================== tarjetas móvil ============================ */

.cet .cet-cards {
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
}

.cet .cet-card {
	background: var(--cet-ink);
}

.cet .cet-card.cet-group-cont  { border-top: 1px solid var(--cet-gold); }
.cet .cet-card.cet-group-start { border-top: 4px solid #fff; }

.cet .cet-card-head {
	padding: 16px;
	cursor: pointer;
	outline: none;
}

.cet .cet-card-titrow {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cet .cet-card-tit {
	flex: 1;
	min-width: 0;
}

.cet .cet-card-chev {
	width: 20px;
	height: 20px;
	background: #fff;
}

.cet .cet-card.cet-open .cet-card-chev {
	transform: rotate(180deg);
}

.cet .cet-card-mod {
	margin-top: 4px;
	color: #fff;
	font-size: 16px;
	line-height: 24px;
}

.cet .cet-card-mod .cet-mod-txt {
	font-weight: 700;
}

.cet .cet-card-body {
	display: none;
	background-color: #fff;
	background-image: linear-gradient(rgba(238, 242, 253, .4), rgba(238, 242, 253, .4));
}

.cet .cet-card.cet-open .cet-card-body {
	display: block;
}

.cet .cet-card-inner {
	padding: 16px 0;
}

/* Más aire entre bloques: 5 px más que el diseño, a petición */
.cet .cet-sec {
	margin-bottom: 17px;
	padding: 0 16px;
}

.cet .cet-sec:last-of-type {
	margin-bottom: 0;
}

/* Rótulo pegado a su contenido: 6 px menos que el diseño, a petición */
.cet .cet-lbl {
	margin-bottom: -2px;
	color: var(--cet-gray);
	font-family: var(--cet-font-ext);
	font-style: oblique;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
}

.cet .cet-val {
	color: var(--cet-navy);
	font-size: 14px;
	line-height: 20px;
}

.cet .cet-fecha-line {
	margin-bottom: 4px;
}

.cet .cet-val > :last-child {
	margin-bottom: 0;
}

/*
 * En las tarjetas de móvil las fechas van en lista corrida: el diseño no
 * muestra los separadores de mes, que sí aparecen en el desplegable de
 * escritorio. Cada fecha ya nombra su mes.
 */
.cet .cet-fecha-month {
	display: none;
}

.cet .cet-cards .cet-precio-inner { gap: 0 8px; }
.cet .cet-cards .cet-pre,
.cet .cet-cards .cet-old { font-size: 12px; line-height: 16px; }
.cet .cet-cards .cet-new { font-size: 14px; line-height: 20px; }

.cet .cet-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px 4px;
}

/*
 * Pantallas entre el ancho del diseño y el corte de tableta: la tabla se
 * estrecha en lugar de desplazarse de lado, así que se reducen los tamaños
 * fijos (nombre del programa, botones, rellenos) y se reparten las columnas.
 */
@media (max-width: 1295px) {
	.cet .cet-th-prog   { width: 13.5%; }
	.cet .cet-th-mod    { width: 12%; }
	.cet .cet-th-edad   { width: 12%; }
	.cet .cet-th-fechas { width: 12%; }
	.cet .cet-th-precio { width: 13%; }
	.cet .cet-th-det    { width: 12.5%; }
	.cet .cet-th-cta    { width: 13.5%; }

	.cet .cet-th { padding: 26px 6px 12px; }
	.cet .cet-th-precio { padding-top: 18px; padding-bottom: 6px; }
	.cet .cet-cell { padding: 14px 6px; }
	.cet .cet-mod { padding: 14px 6px; }
	.cet .cet-det { padding-left: 4px; padding-right: 4px; }

	.cet .cet-prog { padding: 12px; }
	.cet .cet-prog-pre { font-size: 14px; line-height: 14px; letter-spacing: -0.7px; }
	.cet .cet-prog-name { font-size: 36px; line-height: 36px; letter-spacing: -2.5px; }

	.cet .cet-drop-btn,
	.cet button.cet-drop-btn { gap: 6px; padding: 0 8px; font-size: 14px; line-height: 22px; }

	.cet .cet-cta { padding: 8px; }
	.cet a.cet-btn { padding: 9px 12px 5px; }
}

/* ========================= qué se ve en cada pantalla ===================== */

.cet .cet-cards {
	display: none;
}

@media (max-width: 767px) {
	.cet .cet-desktop { display: none; }
	.cet .cet-cards   { display: block; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.cet.cet--tablet-mobile .cet-desktop  { display: none; }
	.cet.cet--tablet-mobile .cet-cards    { display: block; }
	.cet.cet--tablet-desktop .cet-desktop { display: block; }
	.cet.cet--tablet-desktop .cet-cards   { display: none; }
}