/* assets/css/pages/escribir-con-nosotros.css — lo propio de «Vender mi guía».
 *
 * El esqueleto (tokens, cabecera, botones, preguntas frecuentes y pie) está en
 * assets/css/landing-comun.css, que esta página carga ANTES que esta hoja.
 * Aquí solo vive lo que no comparte con las demás landings: la portada con su
 * foto, el bloque de los tres pasos y el panel de la candidatura.
 */

/* ══════════ Portada ══════════ */
.hero { padding-top: 46px; }
.hero__rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  gap: 64px; align-items: start;
}
.hero__texto { padding-top: 26px; }
.hero h1 {
  margin: 22px 0 20px;
  font-family: var(--serif); font-size: clamp(38px, 4.4vw, 57px); font-weight: 600;
  line-height: 1.07; letter-spacing: -.028em;
}
.hero__entrada { max-width: 470px; color: var(--apagado); font-size: 16.5px; line-height: 1.62; }

.ventajas { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 15px; }
.ventajas li { display: flex; align-items: center; gap: 13px; font-size: 15.5px; font-weight: 500; }
.ventajas .ico { color: var(--coral); }

.hero__botones { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ── Foto + los tres pasos ──
   La foto se sale por la izquierda hasta el borde de la ventana. `--margen` es
   justo el hueco que `.caja` deja a cada lado, así que un margen negativo de
   esa medida lleva la foto al filo sin depender de ningún número mágico. */
.hero__media { position: relative; margin: 46px 0 0 calc(-1 * var(--margen)); }
.hero__foto { height: 336px; overflow: hidden; border-radius: 0 var(--radio-g) var(--radio-g) 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

.pasos {
  list-style: none;
  /* Vuelve al borde del contenedor —alineado con el texto de arriba— y se
     apoya sobre la parte baja de la foto. */
  margin: -92px 0 0 var(--margen); padding: 22px 24px;
  /* Un pelo más ancho que la columna: con el ancho justo, «1. Envía tu
     propuesta» se parte en dos líneas y los tres pasos dejan de leerse de un
     vistazo, que es justo para lo que está el bloque. */
  /* OJO con el `100%`: el contenedor es `.hero__media`, que ya va ensanchado
     por su margen negativo, así que hay que descontarlo. Sin eso el bloque se
     colaba por debajo del panel de la derecha. */
  width: calc(100% - var(--margen) + 52px);
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra);
}
.pasos > li { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 0; min-width: 0; }
.pasos__ico { color: var(--coral); display: grid; place-items: center; margin-top: 1px; }
.pasos strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pasos small { display: block; margin-top: 3px; color: var(--apagado); font-size: 12.8px; line-height: 1.45; }
/* `.pasos > li` (0,1,1) le gana a `.pasos__flecha` (0,1,0): sin cualificar el
   selector, las flechas heredaban `flex: 1 1 0` y crecían como un paso más, o
   sea que se llevaban 2/5 del ancho y los títulos se partían en dos líneas. */
.pasos > li.pasos__flecha { flex: 0 0 auto; color: var(--linea-fuerte); font-size: 22px; line-height: 1; }

/* ══════════ El panel de la candidatura ══════════ */
.panel {
  background: var(--blanco); border-radius: var(--radio-g); padding: 28px 30px 24px;
  box-shadow: var(--sombra-panel); scroll-margin-top: 96px;
}
.panel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel__titulo { font-size: 14.5px; font-weight: 700; }
.panel__paso { color: var(--apagado); font-size: 13px; }

.barra { height: 3px; margin: 13px 0 24px; border-radius: 99px; background: var(--crema-2); overflow: hidden; }
.barra__relleno { display: block; height: 100%; width: var(--pct, 33.33%); border-radius: 99px; background: var(--coral); transition: width .3s ease; }

.panel__h { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
.panel__sub { margin-top: 6px; color: var(--apagado); font-size: 14px; }

.campo { margin-top: 17px; }
.campo label { display: block; margin-bottom: 7px; font-size: 13.2px; font-weight: 600; }
.campo__opc { margin-left: 4px; color: var(--apagado); font-weight: 400; }
.campo__ayuda { margin-top: 6px; color: var(--apagado); font-size: 12.2px; }

.campo input, .campo textarea, .campo select {
  width: 100%; padding: 12px 14px;
  border: 1.4px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta);
  font-family: inherit; font-size: 14.5px; line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo textarea { resize: vertical; min-height: 92px; }
.campo select { appearance: none; cursor: pointer; }
.campo input::placeholder, .campo textarea::placeholder { color: #a8a099; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 59, 79, .12);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--coral); }

.campo__mal { margin-top: 6px; color: var(--coral-fuerte); font-size: 12.4px; font-weight: 500; }

/* ── Destinos: fichas dentro del propio campo ── */
.fichas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding: 7px 8px 7px 10px;
  border: 1.4px solid var(--linea); border-radius: var(--radio); background: var(--blanco);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.fichas.es-activa { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 59, 79, .12); }
.fichas__lista { display: contents; }
.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 11px; border-radius: 7px;
  background: var(--crema); border: 1px solid var(--linea);
  font-size: 13.4px; font-weight: 500;
}
.ficha button { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; color: var(--apagado); }
.ficha button:hover { background: var(--coral-suave); color: var(--coral-fuerte); }
.ficha .ico { width: 12px; height: 12px; }
.fichas__entrada { flex: 1 1 130px; min-width: 110px; border: 0; outline: none; padding: 6px 2px; font-family: inherit; font-size: 14.5px; background: transparent; color: var(--tinta); }
.fichas__entrada::placeholder { color: #a8a099; }
.fichas__abrir { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--apagado); }
.fichas__abrir:hover { background: var(--crema); color: var(--tinta); }
.fichas__abrir .ico { width: 18px; height: 18px; }

.sugerencias {
  list-style: none; margin: 6px 0 0; padding: 5px;
  max-height: 208px; overflow-y: auto;
  border: 1.4px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); box-shadow: var(--sombra);
}
.sugerencias li { padding: 9px 11px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.sugerencias li:hover, .sugerencias li.es-activa { background: var(--crema); }
.sugerencias li[aria-selected="true"] { color: var(--coral); font-weight: 600; }
.sugerencias__vacio { color: var(--apagado); cursor: default; }
.sugerencias__vacio:hover { background: none; }

/* ── Repaso del paso 3 ── */
.repaso { margin: 18px 0 20px; display: grid; gap: 13px; }
.repaso > div { display: grid; gap: 3px; padding-bottom: 13px; border-bottom: 1px solid var(--linea); }
.repaso > div:last-child { border-bottom: 0; padding-bottom: 0; }
.repaso dt { color: var(--apagado); font-size: 12.2px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.repaso dd { margin: 0; font-size: 14.4px; line-height: 1.5; overflow-wrap: anywhere; }
.repaso dd:empty::before { content: "—"; color: var(--apagado); }

.acepto { display: flex; align-items: flex-start; gap: 10px; font-size: 13.4px; color: var(--tinta-2); line-height: 1.5; }
.acepto input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--coral); }
.acepto a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }

