/*
 * Seppia® · estilos de la landing
 *
 * Cada bloque de Elementor lleva una clase "sp-..." (Avanzado > Clases CSS).
 * Las clases definen color, tipografía y distribución; el contenido
 * (textos, fotos, enlaces) se edita desde Elementor.
 */

:root {
	--sp-naranja: #FA6106;
	--sp-oxido:   #C44A00;
	--sp-durazno: #FDB475;
	--sp-negro:   #202020;
	--sp-carbon:  #3D3835;
	--sp-piedra:  #A09890;
	--sp-arena:   #F5F0EB;
	--sp-blanco:  #FFFDFB;
	--sp-azul:    #0671C4;
	--sp-cielo:   #CCE3F7;
	--sp-marino:  #03406E;
	--sp-oliva:   #7A8C2E;
	--sp-lima:    #D4E28A;
	--sp-linea:   #E3DBD2;

	--sp-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	--sp-texto:   "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--sp-ancho: 1160px;
	--sp-radio: 14px;
	--sp-gutter: max(16px, env(safe-area-inset-left, 0px));
	--sp-seccion: clamp(64px, 9vw, 112px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--sp-arena);
	color: var(--sp-negro);
	font-family: var(--sp-texto);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body .elementor-heading-title {
	font-family: var(--sp-display);
	line-height: 1.08;
	color: var(--sp-negro);
	text-wrap: balance;
}
body .elementor-widget-text-editor { font-family: var(--sp-texto); color: var(--sp-negro); }
body .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---------- Estructura: banda a todo el ancho + contenido centrado ---------- */

body .e-con.sp-banda {
	padding: 0 var(--sp-gutter);
	gap: 0;
	--width: 100%;
}
body .e-con.sp-contenido {
	width: 100%;
	max-width: var(--sp-ancho);
	margin-inline: auto;
	padding: 0;
	gap: 0;
	--width: 100%;
}
body .e-con.sp-seccion { padding-block: var(--sp-seccion); }
body .e-con.sp-seccion > .e-con.sp-contenido { gap: clamp(36px, 5vw, 56px); }

body .e-con.sp-cabecera { gap: 14px; max-width: 720px; padding: 0; }

body .e-con.sp-fondo-blanco { background: var(--sp-blanco); }
body .e-con.sp-fondo-negro  { background: var(--sp-negro); }
body .e-con.sp-fondo-naranja { background: var(--sp-naranja); }

/* ---------- Tipografía ---------- */

body .sp-h1 .elementor-heading-title { font-size: clamp(2.8rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -.01em; }
body .sp-h1 .elementor-heading-title span { color: var(--sp-naranja); }
body .sp-h2 .elementor-heading-title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; }
body .sp-h3 .elementor-heading-title { font-size: 1.55rem; font-weight: 600; }
body .sp-h4 .elementor-heading-title { font-size: 1.15rem; font-weight: 600; }

body .sp-etiqueta .elementor-heading-title {
	font-family: var(--sp-texto);
	font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sp-oxido);
}
body .sp-lema .elementor-heading-title { font-weight: 500; font-size: 1.25rem; color: var(--sp-oxido); }
body .sp-bajada { font-size: 1.15rem; font-weight: 500; color: var(--sp-carbon); max-width: 60ch; }
body .sp-chico { font-size: .92rem; color: var(--sp-carbon); }

/* ---------- Botones ---------- */

body .sp-boton-wa .elementor-button,
body .sp-boton-linea .elementor-button {
	font-family: var(--sp-texto);
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	padding: 14px 22px; border-radius: 999px;
	border: 2px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s;
}
body .sp-boton-wa .elementor-button { background: var(--sp-naranja); color: var(--sp-blanco); }
body .sp-boton-wa .elementor-button:hover,
body .sp-boton-wa .elementor-button:focus { background: var(--sp-oxido); color: var(--sp-blanco); }
body .sp-boton-linea .elementor-button { background: transparent; border-color: var(--sp-negro); color: var(--sp-negro); }
body .sp-boton-linea .elementor-button:hover,
body .sp-boton-linea .elementor-button:focus { background: var(--sp-negro); color: var(--sp-blanco); }
body .elementor-button .elementor-button-icon svg { width: 20px; height: 20px; fill: currentColor; }
body .elementor-button .elementor-button-content-wrapper { gap: 10px; align-items: center; }
body a:focus-visible, body .elementor-button:focus-visible { outline: 3px solid var(--sp-azul); outline-offset: 3px; }

body .e-con.sp-acciones { flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 0; }
body .e-con.sp-acciones > .elementor-widget { width: auto; }

