/* ============================================================
   CELSIK Suelo — estilos propios de /suelo.
   Se carga DESPUÉS de site/styles.css y reutiliza sus clases
   (cs-nav, cs-section, cs-mrow, cs-acc, cs-modal, cs-cookie…).
   Aquí solo va lo que la home no tiene. Sin valores inventados,
   salvo el verde claro del hero animado (#B4DC96), que es el
   acento de la animación de la otra sesión.
   ============================================================ */

:root { --su-accent: #B4DC96; }

/* El menú móvil, el modal y el aviso usan display:flex: que [hidden] mande */
[hidden] { display: none !important; }

/* La página es estática: sin la cortina de la home, todo visible al cargar */
.su-skip {
  position: absolute; left: 16px; top: -60px; z-index: 120;
  background: var(--white); color: var(--green-800);
  font: var(--weight-semibold) var(--text-xs) var(--font-ui);
  padding: 10px 16px; border-radius: var(--radius-pill);
  transition: top var(--dur-fast) var(--ease-standard);
}
.su-skip:focus { top: 12px; }

/* ---- Navegación: misma cápsula que la home; el idioma va con enlaces (dos páginas) ---- */
.cs-langs a {
  font-family: var(--font-ui);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  color: var(--white);
  opacity: 0.7;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  transition: background 260ms var(--ease-out), color 220ms var(--ease-standard), opacity 220ms var(--ease-standard), transform 200ms var(--ease-out);
}
.cs-langs a:hover { color: var(--white); opacity: 1; background: rgba(255, 255, 255, 0.12); }
.cs-langs a:active { transform: scale(0.95); }
.cs-langs a.on { background: var(--white); color: var(--green-800); opacity: 1; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.20); }
.cs-mobilemenu .su-mm-cta {
  margin-top: 24px; border: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
/* Los enlaces del menú móvil de la home son titulares serif: aquí, pastillas */
.cs-mobilemenu .su-mm-cta a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  padding: 15px 24px;
  border: 1px solid var(--border-inverse);
}
.cs-mobilemenu .su-mm-cta a.cs-btn-hero--solid { color: var(--green-800); border-color: var(--white); }

/* ---- Hero: la animación ocupa la parte alta, el texto la franja baja ---- */
.su-hero {
  position: relative;
  min-height: max(100svh, 660px);
  background: var(--green-700);
  overflow: hidden;
}
.su-hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.su-hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 38%, rgba(29, 46, 28, 0) 55%, rgba(16, 28, 15, 0.55) 100%),
    linear-gradient(to top, rgba(29, 46, 28, 0.97) 0%, rgba(29, 46, 28, 0.86) 22%, rgba(29, 46, 28, 0) 44%);
}
.su-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 24px clamp(34px, 6.5vh, 68px);
  text-align: center;
}
/* El H1 es la etiqueta «CELSIK Suelo · Brokers de suelo» (lleva la palabra clave);
   el eslogan va en grande como párrafo. */
.su-hero-eyebrow, .su-hero h1.su-hero-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-style: normal;
  line-height: 1.4;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--su-accent);
  margin: 0;
}
.su-hero-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(40px, 5.2vw, 70px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 12px auto 16px;
  max-width: 26ch;
  text-wrap: balance;
}
.su-hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--slate-200);
  max-width: 58ch;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.su-hero-ctas { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.su-hero-alts { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; }
.su-hero-alt {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--slate-200);
}
.su-hero-alt:hover { color: var(--white); }

/* Botones con icono: misma pastilla que .cs-btn-hero, también en claro */
.cs-btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cs-btn-hero svg { width: 17px; height: 17px; flex-shrink: 0; }
a.cs-btn-hero--solid, a.cs-btn-hero--solid:hover { color: var(--green-800); }
a.cs-btn-hero--ghost, a.cs-btn-hero--ghost:hover { color: var(--white); }
a.cs-btn-hero:active { color: var(--white); }
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.su-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.su-btn:hover { background: var(--btn-primary-bg-hover); color: var(--white); }
.su-btn:active { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); transform: translateY(1px); }
.su-btn--outline { background: transparent; color: var(--text-brand); border-color: var(--border-strong); }
.su-btn--outline:hover { background: var(--slate-100); color: var(--text-brand); }
.su-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Bloques comunes ---------------------------------------------- */
.su-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 70ch;
  margin: 0 0 52px;
}
.su-lead--dark { color: var(--slate-300); }
.su-card {
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
}
.su-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--plum-500);
  margin-bottom: 16px;
}
.su-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  margin: 0 0 10px;
  color: var(--text-primary);
}
.su-card p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}
.su-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.su-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Enlace a preguntas y respuestas (sustituye a la lista de tipos de suelo) */
.su-faq-cta {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.su-faq-cta p { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-primary); }

