/* =========================================================================
   REDFUNE · pages/entierro.css — «¿Entierro o incineración?» (P5 · prefijo en-)
   Solo lo propio de la página; las clases de §4 (tool-sheet, opt, ledger,
   card-soft, form-error…) vienen de styles.css y no se redefinen aquí.
   ========================================================================= */

/* ---------- Cabecera: ciprés (grabado de B. Besler, 1640) ----------
   Clase base .grabado en styles.css. Solo desde 1024 px, cuando existe la
   columna de notas: el ciprés se alinea con ella (mismo borde izquierdo que la
   nota «Contenido orientativo») y baja --en-drop por debajo de la cabecera;
   la nota baja lo mismo, así nunca se tocan ni se acerca al cuestionario.
   En móvil se oculta (empujaría el cuestionario). */
.en-grabado{display:none}
@media (min-width:1024px){
  .en-head,.en-notes{--en-drop:12.5rem}
  .en-head{position:relative}
  .en-grabado{display:block;position:absolute;bottom:calc(-1*var(--en-drop));width:11.25rem;
    left:calc((100% - var(--s-8)) * 2 / 3 + var(--s-8))}   /* inicio de la columna derecha de .page-grid */
  .en-notes{margin-top:var(--en-drop)}
}

/* ---------- Cuestionario ---------- */
/* Cada pregunta: filete de 1 px entre preguntas (no sobre la primera).
   El filete va abajo del fieldset anterior porque la <legend> se dibuja
   dentro del borde superior del suyo. */
.en-q{min-width:0;margin:0;padding:0 0 var(--s-6);border:0;border-bottom:1px solid var(--rule)}
.en-q + .en-q{margin-top:var(--s-5)}
.en-q:last-of-type{border-bottom:0}

/* Pregunta con numeral colgado (rúbrica en cursiva almagre): si la pregunta
   ocupa dos líneas, la segunda se alinea con el texto y no con el numeral. */
.en-legend{display:flex;align-items:baseline;gap:.4rem;width:100%;margin:0;padding:0 0 var(--s-2)}
.en-num{flex:none;min-width:1.05em;font-style:italic;font-weight:400;color:var(--almagre)}
.en-hint{margin:0}
.en-q .opt-list{margin-top:var(--s-3)}

/* Mensaje de error: solo ocupa sitio cuando tiene texto */
#quizErr:not(:empty){margin-top:var(--s-3)}

/* ---------- Resultado ---------- */
.en-result-title{margin:0 0 var(--s-3)}
/* #quizHeading recibe el foco por JS al mostrar el resultado: el gesto
   (amarillo + filete de tinta) lo da styles.css para todos los titulares
   con tabindex=-1. */
.en-cost{margin-top:var(--s-6);border-top:1px solid var(--ink)}
.en-cost>.t-h3{margin-bottom:var(--s-2)}
.en-cost>.t-xs{margin-top:var(--s-3)}
/* Tarifa de tres filas en móvil estrecho: .ledger (styles.css) ya baja juntos
   puntos y cifra cuando no caben; aquí además el concepto ocupa siempre su
   línea, para que las tres filas tengan la misma forma. */
@media (max-width:479px){
  .en-cost .ledger>li>:first-child{flex-basis:100%;text-wrap:balance}
}

/* Acciones apiladas (stack 12). .btn-block ya es inline-flex al 100 % (como en
   el original), así el texto renderizado conserva la misma secuencia. */
.en-actions{margin-top:var(--s-6)}
.en-actions>.btn+.btn{margin-top:var(--s-3)}
/* «Hablar con un asesor, sin compromiso» se parte en dos líneas en móvil
   (el JS agrupa cada mitad en .nowrap: solo se corta tras la coma).
   Como caja en línea (y no flex), el icono va pegado a la primera línea en
   vez de quedarse suelto en el borde izquierdo; el relleno vertical da los
   58 px de .btn-lg con una sola línea. */
.en-actions>.btn-cta{display:inline-block;padding-block:1rem}
.en-actions>.btn-cta>.icon{margin-right:.6rem}
/* Lo mismo para «Crear mi plan de despedida» en pantallas de 320 px: la
   flecha sigue al texto. Relleno vertical = 52 px de .btn con una línea. */
