/* /comparte-tu-experiencia — página pública.
   Rediseño de PR#14 alineado con el handoff de Claude Design: hero cálido con
   la foto real de Fabiola, layout de dos columnas (guía lateral + formulario),
   selector de formato en terracota, tarjeta WhatsApp verde bosque para el modo
   vídeo, y estado de confirmación en el mismo lenguaje. Los tokens de color y
   tipografía son los de `styles.css` (verde eucalipto, terracota, arena, tinta).
   Prefijo `.cf2-*` para los átomos del formulario (heredado del PR#2). */

.comparte-page {
  /* Terracota suave, usada aquí y en `consulta_fabiola.css` como
     `--cf-accent-soft`. Se define localmente para no ampliar el alcance del PR
     y no polucionar `:root`; si en el futuro se promueve a token global se
     retira de aquí sin cambios en el CSS. */
  --clay-soft: #faede2;
  --clay-subtle: #ecd5c9;
}

/* ============================================================
   HERO — foto de Fabiola + saludo editorial
   ============================================================ */
.comparte-hero {
  padding: 56px 20px 32px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% -10%, var(--clay-soft) 0%, transparent 65%),
    linear-gradient(180deg, var(--sand-50), var(--sand-100));
}
.comparte-hero__inner { max-width: 820px; margin: 0 auto; }
.comparte-hero__fabiola {
  /* `block` (no `inline-block`) para que ocupe su propia línea y el eyebrow
     que le sigue baje debajo. Con `inline-block` los dos son cajas inline y
     en desktop caben en la misma línea horizontal — el `margin-bottom` no
     los separaba porque estaban al lado, no apilados. */
  display: block;
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sand-50);
  box-shadow: 0 8px 24px rgba(29, 34, 31, .18);
  margin: 0 auto 18px;
}
.comparte-hero__fabiola img { width: 100%; height: 100%; object-fit: cover; display: block; }

.comparte-eyebrow {
  /* Sigue en línea (por si comparte fila con otro elemento inline) pero el
     hero centra por `text-align: center` y el fabiola block ya lo empuja
     a la línea de abajo. */
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--clay-500);
  letter-spacing: .01em;
}
.comparte-eyebrow--small { font-size: 1.1rem; }

.comparte-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.4rem);
  margin: 10px auto 0;
  max-width: 640px;
}
.comparte-hero__lede {
  color: var(--ink-500);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 16px auto 0;
  max-width: 560px;
}
.comparte-hero__link {
  margin: 14px 0 0;
  font-size: .92rem;
  font-weight: 600;
}

/* ============================================================
   Layout de 2 columnas
   ============================================================ */
.comparte-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 880px) {
  .comparte-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   Guía lateral
   ============================================================ */
.comparte-guide__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  font-size: 1.35rem;
  line-height: 1.2;
  text-wrap: balance;
  margin: 8px 0 16px;
}
.comparte-guide__steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comparte-guide__step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sand-200);
}
.comparte-guide__step:last-of-type { border-bottom: 0; }
/* Valores tomados del código exacto de Claude Design (specimen del bloque
   Guía). No se reinterpretan tipografía, tamaño ni tono; se calcan tal cual.
   Mulish 700 hace el número mucho más nítido que la display serif que usaba
   la versión anterior — Antonio no lo veía. */
.comparte-guide__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #f3e2d6;
  color: #a05a3d;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.12px;
  line-height: 1;
}
.comparte-guide__step-title {
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.comparte-guide__step-desc {
  margin: 0;
  color: var(--ink-500);
  font-size: .9rem;
  line-height: 1.55;
}
.comparte-guide__video {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--clay-soft);
  border-radius: 12px;
  border-left: 3px solid var(--clay-500);
}
.comparte-guide__video-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink-900);
  font-size: .95rem;
  margin-bottom: 8px;
}
.comparte-guide__video-head svg { color: var(--clay-500); }
.comparte-guide__video-text {
  margin: 0;
  color: var(--ink-700);
  font-size: .88rem;
  line-height: 1.55;
}

/* ============================================================
   Formulario
   ============================================================ */
.comparte-form {
  background: #fff;
  padding: 32px 30px;
  border-radius: 20px;
  border: 1px solid var(--sand-200);
  box-shadow: 0 2px 8px rgba(29, 34, 31, .04);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (max-width: 640px) {
  .comparte-form { padding: 24px 20px; }
}

.cf2-row { display: flex; flex-direction: column; gap: 6px; }
.cf2-label {
  font-weight: 700;
  color: var(--ink-900);
  font-size: .95rem;
  padding: 0;
}
.cf2-hint { color: var(--ink-500); font-size: .82rem; margin: 0; line-height: 1.5; }
.cf2-hint--center { text-align: center; }
.cf2-error {
  color: var(--danger);
  font-size: .85rem;
  margin: 4px 0 0;
}

.cf2-input, .cf2-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  font: inherit;
  color: var(--ink-900);
  background: var(--sand-50);
}
.cf2-input:focus, .cf2-textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 18%, transparent);
}
.cf2-input:disabled { background: var(--sand-100); color: var(--ink-500); }
.cf2-textarea { min-height: 140px; resize: vertical; }

.cf2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cf2-grid-photo {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .cf2-grid-2 { grid-template-columns: 1fr; }
  .cf2-grid-photo { grid-template-columns: 1fr; }
}

