/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.4.1774277059
Updated: 2026-03-23 14:44:19

*/

/* Quitar borde azul / gris / highlight cuando haces clic o enfocas elementos */
*:focus,
*:focus-visible,
*:focus-within {
    outline: none !important;
    box-shadow: none !important;
}


/*------ANIMACIONES--------*/
  .animar {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.animar.visible {
    opacity: 1;
    transform: translateY(0);
}

.animar_2 {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.animar_2.visible {
    opacity: 1;
    transform: translateY(0);
}
/*------FIN - ANIMACIONES--------*/



/* -------------MENU PRINCIPAL MODIFICACIONES-------------*/
.wp-block-navigation-item__content {
	transition: transform 0.1s ease;
}

.wp-block-navigation-item__content:hover {
	transform: scale(1.05);
}
/* -------------FIN - MENU PRINCIPAL MODIFICACIONES*-----------------/


/* ---------------SHORTCODE CARRUSEL DE ITEMS---------------*/
/* Contenedor principal */
.contenedor-carrusel-avisos {
    position: relative;
    width: 100%;
    height: 100px; /* Ajusta la altura según necesites */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 10px 0;
}

/* Diseño base de cada aviso */
.aviso-item {
	font-family: 'Manrope';
    position: absolute;
    width: 160px; /* Ancho de cada tarjeta */
    padding: 0.6rem 0.4rem;
    background-color: #0095FF; /* Fondo blanco */
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    transition: all 0.6s ease-in-out; /* Esta es la magia de la transición suave */
    opacity: 0;
    z-index: 1;
    box-sizing: border-box;
    /* Estado por defecto (oculto en el fondo) */
    transform: scale(0.6) translateX(0);
}

/* El aviso de la izquierda */
.aviso-item.prev {
    transform: scale(0.85) translateX(-100%);
    opacity: 0.5;
    z-index: 2;
	background: #5280c57d;
}

/* El aviso central (Grande / con Zoom) */
.aviso-item.active {
    transform: scale(1.1) translateX(0);
    opacity: 1;
    z-index: 3;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Sombra más fuerte para resaltar */
    border: none; /* Opcional: Color de borde para destacar, cámbialo a tu gusto */
	background: #0095FF;
}

/* El aviso de la derecha */
.aviso-item.next {
    transform: scale(0.85) translateX(100%);
    opacity: 0.5;
    z-index: 2;
	background: #5280c57d;
}

/* Ocultar el cuarto elemento de forma suave */
.aviso-item.oculto {
    transform: scale(0.6) translateX(0);
    opacity: 0;
    z-index: 1;
}

/* Responsividad para móviles pequeños */
@media (max-width: 600px) {
    .aviso-item { width: 200px; font-size: 14px; }
    .aviso-item.prev { transform: scale(0.8) translateX(-80%); }
    .aviso-item.next { transform: scale(0.8) translateX(80%); }
}

/* --------------- FIN - SHORTCODE CARRUSEL DE ITEMS---------------*/



/* ---------------SHORTCODE CARRUSEL EN CINTA (NUEVO)---------------*/
/* Contenedor principal */
.contenedor-carrusel-flujo {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Esto oculta los elementos que salen de la pantalla */
    margin: 10px 0;
}

/* Diseño base y comportamiento de transición */
.item-flujo {
    font-family: 'Manrope', sans-serif;
    position: absolute;
    width: 160px;
    padding: 0.6rem 0.4rem;
    border-radius: 12px;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    box-sizing: border-box;
    transition: all 0.6s ease-in-out; /* La transición suave entre posiciones */
    
    /* Estado por defecto (escondidos fuera de pantalla) */
    opacity: 0;
    visibility: hidden;
    transform: translateX(0) scale(0.5);
    z-index: 1;
}

/* --- LAS POSICIONES EXACTAS --- */

/* 1. Entra por la derecha (invisible pero preparándose) */
.item-flujo.oculto-der {
    transform: translateX(612px) scale(0.8);
    opacity: 0; visibility: hidden;
}

/* 2. Aparece en el extremo derecho tenue */
.item-flujo.tenue-der {
    transform: translateX(437px) scale(0.9);
    opacity: 0.5; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6;
    z-index: 2; visibility: visible;
}

/* 3. Las 4 posiciones activas centrales (100% visibles y con color principal) */
.item-flujo.activo-4 { transform: translateX(262px) scale(1); opacity: 1; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6; z-index: 3; visibility: visible; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.item-flujo.activo-3 { transform: translateX(87px) scale(1); opacity: 1; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6; z-index: 3; visibility: visible; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.item-flujo.activo-2 { transform: translateX(-87px) scale(1); opacity: 1; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6; z-index: 3; visibility: visible; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.item-flujo.activo-1 { transform: translateX(-262px) scale(1); opacity: 1; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6; z-index: 3; visibility: visible; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* 4. Sale por el extremo izquierdo tenue */
.item-flujo.tenue-izq {
    transform: translateX(-437px) scale(0.9);
    opacity: 0.5; background: linear-gradient(45deg, #E5E5E5, #E5E5EB); color: #0378E6;
    z-index: 2; visibility: visible;
}

/* 5. Se oculta hacia la izquierda para luego reciclarse */
.item-flujo.oculto-izq {
    transform: translateX(-612px) scale(0.8);
    opacity: 0; visibility: hidden;
}


/* --- ADAPTACIÓN RESPONSIVA --- */
/* En Tablets reducimos separaciones */
@media (max-width: 900px) {
    .item-flujo { width: 110px; font-size: 11px; }
    .item-flujo.oculto-der { transform: translateX(380px) scale(0.8); }
    .item-flujo.tenue-der  { transform: translateX(280px) scale(0.9); }
    .item-flujo.activo-4   { transform: translateX(168px) scale(1); }
    .item-flujo.activo-3   { transform: translateX(56px) scale(1); }
    .item-flujo.activo-2   { transform: translateX(-56px) scale(1); }
    .item-flujo.activo-1   { transform: translateX(-168px) scale(1); }
    .item-flujo.tenue-izq  { transform: translateX(-280px) scale(0.9); }
    .item-flujo.oculto-izq { transform: translateX(-380px) scale(0.8); }
}

/* En Móviles hacemos que encajen los 4 en pantalla */
@media (max-width: 600px) {
    .item-flujo { width: 78px; font-size: 9px; padding: 0.4rem 0.2rem; border-radius: 8px;}
    .item-flujo.oculto-der { transform: translateX(270px) scale(0.8); }
    .item-flujo.tenue-der  { transform: translateX(210px) scale(0.9); }
    .item-flujo.activo-4   { transform: translateX(130px) scale(1); }
    .item-flujo.activo-3   { transform: translateX(43px) scale(1); }
    .item-flujo.activo-2   { transform: translateX(-43px) scale(1); }
    .item-flujo.activo-1   { transform: translateX(-130px) scale(1); }
    .item-flujo.tenue-izq  { transform: translateX(-210px) scale(0.9); }
    .item-flujo.oculto-izq { transform: translateX(-270px) scale(0.8); }
}
/* --------------- FIN - SHORTCODE CARRUSEL EN CINTA ---------------*/