/*
Theme Name: Tropico2025
…
*/



/* === Fuente global del sitio === */
body,
.wp-site-blocks {
  font-family: "Apercu Pro", "Suisse Works", serif !important;
}
.suise {font-family: "Suisse Works", serif !important;}



/* ——— Menu unificado en móvil ———  flex-wrap: nowrap !important; */
@media (max-width: 768px) {
  .sticky-header {
    display: flex !important;
    
    justify-content: space-between !important;
    align-items: center !important;
  }
  .sticky-header .wp-block-site-title {
    margin: 24px 0 0 0  !important;
    flex: 1 0 auto;
  }
  .sticky-header .wp-block-navigation,
  .sticky-header .menu-2 {
    display: none !important;
  }
  .sticky-header .menu-movil {
    display: block !important;
    flex: 0 0 auto;
  }
	 /* Oculta SOLO los dos menús de escritorio */
  .nav-principal,
  .menu-2 {
    display: none !important;
  }
  /* Muestra SOLO el menú móvil */
  .menu-movil {
    display: block !important;
  }
	/* 1) Estado cerrado: solo la hamburguesa fija */
.menu-movil:not(.is-opened) {
  position: fixed;
  top: -5px;    /* ajústalo para que quede a la altura exacta */
  right: 18px; /* idem para la separación lateral */
  z-index: 10000;
}

/* 2) Estado abierto: vuelves al flujo normal */
.menu-movil.is-opened {
  position: static !important;
}

/* 3) Asegura que el contenedor del menú se muestre correctamente */
.menu-movil.is-opened .wp-block-navigation__responsive-container {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important; /* o el ancho que quieras */
  transform: none !important; /* quita cualquier translate */
}
	.menu-movil ul {
		margin-top:50px;
	}
	.text-lab h1 {
	font-size:25px !important;
	line-height: 1.5;
}

	
}

/* ——— Ocultar menú combinado en desktop ——— */
@media (min-width: 769px) {
  .menu-movil {
    display: none !important;
  }
}

/* ——— Sobrescribir color y decoración de enlaces global ——— */
:where(.wp-site-blocks) a {
  color: #000 !important;
  text-decoration: none !important;
}
:where(.wp-site-blocks) a:hover,
:where(.wp-site-blocks) a:focus {
  color: #8c8c8c !important;
  text-decoration: none !important;
}

/* ——— Sección oscura ——— */
.dark-section {
  background-color: #181818 !important;
  color: #fff !important;
}
.dark-section a {
  color: #fff !important;
  text-decoration: none !important;
}
.dark-section a:hover,
.dark-section a:focus {
  color: #8c8c8c !important;
  text-decoration: underline !important;
}

/* ——— Header fijo sobre slider ——— */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  height: 90px;
  background: transparent !important;   /* clave */
  mix-blend-mode: exclusion;            /* clave */
}

/* MUY IMPORTANTE: el texto y logo del header en BLANCO de origen */
.sticky-header,
.sticky-header a,
.sticky-header .wp-block-site-title,
.sticky-header .wp-block-navigation a {
  color: #fff !important;
}

/* Si tu logo es SVG, hereda color y rellénalo */
.sticky-header svg { 
  fill: currentColor !important; 
  stroke: currentColor !important;
}

/* Evita que el overlay del menú móvil mezcle e imponle colores */
.wp-block-navigation__responsive-container.is-menu-open {
  mix-blend-mode: normal !important;
  background-color: #101010 !important;
  color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff !important;
}


/* ⚠️ Desactiva esa regla anterior para móvil:
.menu-movil.is-opened .wp-block-navigation__responsive-container {
  position: static !important;
  top: auto !important; right: auto !important;
  width: auto !important; transform: none !important;
}
*/

/* Colores por defecto del overlay (blanco) */
:root {
  --menu-bg: #ffffff;
  --menu-fg: #000000;
}
/* En Estudio (ES/EN) quieres overlay negro */
body.page-id-25,
body.page-id-987 {
  --menu-bg: #101010;
  --menu-fg: #ffffff;
}

/* 1) Si el menú móvil está abierto, el header NO mezcla */
.sticky-header:has(.wp-block-navigation__responsive-container.is-menu-open),
.sticky-header:has(.wp-block-navigation__responsive-container[aria-hidden="false"]) {
  mix-blend-mode: normal !important;
}

