/* ═══════════════════════════════════════════════════════════════
   EL ÚLTIMO ADIÓS · funerarias.css
   Solo lo propio de /funerarias.html y /en/funeral-directors.html.
   Todo lo demás (tokens, cabecera, hero, pasos, formularios, FAQ, pie)
   sale de web.css. Documentación del sistema: DISENO.md
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero: el titular es más corto que el de la portada ─────── */
.fu-hero h1 { max-width: 12em; }
/* Línea de confianza: web.css pone el tick a cada span; el span interior (con la cifra) no lo lleva */
.confianza span span { display: inline; }
.confianza span span::before { content: none; }

/* Traducción de lo que dice María (solo en la página inglesa: su voz es en español) */
.trad { font-size: 15px; line-height: 1.4; color: var(--piedra); margin-top: 6px; }

/* ─── Qué ofrecéis a la familia ──────────────────────────────── */
.que-es .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.que-es-texto > p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); }
/* La frase de valor, tal como se la contáis a la familia */
.frase { margin: 26px 0 0; padding: 0; }
.frase p { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.4; color: var(--tinta); max-width: 24em; margin: 0; }
.que-es .formatos { margin-top: 30px; }
.que-es .formatos figure { width: 150px; }
.que-es .formatos figcaption b { display: block; font-weight: 700; color: var(--tinta); }
.que-es .nota-formatos { margin-top: 14px; font-size: 16.5px; color: var(--tinta-2); }
.ejemplo-maria { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea); }
.ejemplo-maria p { font-size: 16.5px; color: var(--tinta-2); margin-top: 8px; }
.ejemplo-maria p:first-child { margin-top: 0; }

/* Lo que paga la familia (tarjeta de papel, sin botón de compra) */
.fam-precio .panel { padding: 28px 32px 26px; }
.fam-precio .rot { font-size: 16px; color: var(--t2); }
.fam-precio .panel-nombre { margin-top: 6px; }
.fam-precio .precio { font-size: 64px; }
.fam-precio .oficial { margin-top: 18px; font-size: 16.5px; line-height: 1.55; color: var(--tinta-2); }
.fam-precio .bloque .lista-ok li { padding: 5px 0; font-size: 16.5px; color: var(--tinta-2); }
.fam-precio .sin-voz-linea { margin-top: 16px; font-size: 16px; color: var(--tinta-2); }

/* ─── Comisión y condiciones: lista con filetes (sin tarjetas) ─ */
.modelo .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.modelo-cab p { margin-top: 18px; font-size: 18.5px; color: var(--tinta-2); max-width: 24em; }
.cond { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.cond li { padding: 20px 0 22px; border-top: 1px solid var(--linea); }
.cond .dato { display: block; font: 500 44px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--tinta); letter-spacing: -.01em; }
.cond .dato.txt { font-size: 30px; line-height: 1.15; }
.cond p { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--tinta-2); }
.cond code { font: inherit; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
.modelo .igual { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 17px; color: var(--tinta); max-width: none; }

/* ─── Pedir la demo ──────────────────────────────────────────── */
.demo-sec .contacto-texto .lista-ok { margin-top: 22px; }
.demo-sec .contacto-texto .lista-ok li { padding: 6px 0; font-size: 17px; color: var(--tinta-2); }

/* ─── Tableta ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .que-es .wrap, .modelo .wrap { gap: 48px; }
}
@media (max-width: 960px) {
  .que-es .wrap, .modelo .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fam-precio { max-width: 560px; }
}

/* ─── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .que-es-texto > p, .modelo-cab p { font-size: 17px; margin-top: 14px; }
  .frase { margin-top: 20px; }
  .frase p { font-size: 22px; }
  .que-es .formatos { margin-top: 24px; }
  .que-es .formatos figure { width: auto; }
  .que-es .formatos figcaption { font-size: 14.5px; }
  .fam-precio .panel { padding: 22px 16px 20px; }
  .fam-precio .precio { font-size: 58px; }
  .cond { grid-template-columns: minmax(0, 1fr); }
  .cond li { padding: 16px 0 18px; }
  .cond .dato { font-size: 38px; }
  .cond .dato.txt { font-size: 26px; }
  .modelo .igual { font-size: 16.5px; }
}