/* ============================================================
   GTD España · Landing Ciberseguridad — mockup styles
   Variables CSS sincronizadas con tailwind.config (index.html)
   ============================================================ */

/* ============================================================
   FLATSOME OVERRIDES (scoped to landing wrapper)
   Flatsome ships `.hidden { display:none !important; visibility:hidden !important }`
   which beats Tailwind's responsive display utilities. Re-establish them.
   ============================================================ */
@media (min-width: 640px) {
  .adigital-ciber-wrapper .hidden.sm\:block { display: block !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.sm\:flex  { display: flex  !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.sm\:grid  { display: grid  !important; visibility: visible !important; }
}
@media (min-width: 768px) {
  .adigital-ciber-wrapper .hidden.md\:block { display: block !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.md\:flex  { display: flex  !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.md\:grid  { display: grid  !important; visibility: visible !important; }
}
@media (min-width: 1024px) {
  .adigital-ciber-wrapper .hidden.lg\:block        { display: block        !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.lg\:flex         { display: flex         !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.lg\:grid         { display: grid         !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.lg\:inline-flex  { display: inline-flex  !important; visibility: visible !important; }
}
@media (min-width: 1280px) {
  .adigital-ciber-wrapper .hidden.xl\:block { display: block !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.xl\:flex  { display: flex  !important; visibility: visible !important; }
  .adigital-ciber-wrapper .hidden.xl\:grid  { display: grid  !important; visibility: visible !important; }
}

/* ============================================================
   TAILWIND PREFLIGHT (scoped) — Tailwind's global preflight is
   disabled in the loader (corePlugins.preflight=false) because it
   was bleeding into Flatsome's header (resetting ul padding, *
   border-width, button borders, etc.). Re-apply the parts the
   landing depends on, scoped to .adigital-ciber-wrapper only.
   ============================================================ */

.adigital-ciber-wrapper *,
.adigital-ciber-wrapper *::before,
.adigital-ciber-wrapper *::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: rgb(229, 231, 235);
}

.adigital-ciber-wrapper hr,
.adigital-ciber-wrapper h1,
.adigital-ciber-wrapper h2,
.adigital-ciber-wrapper h3,
.adigital-ciber-wrapper h4,
.adigital-ciber-wrapper h5,
.adigital-ciber-wrapper h6,
.adigital-ciber-wrapper blockquote,
.adigital-ciber-wrapper dl,
.adigital-ciber-wrapper dd,
.adigital-ciber-wrapper p,
.adigital-ciber-wrapper pre,
.adigital-ciber-wrapper fieldset,
.adigital-ciber-wrapper figure {
	margin: 0;
}

.adigital-ciber-wrapper ol,
.adigital-ciber-wrapper ul,
.adigital-ciber-wrapper menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adigital-ciber-wrapper fieldset,
.adigital-ciber-wrapper legend {
	padding: 0;
}

.adigital-ciber-wrapper img,
.adigital-ciber-wrapper svg,
.adigital-ciber-wrapper video,
.adigital-ciber-wrapper canvas,
.adigital-ciber-wrapper audio,
.adigital-ciber-wrapper iframe,
.adigital-ciber-wrapper embed,
.adigital-ciber-wrapper object {
	display: block;
	vertical-align: middle;
}

.adigital-ciber-wrapper img,
.adigital-ciber-wrapper video {
	max-width: 100%;
	height: auto;
}

.adigital-ciber-wrapper button,
.adigital-ciber-wrapper [role="button"] {
	cursor: pointer;
}

.adigital-ciber-wrapper a {
	color: inherit;
	text-decoration: inherit;
}

.adigital-ciber-wrapper button,
.adigital-ciber-wrapper input,
.adigital-ciber-wrapper optgroup,
.adigital-ciber-wrapper select,
.adigital-ciber-wrapper textarea {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

.adigital-ciber-wrapper button,
.adigital-ciber-wrapper select {
	text-transform: none;
}

.adigital-ciber-wrapper button,
.adigital-ciber-wrapper [type="button"],
.adigital-ciber-wrapper [type="reset"],
.adigital-ciber-wrapper [type="submit"] {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none;
}

.adigital-ciber-wrapper textarea {
	resize: vertical;
}

/* ============================================================
   FLATSOME THEME RESET — defeat Flatsome rules that bleed into
   the landing markup. Scoped to .adigital-ciber-wrapper so the
   rest of the WP site is untouched.

   Flatsome rules being neutralized (verified via cssRules inspection):
   - body { font-weight: 300 }                         → 400
   - p { text-align: justify }       (theme custom CSS) → start
   - blockquote, dl, figure, form, ol, p, pre, ul { margin-bottom: 1.3em } → 0
   - label, legend { display: block; font-size: 0.9em; font-weight: 700; margin-bottom: 0.4em }
   - label { color: #222 }                              → inherit
   - input[type=text]/textarea/select { background, border #ddd, border-radius 0,
     box-shadow inset, color #333, height ~2.5em }     → flat landing style
   - .button, button, input, select, textarea { margin-bottom: 1em } → 0
   - button line-height 1.2 + transparent border       → 1.5 + no border
   ============================================================ */

.adigital-ciber-wrapper {
	font-weight: 400;
}

/* Paragraph alignment + reset margin */
.adigital-ciber-wrapper p {
	text-align: start;
	margin-bottom: 0;
}

.adigital-ciber-wrapper form,
.adigital-ciber-wrapper ol,
.adigital-ciber-wrapper ul,
.adigital-ciber-wrapper dl,
.adigital-ciber-wrapper blockquote,
.adigital-ciber-wrapper figure,
.adigital-ciber-wrapper pre {
	margin-bottom: 0;
}

/* Lists — Tailwind preflight resets these, Flatsome brings them back */
.adigital-ciber-wrapper ol,
.adigital-ciber-wrapper ul {
	list-style: none;
	padding-left: 0;
}

/* Label reset — landing uses <label> as a generic wrapper for form-fields
   and check-pills, not as a typical Flatsome form label */
.adigital-ciber-wrapper label,
.adigital-ciber-wrapper legend {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin-bottom: 0;
	letter-spacing: normal;
	text-transform: none;
	line-height: inherit;
	display: block;
}

/* Headings — landing controls weight via Tailwind classes, kill Flatsome
   custom-css overrides (`h3 { font-weight: 800 }`, `h1,h2,h4,h5,h6 { 600 }`) */
.adigital-ciber-wrapper h1,
.adigital-ciber-wrapper h2,
.adigital-ciber-wrapper h3,
.adigital-ciber-wrapper h4,
.adigital-ciber-wrapper h5,
.adigital-ciber-wrapper h6 {
	margin: 0;
	letter-spacing: inherit;
	font-style: inherit;
}

/* Form inputs / textarea / select — Flatsome injects border, box-shadow,
   color, height. Override to match the landing's flat style. */
.adigital-ciber-wrapper input[type="text"],
.adigital-ciber-wrapper input[type="email"],
.adigital-ciber-wrapper input[type="tel"],
.adigital-ciber-wrapper input[type="number"],
.adigital-ciber-wrapper input[type="search"],
.adigital-ciber-wrapper input[type="url"],
.adigital-ciber-wrapper input[type="password"],
.adigital-ciber-wrapper input[type="date"],
.adigital-ciber-wrapper textarea,
.adigital-ciber-wrapper select {
	background-color: #fff !important;
	border: 1px solid rgba(56, 94, 157, 0.20) !important;
	border-bottom: 1.5px solid rgba(56, 94, 157, 0.30) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--gtd-texto) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	width: 100%;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.adigital-ciber-wrapper input[type="text"]:focus,
.adigital-ciber-wrapper input[type="email"]:focus,
.adigital-ciber-wrapper input[type="tel"]:focus,
.adigital-ciber-wrapper textarea:focus {
	border-color: var(--gtd-cian) !important;
	border-bottom-color: var(--gtd-cian) !important;
	box-shadow: 0 1px 0 0 var(--gtd-cian) !important;
	background: rgba(83, 184, 156, 0.03) !important;
}

.adigital-ciber-wrapper textarea {
	resize: vertical;
	min-height: 90px !important;
}

.adigital-ciber-wrapper input::placeholder,
.adigital-ciber-wrapper textarea::placeholder {
	color: rgba(49, 49, 49, 0.35);
	font-weight: 300;
	opacity: 1;
}

/* Buttons — Flatsome adds borders, margins, text-shadow, line-height.
   Landing's CTAs use Tailwind utilities and assume preflight-clean buttons. */
.adigital-ciber-wrapper button,
.adigital-ciber-wrapper .button,
.adigital-ciber-wrapper button[type="submit"] {
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	margin-bottom: 0 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: inherit;
	/* IMPORTANT: do NOT set font-weight here — Tailwind utility classes
	   (font-semibold etc.) on the button need to win. */
}

/* Submit button keeps uppercase + wide tracking from landing's classes */
.adigital-ciber-wrapper .ciber-form button[type="submit"] {
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

/* Anchor reset — Flatsome adds underline-on-hover and link colors */
.adigital-ciber-wrapper a {
	text-decoration: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}

/* Tables, blockquote — guard against Flatsome typography rules */
.adigital-ciber-wrapper figure {
	margin: 0;
}

/* ============================================================
   HEADER OVERLAY — match the preview's behaviour where the header
   `position:fixed` overlays the hero. Flatsome's header is `position:
   relative` and pushes the hero down by 170px, which crops the CTAs +
   stats row that the landing aligns to the bottom of the hero.
   Solution: pull the entire landing wrapper up by the header height
   with negative margin-top, so the hero sits underneath the header
   (the dark hero bg shows through the header's flat-colored strips).
   Header keeps its natural in-flow position; only the wrapper moves.
   ============================================================ */
.adigital-ciber-wrapper {
	position: relative;
	z-index: 0;
	margin-top: -170px;
}
@media (max-width: 549px) {
	.adigital-ciber-wrapper {
		margin-top: -70px;
	}
}

:root {
  --gtd-azul:        #395E9D;
  --gtd-azul-oscuro: #334862;
  --gtd-azul-claro:  #4B8FD8;
  --gtd-cian:        #53B89C;
  --gtd-cian-oscuro: #3F9D80;
  --gtd-texto:       #313131;
  --gtd-link:        #006BA1;
  --gtd-bg:          #FAFBFC;
}

/* Smooth-scroll global pero respetando reduced-motion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Prevent horizontal scrollbar when scroll-jack track extends past viewport */
html, body { overflow-x: hidden; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================================================
   Hero textura + grid sutil reutilizable
   ============================================================ */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Hero h1 ajuste fino: leading + reveal */
.hero-h1 span {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-line-in 0.85s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}
.hero-h1 span:nth-child(1) { animation-delay: 0.10s; }
.hero-h1 span:nth-child(2) { animation-delay: 0.22s; }
.hero-h1 span:nth-child(3) { animation-delay: 0.34s; }
.hero-h1 span:nth-child(4) { animation-delay: 0.48s; }

@keyframes hero-line-in {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Menu badge "NUEVO" en CIBERSEGURIDAD (animation pulse)
   ============================================================ */
.menu-ciber-new {
  position: relative;
}
.menu-ciber-new::before {
  content: "";
  position: absolute;
  left: -10px; right: -10px; bottom: -22px;
  height: 2px;
  background: var(--gtd-cian);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.menu-ciber-new:hover::before { transform: scaleX(1); }
.menu-ciber-new::after {
  content: "NUEVO";
  position: absolute;
  top: -14px;
  right: -22px;
  background: var(--gtd-cian);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 6px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  animation: badge-pulse 5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(83, 184, 156, 0.55);
  pointer-events: none;
}

@keyframes badge-pulse {
  0%, 86%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 184, 156, 0.55);
  }
  90% {
    transform: scale(1.18);
    box-shadow: 0 0 0 10px rgba(83, 184, 156, 0);
  }
  94% {
    transform: scale(1.05);
    box-shadow: 0 0 0 14px rgba(83, 184, 156, 0);
  }
}

/* ============================================================
   Scroll-jack horizontal (desktop)
   Section height is set dynamically by JS to match pin range + 1vh.
   ============================================================ */
.scrolljack-section {
  position: relative;
  height: 100vh; /* fallback — JS overrides with the correct value */
}

.scrolljack-track {
  position: relative;       /* GSAP pins via position:fixed during scroll-jack */
  top: 0;
  height: 78vh;
  width: max-content;       /* accommodates all 4 panels side-by-side */
  display: flex;
  background: #DCE6F1;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(56, 94, 157, 0.10) 1px, transparent 0);
  background-size: 32px 32px;
  will-change: transform;
}

.scrolljack-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 78vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 142px 5vw 0 5vw; /* top clears fixed header; lateral breath separates panels */
}

.scrolljack-panel > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Vertical divider between panels (visible separation) */
.scrolljack-panel + .scrolljack-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(56, 94, 157, 0.35), transparent);
}

/* Big number subtle gradient + decorative line on the side */
.scrolljack-panel [data-panel],
.scrolljack-panel .text-gtd-cian.tabular-nums {
  text-shadow: 0 1px 0 rgba(63, 157, 128, 0.04);
}

/* Dots overlay (desktop, fixed at viewport bottom while scroll-jack is in view) */
.scrolljack-dots-overlay {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.1, 1),
              transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.scrolljack-dots-overlay.is-pinned {
  opacity: 1;
  transform: translateY(0);
}
.scrolljack-dots-overlay.is-pinned > * { pointer-events: auto; }

.scrolljack-dots-overlay .dot {
  display: block;
  width: 32px;
  height: 2px;
  background: rgba(51, 72, 98, 0.18);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.scrolljack-dots-overlay .dot.is-active {
  background: var(--gtd-cian);
  width: 56px;
}

/* ============================================================
   Mobile pillars (snap horizontal swipe)
   ============================================================ */
.mobile-pillars-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  -webkit-overflow-scrolling: touch;
  padding-block: 8px 16px;
}
.mobile-pillars-track::-webkit-scrollbar { display: none; }

.mobile-pillar {
  flex: 0 0 88%;
  min-width: 280px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(56, 94, 157, 0.12);
  border-top: 4px solid var(--gtd-azul);
  padding: 28px 26px 32px;
  box-shadow: 0 12px 30px -16px rgba(51, 72, 98, 0.18);
}

.mobile-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(51, 72, 98, 0.22);
  transition: all 0.3s ease;
}
.mobile-dot.is-active {
  background: var(--gtd-cian);
  width: 24px;
  border-radius: 999px;
}

/* ============================================================
   Formulario · estilos
   ============================================================ */
.form-field { display: block; }

.form-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gtd-azul-oscuro);
  margin-bottom: 8px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(56, 94, 157, 0.20);
  border-bottom: 1.5px solid rgba(56, 94, 157, 0.30);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--gtd-texto);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  border-radius: 0;
  outline: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(49, 49, 49, 0.35);
  font-weight: 300;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gtd-cian);
  border-bottom-color: var(--gtd-cian);
  box-shadow: 0 1px 0 0 var(--gtd-cian);
  background: rgba(83, 184, 156, 0.03);
}

.form-field textarea { resize: vertical; min-height: 90px; }

/* ====== Custom checkboxes (servicios) — pill style ====== */
.check-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(56, 94, 157, 0.18);
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
}
.check-pill input { position: absolute; opacity: 0; pointer-events: none; }

.check-pill .check-mark {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(56, 94, 157, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex: 0 0 auto;
  transition: all 0.2s ease;
}
.check-pill .check-mark::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s ease;
  margin-top: -2px;
}
.check-pill input:checked + .check-mark {
  background: var(--gtd-cian);
  border-color: var(--gtd-cian);
}
.check-pill input:checked + .check-mark::after {
  transform: rotate(-45deg) scale(1);
}
.check-pill .check-text {
  font-size: 13.5px;
  color: var(--gtd-texto);
  line-height: 1.35;
  font-weight: 400;
}
.check-pill:hover {
  border-color: var(--gtd-cian);
  background: rgba(83, 184, 156, 0.04);
}
.check-pill input:focus-visible + .check-mark {
  outline: 2px solid var(--gtd-cian);
  outline-offset: 2px;
}

/* RGPD checkbox (line style, sin pill) */
.check-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.check-line input { position: absolute; opacity: 0; pointer-events: none; }
.check-line .check-mark {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(56, 94, 157, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex: 0 0 auto;
  margin-top: 2px;
  transition: all 0.2s ease;
}
.check-line .check-mark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s ease;
  margin-top: -2px;
}
.check-line input:checked + .check-mark {
  background: var(--gtd-cian);
  border-color: var(--gtd-cian);
}
.check-line input:checked + .check-mark::after {
  transform: rotate(-45deg) scale(1);
}
.check-line .check-text-small {
  font-size: 12.5px;
  color: rgba(49, 49, 49, 0.75);
  font-weight: 400;
  line-height: 1.55;
}

/* ============================================================
   Misc · selección, scrollbar, etc.
   ============================================================ */
::selection { background: rgba(83, 184, 156, 0.3); color: var(--gtd-azul-oscuro); }

/* Custom scrollbar (subtle, only on supporting browsers) */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: rgba(51, 72, 98, 0.3) transparent; }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(51, 72, 98, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(83, 184, 156, 0.6); }

/* Reveal on scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.1, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Responsive ajustes finos
   ============================================================ */
@media (max-width: 1024px) {
  .scrolljack-section { display: none; }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 40px !important; line-height: 1.05 !important; }
}