/*
 * Web pública de Smart English (inc/publico.php, templates/publico/).
 * Lenguaje visual de la demo Preschool de Eduma: secciones pastel con cuadrícula y borde ondulado,
 * tarjetas redondeadas, etiquetas tipo píldora y pasos numerados. Colores de la marca (style.css).
 */

.sef-web {
	--sef-rosa: #FFF3F2;
	--sef-celeste: #EEF6FD;
	--sef-radio: 24px;
	--sef-sombra: 0 10px 30px rgba(23, 32, 51, 0.08);
	/* clip y no hidden: hidden lo vuelve contenedor de scroll y frena las animaciones atadas al
	   scroll (animation-timeline: view()) de los pasos. */
	overflow: clip;
	color: var(--se-texto);
}

.sef-web h1,
.sef-web h2,
.sef-web h3 {
	margin: 0;
	color: var(--se-texto);
	font-weight: 800;
	line-height: 1.15;
	text-transform: none;
}

.sef-web p {
	margin: 0;
}

.sef-web ul,
.sef-web ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sef-web img {
	max-width: 100%;
	height: auto;
}

.sef-contenedor {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.sef-contenedor--angosto {
	max-width: 820px;
}

.sef-centro {
	margin-top: 40px !important;
	text-align: center;
}

/* ── Secciones ─────────────────────────────────────────────────────────────── */

.sef-seccion {
	position: relative;
	padding: clamp(56px, 8vw, 96px) 0;
}

.sef-seccion--pastel,
.sef-seccion--celeste {
	--sef-fondo-seccion: var(--sef-rosa);
	--sef-linea: rgba(229, 35, 32, 0.06);
	background-color: var(--sef-fondo-seccion);
	background-image:
		linear-gradient(var(--sef-linea) 1px, transparent 1px),
		linear-gradient(90deg, var(--sef-linea) 1px, transparent 1px);
	background-size: 28px 28px;
}

.sef-seccion--celeste {
	--sef-fondo-seccion: var(--sef-celeste);
	--sef-linea: rgba(17, 112, 184, 0.07);
}

/* Borde ondulado arriba y abajo, con el mismo color de la sección. */
.sef-seccion--ondas::before,
.sef-seccion--ondas::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	height: 12px;
	background-size: 24px 12px;
	background-repeat: repeat-x;
}

.sef-seccion--ondas::before {
	top: -12px;
	background-image: radial-gradient(circle at 50% 100%, var(--sef-fondo-seccion) 11px, transparent 11.5px);
}

.sef-seccion--ondas::after {
	bottom: -12px;
	background-image: radial-gradient(circle at 50% 0, var(--sef-fondo-seccion) 11px, transparent 11.5px);
}

/* ── Títulos y etiquetas ───────────────────────────────────────────────────── */

