/* ===== Sticky Header sin Elementor Pro ===== */

/* Estado base (sobre el banner, puede ser transparente) */
#site-header {
  position: sticky;      /* usa sticky si el navegador lo soporta */
  top: 0;
  z-index: 9999;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  background: transparent;   /* cámbialo si querés que siempre tenga color */
}

/* Cuando agregamos clase en scroll, solidificamos el header */
#site-header.is-sticky {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.adib-oc-panel side-left{
	height:100vh;
}
/* Fallback cuando usamos position:fixed (lo activa el JS si el sticky no aplica) */
#site-header.sticky-fallback {
  position: fixed;
  left: 0; right: 0;
}

/* Ajuste por barra de administración de WP */
.admin-bar #site-header { top: 32px; }
@media (max-width: 1282px) {
  .admin-bar #site-header { top: 46px; }
}

/* Si algún ancestro corta el sticky, evitamos overflow oculto */
#site-header,
#site-header * {
  overflow: visible;
}

/* FIX inmediato: header fijo con compensación */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #fff;       /* o transparent si va sobre el hero */
  transition: box-shadow .2s ease, background-color .2s ease;
}
body.has-fixed-header{
  padding-top: var(--header-h, 80px); /* se completa por JS */
}
#site-header.scrolled{
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: #fff; /* sólido al scrollear */
}

/* FIX inmediato: header fijo con compensación */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  /* Fondo base opaco */
  background-color: rgba(255, 255, 255, 1);
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
body.has-fixed-header{
  padding-top: var(--header-h, 80px);
}
#site-header.scrolled{
  /* Fondo al scrollear con ~0.8 de opacidad */
  background-color: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  /* opcional: glassy */
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

#site-header{ background-color: rgba(255,255,255,0); }
#site-header.scrolled{ background-color: rgba(255,255,255,.82); }

.cursos{
  cursor: pointer;
}

/* ===== Layout base del header ===== */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background-color: rgba(255,255,255,0); /* transparente en el tope */
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* El body compensa la altura del header (lo rellena el JS) */
body.has-fixed-header{
  padding-top: var(--header-h, 80px);
}

/* Quitar alturas forzadas heredadas */
#site-header,
#site-header .e-con,
#site-header .elementor-container{
  min-height: 0 !important;
  height: auto !important;
}

/* Contenedor interno bonito (máximo ancho + centrado) */
#site-header > .e-con,
#site-header > .elementor-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Estados de scroll: fondo semitransparente y sombra suave */
#site-header.scrolled{
  background-color: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

/* Colores de links/íconos según estado (opcional) */
#site-header a,
#site-header .elementor-icon{
  color: #222222;           /* sobre el hero */
}
#site-header.scrolled a,
#site-header.scrolled .elementor-icon{
  color: #222222;           /* cuando baja */
}


/* Oculto al inicio (arriba del todo) */
#site-header .reveal-on-scroll{
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

/* Cuando el header se solidifica al scrollear, aparece */
#site-header.scrolled .reveal-on-scroll{
  opacity: 1;
  transform: translateY(0);
  filter: none;
  pointer-events: auto;
}

/* Opcional: en mobile mostralo siempre (no hay hover y suele ser mejor UX) */
@media (hover:none){
  #site-header .reveal-on-scroll{
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }
}



/* Admin bar de WP (evitar solapado) */
.admin-bar #site-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar #site-header{ top: 46px; } }

