/* ============================================================
   SEQUÍA — el arco de la página
   El lima no decora: aparece SOLO donde el sistema actúa.
   Arriba tierra seca · abajo agenda llena.
   ============================================================ */

/* ============ HEADER ============ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  padding-inline: var(--pad-inline);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base), backdrop-filter var(--dur-base);
}
.site-header.is-scrolled {
  background: var(--shade-88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--hair-light);
}

.site-header__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h3);
  letter-spacing: var(--track-tight);
  color: var(--white);
}
.brand img { height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-7); }
.site-nav__links {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-cap);
  font-weight: 600;
  color: var(--ink-5);
}
.site-nav__links a { transition: color var(--dur-fast); }
.site-nav__links a:hover { color: var(--lime); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.mobile-nav {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 99;
  background: var(--ink-0);
  padding: var(--space-7) var(--pad-inline);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--white);
}

@media (max-width: 880px) {
  .site-nav__links { display: none; }
  .nav-toggle { display: flex; }
}

/* ============ HERO — tierra seca ============
   Titular a escala real, a todo el ancho. Sin degradado, sin glow.
   El único lima de esta pantalla es el sistema funcionando.           */

.hero {
  position: relative;
  padding-top: calc(76px + var(--space-8));
  padding-bottom: var(--space-9);
  overflow: hidden;
}

/* horizonte: una sola línea de luz baja, no una mancha radial */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-14) 35%, var(--teal-10) 65%, transparent);
  pointer-events: none;
}

.hero__title {
  font-size: var(--text-display);
  margin-bottom: var(--space-7);
  max-width: 15ch;
}
/* el titular NO lleva degradado: la segunda línea es la promesa, va en lima plano */
.hero__title .text-lime { color: var(--lime); }

/* la promesa se lleva su pantalla entera; la demo va debajo, a todo el ancho.
   Antes competían por el mismo ancho y las dos salían perdiendo. */
.hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7) var(--space-8);
  align-items: end;
}

.hero__lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: var(--ink-5);
  max-width: 34ch;
}

.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero__intro { grid-template-columns: 1fr; align-items: start; }
}

.hero__meta {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.hero__meta .barras { width: 120px; flex-shrink: 0; }
.hero__proof {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  letter-spacing: var(--track-normal);
  line-height: 1.5;
}
.hero__proof strong { color: var(--ink-5); font-weight: 600; }

/* ============ EL PROBADOR ============ */

/* sección propia: la demo es el argumento de venta más probado, se le da el escenario */
.probador-seccion {
  padding-bottom: var(--space-9);
}
.probador-seccion__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-6);
}
.probador-seccion__head h2 { font-size: var(--text-h2); }
.probador-seccion__head p {
  font-size: var(--text-body);
  color: var(--ink-5);
  max-width: 46ch;
}
@media (max-width: 860px) {
  .probador-seccion__head { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
}

.probador {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-3);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-card);
  overflow: hidden;
  height: 620px;
}

.probador__chat {
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.probador__chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ink-3);
}

.probador__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.probador__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-3);
  color: var(--ink-5);
  flex-shrink: 0;
}
.probador__avatar svg { width: 19px; height: 19px; }
.probador__who-name { font-weight: 700; color: var(--white); font-size: var(--text-cap); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.probador__who-sub { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--ink-4); white-space: nowrap; }

.probador-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  white-space: nowrap;
  flex-shrink: 0;
}
.probador-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-4);
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
[data-probador-status="idle"] .probador-status__dot { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-10); }
[data-probador-status="typing"] .probador-status__dot { background: var(--teal); animation: pulse-dot 900ms ease-in-out infinite; }
[data-probador-status="booked"] .probador-status__dot { background: var(--lime); box-shadow: 0 0 0 4px var(--lime-24); }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.probador__chat-embed { flex: 1; min-height: 0; position: relative; }
.probador__chat-embed .chat-layout { height: 100%; width: 100%; }

.probador__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--ink-3);
}
.suggestion-chip {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-3);
  color: var(--ink-5);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.suggestion-chip:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); transform: translateY(-1px); }
.suggestion-chip:disabled { opacity: 0.35; }

.probador__error { padding: var(--space-6); color: var(--ink-5); font-size: var(--text-cap); }
.probador__error a { color: var(--lime); text-decoration: underline; }

/* agenda: el sitio donde el lima SÍ significa algo */

