/**
 * Página /cotiza-tu-equipo — Medical Rhapsody
 *
 * La idea que gobierna la página: el precio no se muestra hasta que el médico
 * deja su correo, y en vez de disimular esa restricción, el encabezado la
 * convierte en el gancho. Se enseña el documento con las cifras tapadas y el
 * sello de vigencia intacto. Se ve exactamente qué se va a recibir y qué
 * falta para recibirlo.
 *
 * Sin hex crudo: todo por var(--…) de tokens.css.
 */

/* ── Encabezado ──────────────────────────────────────────────────────────── */

.cz-hero {
  background: var(--color-primary-strong);
  background-image: var(--gradient-hero);
  padding: var(--section-py) 0 var(--section-py-lg);
  overflow: hidden;
}
.cz-hero__rejilla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.cz-hero__label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
}
.cz-hero__h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-5);
  max-width: 16ch;
}
.cz-hero__texto {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text-inverse-72);
  margin: 0 0 var(--space-8);
  max-width: 46ch;
}
.cz-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.cz-hero__nota {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-text-inverse-52);
  margin: var(--space-6) 0 0;
  max-width: 44ch;
}

/* El documento con las cifras tapadas. */
.cz-muestra {
  background: var(--color-bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-deep);
  padding: var(--space-7);
}
.cz-muestra__eq {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.cz-muestra__linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.cz-muestra__linea--total {
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}
/* La barra que tapa la cifra. No es un adorno: es la cifra que todavía no se
   ha ganado. Por eso tiene el ancho de un precio real y no el de un bloque
   cualquiera. */
.cz-tapa {
  display: block;
  height: 0.85rem;
  width: 7.5rem;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    -45deg,
    var(--color-border-soft) 0 6px,
    var(--color-bg-soft) 6px 12px
  );
}
.cz-tapa--total { height: 1.5rem; width: 11rem; }

.cz-muestra__sello {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-gold-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-gold-subtle-bg);
}
.cz-muestra__dias {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-gold-subtle);
}
.cz-muestra__sello p {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-text-dark);
  margin: 0;
}
.cz-muestra__pie {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* ── Equipos ─────────────────────────────────────────────────────────────── */

.cz-equipos { padding: var(--section-py) 0; background: var(--color-bg-white); }
.cz-equipos__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.cz-equipo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-bg-white);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.cz-equipo:hover { box-shadow: var(--shadow-product-hover); transform: translateY(-3px); }
.cz-equipo__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cz-equipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.cz-equipo__foto::before,
.cz-equipo__foto::after { content: ''; position: absolute; inset: 0; }
.cz-equipo__foto::before {
  background: var(--color-primary);
  mix-blend-mode: multiply;
  opacity: 0.28;
}
.cz-equipo__foto::after {
  background: linear-gradient(to top, rgba(8, 31, 56, 0.55), transparent 55%);
}
.cz-equipo__cuerpo {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cz-equipo__nombre {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.cz-equipo__terapia {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.cz-equipo__specs {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.cz-equipo__specs li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-text-dark);
}
.cz-equipo__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
.cz-equipo__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.cz-equipo__mas {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cz-equipo__mas:hover { color: var(--color-primary); }

/* ── Objeciones ──────────────────────────────────────────────────────────── */

.cz-obj { padding: var(--section-py) 0; }
.cz-obj--suave { background: var(--color-bg-soft); }
.cz-obj__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: center;
}
.cz-obj--invertida .cz-obj__texto { order: 2; }

.cz-obj__h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.6vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 20ch;
}
.cz-obj__p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  max-width: 56ch;
}
.cz-obj__p:last-child { margin-bottom: 0; }
.cz-obj__p strong { color: var(--color-text-dark); font-weight: var(--weight-semibold); }
.cz-obj__p a { color: var(--color-accent); text-underline-offset: 3px; }

/* Testimonio: la voz de otro médico, no la nuestra. */
.cz-cita {
  background: var(--color-bg-white);
  border-left: var(--border-accent-rule);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-7);
  box-shadow: var(--shadow-elevated);
}
.cz-cita blockquote {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}
.cz-cita__quien { display: flex; align-items: center; gap: var(--space-4); }
.cz-cita__quien img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top center;
}
.cz-cita__nombre {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-dark);
  margin: 0;
}
.cz-cita__rol {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Tarjetas de apoyo del acompañamiento. */
.cz-apoyo { display: grid; gap: var(--space-4); }
.cz-apoyo__item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}
.cz-apoyo__titulo {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
.cz-apoyo__texto {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0;
}

/* Tabla de compensación del programa de referidos. */
.cz-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  font-family: var(--font-sans);
}
.cz-tabla th,
.cz-tabla td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-soft);
}
.cz-tabla th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}
.cz-tabla td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.cz-tabla tr:last-child td { border-bottom: 0; }

/* ── Cómo funciona: aquí sí hay una secuencia ────────────────────────────── */

.cz-como { padding: var(--section-py) 0; background: var(--gradient-dark-section); }
.cz-como__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
  counter-reset: paso;
}
.cz-paso { counter-increment: paso; padding-top: var(--space-5); border-top: var(--border-accent-rule); }
.cz-paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  line-height: 1;
}
.cz-paso__titulo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-serif);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-3);
}
.cz-paso__texto {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-inverse-65);
  margin: 0;
}

/* ── Cierre ──────────────────────────────────────────────────────────────── */

.cz-cierre { padding: var(--section-py) 0; background: var(--color-bg-white); text-align: center; }
.cz-cierre__h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: 0 auto var(--space-5);
  max-width: 22ch;
}
.cz-cierre__texto {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-8);
  max-width: 52ch;
}
.cz-cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* ── Botón secundario para fondo claro ───────────────────────────────────── */
/*
 * `.btn-ghost` y `.btn-ghost-accent` de components.css pintan el texto en
 * blanco al 65%: están hechos para las secciones oscuras y desaparecen sobre
 * blanco. El cierre de esta página es claro, así que necesita el suyo.
 */
.cz-btn-claro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.75rem var(--space-7);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  background: var(--color-bg-white);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.cz-btn-claro:hover { border-color: var(--color-primary); background: var(--color-bg-soft); }
.cz-btn-claro:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cz-btn-claro:active { transform: translateY(1px); }

/* ── Adaptación ──────────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .cz-hero__rejilla,
  .cz-equipos__rejilla,
  .cz-obj__rejilla { grid-template-columns: 1fr; gap: var(--space-10); }
  .cz-obj--invertida .cz-obj__texto { order: 0; }
  .cz-como__rejilla { grid-template-columns: 1fr; gap: var(--space-7); }
  .cz-hero__h1 { max-width: none; }
}

@media (max-width: 34rem) {
  .cz-muestra { padding: var(--space-5); }
  .cz-hero__acciones .btn-primary,
  .cz-cierre__acciones .btn-primary,
  .cz-cierre__acciones .cz-btn-claro { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-equipo { transition: none; }
  .cz-equipo:hover { transform: none; }
}