/* Reset dentro del módulo */
.csmv *, .csmv *::before, .csmv *::after{box-sizing:border-box}

.csmv{max-width:1100px;margin:24px auto;padding:0 16px 40px;color:#24323a;font-family:Inter,system-ui}
.csmv .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.csmv .brand img{height:34px;width:auto;object-fit:contain}
.csmv .title{font:700 28px/1.2 Poppins,Inter,sans-serif;color:#0b2b40;margin:0}
.csmv .sub{color:#6c7a86;margin:6px 0 16px;font-size:14px}

/* Contenedor módulo */
.csmv .module{background:#fff;border:1px solid #e9eef2;border-radius:14px;box-shadow:0 8px 24px rgba(4,33,66,.06);overflow:hidden}

/* Tabs */
.csmv .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px;background:#f0f6fa}
@media (max-width:900px){.csmv .tabs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.csmv .tabs{grid-template-columns:repeat(2,1fr)}}
.csmv .tab{
  --active:#1f77c4;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid transparent;border-radius:12px;
  padding:10px 12px;min-height:56px;cursor:pointer;transition:.2s;color:#0b2b40
}
.csmv .tab:hover{box-shadow:0 4px 12px rgba(3,35,60,.08)}
.csmv .tab[aria-selected="true"]{background:color-mix(in srgb,var(--active) 12%,#fff);border-color:color-mix(in srgb,var(--active) 30%,#e4edf4)}
.csmv .tab .ico{width:22px;height:22px;color:#6c7a86}
.csmv .tab[aria-selected="true"] .ico{color:var(--active)}
.csmv .tab-title{font:600 14px Poppins,Inter,sans-serif}

/* Panels */
.csmv .panels{padding:10px}
.csmv .panel{display:none;visibility:hidden;opacity:0;transition:opacity .2s;padding:12px;border:1px solid #edf2f6;border-radius:12px;background:#fff}
.csmv .panel.active{display:block;visibility:visible;opacity:1}
.csmv .badge{display:inline-block;padding:4px 8px;border-radius:6px;font:700 12px Poppins,Inter,sans-serif;margin-bottom:8px;
  background:color-mix(in srgb,var(--accent, #1f77c4) 12%,#eef7fb);border:1px solid color-mix(in srgb,var(--accent, #1f77c4) 28%,#e0ebf3);color:var(--accent, #1f77c4)}

/* Grid: más espacio entre columnas y filas */
.csmv .grid{display:grid;row-gap:26px;column-gap:20px}
.csmv .grid.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){
  .csmv .grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;column-gap:18px}
}
@media (max-width:720px){
  .csmv .grid.grid-3{grid-template-columns:1fr;row-gap:20px;column-gap:16px}
}

/* Forzar 2 columnas en desktop */
@media (min-width:1025px){
  .csmv .grid.grid-3{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* Card: enlace completo clickeable */
.csmv .csmv-card{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  padding:14px;border:1px solid #eef3f7;border-radius:12px;background:#fff;transition:.15s;
  text-decoration:none;color:inherit;
  margin-bottom:16px; /* separación extra por tarjeta */
}
.csmv .csmv-card:hover{box-shadow:0 6px 20px rgba(7,36,60,.08)}
/* Hover/focus: fondo blanco sólido y borde marcado */
.csmv .csmv-card:hover,
.csmv .csmv-card:focus-visible{
  background:#ffffff;
  border-color: color-mix(in srgb, var(--accent, #1f77c4) 40%, #e4edf4);
  outline:2px solid color-mix(in srgb,var(--accent, #1f77c4) 30%, transparent);
  outline-offset:2px;
}

/* Icono izquierda servicio */
.csmv .csmv-card .icon-left{
  display:flex;align-items:flex-start;justify-content:center;
  margin-top:2px;flex:0 0 auto;
}
.csmv .csmv-card .icon-left svg{
  width:14px;height:14px;min-width:14px;min-height:14px;overflow:visible;display:inline-block;vertical-align:middle;
  color:var(--accent,#1f77c4);
}

/* Texto: espacio a la derecha para el chip de WA (grande) */
.csmv .csmv-card .txt{padding-right:88px}
.csmv .h6{font:700 14px Poppins,Inter,sans-serif;margin:0 0 8px;color:#0b2b40}
.csmv .muted{color:#5b6a76;font-size:13px;margin:0}

/* Ocultar botón WA antiguo si quedara en el HTML */
.csmv .wa-mini{display:none !important}

/* Overlay WhatsApp (chip) */
.csmv .wa-ghost{
  position:absolute;right:12px;top:10px;left:auto;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:#25D366;border:1px solid rgba(37,211,102,.35);
  color:#ffffff; /* currentColor = blanco para el SVG */
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;white-space:nowrap;
  z-index:3;
}
.csmv .csmv-card:hover .wa-ghost,
.csmv .csmv-card:focus-visible .wa-ghost{opacity:1;transform:translateY(0)}
/* quitar imagen antes del ícono */
.csmv .wa-ghost .wa-logo{display:none !important}
.csmv .wa-ghost .wa-ico{width:16px;height:16px;display:inline-block;fill:currentColor;color:currentColor}
.csmv .wa-ghost .wa-text{font:700 12px Poppins,Inter,sans-serif;color:#ffffff}

/* Infantil */
.csmv .kid{background:#eaf6ff;border-color:color-mix(in srgb,#36aef0 30%,#dcecfa)}
.csmv .kid .h6{color:#36aef0}
.csmv .kid .icon-left svg{color:#36aef0}

/* Footer CTA */
.csmv .footer{display:flex;justify-content:center;padding:18px 12px 22px}
.csmv .btn{background:#1f77c4;color:#fff;border:0;border-radius:999px;padding:12px 18px;font:700 14px Poppins,Inter,sans-serif;text-decoration:none;box-shadow:0 6px 16px color-mix(in srgb, #1f77c4 35%, transparent)}

/* Ajustes de robustez ante temas constructores */
.csmv .grid.grid-3 > div{display:block}
.csmv .grid, .csmv .grid *{list-style:none}

/* Móvil/sin hover: por defecto oculto; mostrar al tocar (focus/active) */
@media (hover:none){
  .csmv .wa-ghost{ opacity:0; transform:translateY(-4px); }
  .csmv .csmv-card:focus .wa-ghost,
  .csmv .csmv-card:active .wa-ghost,
  .csmv .csmv-card:focus-visible .wa-ghost{
    opacity:1; transform:translateY(0);
  }
}

/* Soporte a clase toggle para móviles (usada por el JS):
   primer toque agrega .show-wa para mostrar el chip sin abrir el enlace */
.csmv .csmv-card.show-wa .wa-ghost{ opacity:1; transform:translateY(0); }


/* === Cesmed Tabs Preview – Mobile-first polish === */
:root{--cx-bg:#fff;--cx-rail:#f6f8fb;--cx-text:#1f2a37;--cx-muted:#6b7280;--cx-brand:#1fb6ff;--cx-brand-ink:#0a84c6;--cx-shadow:0 6px 18px rgba(16,24,40,.08);--cx-radius:14px;--cx-radius-pill:999px;--cx-speed:220ms}
.csmtd-prev-root{position:relative;background:var(--cx-bg)}
.csmtd-prev-root .tabs-rail{position:sticky;top:0;z-index:4;display:flex;gap:8px;align-items:center;padding:8px;overflow:auto;overscroll-behavior:contain;background:var(--cx-bg);box-shadow:0 1px 0 rgba(16,24,40,.06);scroll-snap-type:x proximity}
.csmtd-prev-root .tabs-rail::-webkit-scrollbar{display:none}
.csmtd-prev-root .tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;background:var(--cx-rail);color:var(--cx-text);border-radius:var(--cx-radius-pill);font-size:15px;line-height:20px;font-weight:600;min-height:40px;cursor:pointer;scroll-snap-align:center;transition:transform var(--cx-speed),background var(--cx-speed),color var(--cx-speed);white-space:nowrap}
.csmtd-prev-root .tab:active{transform:scale(.98)}
.csmtd-prev-root .tab.is-active{background:rgba(31,182,255,.12);color:var(--cx-brand-ink)}
.csmtd-prev-root .tab .icon{width:20px;height:20px;display:grid;place-items:center}
.csmtd-prev-root .tab-indicator{position:absolute;bottom:0;height:3px;border-radius:3px;background:var(--cx-brand);transition:left var(--cx-speed),width var(--cx-speed)}
.csmtd-prev-root .rail-fade{position:sticky;top:0;width:28px;height:56px;pointer-events:none;background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0))}
.csmtd-prev-root .rail-fade.left{left:0}
.csmtd-prev-root .rail-fade.right{margin-left:auto;transform:scaleX(-1)}
.csmtd-prev-root .panels{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow:hidden;touch-action:pan-y}
.csmtd-prev-root .panel{padding:12px;display:grid;gap:12px;opacity:0;transform:translateX(12px);transition:opacity var(--cx-speed),transform var(--cx-speed)}
.csmtd-prev-root .panel.is-active{opacity:1;transform:translateX(0)}
.csmtd-prev-root .card{background:var(--cx-bg);border-radius:var(--cx-radius);box-shadow:var(--cx-shadow);padding:14px;display:grid;gap:6px}
.csmtd-prev-root .card h3{margin:0;font-size:16px}
.csmtd-prev-root .card p{margin:0;color:var(--cx-muted);font-size:14px}
.csmtd-prev-root .card .cta{margin-top:6px;align-self:start;background:var(--cx-brand);color:#fff;border:none;padding:10px 12px;border-radius:12px;font-weight:700}
@media (min-width:768px){.csmtd-prev-root .card{grid-template-columns:1fr auto;align-items:center}}

.csmtd-prev-root .card{position:relative}
.csmtd-prev-root .card .cta{display:none}
.csmtd-prev-root .card.is-open .cta{display:inline-block}
.csmtd-prev-root .card.is-open{box-shadow:0 10px 24px rgba(16,24,40,.12)}