/* ============================================================
   ARENZOR — Sistema de diseño
   Canvas oscuro · superficies de cristal esmerilado · acento teal
   Tipografía: DM Sans (display) + Inter (interfaz)
   ============================================================ */

:root {
  /* Colores — tema oscuro */
  --canvas: #07100e;              /* fondo de página */
  /* Cristal esmerilado: deja intuir el fondo animado pero lo atenúa,
     para que el texto de las tarjetas se lea sin competir con las curvas */
  --surface: rgba(11, 23, 20, .72);
  --surface-solid: #0e1917;       /* tarjetas opacas cuando hace falta */
  --paper: #ffffff;               /* blanco real: texto sobre botones de color */

  --ink: #f2f5f4;                 /* texto principal */
  --steel: #9aa5a2;               /* texto secundario */
  --fog: #869390;                 /* texto terciario (>=5:1 sobre toda superficie) */
  --cloud: rgba(255, 255, 255, .13);     /* bordes */
  --mist: rgba(255, 255, 255, .07);      /* separadores suaves */
  --charcoal: #0b1413;

  --teal: #10b981;
  --teal-dark: #0d9668;
  --teal-wash: rgba(16, 185, 129, .16);
  --mint: #61f7cf;
  --mint-wash: rgba(97, 247, 207, .14);
  --sunshine: #f0b100;
  --sunshine-wash: rgba(240, 177, 0, .16);
  --blush: #ff8a80;
  --blush-wash: rgba(255, 138, 128, .16);

  /* Tipografía */
  /* Escala de tres pasos. Los saltos son de 1.23 y 1.25: suficientes
     para que la jerarquía se vea sin mirar dos veces. */
  --fs-micro: 13px;   /* etiquetas, píldoras, pie legal */
  --fs-body: 16px;    /* texto corrido y controles */
  --fs-lead: 20px;    /* entradillas y títulos de tarjeta */
  --font-display: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radios */
  --r-btn: 8px;
  --r-card: 16px;
  --r-feature: 24px;
  --r-panel: 48px;
  --r-pill: 9999px;

  /* Layout */
  --max-width: 1200px;
  --section-gap: 96px;

  /* Sombras (solo controles) */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0 1px 2px 0;

  /* Alias heredados (páginas legales) */
  --dark: var(--canvas);
  --dark-2: var(--charcoal);
  --cream: var(--canvas);
  --sage: var(--mist);
  --white: var(--surface-solid);
  --accent: var(--teal);
  --accent-dark: var(--teal-dark);
  --text-dark: var(--ink);
  --text-muted: var(--steel);
  --text-light: var(--ink);
  --text-light-muted: var(--steel);
  --border-light: var(--cloud);
  --radius: var(--r-card);
}

/* ---------- Fondo animado fijo (curvas de nivel) ---------- */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}

.site-bg.is-ready { opacity: .3; }

/* El contenido va por encima del fondo */
.site-header,
main,
.site-footer,
.cookie-banner { position: relative; z-index: 1; }

/* Texto que solo existe para los lectores de pantalla: mantiene el índice
   de encabezados completo sin añadir nada a la composición. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
}

p { margin: 0 0 12px; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* ---------- Layout ---------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-gap) 0;
  position: relative;
}

/* Divisor entre apartados: una línea que se desvanece hacia los lados,
   para marcar dónde acaba uno y empieza el siguiente sin cortar en seco */
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max-width), calc(100% - 48px));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .16) 25%,
    rgba(255, 255, 255, .16) 75%,
    transparent
  );
}

#servicios, #casos-de-uso, #proceso, #contacto { scroll-margin-top: 96px; }

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-micro);
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--steel);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .15s ease;
}

.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.btn-primary,
.btn-accent {
  background: var(--teal);
  color: var(--charcoal);
  box-shadow: var(--shadow-subtle);
}

.btn-primary:hover,
.btn-accent:hover { background: var(--teal-dark); transform: translateY(-2px); }

.btn-outline,
.btn-outline-light {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cloud);
  color: var(--ink);
}

.btn-outline:hover,
.btn-outline-light:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn-large {
  width: 100%;
  padding: 16px 24px;
  font-size: var(--fs-body);
}

