/* Vuelve · páginas de funciones (26/10/2026).
   Se carga SOLO en /funciones y sus siete páginas, encima de paginas.css: mismos colores,
   letra, curva, duraciones y radios (10 px botones, 16 px paneles, 4 px el papel).
   Todo lleva el prefijo «fn-» para no chocar con las piezas de plantillas y guías.

   La idea: hermanas de la página del resguardo, pero de producto. Cada página enseña
   SU pieza (el mensaje tal cual sale, la regla de la ITV, la semana del recordatorio) y,
   desde el 27/10/2026, capturas reales de la app (la agenda, la página que ve el cliente,
   el papel firmado), siempre con el aviso de que los datos son de ejemplo. */

/* ---------- cabeza: titular a la izquierda, «en corto» a la derecha ---------- */
.fn-cabeza {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 104px);
}
.fn-cabeza__texto { grid-column: 1 / 8; }
.fn-corto { grid-column: 9 / -1; margin: 0; border-top: 1px solid var(--mono); }
.fn-corto > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.fn-corto dt { font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.45; }
.fn-corto dd { margin: 0; font-weight: 500; line-height: 1.45; color: var(--mono); text-wrap: pretty; }

/* ---------- la banda azul con la pieza de cada página ---------- */
.fn-banda { --foco: var(--naranja); background: var(--mono); color: var(--sobre-mono); padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 64px); }
.fn-banda ::selection { background: var(--naranja); color: var(--mono); }
.fn-banda__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.fn-banda__lado { grid-column: 1 / 4; }
.fn-banda__titulo {
  font-family: var(--titulo); font-weight: 700; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); line-height: 1.05;
  letter-spacing: -.018em; color: #fff; text-wrap: balance;
}
.fn-banda__lado p { margin-top: 12px; color: var(--sobre-mono-2); line-height: 1.5; max-width: 30ch; text-wrap: pretty; }
.fn-banda__lado dl { margin: 24px 0 0; border-top: 1px solid var(--linea-mono); }
.fn-banda__lado dl > div { padding: 11px 0; border-bottom: 1px solid var(--linea-mono); }
.fn-banda__lado dt { font-size: var(--t-peque); color: var(--sobre-mono-2); }
.fn-banda__lado dd { margin: 2px 0 0; color: #fff; font-weight: 500; line-height: 1.4; }
.fn-banda__obra { grid-column: 5 / -1; min-width: 0; }
.fn-banda__nota {
  grid-column: 1 / -1; margin-top: clamp(16px, 3vw, 32px); padding-top: 16px; border-top: 1px solid var(--linea-mono);
  font-size: var(--t-peque); color: var(--sobre-mono-2); line-height: 1.5; max-width: none;
}

/* el mensaje, tal cual sale */
.fn-mensaje__texto {
  font-size: clamp(1.3125rem, 1.02rem + 1.2vw, 2.0625rem); line-height: 1.38; letter-spacing: -.008em;
  color: #fff; max-width: 31em; text-wrap: pretty;
}
.fn-mensaje__texto + .fn-mensaje__texto { margin-top: .7em; }
.fn-hueco { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: auto; }
.fn-mensaje__pie { margin-top: 18px; font-size: var(--t-peque); color: var(--sobre-mono-2); }
.fn-mensaje__botones { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.fn-mensaje__boton {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 15px; border-radius: var(--radio-m);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; font-weight: 500; font-size: 1.0625rem; line-height: 1.2;
}
.fn-mensaje__boton .icono { width: 18px; height: 18px; color: var(--sobre-mono-2); }
.fn-mensaje__leyenda { margin-top: 14px; font-size: var(--t-peque); color: var(--sobre-mono-2); max-width: 60ch; }

/* ---------- capturas reales de la app (27/10/2026) ---------- */
.fn-captura { margin: 0; }
.fn-captura img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-l); }
.fn-captura figcaption { margin-top: 10px; font-size: var(--t-peque); color: var(--tinta-3); }
.fn-captura--movil { max-width: 340px; }
.fn-captura__ampliar { display: block; cursor: zoom-in; border-radius: var(--radio-l); }
.fn-captura__toca { display: none; }
@media (max-width: 900px) { .fn-captura__toca { display: inline; } }
/* La nota pequeña bajo la línea de la ITV (la duda de los 10 años justos). */
.fn-nota-chica { margin-top: 14px; font-size: var(--t-peque); color: var(--tinta-3); max-width: 66ch; }
.fn-banda .fn-captura img { border-color: transparent; }
.fn-banda .fn-captura figcaption { color: var(--sobre-mono-2); }
.fn-banda .fn-captura--movil { margin-inline: auto; }
.fn-tramo__cuerpo .fn-captura { margin-top: 22px; }

