/**
 * Simberk — Componentes reutilizables
 * Clases sk-* para aplicar en el campo "CSS Classes" de Elementor (landing nativo)
 * y en futuras landings. Todas leen los tokens --sk-*. Depende de tokens.css.
 */

/* -------- Layout helpers -------- */
.sk-section { padding-top: var(--sk-section-y); padding-bottom: var(--sk-section-y); }
.sk-container { max-width: var(--sk-container); margin-inline: auto; padding-inline: var(--sk-gutter); }
/* Contenedor global: MISMO ancho (1240) + margen auto + padding lateral en header,
   hero, secciones y footer, para que TODO el contenido alinee al mismo borde.
   Los contenedores que lo usan van con content_width:full para que Elementor no
   imponga su propio "boxed" (que ignora estas reglas). */
/* Los contenedores anidados NO aportan gutter propio (Elementor pone ~10px por
   defecto vía --padding-inline-*). Así el eyebrow (dentro de .sk-head), las
   matrices y las filas alinean todos al borde del .sk-shell. Cards/celdas/sk-shell
   fijan su padding con shorthand/longhand directo, que gana igual. */
.elementor-element.e-con { --padding-inline-start: 0px; --padding-inline-end: 0px; }
/* Contenedores de layout del landing (section-inner/row/col/head): sin padding
   vertical propio (Elementor mete ~10px por nivel). El padding vertical real lo
   dan solo las secciones (.sk-section). Scopeado con sk-flow para NO tocar el
   header/footer sticky. */
.elementor-element.sk-flow { padding-top: 0; padding-bottom: 0; }
.elementor-element.sk-shell {
  max-width: var(--sk-container); margin-left: auto; margin-right: auto;
  padding-left: var(--sk-gutter); padding-right: var(--sk-gutter);
}
.sk-surface { background: var(--sk-bg); }
.sk-surface-alt { background: var(--sk-bg-alt); }
.sk-border-top { border-top: 1px solid var(--sk-border-soft); }
.sk-border-y { border-top: 1px solid var(--sk-border-soft); border-bottom: 1px solid var(--sk-border-soft); }

/* -------- Eyebrow / labels (mono) -------- */
.sk-eyebrow {
  display: inline-block; font-family: var(--sk-font-mono); font-weight: 700;
  font-size: 12.5px; letter-spacing: var(--sk-ls-wider); text-transform: uppercase; color: var(--sk-accent-hover);
}
.sk-mono {
  font-family: var(--sk-font-mono); text-transform: uppercase; letter-spacing: var(--sk-ls-wide); color: var(--sk-text-3);
}

/* -------- Chip / badge -------- */
.sk-chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sk-font-mono); font-size: 12px; letter-spacing: var(--sk-ls-wide);
  text-transform: uppercase; color: var(--sk-accent-hover);
  border: 1px solid var(--sk-accent-40); border-radius: var(--sk-radius); padding: 7px 12px;
}

/* -------- Card -------- */
.sk-card {
  background: rgba(255, 255, 255, .015); border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  padding: 34px; transition: border-color .18s ease;
}
.sk-card:hover { border-color: var(--sk-accent-40); }