/* ---------- Cabecera ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 16, 14, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cloud);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  /* Al engordar el trazo, las letras se juntan visualmente: se compensa
     aflojando un punto el espaciado para que no queden apelmazadas */
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--ink);
  flex-shrink: 0;
}

.logo-light { color: var(--paper); }

/* La estrella tiene las puntas muy finas, así que a igualdad de altura
   pesa menos que un logo macizo. Se compensa dándole algo más de tamaño. */
.logo-icon { height: 40px; width: auto; display: block; margin: -4px 0; }

.footer-brand .logo-icon { height: 34px; }

.main-nav {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--steel);
  transition: color .15s ease;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .25s ease;
}

.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.header-actions .btn { padding: 10px 18px; min-height: 44px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  display: block;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 96px 0 112px;
  /* Sin fondo propio: deja ver el patrón de curvas del resto de la web */
  background: transparent;
  overflow: hidden;
}

/* Velo suave detrás del titular: mantiene el contraste del texto grande
   sin tapar el patrón, que sigue viéndose igual que en los demás apartados */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(7, 16, 14, .55) 0%,
    rgba(7, 16, 14, .35) 45%,
    rgba(7, 16, 14, 0) 85%
  );
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero .eyebrow { color: rgba(255, 255, 255, .72); }

.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  color: var(--paper);
}

.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .78);
  max-width: 520px;
  margin-bottom: 32px;
}

/* Botón secundario del hero, adaptado al fondo oscuro */
.hero .btn-outline {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
  color: var(--paper);
  backdrop-filter: blur(6px);
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .55);
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Entrada del hero al cargar */
.hero-copy > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn .8s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .15s; }
.hero-copy > *:nth-child(3) { animation-delay: .25s; }
.hero-copy > *:nth-child(4) { animation-delay: .35s; }

.hero-visual {
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.4, 0, .2, 1) .3s forwards;
  will-change: transform;
}

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero-visual svg { width: 100%; height: auto; display: block; }

.float-a { animation: floatY 6s ease-in-out infinite; }
.float-b { animation: floatY 7.5s ease-in-out infinite; animation-delay: -2.5s; }
.float-c { animation: floatY 5s ease-in-out infinite; animation-delay: -1s; }
.float-d { animation: floatY 8s ease-in-out infinite; animation-delay: -4s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.flow-line {
  stroke-dasharray: 5 9;
  animation: dashFlow 1.4s linear infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -14; }
}

.pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseRing 3s ease-out infinite;
}

