/* ==========================================================================
   MediCenter · Base — reset, tipografia, botones, header, footer, layout
   Consume tokens.css. Sin colores hardcodeados (salvo transparencias/sombra).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--mc-header-h) + 12px)}
body{
  margin:0;font-family:var(--mc-font-sans);background:var(--mc-bg-page);
  color:var(--mc-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--mc-brand-primary);text-decoration:none}
a:hover{color:var(--mc-brand-primary-hover)}
h1,h2,h3{font-family:var(--mc-font-serif);color:var(--mc-text-primary);line-height:1.12;
  letter-spacing:-.01em;font-weight:700;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--mc-brand-primary);outline-offset:2px;border-radius:3px}
.mc-skip{position:absolute;left:-9999px;top:0;background:var(--mc-brand-deep);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.mc-skip:focus{left:0}

.mc-container{max-width:var(--mc-container);margin:0 auto;padding:0 24px}
.mc-eyebrow{font-family:var(--mc-font-sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mc-brand-primary);margin:0 0 10px}
.mc-rule{width:56px;height:3px;background:var(--mc-brand-bright);border-radius:2px;margin:14px 0 0}
.mc-rule--center{margin:14px auto 0}

/* ---------- Botones (jerarquia CTA) ---------- */
.mc-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mc-font-sans);
  font-size:.95rem;font-weight:600;padding:12px 22px;border-radius:var(--mc-radius-sm);
  border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .12s;white-space:nowrap}