.sef-titulo {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.sef-titulo h2 {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.sef-titulo__bajada {
	margin-top: 14px !important;
	color: var(--se-texto-suave);
	font-size: 1.05rem;
}

.sef-web .sef-etiqueta {
	display: inline-block;
	margin-bottom: 14px !important;
	padding: 5px 16px;
	border-radius: 999px;
	background: #FDE5E4;
	color: #B3201D;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Botones ───────────────────────────────────────────────────────────────── */

.sef-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.sef-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 26px;
	border: 2px solid var(--se-azul);
	border-radius: 999px;
	background: var(--se-azul);
	box-shadow: 0 4px 0 var(--se-azul-oscuro);
	color: #FFFFFF !important;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.sef-cta:hover,
.sef-cta:focus-visible {
	background: var(--se-azul-oscuro);
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--se-azul-oscuro);
}

.sef-cta--borde {
	background: #FFFFFF;
	color: var(--se-azul) !important;
}

.sef-cta--borde:hover,
.sef-cta--borde:focus-visible {
	background: var(--se-azul);
	color: #FFFFFF !important;
}

.sef-cta--whatsapp {
	border-color: #25D366;
	background: #25D366;
	box-shadow: 0 4px 0 #1A9E4B;
	color: #0B3B2E !important;
}

.sef-cta--whatsapp:hover,
.sef-cta--whatsapp:focus-visible {
	border-color: #1FBE5B;
	background: #1FBE5B;
	box-shadow: 0 2px 0 #1A9E4B;
}

.sef-cta .sef-icono {
	flex: none;
	width: 22px;
	height: 22px;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.sef-hero {
	padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
	background: linear-gradient(180deg, #F3F8FD 0%, #FFFFFF 100%);
}

.sef-hero__grilla {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 48px;
}

.sef-hero__grilla--invertida {
	grid-template-columns: 0.9fr 1.1fr;
}

.sef-hero h1 {
	color: var(--se-azul);
	font-size: clamp(2.3rem, 5.4vw, 3.8rem);
}

.sef-hero h1 span {
	color: var(--se-rojo);
}

.sef-hero--pagina h1 {
	color: var(--se-texto);
	font-size: clamp(2rem, 4.4vw, 3rem);
}

.sef-hero__texto > p:not(.sef-etiqueta) {
	margin-top: 18px;
	color: var(--se-texto-suave);
	font-size: 1.1rem;
}

.sef-hero__texto > .sef-hero__nota {
	margin-top: 20px;
	color: var(--se-texto);
	font-size: 0.95rem;
	font-weight: 700;
}

/* Mascota sobre un círculo celeste con un arco rojo, como el banner del kit de marca. */
.sef-hero__imagen {
	position: relative;
	display: flex;
	justify-content: center;
}

.sef-hero__imagen::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(440px, 92%);
	aspect-ratio: 1;
	border: 10px solid transparent;
	border-right-color: var(--se-rojo);
	border-radius: 50%;
	background: #D6EAFB padding-box;
	transform: translate(-50%, -50%) rotate(-20deg);
}

.sef-hero__imagen img {
	position: relative;
	width: min(380px, 80%);
	filter: drop-shadow(0 18px 24px rgba(23, 32, 51, 0.15));
}

.sef-hero__imagen--foto::before {
	display: none;
}

.sef-hero__imagen--foto img {
	width: 100%;
	max-width: 480px;
	border: 8px solid #FFFFFF;
	border-radius: 32px;
	box-shadow: var(--sef-sombra);
	filter: none;
}

/* Imagen vertical y chica (300 px de origen): sin agrandarla de más. */
.sef-hero__imagen--vertical img {
	max-width: 300px;
}

.sef-cita {
	margin: 24px 0 0;
	padding: 16px 22px;
	border: 0;
	border-left: 6px solid var(--se-rojo);
	border-radius: 0 16px 16px 0;
	background: var(--sef-rosa);
}

.sef-cita p {
	color: var(--se-texto);
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 700;
}

/* ── Tarjetas con la mascota ("¿Por qué Smart English?") ──────────────────── */

.sef-tarjetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sef-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	padding: 32px 28px 0;
	border-radius: var(--sef-radio);
	background: #FFFFFF;
	box-shadow: var(--sef-sombra);
	text-align: center;
}

.sef-tarjeta h3 {
	font-size: 1.3rem;
}

.sef-tarjeta p {
	margin-top: 10px;
	color: var(--se-texto-suave);
}

.sef-tarjeta img {
	width: 190px;
	margin-top: auto;
	padding-top: 24px;
	border-radius: 50% 50% 0 0;
	object-fit: cover;
	object-position: top;
	aspect-ratio: 1;
}

/* ── Niveles ───────────────────────────────────────────────────────────────── */

.sef-web .sef-niveles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sef-web .sef-nivel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 3px solid var(--sef-nivel-color);
	border-radius: var(--sef-radio);
	background: #FFFFFF;
}

.sef-web .sef-nivel__cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	background: var(--sef-nivel-color);
	color: var(--sef-nivel-texto);
	font-size: 1.3rem;
	font-weight: 800;
}

.sef-web .sef-nivel__numero {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--se-texto);
	font-size: 0.95rem;
}

.sef-web .sef-nivel__texto {
	flex: 1;
	padding: 18px 22px 8px;
	color: var(--se-texto-suave);
}

