/* ══ §11 · CONTACTO SIN REPETICIÓN · 10-nov-2026 · la escribe _contacto10.py ═══════════════════
   Contacto como quinto acceso (barra y cajón), la lista de canales del cierre común (#canales) y la
   página de contacto. Va la ÚLTIMA de cabecera4.css: gana por orden a §3, §8 y §10. */

/* Texto sólo para lectores de pantalla (aviso de pestaña nueva). */
.contacto-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── 1 · Cabecera: Contacto, quinto acceso ───────────────────────────────────────────────────
   Es un enlace, no una pestaña con desplegable: mismo icono de trazo, mismo rótulo y mismo color
   que las otras cuatro, sin estado «abierto». En su propia página queda marcado con un filete. */
.cab--casa a.cab__t{text-decoration:none}
.cab--casa .cab__t--ir[aria-current="page"] .cab__lbl{color:var(--cab-tinta);
  text-decoration:underline;text-decoration-color:var(--rojo-azul);text-decoration-thickness:2px;
  text-underline-offset:.55em}
.cab--casa .cab__t--ir[aria-current="page"] .cab__ico{color:var(--rojo-azul)}
.cab--casa .cab__t--ir:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:-6px}

/* Sitio para el quinto acceso: la cápsula pasa de 880 a 976 px (manda sobre §10). Entre 1261 y
   1439 px las pestañas pasan de 15 a 11 px de relleno y la Newsletter se queda en su sobre, como ya
   hace en la cápsula; su nombre accesible («Newsletter») no cambia. */
@media(min-width:1261px){.cab--casa{--capsula:976px}}
@media(min-width:1261px) and (max-width:1439px){
  .cab--casa .cab__t,.cab--casa .cab__nav .cab__t:last-child{padding:0 11px}
  .cab--casa .cab__news{padding:0 10px;gap:0}
  .cab--casa .cab__news-t{max-width:0;opacity:0}
}

/* ── 2 · Cajón del móvil: Contacto como quinta fila del índice ─────────────────────────────────
   Mismo cuerpo que los cuatro rótulos (`.cajon__t`, §10), pero es un enlace: flecha en vez de
   chevrón. No usa `.cajon__t` a propósito: el JS del cajón trata cada `.cajon__t` como desplegable. */
.cajon--18 .cajon__nav > .cajon__s--ir{--d:.15s}
.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir{display:flex;align-items:center;gap:14px;width:100%;
  min-height:66px;margin:0;padding:0;color:var(--tinta-clara);text-decoration:none;
  font:800 26px/1.05 var(--palo);font-stretch:104%;letter-spacing:-.02em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir .cab__ico{width:22px;height:22px;
  color:color-mix(in srgb, var(--tinta-clara) 42%, transparent)}
.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir[aria-current="page"] .cab__ico{color:var(--rojo-azul)}
.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir:active .cajon__tt{opacity:.62}
.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:4px}

/* ── 3 · Cierre común: una lista de canales, no tres celdas iguales ───────────────────────────
   Cada canal es una fila con filete: el rótulo en mono (como el resto de rótulos de la casa) y el
   dato en grande. Teléfonos una vez, WhatsApp sin repetir su número, correo visible. */
.agendar__lista{list-style:none;margin:34px 0 0;padding:0;
  border-top:1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent)}
.agendar__lista li{margin:0;padding:0;border-bottom:1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent)}
.agendar__via{display:grid;grid-template-columns:minmax(6.5em,auto) minmax(0,1fr);align-items:baseline;
  column-gap:20px;row-gap:6px;min-height:56px;padding:15px 0;box-sizing:border-box;
  color:var(--tinta-clara);text-decoration:none}
.agendar__via-k{font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-clara-2)}
.agendar__via-v{display:flex;align-items:center;gap:10px;min-width:0;
  font:600 clamp(17px,1.35vw,19px)/1.3 var(--palo);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;text-underline-offset:5px;text-decoration-thickness:1px;
  transition:color var(--micro) var(--c-micro)}
.agendar__via-v svg{flex:none;width:18px;height:18px}
.agendar__via:hover .agendar__via-v{text-decoration:underline;text-decoration-color:var(--rojo-azul)}
.agendar__via:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:2px}
/* En escritorio la columna se estira hasta la tarjeta y la lista baja a su pie (como hacían los
   canales: POSTREUNIÓN 2-oct-2026). En la página de contacto, no: va justo bajo el título. */
@media(min-width:1061px){
  .agendar__lista{margin-top:auto}
  .agendar--contacto .agendar__lista{margin-top:0}
}
@media(max-width:560px){
  .agendar__via{grid-template-columns:minmax(0,1fr);row-gap:5px;padding:13px 0}
  .agendar__via-v{font-size:17px}
}

/* ── 4 · Página de contacto: abre con el título y los canales ─────────────────────────────────
   El cierre común sube al principio de <main>. La cabecera es fija y transparente: el hueco de
   arriba es el de las portadillas (`--cab-total`), algo más corto porque aquí se viene a actuar. */
.agendar--contacto{padding-top:calc(var(--cab-total, var(--cab-alto)) + clamp(40px,5vw,72px))}
.agendar--contacto .agendar__izq{padding-top:0}
.agendar--contacto h1{margin:0 0 20px;max-width:12ch;font-size:clamp(44px,5.4vw,82px)}
.agendar--contacto .agendar__p{max-width:36ch}
.agendar--contacto .agendar__card{scroll-margin-top:calc(var(--cab-total, var(--cab-alto)) + 16px)}

@media (prefers-reduced-motion:reduce){
  .agendar__via-v,.cajon--casa.cajon--18 .cajon__s--ir .cajon__ir .cajon__tt{transition:none}
}
@media (forced-colors:active){
  .agendar__lista,.agendar__lista li{border-color:CanvasText}
}