.mc-btn svg{width:18px;height:18px;flex:none}
/* Sólidos: borde definido (verde más oscuro) para un contorno nítido de botón. */
.mc-btn--primary{background:var(--mc-action-primary);color:#fff;border-color:var(--mc-action-primary-hover)}
.mc-btn--primary:hover{background:var(--mc-action-primary-hover);color:#fff;border-color:var(--mc-brand-deep)}
/* Contorno: borde en verde de marca (bien visible), no gris tenue. */
.mc-btn--outline{background:transparent;color:var(--mc-action-secondary);border-color:var(--mc-action-secondary)}
.mc-btn--outline:hover{border-color:var(--mc-action-primary-hover);color:var(--mc-action-primary-hover);background:rgba(10,117,115,.08)}
.mc-btn--on-deep{background:#fff;color:var(--mc-brand-deep);border-color:rgba(255,255,255,.85)}
.mc-btn--on-deep:hover{background:var(--mc-brand-soft);color:var(--mc-brand-deep);border-color:#fff}
.mc-btn--ghost-deep{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.mc-btn--ghost-deep:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.mc-btn--sm{padding:9px 16px;font-size:.9rem}
/* Feedback de pulsacion (microinteraccion sutil, universal a todos los botones) */
.mc-btn:active{transform:translateY(1px)}
/* CTA "Cotizar" del header: mas grande y llamativo (icono calendario incluido) */
.mc-header__cta{padding:12px 22px;font-size:1rem;font-weight:700}
.mc-header__cta svg{width:22px;height:22px}
/* Accesibilidad: respeta prefers-reduced-motion (sin scroll animado ni micro-movimiento) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mc-btn{transition:background .15s,color .15s,border-color .15s}
  .mc-btn:active{transform:none}
}

/* ---------- CTA empresarial global (x-corporate-cta · banda teal) ----------
   Componente reutilizable en TODAS las paginas P0 (no solo Home). Por eso vive
   en base.css (cargado globalmente) y no en un CSS por-pagina. */
.mc-cta{background:var(--mc-brand-deep);color:#fff}
.mc-cta__grid{display:grid;grid-template-columns:1fr auto;gap:var(--mc-space-8);
  align-items:center;padding:var(--mc-space-8) 0}
.mc-cta__left{display:flex;gap:var(--mc-space-4);align-items:center;min-width:0}
.mc-cta__ic{width:40px;height:40px;flex:none;color:#fff;opacity:.9}
.mc-cta__ic svg{width:40px;height:40px}
.mc-cta h2{color:#fff;font-size:1.45rem;line-height:1.2}
.mc-cta p{color:rgba(255,255,255,.82);margin-top:4px;font-size:.95rem}
.mc-cta__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;flex:none}
@media (max-width:1024px){
  .mc-cta__grid{grid-template-columns:1fr;gap:22px}
  .mc-cta__btns{justify-content:flex-start}
}
@media (max-width:560px){
  .mc-cta__btns{width:100%}
  .mc-cta__btns .mc-btn{flex:1;justify-content:center}
}

/* ---------- Header ---------- */
.mc-header{background:var(--mc-bg-surface);border-bottom:1px solid var(--mc-border-default);
  position:sticky;top:0;z-index:50}
.mc-header__bar{display:flex;align-items:center;gap:24px;height:var(--mc-header-h)}
.mc-brandlink{display:flex;align-items:center;flex:none}
.mc-brandlink img{height:62px;width:auto;object-fit:contain;display:block}
.mc-nav{display:flex;gap:22px;flex:1;justify-content:center}
.mc-nav a{color:var(--mc-text-secondary);font-size:.94rem;font-weight:500}
.mc-nav a:hover{color:var(--mc-brand-primary)}
.mc-nav a.is-active{color:var(--mc-brand-primary);font-weight:600}
.mc-header__spacer{flex:1}
.mc-header__utility{display:flex;align-items:center;gap:18px}
.mc-util{display:inline-flex;align-items:center;gap:7px;color:var(--mc-text-secondary);
  font-size:.9rem;font-weight:500}
.mc-util:hover{color:var(--mc-brand-primary)}
.mc-util svg{width:17px;height:17px}
.mc-burger{display:none;background:none;border:1px solid var(--mc-border-strong);border-radius:8px;
  width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.mc-burger svg{width:22px;height:22px;color:var(--mc-text-primary)}

/* ---------- Footer ---------- */
.mc-footer{background:var(--mc-bg-soft);border-top:1px solid var(--mc-border-default);
  padding:48px 0 26px;font-size:.92rem;color:var(--mc-text-secondary)}
/* 4 columnas en una sola fila: Marca(1.3) · Enlaces · Contacto+Ubicación · Tarjeta LinkedIn(auto). */
.mc-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:40px;align-items:start}
.mc-footer__grid>*{min-width:0}
.mc-footer__brand img{width:auto;height:58px;object-fit:contain;display:block;margin-bottom:14px}
.mc-footer__brand p{max-width:34ch;color:var(--mc-text-muted)}
.mc-footer__addr-sub{padding-left:24px;color:var(--mc-text-muted)}
/* Tarjeta de LinkedIn (4ª columna). Tarjeta propia autoalojada = siempre visible
   aunque el navegador bloquee platform.linkedin.com; si el iframe oficial carga,
   un pequeño script oculta la propia para no duplicar. */
.mc-footer__linkedin{margin-top:0}
.mc-li-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:220px;max-width:100%;
  padding:12px;border:1px solid var(--mc-border-default);border-radius:12px;background:#fff;
  text-align:center;text-decoration:none;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.mc-li-card__brand{display:flex;align-items:center;gap:6px;align-self:flex-start;
  color:#0a66c2;font-weight:700;font-size:.88rem}
.mc-li-card__brand svg{width:19px;height:19px}
.mc-li-card__avatar{width:56px;height:56px;border-radius:50%;object-fit:contain;
  background:var(--mc-brand-subtle);padding:6px;margin-top:2px}
.mc-li-card__name{font-weight:700;color:var(--mc-text-primary);font-size:.95rem}
.mc-li-card__role{font-size:.78rem;color:var(--mc-text-muted);line-height:1.3}
.mc-li-card__btn{margin-top:6px;padding:5px 18px;border:1px solid #0a66c2;border-radius:20px;
  color:#0a66c2;font-weight:600;font-size:.83rem;transition:background .15s,color .15s}
.mc-li-card:hover .mc-li-card__btn{background:#0a66c2;color:#fff}
.mc-footer h4{font-family:var(--mc-font-sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mc-text-primary);margin:0 0 12px}
.mc-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mc-footer ul a{color:var(--mc-text-secondary)}
.mc-footer ul a:hover{color:var(--mc-brand-primary)}
/* Contacto / Ubicación: icono en linea delante del dato */
.mc-footer__contact li{display:flex;align-items:center;gap:8px}
.mc-footer__contact a{display:inline-flex;align-items:center;gap:8px}
.mc-footer__contact svg{width:16px;height:16px;flex:none;color:var(--mc-brand-primary)}
/* Enlaces rapidos: 2 columnas iguales x 3 filas (orden por columna), repartidas
   en el bloque con separacion consistente y ritmo vertical (no apegadas). */
.mc-footer ul.mc-footer__quicklinks{grid-auto-flow:column;grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,auto);column-gap:28px;row-gap:12px}
.mc-footer__legalcols{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.mc-footer__bottom{border-top:1px solid var(--mc-border-default);margin-top:34px;padding-top:18px;
  text-align:center;color:var(--mc-text-muted);font-size:.85rem}

/* ---------- Responsive header/footer ---------- */
/* Header colapsa a hamburguesa <=1199: logo + nav(6) + 2 botones no caben. */
@media (max-width:1199px){
  .mc-nav,.mc-header__results{display:none}
  .mc-header__utility{margin-left:auto}
  .mc-burger{display:inline-flex}
}
@media (max-width:1024px){
  /* Tablet: 5 columnas no caben en una fila -> 3 columnas que envuelven. */
  .mc-footer__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .mc-container{padding:0 18px}
  .mc-footer__grid{grid-template-columns:1fr}
}
/* Header en pantallas pequenas: evita overflow horizontal (logo + Cotizar + burger) */
@media (max-width:420px){
  .mc-container{padding:0 14px}
  .mc-header__bar{gap:12px}
  .mc-header__utility{gap:12px}
  .mc-brandlink img{height:46px}
  .mc-btn--sm{padding:8px 12px}
  .mc-header__cta{padding:9px 14px;font-size:.92rem}
  .mc-header__cta svg{width:18px;height:18px}
}
@media (max-width:360px){
  .mc-header__bar{gap:8px}
  .mc-brandlink img{height:40px}
  .mc-btn--sm{padding:7px 10px;gap:6px}
  .mc-header__cta{padding:7px 11px;gap:6px;font-size:.88rem}
}

/* Menu movil (Alpine) */
.mc-mobilemenu{display:none;border-top:1px solid var(--mc-border-default);background:#fff}
.mc-mobilemenu.is-open{display:block}
.mc-mobilemenu nav{display:grid;gap:2px;padding:12px 24px}
.mc-mobilemenu nav a{padding:11px 0;color:var(--mc-text-primary);font-weight:500;
  border-bottom:1px solid var(--mc-border-default)}
.mc-mobilemenu nav a.is-active{color:var(--mc-brand-primary);font-weight:600}
.mc-mobilemenu__cta{display:grid;gap:10px;padding:16px 24px 22px}