.sef-web .sef-nivel__dato {
	padding: 0 22px 20px;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ── Recursos con ícono (lección, plataforma, contacto) ───────────────────── */

.sef-recursos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sef-recurso {
	--sef-tono: #1170B8;
	--sef-tono-claro: #E7F1FA;
	padding: 32px 26px;
	border: 2px solid var(--sef-tono-claro);
	border-radius: var(--sef-radio);
	background: #FFFFFF;
	text-align: center;
}

.sef-recurso--rojo    { --sef-tono: #C81E1B; --sef-tono-claro: #FDE5E4; }
.sef-recurso--verde   { --sef-tono: #15784A; --sef-tono-claro: #DDF4E7; }
.sef-recurso--violeta { --sef-tono: #5D17EB; --sef-tono-claro: #ECE4FD; }
.sef-recurso--naranja { --sef-tono: #B33A00; --sef-tono-claro: #FFE9DE; }
.sef-recurso--celeste { --sef-tono: #17736F; --sef-tono-claro: #DDF3F2; }

.sef-recurso__icono {
	display: inline-grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--sef-tono-claro);
	color: var(--sef-tono);
}

.sef-recurso__icono .sef-icono {
	width: 32px;
	height: 32px;
}

.sef-recurso h3 {
	font-size: 1.2rem;
}

.sef-recurso p {
	margin-top: 10px;
	color: var(--se-texto-suave);
}

.sef-recurso a {
	color: var(--sef-tono);
	font-weight: 800;
	overflow-wrap: anywhere;
}

/* ── Pasos ─────────────────────────────────────────────────────────────────── */

.sef-pasos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: paso;
}

/* Línea punteada que une los pasos (detrás de las imágenes). */
.sef-pasos::before {
	content: "";
	position: absolute;
	top: 86px;
	right: 12%;
	left: 12%;
	border-top: 3px dashed #C9D9EA;
	transform-origin: left center;
}

.sef-paso {
	--sef-tono: #1170B8;
	--sef-tono-claro: #E7F1FA;
	position: relative;
	text-align: center;
}

.sef-paso:nth-child(2) { --sef-tono: #C81E1B; --sef-tono-claro: #FDE5E4; }
.sef-paso:nth-child(3) { --sef-tono: #15784A; --sef-tono-claro: #DDF4E7; }
.sef-paso:nth-child(4) { --sef-tono: #5D17EB; --sef-tono-claro: #ECE4FD; }

.sef-paso__foto {
	position: relative;
	display: inline-block;
	width: 172px;
	height: 172px;
	border-radius: 50%;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Anillo punteado del color del paso (como la línea que une los pasos): gira al pasar el mouse. */
.sef-paso__foto::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	background: repeating-conic-gradient(var(--sef-tono) 0 9deg, transparent 9deg 18deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
	opacity: 0;
	scale: 0.85;
	transition: opacity 0.3s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: sef-anillo-gira 6s linear infinite paused;
}

/* La foto va dentro de un marco redondo para que el zoom quede adentro del círculo. */
.sef-paso__marco {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: 6px solid #FFFFFF;
	border-radius: 50%;
	background: var(--sef-tono-claro);
	box-shadow: 0 0 0 3px var(--sef-tono-claro), var(--sef-sombra);
	transition: box-shadow 0.35s ease;
}

.sef-paso__marco img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transform-origin: 50% 30%; /* el zoom se centra en la cara de la mascota */
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sef-paso__numero {
	margin-top: 18px !important;
	color: var(--sef-tono);
	font-size: 1.4rem;
	font-weight: 800;
}

/* Rayita del color del paso que se dibuja debajo del número al pasar el mouse. */
.sef-paso__numero::after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	margin: 4px auto 0;
	border-radius: 3px;
	background: var(--sef-tono);
	transition: width 0.35s ease;
}

@keyframes sef-anillo-gira {
	to { rotate: 1turn; }
}

/*
 * Al bajar con el scroll, los pasos aparecen uno detrás de otro y la línea se dibuja de izquierda a
 * derecha (animaciones atadas al scroll; donde no hay soporte, los pasos se ven fijos como siempre).
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sef-paso {
			animation: sef-paso-entra ease-out both;
			animation-timeline: view();
			animation-range: entry 10% cover 32%;
		}

		.sef-paso:nth-child(2) { animation-range: entry 20% cover 38%; }
		.sef-paso:nth-child(3) { animation-range: entry 30% cover 44%; }
		.sef-paso:nth-child(4) { animation-range: entry 40% cover 50%; }

		.sef-pasos::before {
			animation: sef-linea-dibuja linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 50%;
		}
	}
}

@keyframes sef-paso-entra {
	from {
		opacity: 0;
		transform: translateY(48px) scale(0.7);
	}
}

@keyframes sef-linea-dibuja {
	from { transform: scaleX(0); }
}

.sef-paso h3 {
	margin-top: 4px;
	font-size: 1.15rem;
}

.sef-paso p:last-child {
	margin-top: 8px;
	color: var(--se-texto-suave);
}

/* ── Dos columnas con lista ────────────────────────────────────────────────── */

.sef-dos-columnas {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 56px;
}

.sef-dos-columnas__imagen {
	width: 300px;
	border-radius: var(--sef-radio);
	box-shadow: var(--sef-sombra);
}

.sef-dos-columnas .sef-titulo {
	margin: 0 0 24px;
	text-align: left;
}

.sef-lista {
	display: grid;
	gap: 14px;
}

.sef-lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 700;
}

.sef-lista .sef-icono {
	flex: none;
	color: var(--se-azul);
}

/* ── Banda final con WhatsApp ──────────────────────────────────────────────── */

.sef-cierre {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 40px;
	padding: 32px 48px 32px 32px;
	border-radius: 32px;
	background: var(--se-azul);
	background-image: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.14) 0 120px, transparent 121px);
}

.sef-cierre__imagen {
	width: 240px;
	border-radius: var(--sef-radio);
}

.sef-cierre h2 {
	color: #FFFFFF;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.sef-cierre p {
	margin: 12px 0 24px;
	color: #E3EEF8;
	font-size: 1.1rem;
}

/* ── Preguntas frecuentes ──────────────────────────────────────────────────── */

.sef-preguntas {
	display: grid;
	gap: 14px;
}

.sef-pregunta {
	border: 2px solid var(--se-borde);
	border-radius: 18px;
	background: #FFFFFF;
	transition: border-color 0.15s ease;
}

.sef-pregunta[open] {
	border-color: #BFD8EE;
	box-shadow: var(--sef-sombra);
}

.sef-pregunta summary {
	position: relative;
	padding: 18px 56px 18px 22px;
	font-size: 1.05rem;
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}

.sef-pregunta summary::-webkit-details-marker {
	display: none;
}

.sef-pregunta summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 18px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #E7F1FA;
	color: var(--se-azul);
	font-size: 1.2rem;
	line-height: 1;
	transform: translateY(-50%);
}

.sef-pregunta[open] summary::after {
	content: "−";
}

.sef-pregunta p {
	padding: 0 22px 20px;
	color: var(--se-texto-suave);
}

.sef-web .sef-centro a:not(.sef-cta) {
	color: var(--se-azul);
	font-weight: 800;
	text-decoration: underline;
}

/* ── Efecto al pasar el mouse por las tarjetas ──────────────────────────────
 * La tarjeta sube un poco y gana sombra; la mascota da un saltito y el ícono gira.
 * Solo con mouse (hover: hover), para que en el celular no quede "pegado" al tocar.
 */

.sef-tarjeta,
.sef-web .sef-nivel,
.sef-recurso {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sef-tarjeta img,
.sef-recurso__icono,
.sef-web .sef-nivel__numero {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* La mascota de la tarjeta crece desde la base, sin despegarse del borde. */
.sef-tarjeta img {
	transform-origin: bottom center;
}

@media (hover: hover) {
	.sef-tarjeta:hover,
	.sef-web .sef-nivel:hover,
	.sef-recurso:hover {
		transform: translateY(-8px);
		box-shadow: 0 18px 40px rgba(23, 32, 51, 0.14);
	}

	.sef-recurso:hover {
		border-color: var(--sef-tono);
	}

	.sef-tarjeta:hover img {
		transform: scale(1.08);
	}

	.sef-recurso:hover .sef-recurso__icono {
		transform: rotate(-10deg) scale(1.12);
	}

	.sef-web .sef-nivel:hover .sef-nivel__numero {
		transform: scale(1.15);
	}

	/* Paso: el círculo sube con un resplandor de su color, aparece el anillo que gira y la mascota
	   hace zoom dentro del círculo. */
	.sef-paso:hover .sef-paso__foto {
		transform: translateY(-10px);
	}

	.sef-paso:hover .sef-paso__foto::before {
		opacity: 1;
		scale: 1;
		animation-play-state: running;
	}

	.sef-paso:hover .sef-paso__marco {
		box-shadow: 0 0 0 3px #FFFFFF, 0 18px 36px color-mix(in srgb, var(--sef-tono) 35%, transparent);
	}

	.sef-paso:hover .sef-paso__marco img {
		transform: scale(1.12) rotate(-5deg);
	}

	.sef-paso:hover .sef-paso__numero::after {
		width: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sef-tarjeta:hover,
	.sef-web .sef-nivel:hover,
	.sef-recurso:hover,
	.sef-tarjeta:hover img,
	.sef-paso:hover .sef-paso__foto,
	.sef-paso:hover .sef-paso__marco img,
	.sef-recurso:hover .sef-recurso__icono,
	.sef-web .sef-nivel:hover .sef-nivel__numero {
		transform: none;
	}

	.sef-paso__foto::before {
		animation: none;
	}
}

/* ── Header: menú en minúscula y negrita, y botón "Ingresar / Registrarse" ── */

.thim-nav-wrapper .navbar-nav > li > a {
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
}

.navbar-nav > li.sef-menu-acceso {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
}

.navbar-nav > li.sef-menu-acceso > a.sef-cta {
	min-height: 42px;
	padding: 8px 22px !important;
	color: #FFFFFF !important;
	font-size: 0.95rem;
	line-height: 1.2 !important;
}

.sef-acceso__corto {
	display: none;
}

/*
 * Hasta 1024 px Eduma esconde el menú del header y muestra el hamburguesa. El botón de acceso queda
 * visible al lado, más chico y con el texto corto; en el menú hamburguesa va con el texto completo.
 */
@media (max-width: 1024px) {
	.width-navigation .navbar-nav {
		text-align: right;
	}

	.width-navigation .navbar-nav > li.sef-menu-acceso {
		margin: 0 44px 0 0;
	}

	.width-navigation .navbar-nav > li.sef-menu-acceso > a.sef-cta {
		min-height: 36px;
		padding: 6px 16px !important;
		font-size: 0.85rem;
		white-space: nowrap;
	}

	.mobile-menu-container .navbar-nav > li.sef-menu-acceso {
		margin: 16px 0 0;
	}

	.width-navigation .sef-acceso__largo {
		display: none;
	}

	.width-navigation .sef-acceso__corto {
		display: inline;
	}
}

/* ── Tablet y celular ──────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.sef-tarjetas,
	.sef-web .sef-niveles,
	.sef-recursos {
		grid-template-columns: repeat(2, 1fr);
	}

	.sef-pasos {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	.sef-pasos::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.sef-hero__grilla,
	.sef-hero__grilla--invertida,
	.sef-dos-columnas,
	.sef-cierre {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sef-hero__grilla--invertida .sef-hero__imagen {
		order: 2;
	}

	.sef-hero__imagen img {
		width: min(260px, 70%);
	}

	.sef-hero__imagen--foto img {
		width: 100%;
	}

	.sef-dos-columnas__imagen {
		width: 220px;
		justify-self: center;
	}

	.sef-cierre {
		padding: 28px 24px;
		text-align: center;
	}

	.sef-cierre__imagen {
		width: 200px;
		justify-self: center;
	}

}

@media (max-width: 639px) {
	.sef-tarjetas,
	.sef-web .sef-niveles,
	.sef-recursos,
	.sef-pasos {
		grid-template-columns: 1fr;
	}
}