.probador__agenda {
  background: var(--ink-2);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.agenda__head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-3);
  flex-shrink: 0;
}
.agenda__legend { color: var(--lime); letter-spacing: var(--track-normal); text-transform: none; }

.agenda__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
}
.agenda__list::-webkit-scrollbar { width: 4px; }
.agenda__list::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 2px; }

.agenda-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--r-chip);
  font-size: var(--text-micro);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast);
}
.agenda-slot__time { font-family: var(--font-mono); color: var(--ink-4); }
.agenda-slot__state {
  font-family: var(--font-mono);
  color: var(--ink-4);
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.agenda-slot.is-taken { background: var(--lime-08); border-left-color: var(--lime); }
.agenda-slot.is-taken .agenda-slot__time { color: var(--white); font-weight: 600; }
.agenda-slot.is-taken .agenda-slot__state { color: var(--lime); opacity: 1; }
.agenda-slot.just-landed { animation: agenda-land 900ms var(--ease-out-expo); }
@keyframes agenda-land {
  0% { background: var(--lime-40); transform: translateX(6px); }
  100% { background: var(--lime-08); transform: none; }
}

.probador__voice {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-3);
  flex-shrink: 0;
}
.probador__voice-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  margin-bottom: var(--space-3);
}

/* ============ FRANJA DE REGISTRO ============ */

.registro {
  border-block: 1px solid var(--ink-2);
  padding-block: var(--space-7);
}
.registro__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.registro__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline: var(--space-6);
  border-left: 1px solid var(--ink-2);
}
.registro__item:first-child { border-left: none; padding-left: 0; }
.registro__value {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--white);
}
.registro__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============ LA SEQUÍA — el punto más seco de la página ============
   Cero lima aquí. Solo el rojo del problema.                          */

.sequia__grid-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: end;
  margin-bottom: var(--space-9);
}
.sequia__title { font-size: var(--text-h1); }

.sequia__case {
  position: relative;
  border-left: 2px solid var(--alert);
  padding-left: var(--space-6);
}
.sequia__case-time {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--alert);
  background: var(--alert-10);
  padding: 4px 10px;
  border-radius: var(--r-chip);
  margin-bottom: var(--space-4);
}
.sequia__case p {
  font-size: var(--text-lead);
  color: var(--white);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
}
.sequia__case footer {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.sequia__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-7);
  row-gap: var(--space-8);
}
.sequia__card { border-top: 1px solid var(--ink-3); padding-top: var(--space-5); }
.sequia__icon { width: 22px; height: 22px; color: var(--alert); margin-bottom: var(--space-4); }
.sequia__card h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.sequia__card p { font-size: var(--text-cap); color: var(--ink-4); line-height: var(--lh-normal); }

/* ============ SERVICIOS — el lima empieza a entrar ============ */

.servicios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.servicio-card {
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
/* la destacada se marca con un FILO de lima, no con un relleno */
.servicio-card--featured {
  border-color: var(--lime-40);
  box-shadow: inset 0 1px 0 var(--lime-24);
}

.servicio-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.servicio-card__badge {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--ink-3);
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
.servicio-card__badge--lime { color: var(--lime); border-color: var(--lime-40); }
.servicio-card__icon { width: 26px; height: 26px; color: var(--teal); flex-shrink: 0; }

.servicio-card h3 { font-family: var(--font-body); font-weight: 800; color: var(--white); margin-bottom: var(--space-3); }
.servicio-card__desc { font-size: var(--text-cap); color: var(--ink-5); line-height: var(--lh-normal); margin-bottom: var(--space-5); }

.servicio-card__features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--space-6); flex: 1; }
.servicio-card__features li {
  font-size: var(--text-cap);
  color: var(--ink-4);
  padding-left: 18px;
  position: relative;
}
.servicio-card__features li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 7px; height: 1px;
  background: var(--lime);
}

.servicio-card__cta { width: 100%; }

/* calculadora */

.calculadora {
  border: 1px solid var(--ink-3);
  border-radius: var(--r-card);
  padding: var(--space-7);
  scroll-margin-top: 100px;
}
.calculadora__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.calculadora__field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  font-size: var(--text-cap);
  color: var(--ink-5);
}
.calculadora__field-value { font-family: var(--font-mono); font-size: var(--text-h3); color: var(--white); font-weight: 600; }

input[type="range"] {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-3);
  accent-color: var(--lime);
  cursor: pointer;
}