/* ===== Contact Form 7 – layout bonito y accesible ===== */
#cf7-contacto.cf7-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.2vw, 20px);
}
#cf7-contacto .cf7-span-2{ grid-column: 1 / -1; }
#cf7-contacto .cf7-field{
  display: flex; flex-direction: column; gap: 6px;
}
#cf7-contacto label{
  font-size: .95rem; font-weight: 600;
	color:white;
}
#cf7-contacto input[type="text"],
#cf7-contacto input[type="email"],
#cf7-contacto input[type="tel"],
#cf7-contacto textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#cf7-contacto textarea{ min-height: 140px; resize: vertical; }
#cf7-contacto input:focus,
#cf7-contacto textarea:focus{
  border-color: #80bfff;
  box-shadow: 0 0 0 4px rgba(0,123,255,.12);
}
#cf7-contacto .wpcf7-not-valid{
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 4px rgba(255,107,107,.12);
}
#cf7-contacto .wpcf7-not-valid-tip{
  font-size: .85rem; color: #c0392b; margin-top: 4px;
}
#cf7-contacto .cf7-actions{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
#cf7-contacto .cf7-terms{ font-size: .92rem; }
#cf7-contacto .cf7-legal{ font-size: .85rem; opacity: .7; }
#cf7-contacto input[type="submit"]{
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  background: #0b2339; color: #fff;
  transition: transform .06s ease, opacity .2s ease, box-shadow .2s ease;
}
#cf7-contacto input[type="submit"]:hover{ opacity: .92; box-shadow: 0 10px 24px rgba(11,35,57,.18); }
#cf7-contacto input[type="submit"]:active{ transform: translateY(1px); }
/* Mensajes CF7 */
.wpcf7 form .wpcf7-response-output{
  margin: 16px 0 0;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid transparent;
}
.wpcf7 form.sent .wpcf7-response-output{
  color:#1e6f3e; background:#e8f6ee; border-color:#bde8cf;
}
.wpcf7 form.invalid .wpcf7-response-output{
  color:#8a2b23; background:#fdecea; border-color:#fac1ba;
}
/* Spinner */
.wpcf7 .wpcf7-spinner{ margin-left: 10px; }
/* Mobile */
@media (max-width: 768px){
  #cf7-contacto.cf7-grid{ grid-template-columns: 1fr; }
	.reveal-card{
		height:786px;
	}
}

/* ===== Hamburguesa (off-canvas) ===== */
.header-overlay .adib-oc-toggle{
  color: #ffffff;              /* color de la hamburguesa sobre el hero */
  transition: color .25s ease, opacity .2s ease;
}
.header-overlay .adib-oc-toggle:hover{ opacity:.8; }
.header-overlay.is-fixed .adib-oc-toggle{
  color: #111111;              /* al bajar */
}
/* Grosor + currentColor (deduplicado) */
.adib-oc-burger,
.adib-oc-burger::before,
.adib-oc-burger::after{
  background: currentColor !important;
  height: 2px;
}

/* ===== Hover reveal para columnas con fondo ===== */
/* Dejá la imagen como fondo de la columna
   Estructura/clases:
   - Columna:        class="reveal-card"
   - Contenido wrap: class="reveal-content"
   - Título:         class="reveal-title"
   - Ícono:          class="reveal-icon"
   - Descripción:    class="reveal-desc" (esta se revela) */

.reveal-card{
  position: relative;
  overflow: hidden;
  min-height: 700px;                 /* ajustá a tu gusto */
  border-radius: 12px;               /* opcional */

  /* Perillas overlay (0 a 1) */
  --overlay-base: 1;   /* sin hover: que se vea la foto */
  --overlay-hover: .65;  /* con hover: un poco más oscuro */
  --overlay-mobile: .35; /* mobile: sin hover */
}

/* Capa oscura encima de la imagen (deduplicado a la versión con variables) */
.reveal-card::before{
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity:var(--overlay-base);
  transition: opacity .25s ease;
  z-index:0; /* por debajo del contenido */
}
.reveal-card:hover::before{ opacity:var(--overlay-hover); }
@media (hover:none){
  .reveal-card::before{ opacity:var(--overlay-mobile); }
}