/* Banda de compradores */
.su-buyer {
  margin-top: 56px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--green-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
}
.su-buyer h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin: 10px 0 12px;
}
.su-buyer p { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0; }
.su-five { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.su-five li {
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary);
  padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.su-five li:last-child { border-bottom: 0; padding-bottom: 0; }
.su-five b {
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular);
  font-size: var(--text-lg); color: var(--plum-500); min-width: 22px;
}
.su-five strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Cifras (mismo Stat del sistema de diseño) */
.su-numbers { padding: 84px 0; }
.su-numbers-h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, var(--text-2xl));
  line-height: var(--leading-snug);
  color: var(--white);
  max-width: 34ch;
  margin: 0 0 48px;
}
.su-numbers-close {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--su-accent);
  margin: 52px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border-inverse);
}
.su-stat-v {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
}
.su-stat-l {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
  margin-top: 10px;
  line-height: 1.5;
}

/* ---- Servicios: la tabla de mandatos de la home, a tres columnas ---- */
.su-svc .cs-mhead, .su-svc .cs-mrow { grid-template-columns: 1.55fr 1.45fr 1.6fr; }
.su-svc .cs-mrow:hover .cs-mrow-extra,
.su-svc .cs-mrow:focus-visible .cs-mrow-extra,
.su-svc .cs-mrow:focus-within .cs-mrow-extra { max-height: 140px; }
.su-svc-t {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin: 0;
  display: flex; gap: 12px; align-items: baseline;
}
.su-svc-t i { font-size: var(--text-md); color: var(--plum-500); }
.su-svc-c { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-secondary); }
.su-svc .cs-mrow-extra { line-height: var(--leading-normal); max-width: 110ch; }

/* ---- Así trabajamos: una historia que avanza en horizontal con el scroll ----
   Sin JS (o con movimiento reducido) es una fila que se desliza con el dedo.
   Con JS, .is-scrolly fija el panel y el scroll vertical mueve la pista. */
.su-story { background: var(--surface-sunken); position: relative; }
.su-story-sticky { padding: 104px 0 72px; }
.su-story.is-scrolly .su-story-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  box-sizing: border-box;
  /* Arriba, como cualquier sección (deja sitio a la barra fija); el aire sobrante queda abajo */
  padding: clamp(96px, 12vh, 128px) 0 clamp(28px, 5vh, 56px);
  display: flex; flex-direction: column; justify-content: flex-start;
  overflow: hidden;
}
/* Frase de cierre bajo un bloque (servicios, historia) */
.su-close {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  max-width: 62ch;
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.su-story-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; box-sizing: border-box; }
.su-story-lead {
  font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-normal);
  color: var(--text-secondary); max-width: 52ch; margin: 0;
}
.su-story-day { text-align: right; flex-shrink: 0; }
.su-story-day span {
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium);
  font-size: clamp(40px, 5vw, 68px); line-height: 1; color: var(--plum-700);
}
.su-story-day small {
  display: block; margin-top: 10px;
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); color: var(--text-muted);
}
.su-story:not(.is-scrolly) .su-story-day { display: none; }
.su-track-viewport {
  margin-top: clamp(32px, 6vh, 64px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.su-track-viewport::-webkit-scrollbar { display: none; }
.su-story.is-scrolly .su-track-viewport { overflow: visible; scroll-snap-type: none; }
.su-track {
  --su-pad: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
  list-style: none; margin: 0;
  display: flex;
  position: relative;
  padding: 0 var(--su-pad);
  width: max-content;
  will-change: transform;
}
/* Línea del tiempo: base gris + tramo recorrido en verde */
.su-track::before, .su-track::after {
  content: ''; position: absolute; top: 7px; height: 1px; left: var(--su-pad);
}
.su-track::before { right: var(--su-pad); background: var(--border-default); }
.su-track::after { width: var(--su-fill, 0px); background: var(--green-700); }
.su-step {
  position: relative;
  flex: 0 0 clamp(250px, 24vw, 310px);
  padding: 34px 32px 0 0;
  scroll-snap-align: start;
  opacity: 0.38;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-standard), transform 520ms var(--ease-out);
}
.su-story:not(.is-scrolly) .su-step { opacity: 1; transform: none; }
.su-step.is-on { opacity: 1; transform: none; }
.su-step-node {
  position: absolute; left: 0; top: 2px;
  width: 11px; height: 11px;
  transform: rotate(45deg);
  background: var(--surface-sunken);
  border: 1px solid var(--slate-400);
  transition: background 300ms var(--ease-standard), border-color 300ms var(--ease-standard), transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.su-step.is-on .su-step-node { background: var(--green-700); border-color: var(--green-700); }
.su-step.is-now .su-step-node { transform: rotate(45deg) scale(1.35); box-shadow: 0 0 0 5px rgba(41, 64, 32, 0.12); }
.su-step-t {
  display: block;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-xl); line-height: 1.2;
  color: var(--plum-700);
  margin-bottom: 10px;
}
.su-step p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: 34ch;
}
.su-step.is-now p { color: var(--text-primary); }
.su-story-foot { margin-top: clamp(28px, 5vh, 52px); width: 100%; box-sizing: border-box; }
.su-story-bar { height: 2px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.su-story-bar span { display: block; height: 100%; width: 0; background: var(--green-700); }
.su-story-foot p {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-lg); color: var(--text-primary); margin: 0;
}
.su-story:not(.is-scrolly) .su-story-bar { display: none; }
/* Móvil: la pista salta de paso en paso con una transición suave */
.su-story.is-snap .su-track { transition: transform 560ms var(--ease-out); }
.su-story.is-snap .su-track::after { transition: width 560ms var(--ease-out); }