.en-actions>.btn-secondary{display:inline-block;padding-block:.85rem}
.en-actions>.btn-secondary>.icon{margin-left:.6rem}

/* ---------- Móvil (hoja a sangre) ---------- */
@media (max-width:639px){
  /* El filete de tinta del título queda a 32 px del lomo ciprés, como en
     escritorio: dos filetes a 20 px se leerían como un filete doble. */
  .en-result{padding-top:var(--s-3)}
  /* «La verdad sobre el coste» también a sangre: más medida para la tarifa. */
  .en-cost{margin-inline:calc(-1*var(--gutter));padding:var(--s-5) var(--gutter)}
}

/* ---------- Comparativa al margen (comparativa.js) ----------
   Coste por opción (media de mercado rayada frente a «desde» RedFune en ciprés,
   §4.11) y qué implica cada opción (§4.13 .concept-list) en dos columnas.
   Escritorio: en la columna de notas, junto al cuestionario. Por debajo de
   1024 px va detrás del cuestionario; el enlace .en-jump de la cabecera lleva
   hasta ella sin empujar las preguntas. */
.en-jump{margin:var(--s-4) 0 0;font-weight:600}
.en-jump a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px}
.en-jump .icon{width:1.1em;height:1.1em}
@media (min-width:1024px){
  .en-jump{display:none}
  /* La columna de notas es ahora más alta que la pantalla: deja de ser fija
     para que se lea entera mientras se responde. */
  .en-notes{position:static}
}

.en-cmp{display:grid;gap:var(--s-6)}
/* Jerarquía: titular de nota 21 px > opción o columna 18 px > concepto 16 px */
.en-cmp-sec>.t-h3{margin-bottom:var(--s-3);font-size:1.3125rem}
.en-cmp-lead{margin:0}
.en-cmp-lead strong{color:var(--ink)}

/* Clave: muestra = la misma marca que la barra (rayado / ciprés) */
.en-key{list-style:none;display:grid;gap:var(--s-2);margin:var(--s-4) 0 0;padding:0}
.en-cmp .en-key>li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:.6rem;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.en-key .en-swatch{display:block;width:28px;height:12px;margin-top:.3em}

/* Un grupo por opción, separados por filete fino; misma escala en los seis */
.en-cmp-group{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--rule)}
.en-key+.en-cmp-group{margin-top:var(--s-5)}
.en-cmp-h{margin:0;font-family:var(--f-serif);font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--ink)}
.en-cmp-group .bars{gap:var(--s-3);margin-top:var(--s-2)}
.en-cmp-cem{display:flex;align-items:flex-start;gap:.4rem;margin:.4rem 0 0;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.en-cmp .en-cmp-cem{font-size:.9375rem}
.en-cmp-cem .icon{width:1.1em;height:1.1em;margin-top:.12em;color:var(--ink-3)}
.en-cmp-more{margin:var(--s-4) 0 0}

/* Qué implica: dos columnas con cabeza de tabla (filete de tinta de 2 px) */
.en-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4);align-items:start}
@media (max-width:359px){.en-cols{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5)}}
.en-col-h{margin:0;padding-bottom:var(--s-2);border-bottom:2px solid var(--ink);font-family:var(--f-serif);font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--ink)}
.en-col .concept-list{margin-top:0}
.en-col .concept-name strong{display:block}
.en-col .concept-name .badge{margin:var(--s-1) 0 0}
.en-cmp .concept-note{font-size:.9375rem;line-height:1.45;hyphens:auto}

/* Lo común a las dos opciones: mismas dos columnas, «En la tarifa» | «Opcional» */
.en-both{margin-top:var(--s-6)}
.en-both-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);padding-top:var(--s-3)}
@media (max-width:359px){.en-both-cols{grid-template-columns:minmax(0,1fr)}}
.en-cmp .en-both-badge{margin:0 0 var(--s-2)}
.en-inline{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.en-cmp .en-inline>li{font-size:.9375rem;line-height:1.4}