/* 2) Overlay de menú a pantalla completa, con fondo y sin blend */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container[aria-hidden="false"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: var(--menu-bg) !important;
  color: var(--menu-fg) !important;
  z-index: 100000 !important;      /* por encima del header */
  overflow-y: auto !important;
  mix-blend-mode: normal !important;
  isolation: isolate;               /* corta el efecto del padre */
}

/* Links dentro del overlay */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container[aria-hidden="false"] a {
  color: var(--menu-fg) !important;
  text-decoration: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus,
.wp-block-navigation__responsive-container[aria-hidden="false"] a:hover,
.wp-block-navigation__responsive-container[aria-hidden="false"] a:focus {
  color: #8c8c8c !important;
}










/* En la página Estudio (dark-section), haz el header transparente */
.dark-section .sticky-header {
  background: transparent !important;
}


/* Ajusta el slider para subir bajo el header fijo */
#slide-bigscreen {
  margin-top: -180px;
  padding-top: 180px;
}

/* ——— Efecto hover en menú ——— */
.sticky-header a:hover {
  color: #8c8c8c !important;
  transition: color 0.5s !important;
}
/* Quitar subrayado en hover de enlaces del menú y título */
.wp-block-navigation a:hover,
.menu-2 a:hover,
.wp-block-site-title a:hover {
  text-decoration: none !important;
}

/* ——— Slider ——— */
.carousel-item {
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ——— Pie de foto dentro del slider ——— */
.piefoto {
  position: absolute;
  bottom: 8px !important;
  left: 28px;
  z-index: 9999;
  color: #fff;
}

/* ——— Pie de foto dentro del IA LAB ——— */
/* Pie de foto centrado */
.piefotolab {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  color: #fff;
  font-size: 28px;
  text-align: center;    /* opcional, por si tienes varias líneas */
  white-space: nowrap;   /* evita saltos de línea no deseados */
}


.text-lab {
	padding: 28px;
}
.text-lab h1 {
	font-size:36px;
	line-height: 1.35;
}


/* ——— Animación de fondo ——— */
@keyframes mymichel {
  0%   { background-color: black; }
  50%  { background-color: #da313f; }
  100% { background-color: #BC9148; }
}

/* ——— Excepción para el header en home ——— */
body.home .wp-site-blocks > header {
  margin-block-start: 0 !important;
}

body.page-id-25 .is-layout-constrained > .wp-block-spacer {
  margin-block-start: 0 !important;
}

/* 1) Contenedor full-screen */
.lab-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;       /* toda la altura de la ventana */
  overflow: hidden;    /* recorta el vídeo sobrante */
}

/* 2) Vídeo centrado y cubriendo todo el área */
.lab-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;         /* ancho automático, se controlará por cover */
  height: 100%;        /* fuerza a 100% de la altura de la ventana */
  transform: translate(-50%, -50%);
  object-fit: cover;   /* cubre el contenedor recortando si es necesario */
}



/* Overlay del menú móvil en ambas páginas */
body.page-id-25 .wp-block-navigation__responsive-container,
body.page-id-987 .wp-block-navigation__responsive-container {
  background-color: #101010 !important;  /* fondo negro */
  color: #fff !important;                /* texto blanco */
}

/* Enlaces blancos */
body.page-id-25 .wp-block-navigation__responsive-container a,
body.page-id-987 .wp-block-navigation__responsive-container a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Hover gris */
body.page-id-25 .wp-block-navigation__responsive-container a:hover,
body.page-id-25 .wp-block-navigation__responsive-container a:focus,
body.page-id-987 .wp-block-navigation__responsive-container a:hover,
body.page-id-987 .wp-block-navigation__responsive-container a:focus {
  color: #8c8c8c !important;
  text-decoration: none !important;
}


.footer-fijo  {
position: absolute;
  bottom: 15px;
  right: 20vw;
	z-index:99999999;
}
.blendy { mix-blend-mode: difference;}

.formi {
	font-family: var(--wp--preset--font-family--suisse-works) !important;
}
}