/* ---- Reflexiones (tarjetas de Perspectivas + modal) ----------------- */
/* Carrusel: pista con scroll-snap que sangra hasta el borde derecho */
.su-refl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 44px; }
.su-car-nav { display: flex; gap: 10px; flex-shrink: 0; }
.su-car-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card); color: var(--green-700);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.su-car-btn svg { width: 16px; height: 16px; }
.su-car-btn:hover { background: var(--green-700); color: var(--white); transform: scale(1.06); }
.su-car-btn:active { background: var(--plum-700); transform: scale(0.97); }
.su-car-btn[disabled] { opacity: 0.35; cursor: default; transform: none; background: var(--surface-card); color: var(--green-700); }
.su-car-track {
  --su-pad: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px var(--su-pad) 30px;
  scroll-padding-left: var(--su-pad);
  outline: none;
  cursor: grab;
}
.su-car-track::-webkit-scrollbar { display: none; }
.su-car-track:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.su-car-track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.su-car-track.is-drag .su-car-card { pointer-events: none; }
.su-car-card {
  flex: 0 0 min(380px, 82vw);
  scroll-snap-align: start;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  cursor: pointer;
  user-select: none;
  transition: opacity 420ms var(--ease-standard), transform 560ms var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
/* Con JS: las que no se ven del todo quedan atenuadas; entrada escalonada desde la derecha */
.su-car.js .su-car-card { opacity: 0.45; transform: scale(0.965); }
.su-car.js .su-car-card.is-vis { opacity: 1; transform: none; }
.su-car.js:not(.is-in) .su-car-card { opacity: 0; transform: translateX(70px); }
.su-car.js.is-in .su-car-card { transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms; }
.su-car.js.is-settled .su-car-card { transition-delay: 0ms; }
.su-car.js .su-car-card.is-vis:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.su-car-card:hover .cs-persp-title { color: var(--plum-700); }
.su-car-foot { display: flex; align-items: center; gap: 22px; margin-top: 4px; }
.su-car-bar { flex: 1; height: 2px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; }
.su-car-bar span { display: block; height: 100%; width: 12%; background: var(--green-700); transition: width 300ms var(--ease-out); }
.su-car-count {
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); color: var(--text-muted); min-width: 56px; text-align: right;
}
.su-car-card .cs-persp-title { font-size: var(--text-xl); }
.su-refl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.su-refl-meta span:first-child {
  font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-wide);
}
.su-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--slate-700);
  line-height: 1.1;
}
.su-badge--green { background: var(--green-50); color: var(--green-700); }
.su-refl .cs-persp-title { font-size: var(--text-xl); }
.su-refl-sum {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 18px;
  flex: 1;
}
.su-refl-btn {
  align-self: flex-start;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green-700);
}
/* El cuerpo vive en el HTML (lo leen buscadores y asistentes) y se muestra en el modal */
.su-refl-body { display: none; }
.cs-modal-card blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--green-200);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--plum-700);
}
.cs-modal-card .su-modal-cta {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.cs-modal-card .su-modal-cta span { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Preguntas: el acordeón de la home, con paneles largos ----------- */
/* La altura de cada panel la fija suelo.js (scrollHeight): las respuestas son largas */
.su-faq .cs-acc-panel { transition: max-height 320ms var(--ease-out); }
.su-faq .cs-acc-btn h3 { font: inherit; margin: 0; color: inherit; letter-spacing: 0; }
.su-faq .cs-acc-panel p, .su-faq .cs-acc-panel ul { max-width: 78ch; }
.su-faq .cs-acc-panel ul {
  margin: -6px 0 0; padding: 0 24px 20px 46px;
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary);
}
.su-faq .cs-acc-panel li { margin-bottom: 6px; }
.su-faq .cs-acc-panel p + p { padding-top: 0; }

/* ---- Contacto --------------------------------------------------------- */
.su-direct { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 0 36px; }
.su-direct .cs-btn-hero { width: 100%; padding-top: 18px; padding-bottom: 18px; }
.su-direct .cs-btn-hero--ghost { font-size: var(--text-xs); }
.su-help {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--slate-300);
  max-width: 44ch;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-inverse);
}
.su-help strong { color: var(--white); font-weight: var(--weight-semibold); }
.su-input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--surface-card);
  padding: 11px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.su-input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(41, 64, 32, 0.12); }
