/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    http://rminstitucional.local
Description:  Tema hijo de Twenty Twenty-Five para RMinstitucional.
Author:       RMinstitucional
Author URI:   http://rminstitucional.local
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  twentytwentyfive-child
*/


/* Plantilla de espacios */

.header-espacios {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.header-espacios .caja-texto {
display: flex;
flex-direction: column;
justify-content: center;
}

@media (max-width: 800px) {
	.header-espacios {
		grid-template-columns: 1fr;
	}

	.header-espacios h1 {
		margin-left: auto !important;
	}

	.header-espacios .caja-texto {
		order: 2;
		text-align: center;
		margin-top: 2rem;
		
	}

	.header-espacios figure {
		order: 1;
	}
}



/* Links: sin subrayado por defecto */
a {
	text-decoration: none;
}

/* ESPACIO PORQUE ELEGIRNOS (Triangulo) */
.espaciadoporquelegirnos {
	height: 800px !important;
}


.porqueelegirnos {
	margin-top:-800px !important;
}


footer {
	margin-top: 0;
}



@media (max-width: 940px) {
  .espaciadoporquelegirnos {
	height: 1080px !important;
}


.porqueelegirnos {
	margin-top:-1080px !important;
}

.fondoinclinado {
	clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%) !important;
}

}


@media (max-width: 500px)  {
	.espaciadoporquelegirnos {
	height: 1400px !important;
}


.porqueelegirnos {
	margin-top:-1400px !important;
}
	
}


@media (max-width: 720px) {
footer .direccion {
	margin-top: 2rem !important;
text-align: left !important;

}

.blobs-social-icons__list {
	justify-content: left !important;
}
}


/* Esconder por breakpoint */
@media (min-width: 901px) {
  .esconder-desktop { display: none !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .esconder-tablet { display: none !important; }
}

@media (max-width: 600px) {
  .esconder-mobile { display: none !important; }
}

/* ================================================================
 * CORE BLOCKS
 * Acá agrupamos el CSS que aplica a los bloques nativos de WordPress
 * (core/*) para customizar su apariencia en todo el sitio.
 * ================================================================ */

/* Bloque de lista (core/list): bullet siempre naranja, el texto
 * conserva su color. La viñeta hereda el color de texto, por eso
 * se pinta solo el marker con ::marker. */
.wp-block-list li::marker {
	color: #f08427;
}

/* Bloque de cita (core/quote): la atribución (cite) en azul accent-1. */
.wp-block-quote cite {
	color: var( --wp--preset--color--accent-1, #1463af );
}

/* Bloque de imagen (core/image): pie de foto (figcaption) en azul accent-1. */
.wp-block-image figcaption {
	color: var( --wp--preset--color--accent-1, #1463af );
}

/* Bloque navegación entre entradas (core/post-navigation-link):
 * tipografía más pequeña. */
.wp-block-post-navigation-link {
	font-size: var( --wp--preset--font-size--small );
}

/* ================================================================
 * ANIMACION: fade-in-up
 * Agregá la clase .fade-in-up a cualquier elemento para que aparezca
 * con un fade + deslizamiento hacia arriba cuando entra en pantalla.
 *
 * El estado inicial (oculto) lo define .fade-in-up, y el JS de
 * script.js agrega la clase .is-visible cuando el elemento entra en
 * viewport, disparando la transición.
 * ================================================================ */
.fade-in-up {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Estado final: se agrega por JS al entrar en pantalla. */
.fade-in-up.is-visible {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 0.1s;
}

/* Accesibilidad: respetar preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.fade-in-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ================================================================
 * PÁGINA CONTACTO (page-id-11)
 * Hero con gradiente azul y títulos en azul de marca.
 * El formulario en sí vive en assets/css/contact-form-7.css.
 * Estas reglas van en el theme (no en customCSS de bloques)
 * para garantizar cascada y especificidad.
 * ================================================================ */

/* Hero: gradiente azul como el home (fondo inclinado / hero). */
.page-id-11 .ticss-contacto-hero {
	background: #1e3765;
	background: linear-gradient(90deg, rgba(30, 55, 101, 1) 0%, rgba(16, 69, 139, 1) 100%);
}

/* Títulos de la página en azul de marca. */
.page-id-11 .ticss-contacto-card h2,
.page-id-11 .ticss-contacto-info h3 {
	color: #1463af;
}

/* Botón "Ver en Google Maps": azul de marca, hover naranja. */
.page-id-11 .ticss-contacto-info .wp-block-button__link {
	background-color: #1463af;
	color: #ffffff;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

.page-id-11 .ticss-contacto-info .wp-block-button__link:hover {
	background-color: #f08427;
	color: #ffffff;
}