/* =========================================================================
 * UCO Bolivian Oil — Capa de estilo elaborada (cards + movimiento).
 * Se carga después del CSS de marca; no toca el contenido (solo selectores).
 * ========================================================================= */

:root{
	--ubo-green:#7DC243;
	--ubo-green-dark:#4F9A45;
	--ubo-surface:#F4F9EC;
	--ubo-shadow:0 10px 30px rgba(40,60,20,.08);
	--ubo-shadow-lg:0 22px 48px rgba(125,194,67,.22);
	--ubo-radius:18px;
	--ubo-ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------------- *
 * 0. Fondo degradado verde en TODAS las páginas.
 * ----------------------------------------------------------------------- */
body{
	background:linear-gradient(165deg,#eaf6d6 0%,#c7e79a 32%,#9fd368 66%,#bce28d 100%) no-repeat fixed;
}
/* Cabecera translúcida para que el degradado se perciba bajo ella */
body header.wp-block-group{background:rgba(255,255,255,.90) !important;backdrop-filter:saturate(1.15) blur(6px)}
/* Las bandas verdes sólidas se funden con el degradado como capas más marcadas */
body .has-ubo-surface-background-color{background:rgba(125,194,67,.22) !important}
body main{position:relative}

/* ----------------------------------------------------------------------- *
 * 1. Animaciones de aparición al hacer scroll (clase añadida por JS).
 * ----------------------------------------------------------------------- */
.ubo-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ubo-ease),transform .7s var(--ubo-ease)}
.ubo-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
	.ubo-reveal{opacity:1 !important;transform:none !important;transition:none !important}
	*{scroll-behavior:auto !important}
}

/* ----------------------------------------------------------------------- *
 * 2. Título de sección — acento con degradado animado.
 * ----------------------------------------------------------------------- */
.ubo-section-title{position:relative;font-weight:800;letter-spacing:-.01em}
.ubo-section-title:after{
	content:"";display:block;width:72px;height:5px;border-radius:6px;margin:18px auto 0;
	background:linear-gradient(90deg,var(--ubo-green),var(--ubo-green-dark));
	transition:width .5s var(--ubo-ease)}
.ubo-section-title.is-left:after{margin-left:0}
.ubo-section-title.is-visible:after{width:120px}

/* ----------------------------------------------------------------------- *
 * 3. Icon-boxes ("¿Por qué elegirnos?") — tarjeta premium con movimiento.
 * ----------------------------------------------------------------------- */
.ubo-iconbox{
	position:relative;background:#fff;border:1px solid #eef1ea;border-radius:var(--ubo-radius);
	padding:38px 28px 32px;height:100%;box-shadow:var(--ubo-shadow);overflow:hidden;
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease),border-color .35s ease}
.ubo-iconbox:before{
	content:"";position:absolute;top:0;left:0;right:0;height:5px;
	background:linear-gradient(90deg,var(--ubo-green),var(--ubo-green-dark));
	transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ubo-ease)}
.ubo-iconbox:hover{transform:translateY(-10px);box-shadow:var(--ubo-shadow-lg);border-color:transparent}
.ubo-iconbox:hover:before{transform:scaleX(1)}
.ubo-iconbox img{
	width:74px;height:74px;object-fit:contain;margin-bottom:18px;padding:12px;border-radius:16px;
	background:radial-gradient(circle at 30% 30%,rgba(125,194,67,.18),rgba(125,194,67,.05));
	transition:transform .4s var(--ubo-ease)}