.cs-field .su-opt { text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); color: var(--text-muted); }
.su-form { display: flex; flex-direction: column; gap: 18px; }
.su-form-err {
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--status-danger); background: #f9ece8;
  border: 1px solid #e8c4b8; border-radius: var(--radius-md); padding: 10px 12px;
}
.su-form-ok {
  padding: 40px 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: var(--text-xl);
  color: var(--text-brand);
}
.su-form-ok small {
  display: block; margin-top: 14px;
  font-family: var(--font-ui); font-style: normal; font-size: var(--text-sm); color: var(--text-muted);
}
.su-legal { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); margin: 0; line-height: 1.5; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* ---- Responsable de la división --------------------------------------- */
.su-lead-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: start; }
.su-person {
  background: var(--green-800);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-inverse);
  position: sticky; top: 96px;
}
.su-person .cs-portrait { margin-bottom: 20px; }
.su-person-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.04);
}
.su-person-name {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium);
  color: var(--white); margin: 0;
}
.su-person-name a { color: var(--green-200); line-height: 0; }
.su-person-name a:hover { color: var(--white); }
.su-person-role {
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--green-200);
  margin: 8px 0 0; line-height: 1.5;
}
.su-story-txt p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--slate-200);
  margin: 0 0 20px;
  max-width: 62ch;
}
.su-story-txt p.su-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--white);
  margin: 4px 0 28px;
}
.su-story-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
/* ---- Servicios: tarjetas con icono propio (trazo fino que se dibuja) ---- */
.su-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.su-svc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out), opacity 360ms var(--ease-standard);
}
.su-svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.su-svc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.su-svc-ico { width: 64px; height: 64px; color: var(--green-700); overflow: visible; }
.su-svc-ico .a { stroke: var(--plum-500); }
.su-svc-ico .h path { stroke-width: 0.8; opacity: 0.4; }
.su-svc-ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.su-svc-card.is-in .su-svc-ico [pathLength] { animation: su-draw 1300ms var(--ease-out) 150ms both; }
.su-svc-card.is-in .su-svc-ico .a { animation-delay: 650ms; }
.su-svc-card:hover .su-svc-ico [pathLength] { animation: su-draw2 900ms var(--ease-out) both; }
.su-svc-card:hover .su-svc-ico .a { animation-delay: 300ms; }
@keyframes su-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes su-draw2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.su-svc-n { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--plum-500); }
.su-svc-card h3 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); margin: 0 0 8px; color: var(--text-primary);
}
.su-svc-tag { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0 0 14px; }
.su-svc-who {
  font-family: var(--font-ui); font-size: var(--text-3xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  margin: auto 0 18px; line-height: 1.6;
}
.su-svc-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--green-700);
}
.su-svc-more span { position: relative; width: 12px; height: 12px; }
.su-svc-more span::before, .su-svc-more span::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 1.4px;
  background: currentColor; transition: transform var(--dur-normal) var(--ease-out);
}
.su-svc-more span::after { transform: rotate(90deg); }
.su-svc-card.open .su-svc-more span::after { transform: rotate(0deg); }
.su-svc-more:hover { color: var(--plum-700); }
.su-svc-detail { max-height: 0; overflow: hidden; transition: max-height 340ms var(--ease-out); }
.su-svc-detail p {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--text-secondary); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.no-js .su-svc-detail { max-height: none; }