/* ---------- Encabezado ---------- */

body .e-con.sp-encabezado {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: color-mix(in srgb, var(--sp-blanco) 94%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sp-linea);
}
body .e-con.sp-encabezado > .e-con.sp-contenido {
	flex-direction: row; align-items: center; justify-content: space-between;
	gap: 24px; padding-block: 12px; flex-wrap: nowrap;
}
body .e-con.sp-encabezado .elementor-widget { width: auto; }
body .sp-logo { width: auto; text-align: left; line-height: 0; }
body .sp-logo a { display: inline-flex; align-items: flex-start; gap: 3px; }
body .sp-logo img { height: 56px; width: auto; max-width: none; object-fit: contain; }
body .sp-logo a::after { content: "®"; font-family: var(--sp-texto); font-weight: 600; font-size: .75rem; line-height: 1; color: var(--sp-naranja); margin-top: 12px; }
body .sp-nav .elementor-icon-list-items { display: flex; flex-wrap: nowrap; gap: 28px; margin: 0 !important; }
body .sp-nav .elementor-icon-list-item { white-space: nowrap; }
body .sp-nav .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
body .sp-nav .elementor-icon-list-item::after { display: none !important; }
body .sp-nav .elementor-icon-list-text { font-weight: 500; font-size: .98rem; color: var(--sp-negro); padding: 0 !important; }
body .sp-nav a:hover .elementor-icon-list-text { color: var(--sp-oxido); }
body .sp-encabezado .sp-boton-wa .elementor-button { padding: 10px 18px; font-size: .95rem; }
@media (max-width: 860px) { body .sp-nav { display: none; } }
@media (max-width: 420px) {
	body .sp-logo img { height: 44px; }
	body .sp-encabezado .sp-boton-wa .elementor-button-text { display: none; }
	body .sp-encabezado .sp-boton-wa .elementor-button { padding: 10px 12px; }
}

/* ---------- Banner de temporada ---------- */

body .e-con.sp-temporada { background: var(--sp-marino); }
body .e-con.sp-temporada > .e-con.sp-contenido {
	flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px 24px; padding-block: 14px;
}
body .sp-temporada .elementor-widget { width: auto; }
body .sp-temporada .elementor-widget-text-editor { color: var(--sp-blanco); font-weight: 500; }
body .sp-temporada strong { font-family: var(--sp-display); font-weight: 600; font-size: 1.12rem; color: var(--sp-durazno); margin-right: 8px; }
body .sp-temporada a { color: var(--sp-blanco); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Portada ---------- */

body .e-con.sp-hero > .e-con.sp-contenido {
	--display: grid;
	display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
	gap: clamp(32px, 6vw, 72px); padding-block: clamp(56px, 8vw, 104px);
}
body .e-con.sp-hero-texto { gap: 22px; padding: 0; min-width: 0; }
body .sp-molu img { width: 100%; height: auto; }
@media (max-width: 820px) {
	body .e-con.sp-hero > .e-con.sp-contenido { grid-template-columns: minmax(0, 1fr); }
	body .sp-molu { max-width: 360px; margin-inline: auto; order: -1; }
}

/* ---------- Fotos (imágenes de la página) ---------- */

body .sp-foto img {
	width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
	border-radius: 10px; background: color-mix(in srgb, var(--sp-blanco) 55%, transparent);
}
body .sp-foto-ancha img { aspect-ratio: 16 / 9; }
body .sp-retrato img { aspect-ratio: 4 / 5; }

/* ---------- Segmentos ---------- */

body .e-con.sp-segmentos { gap: 28px; padding: 0; }
body .e-con.sp-segmento {
	--sp-tinta: var(--sp-durazno);
	--display: grid;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(24px, 4vw, 48px);
	padding: clamp(24px, 4vw, 44px);
	border-radius: 22px;
	background: color-mix(in srgb, var(--sp-tinta) 38%, var(--sp-blanco));
	scroll-margin-top: 90px;
}
body .e-con.sp-familias { --sp-tinta: var(--sp-cielo); }
body .e-con.sp-docentes { --sp-tinta: var(--sp-lima); }
body .e-con.sp-eventos  { background: color-mix(in srgb, var(--sp-naranja) 14%, var(--sp-blanco)); }
body .e-con.sp-segmento-texto { gap: 16px; padding: 0; align-content: start; min-width: 0; }
body .e-con.sp-segmento-texto > .sp-boton-wa { margin-top: 6px; }
body .e-con.sp-galeria {
	--display: grid;
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; align-content: start;
}
body .e-con.sp-galeria > .elementor-widget:first-child { grid-column: 1 / -1; }
body .e-con.sp-galeria > .elementor-widget:first-child img { aspect-ratio: 16 / 9; }
@media (max-width: 820px) { body .e-con.sp-segmento { grid-template-columns: minmax(0, 1fr); } }

body .sp-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
body .sp-chips .elementor-icon-list-item { margin: 0 !important; padding: 4px 12px !important; background: var(--sp-blanco); border-radius: 999px; }
body .sp-chips .elementor-icon-list-item::after { display: none !important; }
body .sp-chips .elementor-icon-list-text { font-size: .9rem; font-weight: 500; color: var(--sp-negro); padding: 0 !important; }

body .e-con.sp-kits { background: var(--sp-blanco); border-radius: var(--sp-radio); padding: 18px 20px; gap: 12px; }
body .e-con.sp-kit { gap: 2px; padding: 10px 0 0; border-top: 1px solid var(--sp-linea); }
body .sp-kit-nombre .elementor-heading-title { font-family: var(--sp-texto); font-size: 1rem; font-weight: 600; }
body .sp-kit .elementor-widget-text-editor { font-size: .93rem; color: var(--sp-carbon); }

/* ---------- Listas con punto naranja ---------- */

body .sp-lista .elementor-icon-list-item { padding: 0 0 0 18px !important; position: relative; margin-bottom: 8px; }
body .sp-lista .elementor-icon-list-item::before {
	content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-naranja);
}
body .sp-lista .elementor-icon-list-item::after { display: none !important; }
body .sp-lista .elementor-icon-list-text { font-size: 1rem; color: var(--sp-negro); padding: 0 !important; }