/* —— Grid de 3 columnas directamente en el <ul> —— */
.wp-block-query.proyectos-grid > ul.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 2rem !important;
}

/* —— Empuja imagen + título al fondo de cada celda —— */
.wp-block-query.proyectos-grid > ul.columns-3 > li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* —— Responsive: 2 columnas en tablet, 1 en móvil —— */
@media (max-width: 1024px) {
  .wp-block-query.proyectos-grid > ul.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .wp-block-query.proyectos-grid > ul.columns-3 {
    grid-template-columns: 1fr !important;
  }
}



/* estado inicial: contenido visible */
html.fade-enabled body {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* al añadir la clase .fade-out, funde a blanco */
html.fade-enabled.fade-out body {
  opacity: 0;
}



.mydivmichel {
    animation: mymichel 9s infinite;
    animation-duration: 9s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: mymichel;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}


.tc-lang-switch {
  font-size: 14px !important;
	font-weight: 500;
  color: #000;
  text-decoration: none;
	margin-top:-12px;
	float:right;
}

.tc-lang-switch:hover {
  text-decoration: none;
}



.dark-section {
  padding-top: 1px;
}
/*

@media (max-width: 768px) {
	.tc-lang-switch {
        position:fixed;
		right:22px;
		top: 56px; 
		}
}*/


/* Móvil: oculto por defecto */
@media (max-width: 768px) {
  .tc-lang-switch { 
    display: none !important;
  }

  /* Cuando el overlay está abierto, muéstralo y posiciónalo */
  body:has(.wp-block-navigation__responsive-container.is-menu-open) .tc-lang-switch {
    display: flex !important;
    position: fixed;
    right: 18px;
    top: 40vh;            /* ajusta a tu overlay */
    z-index: 100002;      /* por encima del overlay */
	  font-size:22px !important;
      mix-blend-mode: difference;

  }
}








.tc-lang-switch { font-weight:500; font-size:14px; }
.tc-lang-switch a { text-decoration:none; }
.tc-lang-switch .active { opacity:.5; pointer-events:none; }


/* Muestra solo el menú del idioma activo */
html[lang^="es"] .nav-en { display: none !important; }
html[lang^="en"] .nav-es { display: none !important; }

/* Si usas un menú móvil aparte, aplica las mismas clases al bloque del menú móvil */
html[lang^="es"] .menu-movil .nav-en { display: none !important; }
html[lang^="en"] .menu-movil .nav-es { display: none !important; }








.nav-en {
	margin-block-start: 0px !important
}
.nav-es {
	margin-block-start: 0px !important
}
body.page-id-68 .is-layout-constrained > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
body.page-id-68 :where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

html[lang^="en"] :where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}


/*
 * página de archivos. ****
 * */


