/* ══════════════════════════════════════════════
   TWL Footer V5 — ficha de contacto (.twl-ff2)
   Requiere: twl-footer-final.css (fondo, cabecera «Nuestra ubicación», mapa).
   Sustituye a twl-footer-v2.css (las tarjetas de «Contactar»). Va en un fichero
   NUEVO a propósito: Cloudflare cachea la CSS 4 h por URL y un nombre nuevo sale ya
   (por eso v5: v3 y v4 quedaron cacheadas; para retocarlo sin esperar, renombrar otra vez).

   Cuatro columnas numeradas tipo hoja técnica (taller, horario, contacto,
   presupuesto), separadas por filetes con una cruz en cada cruce. Cada dato sale
   una sola vez. Los selectores van con el prefijo .twl-ff2 para ganar a
   twl-contrast-fix.css (:is(.twl-footer-final) :is(p, dt, li a…), 0,1,1).
   ══════════════════════════════════════════════ */

.twl-ff2 {
  --ff2-line: rgba(255, 255, 255, .1);
  --ff2-ink: #ededf0;
  --ff2-dim: #8e8e95;          /* 6,1:1 sobre #08080a */
  --ff2-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ff2-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--ff2-line);
  border-bottom: 1px solid var(--ff2-line);
}

.twl-ff2__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr);
  max-width: 1400px;
  margin: 0 auto;
}

.twl-ff2__col {
  position: relative;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 40px);
  border-left: 1px solid var(--ff2-line);
}
.twl-ff2__col:first-child { border-left: 0; }

/* Retícula: una cruz naranja en el arranque de cada columna y otra al final del filete. */
.twl-ff2__col::before,
.twl-ff2__grid::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 9px;
  height: 9px;
  background:
    linear-gradient(#ff6a00, #ff6a00) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#ff6a00, #ff6a00) 0 50% / 100% 1px no-repeat;
  pointer-events: none;
}
.twl-ff2__grid::after { left: auto; right: -5px; }

/* ── Rótulo: «01 / TALLER» ── */
.twl-ff2 .twl-ff2__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--ff2-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ff2-dim);
}
.twl-ff2 .twl-ff2__k span { color: #ff6a00; letter-spacing: .08em; }
.twl-ff2 .twl-ff2__k span::after { content: "/"; margin-left: 10px; color: rgba(255, 255, 255, .25); }

/* ── 01 Taller ── */
.twl-ff2 .twl-ff2__v {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ff2-ink);
}
.twl-ff2 .twl-ff2__meta {
  margin: 12px 0 0;
  font-family: var(--ff2-mono);
  font-size: var(--fs-small);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--ff2-dim);
}
.twl-ff2 .twl-ff2__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  font-family: var(--ff2-mono);
  font-size: var(--fs-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ff6a00;
}
.twl-ff2 .twl-ff2__link svg { width: 14px; height: 14px; transition: transform .3s var(--ff2-ease); }
.twl-ff2 .twl-ff2__link:hover svg { transform: translate(2px, -2px); }

/* ── 02 Horario ── */
.twl-ff2 .twl-ff2__horas { display: grid; gap: 10px; margin: 0; }
.twl-ff2 .twl-ff2__horas div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.twl-ff2 .twl-ff2__horas dt {
  font-family: var(--ff2-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ff2-dim);
}
.twl-ff2 .twl-ff2__horas dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--ff2-ink);
}
.twl-ff2 .twl-ff2__horas .is-off dd { color: var(--ff2-dim); }

/* ── 03 Contacto ── */
/* Teléfono y email centrados en su caja: en móvil twl-responsive.css da a todo
   enlace min-height:44px (área táctil) y un border-bottom quedaba 20 px por debajo. */
.twl-ff2 .twl-ff2__tel {
  display: flex;
  align-items: center;
  font-family: 'Conthrax', 'Inter', sans-serif;
  font-size: var(--fs-h6);
  line-height: 1.3;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
}
.twl-ff2 .twl-ff2__tel:hover { color: #ff6a00; }
.twl-ff2 .twl-ff2__mail {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  color: #c4c5c9;
  text-decoration: underline 1px rgba(255, 255, 255, .22);
  text-underline-offset: 6px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.twl-ff2 .twl-ff2__mail:hover { color: #fff; text-decoration-color: #ff6a00; }

/* ── 04 Presupuesto: filas con filete, barra naranja y flecha al pasar ── */
.twl-ff2 .twl-ff2__acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ff2-line); }
.twl-ff2 .twl-ff2__acc li { margin: 0; padding: 0; border-bottom: 1px solid var(--ff2-line); }
.twl-ff2 .twl-ff2__acc a {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  column-gap: 14px;
  padding: 13px 6px 13px 12px;
  color: #fff;
  text-decoration: none;
  transition: background-color .3s ease;
}
.twl-ff2 .twl-ff2__acc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #ff6a00;
  transform: scaleY(0);
  transition: transform .35s var(--ff2-ease);
}
.twl-ff2 .twl-ff2__acc a:hover { background: rgba(255, 106, 0, .06); }
.twl-ff2 .twl-ff2__acc a:hover::before,
.twl-ff2 .twl-ff2__acc a:focus-visible::before { transform: scaleY(1); }
.twl-ff2 a:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }

.twl-ff2 .twl-ff2__ico { width: 20px; height: 20px; color: #ff6a00; }
.twl-ff2 .twl-ff2__t {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.twl-ff2 .twl-ff2__d {
  display: block;
  margin-top: 3px;
  font-family: var(--ff2-mono);
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ff2-dim);
}
.twl-ff2 .twl-ff2__go {
  width: 16px;
  height: 16px;
  color: var(--ff2-dim);
  transition: transform .3s var(--ff2-ease), color .3s ease;
}
.twl-ff2 .twl-ff2__acc a:hover .twl-ff2__go { color: #ff6a00; transform: translateX(3px); }

/* ── Responsive (breakpoints canónicos: xl 1280, sm 640) ── */
@media (max-width: 1279.98px) {
  .twl-ff2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twl-ff2__col:nth-child(3) { border-left: 0; }
  .twl-ff2__col:nth-child(n+3) { border-top: 1px solid var(--ff2-line); }
}
@media (max-width: 639.98px) {
  .twl-ff2__grid { grid-template-columns: minmax(0, 1fr); }
  .twl-ff2__col { padding: 24px 16px; border-left: 0; }
  .twl-ff2__col:nth-child(n+2) { border-top: 1px solid var(--ff2-line); }
  .twl-ff2 .twl-ff2__k { margin-bottom: 14px; }
  .twl-ff2 .twl-ff2__mail { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .twl-ff2 *,
  .twl-ff2 *::before { transition: none; }
}