/* ---------- Grillas ---------- */

body .e-con.sp-grilla-3 {
	--display: grid;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 0;
}
body .e-con.sp-columna { gap: 14px; padding: 0; }
@media (max-width: 820px) { body .e-con.sp-grilla-3 { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Lo que nos diferencia ---------- */

body .sp-fondo-negro .sp-h2 .elementor-heading-title,
body .sp-fondo-negro .sp-h3 .elementor-heading-title { color: var(--sp-blanco); }
body .sp-fondo-negro .sp-etiqueta .elementor-heading-title { color: var(--sp-durazno); }
body .e-con.sp-dif-grilla {
	--display: grid;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px 44px; padding: 0;
}
body .e-con.sp-dif { gap: 8px; padding: 18px 0 0; border-top: 2px solid var(--sp-naranja); align-content: start; }
body .e-con.sp-dif.sp-sustentable { border-top-color: var(--sp-lima); }
body .sp-dif .sp-h3 .elementor-heading-title { font-size: 1.3rem; }
body .sp-dif .elementor-widget-text-editor { color: color-mix(in srgb, var(--sp-arena) 82%, transparent); font-size: .98rem; }

/* ---------- Cómo trabajamos ---------- */

body .e-con.sp-pasos {
	--display: grid;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding: 0; counter-reset: sp-paso;
}
body .e-con.sp-paso { gap: 8px; padding: 0; counter-increment: sp-paso; }
/* Elementor usa ::before de los contenedores para la superposición de fondo
   (posición absoluta): se anula para que el número quede arriba del título. */
body .e-con.sp-paso::before {
	content: counter(sp-paso) !important;
	position: static !important;
	inset: auto !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
	flex: none;
	font-family: var(--sp-display); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--sp-blanco);
	width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--sp-naranja) !important;
	display: grid !important; place-items: center;
}
body .sp-paso .sp-h3 .elementor-heading-title { font-size: 1.2rem; }
body .sp-paso .elementor-widget-text-editor { font-size: .95rem; color: var(--sp-carbon); }
@media (max-width: 900px) { body .e-con.sp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { body .e-con.sp-pasos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Testimonios ---------- */

body .e-con.sp-testi-grilla {
	--display: grid;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; padding: 0;
}
body .sp-testi .elementor-testimonial-wrapper {
	background: var(--sp-arena); border-radius: var(--sp-radio); padding: 22px; text-align: left; height: 100%;
	display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
body .sp-testi .elementor-testimonial-content {
	font-family: var(--sp-display); font-weight: 500; font-size: 1.18rem; line-height: 1.3; color: var(--sp-negro); margin: 0;
}
body .sp-testi .elementor-testimonial-meta { margin: 0; }
body .sp-testi .elementor-testimonial-name { font-family: var(--sp-texto); font-weight: 700; font-size: .9rem; color: var(--sp-negro); }
body .sp-testi .elementor-testimonial-job { font-family: var(--sp-texto); font-size: .88rem; color: var(--sp-carbon); }

/* ---------- Clientes ---------- */

body .e-con.sp-logos {
	--display: grid;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; padding: 0;
}
body .sp-logo-cliente img {
	width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; padding: 14px;
	border: 1px solid var(--sp-linea); border-radius: 10px; background: var(--sp-blanco);
	filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s;
}
body .sp-logo-cliente a:hover img { filter: none; opacity: 1; }

/* ---------- Nosotros ---------- */

body .e-con.sp-nosotros {
	--display: grid;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding: 0; align-items: start;
}
body .e-con.sp-historia { gap: 18px; padding: 0; }
body .e-con.sp-equipo {
	--display: grid;
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0;
}
body .e-con.sp-persona { gap: 10px; padding: 0; }
body .sp-persona .sp-h3 .elementor-heading-title { font-size: 1.3rem; }
body .sp-rol { font-weight: 600; font-size: .9rem; color: var(--sp-oxido); }
body .sp-persona .elementor-widget-text-editor:not(.sp-rol) { font-size: .93rem; color: var(--sp-carbon); }
body .sp-dupla { grid-column: 1 / -1; font-style: italic; color: var(--sp-carbon); }
body .e-con.sp-mvv {
	--display: grid;
	display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 20px; padding: 0;
}
body .e-con.sp-tarjeta { background: var(--sp-blanco); border-radius: var(--sp-radio); padding: 24px; gap: 10px; }
body .sp-valores p { margin: 0 0 8px; font-size: .93rem; }
@media (max-width: 900px) { body .e-con.sp-nosotros, body .e-con.sp-mvv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { body .e-con.sp-equipo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Respaldo institucional ---------- */

body .e-con.sp-respaldo { background: var(--sp-blanco); border-block: 1px solid var(--sp-linea); }
body .e-con.sp-respaldo > .e-con.sp-contenido {
	flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 16px 36px; padding-block: 36px; text-align: center;
}
body .sp-respaldo .elementor-widget { width: auto; }
body .sp-respaldo .elementor-widget-text-editor { font-weight: 500; color: var(--sp-carbon); }
body .sp-respaldo img { height: 54px; width: auto; }

/* ---------- Cierre ---------- */

body .e-con.sp-cierre > .e-con.sp-contenido { align-items: center; text-align: center; gap: 24px; }
body .sp-cierre .sp-h2 .elementor-heading-title { color: var(--sp-blanco); max-width: 22ch; margin-inline: auto; }
body .sp-cierre .e-con.sp-acciones { justify-content: center; }
body .sp-cierre .sp-boton-wa .elementor-button { background: var(--sp-negro); }
body .sp-cierre .sp-boton-wa .elementor-button:hover { background: var(--sp-carbon); }
body .sp-cierre .sp-boton-linea .elementor-button { border-color: var(--sp-blanco); color: var(--sp-blanco); }
body .sp-cierre .sp-boton-linea .elementor-button:hover { background: var(--sp-blanco); color: var(--sp-oxido); }

/* ---------- Pie ---------- */

body .e-con.sp-pie { background: var(--sp-negro); padding-block: 56px 40px; }
body .e-con.sp-pie-grilla {
	--display: grid;
	display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; padding: 0;
}
body .e-con.sp-pie .e-con.sp-columna { gap: 12px; }
body .sp-pie .elementor-widget-text-editor { color: var(--sp-arena); }
body .sp-pie .elementor-widget-image { text-align: left; }
body .sp-pie img { height: 44px; width: auto; max-width: none; object-fit: contain; }
body .sp-pie .sp-etiqueta .elementor-heading-title { color: var(--sp-durazno); }
body .sp-pie .elementor-icon-list-text { color: var(--sp-arena); }
body .sp-pie a:hover .elementor-icon-list-text { color: var(--sp-durazno); }
body .sp-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--sp-carbon); font-size: .82rem; font-weight: 300; }
body .sp-pie .sp-legal { color: var(--sp-piedra); }
@media (max-width: 760px) { body .e-con.sp-pie-grilla { grid-template-columns: minmax(0, 1fr); } }

/* ---------- WhatsApp flotante (lo agrega el tema) ---------- */

.sp-wa-flotante {
	position: fixed; z-index: 60;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--sp-naranja); color: var(--sp-blanco);
	display: grid; place-items: center;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sp-negro) 30%, transparent);
	transition: background-color .2s;
}
.sp-wa-flotante:hover, .sp-wa-flotante:focus { background: var(--sp-oxido); color: var(--sp-blanco); }
.sp-wa-flotante svg { width: 28px; height: 28px; }