/* ---- Reflexiones como historias: portadas verticales (9:16) --------------- */
.su-tile-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); margin: 14px 0 0; max-width: 62ch; }
.su-car-card.su-tile {
  flex: 0 0 clamp(212px, 21vw, 252px);
  aspect-ratio: 9 / 16;
  box-sizing: border-box;
  padding: 16px 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  background-color: var(--green-700);
  background-image:
    linear-gradient(to top, rgba(16, 28, 15, 0.94) 0%, rgba(16, 28, 15, 0.55) 48%, rgba(29, 46, 28, 0.15) 100%),
    url(/assets/banner-chevron.png);
  background-size: cover, 260% auto;
  background-position: center, calc(var(--i, 0) * 13%) 30%;
  box-shadow: var(--shadow-md);
  outline: none;
}
.su-car-card.su-tile:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }
.su-tile-head { display: flex; align-items: center; gap: 9px; }
.su-tile-ring {
  position: relative; width: 36px; height: 36px; border-radius: 50%; padding: 2px; flex-shrink: 0;
  background: conic-gradient(from 210deg, var(--su-accent), var(--green-300), var(--plum-300), var(--su-accent));
}
.su-tile-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--green-700); box-sizing: border-box; object-fit: cover; }
.su-tile.is-seen .su-tile-ring { background: var(--slate-500); }
.su-car-card.su-tile:hover .su-tile-ring { animation: su-ring 1.8s linear infinite; }
@keyframes su-ring { to { filter: hue-rotate(40deg) brightness(1.15); } }
.su-tile-name { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--white); opacity: 0.92; }
.su-tile .su-refl-meta { margin-top: auto; margin-bottom: 8px; }
.su-tile .su-refl-meta span:first-child { color: var(--green-200); }
.su-tile .su-badge { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.su-car-card.su-tile .cs-persp-title {
  color: var(--white); font-size: clamp(20px, 1.7vw, 24px); margin: 6px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.su-car-card.su-tile:hover .cs-persp-title { color: var(--white); }
.su-tile .su-refl-sum {
  font-size: var(--text-xs); color: var(--slate-200); margin: 0 0 14px; flex: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.su-tile-play {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: var(--text-3xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--green-800); background: var(--white);
  padding: 8px 13px 8px 11px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.su-tile-play svg { width: 10px; height: 10px; fill: currentColor; }
.su-car-card.su-tile:hover .su-tile-play { background: var(--su-accent); transform: translateX(2px); }

/* ---- Visor de historias ---------------------------------------------------- */
.su-sv {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; gap: 28px;
  background: rgba(10, 16, 9, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: csFade 240ms var(--ease-standard);
}
.su-sv-panel {
  --sv-h: min(92vh, 780px);
  position: relative;
  height: var(--sv-h);
  width: min(100vw, calc(var(--sv-h) * 9 / 16));
  border-radius: 14px; overflow: hidden;
  background: var(--green-700);
  box-shadow: var(--shadow-inverse);
  touch-action: pan-y;
  user-select: none;
  animation: su-sv-in 360ms var(--ease-out);
}
@keyframes su-sv-in { from { opacity: 0; transform: scale(0.94); } }
.su-sv-bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 4; }
.su-sv-bar { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.32); }
.su-sv-bar i { display: block; height: 100%; width: 0; background: var(--white); }
.su-sv-bar.done i { width: 100%; }
.su-sv-bar.now i { animation: su-bar var(--d, 6s) linear forwards; }
.su-sv.is-paused .su-sv-bar.now i { animation-play-state: paused; }
@keyframes su-bar { from { width: 0; } to { width: 100%; } }
.su-sv-head { position: absolute; top: 24px; left: 14px; right: 8px; display: flex; align-items: center; gap: 10px; z-index: 4; color: var(--white); }
.su-sv-avatar { width: 32px; height: 32px; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, var(--su-accent), var(--green-300), var(--plum-300), var(--su-accent)); flex-shrink: 0; }
.su-sv-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--green-700); box-sizing: border-box; }
.su-sv-who { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.su-sv-who b { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.su-sv-who small { font-family: var(--font-ui); font-size: var(--text-3xs); opacity: 0.75; letter-spacing: var(--tracking-wide); }
.su-sv-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; border-radius: 50%; }
.su-sv-btn:hover { background: rgba(255, 255, 255, 0.12); }
.su-sv-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.su-sv-btn .ico-play { display: none; fill: currentColor; stroke: none; }
.su-sv.is-paused .su-sv-btn .ico-play { display: block; }
.su-sv.is-paused .su-sv-btn .ico-pause { display: none; }
.su-sv-stage { position: absolute; inset: 0; }
.su-sv-tap { position: absolute; top: 76px; bottom: 0; z-index: 3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.su-sv-tap--prev { left: 0; width: 34%; }
.su-sv-tap--next { right: 0; width: 66%; }
.su-sv-slide {
  position: absolute; inset: 0;
  padding: 92px 30px 44px;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.su-sv-slide > * { animation: su-up 520ms var(--ease-out) both; }
.su-sv-slide > *:nth-child(2) { animation-delay: 80ms; }
.su-sv-slide > *:nth-child(3) { animation-delay: 160ms; }
.su-sv-slide > *:nth-child(4) { animation-delay: 240ms; }
@keyframes su-up { from { opacity: 0; transform: translateY(16px); } }
/* Portada */
.su-sv-slide--cover {
  justify-content: flex-end;
  background-color: var(--green-700);
  background-image: linear-gradient(to top, rgba(16, 28, 15, 0.96) 0%, rgba(16, 28, 15, 0.45) 60%, rgba(29, 46, 28, 0.2) 100%), url(/assets/banner-chevron.png);
  background-size: cover, 260% auto;
  background-position: center, var(--bgx, 30%) 30%;
  color: var(--white);
}
.su-sv-slide--cover .su-badge { align-self: flex-start; background: rgba(255, 255, 255, 0.14); color: var(--white); }
.su-sv-slide--cover h3 {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(28px, 4.2vh, 36px); line-height: var(--leading-snug);
  color: var(--white); margin: 14px 0 14px;
}
.su-sv-slide--cover p { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--slate-200); margin: 0; }
/* Texto */
.su-sv-slide--text { background: var(--paper); color: var(--text-primary); }
.su-sv-slide--text p { font-family: var(--font-body); font-size: clamp(17px, 2.3vh, 20px); line-height: 1.6; color: var(--text-primary); margin: 0; }
.su-sv-slide--text .su-sv-kicker { color: var(--text-muted); }
/* Cita */
.su-sv-slide--quote {
  background-color: var(--plum-700);
  background-image: url(/assets/banner-chevron.png);
  background-size: 260% auto; background-position: 70% 40%;
  background-blend-mode: soft-light;
  color: var(--white);
}
.su-sv-slide--quote blockquote {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium);
  font-size: clamp(26px, 3.8vh, 34px); line-height: var(--leading-snug); color: var(--white);
}
.su-sv-slide--quote blockquote::before {
  content: '“'; display: block; font-size: 72px; line-height: 0.6; margin-bottom: 18px; color: var(--su-accent); font-style: normal;
}
/* Final */
.su-sv-slide--end { background: var(--green-800); color: var(--white); text-align: left; }
.su-sv-slide--end h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(28px, 4vh, 36px); color: var(--white); margin: 10px 0 12px; }
.su-sv-slide--end p { font-family: var(--font-body); font-size: var(--text-md); color: var(--slate-200); margin: 0 0 26px; }
.su-sv-cta { position: relative; z-index: 5; }
.su-sv-kicker { font-family: var(--font-ui); font-size: var(--text-3xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--su-accent); margin: 0 0 14px !important; }
/* Cabecera y barras oscuras sobre diapositivas claras */
.su-sv-panel.is-light .su-sv-head { color: var(--text-primary); }
.su-sv-panel.is-light .su-sv-btn:hover { background: rgba(16, 28, 15, 0.08); }
.su-sv-panel.is-light .su-sv-bar { background: rgba(16, 28, 15, 0.16); }
.su-sv-panel.is-light .su-sv-bar i { background: var(--green-700); }
/* Flechas laterales para pasar de historia (escritorio) */
.su-sv-side {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.su-sv-side svg { width: 16px; height: 16px; }
.su-sv-side:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.06); }
.su-sv-side[disabled] { opacity: 0.25; cursor: default; transform: none; }

