/* ==========================================================================
   MediCenter · /contacto — consume tokens.css. CSS aislado de la página.
   ========================================================================== */
.ct-hero{background:linear-gradient(180deg,#fff,var(--mc-brand-subtle));
  border-bottom:1px solid var(--mc-border-default);padding:52px 0 44px}
.ct-hero h1{font-size:2.4rem;line-height:1.08;margin:4px 0 0}
.ct-hero__lead{margin:14px 0 0;color:var(--mc-text-secondary);font-size:1.08rem;max-width:56ch}

/* ---------- CONTACTO + UBICACIÓN (2 columnas) ----------
   Izquierda: medios de contacto + dirección (columna fija ~360px).
   Derecha: encabezado de ubicación + mapa (flexible, alto = columna izquierda). */
.ct-contact{padding:48px 0 60px}
.ct-contact__grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:26px;align-items:stretch}
.ct-contact__aside{display:flex;flex-direction:column;gap:16px;align-self:start}
.ct-contact__main{display:flex;flex-direction:column}

/* Tarjetas de medio de contacto (apiladas en la columna izquierda) */
.ct-method{background:var(--mc-bg-soft);border:1px solid var(--mc-border-default);
  border-radius:var(--mc-radius);padding:22px 22px}
/* Título de cada card: icono (badge) + etiqueta en una fila */
.ct-method__head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ct-method__ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:var(--mc-brand-soft);color:var(--mc-brand-primary)}
.ct-method__ic svg{width:18px;height:18px}
/* label pequeña -> text-secondary (AA); NO text-muted (solo AA-large, ADR-0004) */
.ct-method h2{font-family:var(--mc-font-sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mc-text-secondary);margin:0}
.ct-method__value{display:inline-block;font-family:var(--mc-font-sans);font-size:1.15rem;font-weight:700;
  color:var(--mc-brand-primary);text-decoration:none}
.ct-method__value:hover{color:var(--mc-brand-primary-hover)}
.ct-method__note{margin:8px 0 0;font-size:.86rem;color:var(--mc-text-secondary)}

/* Encabezado de ubicación (columna derecha) */
.ct-loc__head{margin:0 0 18px}
.ct-loc__head h2{font-size:2rem;line-height:1.1;margin:4px 0 0}
.ct-loc__lead{margin:12px 0 0;color:var(--mc-text-secondary);font-size:1.05rem;max-width:60ch}

/* Mapa: llena la columna derecha (alto ~= columna de contacto) */
.ct-loc__map{position:relative;flex:1 1 auto;min-height:440px;border:1px solid var(--mc-border-default);
  border-radius:var(--mc-radius);overflow:hidden;box-shadow:var(--mc-shadow-card)}
.ct-loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Tarjeta de dirección (bajo los medios, columna izquierda) */
.ct-loc__card{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--mc-bg-soft);border:1px solid var(--mc-border-default);
  border-radius:var(--mc-radius);padding:24px 24px}
.ct-loc__cardhead{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.ct-loc__ic{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:var(--mc-brand-soft);color:var(--mc-brand-primary)}
.ct-loc__ic svg{width:24px;height:24px}
.ct-loc__card h3{font-size:1.4rem;margin:0;color:var(--mc-text-primary)}
.ct-loc__addr{margin:8px 0 20px;color:var(--mc-text-secondary);font-size:1rem;line-height:1.55}
.ct-loc__card .mc-btn{align-self:stretch;justify-content:center}

/* CTA secundario (se conserva bajo la rejilla) */
.ct-quote{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ct-quote p{color:var(--mc-text-secondary);margin:0}
.ct-quote .mc-btn svg{width:18px;height:18px}

@media (max-width:768px){
  .ct-hero{padding:40px 0 32px}
  .ct-hero h1{font-size:2rem}
  .ct-contact{padding:36px 0 48px}
}
/* Se comprime -> una sola columna: medios+dirección y luego el mapa */
@media (max-width:860px){
  .ct-contact__grid{grid-template-columns:1fr;gap:20px}
  .ct-loc__map{min-height:340px}
}
@media (max-width:560px){
  .ct-loc__head h2{font-size:1.7rem}
  .ct-loc__map{min-height:300px}
}