/* Botonera de las tarjetas de curso (page-landing-campus.php).

   Hoja aparte, igual que checkout.css y account-menu.css: NO pasa por el build
   de Tailwind/Vite. El CSS compilado del tema sólo contiene las clases que ya
   se usaban cuando se compiló, así que utilidades nuevas como flex-1,
   border-emerald-700 o hover:text-white no existirían ahí. Escribirlas a mano
   evita tener que rehacer el build en un sitio que está vendiendo. */

/* Los dos botones reparten el ancho a partes iguales. El flex-basis de 140px
   con wrap hace que se apilen solos cuando de verdad no caben en una fila,
   sin depender de un breakpoint adivinado. */
.ssn-course-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}
.ssn-course-actions > a {
	flex: 1 1 140px;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}

/* "Más información": mismo tamaño y forma que "Comprar Ahora", pero delineado,
   para que el botón de compra siga siendo el que pesa visualmente. */
.ssn-btn-outline {
	background: transparent;
	border: 1.5px solid var(--color-emerald-700); /* emerald-700, el verde del botón de compra */
	color: var(--color-emerald-700);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ssn-btn-outline:hover,
.ssn-btn-outline:focus-visible {
	background: var(--color-emerald-700);
	border-color: var(--color-emerald-700);
	color: #fff;
}

/* El borde se suma por fuera del reparto flex, así que el botón delineado
   quedaba 2px más ancho. Un borde transparente del mismo grosor en el de
   compra los deja exactamente iguales. */
.ssn-course-actions > a:not(.ssn-btn-outline) {
	border: 1.5px solid transparent;
}

/* ---------- Sección de contacto ---------- */

/* <address> viene en cursiva por defecto del navegador. La clase not-italic de
   Tailwind no está compilada en este tema, así que se quita a mano. */
.ssn-contact-address {
	font-style: normal;
}

.ssn-wa-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Cada teléfono, como fila pulsable: verde de WhatsApp en el ícono para que se
   reconozca de un vistazo, y el resto en la paleta del sitio. */
.ssn-wa-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1.5px solid var(--color-ivory-300); /* ivory-300 */
	border-radius: 0.85rem;
	background: var(--color-ivory-50); /* ivory-50 */
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.ssn-wa-link:hover,
.ssn-wa-link:focus-visible {
	border-color: #25d366; /* verde WhatsApp */
	background: var(--color-emerald-50);
}
.ssn-wa-link:active {
	transform: scale(0.995);
}

.ssn-wa-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0; /* shrink-0 tampoco está compilada */
	color: #25d366;
}

.ssn-wa-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ssn-wa-country {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-emerald-700); /* emerald-700 */
}
.ssn-wa-number {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-emerald-950); /* emerald-950 */
	white-space: nowrap;
}

.ssn-wa-note {
	line-height: 1.5;
}