/*
Theme Name: Hello Elementor Medraweb
Theme URI: https://medraweb.com
Description: Versión personalizada del Hello Elementor Child con estilos globales de legibilidad y ajustes optimizados.
Author: Martín – Medraweb
Author URI: https://medraweb.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-medraweb
License: GNU General Public License v3 or later.
*/

/* ============================================================
   TIPOGRAFÍA FLUIDA GLOBAL (CSS MANDA, ELEMENTOR FALLBACK)
   ============================================================ */

  /* Helpers */

.block {
	display: block;
}


:root {
  /* Base */
  --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

  /* Headings */
	
  --fs-h-special: clamp(2.5rem, 6vw, 6rem);
  --fs-h1: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  --fs-h2: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --fs-h5: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h6: 1rem;

  /* Line heights (unitless) */
  --lh-body: 1.6;
  --lh-heading-tight: 1.12;
  --lh-heading: 1.25;

  /* Espaciados */
  --space-xs: 0.5em;
  --space-s: 0.75em;
  --space-m: 1em;
  --space-l: 1.5em;
  --space-xl: 2em;
  --space-2xl: 3em;

  /* Lectura */
  --measure: 75ch;

  /* Ajustes finos */
  --tracking-tight: -0.015em;
}

/* ============================================================
   BASE DEL DOCUMENTO
   ============================================================ */

body,
.elementor {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

/* ============================================================
   HEADINGS SEMÁNTICOS (SOBRESCRIBEN ELEMENTOR)
   ============================================================ */

.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

.elementor h1, h1 {
  font-size: var(--fs-h-special);
  line-height: var(--lh-heading-tight);
  letter-spacing: var(--tracking-tight);
}

.elementor h2, h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading-tight);
  letter-spacing: var(--tracking-tight);
}

.elementor h3, h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.elementor h4, h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.elementor h5, h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
}

.elementor h6, h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
}

/* ============================================================
   ELEMENTOR HEADINGS — APLICAR ESCALA FLUIDA REAL
   ============================================================ */

.elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--fs-h-special);
  line-height: var(--lh-heading-tight);
  letter-spacing: var(--tracking-tight);
}

.elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading-tight);
  letter-spacing: var(--tracking-tight);
}

.elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.elementor-widget-heading h4.elementor-heading-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.elementor-widget-heading h5.elementor-heading-title {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
}

.elementor-widget-heading h6.elementor-heading-title {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
}

/* Elementor heading widget */
/* .elementor .elementor-widget-heading .elementor-heading-title {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
} */

/* ============================================================
   TEXTO EN ELEMENTOR
   ============================================================ */

.elementor .elementor-widget-text-editor {
  font-size: inherit;
  line-height: inherit;
}

.elementor .elementor-widget-text-editor p {
  font-size: inherit;
  line-height: inherit;
}

/* ============================================================
   BASE DE LEGIBILIDAD GLOBAL
   ============================================================ */

/* Párrafos (contenido largo) */
.single-post p,
.legal-page p,
.elementor-widget-text-editor p {
  margin-bottom: var(--space-m);
  line-height: var(--lh-body);
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Listas */
.single-post ul,
.single-post ol,
.legal-page ul,
.legal-page ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin-bottom: var(--space-m);
  padding-left: 1.4em;
}

/* Ítems de lista */
.single-post li,
.legal-page li,
.elementor-widget-text-editor li {
  margin-bottom: var(--space-xs);
  line-height: var(--lh-body);
}

/* Listas anidadas */
.single-post ul ul,
.single-post ol ol,
.single-post ul ol,
.single-post ol ul,
.legal-page ul ul,
.legal-page ol ol,
.legal-page ul ol,
.legal-page ol ul,
.elementor-widget-text-editor ul ul,
.elementor-widget-text-editor ol ol,
.elementor-widget-text-editor ul ol,
.elementor-widget-text-editor ol ul {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

/* Encabezados dentro de contenido */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6,
.legal-page h1,
.legal-page h2,
.legal-page h3,
.legal-page h4,
.legal-page h5,
.legal-page h6,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}