.calculadora__output {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-3);
  flex-wrap: wrap;
}
.calculadora__stat { display: flex; flex-direction: column; gap: 4px; }
.calculadora__stat-value { font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 600; color: var(--ink-5); }
.calculadora__stat-value--lime { color: var(--lime); }
.calculadora__stat--big .calculadora__stat-value { font-size: var(--text-h2); color: var(--lime); }
.calculadora__stat-label { font-size: var(--text-micro); color: var(--ink-4); max-width: 17ch; }
.calculadora__arrow { color: var(--ink-3); font-size: var(--text-h3); }

.calculadora__disclaimer {
  margin-top: var(--space-5);
  font-size: var(--text-micro);
  color: var(--ink-4);
  line-height: var(--lh-normal);
  max-width: 64ch;
}

/* ============ CHAPTER — tarjeta de papel flotando sobre el lienzo oscuro ============
   Nunca un corte recto a todo el ancho: el contraste vive en una tarjeta con
   esquinas grandes e inset generoso, como en cohere.com. El lienzo oscuro
   sigue detrás en todo momento — eso es lo que hace la transición suave.      */

.chapter {
  background: var(--ink-0);
  padding-block: var(--space-8);
}
.chapter__card {
  margin-inline: clamp(16px, 4vw, 56px);
  border-radius: 32px;
  padding-block: var(--pad-section);
  border: 1px solid var(--paper-line);
}

/* ============ TÚ DECIDES, ÉL PROPONE (papel) ============ */

.control__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
}
.control__copy p { color: var(--paper-muted); line-height: var(--lh-relaxed); max-width: 46ch; margin-bottom: var(--space-6); }

.control__switch {
  display: inline-flex;
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.control__switch-btn {
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: var(--text-cap);
  font-weight: 700;
  color: var(--paper-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.control__switch-btn.is-active { background: var(--paper-ink); color: var(--paper); }

.control__demo {
  background: var(--ink-0);
  border-radius: var(--r-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-paper);
}
.control__transcript { display: flex; flex-direction: column; gap: var(--space-3); }
.control__bubble {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: var(--r-card);
  font-size: var(--text-cap);
  line-height: var(--lh-normal);
}
.control__bubble--user { align-self: flex-end; background: var(--ink-2); color: var(--white); border-bottom-right-radius: var(--r-chip); }
.control__bubble--bot {
  align-self: flex-start;
  background: var(--lime);
  color: var(--ink-0);
  border-bottom-left-radius: var(--r-chip);
  font-weight: 500;
}

.control__internal {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-micro);
  color: var(--ink-4);
}
.control__internal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex-shrink: 0; }
.control__internal strong { color: var(--white); }

/* ============ ¿Y MI PROGRAMA? ============ */

.software__body { border-top: 1px solid var(--ink-3); padding-top: var(--space-7); }
.software__grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-7); }

.software-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-3);
  font-size: var(--text-cap);
  font-weight: 600;
  color: var(--ink-4);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.software-pill:hover { color: var(--ink-5); border-color: var(--ink-4); }
.software-pill.is-active { border-color: var(--white); color: var(--white); }

.software-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.software-pill__dot--lime { background: var(--lime); }
.software-pill__dot--teal { background: var(--teal); }
.software-pill__dot--alert { background: var(--alert); }

.software-result { min-height: 150px; }
.software-result__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.software-result__status--lime { color: var(--lime); }
.software-result__status--teal { color: var(--teal); }
.software-result__status--alert { color: var(--alert); }
.software-result h3 { font-family: var(--font-body); font-weight: 800; color: var(--white); margin-bottom: var(--space-3); }
.software-result p { color: var(--ink-5); line-height: var(--lh-relaxed); max-width: 66ch; }

/* variante dental: dos casos fijos, sin comprobador interactivo */
.software__body--dental {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.software-caso h3 { font-family: var(--font-body); font-weight: 800; color: var(--white); margin-bottom: var(--space-3); }
.software-caso p { font-size: var(--text-cap); color: var(--ink-5); line-height: var(--lh-relaxed); }
.software__nota { margin-top: var(--space-6); font-size: var(--text-micro); color: var(--ink-4); max-width: 60ch; }

@media (max-width: 760px) {
  .software__body--dental { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============ LO QUE NO HACEMOS (papel) ============ */

.honestidad__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-9);
  row-gap: var(--space-7);
}
.honestidad__item { border-top: 1px solid var(--paper-line); padding-top: var(--space-4); }
.honestidad__mark {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--alert-ink);
  letter-spacing: var(--track-wide);
  margin-bottom: var(--space-3);
}
.honestidad__item p { font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--paper-muted); }
.honestidad__item strong { color: var(--paper-ink); }