/* ---- Pie ---------------------------------------------------------------- */
.su-foot { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--slate-300); }
.su-foot:hover { color: var(--white); }

/* ---- Barra fija de contacto (móvil) y botón flotante (escritorio) ------ */
.su-dock {
  position: fixed; z-index: 70; /* por debajo del modal (80) y del aviso de cookies (90) */
  left: 50%; bottom: 14px;
  transform: translate(-50%, 140%);
  width: min(560px, calc(100vw - 24px));
  display: flex; gap: 8px;
  padding: 8px;
  background: rgba(29, 46, 28, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transition: transform 420ms var(--ease-out);
}
.su-dock.is-on { transform: translate(-50%, 0); }
.su-dock a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: var(--weight-semibold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  line-height: 1; padding: 14px 12px; border-radius: var(--radius-pill);
  color: var(--white); border: 1px solid var(--border-inverse);
}
.su-dock a svg { width: 16px; height: 16px; flex-shrink: 0; }
.su-dock a.solid { background: var(--white); color: var(--green-800); border-color: var(--white); }
.su-dock a:active { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }
@media (min-width: 981px) {
  .su-dock { left: auto; right: 24px; bottom: 24px; width: auto; transform: translateY(160%); }
  .su-dock.is-on { transform: none; }
  .su-dock a { flex: 0 0 auto; padding: 13px 20px; }
}
body.su-cookie-open .su-dock { transform: translate(-50%, 160%); }
@media (min-width: 981px) { body.su-cookie-open .su-dock { transform: translateY(160%); } }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .su-grid-3, .su-grid-2 { grid-template-columns: 1fr; }
  .su-story-head, .su-refl-head { flex-direction: column; align-items: flex-start; }
  .su-story-day { text-align: left; }
  .su-car-nav { display: none; }
  .su-buyer { grid-template-columns: 1fr; gap: 28px; }
  .su-lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .su-person { position: static; max-width: 420px; }
  .su-svc .cs-mrow { grid-template-columns: 1fr; }
  .su-story-txt p { font-size: var(--text-md); }
  .su-track { --su-pad: 24px; }
  .su-car-track { --su-pad: 24px; }
}
@media (max-width: 640px) {
  .su-hero-dot { display: none; }
  .su-hero-alts { flex-direction: column; align-items: center; }
  .su-hero { min-height: max(100svh, 720px); }
  .su-hero-slogan { font-size: clamp(36px, 10vw, 46px); }
  .su-hero-sub { font-size: var(--text-md); margin-bottom: 22px; }
  .su-hero-ctas { flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; }
  .su-hero-ctas .cs-btn-hero { width: 100%; padding-top: 17px; padding-bottom: 17px; }
  .su-hero-ctas .cs-btn-hero--ghost { font-size: var(--text-xs); }
  .su-card, .su-buyer { padding: var(--space-6); }
  .su-stat-v { font-size: var(--text-2xl); }
  .su-story-txt p.su-quote { font-size: var(--text-xl); }
  .su-step { flex-basis: 78vw; padding-right: 22px; }
  .su-story-lead { font-size: var(--text-md); }
  .su-numbers-close { font-size: var(--text-lg); }
  .su-faq-cta { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-dock, .su-car-card, .su-faq .cs-acc-panel, .su-step, .su-step-node { transition: none; }
  .su-car-track { scroll-behavior: auto; }
}

/* ---- Servicios e historias: responsive ----------------------------------- */
@media (max-width: 980px) {
  .su-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .su-svc-grid { grid-template-columns: 1fr; }
  .su-car-card.su-tile { flex-basis: 60vw; }
  .su-sv { gap: 0; }
  .su-sv-panel { --sv-h: 100svh; width: 100vw; border-radius: 0; }
  .su-sv-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .su-svc-card .su-svc-ico [pathLength] { animation: none !important; }
  .su-sv-slide > *, .su-sv-panel, .su-sv { animation: none; }
}