/* ============================================================
   CITAS
   ============================================================ */

.single-post blockquote,
.legal-page blockquote,
.elementor-widget-text-editor blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-l);
  border-left: 4px solid #ccc;
  font-style: italic;
  line-height: var(--lh-body);
}

/* ============================================================
   IMÁGENES
   ============================================================ */

.single-post img,
.legal-page img,
.elementor-widget-text-editor img,
.wp-block-image img {
  margin-block: var(--space-l);
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ============================================================
   TABLAS
   ============================================================ */

.single-post table,
.legal-page table,
.elementor-widget-text-editor table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-l);
  font-size: 0.95em;
}

.single-post th,
.single-post td,
.legal-page th,
.legal-page td,
.elementor-widget-text-editor th,
.elementor-widget-text-editor td {
  padding: var(--space-xs) var(--space-s);
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}

.single-post th,
.legal-page th,
.elementor-widget-text-editor th {
  background: #f7f7f7;
  font-weight: 600;
}

/* ============================================================
   CÓDIGO
   ============================================================ */

.single-post code,
.legal-page code,
.elementor-widget-text-editor code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.single-post pre,
.legal-page pre,
.elementor-widget-text-editor pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  line-height: 1.45;
  background: #f5f5f5;
  padding: var(--space-m);
  overflow-x: auto;
  border-radius: 6px;
  tab-size: 2;
}

.single-post pre code,
.legal-page pre code,
.elementor-widget-text-editor pre code {
  background: transparent;
  padding: 0;
}

/* ============================================================
   BLOG (single post)
   ============================================================ */

.single-post #content,
.single-post .single-post {
  max-width: min(var(--measure), 100%);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */

.legal-page #content {
  max-width: min(var(--measure), 100%);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(2rem, 5vw, 3rem);
}

/* ============================================================
   ENLACES EN CONTENIDO
   ============================================================ */

.single-post a,
.legal-page a,
.elementor-widget-text-editor a {
  color: var(--e-global-color-accent, #0055ff);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

.single-post a:hover,
.legal-page a:hover,
.elementor-widget-text-editor a:hover {
  opacity: 0.85;
}


/*Estilos extras*/

.block {
	display: block;
}

.page-id-62, .page-id-63, .page-id-64, .page-id-71 {
	background-color: #2c3538;
    color: #5d7575;
}

.page-id-62 a, .page-id-63 a, .page-id-64 a, .page-id-71 a {
	color: #5d7575;
}

.site-header {
	z-index: 21;
}

.site-header {
  transition: background-color 0.3s ease;
}

.site-header.header-scrolled {
  background-color: #2c3638;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.nav-menu .elementor-nav-menu__container {
  /* Fondo glass cálido */
  background: rgba(219, 213, 200, 0.45);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);

  /* Forma */
  border-radius: 2em;
  padding: 0.6em 1.1em;

  /* Delimitación sutil cálida */
  border: 1px solid rgba(219, 213, 200, 0.35);

  /* Profundidad elegante */
  box-shadow:
    0 0.6em 1.6em rgba(0, 0, 0, 0.18),
    inset 0 0.08em 0 rgba(255, 255, 255, 0.35);

  /* Transiciones suaves */
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* Animacion hero section home */

/* Estado inicial logo */

.container-hero {
	position: relative;
}

.container.hero > .e-con-inner {
  position: relative;
  min-height: inherit;
}

.container-hero .hero-title,
.container-hero .logo-hero {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container-hero .hero-title {
	z-index: 2;
}

.container-hero .hero-title h1 {
	font-size: clamp(2.5rem, 6vw, 6rem);

}


.logo-hero {
  opacity: 0;
  filter: blur(20px);
  transform: scale(0.85);
  will-change: transform, opacity, filter;
}

/* Header oculto al inicio */
.site-header {
  opacity: 0;
  filter: blur(24px);
  transform: translateY(-16px);
  will-change: transform, opacity, filter;
}

/*Animacion h1 hero banner*/
.hero-title {
  opacity: 0;
  filter: blur(22px);
  letter-spacing: -0.04em;
  will-change: transform, opacity, filter, letter-spacing;
}

/*Animación sección quiénes somos*/

.box-who-we-are {
  /* Base */
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;

  /* Estado visual base (GSAP animará estos valores) */
  opacity: 0;
  filter: blur(14px);

  /* Transiciones solo para hover */
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform, opacity, filter;
}

/* Capa de iluminación */
.box-who-we-are::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    120% 120% at 50% 0%,
    rgba(219, 213, 200, 0.22),
    transparent 60%
  );

  opacity: 0;
  border-radius: inherit;
  pointer-events: none;

  transition: opacity 0.45s ease;
}

/* Hover */
.box-who-we-are:hover {
  transform: scale(1.02);
  box-shadow:
    0 1.2rem 2.5rem rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(219, 213, 200, 0.25);
}

.box-who-we-are:hover::before {
  opacity: 1;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .box-who-we-are {
    transition: none;
  }

  .box-who-we-are:hover {
    transform: none;
  }
}

/* Animación sección formación */

/* Flecha */
.formacion-arrow {
  cursor: pointer;
  transform-origin: 50% 50%;
}

/* Estados iniciales de títulos y textos */

/* Flecha */
.formacion-arrow {
  cursor: pointer;
  transform-origin: 50% 50%;
}

/* Estados iniciales de títulos y textos */
.formacion-title-1, .formacion-text-1,
.formacion-title-2, .formacion-text-2,
.formacion-title-3, .formacion-text-3,
.formacion-title-4, .formacion-text-4,
.formacion-title-5, .formacion-text-5, 
.formacion-mini-banner {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  filter: blur(10px);
}

//* =========================================
   VIDEO HOVER CARD — OVERLAY REAL (ELEMENTOR FIX)
   ========================================= */

/* CONTENEDOR PADRE */
.video-hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  isolation: isolate;
}