/* -------- Contenido: header con enlace IG a la derecha + tarjetas con miniatura -------- */
.sk-headrow { margin-bottom: 26px; }
.elementor-element.sk-headrow__title { max-width: 620px; }
.elementor-widget-html a.sk-ig-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sk-accent-hover); font-family: var(--sk-font-mono); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: var(--sk-ls-wide);
  border: 1px solid var(--sk-accent-40); padding: 12px 18px; border-radius: var(--sk-radius);
  transition: background .15s ease;
}
.elementor-widget-html a.sk-ig-link:hover { background: var(--sk-accent-08); color: var(--sk-accent-hover); }
.sk-card.sk-card--content { padding: 0; overflow: hidden; }
.sk-thumb {
  height: 150px; display: grid; place-items: center; border-bottom: 1px solid var(--sk-border);
  background: repeating-linear-gradient(135deg, rgba(61, 123, 255, .07) 0 12px, transparent 12px 24px),
              linear-gradient(150deg, #101A2C, #0A0F18);
}
.sk-thumb span { font-family: var(--sk-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--sk-text-3); }
.elementor-element.sk-card__body { padding: 22px; gap: 0; }
.elementor-element.sk-eyebrow--sm .elementor-heading-title { font: 700 10.5px/1.4 var(--sk-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-accent-hover); margin: 0; }
.elementor-element.sk-content__title .elementor-heading-title { font-size: 16px; line-height: 1.35; margin: 10px 0 0; }

/* -------- FAQ: contenedor angosto (900) + header centrado -------- */
.sk-faq .elementor-element.sk-shell { max-width: 900px; }
.sk-faq .sk-head { max-width: none; text-align: center; }
/* Acordeón como el HTML: solo líneas horizontales (borde-top del bloque + borde
   inferior por item), sin cajas. Padding 24px pregunta / 26px respuesta. */
.sk-faq .elementor-accordion { border-top: 1px solid var(--sk-border); }
/* La línea separadora va por box-shadow inset, NO por border: el widget genera
   `.elementor-element-XXX .elementor-accordion-item{border-width:0}` con especificidad
   (0,0,4,0) que pisaría cualquier border-bottom nuestro. box-shadow no lo toca. */
.sk-faq .elementor-accordion-item { border: 0; box-shadow: inset 0 -1px 0 0 var(--sk-border); background: transparent; }
.sk-faq .elementor-accordion .elementor-tab-title { padding: 24px 0; background: transparent; display: flex; align-items: center; }
.sk-faq .elementor-tab-content { padding: 0 0 26px; background: transparent; }
/* Signo +/− como en el HTML: el carácter tal cual en la fuente mono (Space Mono),
   NO un icono. Font Awesome no se encola en este build y el widget deja un wrapper
   .elementor-accordion-icon vacío: lo usamos de lienzo y ocultamos su <i> interno.
   El "+" pasa a "−" cuando el título está activo (acordeón abierto). */
.sk-faq .elementor-accordion .elementor-tab-title .elementor-accordion-title { flex: 1 1 auto; }
.sk-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  order: 2; float: none; margin: 0 0 0 18px; padding: 0;
  width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center;
}
.sk-faq .elementor-accordion .elementor-accordion-icon > * { display: none; }
.sk-faq .elementor-accordion .elementor-accordion-icon::before {
  content: "+"; font: 400 22px/1 var(--sk-font-mono); color: var(--sk-accent-hover);
}
.sk-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::before,
.sk-faq .elementor-accordion .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon::before { content: "-"; }

/* -------- Glow decorativo de sección (contacto) -------- */
.elementor-element.sk-glow-section { position: relative; overflow: hidden; }
.sk-glow-section::before {
  content: ""; position: absolute; top: -8%; right: -4%; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--sk-accent-glow), transparent 64%);
  filter: blur(12px); pointer-events: none; z-index: 0;
}
.sk-glow-section > .elementor-element { position: relative; z-index: 1; }

/* -------- Matrix (rejilla hairline 1px) -------- */
.sk-matrix { border-top: 1px solid var(--sk-border); border-left: 1px solid var(--sk-border); }
/* gap:0 es imprescindible: sin él, el gap por defecto de Elementor separa las celdas
   y los bordes hairline no se unen → el recuadro no cierra. Con las celdas pegadas,
   border-left/top del container + border-right/bottom de cada celda forman una rejilla cerrada. */
.elementor-element.e-con.sk-matrix { display: grid; gap: 0; padding: 0; }
/* Filas de tarjetas en grid: ocupan el 100% del ancho en tercios/cuartos exactos
   (el gap lo aporta el flex_gap del contenedor). Sin huecos a la derecha. */
.elementor-element.e-con.sk-cards { display: grid; }
.sk-cards--3 { grid-template-columns: repeat(3, 1fr); }
.sk-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sk-cards--3, .sk-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .sk-cards--3, .sk-cards--4 { grid-template-columns: 1fr; } }