/* ---------- tramos de lectura: título a la izquierda, texto a la derecha ---------- */
.fn-tramos { padding-top: clamp(24px, 3vw, 48px); }
.fn-tramo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding-block: clamp(44px, 5.4vw, 80px); border-top: 1px solid var(--linea);
}
.fn-tramo:first-child { border-top: 0; }
.fn-tramo__titulo {
  grid-column: 1 / 5; font-family: var(--titulo); font-weight: 700; font-size: var(--t-h2);
  line-height: 1.04; letter-spacing: -.02em; color: var(--mono); text-wrap: balance; max-width: 11em;
}
.fn-tramo__cuerpo { grid-column: 6 / -1; min-width: 0; }
.fn-tramo__cuerpo > p { max-width: 66ch; text-wrap: pretty; }
.fn-tramo__cuerpo > * + p { margin-top: 18px; }
.fn-tramo__cuerpo h3 {
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em;
  color: var(--mono); margin-top: 44px; text-wrap: balance;
}
.fn-tramo__cuerpo h3:first-child { margin-top: 0; }
.fn-tramo__cuerpo h3 + p { margin-top: 8px; }
.fn-tramo__cuerpo .preguntas h3 { margin-top: 36px; }
.fn-tramo__cuerpo .preguntas h3:first-child { margin-top: 0; }
.fn-tramo__cuerpo .preguntas p { margin-top: 8px; color: var(--tinta-2); max-width: 66ch; text-wrap: pretty; }
.fn-tramo__cuerpo a:not(.boton) {
  color: var(--mono); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--linea-fuerte);
  transition: text-decoration-color var(--d-1) var(--curva);
}
.fn-tramo__cuerpo a:not(.boton):hover { text-decoration-color: var(--mono); }
.fn-tramo__cuerpo .reglas li, .fn-tramo__cuerpo .pasos li { max-width: 66ch; }
.fn-fuente { margin-top: 18px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.5; max-width: 66ch; }

/* tablas sencillas */
.fn-tabla { margin-top: 26px; overflow-x: auto; }
.fn-tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fn-tabla thead th {
  text-align: left; font-weight: 500; font-size: var(--t-peque); color: var(--tinta-2);
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--mono); vertical-align: bottom;
}
.fn-tabla tbody th, .fn-tabla td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; line-height: 1.45; }
.fn-tabla tbody th { font-weight: 500; color: var(--mono); }
.fn-tabla td { color: var(--tinta-2); }
.fn-tabla th:last-child, .fn-tabla td:last-child { padding-right: 0; }
/* tabla de tres columnas (la de la ITV): la del medio, corta, que no se parta */
.fn-tabla--tres thead th:first-child { width: 30%; }
.fn-tabla--tres thead th:nth-child(2) { width: 9rem; }

/* ---------- ITV: la regla de los años ---------- */
.fn-regla { margin-top: 30px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fn-regla li { position: relative; padding: 24px 10px 0 0; border-top: 2px solid var(--mono); }
.fn-regla li::before {
  content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--mono);
}
.fn-regla .fn-regla--libre { border-top-style: dashed; border-top-color: var(--linea-fuerte); }
.fn-regla .fn-regla--anual { border-top-color: var(--naranja); }
.fn-regla .fn-regla--itv::before { background: var(--mono); }
.fn-regla .fn-regla--anual.fn-regla--itv::before { background: var(--naranja); box-shadow: none; }
.fn-regla__anio { display: block; font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; line-height: 1; color: var(--mono); font-variant-numeric: tabular-nums; }
.fn-regla__que { display: block; margin-top: 6px; font-size: var(--t-peque); line-height: 1.35; color: var(--tinta-2); text-wrap: pretty; }

/* ---------- cita: la semana del recordatorio ---------- */
.fn-semana { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.fn-semana li { padding: 14px 0 0; border-top: 2px solid var(--linea-fuerte); }
.fn-semana .fn-semana--sale { border-top: 4px solid var(--naranja); padding-top: 12px; }
.fn-semana .fn-semana--cita { border-top-color: var(--mono); }
.fn-semana__dia { display: block; font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.1; color: var(--mono); }
.fn-semana__que { display: block; margin-top: 4px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.4; text-wrap: pretty; }

/* ---------- reseñas: el camino del mensaje y lo que Google no deja ---------- */
.fn-camino { margin-top: 28px; border-top: 1px solid var(--mono); }
.fn-camino li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linea); line-height: 1.5; }
.fn-camino__cuando { font-family: var(--titulo); font-weight: 700; font-size: 1.1875rem; line-height: 1.3; color: var(--mono); }
.fn-camino__que { max-width: 60ch; text-wrap: pretty; }

/* ---------- otras funciones ---------- */
.fn-otras { margin-top: 4px; border-top: 1px solid var(--mono); }
.fn-otras li { border-bottom: 1px solid var(--linea); }
.fn-otras a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 18px 0;
  text-decoration: none; color: inherit;
}
.fn-tramo__cuerpo .fn-otras a { text-decoration: none; font-weight: 400; }
.fn-otras__nombre { display: block; font-family: var(--titulo); font-weight: 700; font-size: 1.3125rem; line-height: 1.2; color: var(--mono); }
.fn-otras__que { display: block; margin-top: 3px; color: var(--tinta-2); line-height: 1.45; max-width: 56ch; }
.fn-otras .icono { width: 22px; height: 22px; color: var(--tinta-3); transition: transform var(--d-2) var(--curva), color var(--d-1) var(--curva); }
@media (hover: hover) {
  .fn-otras a:hover .fn-otras__nombre { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: .18em; }
  .fn-otras a:hover .icono { transform: translateX(3px); color: var(--mono); }
}

