/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Tema hijo para personalizaciones y GSAP
Author: Tu nombre
Template: twentytwentyfive
Version: 1.0
*/
.wp-block-heading {
	font-weight:900;
}

/* Aquí puedes poner CSS propio */

/* =====================================================
   NAVBAR
   ===================================================== */

/* Boton Whatsapp NavBar */
.wp-block-button.btn-whatsapp .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-block-button.btn-whatsapp .wp-block-button__link::before{
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-1.9 5.4 8.5 8.5 0 0 1-6.6 3.1 8.38 8.38 0 0 1-4.4-1.2L3 21l1.4-4.1A8.38 8.38 0 0 1 3 11.5 8.5 8.5 0 0 1 6.1 4.9 8.38 8.38 0 0 1 11.5 3h.5a8.48 8.48 0 0 1 8 8z'/%3E%3Cpath d='M16.2 13.6c-.2-.1-1.2-.6-1.4-.7s-.3-.1-.5.1-.6.7-.8.8-.3.2-.6.1a6.8 6.8 0 0 1-2-1.2 7.6 7.6 0 0 1-1.4-1.8c-.1-.2 0-.4.1-.5l.4-.5.3-.4c.1-.1.1-.3 0-.5s-.5-1.3-.7-1.8c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3s-.9.9-.9 2.2.9 2.5 1 2.7a10 10 0 0 0 3.8 3.8c.5.2.9.4 1.2.5.5.1.9.1 1.3.1.4-.1 1.2-.5 1.4-1s.2-.9.1-1-.2-.2-.4-.3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Fin Boton Whatsapp NavBar */

/* Estilos de links */
.wp-block-navigation .wp-block-navigation-item__content:hover {
  text-decoration: none !important;
  color: var(--color-principal) !important;
}

/* Sombreado de la barra */
header.wp-block-template-part 
  .wp-block-group.alignwide.is-layout-flex {
    box-shadow: 0 2px 10px #0000001a;
}

/* =====================================================
   GLOBALES
   ===================================================== */

:root {
  --color-principal: #c72027;
  --color-principal-oscuro: #b01c22;
  --color-secundario-blanco: #f5f5f5;
  --color-texto-blanco: #ffffff;
  --color-texto-negro: #000000;
  --color-text-negro-light: #010101;
  --color-texr-gris-dark: #787a7d;
  --color-gray: #abacae;
  --color-text-gris-light: #242424;
  --color-texto-gris: #acacae;
  --colors-landing-gray: #78797c;
}

/* Ocultar títulos de las páginas */
.wp-block-post-title {
	display: none;
}

/* Eliminar subrayado en enlaces Página de Inicio */
body.home a,
body.front-page a {
  text-decoration: none;
}

/* =====================================================
   TIPOGRAFÍAS
   ===================================================== */

body {
  font-family: Manrope, sans-serif;
}

@media (max-width: 575px) {
  p {
    font-size: .9rem;
  }
}

/* =====================================================
   VARIABLES REUTILIZABLES
   ===================================================== */

/* Escalar imagenes */
.img-scale .wp-block-image{
	width: 100%;
}

.img-scale .wp-block-image img{
	width: 100%;
	height: auto;
	display: block;
}

/* Cambiar ancho de los títulos en móvil */
@media (max-width: 767px) {
  .titulo-ajustable {
    max-width: 100% !important;
  }
}

/* Eliminar espacios al usar highlight */
mark,
.mark {
  padding: 0 !important;
  background-color: transparent !important;
}

.is-layout-flex.no-gap{
	gap: 0;
}

.btn-height {
	height: 100%;
}

/* =====================================================
   BOTÓN CUSTOM
   ===================================================== */
/* Mobile: el grupo permite ancho completo */
.buttons-responsive {
	width: 100%;
}

/* Mobile: el item ocupa toda la fila */
.buttons-responsive > .wp-block-button {
  flex: 0 0 100%;
}

/* Desktop: vuelve al ancho natural */
@media (min-width: 575px) {
  .buttons-responsive > .wp-block-button {
    flex: 0 0 auto;
  }
}

/* Estado base */
.btn-principal .wp-block-button__link {
  background-color: var(--color-principal, #c72027);
  color: var(--color-texto-blanco, #ffffff);

  border: none;
  border-radius: 40px;

  box-shadow: 3px 4px 3px #0003;

  font-size: 14px;
  font-weight: 700;

  /* Adaptación de padding: 10% (React) */
  padding: 0.75rem 1.5rem;

  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

/* Hover, Focus, Active (efecto hundido) */
.btn-principal .wp-block-button__link:hover,
.btn-principal .wp-block-button__link:focus,
.btn-principal .wp-block-button__link:active {
  background-color: var(--color-principal-oscuro, #b01c22);
  color: var(--color-secundario-blanco, #f5f5f5);

  box-shadow:
    0 2px 4px #0000004d,
    inset 0 8px 9px #0003;

  text-decoration: none;
  transform: translateY(1px);
}

/* Accesibilidad: focus visible */
.btn-principal .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(199, 32, 39, 0.35),
    inset 0 8px 9px #0003;
}

/* BOTONES ICONOS CONTACTO Y FOOTER */
.wp-block-button.btn-social .wp-block-button__link {
  transition: transform .15s ease, box-shadow .2s ease;
	padding: 0;
  background: none;
}

.wp-block-button.btn-social img {
  max-width: none !important;
  width: auto;
  height: auto;
	display: block;
}

.wp-block-button.btn-social .wp-block-button__link:hover {
  transform: translateY(1px);
}
/* Fin Botones Contacto y Footer */

/* BOTÓN GLOBAL WHATSAPP */

a.btn-whatsapp-float {
  text-decoration: none;
}

.btn-whatsapp-float {
  position: fixed;
  right: 41px;
  bottom: 42px;
  z-index: 9999;

  width: 65px;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: none;

  box-shadow: 0 4px 8px #0003;
  transition: all .3s ease;
}

.btn-whatsapp-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.btn-whatsapp-float:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    inset 7px 7px 8px rgba(0,0,0,.2);
  transform: translateY(1px);
}
/* Fin Botón Global Whatsapp */

/* =====================================================
   INICIO
   ===================================================== */

/* Cambiar cursor */
.wp-block-button.btn-industry .wp-block-button__link:hover {
	box-shadow: 0 8px 25px #0003; 
	cursor: url(/wp-content/uploads/2026/01/inicioEtiquetaCursorHover.png) 20 20, pointer;
	transition: all .3s ease;
}

/* Habilitar Superposición de Etiqueta en Video */
.video-wrap{
	position: relative;
}

.video-wrap iframe {
  position: relative;
  z-index: 1;
	border-radius: 24px 30px;
}

.video-wrap .etiqueta-nuestra {
  position: absolute;
  left: -4%;
  z-index: 10;
	width: 25%;
}
/* Fin Superposición de Etiqueta en Video */

/* =====================================================
   NUESTRA ESENCIA
   ===================================================== */

/* CSS PARA ANIMACIÓN DE VASOS */

/* Creamos un plano común para ambos vasos */
.vasos-scene {
  position: relative;
  z-index: 0;
}

/* Eliminamos el aislamiento SOLO dentro de esta escena */
.vasos-scene .wp-block-columns {
  isolation: auto !important;
  overflow: visible !important;
}

/* Evitamos que los grupos corten las imágenes */
.vasos-scene .wp-block-group {
  overflow: visible !important;
}

/* Activamos el z-index real */
.vaso-azul,
.vaso-verde,
.vaso-gif {
  position: relative;
}

/* Capas reales */
.vaso-azul { 
  z-index: 1;}
.vaso-verde { z-index: 5; }
.vaso-gif { z-index: 2; }
/*Fin CSS para animación de vasos*/

/* Colapsar columnas en breakpoint personalizado */
@media (max-width: 767px) {
	.wp-block-columns.rows-colapsar.is-not-stacked-on-mobile{
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	
	.wp-block-columns.rows-colapsar.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Reordenar las columnas */
@media (max-width: 767px) {

  /* solo columnas que tienen al vaso verde */
  .wp-block-columns.rows-colapsar.is-not-stacked-on-mobile:has(.vaso-verde) {
    flex-direction: column !important;
  }

  .wp-block-columns.rows-colapsar.is-not-stacked-on-mobile:has(.vaso-verde) 
  > .wp-block-column:has(.vaso-verde) {
    order: 1;
  }

  .wp-block-columns.rows-colapsar.is-not-stacked-on-mobile:has(.vaso-verde) 
  .img-scale {
    order: 2;
  }

  .wp-block-columns.rows-colapsar.is-not-stacked-on-mobile:has(.vaso-verde) 
  > .wp-block-column:has(h2),
  .wp-block-columns.rows-colapsar.is-not-stacked-on-mobile:has(.vaso-verde) 
  > .wp-block-column:has(p) {
    order: 3;
  }
}

/* =====================================================
   SOLUCIONES POR INDUSTRIA
   ===================================================== */

/* Ocultar stack de botones en móvil */
@media (max-width: 767px) {
  .wp-block-column.hide-mobile.is-layout-flow {
    display: none !important;
  }
}
/* Efectos de botones */

/* Efecto de presión / hundimiento */
.btn-effect-press .wp-block-button__link {
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.btn-effect-press .wp-block-button__link:hover,
.btn-effect-press .wp-block-button__link:focus,
.btn-effect-press .wp-block-button__link:active,
.btn-effect-press .wp-block-button__link.is-active {
  background-color: var(--color-principal-oscuro);
  border: none;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 8px 9px rgba(0, 0, 0, 0.2);
  color: var(--color-secundario-blanco);
  text-decoration: none;
  transform: translateY(1px);
}

/* Eliminar padding izq en móvil */
@media (max-width: 767px) {
  .cont-row {
	flex-basis: 100% !important;
    padding-left: 0 !important;
  }
}

/* Aparecer icono en vista móvil */
@media (min-width: 768px){
	.img-mobile {
		display: none;
	}
}

/* =====================================================
   PRODUCTOS
   ===================================================== */

/* Botón Descubre Más*/
.btn-productos-vasos .wp-block-button__link {
	transition: all .3s ease;
}

.btn-productos-vasos .wp-block-button__link:hover {
	box-shadow: 0 4px 12px #0003;
  transform: translateY(-2px);
}
/* Fin Botón Descubre Más */

/* =====================================================
   MAQUINARIA
   ===================================================== */

/* =====================================================
   CERTIFICACIONES
   ===================================================== */

/* =====================================================
   HISTORIAS DE ÉXITO
   ===================================================== */

/* Sección Overflow */
.overlap-section {
  margin-bottom: -10%;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .overlap-section {
    margin-bottom: -15%;
  }
}

@media (max-width: 575px) {
  .overlap-section {
    margin-bottom: -30%;
  }
}

/* Grid de imágenes responsive */
.exito-grid {
  display: grid;
  gap: 2rem;
}

/* Desktop (66 / 33) */
@media (min-width: 769px) {
  .exito-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* Tablet (50 / 50) */
@media (min-width: 576px) and (max-width: 768px) {
  .exito-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile (stack) */
@media (max-width: 575px) {
  .exito-grid {
    grid-template-columns: 1fr;
  }
}

.exito-grid picture,
.exito-grid img {
  width: 100%;
  height: 100%;
}

.exito-grid img {
  object-fit: contain;
  display: block;
}
/* Fin Grid de imágenes responsive */

/* Colapsar columnas en breakpoint personalizado */
@media (max-width: 575px) {
	.wp-block-columns.rows-exito.is-not-stacked-on-mobile{
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	
	.wp-block-columns.rows-exito.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
	#movil img{
		display: none !important;
	}
}

@media (max-width: 768px) {
	#desktop img{
		display: none !important;
	}
}

/* =====================================================
   CONTACTO
   ===================================================== */

.mapa-wrapper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden; /* recorta el iframe */
  box-shadow: 0 10px 30px #00000020;
}

.mapa {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

@media (min-width: 992px) {
  .mapa {
    height: 500px;
  }
}

/* =====================================================
   FOOTER
   ===================================================== */

/* Eliminar margen superior del footer */
.wp-site-blocks > footer.wp-block-template-part {
  margin-top: 0 !important;
}

/* Efectos Botones */
.btn-footer .wp-block-button__link {
  box-shadow: 3px 4px 3px #0003;
}

.btn-footer .wp-block-button__link:hover {
  box-shadow:
    0 2px 4px #0000004d,
    inset 0 8px 9px #0003;

  text-decoration: none;
  transform: translateY(1px);
}


/* Secciones */
.seccion {
  padding: 8rem 4.5rem 2rem;
}

@media (max-width: 767px) {
  .seccion {
    padding: 5rem 3rem 1rem;
  }
}

@media (max-width: 575px) {
  .seccion {
    padding: 4rem 1rem 1rem;
  }
}

.seccion-scroll{
	padding: 7.5rem 4.5rem 5% 4rem;
}

@media (min-width: 768px) and (max-width: 991px) {
  .seccion-scroll {
    padding: 7.5rem 2.5rem 5%;
  }
}

@media (max-width: 767px) {
  .seccion-scroll {
    padding: 5.5rem 3.5rem 5%;
  }
}

@media (max-width: 575px) {
  .seccion-scroll {
    padding: 7.5rem 1.5rem 5%;
  }
}

/*Inicio*/
.seccion--home-exp{
	padding-top: 0px;
}

.seccion--home-hist{
	padding: 3rem 4rem 0px;
}

@media (max-width:767px) {
	.seccion--home-hist{
		padding: 5rem 2rem 0px;
	}
}

@media (max-width:575px) {
	.seccion--home-hist{
		padding: 7rem 1rem 0px;
	}
}

/*Titulo maquinaria*/
@media (min-width: 768px) {
	.seccion--maquinaria-titulo {
		padding-bottom: 0rem;
	}
	
	.seccion--maquinaria-info {
		padding-bottom: 3rem
	}
}

/*Certificaciones*/
@media (min-width: 768px){
	.seccion--certificaciones-titulo {
		padding-bottom: 0;
	}
}

/*Historias de Exito*/
.seccion--historias{
	padding-top: 8%;
}

@media (max-width: 767px) {
  .seccion--historias {
    padding: 5.5rem 3.5rem 2rem;
  }
}

@media (max-width: 575px) {
	.seccion--historias{
		padding: 5.5rem 2rem 2rem;
	}
}

/*Footer*/
.seccion-footer{
	padding: 8rem 4.5rem 2rem;
}

@media (min-width: 768px) and (max-width: 991px){
	.seccion-footer{
		padding: 6rem 4rem 1rem;
	}
}

@media (min-width: 576px) and (max-width: 767px){
	.seccion-footer {
		padding: 6rem 4rem 2rem;
	}
}

@media (max-width: 575px){
	.seccion-footer{
		padding: 4rem 1rem 0 1rem;
	}
}