/* Contenido interno */
.reveal-card .reveal-content{
  position: absolute; inset: 0;
  padding: clamp(16px,2.5vw,28px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  z-index: 1;
}

/* Mostrar SIEMPRE título + ícono */
.reveal-card .reveal-title,
.reveal-card .reveal-icon{
  opacity: 1;
  transform: none;
}

/* Revelar SOLO la descripción */
.reveal-card .reveal-desc{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.reveal-card:hover .reveal-desc{
  opacity: 1;
  transform: translateY(0);
}
@media (hover:none){
  .reveal-card .reveal-desc{
    opacity: 1; transform: none;
  }
}



nav.adib-oc-body{
	background-color:white;
}
.adib-oc-panel{
  position: fixed;         /* se asegura de pegarse al viewport */
  top: 0;
  left: 0;                 /* si es side-left */
  height: 100vh;           /* TODO el alto de la ventana */
  width: 100vw;            /* ← si querés que cubra TODO el ancho (pantalla completa) */
  max-width: 420px;        /* cambia este valor para controlar el ancho del drawer */
 
  display: flex;
  flex-direction: column;
  z-index: 99999
	  }


/* Si usás tu propio botón personalizado */

.adib-oc-toggle span,
.adib-oc-toggle span::before,
.adib-oc-toggle span::after {
  background-color: #000 !important;
}

.adib-oc-toggle:focus{
	border:0px;
}
/* ====== GRID ====== */
.u-grid{
  display: grid;
  grid-template-columns: 1fr;   /* móvil */
  gap: 28px;
  width: 100%;
  margin: 0;                    /* que use el 100% del contenedor de Elementor */
  padding: 0;                   /* ajustá si querés respiración lateral */
}

/* tablet */
@media (min-width: 768px){
  .u-grid{ grid-template-columns: repeat(2, 1fr); }
	
}

/* desktop mediano */
@media (min-width: 992px){
  .u-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* desktop grande: 4 columnas ocupando el 100% */
@media (min-width: 1200px){
  .u-grid{ grid-template-columns: repeat(3, 1fr);
	width: 1250px;
	  
	}
	
}

/* ====== CARD ====== */
.u-card{
  position: relative;
  min-height: 500px;            /* o 340px si lo preferís */
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}
.u-card::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  transition: background .3s ease;
}
.u-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.u-card:hover::before{ background: rgba(0,0,0,.6); }
.u-card h3{ position: relative; z-index: 1; letter-spacing: .03em; }

/* ====== MODAL ====== */
.u-modal { 
  display: none; 
  position: fixed; inset: 0; 
  background: rgba(0,0,0,0.75); 
  backdrop-filter: blur(3px); 
  z-index: 9999; 
  justify-content: center; 
  align-items: center; 
}
.u-modal.open { display: flex; }

.u-modal-content{
  background:#fff; color:#111;
  max-width: 700px; width: 90%;
  padding: 2rem; border-radius:14px; position:relative;
  animation: fadeIn .3s ease;
	display: flex;
  flex-direction: column;
}
.u-modal-content img{ width:100%; border-radius:10px; margin-top:1rem;  }
.u-close{ position:absolute; top:10px; right:18px; font-size:2rem; color:#333; cursor:pointer; }

@keyframes fadeIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }


	
}
/* Solo la X, sin fondo ni borde */
.u-close{
  position:absolute;
  top:12px; right:12px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color:#000;                /* cambiá si la X debe ser negra */
  font-size: 40px;           /* tamaño de la X */
  line-height: 1;
  padding: 8px;              /* área clickeable (invisible) */
  cursor: pointer;
}

/* estados opcionales */
.u-close:hover{ transform: scale(1.06); }
.u-close:active{ transform: scale(.96); }

/* foco accesible (anillo sutil) */
.u-close:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}
@media (max-width: 767px){
  .u-card{ min-height: 350px; }
}

/* Altura máxima en móvil + scroll interno */
@media (max-width: 767px){
  .u-modal-content{
    max-height: 85vh;      /* el cuadro nunca supera la altura de la pantalla */
    overflow: auto;        /* si se pasa, aparece scroll DENTRO del modal */
    padding: 16px;         /* un poco menos de padding para ganar espacio */
    border-radius: 12px;
  }
}
/* Solo la X, sin fondo ni borde (ya lo tenías) */
.u-close{
  position: sticky;
  top: 20px;
  align-self: flex-end;  /* => derecha en flex-column */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #000;           /* o #fff */
  font-size: 28px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}