/* Fila 2-columnas (hero, contacto) en GRID con fr: la columna derecha (imagen/
   formulario) llega al borde del contenedor, sin huecos. */
.elementor-element.e-con.sk-row2 { display: grid; align-items: center; }
.sk-row2--split { grid-template-columns: 1.2fr 1fr; }
.sk-row2--even  { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .sk-row2--split, .sk-row2--even { grid-template-columns: 1fr; } }
.sk-matrix--3 { grid-template-columns: repeat(3, 1fr); }
.sk-matrix--4 { grid-template-columns: repeat(4, 1fr); }
.sk-matrix__cell {
  border-right: 1px solid var(--sk-border); border-bottom: 1px solid var(--sk-border);
  padding: 36px 32px; transition: background .18s ease;
}
.sk-matrix__cell:hover { background: var(--sk-accent-05); }
.sk-matrix__num { font-family: var(--sk-font-mono); font-weight: 700; font-size: 13px; letter-spacing: var(--sk-ls-wide); color: var(--sk-accent); }
/* Celda compacta de mini-stats: iguala el HTML (padding 18px, sin gap flex de
   Elementor entre título y subtítulo — la única separación es el margin del sub). */
.sk-matrix--compact .sk-matrix__cell { padding: 18px; gap: 0; }

/* Equipo: tarjetas centradas con foto 80px + nombre + rol (como el HTML). */
.sk-team .sk-matrix__cell { align-items: center; text-align: center; gap: 0; padding: 32px; }
.elementor-element.sk-team__photo { width: 80px; margin: 0 auto 18px; }
.sk-team__photo img { aspect-ratio: 1 / 1; }
.elementor-element.sk-team__name .elementor-heading-title { font: 700 17px/1.2 var(--sk-font-head); letter-spacing: var(--sk-ls-tight); color: var(--sk-text); margin: 0 0 5px; }
.elementor-element.sk-team__role .elementor-heading-title { font: 400 11px/1.4 var(--sk-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sk-accent-hover); margin: 0; }

/* Bloque de cabecera de sección (eyebrow+h2+lead) acotado como el HTML y con
   ~56px hasta el contenido (32px margin + 24px del gap de la sección). */
.sk-head { max-width: 700px; margin-bottom: 32px; }

/* -------- Stat tile -------- */
.sk-stat__num {
  font-family: var(--sk-font-head); font-weight: 800; font-size: clamp(34px, 4vw, 44px);
  color: var(--sk-text); line-height: 1; letter-spacing: var(--sk-ls-tight);
}
.sk-stat__num--accent { color: var(--sk-accent-hover); }

/* -------- Marquee -------- */
.sk-marquee {
  overflow: hidden; background: var(--sk-bg-alt);
  border-top: 1px solid var(--sk-border-soft); border-bottom: 1px solid var(--sk-border-soft); padding: 16px 0;
}
.sk-marquee__track {
  display: flex; width: max-content; animation: sk-marquee 90s linear infinite;
  font-family: var(--sk-font-mono); font-size: 14px; line-height: 1.2; letter-spacing: var(--sk-ls-wider);
  text-transform: uppercase; color: #3D4B61;
}
.sk-marquee__track > span { padding: 0 26px; }
.sk-marquee__track .sk-sep { color: var(--sk-accent); padding: 0; }

/* -------- Timeline (proceso 4 pasos) -------- */
.sk-timeline { display: grid; grid-template-columns: repeat(4, 1fr); }
.sk-timeline__step { position: relative; padding: 28px 26px 0; border-top: 1px solid var(--sk-border-card); }
/* Primer/último paso alineados al borde de sección (como el HTML): el nº queda
   a ras del título y del contenido de arriba, sin la indentación de 26px. */
.sk-timeline__step--first { border-top: 2px solid var(--sk-accent); padding-left: 0; }
.sk-timeline__step--last { padding-right: 0; }
.sk-timeline__num {
  position: absolute; top: -13px; left: 26px; width: 26px; height: 26px; border-radius: var(--sk-radius);
  display: grid; place-items: center; font-family: var(--sk-font-mono); font-weight: 700; font-size: 12px;
  background: #11161F; border: 1px solid rgba(61, 123, 255, .5); color: var(--sk-accent-hover);
}
/* El número alinea con el título: left = padding-left del paso (0 en el primero, 26 en el resto). */
.sk-timeline__step--first .sk-timeline__num { left: 0; background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }

