/* ==========================================================================
   Sesión de Claridad — landing propia, pensada como link directo para redes.
   Usa las variables y los componentes de style.css; acá va sólo lo específico.
   ========================================================================== */

/* ---------- Hero ---------- */
.sc-hero {
  background: linear-gradient(180deg, var(--hielo) 0%, var(--papel) 100%);
  padding: 72px 0 64px;
}
.sc-hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.sc-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-azulado);
  margin-bottom: 14px;
}
.sc-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  color: var(--tinta);
  margin: 0 0 16px;
}
.sc-hero .lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-suave);
  margin: 0 0 28px;
  max-width: 46ch;
}
.sc-hero-photo img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: 0 18px 40px var(--sombra);
  display: block;
}

/* ---------- Datos duros: duración, dónde, modalidad ---------- */
.sc-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
  margin-bottom: 26px;
}
.sc-dato {
  flex: 1 1 0;
  min-width: 120px;
  padding: 16px 20px;
  border-right: 1px solid var(--borde);
}
.sc-dato:last-child { border-right: 0; }
.sc-dato-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-azulado);
  margin-bottom: 4px;
}
.sc-dato-valor {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--tinta);
}

.sc-cta { display: inline-block; }
.sc-nota-pago {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--tinta-suave);
}

/* ---------- Para quién es ---------- */
.sc-para-quien { padding: 72px 0; background: var(--blanco); }
.sc-para-quien h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--tinta);
  margin: 0 0 36px;
}
.sc-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sc-item {
  padding: 26px 24px;
  background: var(--papel);
  border-radius: var(--radio);
  border-top: 2px solid var(--salvia);
}
.sc-num {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--salvia);
  margin-bottom: 10px;
}
.sc-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* ---------- Agendar ---------- */
.sc-agendar { padding: 72px 0 88px; background: var(--salvia-palida); }
.sc-agendar-head { text-align: center; margin-bottom: 36px; }
.sc-agendar-head h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  color: var(--tinta);
  margin: 0 0 12px;
}
.sc-agendar-head p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.sc-calendario {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 26px;
}
/* ---------- Selector de horarios ---------- */
.sc-zona {
  /* style.css tiene un "p { max-width: 62ch }" global: sin anularlo, el texto
     queda centrado dentro de una caja angosta y se ve descolgado. */
  max-width: none;
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--gris-azulado);
  text-align: center;
}
.sc-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sc-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s;
}
.sc-slot:hover { border-color: var(--salvia); transform: translateY(-2px); }
.sc-slot.is-elegido {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
}
.sc-slot.is-elegido .sc-slot-dia,
.sc-slot.is-elegido .sc-slot-hora { color: #fff; }
.sc-slot-dia { font-size: 13px; color: var(--tinta-suave); }
.sc-slot-hora { font-family: var(--serif); font-size: 19px; color: var(--tinta); }

/* Los que pasan del sexto quedan ocultos hasta tocar "Ver más horarios". */
.sc-slot-extra { display: none; }
.sc-slots-todos .sc-slot-extra { display: flex; }

.sc-ver-mas {
  display: block;
  margin: 16px auto 0;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta-suave);
  cursor: pointer;
}
.sc-ver-mas:hover { border-color: var(--salvia); color: var(--tinta); }

.sc-sin-horarios { grid-column: 1 / -1; text-align: center; color: var(--tinta-suave); }
.sc-sin-horarios a { color: var(--verde-oscuro); text-decoration: underline; }

/* ---------- Formulario de reserva ---------- */
.sc-reserva {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
}
.sc-elegido-linea {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--tinta-suave);
}
.sc-elegido-linea strong { color: var(--tinta); }
.sc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-reserva label { display: block; margin-bottom: 16px; }
.sc-reserva label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
}
.sc-reserva label > span em { font-weight: 400; font-style: normal; color: var(--gris-azulado); }
.sc-reserva input,
.sc-reserva textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 16px; /* 16px evita el zoom automático del iPhone */
  color: var(--tinta);
  background: var(--blanco);
}
.sc-reserva input:focus,
.sc-reserva textarea:focus {
  outline: none;
  border-color: var(--verde-oscuro);
  box-shadow: 0 0 0 3px rgba(111, 147, 132, .15);
}
.sc-reserva textarea { resize: vertical; }
.sc-error {
  max-width: none; /* mismo motivo que .sc-zona */
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--terracota);
  text-align: center;
}
.sc-error a { color: var(--terracota); text-decoration: underline; }

/* ---------- Confirmación ---------- */
.sc-reserva-ok { text-align: center; padding: 24px 8px 8px; }
.sc-tick {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(111, 147, 132, .12);
  color: var(--verde-oscuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.sc-reserva-ok h3 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--tinta);
  margin: 0 0 10px;
}
.sc-reserva-ok p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sc-hero { padding: 32px 0 44px; }
  .sc-hero .wrap { grid-template-columns: 1fr; gap: 26px; }
  /* La foto va arriba (genera confianza) pero recortada: quien llega desde una
     historia tiene que ver el título y el precio sin scrollear. */
  .sc-hero-photo { order: -1; }
  .sc-hero-photo img { max-height: 190px; object-fit: cover; object-position: center 22%; }
  .sc-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .sc-hero .lede { font-size: 15px; margin-bottom: 22px; }
  .sc-lista { grid-template-columns: 1fr; gap: 16px; }
  .sc-para-quien, .sc-agendar { padding: 52px 0; }
}
@media (max-width: 700px) {
  .sc-calendario { padding: 22px 18px; }
  .sc-slots { grid-template-columns: repeat(2, 1fr); }
  .sc-campos { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 520px) {
  .sc-dato { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--borde); }
  .sc-dato:last-child { border-bottom: 0; }
  .sc-cta { width: 100%; text-align: center; }
  .sc-slots { grid-template-columns: 1fr; }
  .sc-slot { flex-direction: row; align-items: baseline; justify-content: space-between; }
}