/* ===== Archivo: filtros ===== */
.archivo-filtros{margin:1rem 0 2rem}
.archivo-filtros a{text-decoration:none;margin-right:0rem; font-size: clamp(16px, 1.6vw, 20px);; color: #b7b7b7 !important; letter-spacing: 0 !important;  }
.archivo-filtros a.is-active{opacity:1;pointer-events:none; color: #181818 !important;}
.archivo-filtros a.hover {color: #737373 !important; text-decoration: underline !important;}

/* ===== Archivo: grid ===== */
.tc-arch{position:relative}
.tc-arch-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:48px;                 /* ajusta aquí el gap si quieres */
  place-items:center;
}
@media (max-width:1200px){ .tc-arch-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:720px){  .tc-arch-grid{grid-template-columns:repeat(3,1fr)} }

.tc-arch-card{cursor:pointer}
.tc-arch-media{
  aspect-ratio:1/1; width:100%;
  display:flex; align-items:center; justify-content:center;
}
.tc-arch-thumb{
  max-width:70%; max-height:70%; display:block;
  transition:filter .18s ease;
}
.tc-arch-card:hover .tc-arch-thumb{ filter:blur(2px) }

/* Tooltip (título que sigue al puntero) */
.tc-arch-tooltip{
  position:fixed; z-index:100003; pointer-events:none;
  mix-blend-mode:difference; color:#fff; font-size:14px; font-weight:200;
  display:none; will-change:transform;
}
@media (hover:none){ .tc-arch-tooltip{display:none!important} }

/* ===== Velo + viewer ===== */
/* Color del velo global (cubre TODO, header incluido) */
:root{ --tc-veil: rgba(255,255,255,.8); } /* #181818 al 80% */

.tc-arch-veil{
  position:fixed; inset:0; z-index:100000; background:var(--tc-veil); display:none;
}
.tc-arch.is-open .tc-arch-veil{ display:block; }

/* capa de captura para cerrar (clic fuera) */
.tc-arch-overlay{
  position:fixed; inset:0; background:transparent; cursor:zoom-out;
  z-index:100001; display:none;
}
.tc-arch.is-open .tc-arch-overlay{ display:block; }

/* visor a la izquierda con márgenes 18px */
.tc-arch-viewer{
  position:fixed; top:18px; left:18px; bottom:18px;
  z-index:100002; display:none;
  align-items:flex-start; justify-content:flex-start;
  /* fuera del medio = cerrar */
  cursor:zoom-out;
}
.tc-arch.is-open .tc-arch-viewer{ display:flex; }

/* sobre la media = siguiente */
.tc-arch-viewer .tc-media{ cursor:e-resize; }

.tc-arch-viewer img,
.tc-arch-viewer video{
  display:block;
  /* límites en sobremesa: alto y ancho máximos con márgenes de 18px */
  max-height:calc(100vh - 36px);
  max-width:calc(100vw - 36px);
  height:auto; width:auto;
}

/* móvil: ancho completo - 36px, centrado */
@media (max-width:720px){
  .tc-arch-viewer{
    left:50%; right:auto; transform:translateX(-50%);
    top:18px; bottom:18px;
  }
  .tc-arch-viewer img, .tc-arch-viewer video{
    width:calc(100vw - 36px); height:auto;
    max-height:none; max-width:none;
  }
}

.tc-arch-empty{ opacity:.6 }




/* **********
 ****** slider nuevo *******
*************** */

/* --- Slider base --- */
.tc-swiper-container {
  position: relative;
  width: 100%;
  height: 100svh; /* pantalla completa */
  overflow: hidden;
  background: #fff; /* fondo por si hay contain */
}

.tc-swiper-container .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-swiper-container img,
.tc-swiper-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tc-swiper-container .swiper-slide[data-mode="contain"] img,
.tc-swiper-container .swiper-slide[data-mode="contain"] video {
  object-fit: contain;
}

/* Caption abajo izquierda */
.tc-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.75rem;
  font-family: "Suisse Works";
  text-transform: capitalize;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
  z-index: 20;
}

/* Cursor SVG */
#tc-cursor {
  position: fixed;
  width: 70px;
  height: 70px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
}
#tc-left, #tc-right { fill:#fff; display:none; }

#tc-cursor { z-index: 999999; }


/* Responsive caption */
@media (max-width: 768px) {
  .tc-caption { font-size: 0.7rem; }
}

/* --- Contain con márgenes --- */
.tc-swiper-container .swiper-slide[data-mode="contain"] {
  padding-top: 8vh;
  padding-bottom: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.tc-swiper-container .swiper-slide[data-mode="contain"] img,
.tc-swiper-container .swiper-slide[data-mode="contain"] video {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* En móvil: padding lateral */
@media (max-width: 768px) {
  .tc-swiper-container .swiper-slide[data-mode="contain"] {
    padding-left: 18px;
    padding-right: 18px;
  }
}




/* Quitar margen global solo en la página de inicio (ID 75) */
.page-id-75 :where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}



.wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 8px 0 !important;
    position: relative;
}
div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label {
    margin: 0 0 4px 0 !important;
}

.sin-margin-block-start {
	margin-block-start: 9px !important;
}

.project-areas {
	float: right;
	margin-bottom: 9px;
}
.project-area-chip {
	padding-left: 0.5em;
	font-weight:900;
}

.clienteano {
	float: left;
}
.ceretemil {
	  font-family: "Apercu Pro"!important;
	font-weight: 900;

}

/* En móvil: padding lateral */
@media (max-width: 768px) {
  .project-areas {
	float: left !important;
    margin-block-start: 0px !important;
}
}
.apercu900 {
	  font-family: "Apercu Pro" !important;
	font-weight: 900;

}