@keyframes pulseRing {
  0%   { transform: scale(0.9); opacity: .5; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Tarjetas de ventaja ---------- */

.features { padding-top: 0; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature-tile {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  transition: border-color .25s ease, transform .25s ease;
}

.feature-tile:hover { border-color: var(--teal); transform: translateY(-4px); }

.feature-tile .icon-block,
.info-card .icon-block { grid-column: 1; grid-row: 1; margin-top: 2px; }

.feature-tile h3,
.info-card h3 { grid-column: 2; grid-row: 1; }

.feature-tile p,
.info-card p { grid-column: 1 / -1; grid-row: 2; }

.feature-tile h3 {
  font-size: var(--fs-lead);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.feature-tile p {
  font-size: var(--fs-body);
  color: var(--steel);
  margin: 10px 0 0;
}

/* Icono en línea junto al título.
   Sin cuadrito de fondo: el contenedor redondeado sobre el titular es la
   plantilla que delata a cualquier generador. El icono va donde va la
   lectura, a la izquierda del título, y el color hace el trabajo. */
.icon-block {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}

.icon-block svg { width: 22px; height: 22px; }

.feature-tile:hover .icon-block,
.info-card:hover .icon-block { transform: translateY(-2px); }

.icon-teal     { color: #34d39f; }
.icon-sunshine { color: var(--sunshine); }
.icon-mint     { color: var(--mint); }
.icon-blush    { color: var(--blush); }

/* ---------- Cabecera de sección ---------- */

/* Los encabezados de apartado van centrados. El max-width evita que el
   subtítulo se estire de lado a lado, que centrado se leería fatal. */
.section-head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.section-sub {
  font-size: var(--fs-lead);
  color: var(--steel);
  margin: 0;
}

/* ---------- Rejilla de tarjetas ---------- */

.card-grid { display: grid; gap: 16px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.info-card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-feature);
  padding: 28px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  transition: border-color .25s ease, transform .25s ease;
}

.info-card:hover { border-color: var(--teal); transform: translateY(-4px); }

.info-card h3 {
  font-size: var(--fs-lead);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.info-card p {
  font-size: var(--fs-body);
  color: var(--steel);
  margin: 10px 0 0;
}

/* ---------- Panel destacado: hub de conexiones ---------- */

.showcase {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-panel);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.showcase-copy h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.showcase-copy p {
  font-size: var(--fs-lead);
  color: var(--steel);
  margin: 0;
}

.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tool-pill {
  font-size: var(--fs-micro);
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--cloud);
  color: var(--steel);
  transition: border-color .2s ease, color .2s ease;
}

.tool-pill:hover { border-color: var(--teal); color: var(--teal); }

.showcase-visual svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

/* Anillo exterior girando */
.orbit-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbitSpin 40s linear infinite;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* Satélites latiendo por turnos */
.sat-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: satPulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .42s);
}

@keyframes satPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Datos fluyendo hacia el núcleo */
.spoke {
  stroke-dasharray: 4 7;
  animation: spokeFlow 1.1s linear infinite;
  animation-delay: calc(var(--i) * .18s);
}

@keyframes spokeFlow {
  to { stroke-dashoffset: 22; }
}

/* ---------- Línea de tiempo del proceso ---------- */

.timeline {
  /* El relleno se guarda en variables porque la línea que une los pasos
     se posiciona a partir de él (centro de los círculos de 60px) */
  --tl-pad-y: 40px;
  --tl-pad-x: 32px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: var(--tl-pad-y) var(--tl-pad-x);
  list-style: none;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-feature);
}

.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  top: calc(var(--tl-pad-y) + 29px);
  left: calc(var(--tl-pad-x) + 30px);
  right: calc(var(--tl-pad-x) + 30px);
  height: 2px;
  border-radius: 2px;
}

.timeline::before { background: var(--cloud); }

.timeline::after {
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .25s;
}

.timeline.is-visible::after { transform: scaleX(1); }

.timeline-step { position: relative; z-index: 1; }

.timeline-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--canvas);
  border: 2px solid var(--cloud);
  color: var(--steel);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  margin-bottom: 20px;
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
  transition-delay: calc(var(--i) * 240ms + .45s);
}

.timeline.is-visible .timeline-marker {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--charcoal);
}

.timeline-step h3 {
  font-size: var(--fs-lead);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.timeline-step p {
  font-size: var(--fs-body);
  color: var(--steel);
  margin: 0;
}

/* ---------- Preguntas frecuentes ---------- */

.faq-list { max-width: 820px; }

/* Dentro del panel, la lista ocupa todo el ancho disponible */
.faq-panel .faq-list { max-width: none; margin-top: 40px; }

/* El fondo de las tarjetas es casi el mismo color que el panel, así que
   dentro de él se volverían invisibles: se aclaran un punto. Y el
   desenfoque sobra, porque detrás ya no está el patrón sino el panel. */
.faq-panel .faq-item {
  background: rgba(255, 255, 255, .045);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.faq-panel .faq-item[open],
.faq-panel .faq-item:hover { background: rgba(255, 255, 255, .07); }

.faq-item {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-card);
  margin-bottom: 12px;
  transition: border-color .2s ease;
}

.faq-item[open] { border-color: var(--teal); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  border-radius: var(--r-card);
}

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--steel);
  transition: transform .3s ease, color .2s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--teal); }
.faq-item summary:hover .faq-chevron { color: var(--teal); }

.faq-answer {
  padding: 0 24px 22px;
  animation: faqIn .3s ease;
}

.faq-answer p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--steel);
  max-width: 68ch;
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Contacto ---------- */

/* El panel de contacto y el de preguntas comparten aspecto: si se cambia
   uno, cambian los dos y no se van descuadrando con el tiempo */
.contact-panel,
.faq-panel {
  background: var(--charcoal);
  border-radius: var(--r-panel);
  padding: 64px 56px;
  color: var(--paper);
}

