/*
Theme Name: GeneratePress Child - Santa Teresita
Theme URI: https://santateresita178.com
Description: Child theme de GeneratePress para el sitio del Colegio Santa Teresita del Niño Jesús. Permite hacer cambios de código (CSS/PHP) sin que se pierdan al actualizar el tema padre.
Author: Nicolás Sosa
Template: generatepress
Version: 1.2.5
Text Domain: generatepress-child
*/

/* ==========================================================================
   Estilos personalizados del Colegio Santa Teresita
   Agregá tu CSS a partir de acá. Este archivo NUNCA se pisa cuando
   GeneratePress se actualiza (a diferencia de editar el tema padre directo).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Paleta y variables globales
   Tomado de lo que ya usa el sitio (rojo de los botones = #BD1B1B).
   Si el rojo institucional real es otro, cambiá solo estas líneas.
   -------------------------------------------------------------------------- */
:root {
	--st-primary: #bd1b1b;
	--st-primary-dark: #8f1414;
	--st-text: #222222;
	--st-text-soft: #5a5a5a;
	--st-radius: 6px;
	--st-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--st-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
	--st-transition: 220ms ease;
}

/* Mejora general de lectura: el sitio no fuerza un alto de línea cómodo */
body {
	line-height: 1.65;
}

::selection {
	background: var(--st-primary);
	color: #fff;
}

a {
	transition: color var(--st-transition);
}

/* --------------------------------------------------------------------------
   2) Botones (Elementor Button widget, se usa en todo el sitio)
   Mantiene el color y el "grow" que ya tiene, pero suma una sombra e
   levantamiento sutil al pasar el mouse: se siente más premium sin
   cambiar la identidad visual existente.
   -------------------------------------------------------------------------- */
.elementor-button,
.elementor-button-link {
	border-radius: var(--st-radius) !important;
	box-shadow: var(--st-shadow-sm);
	transition: transform var(--st-transition), box-shadow var(--st-transition);
}

.elementor-button:hover,
.elementor-button-link:hover {
	box-shadow: var(--st-shadow-md);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   3) Navegación principal (Elementor Nav Menu widget)
   -------------------------------------------------------------------------- */
.elementor-nav-menu {
	letter-spacing: 0.02em;
}

.elementor-nav-menu .elementor-item {
	transition: color var(--st-transition);
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--st-primary) !important;
}

/* --------------------------------------------------------------------------
   4) Títulos (Elementor Heading widget, usa la tipografía Alegreya SC)
   Un poco más de tracking para que la versalita se lea más prolija.
   -------------------------------------------------------------------------- */
.elementor-heading-title {
	letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   5) Sliders (Elementor Slides widget - se usa en el hero y en Novedades)
   Flechas y paginación con el color institucional en vez del gris genérico
   por defecto, más una transición de imagen más suave.
   -------------------------------------------------------------------------- */
.elementor-widget-slides .swiper-button-next,
.elementor-widget-slides .swiper-button-prev {
	background: rgba(189, 27, 27, 0.75);
	border-radius: 50%;
	width: 42px;
	height: 42px;
	transition: background var(--st-transition);
}

.elementor-widget-slides .swiper-button-next:hover,
.elementor-widget-slides .swiper-button-prev:hover {
	background: var(--st-primary);
}

.elementor-widget-slides .swiper-button-next svg,
.elementor-widget-slides .swiper-button-prev svg {
	width: 16px;
	height: 16px;
}

.elementor-widget-slides .swiper-pagination-bullet-active {
	background: var(--st-primary) !important;
}

.elementor-widget-slides .swiper-slide-bg {
	transition: transform 6s ease;
}

.elementor-widget-slides .swiper-slide-active .swiper-slide-bg {
	transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   6) Portada (Inicio) - ajustes específicos de esta página, sin tocar
   contenido/estructura, solo trato visual de la sección "Novedades".
   Si en algún momento cambian el ID de la sección desde Elementor, esta
   regla deja de aplicar sola (no rompe nada, simplemente no hace nada).
   -------------------------------------------------------------------------- */
body.page-id-6319 .elementor-element-31eb8f4c img {
	transition: transform 400ms ease;
}

body.page-id-6319 .elementor-element-31eb8f4c .swiper-slide:hover img {
	transform: scale(1.04);
}

