/* Start custom CSS */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue:  #2DA1D6;
      --green: #77B231;
      --dark:  #1a2a3a;
    }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #e0f5fd 0%, #ecf7e1 100%);
      font-family: 'Montserrat', sans-serif;
      padding: 2.5rem 1rem;
    }

    /* ══ CARD ══ */
    .card {
      width: 100%;
      max-width: 380px;
      border-radius: 28px;
      background: #f0fbff;
      box-shadow: 0 24px 64px rgba(45,161,214,0.18), 0 4px 16px rgba(0,0,0,0.07);
      overflow: visible;   /* avatar puede sobresalir */
    }

    /* ══ HEADER ══ */
    .card-header {
      position: relative;
      height: 175px;
      border-radius: 28px 28px 0 0;
      overflow: hidden;
      background: var(--dark);
    }

    .header-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.5;
    }

    .header-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(155deg, rgba(45,161,214,0.55) 0%, rgba(26,42,58,0.72) 100%);
    }

    /* ── Avatar: sobresale del cajón ── */
    .avatar-wrap {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
    }

    .avatar-ring {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      padding: 4px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      box-shadow: 0 6px 24px rgba(45,161,214,0.45);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: default;
    }

    .avatar-ring:hover {
      transform: scale(1.07);
      box-shadow: 0 12px 32px rgba(45,161,214,0.55);
    }

    .avatar-initials {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1a3550, #1a5070);
      border: 3px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 1px;
    }

    /* Avatar con foto real — descomenta si tienes imagen */
    .avatar-photo {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      display: block;
    }

    /* ══ BODY ══ */
    .card-body {
      padding: 10px 26px 26px;   /* espacio para que el avatar no tape el texto */
      text-align: center;
    }

 .card-apellido {
    font-size: clamp(22px, 5.5vw, 27px);
    font-weight: 900;
    color: #6ab341;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.card-name {
    font-size: clamp(22px, 5.5vw, 27px);
    font-weight: 900;
    color: #009fd3;
    letter-spacing: -0.5px;
    margin-bottom: -10px;
}

    .card-role {
      font-size: 12px;
      font-weight: 700;
      color: var(--blue);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
      animation: blink 2s infinite;
    }

    @keyframes blink {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(.7); }
    }

    /* Sobre mí — justo después del rol */
    .about-section {
      background: #fff;
      border: 1.5px solid #c6e8f6;
      border-radius: 16px;
      padding: 14px 16px;
      text-align: left;
      margin-bottom: 20px;
    }

    .about-title {
      font-size: 10px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 5px;
     text-align: center;
    }

    .about-text {
      font-size: 12.5px;
      font-weight: 500;
      color: #4a6070;
      line-height: 1.65;
    text-align: center;
    }

    .divider {
      height: 1.5px;
      background: linear-gradient(90deg, transparent, #b8e0f5, transparent);
      margin-bottom: 18px;
    }

    /* Tags */
    .tag-row {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .tag {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--green);
      background: #edf7e1;
      border: 1.5px solid #bde08a;
      border-radius: 99px;
      padding: 4px 12px;
    }

    /* ══ GRILLA DE ICONOS (SVG inline) ══ */
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
      margin-bottom: 18px;
    }

    .icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 13px 6px;
      border-radius: 16px;
      background: #fff;
      border: 1.5px solid #c6e8f6;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      transition: all 0.22s ease;
    }

    .icon-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(45,161,214,0.32);
    }

    .icon-btn:hover .icon-circle { background: rgba(255,255,255,.22); }
    .icon-btn:hover .icon-circle svg         { stroke: #fff; }
    .icon-btn:hover .icon-circle svg.fi      { fill: #fff; stroke: none; }
    .icon-btn:hover .icon-label              { color: #fff; }

    .icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #daf0fb;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.22s ease;
    }

    .icon-circle svg {
      width: 20px;
      height: 20px;
      stroke: var(--blue);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.22s, fill 0.22s;
    }

    /* Iconos rellenos (fill) */
    .icon-circle svg.fi {
      fill: var(--blue);
      stroke: none;
    }

    .icon-label {
      font-size: 10.5px;
      font-weight: 600;
      color: #4a6070;
      transition: color 0.22s;
      letter-spacing: .2px;
    }

    /* ══ BLOQUE QR + SEDES ══ */
    .qr-sedes-block {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: #fff;
      border: 1.5px solid #c6e8f6;
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 18px;
      text-align: left;
    }

    /* Columna izquierda: QR + botón */
    .qr-col {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .qr-box {
      width: 92px;
      border-radius: 12px;
      background: #f0fbff;
      border: 1.5px solid #c6e8f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 7px 7px 5px;
    }

    .qr-img {
      width: 78px;
      height: 78px;
      display: block;
      border-radius: 6px;
      object-fit: cover;
    }

    .qr-label {
      font-size: 8px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    /* Botón guardar contacto */
    .save-contact-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 92px;
      padding: 10px 4px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: .4px;
      text-decoration: none;
      text-align: center;
      transition: all 0.22s ease;
      box-shadow: 0 3px 10px rgba(45,161,214,0.28);
      line-height: 1.3;
    }

    .save-contact-btn:hover {
      filter: brightness(1.1);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(45,161,214,0.38);
    }

    .sedes-list {
      flex: 1;
      min-width: 0;
    }

    .sedes-title {
      font-size: 10px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    /* Sedes como enlaces */
    .sede-item {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 7px 4px 7px 0;
      border-bottom: 1px dashed #d8eff9;
      text-decoration: none;
      color: inherit;
      border-radius: 8px;
      transition: background 0.18s ease;
      cursor: pointer;
    }

    .sede-item:last-child { border-bottom: none; }

    .sede-item:hover { background: #edf7ff; }
    .sede-item:hover .sede-dir { color: var(--blue); }
    .sede-item:hover .sede-arrow { color: var(--blue); opacity: 1; }

    .sede-num {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      font-size: 9px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }

    .sede-info { flex: 1; min-width: 0; }

    .sede-dir {
      font-size: 11px;
      font-weight: 700;
      color: var(--dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 0.18s;
    }
    
    .sede-name {
    font-size: 11px;
    font-weight: 900;
    color: #2f81d3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s;
}

    .sede-hora {
      font-size: 9.5px;
      font-weight: 500;
      color: #6a8a9a;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sede-hora::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
    }

    .sede-arrow {
      flex-shrink: 0;
      color: #b0ccd8;
      opacity: 0.6;
      margin-top: 3px;
      transition: color 0.18s, opacity 0.18s;
    }

    /* ══ MODAL QR — CSS PURO ══ */
    #qr-toggle { display: none; }

    .qr-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 30, 45, 0.7);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    #qr-toggle:checked ~ .qr-modal-overlay {
      display: flex;
    }

    .qr-modal {
      background: #fff;
      border-radius: 24px;
      padding: 28px 24px 22px;
      max-width: 300px;
      width: 90%;
      text-align: center;
      box-shadow: 0 32px 80px rgba(45,161,214,0.3);
      animation: popIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
    }

    @keyframes popIn {
      from { opacity: 0; transform: scale(0.75); }
      to   { opacity: 1; transform: scale(1); }
    }

    .qr-modal-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--dark);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .qr-modal-sub {
      font-size: 11px;
      font-weight: 500;
      color: #6a8a9a;
      margin-bottom: 18px;
    }

    .qr-modal-img {
      width: 200px;
      height: 200px;
      border-radius: 14px;
      border: 3px solid #c6e8f6;
      object-fit: cover;
      display: block;
      margin: 0 auto 18px;
    }

    .qr-modal-close {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 22px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.22s ease;
      box-shadow: 0 4px 14px rgba(45,161,214,0.3);
      text-decoration: none;
      border: none;
    }

    .qr-modal-close:hover {
      filter: brightness(1.1);
      transform: translateY(-2px);
    }

    /* Label que actúa como botón del QR */
    .qr-box {
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .qr-box:hover {
      transform: scale(1.04);
      box-shadow: 0 6px 18px rgba(45,161,214,0.25);
    }

    .qr-hint {
      font-size: 7.5px;
      font-weight: 500;
      color: var(--blue);
      letter-spacing: .8px;
      text-transform: uppercase;
      opacity: 0.8;
      margin-top: -2px;
      text-align: center;
    }
    .cta-btn {
      display: block;
      width: 100%;
      padding: 15px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: .5px;
      border: none;
      cursor: pointer;
      margin-bottom: 0;
      text-decoration: none;
      text-align: center;
      transition: all 0.25s ease;
      box-shadow: 0 6px 20px rgba(45,161,214,0.28);
    }

    .cta-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(45,161,214,0.42);
      filter: brightness(1.08);
    }

    /* ══ FOOTER ══ */
    .card-footer {
      padding: 12px 26px 18px;
      text-align: center;
      font-size: 10.5px;
      font-weight: 600;
      color: #a0b8c8;
      letter-spacing: .5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 8px;

      padding: 7px 14px;
    }

    .supersalud-logo {
      width: 120px;
      flex-shrink: 0;
    }

    .footer-logo-text {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .footer-logo-name {
      font-size: 10px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: .5px;
      line-height: 1.2;
    }

    .footer-logo-sub {
      font-size: 8.5px;
      font-weight: 600;
      color: var(--green);
      letter-spacing: .3px;
    }

    .footer-copy {
      font-size: 10px;
      font-weight: 600;
      color: #b0c8d8;
    }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 420px) {
      body { padding: 2rem .75rem; }
      .card { border-radius: 22px; }
      .card-header { height: 155px; border-radius: 22px 22px 0 0; }
      .avatar-ring { width: 86px; height: 86px; }
      .avatar-initials { width: 78px; height: 78px; font-size: 26px; }
      .card-body { padding: 58px 18px 20px; }
      .icon-btn { padding: 11px 4px; border-radius: 13px; }
      .icon-circle { width: 36px; height: 36px; }
      .icon-circle svg { width: 17px; height: 17px; }
    }/* End custom CSS */