/* -------- Float (flotación del hero) -------- */
.sk-float { animation: sk-floatY 6s ease-in-out infinite; }

/* -------- Foto (widget Image de Elementor — para subir imágenes reales) --------
   Se aplica la clase sk-photo al widget Image; respeta bordes/radio/recorte de marca.
   Antes de subir la foto, Elementor muestra su placeholder dentro del mismo marco. */
/* Elementor usa markup optimizado (el <img> es hijo directo de .sk-photo,
   sin .elementor-widget-container), así que el marco va sobre .sk-photo. */
.elementor-element.sk-photo {
  border-radius: var(--sk-radius); border: 1px solid var(--sk-border-card); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--sk-accent-08) 0 14px, transparent 14px 28px),
              linear-gradient(165deg, #101A2C, #0A0F18);
}
.sk-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.sk-photo--portrait img { aspect-ratio: 4 / 5; }
.sk-photo--square img { aspect-ratio: 1 / 1; }
/* Mientras no haya foto real, ocultamos el placeholder gris de Elementor
   y dejamos ver la textura de marca del marco. Al subir una imagen (src sin
   "placeholder") vuelve a opacidad 1 automáticamente. */
.sk-photo img[src*="placeholder"] { opacity: 0; }
/* Split 2 columnas (Sobre mí): grid 0.8fr/1.2fr como el HTML — imagen ~40% y
   texto ~60%, centrados verticalmente para que la foto se vea proporcionalmente
   menor frente al contenido (más alto) de la derecha. */
.elementor-element.e-con.sk-split {
  display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 72px; align-items: center;
}
/* Separación uniforme y controlada entre eyebrow/h2/párrafos (el gap de Elementor
   + el margen propio del <p> daban doble espacio). Párrafos a 18px como el HTML. */
.elementor-element.sk-split__text { gap: 20px; }
.sk-split__text .elementor-widget-text-editor p { margin: 0; font-size: 18px; line-height: 1.7; }
@media (max-width: 900px) {
  .elementor-element.e-con.sk-split { grid-template-columns: 1fr; gap: 40px; }
}

/* Marco para el hero: ancla los badges flotantes y da profundidad a la foto. */
.elementor-element.sk-photo-frame { position: relative; }
.sk-photo-frame .sk-photo { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
/* Los badges (widgets HTML) deben anclarse al marco, no a su propio wrapper:
   neutralizamos el containing block del widget para que el position:absolute
   interno tome como referencia .sk-photo-frame. */
.sk-photo-frame > .elementor-widget-html { position: static; }

/* -------- Status dot -------- */
.sk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-success); box-shadow: 0 0 10px var(--sk-success); }

/* -------- Quote card -------- */
.sk-quote__mark { font-family: var(--sk-font-head); font-size: 44px; color: var(--sk-accent); line-height: .6; }
.sk-quote__body { color: var(--sk-quote); font-size: 16px; line-height: 1.65; }