/* Título principal de portada (arriba del slider): más presencia de marca
   y más aire respecto al slider, para que funcione como una portada real. */
body.page-id-6319 .elementor-element-8a589c0 .elementor-heading-title {
	color: var(--st-primary);
	margin-bottom: 0.5em;
}

/* Sección "Seguinos en Instagram": antes era una sola imagen (plantilla de
   Canva) que no combinaba con la tipografía del resto del sitio. Ahora es
   contenido real (título + handle + botón) con una franja de color
   institucional para diferenciarla del resto de la página. */
body.page-id-6319 .elementor-element-1784d69 {
	background: var(--st-primary);
	padding: 70px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

body.page-id-6319 .elementor-element-1784d69 .elementor-heading-title {
	color: #fff;
}

body.page-id-6319 .elementor-element-1784d69 .elementor-widget-button {
	margin-top: 10px;
}

/* Título de la sección "Novedades": una pequeña marca de identidad
   (línea roja institucional) para darle firma propia, en vez de un
   título suelto sin jerarquía. */
body.page-id-6319 .elementor-element-e69a659 .elementor-heading-title {
	position: relative;
	padding-bottom: 0.35em;
}

body.page-id-6319 .elementor-element-e69a659 .elementor-heading-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 3px;
	background: var(--st-primary);
	border-radius: 2px;
}

/* Tarjeta "Egresados 2026": un tinte muy suave (no gris, no blanco) para
   que la página tenga ritmo entre secciones en vez de ser todo blanco
   de punta a punta. */
body.page-id-6319 .elementor-element-34a48de2 {
	background: #fdf4f0 !important;
}

/* Imágenes de las tarjetas "Egresados 2026" y "¿Cómo comenzó todo?":
   mismo tratamiento visual (borde redondeado + sombra + leve zoom al
   pasar el mouse) que ya se usa en el feed de Instagram, para que las
   fotos se sientan "tarjetas" y no imágenes sueltas pegadas al texto. */
body.page-id-6319 .elementor-element-34a48de2 .elementor-widget-image img,
body.page-id-6319 .elementor-element-197d755 .elementor-widget-image img {
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-md);
	transition: transform var(--st-transition);
}

body.page-id-6319 .elementor-element-34a48de2 .elementor-widget-image img:hover,
body.page-id-6319 .elementor-element-197d755 .elementor-widget-image img:hover {
	transform: scale(1.02);
}

/* Footer: hoy es blanco puro, igual que el resto de la página, así que
   no cierra visualmente el recorrido. Le damos un fondo gris suave
   (el mismo tono que ya usa "Novedades") y un filete rojo arriba a modo
   de remate prolijo. (De paso: había un texto de copyright duplicado en
   dos widgets distintos - se borró la sección repetida desde Elementor,
   quedó uno solo, el que ya vivía dentro del footer.) */
body.page-id-6319 .elementor-element-7a11a857 {
	background: #f7f7f7 !important;
	border-top: 3px solid var(--st-primary);
}

/* --------------------------------------------------------------------------
   7) Detalle general: scroll suave al navegar con anclas
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   8) Página "Actualidad" - feed de Instagram (Smash Balloon)
   -------------------------------------------------------------------------- */
body.page-id-9146 .entry-title {
	text-align: center;
	font-size: 3rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.2em;
}

.st-actualidad {
	background: #1a1f2b;
	padding: 50px 20px 60px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.st-actualidad-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.st-actualidad-header p {
	color: #e8d9d9;
	font-size: 1.1rem;
	line-height: 1.6;
}

.st-actualidad-feed {
	max-width: 1100px;
	margin: 0 auto;
}

.sbi_item {
	border-radius: var(--st-radius);
	overflow: hidden;
	box-shadow: var(--st-shadow-sm);
	transition: transform var(--st-transition), box-shadow var(--st-transition);
}

.sbi_item:hover {
	transform: translateY(-4px);
	box-shadow: var(--st-shadow-md);
}

.sbi_load_btn,
.sbi_follow_btn a {
	background: var(--st-primary) !important;
	border-radius: var(--st-radius) !important;
	border: none !important;
	transition: background var(--st-transition), transform var(--st-transition);
}

.sbi_load_btn:hover,
.sbi_follow_btn a:hover {
	background: var(--st-primary-dark) !important;
	transform: translateY(-2px);
}