/* VÍDEO (flujo normal) */
.video-hover-media {
  position: relative;
  z-index: 0;
  width: 100%;
}

/* Asegurar que el vídeo rellena correctamente */
.video-hover-media .elementor-wrapper,
.video-hover-media .e-hosted-video,
.video-hover-media video {
  width: 100%;
  display: block;
}

/* OVERLAY OSCURO */
.video-hover-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* TEXTO — SACADO DEL FLUJO FLEX */
.video-hover-content {
  position: absolute !important;
  inset: 0;
  z-index: 2;

  /* 🔑 romper flexbox de Elementor */
  flex: none !important;
  width: 100%;
  height: 100%;

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

  padding: 1.25rem;
  
  background: rgba(0, 0, 0, 0.55);

  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;

  pointer-events: none;
}

/* HOVER */
.video-hover-card:hover::before {
  opacity: 1;
}

.video-hover-card:hover .video-hover-content {
  opacity: 1;
  transform: translateY(0);
}

/* ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
  .video-hover-card::before,
  .video-hover-content {
    transition: none;
  }
}

/*Página de productos y servicios*/

.service-main-container {
  position: relative;
}

.service-fix-container {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}


.services-headline {
  flex: 1;
  display: flex;
}

.services-headline .elementor-heading-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  min-height: 100dvh;
  position: relative;
  z-index: 2;
}

.services-fix-image {
	
}

.services-fix-image > .elementor-widget-container {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;

}

.services-fix-image img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
}

/*Página de para quién*/
/* El contenedor boxed NO se fija */
.for-who-scene {
  position: relative;
  height: 100dvh;
}

/* La escena REAL es el inner */
.for-who-scene > .e-con-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}

/* Aseguramos comportamiento flex limpio */
.for-who-small,
.for-who-big {
  flex-shrink: 0;
  overflow: hidden;
}

/* El espaciador sí crea scroll */
.for-who-spacer {
  height: 100dvh;
}

.for-who-scene a,
.for-who-scene button {
  pointer-events: auto;
}