/* --- Selector de formato --- */
.cf2-formats { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cf2-formats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .cf2-formats__grid { grid-template-columns: 1fr; } }
.cf2-format {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: 12px;
  text-align: left; cursor: pointer;
  font: inherit;
  transition: border-color .15s, background-color .15s;
}
.cf2-format[aria-checked="true"] {
  border-color: var(--clay-500);
  background: var(--clay-soft);
}
.cf2-format__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sand-100);
  color: var(--ink-500);
}
.cf2-format[aria-checked="true"] .cf2-format__icon {
  background: #fff;
  color: var(--clay-500);
}
.cf2-format__label { font-weight: 700; color: var(--ink-900); font-size: .95rem; }
.cf2-format__hint { color: var(--ink-500); font-size: .8rem; line-height: 1.4; }

/* --- Casilla «anónima» debajo del nombre --- */
.cf2-anon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  cursor: pointer;
  font-size: .86rem;
  color: var(--ink-700);
}
.cf2-anon input { accent-color: var(--clay-500); width: 16px; height: 16px; }

/* --- Uploader visual (misma foto termina en `save_image` del servidor) --- */
.cf2-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 14px;
  background: var(--sand-50);
  border: 1.5px dashed var(--ink-200);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  text-align: center;
}
.cf2-uploader:hover,
.cf2-uploader:focus-within {
  border-color: var(--clay-500);
  background: color-mix(in srgb, var(--clay-soft) 55%, #fff);
}
.cf2-uploader__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clay-soft);
  color: var(--clay-500);
}
.cf2-uploader__text {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink-700);
}
.cf2-uploader__hint { font-size: .76rem; color: var(--ink-400); }

/* --- Paneles condicionales por formato --- */
.cf2-panel { display: none; flex-direction: column; gap: 12px; }
.comparte-form[data-format="text"]  .cf2-panel[data-cf2-panel="text"],
.comparte-form[data-format="photo"] .cf2-panel[data-cf2-panel="photo"],
.comparte-form[data-format="video"] .cf2-panel[data-cf2-panel="video"] {
  display: flex;
}

/* --- Tarjeta WhatsApp (bloque destacado con fondo verde bosque) --- */
.cf2-whatsapp {
  padding: 22px 24px;
  background: var(--green-800);
  color: #fff;
  border-radius: 14px;
  text-align: center;
}
.cf2-whatsapp__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 8px;
}
.cf2-whatsapp__icon {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
}
.cf2-whatsapp__text {
  margin: 0 0 18px;
  color: color-mix(in srgb, #fff 88%, var(--green-100));
  font-size: .95rem;
  line-height: 1.55;
}
.cf2-whatsapp__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .28);
}
.cf2-whatsapp__btn:hover { background: #1eb658; }

/* --- Consentimiento --- */
.cf2-consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--clay-soft);
  cursor: pointer;
}
.cf2-consent input {
  margin-top: 3px;
  accent-color: var(--clay-500);
  width: 18px; height: 18px;
}
.cf2-consent span { font-size: .9rem; color: var(--ink-700); line-height: 1.5; }

/* --- Botón enviar --- */
.cf2-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--green-600);
  color: #fff;
  font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  transition: background-color .15s;
}
.cf2-submit:hover { background: var(--green-700); }
.cf2-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Página de acceso restringido (comparte_experiencia_locked.html)
   Se muestra a quien llega sin login y sin token válido.
   ============================================================ */
.comparte-locked {
  /* Aire extra por arriba: el hero terminaba pegado al botón WhatsApp.
     40 px separan el «…escríbele por WhatsApp.» del CTA para que respire. */
  padding: 40px 20px 80px;
  text-align: center;
}
.comparte-locked__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.comparte-locked__note {
  margin: 0;
  color: var(--ink-500);
  font-size: .9rem;
  line-height: 1.55;
}

/* ============================================================
   Página «Gracias» (comparte_experiencia_gracias.html)
   ============================================================ */
.comparte-page--gracias { padding: 0 0 80px; }
.comparte-gracias {
  background:
    radial-gradient(80% 60% at 50% -10%, var(--clay-soft) 0%, transparent 65%),
    linear-gradient(180deg, var(--sand-50), var(--sand-100));
  padding: 80px 20px 60px;
  text-align: center;
}
.comparte-gracias__inner { max-width: 640px; margin: 0 auto; }
.comparte-gracias__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--success-subtle);
  color: var(--success);
  margin-bottom: 22px;
}
.comparte-gracias__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.15;
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.3rem);
  margin: 0;
}
.comparte-gracias__hand {
  font-family: var(--font-hand);
  font-size: 1.55rem;
  color: var(--clay-500);
  margin: 12px 0 20px;
}
.comparte-gracias__note {
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0 0 28px;
}
.comparte-gracias__ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.comparte-gracias__whatsapp {
  max-width: 480px;
  margin: 0 auto 28px;
}
.comparte-gracias .voces-btn,
.comparte-gracias__ctas .voces-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
}
.comparte-gracias .voces-btn--primary { background: var(--green-600); color: #fff; }
.comparte-gracias .voces-btn--primary:hover { background: var(--green-700); }
.comparte-gracias .voces-btn--secondary {
  background: transparent;
  color: var(--green-700);
  border: 1px solid var(--green-600);
}
.comparte-gracias .voces-btn--secondary:hover { background: var(--green-100); }