.contact-panel .eyebrow,
.faq-panel .eyebrow { color: var(--fog); }

.contact-panel h2,
.faq-panel h2 {
  color: var(--paper);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

/* Los dos paneles llevan su encabezado suelto, sin .section-head, así que
   se centran aquí para que queden igual que el resto de apartados */
.contact-panel,
.faq-panel { text-align: center; }

.contact-panel .section-sub,
.faq-panel .section-sub { color: var(--fog); max-width: 620px; margin: 0 auto; }

/* Lo que va debajo del encabezado vuelve a alinearse a la izquierda:
   un formulario o una lista de preguntas centrados no se leen bien */
.contact-layout,
.faq-panel .faq-list { text-align: left; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
  margin-top: 40px;
}

.contact-side { display: flex; flex-direction: column; gap: 16px; }

.contact-option {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  transition: border-color .25s ease;
}

.contact-option:hover { border-color: rgba(255, 255, 255, .28); }

.contact-option h3 { font-size: var(--fs-lead); margin: 0; color: var(--paper); }
.contact-option > p { margin: 0; color: var(--fog); font-size: var(--fs-body); }

/* Desplegable de Calendly */
.contact-option-calendly { align-items: stretch; }
.contact-option-calendly.is-open { border-color: rgba(16, 185, 129, .55); }

.calendly-trigger-wrap { margin: 0; width: 100%; }

.calendly-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  cursor: pointer;
}

.calendly-trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: var(--r-btn);
}

.calendly-trigger-text { display: flex; flex-direction: column; gap: 6px; }

.calendly-trigger-title {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.calendly-trigger-sub { font-size: var(--fs-body); color: var(--fog); }

.chevron-circle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  transition: transform .35s ease, background-color .2s ease, border-color .2s ease;
}

.contact-option-calendly:hover .chevron-circle {
  background: var(--teal);
  border-color: var(--teal);
}

.contact-option-calendly.is-open .chevron-circle { transform: rotate(180deg); }

.calendly-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}

.contact-option-calendly.is-open .calendly-panel { grid-template-rows: 1fr; }

/* Para abrirlo de entrada en ordenador sin que se vea la animación */
.contact-option-calendly.sin-animacion .calendly-panel,
.contact-option-calendly.sin-animacion .chevron-circle { transition: none; }

.calendly-panel-inner { overflow: hidden; }

.calendly-card {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 6px;
  overflow: hidden;
  margin-top: 18px;
}

/* El contenedor ya no lleva la clase calendly-inline-widget (si la llevara,
   el script de Calendly lo arrancaría solo, sin esperar al consentimiento),
   así que la altura se le da también por su id. Sin esto el calendario se
   queda aplastado en unos 150px. */
.calendly-inline-widget,
#calendly-destino { width: 100%; height: 520px; }

/* Lo que se ve en lugar del calendario mientras no se aceptan las cookies */
.calendly-aviso {
  padding: 34px 26px;
  text-align: center;
}

.calendly-aviso p {
  color: var(--steel);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 20px;
}

.calendly-aviso-nota {
  font-size: var(--fs-micro);
  color: var(--fog);
  margin: 20px 0 0 !important;
}

/* ---------- Formulario ---------- */

.contact-form-card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cloud);
  border-radius: var(--r-feature);
  padding: 32px;
  color: var(--ink);
}