.panel__pie { display: flex; gap: 10px; margin-top: 24px; }
.panel__nota { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--apagado); font-size: 12.4px; }
.panel__nota .ico { width: 15px; height: 15px; }

.aviso { margin-top: 16px; padding: 13px 15px; border-radius: var(--radio); font-size: 13.6px; line-height: 1.5; }
.aviso--ok { background: #f0fdf5; border: 1px solid #bbf0d0; color: #10693c; }
.aviso--mal { background: var(--coral-suave); border: 1px solid #ffd0d5; color: var(--coral-fuerte); }

/* Turnstile: lo inyecta form-guard.js dentro del formulario. */
.panel [data-turnstile]:not(:empty) { margin-top: 18px; }

/* ══════════ Qué pone cada parte ══════════ */
.aportes { padding: 92px 0 96px; background: var(--blanco); }
.aportes__h {
  max-width: 1080px; margin: 0 auto 56px; text-align: center; text-wrap: balance;
  font-family: var(--serif); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.2;
}
.aportes__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; }
.aportes__ico { display: block; color: var(--coral); margin-bottom: 16px; }
.aportes__ico .ico { width: 34px; height: 34px; }
.aportes h3 { margin-bottom: 8px; font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.aportes p { color: var(--apagado); font-size: 14.8px; line-height: 1.62; max-width: 330px; }

/* ══════════ Pantallas medianas ══════════ */
@media (max-width: 1080px) {
  .hero__rejilla { grid-template-columns: 1fr; gap: 42px; }
  .hero__texto { padding-top: 0; }
  .hero__entrada, .ventajas { max-width: none; }
  .panel { max-width: 560px; }

  /* En una sola columna la foto se queda dentro de su caja: sacarla al borde
     ya no aporta nada y el bloque de pasos se le comería casi entera. */
  .hero__media { margin-left: 0; }
  .hero__foto { height: 250px; border-radius: var(--radio-g); }
  .pasos { margin-left: 0; margin-top: -60px; width: 100%; }

  .aportes__rejilla { grid-template-columns: 1fr; gap: 34px; }
  .aportes p { max-width: none; }
}


/* ══════════ Móvil ══════════ */
@media (max-width: 760px) {
  .hero { padding-top: 30px; }
  .hero h1 { margin: 16px 0 14px; }
  .hero__botones { gap: 16px; }
  .hero__botones .btn { width: 100%; }

  .panel { padding: 22px 20px 20px; border-radius: 14px; }
  .panel__h { font-size: 23px; }
  .panel__pie { flex-direction: column-reverse; }
  .panel__pie .btn { width: 100%; }

  .hero__foto { height: 200px; width: calc(100% - 36px); }
  .pasos { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; margin-top: -32px; }
  /* Cualificado igual que arriba: `.pasos > li` (0,1,1) le ganaría a
     `.pasos__flecha` (0,1,0) y las flechas seguirían viéndose en columna. */
  .pasos > li.pasos__flecha { display: none; }
  .pasos > li { flex: 1 1 auto; }

  .aportes { padding: 62px 0 64px; }
  .aportes__h { margin-bottom: 36px; }
}



/* Quien pide menos movimiento no lo recibe. (Lo común está en landing-comun.css.) */
@media (prefers-reduced-motion: reduce) {
  .barra__relleno { transition: none; }
}