/* -------- Landing chrome (barra de anuncio / nav / footer) -------- */
.sk-announce {
  background: var(--sk-bg); border-bottom: 1px solid var(--sk-border-soft); color: var(--sk-text-2);
  font-family: var(--sk-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: 9px 20px; line-height: 1.3;
}
/* La barra de anuncio es un widget Text editable; su <p> hereda el estilo del contenedor. */
.sk-announce .elementor-widget-text-editor { font-family: var(--sk-font-mono); font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.sk-announce .elementor-widget-text-editor p { margin: 0; font: inherit; letter-spacing: inherit; }
.sk-announce a { color: var(--sk-text); border-bottom: 1px solid var(--sk-accent); }
.sk-announce .sk-sep { color: var(--sk-accent); }

.sk-nav {
  background: rgba(10, 13, 19, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sk-border-soft);
}
/* Solo el header lleva padding vertical (14px como el HTML); los contenedores
   internos (sk-shell/sk-brand/nav_right) van con sk-flow a 0. */
.elementor-element.sk-nav { padding-top: 14px; padding-bottom: 14px; }

/* Brand = contenedor enlazado con logo (Heading en caja) + nombre/rol (Headings).
   Dentro de una fila flex, brand/nav/cta van a ancho de contenido (no estiran),
   para que el nav no se parta en 2 líneas. */
.elementor-element.sk-brand, .elementor-element.sk-brand__text, .elementor-element.sk-nav__right { width: auto; flex: 0 0 auto; }
.sk-nav .elementor-widget-nav-menu, .sk-nav .elementor-widget-button,
.sk-footer__inner .elementor-widget-nav-menu { flex-shrink: 0; }
.elementor-element.sk-logo {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sk-radius);
  background: #11161F; border: 1px solid var(--sk-accent-40); flex-shrink: 0;
}
.elementor-element.sk-logo .elementor-heading-title { font: 800 15px/1 var(--sk-font-head); letter-spacing: -.04em; color: #EAF1FC; margin: 0; }
.elementor-element.sk-brand__name .elementor-heading-title { font: 700 15px/1.15 var(--sk-font-head); color: var(--sk-text); margin: 0; }
.elementor-element.sk-brand__role .elementor-heading-title { font: 400 10px/1.4 var(--sk-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-text-3); margin: 0; }

.sk-footer { background: var(--sk-footer); border-top: 1px solid var(--sk-border-soft); }
.elementor-element.sk-footer__inner { padding-top: 46px; padding-bottom: 46px; }
/* Nav del footer = Nav Menu nativo: enlaces mono grises. */
.sk-footer__inner .elementor-nav-menu .elementor-item { font-family: var(--sk-font-mono); font-size: 12px; text-transform: uppercase; color: var(--sk-text-2); }
.sk-footer__inner .elementor-nav-menu .elementor-item:hover { color: var(--sk-text); }
.elementor-element.sk-footer-copy { width: 100%; border-top: 1px solid var(--sk-border-soft); padding-top: 20px; margin-top: 4px; }
.elementor-element.sk-footer-copy .elementor-heading-title { font: 400 11px/1.4 var(--sk-font-mono); letter-spacing: .04em; text-transform: uppercase; color: #3D4B61; margin: 0; }

/* El sticky de Elementor clona el header en un .elementor-sticky__spacer (reserva el
   hueco, visibility:hidden). Ese clon NO debe renderizar su nav-menu, o el modal saldría
   DUPLICADO: nuestro CSS del modal reactiva la visibility del dropdown y el menú del clon
   reaparece. display:none lo elimina de raíz. Especificidad (0,0,3,0) con .elementor-element
   para vencer al `.elementor-widget-nav-menu:not(:has(...)){display:flex}` del plugin (0,0,2,0). */
.elementor-sticky__spacer .elementor-element.elementor-widget-nav-menu { display: none; }

/* -------- Responsive: chrome móvil (header modal / hero CTAs / footer) -------- */
/* En ≤1024px el nav-menu colapsa a hamburguesa. Convertimos su DROPDOWN en un MODAL a
   pantalla completa usando el combinador nativo del plugin (toggle activo + dropdown
   adyacente), SIN :has ni reestructurar. El CTA "Agenda llamada" es un ítem del menú
   (clase sk-menu-cta) que aquí se estiliza como botón y queda tras el último enlace; el
   botón suelto del bar se oculta. La X va por encima para cerrar. Sin !important. */
@media (max-width: 1024px) {
  .sk-nav .elementor-widget-nav-menu { position: static; }
  /* El botón CTA suelto del bar se oculta en móvil (su sitio lo toma el ítem-CTA del menú). */
  .sk-nav__right .elementor-widget-button { display: none; }

  /* Botón hamburguesa (cerrado) / X (abierto): visible y por encima del modal. */
  .sk-nav .elementor-menu-toggle {
    position: relative; z-index: 9995;
    background-color: transparent; border: 0; color: var(--sk-text); padding: 6px;
  }
  .sk-nav .elementor-menu-toggle .e-font-icon-svg { fill: var(--sk-text); width: 30px; height: 30px; }
  .sk-nav .elementor-menu-toggle:hover .e-font-icon-svg { fill: var(--sk-accent-hover); }
  /* Al abrir, la X salta a la esquina superior derecha de la pantalla. */
  .sk-nav .elementor-menu-toggle.elementor-active { position: fixed; top: 20px; right: 20px; margin: 0; z-index: 9999; }

  /* El DROPDOWN = modal a pantalla completa (oculto por defecto). z-index muy alto para
     tapar la barra de anuncio y el header (que llevan z-index propio). */
  .sk-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed; top: 0; left: 0; right: 0; height: 100vh; max-height: 100vh; z-index: 9990; margin: 0;
    background-color: var(--sk-bg-alt);
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px var(--sk-gutter) 56px;
    transform: none; animation: none; overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
  }
  /* Abierto: el plugin marca el toggle .elementor-active → mostramos su dropdown adyacente. */
  .sk-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    max-height: 100vh; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }

  /* Enlaces del menú: grandes, on-brand, con separador. */
  .sk-nav .elementor-nav-menu--dropdown .elementor-nav-menu { display: flex; flex-direction: column; width: 100%; }
  .sk-nav .elementor-nav-menu--dropdown .elementor-item {
    font-family: var(--sk-font-mono); font-size: 20px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--sk-text); text-align: center; padding: 18px 0;
    border-bottom: 1px solid var(--sk-border-soft); border-inline-start: 0;
  }
  .sk-nav .elementor-nav-menu--dropdown li:last-child .elementor-item { border-bottom: 0; }
  .sk-nav .elementor-nav-menu--dropdown .elementor-item:hover,
  .sk-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  .sk-nav .elementor-nav-menu--dropdown .elementor-item:focus { color: var(--sk-accent-hover); background: transparent; }

  /* Ítem-CTA (sk-menu-cta): último del menú, estilizado como botón, tras los enlaces. */
  .sk-nav .elementor-nav-menu--dropdown .sk-menu-cta { margin-top: 22px; }
  .sk-nav .elementor-nav-menu--dropdown .sk-menu-cta a.elementor-item {
    background-color: var(--sk-accent); color: #fff; border-bottom: 0; border-radius: var(--sk-radius);
    font-size: 14px; padding: 18px 20px;
  }
  .sk-nav .elementor-nav-menu--dropdown .sk-menu-cta a.elementor-item:hover { background-color: var(--sk-accent-hover); color: #fff; }
}
/* En desktop el ítem-CTA del menú se oculta (ahí va el botón aparte del header). */
@media (min-width: 1025px) {
  .sk-nav .elementor-nav-menu--main .sk-menu-cta { display: none; }
}
@media (max-width: 767px) {
  /* Marca compacta: solo el logo SH (ocultamos nombre+rol) para que quepa en una línea
     junto a la hamburguesa, sin salto de línea. */
  .sk-nav .elementor-element.sk-brand__text { display: none; }
}
@media (max-width: 600px) {
  /* Hero: CTAs a ancho completo, apilados (en tablet+ vuelven a ancho natural). */
  .sk-hero-cta { flex-direction: column; align-items: stretch; }
  .sk-hero-cta > .elementor-widget-button { width: 100%; }
  .sk-hero-cta > .elementor-widget-button > .elementor-button { display: flex; width: 100%; justify-content: center; }
  /* Footer: apilar en vertical; el rol envuelve (no desborda). */
  /* align-items:stretch → la caja del nav del footer ocupa todo el ancho, así los
     separadores de los enlaces cruzan de lado a lado (antes eran del ancho del texto). */
  .elementor-element.sk-footer__inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .sk-footer__inner .elementor-element.sk-brand { max-width: 100%; }
  .sk-footer__inner .elementor-element.sk-brand__text { flex: 0 1 auto; min-width: 0; }
  .sk-footer__inner .elementor-element.sk-brand__role .elementor-heading-title { overflow-wrap: anywhere; }
  /* Footer nav: enlaces con más presencia (se veían pequeños/flojos): apilados,
     más grandes, con separador y buena área táctil. */
  .sk-footer__inner .elementor-nav-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .sk-footer__inner .elementor-nav-menu > li { width: 100%; }
  .sk-footer__inner .elementor-nav-menu .elementor-item {
    display: block; width: 100%; font-size: 15px; padding: 14px 0; border-bottom: 1px solid var(--sk-border-soft);
  }
  .sk-footer__inner .elementor-nav-menu li:last-child .elementor-item { border-bottom: 0; }
}

/* -------- Responsive -------- */
@media (max-width: 1024px) {
  .sk-matrix--4 { grid-template-columns: repeat(2, 1fr); }
  .sk-matrix--3 { grid-template-columns: repeat(2, 1fr); }
  .sk-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sk-matrix--3, .sk-matrix--4 { grid-template-columns: 1fr; }
  .sk-timeline { grid-template-columns: 1fr; }
}

/* -------- Ayudas para widgets nativos de Elementor -------- */
/* El kit (post-113.css) carga DESPUÉS que este archivo y usa especificidad baja
   (0,0,1,0 / 0,0,1,1). Por eso subimos especificidad con selectores compuestos
   para vencerlo limpiamente, SIN !important. */

/* Utilidades de texto sobre el título interno del widget Heading. */
.elementor-element.sk-eyebrow .elementor-heading-title { font: 700 12.5px/1.4 var(--sk-font-mono); letter-spacing: var(--sk-ls-wider); text-transform: uppercase; color: var(--sk-accent-hover); margin: 0; }
.elementor-element.sk-mono .elementor-heading-title { font: 400 12px/1.4 var(--sk-font-mono); letter-spacing: var(--sk-ls-wide); text-transform: uppercase; color: var(--sk-text-3); margin: 0; }
.elementor-element.sk-stat__num .elementor-heading-title { font: 800 clamp(34px, 4vw, 44px)/1 var(--sk-font-head); letter-spacing: var(--sk-ls-tight); color: var(--sk-text); margin: 0; }
.elementor-element.sk-stat__num--accent .elementor-heading-title { color: var(--sk-accent-hover); }
.elementor-element.sk-matrix__num .elementor-heading-title { font: 700 13px/1 var(--sk-font-mono); letter-spacing: var(--sk-ls-wide); color: var(--sk-accent); margin: 0; }
/* Mini-stats de "Sobre mí": rol en Sora + detalle en mono (como el HTML).
   line-height ajustado y una sola línea (las celdas se ensanchan al 58% del bloque). */
.elementor-element.sk-ministat__title .elementor-heading-title { font: 700 15px/1.25 var(--sk-font-head); letter-spacing: normal; color: var(--sk-text); margin: 0; white-space: nowrap; }
.elementor-element.sk-ministat__sub .elementor-heading-title { font: 400 11px/1.3 var(--sk-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sk-text-3); margin: 6px 0 0; white-space: nowrap; }
/* Títulos de sección (H2) al tamaño real del HTML de referencia:
   clamp(32,4.2vw,52) con line-height ceñido — da más presencia y hace que el
   contenido "respire" alto (la imagen de al lado se ve proporcionalmente menor). */
/* El kit fija secondary=44px con especificidad (0,0,4,0) (.elementor-80 .elementor-element
   .elementor-element-XXX .elementor-heading-title). Lo vencemos con (0,0,4,1) usando
   clases propias (portable, sin depender del ID de página ni !important). */
.sk-section .sk-shell .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.02; letter-spacing: var(--sk-ls-tight); }
.sk-faq .sk-shell .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(30px, 3.8vw, 46px); }
.sk-accent-text { color: var(--sk-accent-hover); }

/* Botones, acordeón y campos del Form se estilizan NATIVO (settings del propio
   widget + colores globales del kit), por eso no llevan reglas sk-* aquí. */