/* ============================================================================
   Tarjeta pública. Todo el color, la forma y la tipografía salen de variables:
   :root define el diseño "Noche" (el original) y cada diseño, activado con
   <html data-tema="…">, solo redefine lo que cambia (ver bloques al final).
   ========================================================================== */

:root {
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);

  --page-bg: linear-gradient(135deg, #0a1428 0%, #0d1b3a 50%, #0a1428 100%);
  --page-solid: #0a1428;
  --text: #cbd5e1;
  --orbs-display: block;
  --orb-opacity: 0.4;
  --orb-1: #1e3a8a;
  --orb-2: #2563eb;
  --orb-3: #3b82f6;

  --card-bg: rgba(15, 28, 56, 0.72);
  --card-blur: blur(20px);
  --card-border: 1px solid rgba(96, 165, 250, 0.15);
  --card-radius: 24px;
  --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --cover-bg: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #3b82f6);
  --cover-fade: linear-gradient(180deg, rgba(10, 20, 40, 0) 40%, rgba(15, 28, 56, 0.75));
  --avatar-ring: #0f1c38;
  --avatar-bg: linear-gradient(135deg, #3b82f6, #1e40af);
  --avatar-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
  --avatar-text: #ffffff;

  --name-color: #e0e7ff;
  --name-size: 26px;
  --name-weight: 600;
  --name-tracking: -0.5px;
  --surname-color: #93c5fd;
  --surname-weight: 300;
  --role-color: #60a5fa;
  --role-size: 11px;
  --role-weight: 500;
  --role-transform: uppercase;
  --role-tracking: 1.8px;
  --tagline-color: #94a3b8;
  --tagline-size: 12px;
  --tagline-style: italic;

  --accent: #60a5fa;
  --item-text: #cbd5e1;
  --item-bg: rgba(30, 58, 138, 0.2);
  --item-border: rgba(96, 165, 250, 0.1);
  --item-hover-bg: rgba(30, 58, 138, 0.35);
  --item-hover-border: rgba(96, 165, 250, 0.4);
  --item-hover-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
  --item-radius: 12px;
  --icon-bg: rgba(59, 130, 246, 0.15);
  --icon-border: rgba(96, 165, 250, 0.2);
  --icon-color: #ffffff;
  --icon-radius: 10px;
  --label-color: #60a5fa;
  --label-size: 11px;
  --label-transform: uppercase;
  --label-tracking: 1.2px;
  --value-color: #e0e7ff;

  --block-title: #60a5fa;
  --chip-bg: rgba(59, 130, 246, 0.15);
  --chip-border: rgba(96, 165, 250, 0.25);
  --chip-text: #e0e7ff;
  --chip-radius: 999px;
  --media-border: rgba(96, 165, 250, 0.2);
  --footer-color: #7c8ba3;
  --footer-border: rgba(96, 165, 250, 0.1);

  --social-radius: 50%;
  --social-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

  --btn-bg: rgba(30, 58, 138, 0.28);
  --btn-border: rgba(96, 165, 250, 0.28);
  --btn-hover-bg: rgba(30, 58, 138, 0.45);
  --btn-hover-border: rgba(96, 165, 250, 0.5);
  --btn-text: #e0e7ff;
  --btn-radius: 12px;
  --btn-primary-bg: rgba(37, 99, 235, 0.42);
  --btn-primary-hover-bg: rgba(37, 99, 235, 0.6);
  --btn-primary-border: rgba(147, 197, 253, 0.55);
  --btn-primary-text: #e0e7ff;

  --fab-bg: linear-gradient(135deg, #2563eb, #1e40af);
  --fab-text: #ffffff;
  --fab-border: 1px solid rgba(147, 197, 253, 0.45);
  --fab-radius: 16px;
  --fab-blur: none;
  --fab-shadow: 0 12px 34px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --fab-shadow-hover: 0 16px 40px rgba(37, 99, 235, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --modal-bg: #0f1c38;
  --modal-blur: none;
  --modal-border: 1px solid rgba(96, 165, 250, 0.3);
  --modal-radius: 20px;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --modal-title: #93c5fd;
  --scrim: rgba(5, 10, 24, 0.78);
  --muted: #94a3b8;
  --muted-2: #7c8ba3;
  --close-bg: rgba(59, 130, 246, 0.22);
  --close-border: rgba(96, 165, 250, 0.35);
  --close-text: #e0e7ff;

  --field-bg: rgba(30, 58, 138, 0.25);
  --field-border: rgba(96, 165, 250, 0.28);
  --field-text: #e0e7ff;
  --field-radius: 10px;
  --field-label: #93c5fd;
  --placeholder: #64748b;
  --check-accent: #3b82f6;
  --chip-on-bg: #2563eb;
  --chip-on-border: #bfdbfe;
  --chip-on-text: #ffffff;
  --chip-on-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
  --send-bg: linear-gradient(135deg, #15803d, #166534);
  --send-border: 1px solid rgba(134, 239, 172, 0.5);
  --send-text: #ffffff;
  --send-radius: 12px;
  --send-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
  --error-text: #fecaca;
  --error-bg: rgba(220, 38, 38, 0.18);
  --error-border: rgba(248, 113, 113, 0.4);
  --done-strong: #bbf7d0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--page-solid); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 40px;
  background: var(--page-bg);
  background-attachment: fixed;
  font-family: var(--font-body);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

/* Orbes de fondo (fixed: no agrandan el scroll) */
.orb {
  display: var(--orbs-display);
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--orb-opacity);
  animation: float 12s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: var(--orb-1); top: -100px; left: -100px; }
.orb-2 { width: 350px; height: 350px; background: var(--orb-2); bottom: -120px; right: -80px; animation-delay: -4s; }
.orb-3 { width: 280px; height: 280px; background: var(--orb-3); top: 50%; left: 50%; margin: -140px 0 0 -140px; animation-delay: -8s; opacity: calc(var(--orb-opacity) / 2); }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}

.card {
  width: 100%;
  max-width: 420px;
  margin: auto;
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: var(--card-shadow);
  animation: cardEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.card.unavailable { padding: 56px 32px; text-align: center; }

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
}

/* Portada, logotipo y foto de perfil */
.hero { position: relative; padding-bottom: 44px; }
.cover { height: 150px; background: var(--cover-bg); position: relative; }
.cover::after { content: ''; position: absolute; inset: 0; background: var(--cover-fade); }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.logo {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: 96px;
  max-height: 48px;
  object-fit: contain;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.avatar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  border-radius: 50%;
  border: 3px solid var(--avatar-ring);
  background: var(--avatar-bg);
  box-shadow: var(--avatar-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { font-size: 30px; font-weight: 600; color: var(--avatar-text); letter-spacing: -0.5px; }

/* Identidad */
.identity { padding: 14px 28px 4px; text-align: center; }
.name {
  font-family: var(--font-display);
  font-size: var(--name-size);
  font-weight: var(--name-weight);
  color: var(--name-color);
  letter-spacing: var(--name-tracking);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.name span { display: block; font-weight: var(--surname-weight); color: var(--surname-color); }
.role { margin-top: 10px; font-size: var(--role-size); font-weight: var(--role-weight); color: var(--role-color); letter-spacing: var(--role-tracking); text-transform: var(--role-transform); overflow-wrap: anywhere; }
.company { margin-top: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--company-color, var(--value-color)); letter-spacing: 0.2px; overflow-wrap: anywhere; }
.tagline { margin-top: 8px; font-family: var(--font-display); font-size: var(--tagline-size); font-weight: 300; font-style: var(--tagline-style); color: var(--tagline-color); letter-spacing: 0.4px; overflow-wrap: anywhere; }

/* Contactos */
.contacts { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 4px; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--item-text);
  padding: 12px 14px;
  border-radius: var(--item-radius);
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.contact-item:hover { transform: translateX(4px); border-color: var(--item-hover-border); background: var(--item-hover-bg); box-shadow: var(--item-hover-shadow); }
.contact-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.contact-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--icon-color);
  background: var(--icon-bg);
  border: 1px solid var(--icon-border);
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-label { font-size: var(--label-size); color: var(--label-color); text-transform: var(--label-transform); letter-spacing: var(--label-tracking); font-weight: 600; }
.contact-value { font-size: 13px; color: var(--value-color); font-weight: 400; letter-spacing: 0.2px; overflow-wrap: anywhere; }

/* Bloques (video, servicios, documentos) */
.block { padding: 24px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.block-title { font-size: 11px; font-weight: 600; color: var(--block-title); text-transform: uppercase; letter-spacing: 1.8px; }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--media-border); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 12px; color: var(--chip-text); padding: 8px 14px; border-radius: var(--chip-radius); background: var(--chip-bg); border: 1px solid var(--chip-border); overflow-wrap: anywhere; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--media-border); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.footer {
  margin-top: 32px;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--footer-border);
  text-align: center;
  font-size: 11px;
  color: var(--footer-color);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Redes sociales y página web: botones con el icono de cada red */
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 22px 24px 0; }
.social-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--social-radius);
  display: grid;
  place-items: center;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--social-shadow);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}