.contact-form-card h3 {
  font-size: var(--fs-lead);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.form-intro {
  color: var(--steel);
  font-size: var(--fs-body);
  margin-bottom: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-grid .field { margin-bottom: 0; }
.field-wide { grid-column: 1 / -1; }

.field label,
.field-group legend {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

.field label abbr,
.check-consent abbr {
  color: var(--teal);
  text-decoration: none;
}

.opt { font-weight: 400; color: var(--fog); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--cloud);
  border-radius: var(--r-btn);
  padding: 11px 14px;
  width: 100%;
  min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea { resize: vertical; }

/* Campo con un aviso de validación */
.field input.tiene-error,
.field select.tiene-error,
.field textarea.tiene-error {
  border-color: #f87171;
  background: rgba(248, 113, 113, .06);
}

.campo-error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #fca5a5;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--fog); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}

.field-group legend { padding: 0; margin-bottom: 12px; }

.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--steel);
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  line-height: 1.4;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
}

.check-consent { margin: 4px 0 20px; }

.check-consent a { color: var(--teal); text-decoration: underline; }

/* Honeypot antispam: oculto para personas, visible para bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 14px 0 0;
  font-size: var(--fs-body);
  min-height: 1.4em;
}

.form-status.is-ok { color: var(--teal-dark); font-weight: 500; }
.form-status.is-error { color: #c0392b; font-weight: 500; }

#lead-submit[disabled] {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* ---------- Pie ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--ink);
  padding: 64px 0 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand { max-width: 400px; }

.footer-brand p {
  color: var(--fog);
  font-size: var(--fs-body);
  margin-top: 12px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.footer-contact a {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: color .15s ease;
}

.footer-contact a:hover { color: var(--mint); }

.footer-copy {
  color: var(--steel);
  font-size: var(--fs-micro);
  margin-top: 20px;
}

/* ---------- Aviso de cookies ---------- */

.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  background: var(--charcoal);
  color: var(--paper);
  border-radius: var(--r-card);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 680px;
  margin: 0 auto;
}

.cookie-banner.hidden { display: none; }

/* Aceptar y rechazar tienen el mismo peso visual: la ley pide que
   rechazar sea tan fácil como aceptar, no un enlace escondido */
.cookie-acciones { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-acciones .btn { white-space: nowrap; }

.cookie-banner p { margin: 0; font-size: var(--fs-body); color: var(--fog); }

.cookie-banner a { color: var(--paper); text-decoration: underline; }

.cookie-banner .btn { flex-shrink: 0; padding: 10px 18px; min-height: 44px; }

/* ---------- Aparición al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
              transform .7s cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* A partir de aquí la página es de una columna; un menú horizontal se
     queda sin sitio entre el logo y el botón, así que pasa a plegarse. */
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #0b1413;
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    border-bottom: 1px solid var(--cloud);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; width: 100%; min-height: 48px; }
  .main-nav a::after { display: none; }
  .menu-toggle { display: flex; }

  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { max-width: 460px; }
  .feature-grid { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; gap: 36px; padding: 40px 32px; }
  .showcase-visual { order: -1; }
  .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-panel,
  .faq-panel { padding: 48px 32px; }

  /* Línea de tiempo en vertical */
  .timeline { grid-template-columns: 1fr; gap: 28px; --tl-pad-x: 28px; }
  .timeline::before,
  .timeline::after {
    top: calc(var(--tl-pad-y) + 30px);
    bottom: calc(var(--tl-pad-y) + 30px);
    left: calc(var(--tl-pad-x) + 29px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .timeline::after { transform: scaleY(0); transform-origin: center top; }
  .timeline.is-visible::after { transform: scaleY(1); }
  .timeline-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 18px;
    align-items: start;
  }
  .timeline-marker { margin-bottom: 0; }
}

@media (max-width: 720px) {
  :root { --section-gap: 64px; }

  /* En 375px no caben logo + botón + menú con el cuerpo a 16px. Este botón
     es chrome, no contenido: usa el paso micro de la escala para caber en
     una línea sin inventar un tamaño nuevo. */
  .header-actions .btn-primary {
    padding: 8px 14px;
    font-size: var(--fs-micro);
    white-space: nowrap;
  }

  .hero { padding: 48px 0 56px; }
  .section-head { margin-bottom: 32px; }
  .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }

  .showcase { padding: 32px 20px; border-radius: 32px; }
  .timeline { --tl-pad-x: 20px; --tl-pad-y: 28px; }

  /* En móvil el calendario de Calendly reparte el contenido en menos ancho,
     así que necesita más alto para no obligar a hacer scroll dentro */
  .calendly-inline-widget,
  #calendly-destino { height: 660px; }
  .contact-panel,
  .faq-panel { padding: 36px 20px; border-radius: 32px; }
  .contact-form-card { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }

  .footer-contact { align-items: flex-start; }

  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero-copy > *, .hero-visual { opacity: 1; transform: none; }
}