/* ---------- índice /funciones ---------- */
.fn-grupo { padding-top: clamp(8px, 1vw, 16px); }
.fn-grupo + .fn-grupo { margin-top: clamp(56px, 7vw, 104px); }
.fn-grupo__titulo {
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em; color: var(--mono);
  padding-bottom: 16px; border-bottom: 1px solid var(--mono); text-wrap: balance;
}
.fn-funcion {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline;
  padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--linea);
}
.fn-funcion__titulo { grid-column: 1 / 5; font-family: var(--titulo); font-weight: 700; font-size: clamp(1.4375rem, 1.2rem + .9vw, 1.875rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.fn-funcion__titulo a { color: var(--mono); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: transparent; transition: text-decoration-color var(--d-1) var(--curva); }
.fn-funcion__titulo a:hover { text-decoration-color: var(--naranja); }
.fn-funcion__texto { grid-column: 6 / -1; }
.fn-funcion__texto p { max-width: 62ch; color: var(--tinta-2); text-wrap: pretty; }
.fn-funcion__texto .fn-funcion__dato { margin-top: 10px; font-size: var(--t-peque); color: var(--tinta-3); }
.fn-no {
  margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: clamp(24px, 3.4vw, 48px); background: var(--hielo); border-radius: var(--radio-l);
}
.fn-no__titulo { grid-column: 1 / 5; font-family: var(--titulo); font-weight: 700; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em; color: var(--mono); text-wrap: balance; }
.fn-no__texto { grid-column: 6 / -1; }
.fn-no__texto p { max-width: 62ch; text-wrap: pretty; }
.fn-no__texto p + p, .fn-no__texto .reglas + p { margin-top: 16px; }
.fn-no__texto .reglas { margin-top: 14px; }

/* ---------- tableta ---------- */
@media (max-width: 1080px) {
  .fn-cabeza { align-items: start; }
  .fn-cabeza__texto { grid-column: 1 / -1; }
  .fn-corto { grid-column: 1 / -1; margin-top: 40px; max-width: 640px; }
  .fn-banda__lado { grid-column: 1 / -1; }
  .fn-banda__lado p { max-width: 52ch; }
  .fn-banda__lado dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .fn-banda__obra { grid-column: 1 / -1; }
  .fn-tramo__titulo { grid-column: 1 / -1; max-width: 16em; }
  .fn-tramo__cuerpo { grid-column: 1 / -1; margin-top: 22px; }
  .fn-funcion__titulo, .fn-funcion__texto { grid-column: 1 / -1; }
  .fn-funcion__texto { margin-top: 10px; }
  .fn-no__titulo, .fn-no__texto { grid-column: 1 / -1; }
  .fn-no__texto { margin-top: 18px; }
}

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  .fn-corto > div { grid-template-columns: 1fr; row-gap: 2px; }
  .fn-banda__lado dl { grid-template-columns: 1fr; }
  .fn-mensaje__boton { font-size: 1rem; }
  .fn-tabla--tres thead th:first-child, .fn-tabla--tres thead th:nth-child(2) { width: auto; }
  .fn-regla { grid-template-columns: 1fr; margin-left: 6px; }
  .fn-regla li { border-top: 0; border-left: 2px solid var(--mono); padding: 0 0 18px 24px; }
  .fn-regla li:last-child { padding-bottom: 0; }
  .fn-regla li::before { left: -7px; top: 4px; }
  .fn-regla .fn-regla--libre { border-left-style: dashed; border-left-color: var(--linea-fuerte); }
  .fn-regla .fn-regla--anual { border-left-color: var(--naranja); }
  .fn-regla__anio, .fn-regla__que { display: inline; }
  .fn-regla__que { margin: 0 0 0 10px; }
  .fn-semana { grid-template-columns: 1fr; row-gap: 12px; }
  .fn-camino li { grid-template-columns: 1fr; row-gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-otras a:hover .icono { transform: none; }
}

@media print {
  .fn-banda { background: none; color: var(--tinta); }
  .fn-mensaje__texto, .fn-banda__titulo, .fn-banda__lado dd { color: var(--tinta); }
}

/* ---------- tonos (27/10/2026): el color de cada función, ver paginas.css ---------- */
.tono .fn-corto { border-top: 4px solid var(--acento); }
.tono .fn-corto dt { color: var(--acento-hondo); font-weight: 500; }
.tono .fn-corto > div { border-bottom-color: color-mix(in srgb, var(--acento) 30%, transparent); }
.tono .fn-banda { box-shadow: inset 0 6px 0 var(--acento); }