.social-btn svg { width: 22px; height: 22px; display: block; }
.social-btn:hover { transform: translateY(-3px) scale(1.06); }
.social-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.social-facebook { background: #1877f2; }
.social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-linkedin { background: #0a66c2; }
.social-linkedin svg { width: 20px; height: 20px; }
.social-web { background: linear-gradient(135deg, #3b82f6, #1e40af); }

/* Acciones: formulario de contacto y código QR */
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 24px 0; }
.action-btn {
  flex: 1 1 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s, border-color 0.25s;
}
.action-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.action-btn:hover { transform: translateY(-2px); background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
.action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.action-primary { flex: 2 1 170px; background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-text); }
.action-primary:hover { background: var(--btn-primary-hover-bg); }

/* Botón flotante: Guardar contacto */
body:has(.save-fab) { padding-bottom: 104px; }
.save-fab {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 388px);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: var(--fab-radius);
  text-decoration: none;
  color: var(--fab-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--fab-bg);
  -webkit-backdrop-filter: var(--fab-blur);
  backdrop-filter: var(--fab-blur);
  border: var(--fab-border);
  box-shadow: var(--fab-shadow);
  animation: fabIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}
.save-fab svg { width: 22px; height: 22px; }
.save-fab:hover { transform: translateX(-50%) translateY(-2px); box-shadow: var(--fab-shadow-hover); }
.save-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes fabIn { from { opacity: 0; transform: translateX(-50%) translateY(24px); } }

/* Ventanas (se abren con #qr y #contacto, se cierran con #_) */
.modal { display: none; position: fixed; inset: 0; z-index: 20; place-items: center; padding: 20px; }
.modal:target { display: grid; animation: fadeIn 0.2s ease-out; }
body:has(.modal:target) { overflow: hidden; }
.modal-backdrop { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box {
  position: relative;
  width: min(100%, 340px);
  padding: 24px 24px 20px;
  text-align: center;
  border-radius: var(--modal-radius);
  background: var(--modal-bg);
  -webkit-backdrop-filter: var(--modal-blur);
  backdrop-filter: var(--modal-blur);
  border: var(--modal-border);
  box-shadow: var(--modal-shadow);
}
.modal-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--modal-title); margin-bottom: 16px; }
.qr-img { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; background: #ffffff; }
.modal-url { margin-top: 14px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.modal-close {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 28px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--close-text);
  background: var(--close-bg);
  border: 1px solid var(--close-border);
}
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes fadeIn { from { opacity: 0; } }

/* Formulario "Déjame tus datos" */
.modal-form { width: min(100%, 380px); max-height: min(92vh, 720px); overflow-y: auto; text-align: left; -webkit-overflow-scrolling: touch; }
.modal-form .modal-title { text-align: center; margin-bottom: 6px; }
.modal-sub { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.modal-form .modal-close { display: block; width: fit-content; margin: 14px auto 0; }
.lead-field { display: block; margin-bottom: 12px; }
.lead-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--field-label); margin-bottom: 5px; }
.lead-field em { font-style: normal; font-weight: 400; color: var(--muted-2); }
.lead-field input, .lead-field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */
  color: var(--field-text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  padding: 11px 12px;
  min-height: 44px;
}
.lead-field textarea { resize: vertical; min-height: 64px; }
.lead-field input:focus-visible, .lead-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lead-field input::placeholder { color: var(--placeholder); }
.lead-check { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.lead-check input { width: 20px; height: 20px; accent-color: var(--check-accent); flex-shrink: 0; }
.lead-group { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.lead-group legend { font-size: 12px; font-weight: 600; color: var(--field-label); margin-bottom: 7px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; font-size: 13px; padding: 9px 14px; border-radius: var(--chip-radius); color: var(--text); background: var(--chip-bg); border: 1px solid var(--chip-border); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.chip input:checked + span { background: var(--chip-on-bg); border-color: var(--chip-on-border); color: var(--chip-on-text); font-weight: 600; box-shadow: var(--chip-on-shadow); }
.chip input:checked + span::before { content: '✓ '; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-error { margin: 0 0 12px; padding: 10px 12px; font-size: 13px; color: var(--error-text); background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 10px; }
.lead-send {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--send-text);
  cursor: pointer;
  background: var(--send-bg);
  border: var(--send-border);
  border-radius: var(--send-radius);
  box-shadow: var(--send-shadow);
}
.lead-send svg { width: 20px; height: 20px; }
.lead-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lead-privacy { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--muted-2); text-align: center; }
.lead-done { text-align: center; padding: 8px 0 4px; }
.lead-done-title { font-size: 16px; font-weight: 600; color: var(--value-color); margin-bottom: 8px; }
.lead-done .modal-sub strong { color: var(--done-strong); }
.lead-open { display: inline-block; padding: 12px 26px; border-radius: var(--send-radius); text-decoration: none; font-weight: 700; font-size: 14px; color: var(--send-text); background: var(--send-bg); border: var(--send-border); }

@media (max-width: 400px) {
  .identity { padding-left: 20px; padding-right: 20px; }
  .contacts, .block { padding-left: 16px; padding-right: 16px; }
  .actions, .social { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Preferencia del sistema "reducir transparencia": superficies más sólidas y sin desenfoque */
@media (prefers-reduced-transparency: reduce) {
  .card, .modal-box, .save-fab { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================================
   DISEÑO "iOS" — Liquid Glass refinado (estilo iOS 27)
   iOS 27 afina Liquid Glass: el vidrio difumina mejor lo que hay detrás y gana
   profundidad y separación, y el usuario puede reducir la transparencia.
   Aquí: vidrio esmerilado grueso + borde de luz superior + sombras en capas;
   las superficies de segundo nivel son más opacas (no se apilan translúcidos
   claros); y "reducir transparencia" las vuelve casi sólidas.
   ========================================================================== */
html[data-tema='ios'] {
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Helvetica Neue', sans-serif;
  --page-bg:
    radial-gradient(60% 45% at 14% 6%, #9fd3ff 0%, transparent 62%),
    radial-gradient(50% 40% at 92% 20%, #ffc7e1 0%, transparent 60%),
    radial-gradient(70% 55% at 78% 100%, #c8baff 0%, transparent 62%),
    #eef2fb;
  --page-solid: #eef2fb;
  --text: #3a3a3c;
  --orbs-display: none;

  --card-bg: rgba(255, 255, 255, 0.6);
  --card-blur: blur(40px) saturate(190%);
  --card-border: 1px solid rgba(255, 255, 255, 0.8);
  --card-radius: 38px;
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), 0 28px 70px rgba(40, 55, 110, 0.2), 0 4px 14px rgba(40, 55, 110, 0.08);

  --cover-bg: linear-gradient(135deg, #5ac8fa, #0a84ff 55%, #bf5af2);
  --cover-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.6));
  --avatar-ring: rgba(255, 255, 255, 0.95);
  --avatar-bg: linear-gradient(135deg, #5ac8fa, #007aff);
  --avatar-shadow: 0 10px 28px rgba(0, 122, 255, 0.35);

  --name-color: #1c1c1e;
  --name-size: 30px;
  --name-weight: 700;
  --name-tracking: -0.7px;
  --surname-color: #6e6e73;
  --surname-weight: 400;
  --role-color: #0062cc;
  --role-size: 14px;
  --role-weight: 600;
  --role-transform: none;
  --role-tracking: -0.1px;
  --tagline-color: #6e6e73;
  --tagline-size: 14px;
  --tagline-style: normal;

  --accent: #0062cc;
  --item-text: #3a3a3c;
  --item-bg: rgba(255, 255, 255, 0.74);
  --item-border: rgba(255, 255, 255, 0.9);
  --item-hover-bg: rgba(255, 255, 255, 0.92);
  --item-hover-border: #ffffff;
  --item-hover-shadow: 0 10px 26px rgba(40, 55, 110, 0.14);
  --item-radius: 22px;
  --icon-bg: rgba(0, 122, 255, 0.12);
  --icon-border: transparent;
  --icon-color: #0062cc;
  --icon-radius: 13px;
  --label-color: #6e6e73;
  --label-size: 12px;
  --label-transform: none;
  --label-tracking: 0;
  --value-color: #1c1c1e;

  --block-title: #6e6e73;
  --chip-bg: rgba(255, 255, 255, 0.78);
  --chip-border: rgba(60, 60, 67, 0.12);
  --chip-text: #1c1c1e;
  --media-border: rgba(255, 255, 255, 0.85);
  --footer-color: #6e6e73;
  --footer-border: rgba(60, 60, 67, 0.12);

  --social-radius: 17px;
  --social-shadow: 0 8px 20px rgba(40, 55, 110, 0.22);

  --btn-bg: rgba(255, 255, 255, 0.78);
  --btn-border: rgba(255, 255, 255, 0.95);
  --btn-hover-bg: #ffffff;
  --btn-hover-border: #ffffff;
  --btn-text: #0062cc;
  --btn-radius: 999px;
  --btn-primary-bg: #0066d6;
  --btn-primary-hover-bg: #0055b3;
  --btn-primary-border: #0066d6;
  --btn-primary-text: #ffffff;

  --fab-bg: rgba(0, 102, 214, 0.94);
  --fab-text: #ffffff;
  --fab-border: 1px solid rgba(255, 255, 255, 0.55);
  --fab-radius: 999px;
  --fab-blur: blur(24px) saturate(180%);
  --fab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 36px rgba(0, 122, 255, 0.4);
  --fab-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 44px rgba(0, 122, 255, 0.5);

  --modal-bg: rgba(255, 255, 255, 0.8);
  --modal-blur: blur(44px) saturate(190%);
  --modal-border: 1px solid rgba(255, 255, 255, 0.9);
  --modal-radius: 34px;
  --modal-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 30px 80px rgba(40, 55, 110, 0.3);
  --modal-title: #6e6e73;
  --scrim: rgba(28, 32, 54, 0.38);
  --muted: #6e6e73;
  --muted-2: #6e6e73;
  --close-bg: rgba(120, 120, 128, 0.14);
  --close-border: transparent;
  --close-text: #0062cc;

  --field-bg: rgba(120, 120, 128, 0.12);
  --field-border: transparent;
  --field-text: #1c1c1e;
  --field-radius: 14px;
  --field-label: #6e6e73;
  --placeholder: #8e8e93;
  --check-accent: #007aff;
  --chip-on-bg: #0062cc;
  --chip-on-border: #0062cc;
  --chip-on-text: #ffffff;
  --chip-on-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
  --send-bg: #1f7a36;
  --send-border: 1px solid transparent;
  --send-radius: 999px;
  --send-shadow: 0 10px 24px rgba(52, 199, 89, 0.38);
  --error-text: #c0262d;
  --error-bg: rgba(255, 59, 48, 0.1);
  --error-border: rgba(255, 59, 48, 0.3);
  --done-strong: #248a3d;
}
html[data-tema='ios'] .tagline, html[data-tema='ios'] .role { letter-spacing: 0; }
html[data-tema='ios'] .contact-label { font-weight: 500; }
html[data-tema='ios'] .contact-item:hover { transform: scale(1.015); }

@media (prefers-color-scheme: dark) {
  html[data-tema='ios'] {
    --page-bg:
      radial-gradient(60% 45% at 14% 6%, #12408a 0%, transparent 62%),
      radial-gradient(50% 40% at 92% 20%, #5b1f6e 0%, transparent 60%),
      radial-gradient(70% 55% at 78% 100%, #2a2275 0%, transparent 62%),
      #0b0d16;
    --page-solid: #0b0d16;
    --text: #ebebf5;
    --card-bg: rgba(44, 44, 56, 0.55);
    --card-border: 1px solid rgba(255, 255, 255, 0.16);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 28px 70px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3);
    --cover-fade: linear-gradient(180deg, rgba(20, 20, 30, 0) 45%, rgba(30, 30, 44, 0.65));
    --avatar-ring: rgba(255, 255, 255, 0.25);
    --name-color: #ffffff;
    --surname-color: #aeaeb2;
    --role-color: #64a8ff;
    --tagline-color: #aeaeb2;
    --accent: #64a8ff;
    --item-text: #ebebf5;
    --item-bg: rgba(72, 72, 90, 0.5);
    --item-border: rgba(255, 255, 255, 0.12);
    --item-hover-bg: rgba(92, 92, 112, 0.62);
    --item-hover-border: rgba(255, 255, 255, 0.25);
    --item-hover-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    --icon-bg: rgba(100, 168, 255, 0.18);
    --icon-color: #64a8ff;
    --label-color: #aeaeb2;
    --value-color: #ffffff;
    --block-title: #aeaeb2;
    --chip-bg: rgba(72, 72, 90, 0.55);
    --chip-border: rgba(255, 255, 255, 0.14);
    --chip-text: #ffffff;
    --media-border: rgba(255, 255, 255, 0.15);
    --footer-color: #8e8e93;
    --footer-border: rgba(255, 255, 255, 0.1);
    --btn-bg: rgba(72, 72, 90, 0.55);
    --btn-border: rgba(255, 255, 255, 0.16);
    --btn-hover-bg: rgba(92, 92, 112, 0.7);
    --btn-hover-border: rgba(255, 255, 255, 0.28);
    --btn-text: #64a8ff;
    --modal-bg: rgba(44, 44, 56, 0.78);
    --modal-border: 1px solid rgba(255, 255, 255, 0.18);
    --modal-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 80px rgba(0, 0, 0, 0.6);
    --modal-title: #aeaeb2;
    --scrim: rgba(0, 0, 0, 0.55);
    --muted: #aeaeb2;
    --muted-2: #8e8e93;
    --close-bg: rgba(120, 120, 128, 0.28);
    --close-text: #64a8ff;
    --field-bg: rgba(120, 120, 128, 0.24);
    --field-text: #ffffff;
    --field-label: #aeaeb2;
    --error-text: #ff9f98;
    --error-bg: rgba(255, 69, 58, 0.16);
    --done-strong: #8be09f;
  }
}

/* Equivalente web del control de transparencia de iOS 27 */
@media (prefers-reduced-transparency: reduce) {
  html[data-tema='ios'] { --card-bg: rgba(255, 255, 255, 0.97); --item-bg: #ffffff; --modal-bg: #ffffff; --btn-bg: #ffffff; --fab-bg: #0066d6; }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  html[data-tema='ios'] { --card-bg: #1c1c24; --item-bg: #2c2c38; --modal-bg: #24242e; --btn-bg: #2c2c38; }
}

/* ============================================================================
   DISEÑO "Ejecutivo" — clásico y sobrio: papel marfil, azul marino y dorado, serifa
   ========================================================================== */
html[data-tema='ejecutivo'] {
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --page-bg: linear-gradient(180deg, #f6f2ea 0%, #ebe4d6 100%);
  --page-solid: #f1ebdf;
  --text: #3b3b3b;
  --orbs-display: none;

  --card-bg: #fffdf9;
  --card-blur: none;
  --card-border: 1px solid #e3d9c3;
  --card-radius: 8px;
  --card-shadow: 0 24px 60px rgba(60, 45, 20, 0.2), 0 2px 6px rgba(60, 45, 20, 0.08);

  --cover-bg: linear-gradient(135deg, #14213d, #25406e);
  --cover-fade: linear-gradient(180deg, rgba(20, 33, 61, 0) 50%, rgba(20, 33, 61, 0.35));
  --avatar-ring: #b08d57;
  --avatar-bg: linear-gradient(135deg, #25406e, #14213d);
  --avatar-shadow: 0 8px 22px rgba(20, 33, 61, 0.35);

  --name-color: #14213d;
  --name-size: 30px;
  --name-weight: 600;
  --name-tracking: 0;
  --surname-color: #b08d57;
  --surname-weight: 500;
  --role-color: #8a6d3b;
  --role-size: 11px;
  --role-weight: 600;
  --role-tracking: 2.6px;
  --tagline-color: #6b6b6b;
  --tagline-size: 14px;

  --accent: #b08d57;
  --item-text: #3b3b3b;
  --item-bg: #ffffff;
  --item-border: #e8dfcd;
  --item-hover-bg: #fbf6ea;
  --item-hover-border: #b08d57;
  --item-hover-shadow: 0 8px 22px rgba(60, 45, 20, 0.12);
  --item-radius: 4px;
  --icon-bg: #14213d;
  --icon-border: transparent;
  --icon-color: #e1c595;
  --icon-radius: 4px;
  --label-color: #8a6d3b;
  --label-tracking: 1.6px;
  --value-color: #14213d;

  --block-title: #8a6d3b;
  --chip-bg: #f6f0e2;
  --chip-border: #e3d6b8;
  --chip-text: #14213d;
  --chip-radius: 3px;
  --media-border: #e3d9c3;
  --footer-color: #6f6652;
  --footer-border: #e8dfcd;

  --social-radius: 6px;
  --social-shadow: 0 6px 16px rgba(20, 33, 61, 0.25);

  --btn-bg: #ffffff;
  --btn-border: #d9cdb2;
  --btn-hover-bg: #fbf6ea;
  --btn-hover-border: #b08d57;
  --btn-text: #14213d;
  --btn-radius: 4px;
  --btn-primary-bg: #14213d;
  --btn-primary-hover-bg: #1d2f57;
  --btn-primary-border: #14213d;
  --btn-primary-text: #f3e6c8;

  --fab-bg: #14213d;
  --fab-text: #f3e6c8;
  --fab-border: 1px solid #b08d57;
  --fab-radius: 4px;
  --fab-shadow: 0 14px 34px rgba(20, 33, 61, 0.45);
  --fab-shadow-hover: 0 18px 40px rgba(20, 33, 61, 0.55);

  --modal-bg: #fffdf9;
  --modal-border: 1px solid #e3d9c3;
  --modal-radius: 8px;
  --modal-shadow: 0 30px 80px rgba(20, 33, 61, 0.4);
  --modal-title: #8a6d3b;
  --scrim: rgba(20, 33, 61, 0.62);
  --muted: #6b6b6b;
  --muted-2: #6f6652;
  --close-bg: #f1e9d6;
  --close-border: #d9cdb2;
  --close-text: #14213d;

  --field-bg: #ffffff;
  --field-border: #d9cdb2;
  --field-text: #14213d;
  --field-radius: 4px;
  --field-label: #14213d;
  --placeholder: #9a8f78;
  --check-accent: #14213d;
  --chip-on-bg: #14213d;
  --chip-on-border: #b08d57;
  --chip-on-text: #f3e6c8;
  --chip-on-shadow: 0 4px 12px rgba(20, 33, 61, 0.3);
  --send-bg: #8a6d3b;
  --send-border: 1px solid #8a6d3b;
  --send-text: #ffffff;
  --send-radius: 4px;
  --send-shadow: 0 8px 20px rgba(138, 109, 59, 0.4);
  --error-text: #8e1b1b;
  --error-bg: #fbeaea;
  --error-border: #e5b4b4;
  --done-strong: #14213d;
}
html[data-tema='ejecutivo'] .card { border-top: 4px solid #b08d57; }
html[data-tema='ejecutivo'] .cover { height: 130px; }
html[data-tema='ejecutivo'] .tagline { margin-bottom: 4px; }
html[data-tema='ejecutivo'] .identity::after { content: ''; display: block; width: 56px; height: 1px; margin: 16px auto 0; background: #b08d57; }

/* ============================================================================
   DISEÑO "Vibrante" — color, energía y esquinas muy redondeadas
   ========================================================================== */
html[data-tema='vibrante'] {
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --page-bg: linear-gradient(135deg, #ff8a5c 0%, #ff4d8d 45%, #7b4dff 100%);
  --page-solid: #ff4d8d;
  --text: #2a1a5e;
  --orb-opacity: 0.45;
  --orb-1: #ffd166;
  --orb-2: #ff4d8d;
  --orb-3: #ffffff;

  --card-bg: rgba(255, 255, 255, 0.95);
  --card-blur: blur(14px);
  --card-border: 1px solid rgba(255, 255, 255, 0.75);
  --card-radius: 34px;
  --card-shadow: 0 34px 80px rgba(80, 20, 120, 0.4), 0 6px 18px rgba(80, 20, 120, 0.15);

  --cover-bg: linear-gradient(135deg, #ffb347, #ff4d8d 55%, #7b4dff);
  --cover-fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.9));
  --avatar-ring: #ffffff;
  --avatar-bg: linear-gradient(135deg, #ff4d8d, #7b4dff);
  --avatar-shadow: 0 10px 28px rgba(255, 77, 141, 0.5);

  --name-color: #2a1a5e;
  --name-size: 28px;
  --name-weight: 700;
  --name-tracking: -0.4px;
  --surname-color: #d81b60;
  --surname-weight: 600;
  --role-color: #6d3df0;
  --role-weight: 600;
  --role-tracking: 1.4px;
  --tagline-color: #6b5a99;
  --tagline-size: 13px;

  --accent: #6d3df0;
  --item-text: #2a1a5e;
  --item-bg: #f7f1ff;
  --item-border: #eadcff;
  --item-hover-bg: #efe3ff;
  --item-hover-border: #c9a8ff;
  --item-hover-shadow: 0 10px 26px rgba(123, 77, 255, 0.22);
  --item-radius: 20px;
  --icon-bg: linear-gradient(135deg, #ff4d8d, #7b4dff);
  --icon-border: transparent;
  --icon-color: #ffffff;
  --icon-radius: 14px;
  --label-color: #6d3df0;
  --value-color: #2a1a5e;

  --block-title: #6d3df0;
  --chip-bg: #f1e6ff;
  --chip-border: #d9c2ff;
  --chip-text: #5a1d8a;
  --media-border: #eadcff;
  --footer-color: #6b5a99;
  --footer-border: #eadcff;

  --social-shadow: 0 8px 20px rgba(123, 77, 255, 0.35);

  --btn-bg: #ffffff;
  --btn-border: #e2d2ff;
  --btn-hover-bg: #f7f1ff;
  --btn-hover-border: #c9a8ff;
  --btn-text: #5a1d8a;
  --btn-radius: 20px;
  --btn-primary-bg: linear-gradient(135deg, #d81b60, #6d3df0);
  --btn-primary-hover-bg: linear-gradient(135deg, #be185d, #5b2fd6);
  --btn-primary-border: transparent;
  --btn-primary-text: #ffffff;

  --fab-bg: linear-gradient(135deg, #d81b60, #6d3df0);
  --fab-text: #ffffff;
  --fab-border: 1px solid rgba(255, 255, 255, 0.5);
  --fab-radius: 22px;
  --fab-shadow: 0 14px 36px rgba(255, 77, 141, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --fab-shadow-hover: 0 18px 44px rgba(255, 77, 141, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  --modal-bg: #ffffff;
  --modal-border: 1px solid #eadcff;
  --modal-radius: 30px;
  --modal-shadow: 0 30px 80px rgba(80, 20, 120, 0.45);
  --modal-title: #6d3df0;
  --scrim: rgba(42, 26, 94, 0.62);
  --muted: #6b5a99;
  --muted-2: #6b5a99;
  --close-bg: #f1e6ff;
  --close-border: #d9c2ff;
  --close-text: #5a1d8a;

  --field-bg: #f7f1ff;
  --field-border: #e2d2ff;
  --field-text: #2a1a5e;
  --field-radius: 14px;
  --field-label: #6d3df0;
  --placeholder: #a898d0;
  --check-accent: #6d3df0;
  --chip-on-bg: #6d3df0;
  --chip-on-border: #6d3df0;
  --chip-on-text: #ffffff;
  --chip-on-shadow: 0 6px 16px rgba(123, 77, 255, 0.4);
  --send-bg: linear-gradient(135deg, #c2410c, #be185d);
  --send-border: 1px solid transparent;
  --send-radius: 18px;
  --send-shadow: 0 10px 26px rgba(255, 77, 141, 0.45);
  --error-text: #b0125f;
  --error-bg: #ffe9f2;
  --error-border: #ffb3d1;
  --done-strong: #6d3df0;
}
html[data-tema='vibrante'] .contact-item:hover { transform: translateY(-2px) scale(1.01); }

/* ============================================================================
   DISEÑO "Minimal" — blanco y negro, editorial, sin adornos
   ========================================================================== */
html[data-tema='minimal'] {
  --font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --page-bg: #f5f5f4;
  --page-solid: #f5f5f4;
  --text: #444444;
  --orbs-display: none;

  --card-bg: #ffffff;
  --card-blur: none;
  --card-border: 1px solid #ececea;
  --card-radius: 22px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 56px rgba(0, 0, 0, 0.07);

  --cover-bg: linear-gradient(135deg, #111111, #3a3a3a);
  --cover-fade: none;
  --avatar-ring: #ffffff;
  --avatar-bg: #111111;
  --avatar-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

  --name-color: #111111;
  --name-size: 28px;
  --name-weight: 600;
  --name-tracking: -0.8px;
  --surname-color: #8a8a8a;
  --surname-weight: 300;
  --role-color: #111111;
  --role-weight: 500;
  --role-tracking: 2.2px;
  --tagline-color: #666666;
  --tagline-size: 13px;
  --tagline-style: normal;

  --accent: #111111;
  --item-text: #444444;
  --item-bg: #fafaf9;
  --item-border: #f0f0ee;
  --item-hover-bg: #f3f3f1;
  --item-hover-border: #111111;
  --item-hover-shadow: none;
  --item-radius: 14px;
  --icon-bg: #ffffff;
  --icon-border: #e4e4e1;
  --icon-color: #111111;
  --icon-radius: 10px;
  --label-color: #6b6b6b;
  --label-tracking: 1.6px;
  --value-color: #111111;

  --block-title: #6b6b6b;
  --chip-bg: #f4f4f2;
  --chip-border: #e8e8e5;
  --chip-text: #222222;
  --media-border: #e8e8e5;
  --footer-color: #6f6f6b;
  --footer-border: #f0f0ee;

  --social-shadow: none;

  --btn-bg: #ffffff;
  --btn-border: #e2e2df;
  --btn-hover-bg: #f6f6f4;
  --btn-hover-border: #111111;
  --btn-text: #111111;
  --btn-radius: 14px;
  --btn-primary-bg: #111111;
  --btn-primary-hover-bg: #2a2a2a;
  --btn-primary-border: #111111;
  --btn-primary-text: #ffffff;

  --fab-bg: #111111;
  --fab-text: #ffffff;
  --fab-border: 1px solid #111111;
  --fab-radius: 16px;
  --fab-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  --fab-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.4);

  --modal-bg: #ffffff;
  --modal-border: 1px solid #ececea;
  --modal-radius: 22px;
  --modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  --modal-title: #111111;
  --scrim: rgba(0, 0, 0, 0.5);
  --muted: #666666;
  --muted-2: #6f6f6b;
  --close-bg: #f1f1ef;
  --close-border: #e2e2df;
  --close-text: #111111;

  --field-bg: #f7f7f5;
  --field-border: #e6e6e3;
  --field-text: #111111;
  --field-radius: 12px;
  --field-label: #333333;
  --placeholder: #a0a09c;
  --check-accent: #111111;
  --chip-on-bg: #111111;
  --chip-on-border: #111111;
  --chip-on-text: #ffffff;
  --chip-on-shadow: none;
  --send-bg: #111111;
  --send-border: 1px solid #111111;
  --send-radius: 14px;
  --send-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  --error-text: #8e1b1b;
  --error-bg: #fbeaea;
  --error-border: #e5b4b4;
  --done-strong: #111111;
}
/* En monocromo las redes también van en negro (conservan su icono y su enlace) */
html[data-tema='minimal'] .social-btn { background: #111111; border-color: #111111; }
html[data-tema='minimal'] .contact-item:hover { transform: none; }

/* El icono verde de WhatsApp necesita fondo claro para verse nítido sobre fondos de color */
html[data-tema='vibrante'] .icon-wa { background: #ffffff; border-color: #eadcff; }