.ubo-iconbox:hover img{transform:scale(1.12) rotate(-4deg)}
.ubo-iconbox h3{font-size:1.25rem;margin:0 0 .55em;color:#2c2c2c;font-weight:700}
.ubo-iconbox p{margin:0;color:#5d6358;font-size:.98rem;line-height:1.65}

/* ----------------------------------------------------------------------- *
 * 4. Tarjetas de teléfono ("Áreas de contacto").
 * ----------------------------------------------------------------------- */
.ubo-phone-card{
	position:relative;border-radius:var(--ubo-radius);padding:38px 22px;text-align:center;overflow:hidden;
	background:linear-gradient(135deg,var(--ubo-green) 0%,var(--ubo-green-dark) 100%);
	box-shadow:0 12px 28px rgba(79,154,69,.25);
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.ubo-phone-card:after{
	content:"";position:absolute;width:160px;height:160px;border-radius:50%;
	background:rgba(255,255,255,.12);top:-70px;right:-50px;transition:transform .5s var(--ubo-ease)}
.ubo-phone-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 22px 44px rgba(79,154,69,.38)}
.ubo-phone-card:hover:after{transform:scale(1.5)}
.ubo-phone-card h3{margin:0 0 .4em;color:#fff;font-size:1.4rem;font-weight:700;position:relative;z-index:1}
.ubo-phone-card p{margin:0;color:#fff;font-size:1.1rem;font-weight:600;letter-spacing:.4px;position:relative;z-index:1}

/* ----------------------------------------------------------------------- *
 * 5. Puntos de acopio — tarjeta de texto + mapa con realce.
 * ----------------------------------------------------------------------- */
.ubo-location{
	background:#fff;border-radius:var(--ubo-radius);padding:30px 30px;box-shadow:var(--ubo-shadow);
	border-left:5px solid var(--ubo-green);transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.ubo-location:hover{transform:translateY(-6px);box-shadow:var(--ubo-shadow-lg)}
.ubo-location h3{color:var(--ubo-green-dark);margin:0 0 .15em;font-weight:800}
.ubo-location h4{margin:0 0 .7em;color:var(--ubo-green);font-weight:600}
.ubo-location p{margin:.2em 0;color:#4a4f45}
.ubo-embed iframe{
	width:100%;border:0;border-radius:var(--ubo-radius);box-shadow:var(--ubo-shadow);
	transition:transform .4s var(--ubo-ease),box-shadow .4s var(--ubo-ease)}
.ubo-embed:hover iframe{transform:translateY(-4px);box-shadow:var(--ubo-shadow-lg)}
.ubo-map-link a{
	display:inline-block;background:linear-gradient(135deg,#4285F4,#3367d6);color:#fff;padding:9px 20px;
	border-radius:24px;text-decoration:none;font-size:13px;font-weight:600;margin-top:10px;
	box-shadow:0 6px 16px rgba(66,133,244,.3);transition:transform .25s var(--ubo-ease),box-shadow .25s ease}
.ubo-map-link a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(66,133,244,.45)}

/* ----------------------------------------------------------------------- *
 * 6. Noticias (bloque Latest Posts) — cuadrícula de tarjetas.
 * ----------------------------------------------------------------------- */
/* Cuadrícula con CSS Grid real (evita el desborde por sumar gap + márgenes del core) */
.wp-block-latest-posts.is-grid{
	display:grid;gap:32px;margin:0;padding-left:0;list-style:none;grid-template-columns:repeat(3,1fr)}
.wp-block-latest-posts.is-grid.columns-2{grid-template-columns:repeat(2,1fr)}
.wp-block-latest-posts.is-grid.columns-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.wp-block-latest-posts.is-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.wp-block-latest-posts.is-grid{grid-template-columns:1fr}}
/* Noticias a ancho completo: gutters cómodos en pantallas grandes */
.ubo-news-grid.alignfull{padding-left:clamp(16px,4vw,72px);padding-right:clamp(16px,4vw,72px);box-sizing:border-box}
.wp-block-latest-posts.is-grid > li{
	width:auto;margin:0;
	background:#fff;border:1px solid #eef1ea;border-radius:var(--ubo-radius);overflow:hidden;
	box-shadow:var(--ubo-shadow);display:flex;flex-direction:column;
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.wp-block-latest-posts.is-grid > li:hover{transform:translateY(-10px);box-shadow:var(--ubo-shadow-lg)}
.wp-block-latest-posts.is-grid > li > figure{margin:0;overflow:hidden;aspect-ratio:16/10}
.wp-block-latest-posts__featured-image img{
	width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ubo-ease)}
.wp-block-latest-posts.is-grid > li:hover .wp-block-latest-posts__featured-image img{transform:scale(1.08)}
.wp-block-latest-posts.is-grid > li > .wp-block-latest-posts__post-title{
	display:block;padding:20px 22px 0;font-size:1.15rem;font-weight:700;line-height:1.35;color:#2c2c2c}
.wp-block-latest-posts.is-grid > li > .wp-block-latest-posts__post-title:hover{color:var(--ubo-green-dark)}
.wp-block-latest-posts.is-grid > li > .wp-block-latest-posts__post-date{
	padding:6px 22px 0;font-size:.82rem;color:var(--ubo-green);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.wp-block-latest-posts.is-grid > li > .wp-block-latest-posts__post-excerpt{
	padding:12px 22px 24px;margin:0;color:#5d6358;font-size:.95rem;line-height:1.6}

/* ----------------------------------------------------------------------- *
 * 6b. Página NOTICIAS (Query Loop de Ollie) — tarjetas redondeadas.
 *     Las entradas del listado ('li.wp-block-post') pasan a ser cards
 *     blancas redondeadas con sombra, separadas para que se vea el fondo.
 * ----------------------------------------------------------------------- */
.wp-block-post-template{gap:32px}
.wp-block-post-template > li.wp-block-post{
	background:#fff;border:1px solid #eef1ea;border-radius:var(--ubo-radius);
	padding:18px 18px 24px;box-shadow:var(--ubo-shadow);overflow:hidden;
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.wp-block-post-template > li.wp-block-post:hover{transform:translateY(-8px);box-shadow:var(--ubo-shadow-lg)}
/* Imagen destacada redondeada con zoom al pasar el cursor */
.wp-block-post-template > li.wp-block-post .wp-block-post-featured-image{
	border-radius:14px;overflow:hidden;margin-bottom:16px}
.wp-block-post-template > li.wp-block-post .wp-block-post-featured-image img{
	width:100%;filter:saturate(1.28) contrast(1.07) brightness(1.03);
	transition:transform .5s var(--ubo-ease),filter .4s var(--ubo-ease)}
.wp-block-post-template > li.wp-block-post:hover .wp-block-post-featured-image img{
	transform:scale(1.06);filter:saturate(1.42) contrast(1.1) brightness(1.05)}
/* Tipografía/acentos coherentes con las tarjetas de la portada */
.wp-block-post-template > li.wp-block-post .wp-block-post-title{line-height:1.3}
.wp-block-post-template > li.wp-block-post .wp-block-post-title a:hover{color:var(--ubo-green-dark)}
.wp-block-post-template > li.wp-block-post .wp-block-post-date{
	color:var(--ubo-green);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}
.wp-block-post-template > li.wp-block-post .wp-block-post-terms a{color:var(--ubo-green-dark)}

/* ----------------------------------------------------------------------- *
 * 6c. PORTADA — tarjetas de noticias estilo "overlay" (revelado al hover).
 *     Imagen a sangre completa + degradado verde de marca + título que sube
 *     y enlace "Leer historia" que aparece. Solo afecta a .ubo-news-grid.
 * ----------------------------------------------------------------------- */
.wp-block-latest-posts.ubo-news-grid.is-grid > li{
	position:relative;height:400px;border:none;background:none;padding:0;border-radius:var(--ubo-radius);
	overflow:hidden;box-shadow:var(--ubo-shadow);
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.wp-block-latest-posts.ubo-news-grid.is-grid > li:hover{transform:translateY(-8px);box-shadow:var(--ubo-shadow-lg)}

/* Imagen que llena la tarjeta; arranca con leve zoom y se reduce al hover */
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__featured-image{
	position:absolute;inset:0;margin:0;height:100%;width:100%;z-index:0}
/* El enlace que envuelve la imagen también debe llenar la tarjeta para que
   height:100% de la imagen se calcule contra los 400px (no contra el <a>). */
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__featured-image a{
	display:block;height:100%;width:100%}
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__featured-image img{
	width:100% !important;height:100% !important;object-fit:cover;object-position:center;transform:scale(1.06);
	transition:transform .5s var(--ubo-ease)}
.wp-block-latest-posts.ubo-news-grid > li:hover > .wp-block-latest-posts__featured-image img{transform:scale(1)}

/* Degradado verde de marca por encima de la imagen */
.wp-block-latest-posts.ubo-news-grid > li::after{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(to bottom,rgba(168,216,121,0) 0%,rgba(168,216,121,.35) 50%,rgba(125,194,67,.80) 100%)}

/* Ocultar fecha y extracto (la tarjeta overlay muestra solo título + enlace) */
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__post-date,
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__post-excerpt{display:none}

/* Título anclado abajo, semioculto; sube al hover */
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__post-title{
	display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:0 22px 22px;
	font-family:'Poppins',sans-serif;text-decoration:none;
	color:#111;font-size:1.25rem;font-weight:700;line-height:1.25;text-shadow:0 1px 3px rgba(255,255,255,.5);
	transform:translateY(42px);transition:transform .4s var(--ubo-ease)}
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__post-title:hover{text-decoration:none}
.wp-block-latest-posts.ubo-news-grid > li:hover > .wp-block-latest-posts__post-title{transform:translateY(0)}
/* Enlace "Leer historia" que aparece deslizándose al hover */
.wp-block-latest-posts.ubo-news-grid > li > .wp-block-latest-posts__post-title::after{
	content:"Leer historia »";display:block;margin-top:12px;font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:600;color:#111;
	text-shadow:0 1px 3px rgba(255,255,255,.5);opacity:0;transform:translateY(8px);
	transition:opacity .35s .05s var(--ubo-ease),transform .35s .05s var(--ubo-ease)}
.wp-block-latest-posts.ubo-news-grid > li:hover > .wp-block-latest-posts__post-title::after{opacity:1;transform:translateY(0)}

/* ----------------------------------------------------------------------- *
 * 7. Feature sections (media-text) — imagen con realce al pasar el cursor.
 * ----------------------------------------------------------------------- */
.wp-block-media-text__media{border-radius:var(--ubo-radius);overflow:hidden;box-shadow:var(--ubo-shadow)}
.wp-block-media-text__media img{transition:transform .6s var(--ubo-ease)}
.wp-block-media-text:hover .wp-block-media-text__media img{transform:scale(1.05)}
.wp-block-media-text .wp-block-button__link{
	background:linear-gradient(135deg,var(--ubo-green),var(--ubo-green-dark));border:none;
	box-shadow:0 8px 20px rgba(125,194,67,.32);transition:transform .25s var(--ubo-ease),box-shadow .25s ease}
.wp-block-media-text .wp-block-button__link:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(125,194,67,.45)}

/* Imágenes sueltas con borde redondo (Nosotros) — leve realce */
.wp-block-image.has-custom-border img{box-shadow:var(--ubo-shadow);transition:transform .45s var(--ubo-ease),box-shadow .45s ease}
.wp-block-image.has-custom-border:hover img{transform:translateY(-4px) scale(1.01);box-shadow:var(--ubo-shadow-lg)}

/* ----------------------------------------------------------------------- *
 * 8. Navegación — sin subrayado; realce por color al pasar el cursor.
 * ----------------------------------------------------------------------- */
.wp-block-navigation a,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation a:active,
.wp-block-navigation button,
.wp-block-navigation button:hover,
.wp-block-navigation button:focus,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active,
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a{
	text-decoration:none !important;box-shadow:none !important}
.wp-block-navigation .wp-block-navigation-item__content{transition:color .25s var(--ubo-ease)}
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--ubo-green-dark)}

/* ----------------------------------------------------------------------- *
 * 9. Formulario de contacto (Contact Form 7) — campos y botón.
 * ----------------------------------------------------------------------- */
.wpcf7-form p{margin:0 0 4px}
/* Los campos van en un solo <p> separados por <br>: anulamos esos saltos
   (los inputs ya son block con margen) para evitar huecos grandes. */
.wpcf7-form br{display:none}

/* ----------------------------------------------------------------------- *
 * 15. Cinta infinita (marquee) — puntos clave del objetivo de UBO.
 * ----------------------------------------------------------------------- */
.ubo-marquee{position:relative;display:flex;overflow:hidden;width:100%;
	background:linear-gradient(135deg,var(--ubo-green) 0%,var(--ubo-green-dark) 100%);
	box-shadow:0 6px 18px rgba(79,154,69,.25)}
/* Difuminado en los bordes para una entrada/salida suave */
.ubo-marquee::before,.ubo-marquee::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.ubo-marquee::before{left:0;background:linear-gradient(90deg,var(--ubo-green),transparent)}
.ubo-marquee::after{right:0;background:linear-gradient(270deg,var(--ubo-green-dark),transparent)}
.ubo-marquee__track{display:flex;flex-wrap:nowrap;animation:ubo-marquee 40s linear infinite;will-change:transform}
.ubo-marquee:hover .ubo-marquee__track{animation-play-state:paused}
.ubo-marquee__group{display:flex;flex-shrink:0;align-items:center}
.ubo-marquee__item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
	padding:15px 30px;color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:.2px}
.ubo-marquee__sep{color:#ffffff;opacity:.55;font-size:.8rem}
@keyframes ubo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:600px){.ubo-marquee__item{font-size:.92rem;padding:13px 22px}.ubo-marquee__track{animation-duration:28s}}
@media (prefers-reduced-motion: reduce){.ubo-marquee__track{animation:none}}

/* ----------------------------------------------------------------------- *
 * 16. Carrusel: efecto Ken Burns (alejamiento) en las imágenes estáticas.
 *     Las imágenes (div.ubo-slide-bg) arrancan con un leve acercamiento y se
 *     alejan suavemente mientras la diapositiva está activa. No afecta videos.
 * ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- *
 * 17. Fila superior del header (topbar): redes · contacto · correo · búsqueda.
 * ----------------------------------------------------------------------- */
.ubo-topbar{width:100%;border-bottom:1px solid rgba(125,194,67,.55);font-size:.85rem}
.ubo-topbar .ubo-topbar-social{gap:4px}
.ubo-topbar .ubo-topbar-social .wp-block-social-link{margin:0;padding:5px}
.ubo-topbar .ubo-topbar-social .wp-block-social-link svg{width:16px;height:16px}
.ubo-topbar-right{align-items:center}
.ubo-topbar .ubo-tb-item{
	margin:0;display:inline-flex;align-items:center;gap:7px;color:#5a5a5a;line-height:1;
	padding:2px 18px;border-left:1px solid rgba(125,194,67,.55)}
.ubo-topbar .ubo-tb-item a{color:#5a5a5a;text-decoration:none}
.ubo-topbar .ubo-tb-item a:hover{color:var(--ubo-green-dark)}
.ubo-topbar .ubo-tb-ico{color:var(--ubo-green-dark);font-size:.95rem;line-height:1}
/* Búsqueda como icono */
.ubo-tb-search{margin:0;padding-left:14px;border-left:1px solid rgba(125,194,67,.55)}
.ubo-tb-search .wp-block-search__inside-wrapper{border:none;background:transparent}
.ubo-tb-search .wp-block-search__button{
	background:transparent;color:#5a5a5a;border:none;box-shadow:none;padding:4px;min-width:0;margin:0}
.ubo-tb-search .wp-block-search__button:hover{color:var(--ubo-green-dark);background:transparent}
.ubo-tb-search .wp-block-search__button svg{width:20px;height:20px;fill:currentColor}
.ubo-tb-search .wp-block-search__input{border:1px solid #d8e4c9;border-radius:8px}
@media (max-width:781px){
	/* Topbar en 2 filas como máximo: redes arriba, contacto+búsqueda en una sola fila */
	.ubo-topbar{justify-content:center;gap:6px}
	.ubo-topbar-right{flex-wrap:nowrap}
	.ubo-topbar .ubo-tb-item{padding:2px 8px;font-size:.8rem}
	.ubo-topbar .ubo-tb-ico{font-size:.85rem}
	.ubo-tb-search{padding-left:8px}
	.ubo-tb-search .wp-block-search__button svg{width:18px;height:18px}
}
@media (max-width:430px){
	.ubo-topbar .ubo-tb-item{padding:2px 6px;font-size:.72rem}
	.ubo-topbar .ubo-tb-item:first-child{padding-left:0;border-left:none}
}

.ubo-slider div.ubo-slide-bg{transform:scale(1.16);transform-origin:center}
.ubo-slider .swiper-slide-active div.ubo-slide-bg{
	animation:ubo-kenburns-out 8s ease-out both}
@keyframes ubo-kenburns-out{
	from{transform:scale(1.16)}
	to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
	.ubo-slider div.ubo-slide-bg{transform:none}
	.ubo-slider .swiper-slide-active div.ubo-slide-bg{animation:none}}
/* Campos: nombre, correo y mensaje */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
	width:100%;box-sizing:border-box;display:block;margin:0 0 16px;
	padding:14px 16px;font-family:inherit;font-size:1rem;color:#2c2c2c;
	background:#fff;border:1.5px solid #d8e4c9;border-radius:12px;
	box-shadow:0 2px 8px rgba(40,60,20,.04);
	transition:border-color .25s var(--ubo-ease),box-shadow .25s var(--ubo-ease),background .25s}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{color:#9aa68c;opacity:1}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus{
	outline:none;border-color:var(--ubo-green);background:#fff;
	box-shadow:0 0 0 4px rgba(125,194,67,.20)}
.wpcf7-form textarea{min-height:150px;resize:vertical;line-height:1.55}

/* Botón Enviar mensaje: pill con degradado verde de marca */
.wpcf7-form .wpcf7-submit{
	display:inline-block;width:auto;cursor:pointer;margin-top:6px;
	padding:14px 38px;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;letter-spacing:.3px;
	color:#fff;border:none;border-radius:30px;
	background:linear-gradient(135deg,var(--ubo-green) 0%,var(--ubo-green-dark) 100%);
	box-shadow:0 8px 20px rgba(125,194,67,.38);
	transition:transform .25s var(--ubo-ease),box-shadow .25s var(--ubo-ease),filter .25s}
.wpcf7-form .wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(125,194,67,.5);filter:brightness(1.05)}
.wpcf7-form .wpcf7-submit:active{transform:translateY(-1px)}

/* Estados de validación / respuesta */
.wpcf7 form .wpcf7-response-output{border-radius:10px;border-width:1.5px;margin:8px 0 0;padding:10px 16px;font-size:.95rem}
.wpcf7-not-valid-tip{color:#c0392b;font-size:.85rem;margin-top:-12px;margin-bottom:12px}
.wpcf7-form .wpcf7-spinner{margin:0 0 0 12px}

/* ----------------------------------------------------------------------- *
 * 10. Botón de WhatsApp (número piloto) — sección Contáctenos.
 * ----------------------------------------------------------------------- */
/* Separación controlada entre el botón de WhatsApp y el formulario */
.wp-block-post-content .wpcf7{margin-top:18px}
.ubo-wa-btn{
	display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;
	padding:13px 26px;border-radius:30px;text-decoration:none;
	font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;line-height:1;
	color:#fff;background:linear-gradient(135deg,#25D366 0%,#1DA851 100%);
	box-shadow:0 8px 20px rgba(37,211,102,.38);
	transition:transform .25s var(--ubo-ease),box-shadow .25s var(--ubo-ease),filter .25s}
.ubo-wa-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,211,102,.5);filter:brightness(1.05);color:#fff;text-decoration:none}
.ubo-wa-btn:active{transform:translateY(-1px)}
.ubo-wa-ico{width:22px;height:22px;flex:0 0 22px;fill:#fff}

/* ----------------------------------------------------------------------- *
 * 11. Botón flotante de WhatsApp (todas las páginas).
 * ----------------------------------------------------------------------- */
.ubo-wa-float{
	position:fixed;right:22px;bottom:22px;z-index:9999;
	display:inline-flex;align-items:center;justify-content:center;
	width:60px;height:60px;border-radius:50%;text-decoration:none;
	background:linear-gradient(135deg,#25D366 0%,#1DA851 100%);
	box-shadow:0 8px 24px rgba(37,211,102,.45);
	animation:ubo-wa-pulse 2.6s infinite;
	transition:transform .25s var(--ubo-ease),box-shadow .25s}
.ubo-wa-float svg{width:32px;height:32px;fill:#fff}
.ubo-wa-float:hover{transform:scale(1.08);box-shadow:0 12px 30px rgba(37,211,102,.6)}
/* Etiqueta que aparece al pasar el cursor */
.ubo-wa-float-label{
	position:absolute;right:72px;white-space:nowrap;
	background:#1DA851;color:#fff;padding:8px 14px;border-radius:22px;
	font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:600;
	box-shadow:0 6px 16px rgba(0,0,0,.18);
	opacity:0;transform:translateX(12px);pointer-events:none;
	transition:opacity .25s var(--ubo-ease),transform .25s var(--ubo-ease)}
.ubo-wa-float:hover .ubo-wa-float-label{opacity:1;transform:translateX(0)}
@keyframes ubo-wa-pulse{
	0%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.45)}
	70%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 18px rgba(37,211,102,0)}
	100%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}}
@media (max-width:600px){.ubo-wa-float{right:16px;bottom:16px;width:54px;height:54px}.ubo-wa-float svg{width:28px;height:28px}}
@media (prefers-reduced-motion: reduce){.ubo-wa-float{animation:none}}

/* ----------------------------------------------------------------------- *
 * 12. Submenú del header ("Noticias") — en primer plano, sin recortes.
 * ----------------------------------------------------------------------- */
/* El header y sus contenedores no deben recortar el desplegable y deben
   pintarse por encima del contenido de la página. */
header.wp-block-group{position:relative;z-index:500;overflow:visible !important}
header .wp-block-navigation,
header .wp-block-navigation__container,
header .wp-block-navigation__responsive-container:not(.is-menu-open),
header .wp-block-navigation-item.has-child{overflow:visible !important}

/* Botón hamburguesa: bien visible (verde de marca, mayor tamaño) */
header .wp-block-navigation__responsive-container-open{
	color:var(--ubo-green-dark) !important;padding:6px}
header .wp-block-navigation__responsive-container-open svg{
	width:32px;height:32px;fill:currentColor}
header .wp-block-navigation__responsive-container-close{
	color:var(--ubo-green-dark) !important}

/* Caja del submenú: fondo sólido, sombra y por encima de todo. */
.wp-block-navigation .wp-block-navigation__submenu-container{
	z-index:1000 !important;
	min-width:210px;
	background:#ffffff !important;
	border:1px solid #eef1ea !important;
	border-radius:12px;
	box-shadow:0 16px 38px rgba(40,60,20,.18) !important;
	padding:8px 0;margin-top:6px}
/* Puente invisible: cubre el hueco entre "Noticias" y el submenú para que el
   cursor pueda bajar sin perder el hover y el submenú no se cierre antes. */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before{
	content:"";position:absolute;left:0;right:0;top:-14px;height:16px;display:block;background:transparent}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item{display:block}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	display:block;padding:9px 20px;color:#2c2c2c;white-space:nowrap;background:transparent}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
	color:var(--ubo-green-dark);background:rgba(125,194,67,.12)}

/* ----------------------------------------------------------------------- *
 * 13. Feed de Facebook (sección UBO Videos) — tarjeta blanca y responsive.
 * ----------------------------------------------------------------------- */
.ubo-fb-card{
	max-width:500px;margin:0 auto;background:#fff;border:1px solid #eef1ea;
	border-radius:16px;box-shadow:var(--ubo-shadow);padding:10px;overflow:hidden;
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
.ubo-fb-card:hover{transform:translateY(-4px);box-shadow:var(--ubo-shadow-lg)}
.ubo-fb-card iframe{width:100%;border-radius:10px;display:block}

/* ----------------------------------------------------------------------- *
 * 14. Interlineado equilibrado en el contenido de TODAS las páginas + botones.
 *     Reduce los espaciados generosos (1.8/1.9) a valores consistentes.
 *     Se limita al cuerpo de la página (no afecta header ni footer).
 * ----------------------------------------------------------------------- */
.wp-block-post-content p,
.wp-block-post-content .wp-block-media-text__content p{line-height:1.6 !important}
.wp-block-post-content li{line-height:1.55 !important;margin-bottom:.18em}
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5{line-height:1.25 !important}
/* Tarjetas internas: mismo ritmo de lectura */
.ubo-iconbox p,
.ubo-location p,
.ubo-phone-card p{line-height:1.55 !important}
/* Botones: texto compacto y parejo en todo el sitio */
.wp-block-button__link,
.wpcf7-form .wpcf7-submit,
.ubo-wa-btn,
.ubo-map-link a{line-height:1.2}

/* ----------------------------------------------------------------------- *
 * 18. Noticias relacionadas (página de entrada) — tarjetas estilo overlay
 *     como la portada. Solo en body.single (no afecta categorías/archivo).
 * ----------------------------------------------------------------------- */
body.single .wp-block-post-template{display:grid;gap:24px;margin:0;padding-left:0;list-style:none;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){body.single .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){body.single .wp-block-post-template{grid-template-columns:1fr}}
body.single .wp-block-post-template > li.wp-block-post{
	position:relative;height:300px;margin:0;padding:0;border:none;background:none;
	border-radius:var(--ubo-radius);overflow:hidden;box-shadow:var(--ubo-shadow);
	transition:transform .35s var(--ubo-ease),box-shadow .35s var(--ubo-ease)}
body.single .wp-block-post-template > li.wp-block-post:hover{transform:translateY(-8px);box-shadow:var(--ubo-shadow-lg)}
/* Imagen a sangre con zoom y realce */
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-featured-image{
	position:absolute;inset:0;margin:0;width:100%;height:100%;border-radius:0;overflow:hidden}
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-featured-image a{display:block;width:100%;height:100%}
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-featured-image img{
	width:100%;height:100%;object-fit:cover;filter:saturate(1.2) contrast(1.05);
	transform:scale(1.06);transition:transform .5s var(--ubo-ease)}
body.single .wp-block-post-template > li.wp-block-post:hover .wp-block-post-featured-image img{transform:scale(1)}
/* Degradado verde de marca */
body.single .wp-block-post-template > li.wp-block-post::after{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(to bottom,rgba(168,216,121,0) 0%,rgba(168,216,121,.35) 50%,rgba(125,194,67,.82) 100%)}
/* Ocultar meta/extracto */
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-excerpt,
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-date,
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-author,
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-terms{display:none}
/* Título que sube + "Leer historia" */
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-title{
	position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:0 18px 18px;
	font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;line-height:1.25;
	transform:translateY(34px);transition:transform .4s var(--ubo-ease)}
body.single .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title{transform:translateY(0)}
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-title a{
	color:#111;text-decoration:none;text-shadow:0 1px 3px rgba(255,255,255,.5)}
body.single .wp-block-post-template > li.wp-block-post .wp-block-post-title::after{
	content:"Leer historia »";display:block;margin-top:10px;font-size:.85rem;font-weight:600;color:#111;
	text-shadow:0 1px 3px rgba(255,255,255,.5);opacity:0;transform:translateY(8px);
	transition:opacity .35s .05s var(--ubo-ease),transform .35s .05s var(--ubo-ease)}
body.single .wp-block-post-template > li.wp-block-post:hover .wp-block-post-title::after{opacity:1;transform:translateY(0)}

/* ----------------------------------------------------------------------- *
 * 19. Menú móvil (overlay del bloque Navigation) — pantalla completa.
 *     Sin esto, el contenedor responsive hereda un fondo transparente
 *     (background-color:inherit del núcleo) y el slider/contenido de la
 *     página se transparenta a través del menú abierto. Además vive en la
 *     capa de apilamiento del header (z-index:500), por debajo del botón
 *     flotante de WhatsApp (fixed, z-index:9999), que quedaba por encima.
 * ----------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open{
	position:fixed !important;
	inset:0 !important;
	z-index:100000 !important;
	background:#ffffff !important;          /* fondo sólido, opaco (no translúcido) */
	padding:20px 24px !important;
	overflow-y:auto !important;             /* desplazable si hay muchos ítems */
	-webkit-overflow-scrolling:touch}
/* CLAVE: el header usa backdrop-filter (línea ~23), lo que lo convierte en
   bloque contenedor de los descendientes position:fixed — el overlay quedaba
   atrapado dentro del header (177px de alto) en vez de ocupar el viewport.
   Al abrir el menú anulamos el filtro para que el overlay sea pantalla
   completa, y elevamos el header por encima del botón flotante. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) header.wp-block-group{
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	z-index:100001 !important}
/* Respaldo: ocultar el botón flotante de WhatsApp mientras el menú está abierto. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .ubo-wa-float{
	display:none !important}