/* ============ CÓMO VA — los números mandan ============ */

.como-va__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.como-va__step { border-top: 1px solid var(--ink-3); padding-top: var(--space-5); }
.como-va__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
  line-height: 1;
}
.como-va__step h3 { font-family: var(--font-body); font-weight: 800; color: var(--white); margin-bottom: var(--space-3); }
.como-va__step p { font-size: var(--text-cap); color: var(--ink-4); line-height: var(--lh-relaxed); }

/* ============ FAQ (papel) ============ */

.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-9); }
.faq__list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--paper-line); padding-block: var(--space-5); }
.faq-item:first-child { border-top: 1px solid var(--paper-line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--paper-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--lime-ink);
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-size: var(--text-cap); color: var(--paper-muted); line-height: var(--lh-relaxed); margin-top: var(--space-3); max-width: 62ch; }

/* ============ QUIÉN ESTÁ DETRÁS ============ */

.fundador__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-9);
  align-items: center;
}
.fundador__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
}
.fundador__photo img { width: 100%; height: 100%; object-fit: cover; }
.fundador__photo--fallback { display: flex; align-items: center; justify-content: center; }
.fundador__photo--fallback img { display: none; }
.fundador__photo--fallback::after {
  content: 'JJ';
  font-family: var(--font-display);
  font-size: var(--text-h1);
  color: var(--ink-3);
}
.fundador__copy p { font-size: var(--text-lead); color: var(--ink-5); line-height: var(--lh-normal); margin-bottom: var(--space-6); max-width: 42ch; }

/* ============ CIERRE — la agenda llena ============
   Aquí termina el arco: las barras vuelven encendidas y el cactus
   aparece como sombra de marca. Es el único sitio con lima amplio.   */

.cierre { position: relative; overflow: hidden; }

.cierre__cactus {
  position: absolute;
  right: -3%;
  bottom: -18%;
  width: clamp(180px, 34vw, 520px);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 560px) {
  .cierre__cactus { width: 45vw; right: -8%; }
}

.cierre__inner { position: relative; z-index: 1; max-width: 900px; }
.cierre h2 { font-size: var(--text-display); margin-bottom: var(--space-6); }
.cierre__lead { font-size: var(--text-lead); color: var(--ink-5); margin-bottom: var(--space-7); max-width: 46ch; }
.cierre__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); }

.cierre__barras {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-2);
}
.cierre__barras .barras { width: 180px; flex-shrink: 0; }
.cierre__note {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--ink-4);
  letter-spacing: var(--track-normal);
}

/* ============ FOOTER ============ */

.site-footer { border-top: 1px solid var(--ink-2); padding-block: var(--space-6); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer .brand { font-size: var(--text-cap); }
.site-footer .brand img { height: 22px; }
.site-footer__links { display: flex; gap: var(--space-5); font-size: var(--text-micro); color: var(--ink-4); }
.site-footer__links a:hover { color: var(--lime); }
.site-footer__copy { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--ink-4); }

/* ============ RESPONSIVE ============ */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
  .hero__title { max-width: none; }
  .probador { grid-template-columns: 1fr; height: auto; }
  .probador__chat { height: 460px; }
  .probador__agenda { height: 280px; }
}

@media (max-width: 900px) {
  .sequia__grid-top { grid-template-columns: 1fr; gap: var(--space-7); }
  .sequia__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
  .servicios__grid { grid-template-columns: 1fr; }
  .calculadora__inputs { grid-template-columns: 1fr; gap: var(--space-5); }
  .calculadora__arrow { display: none; }
  .control__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .como-va__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .fundador__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .fundador__photo { max-width: 300px; }
}

@media (max-width: 860px) {
  .faq__wrap { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 760px) {
  .honestidad__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
}

@media (max-width: 680px) {
  .registro__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .registro__item { border-left: none; padding-left: 0; border-top: 1px solid var(--ink-2); padding-top: var(--space-4); }
  .registro__item:first-child { border-top: none; padding-top: 0; }
  .sequia__grid { grid-template-columns: 1fr; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .cierre__barras { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 560px) {
  .hero { padding-top: calc(76px + var(--space-6)); }
  .probador__chat { height: 420px; }
  .probador__agenda { height: 240px; }
  .btn { width: 100%; }
  .hero__ctas, .cierre__ctas { flex-direction: column; align-items: stretch; }
}