.for-who-small,
.for-who-big {
  pointer-events: auto;
}

.for-who-image-wrapper {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  will-change: opacity, transform, filter;
}

.for-who-text-wrapper {
  width: min(30vw, 32ch);
}


/* Página nuestra visión */

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 6rem;
  width: max-content;
  will-change: transform;
}

.marquee-track span {
  white-space: nowrap;
  font-size: clamp(2.5rem, 6vw, 6rem);
  color: #dbd5c8;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Our Vision – Title */
.our-vision-title {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(16px);
  letter-spacing: -0.04em;
  will-change: transform, opacity, filter, letter-spacing;
}

/* Our Vision – Cards */
.our-vision-card {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px) scale(0.96);
  will-change: transform, opacity, filter;
}


/* ================================
   VISION CAROUSEL – STACK FADE
================================ */

.vision-carousel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.vision-carousel-track {
  position: relative;
  height: 220px;
}

/* Cards apiladas */
.vision-card {
  position: absolute;
  inset: 0;

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

  pointer-events: none;
}


/* Visual de la tarjeta */
.vision-card-content {
  width: 100%;
  min-width: 400px;
  max-width: 400px;     /* ← lo que pedías */
  height: 220px;

  background: #e7e0d3;
  border-radius: 24px;

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

  padding: 3rem;

  color: #2e3a3a;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.4rem);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

/* Estilos de página contacto */

.h1-contact-page h1 {
	font-size: var(--fs-h1) !important;
}

/*Arreglo footer página para quien*/

body.page-id-443 .main-footer {
}

/*Ajustes móvil*/

.product-title-mobile {
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*Diseño de prototipos de elementos*/

/* .container {
  --content-width: 80rem;
}

.container > .e-con-inner {
  padding-inline: 1.25rem;
}

@media (min-width: 64rem) {
  .container > .e-con-inner {
    padding-inline: 2rem;
  }
} */

/* ============================================
     COOKIE YES — Elite SQX
     Cambiar azul por color de marca
     #1863DC → #515962  (hover: #454C53)
     ============================================ */

  /* 1. Botón flotante "revisit" (esquina inferior) — solo color, sin mover */
  .cky-btn-revisit-wrapper {
    background-color: #515962 !important;
    border-color: #515962 !important;
  }

  .cky-btn-revisit-wrapper:hover {
    background-color: #454C53 !important;
    border-color: #454C53 !important;
  }

  /* 2. Botón "Aceptar todo" (fondo azul → gris Elite SQX) */
  .cky-btn-accept,
  button.cky-btn-accept,
  .cky-consent-container .cky-btn-accept,
  .cky-preference-center .cky-btn-accept {
    background-color: #515962 !important;
    border-color: #515962 !important;
    color: #FFFFFF !important;
  }

  .cky-btn-accept:hover {
    background-color: #454C53 !important;
    border-color: #454C53 !important;
  }

  /* 3. Botones outline: "Personalizar", "Rechazar todo" y "Guardar mis preferencias" */
  .cky-btn-customize,
  .cky-btn-reject,
  .cky-btn-preferences,
  button.cky-btn-customize,
  button.cky-btn-reject,
  button.cky-btn-preferences {
    color: #515962 !important;
    border-color: #515962 !important;
    background-color: transparent !important;
  }

  .cky-btn-customize:hover,
  .cky-btn-reject:hover,
  .cky-btn-preferences:hover {
    background-color: rgba(81, 89, 98, 0.1) !important;
    color: #454C53 !important;
    border-color: #454C53 !important;
  }

  /* 4. Enlace "Política de cookies" dentro del banner */
  .cky-notice-des a.cky-policy,
  a.cky-policy {
    color: #515962 !important;
  }

  a.cky-policy:hover {
    color: #454C53 !important;
  }

  /* 5. Por si quedan iconos / chevrons / acentos en el azul antiguo */
  .cky-preference-center .cky-accordion-btn[aria-expanded="true"],
  .cky-always-active {
    color: #515962 !important;
  }