/* index.bundle.css — generado por npm run build:css:index; no editar a mano */ /* ===== css/tm-essence/01-tokens.css ===== */ /** * The Master Music — esencia visual (referencia: landing DIPAV). * Tokens canónicos --tm-* + alias usados en landings / sitio. * No importa app móvil ni bundles fuera de public/. */ :root { /* Núcleo “Deep Premium” */ --tm-bg-deep: #0f172a; --tm-bg-surface: #1e293b; --tm-bg-elevated: #334155; --tm-text-pearl: #f8fafc; --tm-text-secondary-dark: #cbd5e1; --tm-text-muted: #94a3b8; --tm-text-disabled-dark: #64748b; --tm-line-strong-dark: rgba(255, 255, 255, 0.16); --tm-ink-on-gold: #2a2000; --tm-gold: #d4af37; --tm-gold-hover: #e0bc3a; --tm-gold-dim: rgba(212, 175, 55, 0.18); /* Oro metálico — solo paleta de relleno (forma/tipografía en buttons.css) */ --tm-gold-metallic-gradient: linear-gradient( 180deg, #fff280 0%, #f8e088 10%, #edd060 22%, #ddb840 38%, #d4af37 52%, #c49a18 70%, #a67c08 86%, #8b6508 100% ); --tm-gold-metallic-gradient-deep: linear-gradient( 180deg, #f8e088 0%, #edd060 18%, #d4af37 40%, #c49a18 68%, #8b6508 100% ); --tm-gold-metallic-ink: #2a2000; --tm-gold-metallic-border: #cfa030; --tm-gold-metallic-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 0 rgba(139, 105, 20, 0.38), 0 4px 16px rgba(180, 140, 40, 0.36); --tm-gold-metallic-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 0 rgba(139, 105, 20, 0.42), 0 8px 22px rgba(180, 140, 40, 0.44); --tm-gold-metallic-focus: #fff280; /* Loader institucional (PNG) — formal, calendario, landings */ --tm-loader-soccer: url("/assets/img/ui/loader-soccer.png"); --tm-loader-soccer-size: 52px; --tm-loader-soccer-size-inline: 28px; --tm-line-soft: rgba(255, 255, 255, 0.08); --tm-error: #ef4444; --tm-success: #10b981; --tm-radius: 12px; --tm-radius-sm: 8px; --tm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --tm-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4); /* Franjas / contraste (sitio: navy + negro; light puede sobrescribir) */ --tm-bg-section-alt: #000000; --tm-surface-paper: #ffffff; --tm-ink-on-accent: #0a0a0a; --tm-ink-on-paper: #000000; /* Vignette fija del body (negro puro; no slate) */ --tm-vignette-body: linear-gradient(180deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0) 38%), linear-gradient(0deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0) 45%); /* Acento de programa (sobrescriben hojas 04-program-accents por clase en ) */ --tm-prog-primary: var(--tm-gold); --tm-prog-secondary: #64748b; --tm-prog-glow-a: rgba(212, 175, 55, 0.22); --tm-prog-glow-b: rgba(100, 116, 139, 0.18); /* Alias DIPAV / landings */ --bg-deep: var(--tm-bg-deep); --bg-surface: var(--tm-bg-surface); --bg-surface-elevated: var(--tm-bg-elevated); --text-pearl: var(--tm-text-pearl); --text-muted: var(--tm-text-muted); --accent-gold: var(--tm-gold); --accent-gold-hover: var(--tm-gold-hover); --accent-gold-dim: var(--tm-gold-dim); --error: var(--tm-error); --success: var(--tm-success); --radius: var(--tm-radius); --radius-sm: var(--tm-radius-sm); --transition: var(--tm-transition); --shadow-glass: var(--tm-shadow-glass); --border-color: var(--tm-line-soft); --bg-section-alt: var(--tm-bg-section-alt); --surface-paper: var(--tm-surface-paper); --ink-on-accent: var(--tm-ink-on-accent); --ink-on-paper: var(--tm-ink-on-paper); /* * Fase 1 — Roles semánticos (--tm-role-*): alias exclusivos a primitivos --tm-*. * Mismo aspecto; puentes (02/03) y overrides de programa leen desde aquí. * Fase 4 (tema claro): se pueden remapear solo --tm-role-* sin tocar primitivos de marca. */ --tm-role-canvas: var(--tm-bg-deep); --tm-role-surface: var(--tm-bg-surface); --tm-role-surface-elevated: var(--tm-bg-elevated); --tm-role-section-alt: var(--tm-bg-section-alt); --tm-role-text-primary: var(--tm-text-pearl); --tm-role-text-secondary: var(--tm-text-secondary-dark); --tm-role-text-muted: var(--tm-text-muted); --tm-role-text-disabled: var(--tm-text-disabled-dark); --tm-role-border-subtle: var(--tm-line-soft); --tm-role-border-strong: var(--tm-line-strong-dark); --tm-role-accent-ink: var(--tm-ink-on-gold); --tm-role-accent: var(--tm-gold); --tm-role-accent-hover: var(--tm-gold-hover); --tm-role-accent-dim: var(--tm-gold-dim); --tm-role-paper: var(--tm-surface-paper); --tm-role-ink-on-accent: var(--tm-ink-on-accent); --tm-role-ink-on-paper: var(--tm-ink-on-paper); --tm-role-success: var(--tm-success); --tm-role-error: var(--tm-error); --tm-role-vignette-body: var(--tm-vignette-body); /* * Fase 2 — primitivos de soporte (mismos valores que el legado; consumidos por puentes e index). */ --tm-ink-scrim: #000000; --tm-ink-canvas-mix: #000010; --tm-accent-cool: #e2e8f0; --tm-status-ok: #34d399; --tm-status-warn: #fbbf24; --tm-status-danger: #f87171; --tm-surface-glass: rgba(30, 41, 59, 0.88); --tm-surface-glass-hover: rgba(51, 65, 85, 0.92); --tm-surface-landing-card: rgba(30, 41, 59, 0.75); --tm-border-paper: #e5e7eb; --tm-border-on-dark-10: rgba(255, 255, 255, 0.1); --tm-border-on-dark-12: rgba(255, 255, 255, 0.12); --tm-overlay-on-canvas-12: rgba(15, 23, 42, 0.12); --tm-shadow-ambient-50: rgba(0, 0, 0, 0.5); --tm-shadow-ambient-40: rgba(0, 0, 0, 0.4); --tm-shadow-ambient-45: rgba(0, 0, 0, 0.45); --tm-shadow-ambient-30: rgba(0, 0, 0, 0.3); --tm-shadow-accent-glow: rgba(212, 175, 55, 0.25); --tm-shadow-landing-stack: 0 20px 25px -5px var(--tm-shadow-ambient-45), 0 10px 10px -5px var(--tm-shadow-ambient-30); --tm-shadow-landing-soft: 0 4px 6px -1px var(--tm-shadow-ambient-45); --tm-vignette-index-radial-end: rgb(0 0 0 / 0.38); --tm-vignette-index-top: rgb(0 0 0 / 0.97); --tm-vignette-index-fade: rgb(0 0 0 / 0); --tm-vignette-index-bottom: rgb(0 0 0 / 0.94); --tm-role-ink-scrim: var(--tm-ink-scrim); --tm-role-ink-canvas-mix: var(--tm-ink-canvas-mix); --tm-role-accent-cool: var(--tm-accent-cool); --tm-role-status-ok: var(--tm-status-ok); --tm-role-status-warn: var(--tm-status-warn); --tm-role-status-danger: var(--tm-status-danger); --tm-role-surface-glass: var(--tm-surface-glass); --tm-role-surface-glass-hover: var(--tm-surface-glass-hover); --tm-role-surface-landing-card: var(--tm-surface-landing-card); --tm-role-border-paper: var(--tm-border-paper); --tm-role-border-on-dark-10: var(--tm-border-on-dark-10); --tm-role-border-on-dark-12: var(--tm-border-on-dark-12); --tm-role-overlay-on-canvas-12: var(--tm-overlay-on-canvas-12); /* Marcas de programa (badges EMUSINI, referencias cruzadas; alineado a 04-program-accents) */ --tm-brand-mis-amores: #dd96af; --tm-brand-talentos: #8b5cf6; --tm-brand-talentos-muted: #c4b5fd; --tm-brand-encanto: #c41e3a; --tm-brand-encanto-muted: #d4a0a8; --tm-accent-sky: #0ea5e9; --tm-role-brand-mis-amores: var(--tm-brand-mis-amores); --tm-role-brand-talentos: var(--tm-brand-talentos); --tm-role-brand-talentos-muted: var(--tm-brand-talentos-muted); --tm-role-brand-encanto: var(--tm-brand-encanto); --tm-role-brand-encanto-muted: var(--tm-brand-encanto-muted); --tm-role-accent-sky: var(--tm-accent-sky); /* Ruta de aprendizaje (index #comparacion) — secundarios alineados a 04-program-accents */ --tm-path-dipav-primary: var(--tm-gold); --tm-path-dipav-secondary: #94a3b8; --tm-path-misamores-secondary: #36c9cb; --tm-path-talentos-secondary: #5eead4; --tm-path-encanto-secondary: #c9952e; } /* * Sitio / landings (HTML lang="es"): sin guiones automáticos entre sílabas. * Evita cortes tipo «es-cuela»; las palabras pasan línea enteras cuando caben. */ html { hyphens: none; -webkit-hyphens: none; } /* ===== css/tm-essence/01b-tokens-typography.css ===== */ /** * Tokens de tipografía — sistema de diseño TMM. * Sigue carga después de 01-tokens.css. * Familias system-first estilo Apple (sin descarga remota; rápido y consistente). * * Reglas de uso: * - Componentes y páginas SOLO consumen --tm-fs-* / --tm-font-* / --tm-lh-*. * - No introducir tamaños arbitrarios (px sueltos) fuera de estos tokens. * - Nunca subir peso para llamar la atención: usar tamaño y color. */ :root { --tm-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tm-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Hero marketing (index + landings): titular editorial serif */ --tm-font-hero-title: Georgia, "Times New Roman", "Palatino Linotype", Palatino, serif; --tm-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Escala fluida (clamp min, preferido, máx) */ --tm-fs-display: clamp(2.75rem, 4vw + 1rem, 4.5rem); --tm-fs-h1: clamp(2rem, 2.4vw + 1rem, 3rem); --tm-fs-h2: clamp(1.5rem, 1.6vw + 0.8rem, 2.125rem); --tm-fs-h3: clamp(1.25rem, 1vw + 0.7rem, 1.625rem); --tm-fs-h4: 1.125rem; --tm-fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.25rem); --tm-fs-body: 1rem; --tm-fs-small: 0.875rem; --tm-fs-caption: 0.75rem; --tm-fs-overline: 0.6875rem; /* Line-heights */ --tm-lh-tight: 1.1; --tm-lh-snug: 1.25; --tm-lh-body: 1.55; /* Tracking (letter-spacing) — negativo Apple-grade en displays, positivo en overlines */ --tm-tracking-display: -0.022em; --tm-tracking-h: -0.014em; --tm-tracking-body: 0; --tm-tracking-overline: 0.08em; /* Pesos */ --tm-fw-regular: 400; --tm-fw-medium: 500; --tm-fw-semibold:600; --tm-fw-bold: 700; /* Anchos de lectura cómoda */ --tm-measure-reading: 65ch; } /* ===== css/tm-essence/01c-tokens-space.css ===== */ /** * Tokens de espaciado, radios, layout y elevación — sistema de diseño TMM. * Carga después de 01b-tokens-typography.css. * * Escala 4 px. Nunca usar valores en px arbitrarios en componentes; * combinar tokens (gap: var(--tm-space-3); padding-block: var(--tm-space-7); …). */ :root { /* Escala 4 px (alineada a malla iOS / Material) */ --tm-space-1: 4px; --tm-space-2: 8px; --tm-space-3: 12px; --tm-space-4: 16px; --tm-space-5: 24px; --tm-space-6: 32px; --tm-space-7: 48px; --tm-space-8: 64px; --tm-space-9: 96px; --tm-space-10: 128px; /* Radios canónicos */ --tm-radius-xs: 6px; --tm-radius-sm: 10px; --tm-radius-md: 14px; --tm-radius-lg: 18px; --tm-radius-xl: 28px; --tm-radius-pill: 999px; /* Layout */ --tm-container-max: 1200px; --tm-container-reading: 760px; --tm-section-py: clamp(48px, 6vw, 96px); --tm-grid-gap: clamp(16px, 1.6vw, 32px); /* Áreas táctiles y focus */ --tm-touch-min: 44px; --tm-focus-ring-width: 2px; --tm-focus-ring-offset: 3px; /* Elevación (light por defecto; se reescribe abajo para dark) */ --tm-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.04); --tm-elev-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --tm-elev-3: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04); --tm-elev-4: 0 24px 56px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); /* Movimiento */ --tm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --tm-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1); --tm-dur-fast: 120ms; --tm-dur-base: 200ms; --tm-dur-slow: 320ms; } /* * Dark (default si no hay data-theme="light") usa sombras con scrim negro. * Light ya queda con los valores de :root. */ :root:not([data-theme="light"]) { --tm-elev-1: 0 1px 2px rgba(0, 0, 0, 0.40); --tm-elev-2: 0 4px 12px rgba(0, 0, 0, 0.45); --tm-elev-3: 0 12px 28px rgba(0, 0, 0, 0.55); --tm-elev-4: 0 24px 56px rgba(0, 0, 0, 0.65); } @media (prefers-reduced-motion: reduce) { :root { --tm-dur-fast: 0ms; --tm-dur-base: 0ms; --tm-dur-slow: 0ms; } } /* ===== css/tm-essence/02-bridge-site.css ===== */ /** * Puente: sitio principal (index.html) usa --bg, --panel, --accent… * Valores derivados de roles Fase 1 (--tm-role-* en 01-tokens.css). */ :root { --max: 1200px; --pad: 22px; /* Consumen roles Fase 1 (--tm-role-* en 01-tokens.css); mismo aspecto que antes. */ --bg: var(--tm-role-canvas); --bg-alt: var(--tm-role-section-alt); --panel: var(--tm-role-surface); --panel-alt: var(--tm-role-surface-elevated); --text: var(--tm-role-text-primary); --muted: var(--tm-role-text-muted); --accent: var(--tm-role-accent); --accent2: var(--tm-role-accent-cool); --accent-gold: var(--tm-role-accent); --line: var(--tm-role-border-subtle); --shadow: 0 18px 50px var(--tm-shadow-ambient-50); --shadow2: 0 10px 30px var(--tm-shadow-ambient-40); --shadow-soft: 0 4px 15px color-mix(in srgb, var(--tm-role-ink-scrim) 10%, transparent); --shadow-gold-strong: var(--tm-gold-metallic-shadow-hover); --glow-gold: var(--tm-gold-metallic-shadow); --radius: 18px; --surface-paper: var(--tm-role-paper); --ink-on-accent: var(--tm-role-ink-on-accent); --ink-on-paper: var(--tm-role-ink-on-paper); --gradient-body-vignette: var(--tm-role-vignette-body); --gradient-body-vignette-index-home: radial-gradient( ellipse 125% 95% at 50% 50%, transparent 32%, var(--tm-vignette-index-radial-end) 100% ), linear-gradient(180deg, var(--tm-vignette-index-top) 0%, var(--tm-vignette-index-fade) 52%), linear-gradient(0deg, var(--tm-vignette-index-bottom) 0%, var(--tm-vignette-index-fade) 58%); --gradient-ticker-bg: linear-gradient(90deg, var(--tm-role-canvas), var(--tm-role-section-alt)); --gradient-hero-overlay: linear-gradient( 180deg, color-mix(in srgb, var(--tm-role-canvas) 75%, transparent) 0%, color-mix(in srgb, var(--tm-role-canvas) 28%, transparent) 48%, color-mix(in srgb, var(--tm-role-canvas) 22%, transparent) 58%, color-mix(in srgb, var(--tm-role-canvas) 72%, transparent) 100% ); --gradient-news-overlay: linear-gradient( to top, color-mix(in srgb, var(--tm-role-canvas) 95%, transparent) 0%, color-mix(in srgb, var(--tm-role-canvas) 60%, transparent) 50%, transparent 100% ); --scrim-navy-95: color-mix(in srgb, var(--tm-role-canvas) 95%, transparent); --scrim-navy-72: color-mix(in srgb, var(--tm-role-canvas) 72%, transparent); --scrim-navy-60: color-mix(in srgb, var(--tm-role-canvas) 60%, transparent); --accent-gradient-cta: var(--tm-gold-metallic-gradient); --accent-gradient-cta-nav: var(--tm-gold-metallic-gradient); --accent-gradient-badge: linear-gradient( 135deg, var(--accent), color-mix(in srgb, var(--accent) 48%, var(--tm-role-ink-scrim)) ); --logo-drop-shadow: 0 4px 15px color-mix(in srgb, var(--tm-role-ink-scrim) 20%, transparent); } /* ===== css/tm-essence/04-program-accents.css ===== */ /** * Toque de color por programa. * Mapea variables que ya usan las landings (--dipav-purple, --encanto-red, etc.). * Tipografía base titular/lead → 07-components/marketing-type.css (enlazar aparte). */ html.tm-html { scroll-behavior: smooth; } html.tm-prog-institutional, html.tm-prog-dipav { --tm-prog-primary: #d4af37; --tm-prog-secondary: #94a3b8; --tm-prog-glow-a: rgba(212, 175, 55, 0.28); --tm-prog-glow-b: rgba(148, 163, 184, 0.12); } /* DIPAV — puente de tokens para bloque tm-esquema-pago compartido con tridente */ html.tm-html.tm-prog-dipav { --ink: var(--text-pearl); --muted: var(--text-muted); --border: rgba(255, 255, 255, 0.1); --input-border: rgba(255, 255, 255, 0.12); --input-bg: var(--bg-surface); --card-bg: var(--bg-surface); --ma-field-surface: var(--bg-surface); --tm-prog-primary: var(--accent-gold); } html.tm-prog-talentos { --tm-prog-primary: var(--tm-brand-talentos); --tm-prog-secondary: #5eead4; --tm-prog-glow-a: rgba(139, 92, 246, 0.32); --tm-prog-glow-b: rgba(94, 234, 212, 0.18); --dipav-purple: var(--tm-prog-primary); --dipav-blue: var(--tm-prog-secondary); --talentos-violet: #a78bfa; --talentos-violet-soft: #c4b5fd; --talentos-teal: var(--tm-prog-secondary); --talentos-teal-soft: #99f6e4; --talentos-ink: #f5f3ff; --talentos-deep: #0d0820; } html.tm-prog-encanto { --tm-prog-primary: var(--tm-brand-encanto); --tm-prog-secondary: #c9952e; --tm-prog-glow-a: rgba(212, 168, 92, 0.2); --tm-prog-glow-b: rgba(196, 30, 58, 0.1); --encanto-red: var(--tm-prog-primary); --encanto-brown: var(--tm-prog-secondary); --encanto-gold: #d4a85c; --encanto-gold-soft: #e8c88a; --encanto-cream: #faf7f2; --encanto-rose-soft: #e8b4bc; } html.tm-prog-misamores { --tm-prog-primary: var(--tm-brand-mis-amores); --tm-prog-secondary: #36c9cb; --tm-prog-glow-a: rgba(221, 150, 175, 0.28); --tm-prog-glow-b: rgba(54, 201, 203, 0.2); --dipav-purple: var(--tm-prog-primary); --dipav-blue: var(--tm-prog-secondary); } /* Barra decorativa en contenedor blanco de marca (añade class tm-brand-strip-accent al bloque) */ html.tm-html .tm-brand-strip-accent::before { background: linear-gradient(90deg, var(--tm-prog-primary), var(--tm-prog-secondary)); } /* Base oscura compartida (sobrescribe :root de landings con mayor especificidad en ) */ html.tm-html.tm-prog-talentos { --bg: var(--talentos-deep); --ink: var(--talentos-ink); --muted: color-mix(in srgb, var(--talentos-violet-soft) 75%, #94a3b8); --border: rgba(167, 139, 250, 0.34); --tm-precio-accent: var(--talentos-teal-soft); } /* Encanto: landing oscura cálida (logo = negro + rojo + dorado; ambiente dorado, rojo en CTAs) */ html.tm-html.tm-prog-encanto { --bg: #14100d; --ink: var(--encanto-cream); --muted: #a89482; --border: rgba(212, 168, 92, 0.3); --tm-prog-glow-a: rgba(212, 168, 92, 0.18); --tm-prog-glow-b: rgba(196, 30, 58, 0.08); --tm-precio-accent: var(--encanto-gold); } /* Encanto: tarjetas cálidas semitransparentes (no blanco plano) */ html.tm-html.tm-prog-encanto { --card-bg: rgba(30, 22, 17, 0.94); --input-bg: rgba(255, 248, 240, 0.06); --input-border: rgba(212, 168, 92, 0.34); --shadow: 0 24px 48px -16px rgba(8, 5, 4, 0.55); --shadow-soft: 0 4px 14px rgba(8, 5, 4, 0.32); } html.tm-html.tm-prog-encanto .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); border-color: color-mix(in srgb, var(--encanto-brown) 42%, transparent); } html.tm-html.tm-prog-misamores .card { color: var(--ink); } /* Mis Amores — jerarquía visual (modo claro; ver bloque :not([data-theme="light"]) para oscuro) */ html.tm-html.tm-prog-misamores[data-theme="light"] { --ma-field-surface: #fff; --input-bg: #fff; --input-bg-focus: #fff; --input-border: rgba(221, 150, 175, 0.28); } html.tm-html.tm-prog-misamores[data-theme="light"] .title { background: linear-gradient( 118deg, #2a4549 0%, var(--tm-brand-mis-amores) 42%, var(--dipav-blue) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } html.tm-html.tm-prog-misamores[data-theme="light"] .subtitle strong { color: var(--dipav-purple); } html.tm-html.tm-prog-misamores[data-theme="light"] main.grid > .card .meta { background: color-mix(in srgb, var(--card-bg) 90%, var(--tm-brand-mis-amores) 10%); } html.tm-html.tm-prog-misamores[data-theme="light"] .progressBar { background: linear-gradient(90deg, var(--dipav-purple), var(--dipav-blue)); } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-esquema-pago__opcion { background: var(--ma-field-surface, #fff); border-color: rgba(221, 150, 175, 0.28); } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-esquema-pago__opcion:has(input:checked) { border-color: color-mix(in srgb, var(--dipav-purple) 55%, var(--border)); background: rgba(221, 150, 175, 0.1); } html.tm-html.tm-prog-misamores[data-theme="light"] select option { background: #fff; color: var(--ink); } html.tm-html.tm-prog-misamores[data-theme="light"] .ma-nd-block > label { color: var(--muted); } html.tm-html.tm-prog-misamores[data-theme="light"] .checkRow:has(input:checked) { border-color: var(--dipav-purple); background: rgba(221, 150, 175, 0.08); } /* Mis Amores — modo oscuro (canvas profundo + acentos rosa / turquesa del logo) */ html.tm-html.tm-prog-misamores:not([data-theme="light"]) { color-scheme: dark; --ma-deep: #142428; --ma-surface: rgba(26, 40, 44, 0.94); --ma-field-surface: rgba(255, 248, 245, 0.06); --bg: var(--ma-deep); --ink: #f5f0ee; --muted: #9eb0b6; --border: rgba(221, 150, 175, 0.3); --card-bg: var(--ma-surface); --input-bg: var(--ma-field-surface); --input-bg-focus: rgba(255, 248, 245, 0.08); --input-border: rgba(221, 150, 175, 0.34); --shadow: 0 24px 48px -16px rgba(8, 14, 16, 0.55); --shadow-soft: 0 4px 14px rgba(8, 14, 16, 0.32); --tm-prog-glow-a: rgba(221, 150, 175, 0.14); --tm-prog-glow-b: rgba(54, 201, 203, 0.1); --tm-precio-accent: var(--tm-prog-secondary); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) body { background: radial-gradient(at 10% 0%, var(--tm-prog-glow-a) 0px, transparent 50%), radial-gradient(at 90% 12%, var(--tm-prog-glow-b) 0px, transparent 48%), radial-gradient(at 50% 100%, rgba(221, 150, 175, 0.08) 0px, transparent 55%), var(--bg); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: color-mix(in srgb, var(--tm-brand-mis-amores) 38%, transparent); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .title { background: linear-gradient( 118deg, #f5f0ee 0%, #f0b4c8 40%, #7ee8e8 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .subtitle strong { color: #f0b4c8; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) main.grid > .card .meta { background: rgba(221, 150, 175, 0.08); border-color: color-mix(in srgb, var(--tm-brand-mis-amores) 32%, transparent); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card .meta .k { color: #f0b4c8; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card .meta .v { color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card .meta .v .tm-meta-mensual-nota { color: var(--muted); opacity: 1; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .note { border-color: rgba(221, 150, 175, 0.28); background: rgba(221, 150, 175, 0.1); color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .progressTrack { background: rgba(255, 255, 255, 0.08); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .progressBar { background: linear-gradient(90deg, var(--dipav-purple), var(--dipav-blue)); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-step-badge { color: #fff; background: linear-gradient(135deg, var(--dipav-purple), var(--dipav-blue)); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-esquema-pago__opcion { background: var(--ma-field-surface); border-color: var(--input-border); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-esquema-pago__opcion:has(input:checked) { border-color: color-mix(in srgb, var(--dipav-blue) 55%, var(--border)); background: rgba(221, 150, 175, 0.14); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) select option { background: #1e3236; color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .checkRow { background: var(--ma-field-surface); border-color: var(--input-border); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .checkRow:has(input:checked) { border-color: color-mix(in srgb, var(--dipav-blue) 50%, var(--border)); background: rgba(221, 150, 175, 0.12); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .ma-success-box { background: rgba(54, 201, 203, 0.1); border-color: rgba(54, 201, 203, 0.28); color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-landing-gallery .ph { display: flex; flex-direction: column; background: rgba(20, 36, 40, 0.88); border-color: color-mix(in srgb, var(--tm-brand-mis-amores) 34%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--tm-brand-mis-amores) 28%, transparent), var(--shadow-soft); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-landing-gallery .ph:hover { border-color: color-mix(in srgb, var(--dipav-blue) 45%, transparent); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-landing-gallery .ph .cap { color: var(--ink); background: linear-gradient( 180deg, color-mix(in srgb, var(--tm-brand-mis-amores) 18%, rgba(20, 36, 40, 0.95)) 0%, rgba(20, 36, 40, 0.98) 100% ); border-top-color: color-mix(in srgb, var(--tm-brand-mis-amores) 32%, transparent); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-modal .modal-content { background: linear-gradient(165deg, #1e3236 0%, #142428 100%); border-color: rgba(221, 150, 175, 0.38); color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-modal-title, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-highlight { color: #b8f0f0; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-lead, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-section-label, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-membresia-k, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-k { color: var(--muted); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-membresia { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(54, 201, 203, 0.32); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-membresia-v { color: #f0b4c8; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(221, 150, 175, 0.28); box-shadow: none; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-name { color: #b8f0f0; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-col { background: rgba(0, 0, 0, 0.2); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-col--miembro { background: linear-gradient(145deg, rgba(221, 150, 175, 0.16), rgba(54, 201, 203, 0.12)); border: 1px solid rgba(54, 201, 203, 0.28); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-rate-v { color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) #termsLink { color: #7ee8e8; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) #termsLink:hover { color: #f0b4c8; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .btnSecondary { background: rgba(221, 150, 175, 0.12); color: var(--ink); border-color: var(--border); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .btnSecondary:hover { background: rgba(54, 201, 203, 0.14); color: #b8f0f0; border-color: var(--dipav-blue); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card input:not([type="checkbox"]):not([type="radio"]), html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card select, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 99999s ease-out 0s; } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card input:focus, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card select:focus, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .card textarea:focus { border-color: var(--dipav-blue); background: rgba(255, 248, 245, 0.08); box-shadow: 0 0 0 4px rgba(54, 201, 203, 0.2); } html.tm-html.tm-prog-encanto .card .meta { background: rgba(212, 168, 92, 0.06); border-color: color-mix(in srgb, var(--encanto-brown) 28%, transparent); } html.tm-html.tm-prog-encanto .card .meta .k { color: var(--encanto-gold-soft); letter-spacing: 0.1em; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .card .meta .v { color: var(--encanto-cream); } html.tm-html.tm-prog-encanto .card .meta:nth-child(1) .k { color: #f0d4b8; } html.tm-html.tm-prog-encanto .card .meta:nth-child(2) .k { color: var(--encanto-gold-soft); } html.tm-html.tm-prog-encanto .card .meta:nth-child(3) .k { color: var(--encanto-rose-soft); } html.tm-html.tm-prog-encanto .card .meta:nth-child(4) .k, html.tm-html.tm-prog-encanto .card .meta.meta--membresias .k { color: #f5c4a8; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .card .meta .v #enc-precio-mensual-desde, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .card .meta .v [id$="-precio-mensual-desde"] { color: var(--encanto-gold); } /* Talentos: vidrio morado (identidad DIPAV) */ html.tm-html.tm-prog-talentos { --bg: var(--talentos-deep); --ink: var(--talentos-ink); --muted: color-mix(in srgb, var(--talentos-violet-soft) 70%, #94a3b8); --border: rgba(167, 139, 250, 0.32); --card-bg: rgba(28, 18, 52, 0.86); --input-bg: rgba(8, 4, 18, 0.45); --input-border: rgba(167, 139, 250, 0.24); --shadow: 0 24px 48px -16px rgba(8, 4, 24, 0.6), 0 8px 20px -8px rgba(139, 92, 246, 0.28); --shadow-soft: 0 4px 14px rgba(8, 4, 24, 0.45); --tm-precio-accent: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos .card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink); border-color: color-mix(in srgb, var(--talentos-violet) 45%, transparent); } html.tm-html.tm-prog-talentos .card .meta { background: rgba(167, 139, 250, 0.06); border-color: color-mix(in srgb, var(--talentos-violet) 28%, transparent); } html.tm-html.tm-prog-talentos .card .meta .k { color: var(--talentos-teal); letter-spacing: 0.1em; } html.tm-html.tm-prog-talentos .card .meta .v { color: var(--talentos-ink); } html.tm-html.tm-prog-talentos .card .meta:nth-child(1) .k { color: var(--talentos-violet-soft); } html.tm-html.tm-prog-talentos .card .meta:nth-child(2) .k { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos .card .meta:nth-child(3) .k { color: var(--talentos-violet); } html.tm-html.tm-prog-talentos .card .meta:nth-child(4) .k, html.tm-html.tm-prog-talentos .card .meta.meta--membresias .k { color: var(--talentos-teal); } html.tm-html.tm-prog-talentos .card .meta .v #tal-precio-mensual-desde { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos .card .meta .v .tm-meta-mensual-nota { color: color-mix(in srgb, var(--talentos-violet-soft) 88%, transparent); } html.tm-html.tm-prog-encanto body { background: radial-gradient(at 10% 0%, var(--tm-prog-glow-a) 0px, transparent 52%), radial-gradient(at 90% 14%, rgba(196, 30, 58, 0.14) 0px, transparent 46%), radial-gradient(at 50% 100%, rgba(120, 72, 32, 0.16) 0px, transparent 58%), var(--bg); } html.tm-html.tm-prog-talentos body { background: radial-gradient(at 12% 6%, var(--tm-prog-glow-a) 0px, transparent 52%), radial-gradient(at 88% 18%, var(--tm-prog-glow-b) 0px, transparent 50%), radial-gradient(at 50% 92%, rgba(94, 234, 212, 0.14) 0px, transparent 60%), radial-gradient(at 50% 50%, rgba(76, 29, 149, 0.22) 0px, transparent 70%), var(--bg); } /* Mis Amores: modo claro (default del sitio vía data-theme="light") */ html.tm-html.tm-prog-misamores[data-theme="light"] { color-scheme: light; --ma-field-surface: #ffffff; --bg: #faf6f4; --ink: #2a4549; --muted: #6b7c82; --border: rgba(221, 150, 175, 0.28); --card-bg: #ffffff; --input-bg: #ffffff; --input-border: rgba(221, 150, 175, 0.28); --shadow: 0 20px 25px -5px rgba(42, 69, 73, 0.08), 0 10px 10px -5px rgba(221, 150, 175, 0.12); --shadow-soft: 0 4px 6px -1px rgba(42, 69, 73, 0.06); --tm-prog-glow-a: rgba(221, 150, 175, 0.28); --tm-prog-glow-b: rgba(54, 201, 203, 0.2); } /** * Cabecera réplica DIPAV (Encanto, Mis Amores, Talentos): * barra blanca ancho completo, .nav-logos centrado, TMM 35/45px, logo programa 60/75px. */ html.tm-html.tm-prog-encanto body, html.tm-html.tm-prog-misamores body, html.tm-html.tm-prog-talentos body { display: flex; flex-direction: column; min-height: 100vh; } html.tm-html.tm-prog-encanto body > .wrap, html.tm-html.tm-prog-misamores body > .wrap, html.tm-html.tm-prog-talentos body > .wrap { flex: 1; width: 100%; } html.tm-html.tm-prog-encanto header, html.tm-html.tm-prog-misamores header, html.tm-html.tm-prog-talentos header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #ffffff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; width: 100%; z-index: 100; flex-shrink: 0; } html.tm-html.tm-prog-encanto header .nav-logos, html.tm-html.tm-prog-misamores header .nav-logos, html.tm-html.tm-prog-talentos header .nav-logos { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; } html.tm-html.tm-prog-encanto header .nav-logos a, html.tm-html.tm-prog-misamores header .nav-logos a, html.tm-html.tm-prog-talentos header .nav-logos a { display: inline-flex; align-items: center; line-height: 0; text-decoration: none !important; color: inherit; } html.tm-html.tm-prog-encanto header .nav-logos a:hover, html.tm-html.tm-prog-misamores header .nav-logos a:hover, html.tm-html.tm-prog-talentos header .nav-logos a:hover { text-decoration: none !important; opacity: 0.92; } html.tm-html.tm-prog-encanto header .nav-logos .logo-tmm, html.tm-html.tm-prog-misamores header .nav-logos .logo-tmm, html.tm-html.tm-prog-talentos header .nav-logos .logo-tmm { height: 35px; width: auto; max-width: 100%; object-fit: contain; } html.tm-html.tm-prog-encanto header .nav-logos .logo-encanto, html.tm-html.tm-prog-misamores header .nav-logos .logo-mis-amores, html.tm-html.tm-prog-talentos header .nav-logos .logo-talentos { height: 60px; width: auto; max-width: 100%; object-fit: contain; } html.tm-html.tm-prog-encanto header .nav-separator, html.tm-html.tm-prog-misamores header .nav-separator, html.tm-html.tm-prog-talentos header .nav-separator { width: 1px; height: 28px; background: var(--tm-role-overlay-on-canvas-12); flex-shrink: 0; } @media (min-width: 768px) { html.tm-html.tm-prog-encanto header .nav-logos .logo-tmm, html.tm-html.tm-prog-misamores header .nav-logos .logo-tmm, html.tm-html.tm-prog-talentos header .nav-logos .logo-tmm { height: 45px; } html.tm-html.tm-prog-encanto header .nav-logos .logo-encanto, html.tm-html.tm-prog-misamores header .nav-logos .logo-mis-amores, html.tm-html.tm-prog-talentos header .nav-logos .logo-talentos { height: 75px; } html.tm-html.tm-prog-encanto header .nav-separator, html.tm-html.tm-prog-misamores header .nav-separator, html.tm-html.tm-prog-talentos header .nav-separator { height: 38px; } } /** * Tridente landings — contenedor vertical (réplica formal escritorio). * formal.html: body padding 24px, .formal-app max-width 1240px, .content padding 28/40/40, * .formal-expediente-grid columna única gap 24px (10-layout-desktop-mobile.css ≥921px). */ html.tm-html.tm-prog-encanto main.grid, html.tm-html.tm-prog-misamores main.grid, html.tm-html.tm-prog-talentos main.grid { display: flex; flex-direction: column; gap: 24px; align-items: stretch; width: 100%; max-width: 100%; } html.tm-html.tm-prog-encanto main.grid > .card, html.tm-html.tm-prog-misamores main.grid > .card, html.tm-html.tm-prog-talentos main.grid > .card { width: 100%; align-self: stretch; box-sizing: border-box; } @media (min-width: 921px) { html.tm-html.tm-prog-encanto body, html.tm-html.tm-prog-misamores body, html.tm-html.tm-prog-talentos body { padding: 24px; box-sizing: border-box; } html.tm-html.tm-prog-encanto body > .wrap, html.tm-html.tm-prog-misamores body > .wrap, html.tm-html.tm-prog-talentos body > .wrap { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 28px 40px 40px; width: 100%; box-sizing: border-box; } } /* Galerías landings: ratio estable (evita fotos “aplastadas” al cambiar viewport) */ html.tm-html .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } html.tm-html .ph { min-width: 0; overflow: hidden; } html.tm-html .ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 120px; max-height: min(38vw, 220px); object-fit: cover; display: block; } @media (max-width: 980px) { html.tm-html .photos { grid-template-columns: 1fr; } html.tm-html .ph img { max-height: none; aspect-ratio: 16 / 10; min-height: 160px; } } /* Panel CONOCER (texto) en landings de inscripción */ html.tm-html .tm-conocer-panel { margin-top: 18px; } html.tm-html.tm-prog-dipav .authority-section .tm-conocer-panel { margin: 18px 0 0; max-width: none; } html.tm-html.tm-prog-talentos .cardInner .tm-conocer-panel, html.tm-html.tm-prog-encanto .cardInner .tm-conocer-panel, html.tm-html.tm-prog-misamores .cardInner .tm-conocer-panel { margin: 18px 0 0; max-width: none; width: 100%; } /* Tridente — metaGrid: tipografía uniforme en las 4 celdas (copy multilínea) */ html.tm-html.tm-prog-misamores .card .meta .v, html.tm-html.tm-prog-talentos .card .meta .v, html.tm-html.tm-prog-encanto .card .meta .v { margin-top: 5px; font-size: 12px; font-weight: 600; line-height: 1.45; } html.tm-html.tm-prog-misamores .card .meta:nth-child(4) .k, html.tm-html.tm-prog-misamores .card .meta.meta--membresias .k { color: #7ee8e8; } /* Tridente (Talentos, Mis Amores, Encanto): nota + enlace de precios solo en tarjeta intro (página 1) */ html.tm-html .tm-landing-precios-wrap { text-align: center; margin-top: 14px; } html.tm-html .tm-landing-precios-nota { margin: 0 0 10px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--muted); max-width: 28rem; margin-left: auto; margin-right: auto; } html.tm-html.tm-prog-talentos a.tm-link-precios, html.tm-html.tm-prog-encanto a.tm-link-precios, html.tm-html.tm-prog-misamores a.tm-link-precios, html.tm-html.tm-prog-dipav a.tm-link-precios { display: inline; margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; font-size: inherit; font-weight: 700; font-family: inherit; line-height: inherit; text-decoration: underline; cursor: pointer; transform: none; transition: color 0.2s ease; } html.tm-html.tm-prog-misamores a.tm-link-precios { color: var(--dipav-blue); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) a.tm-link-precios { color: #7ee8e8; } html.tm-html.tm-prog-misamores a.tm-link-precios:hover { color: var(--dipav-purple); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) a.tm-link-precios:hover { color: #f0b4c8; } html.tm-html.tm-prog-talentos[data-theme="light"] a.tm-link-precios, html.tm-html.tm-prog-talentos[data-theme="light"] .tm-precio-inline-link { color: #6d28d9; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) a.tm-link-precios, html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precio-inline-link { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos[data-theme="light"] a.tm-link-precios:hover, html.tm-html.tm-prog-talentos[data-theme="light"] .tm-precio-inline-link:hover { color: #4c1d95; filter: none; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) a.tm-link-precios:hover, html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precio-inline-link:hover { color: var(--talentos-violet-soft); filter: none; } html.tm-html.tm-prog-encanto a.tm-link-precios { color: var(--encanto-brown, #92400e); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) a.tm-link-precios { color: var(--encanto-gold-soft); } html.tm-html.tm-prog-encanto a.tm-link-precios:hover { color: var(--encanto-red, #be123c); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) a.tm-link-precios:hover { color: var(--encanto-rose-soft); } html.tm-html.tm-prog-dipav a.tm-link-precios, html.tm-html.tm-prog-dipav .tm-esquema-pago a.tm-link-precios { color: var(--accent-gold); } html.tm-html.tm-prog-dipav a.tm-link-precios:hover, html.tm-html.tm-prog-dipav .tm-esquema-pago a.tm-link-precios:hover { color: color-mix(in srgb, var(--accent-gold) 78%, #fff); } html.tm-html .tm-esquema-pago a.tm-link-precios { margin-top: 0; align-self: auto; } html.tm-html .tm-esquema-pago { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.5rem; } html.tm-html .tm-esquema-pago__panel { display: flex; flex-direction: column; gap: 0.65rem; padding: 14px 14px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 24%, var(--border, #e2e8f0)); background: color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 5%, var(--card-bg, #fff)); } html.tm-html .tm-esquema-pago__legend { font-weight: 900; font-size: 12px; margin: 0; padding-bottom: 8px; line-height: 1.45; color: var(--ink); letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } html.tm-html .tm-esquema-pago__tarifas { display: grid; gap: 0.65rem; } @media (min-width: 520px) { html.tm-html .tm-esquema-pago__tarifas { grid-template-columns: 1fr 1fr; } } html.tm-html .tm-esquema-pago__footer { margin: 0; font-size: 0.9rem; } html.tm-html .tm-esquema-pago__footer-link { display: block; margin-top: 0.45rem; } html.tm-html .tm-esquema-pago__footer .helper-text { display: inline; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--muted); } html.tm-html .tm-esquema-pago__modo { margin: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: color-mix(in srgb, var(--ink) 3%, transparent); } html.tm-html .tm-esquema-pago__modo-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } html.tm-html .tm-esquema-pago__modo-select { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--input-border, var(--border)); background: var(--input-bg, var(--ma-field-surface, #fff)); color: var(--ink); font-size: 14px; font-weight: 700; font-family: inherit; outline: none; cursor: pointer; } html.tm-html .tm-esquema-pago__modo .helper-text { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--muted); } html.tm-html .tm-esquema-pago__opcion { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px 16px; margin: 0; border-radius: 16px; border: 2px solid var(--input-border, var(--border)); background: color-mix(in srgb, var(--ink) 4%, transparent); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } html.tm-html .tm-esquema-pago__opcion:focus-within { outline: 2px solid color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 45%, transparent); outline-offset: 1px; } html.tm-html .tm-esquema-pago__opcion:has(input:checked) { border-color: color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 55%, var(--border)); background: color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 10%, transparent); } html.tm-html .tm-esquema-pago__opcion input[type="radio"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0; margin: 0; flex-shrink: 0; cursor: pointer; border: 2px solid color-mix(in srgb, var(--muted) 55%, var(--border, #cbd5e1)); border-radius: 50%; background: var(--card-bg, #fff); box-shadow: none; transition: border-color 0.15s ease; } html.tm-html .tm-esquema-pago__opcion input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform 0.12s ease; background: var(--tm-esquema-radio-accent, var(--tm-prog-primary, #8b5cf6)); } html.tm-html .tm-esquema-pago__opcion input[type="radio"]:checked { border-color: var(--tm-esquema-radio-accent, var(--tm-prog-primary, #8b5cf6)); } html.tm-html .tm-esquema-pago__opcion input[type="radio"]:checked::before { transform: scale(1); } html.tm-html .tm-esquema-pago__opcion input[type="radio"]:focus, html.tm-html .tm-esquema-pago__opcion input[type="radio"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--tm-esquema-radio-accent, var(--tm-prog-primary, #8b5cf6)) 35%, transparent); outline-offset: 2px; box-shadow: none; } html.tm-html .tm-esquema-pago__opcion .label-text { flex: 1; min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; } html.tm-html .tm-esquema-pago__opcion .label-text strong { color: inherit; font-weight: 900; } /* Sesión oyente — fuera del panel de colegiatura; fila plana sin caja de tarifa */ html.tm-html .tm-esquema-pago__sesion-aside { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.15rem; } html.tm-html .tm-esquema-pago__sesion-aside[hidden] { display: none !important; } html.tm-html .tm-esquema-pago__opcion--sesion[hidden] { display: none !important; } html.tm-html .tm-esquema-pago__opcion--sesion { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; width: 100%; margin: 0; padding: 0.55rem 0 0; border: none; border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 0; background: transparent; cursor: pointer; } html.tm-html .tm-esquema-pago__opcion--sesion:focus-within { outline: none; } html.tm-html .tm-esquema-pago__opcion--sesion:has(input:checked) { border: none; border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); background: transparent; } html.tm-html .tm-esquema-pago__opcion--sesion input[type="radio"] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 0.9rem; height: 0.9rem; min-width: 0.9rem; min-height: 0.9rem; padding: 0; margin: 0; flex-shrink: 0; cursor: pointer; border: 2px solid color-mix(in srgb, var(--muted) 55%, var(--border, #cbd5e1)); border-radius: 50%; background: var(--card-bg, #fff); box-shadow: none; } html.tm-html .tm-esquema-pago__opcion--sesion input[type="radio"]::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; transform: scale(0); transition: transform 0.12s ease; background: var(--tm-esquema-radio-accent, var(--tm-prog-primary, #8b5cf6)); } html.tm-html .tm-esquema-pago__opcion--sesion input[type="radio"]:checked { border-color: var(--tm-esquema-radio-accent, var(--tm-prog-primary, #8b5cf6)); } html.tm-html .tm-esquema-pago__opcion--sesion input[type="radio"]:checked::before { transform: scale(1); } html.tm-html .tm-esquema-pago__opcion--sesion .tm-esquema-pago__sesion-title { font-size: 0.78rem; font-weight: 600; line-height: 1.35; color: var(--muted); } html.tm-html .tm-esquema-pago__opcion--sesion:has(input:checked) .tm-esquema-pago__sesion-title { color: var(--ink); font-weight: 700; } html.tm-html .tm-esquema-pago__sesion-label { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; flex: 1; min-width: 0; margin: 0; cursor: pointer; } html.tm-html .tm-esquema-pago__sesion-price { margin: 0; font-size: 0.72rem; font-weight: 500; line-height: 1.3; color: var(--muted); } html.tm-html .tm-esquema-pago__sesion-qty { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.15rem; font-size: 0.68rem; color: var(--muted); user-select: none; } html.tm-html .tm-esquema-pago__sesion-qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 3px; background: transparent; font-size: 0.75rem; line-height: 1; color: var(--ink); cursor: pointer; } html.tm-html .tm-esquema-pago__sesion-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; } html.tm-html .tm-esquema-pago__sesion-qty-val { min-width: 0.85rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } /* DIPAV — esquema de pago paso 3 (mismo bloque que tridente; acento oro) */ html.tm-html.tm-prog-dipav { --tm-esquema-radio-accent: var(--tm-gold, #d4af37); } html.tm-html.tm-prog-dipav .tm-esquema-pago__opcion:has(input:checked) { border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--border)); background: color-mix(in srgb, var(--accent-gold) 10%, transparent); } html.tm-html.tm-prog-dipav .tm-esquema-pago__opcion input[type="radio"] { --tm-esquema-radio-accent: var(--tm-gold, #d4af37); } html.tm-html.tm-prog-dipav:not([data-theme="light"]) .tm-esquema-pago__panel { background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-surface)); border-color: rgba(255, 255, 255, 0.12); } html.tm-html.tm-prog-dipav:not([data-theme="light"]) .tm-esquema-pago__opcion { background: color-mix(in srgb, var(--text-pearl) 5%, var(--bg-surface)); border-color: var(--input-border); } html.tm-html.tm-prog-dipav:not([data-theme="light"]) .tm-esquema-pago__opcion input[type="radio"], html.tm-html.tm-prog-dipav:not([data-theme="light"]) .tm-esquema-pago__opcion--sesion input[type="radio"] { background: var(--bg-surface-elevated); border-color: color-mix(in srgb, var(--text-muted) 50%, transparent); } html.tm-html.tm-prog-talentos { --tm-esquema-radio-accent: var(--tm-prog-primary, #8b5cf6); } html.tm-html.tm-prog-encanto { --tm-esquema-radio-accent: var(--encanto-gold, #d4a85c); } html.tm-html.tm-prog-misamores { --tm-esquema-radio-accent: var(--dipav-purple, #dd96af); } /* Tridente — filas checkbox (términos, imagen): checkbox alineado a la 1.ª línea */ html.tm-html.tm-prog-misamores .card .checkRow, html.tm-html.tm-prog-talentos .card .checkRow, html.tm-html.tm-prog-encanto .card .checkRow { align-items: flex-start; gap: 10px; padding: 14px 16px; } html.tm-html.tm-prog-misamores .ndGrid .checkRow, html.tm-html.tm-prog-talentos .ndGrid .checkRow, html.tm-html.tm-prog-encanto .ndGrid .checkRow { align-items: center; padding: 10px 14px; gap: 8px; } html.tm-html.tm-prog-misamores .card .checkRow input[type="checkbox"], html.tm-html.tm-prog-talentos .card .checkRow input[type="checkbox"], html.tm-html.tm-prog-encanto .card .checkRow input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin: 3px 0 0; flex-shrink: 0; cursor: pointer; } html.tm-html.tm-prog-misamores .card .checkRow > .label-text, html.tm-html.tm-prog-talentos .card .checkRow > .label-text, html.tm-html.tm-prog-encanto .card .checkRow > .label-text { flex: 1; min-width: 0; margin: 0; line-height: 1.45; text-wrap: pretty; } html.tm-html.tm-prog-misamores .card .checkRow .label-text a, html.tm-html.tm-prog-talentos .card .checkRow .label-text a, html.tm-html.tm-prog-encanto .card .checkRow .label-text a { white-space: nowrap; } html.tm-html.tm-prog-misamores .card .checkRow .label-text .tm-terms-program, html.tm-html.tm-prog-talentos .card .checkRow .label-text .tm-terms-program, html.tm-html.tm-prog-encanto .card .checkRow .label-text .tm-terms-program { white-space: nowrap; } html.tm-html.tm-prog-misamores .card .checkRow .label-text .helper-text, html.tm-html.tm-prog-talentos .card .checkRow .label-text .helper-text, html.tm-html.tm-prog-encanto .card .checkRow .label-text .helper-text { display: block; margin-top: 8px; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--muted); } /* Tridente: selects nativos legibles (oscuro) */ html.tm-html.tm-prog-talentos select option { background: #1c1240; color: var(--talentos-ink); } html.tm-html.tm-prog-encanto select option { background: #1e1612; color: var(--encanto-cream); } html.tm-html.tm-prog-encanto .card label, html.tm-html.tm-prog-misamores .card label { color: var(--muted); } html.tm-html.tm-prog-encanto .label-text, html.tm-html.tm-prog-misamores .label-text, html.tm-html.tm-prog-encanto .ndGrid .checkRow label, html.tm-html.tm-prog-misamores .ndGrid .checkRow label { color: var(--ink); } html.tm-html a.tm-link-precios { max-width: 100%; white-space: normal; text-wrap: balance; } /* Campos obligatorios — asterisco y nota estándar en landings */ html.tm-html .req { color: var(--tm-role-accent, var(--dipav-purple, #8b5cf6)); font-weight: 900; } html.tm-html .tm-form-required-note { margin: 0 0 14px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.35; } /* Tridente: cabecera de formulario, badge de paso, botones informativos */ html.tm-html .tm-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } html.tm-html .tm-step-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; font-weight: 900; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 11px; border-radius: 14px; min-width: 4.25rem; } html.tm-html .tm-step-badge-line { display: block; } html.tm-html .tm-step-badge-num { white-space: nowrap; font-size: 12px; text-transform: none; letter-spacing: 0; margin-top: 2px; } html.tm-html.tm-prog-misamores .tm-step-badge { color: var(--dipav-purple); background: rgba(221, 150, 175, 0.15); } html.tm-html.tm-prog-encanto .tm-step-badge { color: #fff; background: linear-gradient(135deg, var(--encanto-red), var(--encanto-brown)); } html.tm-html.tm-prog-talentos .tm-step-badge { color: #fff; background: var(--dipav-purple); } html.tm-html .tm-under-meta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } html.tm-html .tm-under-meta-btn { font-size: 12px !important; padding: 12px 14px !important; line-height: 1.35 !important; text-align: center; white-space: normal !important; overflow-wrap: break-word; word-break: normal; hyphens: manual; text-wrap: balance; min-height: 44px !important; box-sizing: border-box !important; align-items: center !important; display: inline-flex !important; justify-content: center !important; } /* Nota bajo precio mensual (tridente): mismo tamaño en desktop / tablet / móvil */ html.tm-html.tm-prog-misamores .card .meta .v .tm-meta-mensual-nota, html.tm-html.tm-prog-talentos .card .meta .v .tm-meta-mensual-nota, html.tm-html.tm-prog-encanto .card .meta .v .tm-meta-mensual-nota { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; line-height: 1.35; opacity: 0.82; } html.tm-html.tm-prog-misamores .card .meta .v .tm-meta-mensual-nota { color: var(--muted); opacity: 0.88; } html.tm-html.tm-prog-encanto .card .meta .v .tm-meta-mensual-nota { color: color-mix(in srgb, var(--encanto-gold-soft) 72%, var(--muted)); opacity: 1; } /* Rejilla meta: auto-fit (tablet) + 2 cols en ancho medio; 1 col la define cada landing ≤640px */ html.tm-html.tm-prog-misamores main.grid > .card .metaGrid, html.tm-html.tm-prog-talentos main.grid > .card .metaGrid, html.tm-html.tm-prog-encanto main.grid > .card .metaGrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); } @media (min-width: 641px) and (max-width: 900px) { html.tm-html.tm-prog-misamores main.grid > .card .metaGrid, html.tm-html.tm-prog-talentos main.grid > .card .metaGrid, html.tm-html.tm-prog-encanto main.grid > .card .metaGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html.tm-html.tm-prog-misamores main.grid > .card .meta:hover { border-color: var(--dipav-purple); } html.tm-html.tm-prog-talentos main.grid > .card .meta:hover { border-color: color-mix(in srgb, var(--dipav-purple) 55%, var(--border)); } html.tm-html.tm-prog-encanto main.grid > .card .meta:hover { border-color: color-mix(in srgb, var(--encanto-brown) 50%, var(--border)); } html.tm-html.tm-prog-talentos .subtitle strong { color: #a78bfa; } html.tm-html.tm-prog-encanto .progressBar { background: linear-gradient(90deg, var(--encanto-red), var(--encanto-brown)); } html.tm-html.tm-prog-talentos .progressBar { background: linear-gradient(90deg, var(--dipav-purple), var(--dipav-blue)); } html.tm-html.tm-prog-misamores .checkRow:focus-within, html.tm-html.tm-prog-talentos .checkRow:focus-within { outline: 2px solid color-mix(in srgb, var(--dipav-blue) 70%, transparent); outline-offset: 2px; } html.tm-html.tm-prog-encanto .checkRow:focus-within { outline: 2px solid color-mix(in srgb, var(--encanto-brown) 75%, transparent); outline-offset: 2px; } @media (max-width: 900px) { html.tm-html.tm-prog-dipav header, html.tm-html.tm-prog-encanto header, html.tm-html.tm-prog-misamores header, html.tm-html.tm-prog-talentos header { padding: 0.75rem 1rem; } } @media (min-width: 768px) and (max-width: 900px) { html.tm-html.tm-prog-dipav header, html.tm-html.tm-prog-encanto header, html.tm-html.tm-prog-misamores header, html.tm-html.tm-prog-talentos header { padding: 0.85rem 1.25rem; } } @media (max-width: 640px) { html.tm-html.tm-prog-encanto body > .wrap, html.tm-html.tm-prog-talentos body > .wrap { padding: 16px 14px 32px; } html.tm-html.tm-prog-encanto .cardInner, html.tm-html.tm-prog-talentos .cardInner { padding: 22px 18px 28px; } } html.tm-html .tm-step-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; } html.tm-html .tm-step-actions.tm-step-actions--end { justify-content: flex-end; } @media (max-width: 520px) { html.tm-html .tm-under-meta-actions { grid-template-columns: 1fr; } } @media (max-width: 640px) { html.tm-html .tm-form-header { flex-direction: column; align-items: stretch; } html.tm-html .tm-step-badge { align-self: flex-start; } html.tm-html .tm-step-actions { flex-direction: column-reverse; } html.tm-html .tm-step-actions .btn { width: 100%; } } /* Modal de precios (compartido; colores por programa en el panel) */ html.tm-html .tm-precios-modal .tm-landing-precios-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; } html.tm-html .tm-precios-modal .tm-landing-precios-table th, html.tm-html .tm-precios-modal .tm-landing-precios-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } html.tm-html .tm-precios-modal .tm-landing-precios-note { font-size: 12px; line-height: 1.5; margin: 14px 0 0; text-align: center; opacity: 0.9; } html.tm-html.tm-prog-misamores .tm-precios-modal .tm-landing-precios-note { color: var(--muted); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-note, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-note { color: rgba(255, 255, 255, 0.72); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .modal-content { background: linear-gradient(165deg, #ffffff 0%, #faf6f4 100%); border-color: rgba(221, 150, 175, 0.45); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .close-modal { background: rgba(221, 150, 175, 0.2); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .close-modal:hover { background: var(--dipav-purple); color: #fff; } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .tm-precios-modal-title { color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .tm-landing-precios-table th, html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal .tm-landing-precios-table td { color: var(--ink); border-bottom-color: rgba(221, 150, 175, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .modal-content, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .modal-content.tm-precios-panel { background: linear-gradient(165deg, #ffffff 0%, var(--encanto-cream) 100%); border-color: rgba(212, 168, 92, 0.45); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .close-modal { background: rgba(212, 168, 92, 0.22); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .close-modal:hover { background: var(--encanto-red); color: #fff; } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .tm-precios-modal-title { color: var(--encanto-brown); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .tm-landing-precios-table th, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .tm-landing-precios-table td { color: var(--ink); border-bottom-color: rgba(212, 168, 92, 0.22); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .modal-content, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .modal-content.tm-precios-panel { background: linear-gradient(165deg, #ffffff 0%, #f5f3ff 100%); border-color: rgba(139, 92, 246, 0.35); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .close-modal { background: rgba(139, 92, 246, 0.16); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .close-modal:hover { background: var(--talentos-violet, #7c3aed); color: #fff; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .tm-precios-modal-title { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .tm-landing-precios-table th, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .tm-landing-precios-table td { color: var(--ink); border-bottom-color: rgba(139, 92, 246, 0.2); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal .tm-landing-precios-note, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal .tm-landing-precios-note { color: var(--muted); } html.tm-html.tm-prog-misamores .tm-precios-modal .tm-precios-membresia-box { background: rgba(221, 150, 175, 0.12); border-color: rgba(54, 201, 203, 0.35); } html.tm-html.tm-prog-misamores .tm-precios-modal .tm-precios-membresia-val { color: var(--dipav-purple); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .modal-content, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .modal-content.tm-precios-panel { background: linear-gradient(165deg, #2a1c14 0%, #1a1210 100%); border-color: rgba(200, 129, 34, 0.4); color: #fff8ef; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .modal-content, html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .modal-content.tm-precios-panel { background: linear-gradient(165deg, #2a1c5c 0%, #120a28 100%); border-color: rgba(125, 66, 233, 0.35); color: var(--talentos-ink, #f5f3ff); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-modal .close-modal { background: rgba(221, 150, 175, 0.2); color: var(--ink); } html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-modal .close-modal:hover { background: var(--dipav-purple); color: #fff; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .close-modal { background: rgba(255, 255, 255, 0.1); color: #fff; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .close-modal:hover { background: var(--encanto-red); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .close-modal { background: rgba(255, 255, 255, 0.1); color: #fff; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .close-modal:hover { background: var(--dipav-purple, #7c3aed); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .tm-precios-membresia-val { color: #fca5a5; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .tm-precios-membresia-val { color: #e9d5ff; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-table th, html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-table td, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-table th, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal .tm-landing-precios-table td { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.08); } /* Modales informativos → 07-components/landing-modals.css */ /* Tridente: modal de precios — tarjetas (diseño unificado; referencia Mis Amores) */ html.tm-html .tm-precios-modal.tm-precios-sheet .modal-content.tm-precios-panel { max-width: 440px; padding: 24px 20px 22px; } html.tm-html .tm-precios-modal-title { text-align: center; padding-right: 28px; margin: 0 0 10px; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; } html.tm-html .tm-precios-lead { text-align: center; font-size: 14px; line-height: 1.5; margin: 0 0 14px; } html.tm-html .tm-precios-highlight { font-weight: 900; } html.tm-html .tm-precios-membresia { text-align: center; padding: 16px; border-radius: 18px; margin-bottom: 16px; border: 1px solid var(--border, rgba(15, 23, 42, 0.12)); background: rgba(15, 23, 42, 0.03); } html.tm-html .tm-precios-membresia-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 6px; } html.tm-html .tm-precios-membresia-v { font-size: 1.35rem; font-weight: 900; } html.tm-html .tm-precios-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; } html.tm-html .tm-precios-rates { display: grid; gap: 10px; } html.tm-html .tm-precios-rate-card { border-radius: 16px; padding: 14px; border: 1px solid var(--border, rgba(15, 23, 42, 0.1)); background: rgba(255, 255, 255, 0.04); } html.tm-html .tm-precios-rate-name { margin: 0 0 10px; font-size: 15px; font-weight: 900; } html.tm-html .tm-precios-rate-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html.tm-html .tm-precios-rate-col { border-radius: 12px; padding: 10px; background: rgba(15, 23, 42, 0.04); } html.tm-html .tm-precios-rate-col--miembro { border: 1px solid var(--border, rgba(15, 23, 42, 0.1)); } html.tm-html .tm-precios-rate-k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; margin-bottom: 4px; } html.tm-html .tm-precios-rate-v { display: block; font-size: 15px; font-weight: 900; } /* Mis Amores — panel precios claro (solo data-theme=light; oscuro → bloque :not arriba) */ html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-modal-title { color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-lead { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-highlight { color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-membresia { background: rgba(221, 150, 175, 0.12); border: 1px solid rgba(54, 201, 203, 0.35); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-membresia-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-membresia-v { color: var(--dipav-purple); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-section-label { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-card { background: #fff; border: 1px solid rgba(221, 150, 175, 0.28); box-shadow: 0 6px 16px rgba(42, 69, 73, 0.05); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-name { color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-col { background: rgba(42, 69, 73, 0.04); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-col--miembro { background: linear-gradient(145deg, rgba(221, 150, 175, 0.14), rgba(54, 201, 203, 0.12)); border: 1px solid rgba(54, 201, 203, 0.25); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-rate-v { color: var(--ink); } /* Encanto — panel precios claro (solo data-theme=light) */ html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-modal-title { color: var(--encanto-brown); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-lead { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-highlight { color: var(--encanto-gold); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-membresia { background: rgba(212, 168, 92, 0.12); border: 1px solid rgba(196, 30, 58, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-membresia-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-membresia-v { color: var(--encanto-gold); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-section-label { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-card { background: #fff; border: 1px solid rgba(212, 168, 92, 0.28); box-shadow: 0 6px 16px rgba(28, 20, 16, 0.05); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-name { color: var(--encanto-brown); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-col { background: rgba(28, 20, 16, 0.04); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-col--miembro { background: linear-gradient(145deg, rgba(212, 168, 92, 0.14), rgba(196, 30, 58, 0.08)); border: 1px solid rgba(200, 129, 34, 0.28); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-rate-v { color: var(--ink); } /* Talentos — panel precios claro (solo data-theme=light) */ html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-modal-title { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-lead { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-highlight { color: var(--talentos-teal, #0f766e); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-membresia { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(94, 234, 212, 0.32); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-membresia-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-membresia-v { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-section-label { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-card { background: #fff; border: 1px solid rgba(139, 92, 246, 0.24); box-shadow: 0 6px 16px rgba(30, 27, 75, 0.05); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-name { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-col { background: rgba(15, 23, 42, 0.04); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-col--miembro { background: linear-gradient(145deg, rgba(139, 92, 246, 0.12), rgba(94, 234, 212, 0.1)); border: 1px solid rgba(94, 234, 212, 0.28); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-k { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-v { color: var(--ink); } /* Talentos — panel precios oscuro (solo sin data-theme=light) */ html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal-title { color: #fff; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-lead { color: rgba(255, 255, 255, 0.72); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-highlight { color: #67ddd0; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-membresia { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(125, 66, 233, 0.35); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-membresia-k { color: rgba(255, 255, 255, 0.55); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-membresia-v { color: #e9d5ff; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-section-label { color: rgba(255, 255, 255, 0.5); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(125, 66, 233, 0.28); box-shadow: none; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-name { color: #c4b5fd; } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-col { background: rgba(0, 0, 0, 0.25); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-col--miembro { background: rgba(125, 66, 233, 0.14); border: 1px solid rgba(103, 221, 208, 0.28); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-k { color: rgba(255, 255, 255, 0.5); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-rate-v { color: #fff; } /* Encanto — panel precios oscuro cálido */ html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal-title { color: #fff; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-lead { color: rgba(255, 255, 255, 0.72); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-highlight { color: var(--encanto-gold); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-membresia { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(200, 129, 34, 0.35); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-membresia-k { color: rgba(255, 255, 255, 0.55); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-membresia-v { color: var(--encanto-gold); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-section-label { color: rgba(255, 255, 255, 0.5); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(200, 129, 34, 0.28); box-shadow: none; } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-name { color: var(--encanto-gold-soft); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-col { background: rgba(0, 0, 0, 0.25); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-col--miembro { background: rgba(200, 129, 34, 0.12); border: 1px solid rgba(225, 29, 72, 0.22); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-k { color: rgba(255, 255, 255, 0.5); } html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-rate-v { color: #fff; } @media (max-width: 640px) { /* Estructura overlay/panel → landing-modals.css (.modal-overlay.tm-precios-modal.tm-precios-sheet) */ html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-precios-modal.tm-precios-sheet { background: rgba(42, 69, 73, 0.38); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .tm-precios-modal.tm-precios-sheet, html.tm-html.tm-prog-encanto:not([data-theme="light"]) .tm-precios-modal.tm-precios-sheet { background: rgba(10, 8, 12, 0.42); } html.tm-html .tm-precios-rate-cols { grid-template-columns: 1fr; } } /* Tridente: galería — proporción y encuadre (evita cortar rostros con height fijo) */ html.tm-html .tm-landing-gallery { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } html.tm-html .tm-landing-gallery .photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } html.tm-html .tm-landing-gallery .ph { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.25s ease; } html.tm-html .tm-landing-gallery .ph img { width: 100%; height: auto; display: block; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 22%; } html.tm-html .tm-landing-gallery .ph .cap { padding: 12px; font-size: 11px; font-weight: 800; text-align: center; } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-landing-gallery .ph { display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 0 color-mix(in srgb, var(--tm-brand-mis-amores) 38%, transparent), 0 12px 32px rgba(42, 69, 73, 0.07); border: 1px solid color-mix(in srgb, var(--tm-brand-mis-amores) 32%, rgba(42, 69, 73, 0.1)); } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-landing-gallery .ph:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tm-brand-mis-amores) 48%, rgba(42, 69, 73, 0.12)); box-shadow: 0 1px 0 color-mix(in srgb, var(--tm-brand-mis-amores) 52%, transparent), 0 18px 42px rgba(42, 69, 73, 0.1); } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-landing-gallery .ph img, html.tm-html.tm-prog-misamores:not([data-theme="light"]) .tm-landing-gallery .ph img { flex: 0 0 auto; } html.tm-html.tm-prog-misamores[data-theme="light"] .tm-landing-gallery .ph .cap { flex: 0 0 auto; margin: 0; padding: 14px 14px 17px; font-size: clamp(12px, 1.05vw, 13px); font-weight: 600; line-height: 1.42; letter-spacing: 0.01em; text-align: center; text-wrap: balance; color: color-mix(in srgb, var(--ink) 90%, var(--tm-brand-mis-amores) 10%); background: linear-gradient( 180deg, color-mix(in srgb, var(--tm-brand-mis-amores) 16%, #fff) 0%, color-mix(in srgb, var(--tm-brand-mis-amores) 7%, #faf7f6) 100% ); border-top: 1px solid color-mix(in srgb, var(--tm-brand-mis-amores) 42%, transparent); } html.tm-html.tm-prog-talentos .tm-landing-gallery .ph { display: flex; flex-direction: column; background: rgba(8, 4, 24, 0.55); border: 1px solid color-mix(in srgb, var(--talentos-violet) 34%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--talentos-violet) 28%, transparent), var(--shadow-soft); } html.tm-html.tm-prog-talentos .tm-landing-gallery .ph:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--talentos-violet) 48%, transparent); } html.tm-html.tm-prog-talentos .tm-landing-gallery .ph img { flex: 0 0 auto; } html.tm-html.tm-prog-talentos .tm-landing-gallery .ph .cap { flex: 0 0 auto; margin: 0; padding: 14px 14px 16px; font-size: clamp(12px, 1.05vw, 13px); font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; text-align: center; text-wrap: balance; color: var(--talentos-ink); background: linear-gradient( 180deg, color-mix(in srgb, var(--talentos-violet) 18%, rgba(8, 4, 24, 0.92)) 0%, color-mix(in srgb, var(--talentos-teal) 10%, rgba(8, 4, 24, 0.96)) 100% ); border-top: 1px solid color-mix(in srgb, var(--talentos-violet) 32%, transparent); } html.tm-html.tm-prog-encanto .tm-landing-gallery .ph { display: flex; flex-direction: column; background: rgba(20, 14, 10, 0.45); border: 1px solid color-mix(in srgb, var(--encanto-brown) 35%, transparent); } html.tm-html.tm-prog-encanto .tm-landing-gallery .ph:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--encanto-gold) 48%, transparent); } html.tm-html.tm-prog-encanto .tm-landing-gallery .ph img { flex: 0 0 auto; } html.tm-html.tm-prog-encanto .tm-landing-gallery .ph .cap { flex: 0 0 auto; margin: 0; padding: 14px 14px 16px; font-size: clamp(12px, 1.05vw, 13px); font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; text-align: center; text-wrap: balance; color: var(--encanto-cream); background: linear-gradient( 180deg, color-mix(in srgb, var(--encanto-brown) 18%, rgba(20, 14, 10, 0.92)) 0%, color-mix(in srgb, var(--encanto-red) 10%, rgba(20, 14, 10, 0.96)) 100% ); border-top: 1px solid color-mix(in srgb, var(--encanto-brown) 32%, transparent); } @media (max-width: 980px) { html.tm-html .tm-landing-gallery .photos { grid-template-columns: 1fr; gap: 16px; } html.tm-html .tm-landing-gallery .ph img { aspect-ratio: 4 / 3; object-position: center 18%; } } /* Encanto: UX visual — calidez y jerarquía sin perder identidad */ html.tm-html.tm-prog-encanto .title { background: linear-gradient( 118deg, #fff8ef 0%, var(--encanto-gold) 38%, #f0d4b8 72%, var(--encanto-cream) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } html.tm-html.tm-prog-encanto .subtitle { color: color-mix(in srgb, var(--encanto-rose-soft) 55%, var(--muted)); } html.tm-html.tm-prog-encanto .subtitle strong { color: var(--encanto-gold); font-weight: 800; } html.tm-html.tm-prog-encanto .meta:hover { border-color: color-mix(in srgb, var(--encanto-gold) 55%, var(--border)); background: rgba(212, 168, 92, 0.11); } html.tm-html.tm-prog-encanto .note { border-color: color-mix(in srgb, var(--encanto-brown) 40%, transparent); background: rgba(212, 168, 92, 0.1); color: var(--ink); } html.tm-html.tm-prog-encanto .btnSecondary { background: rgba(255, 248, 240, 0.07); border-color: color-mix(in srgb, var(--encanto-brown) 48%, transparent); color: var(--ink); } html.tm-html.tm-prog-encanto .btnSecondary:hover { background: rgba(212, 168, 92, 0.14); border-color: var(--encanto-gold-soft); color: #fff; } html.tm-html.tm-prog-encanto .progressBar { background: linear-gradient(90deg, var(--encanto-brown), var(--encanto-red)); } html.tm-html.tm-prog-encanto .progressTrack { background: rgba(255, 248, 240, 0.1); } html.tm-html.tm-prog-encanto .checkRow:has(input:checked) { border-color: var(--encanto-gold-soft); background: rgba(212, 168, 92, 0.12); } html.tm-html.tm-prog-encanto .checkRow input[type="checkbox"] { accent-color: var(--encanto-gold); } html.tm-html.tm-prog-encanto #termsLink { color: var(--encanto-gold-soft); } html.tm-html.tm-prog-encanto #termsLink:hover { color: var(--encanto-rose-soft); } html.tm-html.tm-prog-encanto .tm-step-badge { background: linear-gradient(145deg, #9a3412, var(--encanto-brown)); color: #fff; box-shadow: 0 2px 8px rgba(8, 5, 4, 0.25); } html.tm-html.tm-prog-encanto a { color: var(--encanto-gold-soft); } html.tm-html.tm-prog-encanto a:hover { color: var(--encanto-rose-soft); } /* Talentos: UX visual — púrpura DIPAV + acento turquesa (misma jerarquía que Encanto) */ html.tm-html.tm-prog-talentos .title { background: linear-gradient( 118deg, #fefce8 0%, var(--talentos-violet-soft) 38%, var(--talentos-violet) 62%, var(--talentos-teal) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } html.tm-html.tm-prog-talentos .subtitle { color: var(--talentos-violet-soft); font-weight: 600; } html.tm-html.tm-prog-talentos .subtitle strong { color: var(--talentos-teal); font-weight: 800; } html.tm-html.tm-prog-talentos .meta:hover { border-color: color-mix(in srgb, var(--talentos-violet) 60%, var(--border)); background: rgba(139, 92, 246, 0.1); } html.tm-html.tm-prog-talentos .note { border: 1px solid rgba(139, 92, 246, 0.28); background: rgba(139, 92, 246, 0.1); color: var(--talentos-violet-soft); } html.tm-html.tm-prog-talentos .btnSecondary { background: rgba(167, 139, 250, 0.1); border: 1px solid color-mix(in srgb, var(--talentos-violet) 38%, transparent); color: #fff; } html.tm-html.tm-prog-talentos .btnSecondary:hover { background: rgba(167, 139, 250, 0.18); border-color: var(--talentos-violet); } html.tm-html.tm-prog-talentos .progressBar { background: linear-gradient(90deg, var(--talentos-violet), var(--talentos-teal)); } html.tm-html.tm-prog-talentos .progressTrack { background: rgba(167, 139, 250, 0.1); } html.tm-html.tm-prog-talentos .checkRow:has(input:checked) { border-color: var(--talentos-violet); background: rgba(139, 92, 246, 0.1); } html.tm-html.tm-prog-talentos .checkRow input[type="checkbox"] { accent-color: var(--talentos-violet); } html.tm-html.tm-prog-talentos #termsLink { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos #termsLink:hover { color: var(--talentos-violet-soft); } html.tm-html.tm-prog-talentos a { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos a:hover { color: var(--talentos-violet-soft); } html.tm-html.tm-prog-talentos .card input:focus, html.tm-html.tm-prog-talentos .card select:focus, html.tm-html.tm-prog-talentos .card textarea:focus { border-color: var(--talentos-violet); background: rgba(8, 4, 24, 0.55); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18); } html.tm-html.tm-prog-encanto input:focus, html.tm-html.tm-prog-encanto select:focus, html.tm-html.tm-prog-encanto textarea:focus { border-color: var(--encanto-gold-soft); background: rgba(12, 8, 6, 0.42); box-shadow: 0 0 0 4px rgba(212, 168, 92, 0.2); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .card a:not(#termsLink):not(.tm-precio-inline-link):not(.tm-link-precios) { color: var(--talentos-teal-soft); } html.tm-html.tm-prog-talentos:not([data-theme="light"]) .card a:not(#termsLink):not(.tm-precio-inline-link):not(.tm-link-precios):hover { color: #a5f3fc; } html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-precio-inline-link, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-link-precios { color: #1e1b4b; font-weight: 700; } html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-precio-inline-link:hover, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-link-precios:hover { color: #6d28d9; } html.tm-html.tm-prog-talentos .tal-nd-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } html.tm-html.tm-prog-talentos .card label { color: var(--muted); } html.tm-html.tm-prog-talentos .helper-text { color: color-mix(in srgb, var(--muted) 88%, transparent); } html.tm-html.tm-prog-talentos .tal-nd-lead { font-size: 11px; color: var(--muted); margin: 4px 0 10px; line-height: 1.35; font-weight: 600; } html.tm-html.tm-prog-talentos .nd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } html.tm-html.tm-prog-talentos .nd-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } html.tm-html.tm-prog-talentos .nd-card:hover { background: rgba(255, 255, 255, 0.06); } html.tm-html.tm-prog-talentos .nd-card:has(input:checked) { border-color: var(--talentos-violet); background: rgba(139, 92, 246, 0.12); } html.tm-html.tm-prog-talentos .nd-card input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--talentos-violet); } html.tm-html.tm-prog-talentos .nd-card label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; flex-grow: 1; } html.tm-html.tm-prog-talentos #nd-otro-box { display: none; margin-top: 10px; } html.tm-html.tm-prog-talentos #nd-otro-box.show { display: block; animation: tmTalNdFade 0.3s ease; } @keyframes tmTalNdFade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } html.tm-html.tm-prog-talentos .tal-success-box { display: none; margin-top: 20px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 10%, var(--card-bg, #fff)); border: 1px solid color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 28%, transparent); border-radius: 18px; } html.tm-html.tm-prog-talentos .tal-success-box h3 { margin: 0 0 10px; font-size: 20px; font-weight: 900; color: var(--ink, #f5f3ff); } html.tm-html.tm-prog-talentos .tal-success-box p { font-size: 14px; margin: 0 0 20px; color: var(--muted, rgba(255, 255, 255, 0.85)); } /* ─── Index: Ruta de aprendizaje — colores oficiales por programa (claro y oscuro) ─── */ #comparacion .progPathCard[data-prog="misamores"] { --path-primary: var(--tm-brand-mis-amores); --path-secondary: var(--tm-path-misamores-secondary); } #comparacion .progPathCard[data-prog="talentos"] { --path-primary: var(--tm-brand-talentos); --path-secondary: var(--tm-path-talentos-secondary); } #comparacion .progPathCard[data-prog="encanto"] { --path-primary: var(--tm-brand-encanto); --path-secondary: var(--tm-path-encanto-secondary); } #comparacion .progPathCard[data-prog="dipav"] { --path-primary: var(--tm-path-dipav-primary); --path-secondary: var(--tm-path-dipav-secondary); } #comparacion .progPathStep { background: linear-gradient( 135deg, var(--path-primary, var(--accent)) 0%, var(--path-secondary, var(--muted)) 100% ); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--path-primary, var(--accent)) 35%, transparent); } #comparacion .comparePill { background: color-mix(in srgb, var(--path-primary, var(--accent)) 12%, transparent); color: var(--path-primary, var(--accent)); border-color: color-mix(in srgb, var(--path-primary, var(--accent)) 32%, transparent); } #comparacion .progPathDl dt { color: var(--path-secondary, var(--muted)); } #comparacion .compareLink { color: var(--path-primary, var(--accent)); } #comparacion .compareLink:hover { color: var(--path-secondary, var(--text)); } /* ===== css/tm-essence/05-theme-light.css ===== */ /** * Tema claro — segundo baseline del sistema TMM (no “modo nocturno”). * Activo con (ver siteTheme-init.js). * * Paleta neutra inspirada en apple.com: * canvas #FBFBFD · surface #FFFFFF · text #1D1D1F · muted #6E6E73 * Validada para WCAG AA en cuerpo, AAA en titulares. * * Solo remapeamos --tm-role-* (y sombras). Primitivos --tm-gold y marcas * de programa se conservan para mantener identidad cromática. */ html[data-theme="light"] { color-scheme: light; font-family: var(--tm-font-sans); /* Superficies — escala neutra más clara (marketing index / EMUSINI / cápsulas) */ --tm-role-canvas: #ffffff; --tm-role-surface: #ffffff; --tm-role-surface-elevated: #fafafc; --tm-role-section-alt: #f8f8fc; /* Tinta — texto principal casi negro (#1D1D1F evita vibración óptica) */ --tm-role-text-primary: #1d1d1f; --tm-role-text-secondary: #424245; --tm-role-text-muted: #6e6e73; --tm-role-text-disabled: #a1a1a6; /* Bordes */ --tm-role-border-subtle: rgba(15, 23, 42, 0.10); --tm-role-border-strong: rgba(15, 23, 42, 0.18); /* Acento institucional: oro reservado a CTA / branding */ --tm-role-accent-dim: rgba(212, 175, 55, 0.18); --tm-role-accent-ink: #0a0a0a; --tm-role-vignette-body: none; --tm-role-ink-canvas-mix: #fafafc; --tm-role-surface-glass: rgba(255, 255, 255, 0.94); --tm-role-surface-glass-hover: #f5f5f7; --tm-role-surface-landing-card: rgba(255, 255, 255, 0.92); --tm-role-overlay-on-canvas-12: rgba(15, 23, 42, 0.08); --tm-role-border-on-dark-10: rgba(15, 23, 42, 0.08); --tm-role-border-on-dark-12: rgba(15, 23, 42, 0.12); --tm-vignette-index-radial-end: transparent; --tm-vignette-index-top: rgb(255 255 255 / 0.28); --tm-vignette-index-fade: rgb(255 255 255 / 0); --tm-vignette-index-bottom: rgb(255 255 255 / 0.22); /* Estados (refinados para WCAG AA sobre canvas claro) */ --tm-role-success: #067647; --tm-role-error: #b42318; /* Sombras suaves Apple-style (alineadas con 01c-tokens-space.css) */ --tm-shadow-ambient-50: rgba(15, 23, 42, 0.12); --tm-shadow-ambient-45: rgba(15, 23, 42, 0.14); --tm-shadow-ambient-40: rgba(15, 23, 42, 0.10); --tm-shadow-ambient-30: rgba(15, 23, 42, 0.08); --tm-shadow-accent-glow: rgba(212, 175, 55, 0.32); --tm-elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.04); --tm-elev-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --tm-elev-3: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04); --tm-elev-4: 0 24px 56px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); /* Hero: velo suave arriba (nav legible) sin lavar la foto detrás */ --gradient-hero-overlay: linear-gradient( 180deg, color-mix(in srgb, var(--tm-role-canvas) 22%, transparent) 0%, color-mix(in srgb, var(--tm-role-canvas) 8%, transparent) 32%, color-mix(in srgb, var(--tm-role-canvas) 10%, transparent) 52%, color-mix(in srgb, var(--tm-role-canvas) 32%, transparent) 100% ); } /* Index, EMUSINI (/inteligencia-musical) y cápsulas — base más clara, viñeta muy suave */ html[data-theme="light"] body.index-home, html[data-theme="light"] body.emusini-page, html[data-theme="light"] body.tm-marketing-page { background-color: #ffffff; background-image: var(--gradient-body-vignette-index-home); } /* Cabecera index — barra sólida; logo sin cápsula doble sobre foto nublada */ html[data-theme="light"] .heroNavShell { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .heroNav { background: var(--tm-role-surface); border: 1px solid var(--tm-role-border-subtle); box-shadow: var(--tm-elev-1); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .heroNav .brandLogo { background: transparent; box-shadow: none; padding: 0; border-radius: 0; } html[data-theme="light"] .heroNav .brandLogo img { filter: contrast(1.04); } html[data-theme="light"] .mobileNav { background: var(--tm-role-surface); border-bottom-color: var(--tm-role-border-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--tm-elev-1); } html[data-theme="light"] .mobileNavLogo img { background: transparent; padding: 0; border-radius: 0; box-shadow: none; } html[data-theme="light"] .heroNav .navLinks a { color: var(--tm-role-text-primary); } html[data-theme="light"] .heroNav .navLinks a:hover { color: var(--tm-role-accent); } html[data-theme="light"] .heroMedia { filter: saturate(1.08) contrast(1.02); } /* Hero index: foto oscura → titular y subtítulos en blanco (tema claro del sitio) */ html[data-theme="light"] .heroContent h1, html[data-theme="light"] .heroTagline { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38); } html[data-theme="light"] .heroSub { color: rgba(248, 250, 252, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); } html[data-theme="light"] .mobileNav { background: var(--tm-role-surface); color: var(--tm-role-text-primary); } html[data-theme="light"] .mobileNav a { color: var(--tm-role-text-primary); } /* Footer invertido → reglas en 07-components/section.css */ /* Componentes PR-3 — refuerzos en claro */ html[data-theme="light"] .section.alt, html[data-theme="light"] .section--alt { background: color-mix(in srgb, var(--tm-role-section-alt) 38%, var(--tm-role-canvas)); } html[data-theme="light"] .benefit, html[data-theme="light"] .capsCard, html[data-theme="light"] .card { border-color: var(--tm-role-border-strong); } /* Soundboard — tarjetas de instrumentos */ html[data-theme="light"] #descubre .sbCard { background: var(--tm-role-surface); border-color: var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } html[data-theme="light"] #descubre .sbArrow { background: var(--tm-role-surface); border-color: var(--tm-role-border-strong); color: var(--tm-role-text-primary); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--tm-elev-1); } html[data-theme="light"] #descubre .sbArrow:hover { background: var(--tm-role-text-primary); border-color: var(--tm-role-text-primary); color: var(--tm-role-surface); box-shadow: var(--tm-elev-2); } html[data-theme="light"] #descubre .sbArrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } html[data-theme="light"] #descubre .sbCard:hover { background: var(--tm-role-surface-elevated); border-color: var(--tm-role-border-strong); box-shadow: var(--tm-elev-3); } html[data-theme="light"] #descubre .sbCard:hover img { filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.12)); } html[data-theme="light"] #descubre .sbCard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-color: var(--accent); } html[data-theme="light"] #descubre .sbTitle { color: var(--tm-role-text-primary); } html[data-theme="light"] #descubre .sbDesc { color: var(--tm-role-text-secondary); } html[data-theme="light"] #descubre .sbTag { background: rgba(212, 175, 55, 0.14); border-color: rgba(212, 175, 55, 0.45); color: #8a6914; } /* Facultad — bicolor: oro institucional (rol/enlaces) + pizarra (chips) */ html[data-theme="light"] #facultad .facultyRole, html[data-theme="light"] #facultad .facultyRole.ceo, html[data-theme="light"] .facultyModal__role { color: #8a6914; } html[data-theme="light"] #facultad .facultyChips li, html[data-theme="light"] .facultyModal .facultyChips li { border-color: var(--tm-role-border-strong); background: var(--tm-role-surface-elevated); color: var(--tm-role-text-secondary); } html[data-theme="light"] #facultad .facultyReadMore { color: var(--accent); } html[data-theme="light"] #facultad .facultyReadMore:focus-visible { outline-color: var(--accent); } html[data-theme="light"] #facultad .facultyDesc--lead strong, html[data-theme="light"] #facultad .facultyScrollHint span { color: var(--accent); } html[data-theme="light"] #facultad .facultyTeamScroll:focus-visible { outline-color: var(--tm-role-border-strong); } /* Ruta de aprendizaje — superficie clara; colores de marca en 04-program-accents */ html[data-theme="light"] #comparacion .progPathCard { background: var(--tm-role-surface); border-color: var(--tm-role-border-strong); border-left-color: var(--path-primary, var(--accent)); border-top-color: color-mix(in srgb, var(--path-primary, var(--accent)) 52%, transparent); box-shadow: var(--tm-elev-1); } html[data-theme="light"] #comparacion .progPathSubtitle { color: var(--tm-role-text-primary); } html[data-theme="light"] #comparacion .progPathDl dd { color: var(--tm-role-text-muted); } html[data-theme="light"] #comparacion .progPathScrollHint span { color: var(--accent); } html[data-theme="light"] #comparacion .progPathGrid:focus-visible { outline-color: var(--tm-role-border-strong); } /* Ingreso simple y transparente — foto visible, velo nublado suave (equilibrado) */ html[data-theme="light"] #como-funciona .how { background: color-mix(in srgb, var(--tm-role-section-alt) 18%, transparent); border-color: color-mix(in srgb, var(--tm-role-border-strong) 60%, transparent); box-shadow: var(--tm-elev-2); isolation: isolate; } html[data-theme="light"] #como-funciona .how::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--tm-role-surface) 34%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html[data-theme="light"] #como-funciona .howBg { opacity: 1; filter: saturate(1.04) contrast(1.01); } html[data-theme="light"] #como-funciona .howBg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, color-mix(in srgb, var(--tm-role-canvas) 22%, transparent) 0%, color-mix(in srgb, var(--tm-role-canvas) 6%, transparent) 45%, color-mix(in srgb, var(--tm-role-canvas) 12%, transparent) 100% ); pointer-events: none; } html[data-theme="light"] #como-funciona .howInner { z-index: 2; } html[data-theme="light"] #como-funciona .howTitle p { color: var(--tm-role-text-secondary); } html[data-theme="light"] #como-funciona .steps:not(.steps--timeline) > .step { background: color-mix(in srgb, var(--tm-role-surface) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } html[data-theme="light"] #como-funciona .step p { color: var(--tm-role-text-muted); } html[data-theme="light"] .emusini-antidote, html[data-theme="light"] .emusini-antidote--callout { background: color-mix(in srgb, var(--tm-role-surface) 88%, var(--tm-role-canvas)); border-color: var(--tm-role-border-subtle); } html[data-theme="light"] .emusini-prog-card { background: var(--tm-role-surface); border-color: var(--tm-role-border-subtle); box-shadow: var(--tm-elev-1); } html[data-theme="light"] .emusini-ecosystem { background: transparent; } /* --- Landings inscripción --- */ html[data-theme="light"].tm-html.tm-prog-talentos { --bg: color-mix(in srgb, var(--tm-role-canvas) 90%, #5b21b6); --ink: var(--tm-role-text-primary); --muted: var(--tm-role-text-muted); --border: var(--tm-role-border-strong); --card-bg: var(--tm-role-surface-landing-card); --input-bg: rgba(15, 23, 42, 0.05); --input-border: var(--tm-role-border-subtle); --shadow: var(--tm-elev-3); --shadow-soft: var(--tm-elev-1); --talentos-teal: #0f766e; --tm-precio-accent: #5b21b6; } html[data-theme="light"].tm-html.tm-prog-talentos body { background: radial-gradient(at 10% 0%, rgba(91, 33, 182, 0.11) 0px, transparent 52%), radial-gradient(at 90% 8%, rgba(94, 234, 212, 0.05) 0px, transparent 45%), radial-gradient(at 50% 100%, rgba(76, 29, 149, 0.09) 0px, transparent 55%), var(--bg); } html[data-theme="light"].tm-html.tm-prog-talentos .card { color: var(--ink); border-color: rgba(139, 92, 246, 0.22); } html[data-theme="light"].tm-html.tm-prog-talentos select, html[data-theme="light"].tm-html.tm-prog-talentos select option { background: #fff; color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__legend, html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion .label-text, html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion .label-text strong { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__footer .helper-text { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta { background: rgba(139, 92, 246, 0.05); border-color: rgba(139, 92, 246, 0.18); } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta .k { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta:nth-child(1) .k { color: #5b21b6; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta:nth-child(2) .k { color: #0f766e; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta:nth-child(3) .k { color: #7c3aed; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta:nth-child(4) .k { color: #115e59; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta .v { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta .v #tal-precio-mensual-desde { color: #5b21b6; } html[data-theme="light"].tm-html.tm-prog-talentos .card .meta .v .tm-meta-mensual-nota { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-talentos .title { background: linear-gradient(118deg, #1e1b4b 0%, #6d28d9 45%, #0f766e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"].tm-html.tm-prog-talentos .subtitle { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-talentos .subtitle strong { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .btnSecondary { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.32); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .btnSecondary:hover { background: rgba(139, 92, 246, 0.14); border-color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos a.tm-link-precios, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precio-inline-link, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-link-precios, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-precio-inline-link { color: #1e1b4b; font-weight: 700; } html[data-theme="light"].tm-html.tm-prog-talentos a.tm-link-precios:hover, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precio-inline-link:hover, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-link-precios:hover, html[data-theme="light"].tm-html.tm-prog-talentos .card a.tm-precio-inline-link:hover { color: #6d28d9; filter: none; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precio-tier--miembro .tm-precio-tier__hero, html[data-theme="light"].tm-html.tm-prog-talentos .tm-precio-tier--miembro .tm-precio-tier__hero-amount { color: #5b21b6; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-rate-col--miembro .tm-precios-rate-v { color: #5b21b6; font-weight: 800; } html[data-theme="light"].tm-html.tm-prog-talentos .tal-success-box { background: #f5f3ff; border: 1px solid rgba(109, 40, 217, 0.32); } html[data-theme="light"].tm-html.tm-prog-talentos .tal-success-box h3 { color: #5b21b6; } html[data-theme="light"].tm-html.tm-prog-talentos .tal-success-box p { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .progressBar { background: linear-gradient(90deg, #6d28d9, #0f766e); } html[data-theme="light"].tm-html.tm-prog-talentos .progressTrack { background: rgba(15, 23, 42, 0.08); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-landing-gallery .ph { background: #fff; border-color: rgba(139, 92, 246, 0.22); box-shadow: 0 1px 0 rgba(139, 92, 246, 0.12), 0 12px 28px rgba(15, 23, 42, 0.06); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-landing-gallery .ph:hover { border-color: rgba(109, 40, 217, 0.32); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-landing-gallery .ph .cap { color: var(--tm-role-text-primary); background: linear-gradient( 180deg, color-mix(in srgb, #8b5cf6 12%, #f5f3ff) 0%, #fff 100% ); border-top: 1px solid rgba(139, 92, 246, 0.18); font-weight: 600; } html[data-theme="light"].tm-html.tm-prog-talentos .card label, html[data-theme="light"].tm-html.tm-prog-talentos .label-text, html[data-theme="light"].tm-html.tm-prog-talentos .nd-card label { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .helper-text, html[data-theme="light"].tm-html.tm-prog-talentos .tal-nd-lead { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-talentos .nd-card { background: rgba(139, 92, 246, 0.04); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-talentos .nd-card:hover { background: rgba(139, 92, 246, 0.08); } html[data-theme="light"].tm-html.tm-prog-talentos .nd-card:has(input:checked) { border-color: rgba(109, 40, 217, 0.45); background: rgba(139, 92, 246, 0.1); } html[data-theme="light"].tm-html.tm-prog-talentos .checkRow { background: rgba(139, 92, 246, 0.04); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-talentos .checkRow:has(input:checked) { border-color: rgba(109, 40, 217, 0.4); background: rgba(139, 92, 246, 0.08); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion { background: rgba(139, 92, 246, 0.04); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html .tm-esquema-pago__panel { border-color: var(--tm-role-border-subtle); background: color-mix(in srgb, var(--tm-prog-primary, #8b5cf6) 5%, #fff); } html[data-theme="light"].tm-html .tm-esquema-pago__modo { background: rgba(15, 23, 42, 0.03); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html .tm-esquema-pago__modo-label { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html .tm-esquema-pago__footer-link { display: block; margin-top: 0.5rem; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion:has(input:checked) { border-color: rgba(109, 40, 217, 0.4); background: rgba(139, 92, 246, 0.1); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion input[type="radio"] { --tm-esquema-radio-accent: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__sesion-title { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__sesion-kicker, html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__sesion-qty, html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__sesion-price { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-esquema-pago__opcion--sesion:has(input:checked) { border: none; border-top: 1px dashed color-mix(in srgb, var(--tm-role-text-muted) 45%, transparent); background: transparent; } html[data-theme="light"].tm-html.tm-prog-talentos #termsLink { color: #6d28d9; } html[data-theme="light"].tm-html.tm-prog-talentos #termsLink:hover { color: #0f766e; } html[data-theme="light"].tm-html.tm-prog-talentos .tal-nd-block { border-top-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-conocer-panel { border-color: rgba(139, 92, 246, 0.32); } html[data-theme="light"].tm-html.tm-prog-talentos input:focus, html[data-theme="light"].tm-html.tm-prog-talentos select:focus, html[data-theme="light"].tm-html.tm-prog-talentos textarea:focus { border-color: #6d28d9; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18); } html[data-theme="light"].tm-html.tm-prog-encanto { --bg: #faf7f2; --ink: #1c1410; --muted: #5c4f46; --border: rgba(200, 129, 34, 0.22); --card-bg: #ffffff; --input-bg: rgba(28, 20, 16, 0.05); --input-border: rgba(200, 129, 34, 0.28); --shadow: 0 20px 25px -5px rgba(28, 20, 16, 0.08), 0 10px 10px -5px rgba(200, 129, 34, 0.10); --shadow-soft: 0 4px 6px -1px rgba(28, 20, 16, 0.06); } html[data-theme="light"].tm-html.tm-prog-encanto body { background: radial-gradient(at 8% 0%, rgba(212, 168, 92, 0.14) 0px, transparent 48%), radial-gradient(at 92% 8%, rgba(196, 30, 58, 0.06) 0px, transparent 42%), var(--bg); } html[data-theme="light"].tm-html.tm-prog-encanto .card { color: var(--ink); border-color: rgba(212, 168, 92, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto select, html[data-theme="light"].tm-html.tm-prog-encanto select option { background: #fff; color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__legend, html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion .label-text, html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion .label-text strong { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__footer .helper-text { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .card label, html[data-theme="light"].tm-html.tm-prog-encanto .label-text, html[data-theme="light"].tm-html.tm-prog-encanto .ndGrid .checkRow label { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .helper-text { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .checkRow { background: rgba(212, 168, 92, 0.06); border-color: rgba(212, 168, 92, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto .checkRow:has(input:checked) { border-color: rgba(180, 83, 9, 0.45); background: rgba(212, 168, 92, 0.12); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion { background: rgba(212, 168, 92, 0.06); border-color: rgba(212, 168, 92, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion:has(input:checked) { border-color: rgba(180, 83, 9, 0.45); background: rgba(212, 168, 92, 0.12); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion input[type="radio"] { --tm-esquema-radio-accent: #b45309; } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__sesion-title { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__sesion-kicker, html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__sesion-qty, html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__sesion-price { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-esquema-pago__opcion--sesion:has(input:checked) { border: none; border-top: 1px dashed color-mix(in srgb, var(--tm-role-text-muted) 45%, transparent); background: transparent; } html[data-theme="light"].tm-html.tm-prog-encanto #termsLink { color: #9a3412; } html[data-theme="light"].tm-html.tm-prog-encanto #termsLink:hover { color: #be123c; } html[data-theme="light"].tm-html.tm-prog-misamores .card { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__legend, html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion .label-text, html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion .label-text strong { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__footer .helper-text { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .ndGrid .checkRow label, html[data-theme="light"].tm-html.tm-prog-misamores .label-text { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion { background: rgba(221, 150, 175, 0.08); border-color: rgba(221, 150, 175, 0.28); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion:has(input:checked) { border-color: rgba(54, 201, 203, 0.55); background: rgba(221, 150, 175, 0.14); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion input[type="radio"] { --tm-esquema-radio-accent: var(--dipav-purple); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__sesion-title { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__sesion-kicker, html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__sesion-qty, html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__sesion-price { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-esquema-pago__opcion--sesion:has(input:checked) { border: none; border-top: 1px dashed color-mix(in srgb, var(--tm-role-text-muted) 45%, transparent); background: transparent; } html[data-theme="light"].tm-html.tm-prog-misamores body { background: radial-gradient(at 8% 0%, rgba(221, 150, 175, 0.14) 0px, transparent 48%), radial-gradient(at 92% 8%, rgba(54, 201, 203, 0.12) 0px, transparent 42%), var(--bg); } html[data-theme="light"].tm-html.tm-prog-misamores .title { background: linear-gradient(118deg, #2a4549 0%, #c97a94 42%, #36c9cb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"].tm-html.tm-prog-misamores .subtitle { color: var(--muted); } html[data-theme="light"].tm-html.tm-prog-misamores .subtitle strong { color: #b85c7a; } html[data-theme="light"].tm-html.tm-prog-misamores main.grid > .card .meta { background: color-mix(in srgb, #fff 88%, rgba(221, 150, 175, 0.14)); border-color: rgba(221, 150, 175, 0.22); } html[data-theme="light"].tm-html.tm-prog-misamores .card .meta .k { color: #7a5a68; } html[data-theme="light"].tm-html.tm-prog-misamores .card .meta .v { color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .btnSecondary { background: rgba(221, 150, 175, 0.1); border-color: rgba(221, 150, 175, 0.32); color: var(--ink); } html[data-theme="light"].tm-html.tm-prog-misamores .btnSecondary:hover { background: rgba(54, 201, 203, 0.12); border-color: var(--dipav-blue); color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores a.tm-link-precios, html[data-theme="light"].tm-html.tm-prog-misamores .tm-precio-inline-link { color: #2a7a7c; } html[data-theme="light"].tm-html.tm-prog-misamores a.tm-link-precios:hover, html[data-theme="light"].tm-html.tm-prog-misamores .tm-precio-inline-link:hover { color: var(--dipav-purple); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-landing-gallery .ph { background: #fff; border-color: rgba(221, 150, 175, 0.24); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-landing-gallery .ph .cap { color: var(--ink); background: linear-gradient( 180deg, color-mix(in srgb, var(--tm-brand-mis-amores) 14%, #fff) 0%, #fff 100% ); border-top-color: rgba(221, 150, 175, 0.32); } html[data-theme="light"].tm-html.tm-prog-misamores .checkRow { background: #fff; border-color: rgba(221, 150, 175, 0.24); } html[data-theme="light"].tm-html.tm-prog-misamores .checkRow:has(input:checked) { border-color: rgba(54, 201, 203, 0.5); background: rgba(221, 150, 175, 0.1); } html[data-theme="light"].tm-html.tm-prog-misamores .tm-conocer-panel { border-color: rgba(221, 150, 175, 0.38); } html[data-theme="light"].tm-html.tm-prog-misamores #termsLink { color: var(--dipav-blue); } html[data-theme="light"].tm-html.tm-prog-misamores #termsLink:hover { color: var(--dipav-purple); } html[data-theme="light"].tm-html.tm-prog-misamores input:focus, html[data-theme="light"].tm-html.tm-prog-misamores select:focus, html[data-theme="light"].tm-html.tm-prog-misamores textarea:focus { border-color: var(--dipav-purple); box-shadow: 0 0 0 4px rgba(221, 150, 175, 0.2); } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta { background: rgba(212, 168, 92, 0.06); border-color: rgba(212, 168, 92, 0.18); } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta .k { color: #9a3412; } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta:nth-child(1) .k { color: #7c2d12; } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta:nth-child(2) .k { color: #b45309; } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta:nth-child(3) .k { color: #9f1239; } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta:nth-child(4) .k { color: #a16207; } html[data-theme="light"].tm-html.tm-prog-encanto .card .meta .v .tm-meta-mensual-nota { color: #78716c; } html[data-theme="light"].tm-html.tm-prog-encanto .title { background: linear-gradient(118deg, #1c1410 0%, #9a3412 42%, #b45309 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"].tm-html.tm-prog-encanto .subtitle { color: #78716c; } html[data-theme="light"].tm-html.tm-prog-encanto .subtitle strong { color: #9a3412; } html[data-theme="light"].tm-html.tm-prog-encanto .btnSecondary { background: rgba(212, 168, 92, 0.08); border-color: rgba(212, 168, 92, 0.35); color: #1c1410; } html[data-theme="light"].tm-html.tm-prog-encanto .btnSecondary:hover { background: rgba(212, 168, 92, 0.16); border-color: #b45309; color: #1c1410; } html[data-theme="light"].tm-html.tm-prog-encanto a.tm-link-precios, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precio-inline-link { color: #7c2d12; } html[data-theme="light"].tm-html.tm-prog-encanto a.tm-link-precios:hover, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precio-inline-link:hover { color: #be123c; } html[data-theme="light"].tm-html.tm-prog-encanto .tm-landing-gallery .ph { background: #f5f0ea; border-color: rgba(212, 168, 92, 0.22); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-landing-gallery .ph .cap { color: #1c1410; background: linear-gradient(180deg, transparent, rgba(212, 168, 92, 0.28)); } html[data-theme="light"].tm-html.tm-prog-encanto .tm-conocer-panel { border-color: rgba(212, 168, 92, 0.35); } html[data-theme="light"].tm-html.tm-prog-encanto input:focus, html[data-theme="light"].tm-html.tm-prog-encanto select:focus, html[data-theme="light"].tm-html.tm-prog-encanto textarea:focus { border-color: #b45309; background: #fff; box-shadow: 0 0 0 4px rgba(212, 168, 92, 0.22); } /* Sala DIPAV (inscripción): tokens + contenedores que seguían “modo oscuro” */ html[data-theme="light"].tm-html.tm-prog-dipav { color-scheme: light; --bg-deep: var(--tm-role-canvas); --bg-surface: var(--tm-role-surface); --bg-surface-elevated: var(--tm-role-surface-elevated); --text-pearl: var(--tm-role-text-primary); --text-muted: var(--tm-role-text-muted); --text-secondary-dark: var(--tm-role-text-secondary); --border-color: var(--tm-role-border-subtle); --shadow-glass: var(--tm-elev-2); --mut: var(--tm-role-text-muted); --ink: var(--tm-role-text-primary); --muted: var(--tm-role-text-muted); --border: var(--tm-role-border-subtle); --input-border: var(--tm-role-border-strong); --input-bg: var(--tm-role-surface); } html[data-theme="light"].tm-html.tm-prog-dipav body { background-color: var(--bg-deep); color: var(--text-pearl); } html[data-theme="light"].tm-html.tm-prog-dipav .adn-card, html[data-theme="light"].tm-html.tm-prog-dipav .authority-section, html[data-theme="light"].tm-html.tm-prog-dipav .director-block, html[data-theme="light"].tm-html.tm-prog-dipav .experiencia-dipav-media, html[data-theme="light"].tm-html.tm-prog-dipav .logistics-section, html[data-theme="light"].tm-html.tm-prog-dipav .price-container-step1, html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card, html[data-theme="light"].tm-html.tm-prog-dipav .checkbox-group, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion { border-color: var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__legend, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion .label-text, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion .label-text strong, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__sesion-title { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__footer .helper-text, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__sesion-kicker, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__sesion-qty, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__sesion-price { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion { background: var(--tm-role-surface); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion:has(input:checked) { border-color: color-mix(in srgb, var(--tm-gold) 55%, var(--tm-role-border-strong)); background: color-mix(in srgb, var(--tm-gold) 10%, var(--tm-role-surface)); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion input[type="radio"] { --tm-esquema-radio-accent: var(--tm-gold, #d4af37); } html[data-theme="light"].tm-html.tm-prog-dipav .checkbox-group input[type="radio"], html[data-theme="light"].tm-html.tm-prog-dipav .checkbox-group input[type="checkbox"] { accent-color: var(--tm-gold, #d4af37); } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion--sesion:has(input:checked) { border: none; border-top: 1px dashed color-mix(in srgb, var(--tm-role-text-muted) 45%, transparent); background: transparent; } html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago__opcion--sesion-qty-btn { border-color: var(--tm-role-border-strong); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav a.tm-link-precios, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago a.tm-link-precios { color: #8a6914; } html[data-theme="light"].tm-html.tm-prog-dipav a.tm-link-precios:hover, html[data-theme="light"].tm-html.tm-prog-dipav .tm-esquema-pago a.tm-link-precios:hover { color: var(--tm-gold-metallic-ink, #2a2000); } html[data-theme="light"].tm-html.tm-prog-dipav .adn-card:hover { box-shadow: var(--tm-elev-2); } html[data-theme="light"].tm-html.tm-prog-dipav .adn-card img { border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .authority-logos img { filter: none; } html[data-theme="light"].tm-html.tm-prog-dipav .director-block img { background: var(--tm-role-section-alt); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-step-pill { background: var(--tm-role-surface-elevated); color: var(--tm-role-text-muted); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-step-pill--done { background: var(--tm-role-accent-dim); color: var(--tm-role-text-secondary); border-color: rgba(212, 175, 55, 0.35); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-step-pill--current { color: #8a6914; } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-step-line { background: var(--tm-role-border-strong); } @media (max-width: 767px) { html[data-theme="light"].tm-html.tm-prog-dipav .dipav-step-progress-wrap { background: color-mix(in srgb, var(--tm-role-canvas) 94%, #fff 6%); border-bottom-color: var(--tm-role-border-subtle); box-shadow: var(--tm-elev-1); } } html[data-theme="light"].tm-html.tm-prog-dipav input[type="text"], html[data-theme="light"].tm-html.tm-prog-dipav input[type="email"], html[data-theme="light"].tm-html.tm-prog-dipav input[type="tel"], html[data-theme="light"].tm-html.tm-prog-dipav input[type="number"], html[data-theme="light"].tm-html.tm-prog-dipav select { background: var(--tm-role-surface); border-color: var(--tm-role-border-strong); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav input:focus, html[data-theme="light"].tm-html.tm-prog-dipav select:focus { background: var(--tm-role-surface); } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card { box-shadow: var(--tm-elev-1); } /* Cupo agotado (claro): tarjeta gris suave + instrumento desaturado; orden: foto → nombre → pista → sello abajo */ html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full { background: #f2f2f4; border: 1px solid var(--tm-role-border-subtle); opacity: 1; filter: none; } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full:hover, html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full:focus-visible { opacity: 1; filter: none; border-color: var(--tm-role-border-strong); background: #ebebed; transform: translateY(-2px); } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full .instrument-thumb__img { filter: grayscale(1) saturate(0.12); } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full .instrument-name { color: var(--tm-role-text-primary); text-shadow: none; } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full .dipav-instrument-full-hint { color: var(--tm-role-text-muted); font-weight: 600; text-shadow: none; } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.full .tag-full { background: #3d4554; color: #d4c4c8; border: none; border-radius: 999px; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; box-shadow: none; text-shadow: none; } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.selected:not(.full) { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 16%, var(--tm-role-surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 38%, transparent), var(--tm-elev-2); } html[data-theme="light"].tm-html.tm-prog-dipav .instrument-card.selected:focus-visible:not(.full) { outline-color: var(--accent-gold); } html[data-theme="light"].tm-html.tm-prog-dipav button.tm-conocer-trust-trigger.tm-conocer-trust-btn { background: var(--tm-role-surface-elevated); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .btn-secondary { background: var(--tm-role-section-alt); color: var(--tm-role-text-primary); border: 1px solid var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } html[data-theme="light"].tm-html.tm-prog-dipav .btn-secondary:hover { background: color-mix(in srgb, var(--tm-role-text-primary) 6%, var(--tm-role-section-alt)); color: var(--tm-role-text-primary); border-color: color-mix(in srgb, var(--tm-role-text-primary) 28%, var(--tm-role-border-strong)); } html[data-theme="light"].tm-html.tm-prog-dipav .nav-controls, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-form-hr, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-pricing-modal-title { border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .modal-overlay { background: rgba(15, 23, 42, 0.45); } html[data-theme="light"].tm-html.tm-prog-dipav .close-modal { background: var(--tm-role-overlay-on-canvas-12); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .table-responsive, html[data-theme="light"].tm-html.tm-prog-dipav .pricing-table { border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .pricing-table th, html[data-theme="light"].tm-html.tm-prog-dipav .pricing-table td { border-bottom-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .pricing-table th { background: var(--tm-role-surface-elevated); } html[data-theme="light"].tm-html.tm-prog-dipav .btn-maps { background: var(--tm-role-surface-elevated); border-color: var(--tm-role-border-subtle); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-success-map-card, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-pricing-teatro-card { background: var(--tm-role-surface-elevated); border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav #alerta-programa.dipav-alerta-programa { background: rgba(30, 58, 138, 0.08); color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-cupo-reserva-note, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-cupo-submit-note { color: var(--text-muted); } /* DIPAV paso 1 — hero con foto: texto claro (la imagen es oscura); velo suave, sin glow */ html[data-theme="light"].tm-html.tm-prog-dipav .hero-section { border-color: var(--tm-role-border-subtle); } html[data-theme="light"].tm-html.tm-prog-dipav .hero-section__veil { background-image: linear-gradient( to bottom, color-mix(in srgb, var(--tm-role-canvas) 12%, transparent) 0%, rgba(15, 23, 42, 0.28) 40%, rgba(15, 23, 42, 0.5) 100% ); } html[data-theme="light"].tm-html.tm-prog-dipav .hero-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } html[data-theme="light"].tm-html.tm-prog-dipav .hero-title .gold-text { color: var(--accent-gold, #d4af37); } html[data-theme="light"].tm-html.tm-prog-dipav .hero-subtitle { color: rgba(248, 250, 252, 0.94); font-weight: 500; line-height: 1.55; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); opacity: 1; } html[data-theme="light"].tm-html.tm-prog-dipav .hero-lead { color: rgba(248, 250, 252, 0.96); font-weight: 800; } html[data-theme="light"].tm-html.tm-prog-dipav .hero-inversion-link { color: rgba(248, 250, 252, 0.58); border-bottom-color: rgba(248, 250, 252, 0.22); } html[data-theme="light"].tm-html.tm-prog-dipav .hero-inversion-link:hover { color: rgba(248, 250, 252, 0.88); border-bottom-color: rgba(248, 250, 252, 0.45); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-trust-block { background: rgba(15, 23, 42, 0.72); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-trust-block__title { color: #fff; } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-proceso-ingreso, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-faq details { background: var(--bg-surface); } /* Tiers de precio — contornos visibles sobre fondo claro */ html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-membresia-strip { background: rgba(180, 140, 40, 0.08); border-color: rgba(180, 140, 40, 0.35); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-membresia-strip__title, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-membresia-strip__amount, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tuition-lead { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-membresia-strip__desc { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier { background: var(--tm-role-section-alt, #f5f5f7); border: 1px solid var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier--nuevo { background: var(--tm-role-section-alt, #f5f5f7); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier--miembro { background: #ffffff; border-color: rgba(180, 140, 40, 0.45); box-shadow: var(--tm-elev-2); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier__label, html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier__amount { color: var(--tm-role-text-primary); } html[data-theme="light"].tm-html.tm-prog-dipav .dipav-price-tier__desc { color: var(--tm-role-text-muted); } html[data-theme="light"].tm-html.tm-prog-dipav button.dipav-price-tier:hover { border-color: var(--tm-role-border-strong); background: #ebebef; } html[data-theme="light"].tm-html.tm-prog-dipav button.dipav-price-tier--miembro:hover { border-color: rgba(180, 140, 40, 0.6); background: #faf8f2; box-shadow: var(--tm-elev-2); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precios-zone, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precios-zone, html[data-theme="light"].tm-html.tm-prog-misamores .tm-precios-zone { background: var(--tm-role-section-alt, #f5f5f7); border-color: color-mix(in srgb, var(--tm-prog-primary) 22%, var(--tm-role-border-strong)); } html[data-theme="light"].tm-html.tm-prog-talentos .tm-precio-membresia-strip, html[data-theme="light"].tm-html.tm-prog-encanto .tm-precio-membresia-strip, html[data-theme="light"].tm-html.tm-prog-misamores .tm-precio-membresia-strip { background: color-mix(in srgb, var(--tm-prog-primary) 8%, transparent); border-color: color-mix(in srgb, var(--tm-prog-primary) 35%, transparent); } html[data-theme="light"].tm-html.tm-prog-talentos button.tm-precio-tier, html[data-theme="light"].tm-html.tm-prog-encanto button.tm-precio-tier, html[data-theme="light"].tm-html.tm-prog-misamores button.tm-precio-tier { background: #fff; border-color: var(--tm-role-border-strong); } html[data-theme="light"].tm-html.tm-prog-talentos button.tm-precio-tier--miembro, html[data-theme="light"].tm-html.tm-prog-encanto button.tm-precio-tier--miembro, html[data-theme="light"].tm-html.tm-prog-misamores button.tm-precio-tier--miembro { border-color: color-mix(in srgb, var(--tm-prog-primary) 45%, transparent); background: color-mix(in srgb, var(--tm-prog-primary) 6%, #fff); } html[data-theme="light"].tm-html.tm-prog-talentos button.tm-precio-tier--miembro:hover, html[data-theme="light"].tm-html.tm-prog-encanto button.tm-precio-tier--miembro:hover, html[data-theme="light"].tm-html.tm-prog-misamores button.tm-precio-tier--miembro:hover { border-color: color-mix(in srgb, var(--tm-prog-primary) 58%, transparent); background: color-mix(in srgb, var(--tm-prog-primary) 10%, #fff); } /* ===== css/tm-essence/06-theme-toggle.css ===== */ /** * Control de tema claro / oscuro (sitio marketing con tm-essence). */ .tm-theme-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border: 1px solid var(--tm-role-border-subtle, rgba(255, 255, 255, 0.14)); border-radius: 999px; background: color-mix(in srgb, var(--tm-role-surface, #1e293b) 72%, transparent); color: var(--tm-role-text-primary, #f8fafc); font: 600 12px/1.2 system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; } .tm-theme-toggle:hover { background: color-mix(in srgb, var(--tm-role-surface-elevated, #334155) 88%, transparent); } .tm-theme-toggle:focus-visible { outline: 2px solid var(--tm-role-accent, #d4af37); outline-offset: 2px; } .tm-theme-toggle__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 0; background: none; opacity: 1; box-shadow: none; } .tm-theme-toggle__svg { display: block; width: 18px; height: 18px; } html[data-theme="light"] .tm-theme-toggle { background: rgba(255, 255, 255, 0.88); border-color: rgba(15, 23, 42, 0.12); color: var(--tm-role-text-primary, #0f172a); backdrop-filter: saturate(180%) blur(12px); } .heroNav .tm-theme-toggle { flex-shrink: 0; } .heroNavShell .heroNav { gap: 10px; } /* Landings inscripción: logos centrados + switch a la derecha */ html.tm-html.tm-prog-dipav header, html.tm-html.tm-prog-encanto header, html.tm-html.tm-prog-misamores header, html.tm-html.tm-prog-talentos header { gap: 12px; } html.tm-html.tm-prog-dipav header .nav-logos, html.tm-html.tm-prog-encanto header .nav-logos, html.tm-html.tm-prog-misamores header .nav-logos, html.tm-html.tm-prog-talentos header .nav-logos { width: auto; flex: 1; justify-content: center; } html.tm-html.tm-prog-dipav header .tm-theme-toggle, html.tm-html.tm-prog-encanto header .tm-theme-toggle, html.tm-html.tm-prog-misamores header .tm-theme-toggle, html.tm-html.tm-prog-talentos header .tm-theme-toggle { flex-shrink: 0; } /* Móvil: reservar columna al switch; logos encogen sin cortarse a la derecha */ @media (max-width: 767px) { html.tm-html.tm-prog-dipav header, html.tm-html.tm-prog-encanto header, html.tm-html.tm-prog-misamores header, html.tm-html.tm-prog-talentos header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 0.65rem max(0.75rem, env(safe-area-inset-right, 0px)) 0.65rem max(0.75rem, env(safe-area-inset-left, 0px)); box-sizing: border-box; width: 100%; max-width: 100%; overflow: visible; } html.tm-html.tm-prog-dipav header .nav-logos, html.tm-html.tm-prog-encanto header .nav-logos, html.tm-html.tm-prog-misamores header .nav-logos, html.tm-html.tm-prog-talentos header .nav-logos { min-width: 0; max-width: 100%; flex: none; width: 100%; gap: 10px; justify-content: center; overflow: hidden; } html.tm-html.tm-prog-dipav header .nav-logos a, html.tm-html.tm-prog-encanto header .nav-logos a, html.tm-html.tm-prog-misamores header .nav-logos a, html.tm-html.tm-prog-talentos header .nav-logos a { min-width: 0; flex: 0 1 auto; max-width: 46%; } html.tm-html.tm-prog-dipav header .nav-logos .logo-tmm, html.tm-html.tm-prog-encanto header .nav-logos .logo-tmm, html.tm-html.tm-prog-misamores header .nav-logos .logo-tmm, html.tm-html.tm-prog-talentos header .nav-logos .logo-tmm { height: 30px; width: auto; max-width: 100%; } html.tm-html.tm-prog-dipav header .nav-logos .logo-dipav, html.tm-html.tm-prog-encanto header .nav-logos .logo-encanto, html.tm-html.tm-prog-misamores header .nav-logos .logo-mis-amores, html.tm-html.tm-prog-talentos header .nav-logos .logo-talentos { height: 48px; width: auto; max-width: 100%; } html.tm-html.tm-prog-dipav header .nav-separator, html.tm-html.tm-prog-encanto header .nav-separator, html.tm-html.tm-prog-misamores header .nav-separator, html.tm-html.tm-prog-talentos header .nav-separator { height: 24px; flex-shrink: 0; } html.tm-html.tm-prog-dipav header .tm-theme-toggle, html.tm-html.tm-prog-encanto header .tm-theme-toggle, html.tm-html.tm-prog-misamores header .tm-theme-toggle, html.tm-html.tm-prog-talentos header .tm-theme-toggle { grid-column: 2; grid-row: 1; margin: 0; } } @media (max-width: 900px) { .tm-theme-toggle { padding: 6px 9px; gap: 5px; font-size: 10px; } .tm-theme-toggle__label { white-space: nowrap; } } /* Móvil / tablet estrecha: solo icono (sol / luna), sin copy visible */ @media (max-width: 820px) { .tm-theme-toggle { position: relative; min-width: 44px; min-height: 44px; padding: 10px; gap: 0; justify-content: center; } .tm-theme-toggle__icon { width: 20px; height: 20px; } .tm-theme-toggle__svg { width: 20px; height: 20px; } .tm-theme-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mobileNav .tm-theme-toggle--mobile { flex-shrink: 0; min-width: 40px; min-height: 40px; padding: 8px; margin: 0; } .mobileNav .tm-theme-toggle--mobile .tm-theme-toggle__icon, .mobileNav .tm-theme-toggle--mobile .tm-theme-toggle__svg { width: 18px; height: 18px; } } @media (max-width: 430px) { .mobileNav .tm-theme-toggle--mobile { min-width: 38px; min-height: 38px; padding: 7px; } } /* ===== css/tm-essence/07-components/buttons.css ===== */ /** * Componentes — botones (PR-3). * CTAs primarios: oro metálico institucional (--tm-gold-metallic-* en 01-tokens.css). */ :root { --tm-comp-btn-gradient: var(--tm-gold-metallic-gradient); --tm-comp-btn-gradient-nav: var(--tm-gold-metallic-gradient); --tm-comp-btn-glow: var(--tm-gold-metallic-shadow); --tm-comp-btn-glow-strong: var(--tm-gold-metallic-shadow-hover); } .btn, .navCta, .heroBtn, .mobileNavCta, .progBtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tm-space-2); font-family: var(--tm-font-sans); font-weight: var(--tm-fw-bold); text-decoration: none; border: none; cursor: pointer; line-height: var(--tm-lh-snug); transition: transform var(--tm-dur-base) var(--tm-ease-standard), filter var(--tm-dur-base) var(--tm-ease-standard), box-shadow var(--tm-dur-base) var(--tm-ease-standard), background var(--tm-dur-base) var(--tm-ease-standard); -webkit-tap-highlight-color: transparent; } .btn { padding: var(--tm-space-3) var(--tm-space-5); border-radius: var(--tm-radius-pill); font-size: var(--tm-fs-body); min-height: var(--tm-touch-min); } .btn--sm { padding: var(--tm-space-2) var(--tm-space-4); font-size: var(--tm-fs-small); min-height: var(--tm-touch-min); } .btn--lg { padding: var(--tm-space-4) var(--tm-space-6); font-size: var(--tm-fs-lead); font-weight: 900; } /* Oro puro — superficie primaria unificada en todo el sitio */ .btn--primary, .btnPrimary, .btn-primary, .btn.btnPrimary, .btn.btn-primary, .heroBtn, .navCta, .mobileNavCta, .progBtn { background: var(--accent-gradient-cta, var(--tm-comp-btn-gradient)); color: var(--tm-gold-metallic-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42); border: 1px solid var(--tm-gold-metallic-border); box-shadow: var(--glow-gold, var(--tm-comp-btn-glow)); } .btn--primary:hover, .btnPrimary:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn.btnPrimary:hover:not(:disabled), .btn.btn-primary:hover:not(:disabled), .heroBtn:hover, .navCta:hover, .mobileNavCta:hover, .progBtn:hover { filter: brightness(1.05) saturate(1.1); transform: translateY(-2px); box-shadow: var(--shadow-gold-strong, var(--tm-comp-btn-glow-strong)); } .btn--secondary { background: var(--tm-role-surface); color: var(--tm-role-text-primary); border: 1px solid var(--tm-role-border-strong); box-shadow: var(--tm-elev-1); } .btn--secondary:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tm-role-accent) 45%, var(--tm-role-border-strong)); box-shadow: var(--tm-elev-2); } .btn--ghost { background: transparent; color: var(--tm-role-text-primary); border: 1px solid var(--tm-role-border-subtle); } .btn--ghost:hover { background: color-mix(in srgb, var(--tm-role-text-primary) 6%, transparent); border-color: var(--tm-role-border-strong); } .btn--on-dark { background: color-mix(in srgb, var(--tm-role-canvas) 88%, var(--tm-role-ink-scrim)); color: var(--tm-role-text-primary); border: 1px solid var(--tm-role-border-strong); } .btn--on-dark:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--tm-role-canvas) 78%, var(--tm-role-ink-scrim)); } .btn--danger { background: var(--tm-role-error); color: var(--tm-role-paper); } .btn--danger:hover { filter: brightness(1.08); transform: translateY(-2px); } .btn--block, .progBtn { width: 100%; } /* Aliases legacy (nav / hero / programas) */ .navCta { flex-shrink: 0; font-weight: 800; padding: 10px 20px; border-radius: var(--tm-radius-pill); } .heroBtn { padding: var(--tm-space-4) var(--tm-space-6); border-radius: var(--tm-radius-pill); font-weight: 900; font-size: 18px; } .mobileNavCta { font-weight: 800; padding: var(--tm-space-2) var(--tm-space-4); border-radius: var(--tm-radius-sm); font-size: var(--tm-fs-small); } .progBtn { padding: var(--tm-space-3); border-radius: var(--tm-radius-sm); font-weight: 900; font-size: var(--tm-fs-small); text-transform: uppercase; } .progBtn--dipav { background: var(--tm-gold-metallic-gradient-deep) !important; color: #1a1206 !important; } .btn:focus-visible, .btnPrimary:focus-visible, .btn-primary:focus-visible, .navCta:focus-visible, .heroBtn:focus-visible, .mobileNavCta:focus-visible, .progBtn:focus-visible { outline: var(--tm-focus-ring-width) solid var(--tm-gold-metallic-focus); outline-offset: var(--tm-focus-ring-offset); } .btn:disabled, .btn[aria-disabled="true"], .btnPrimary:disabled, .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; } /* ===== css/tm-essence/07-components/section.css ===== */ /** * Componentes — secciones y cabeceras de bloque (PR-3). */ .section { padding-block: 5rem; scroll-margin-top: 5rem; } .section.alt, .section--alt { background: color-mix(in srgb, var(--tm-role-canvas) 85%, var(--tm-role-ink-scrim) 15%); } .sectionHead { text-align: center; max-width: var(--tm-container-reading); margin-inline: auto; margin-bottom: var(--tm-space-7); } .sectionHead h2, .sectionHead__title { font-family: var(--tm-font-display); font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 900; letter-spacing: -0.02em; line-height: var(--tm-lh-tight); margin: 0 0 var(--tm-space-4); color: var(--tm-role-text-primary); } .sectionHead .lead, .sectionHead__lead { font-size: 1.125rem; color: var(--tm-role-text-muted); font-weight: var(--tm-fw-medium); line-height: var(--tm-lh-body); margin: 0; } .eyebrow, .sectionHead .eyebrow { display: block; margin: 0 0 var(--tm-space-3); font-size: var(--tm-fs-overline); font-weight: var(--tm-fw-bold); letter-spacing: var(--tm-tracking-overline); text-transform: uppercase; color: var(--tm-role-text-secondary); } footer#contacto { scroll-margin-top: 5rem; } /* Footer invertido: oscuro del sitio → pie blanco; claro del sitio → pie navy */ html.tm-html:not([data-theme="light"]) footer#contacto, html.tm-html:not([data-theme="light"]) .emusini-noscript-footer { background: #ffffff; color: #1d1d1f; border-top-color: rgba(15, 23, 42, 0.1); } html.tm-html:not([data-theme="light"]) footer#contacto .footH { color: #1d1d1f; } html.tm-html:not([data-theme="light"]) footer#contacto .footBrand .desc, html.tm-html:not([data-theme="light"]) footer#contacto .footBrand__desc, html.tm-html:not([data-theme="light"]) footer#contacto .footA, html.tm-html:not([data-theme="light"]) .emusini-noscript-footer { color: #424245; } html.tm-html:not([data-theme="light"]) footer#contacto .footA:hover { color: var(--tm-gold, #d4af37); } html.tm-html:not([data-theme="light"]) footer#contacto .legal { border-top-color: rgba(15, 23, 42, 0.1); color: #6e6e73; } html.tm-html:not([data-theme="light"]) footer#contacto .legal__copy, html.tm-html:not([data-theme="light"]) footer#contacto .footA--legal { color: #515154; } html.tm-html:not([data-theme="light"]) footer#contacto .footSocial__link { color: #1d1d1f; border-color: rgba(15, 23, 42, 0.14); background: rgba(15, 23, 42, 0.05); } html.tm-html:not([data-theme="light"]) footer#contacto .footSocial__link:hover { color: var(--tm-gold, #d4af37); background: color-mix(in srgb, var(--tm-gold, #d4af37) 12%, transparent); border-color: color-mix(in srgb, var(--tm-gold, #d4af37) 35%, transparent); } html[data-theme="light"] footer#contacto, html[data-theme="light"] .emusini-noscript-footer { background: var(--tm-bg-deep, #0f172a); color: #f8fafc; border-top-color: rgba(255, 255, 255, 0.12); } html[data-theme="light"] footer#contacto .footH { color: #f8fafc; } html[data-theme="light"] footer#contacto .footBrand .desc, html[data-theme="light"] footer#contacto .footBrand__desc, html[data-theme="light"] footer#contacto .footA { color: #cbd5e1; } html[data-theme="light"] footer#contacto .footA:hover { color: var(--tm-gold, #d4af37); } html[data-theme="light"] footer#contacto .legal { border-top-color: rgba(255, 255, 255, 0.12); color: #cbd5e1; } html[data-theme="light"] footer#contacto .legal__copy, html[data-theme="light"] footer#contacto .footA--legal { color: #e2e8f0; } html[data-theme="light"] footer#contacto .footSocial__link { color: #f8fafc; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); } html[data-theme="light"] footer#contacto .footSocial__link:hover { color: var(--tm-gold, #d4af37); background: color-mix(in srgb, var(--tm-gold, #d4af37) 14%, transparent); border-color: color-mix(in srgb, var(--tm-gold, #d4af37) 40%, transparent); } /* ===== css/tm-essence/07-components/marketing-type.css ===== */ /** * Tipografía marketing — única fuente (tokens 01b). * - Hero index: .tm-hero-title / .tm-hero-lead * - Landings inscripción: .title / .subtitle (alias .tm-landing-title / .tm-landing-lead) * Color y gradiente por programa → 04-program-accents.css */ /* ── Landings inscripción (tridente) ── */ html.tm-html main.grid > .card .cardInner > .title, html.tm-html main.grid > .card .cardInner > .tm-landing-title { font-family: var(--tm-font-hero-title); font-size: var(--tm-fs-h1); font-weight: var(--tm-fw-bold); line-height: var(--tm-lh-tight); letter-spacing: var(--tm-tracking-h); margin: 0 0 0.5rem; } html.tm-html main.grid > .card .cardInner > .subtitle, html.tm-html main.grid > .card .cardInner > .tm-landing-lead { font-family: var(--tm-font-sans); font-size: var(--tm-fs-lead); font-weight: var(--tm-fw-medium); line-height: var(--tm-lh-body); letter-spacing: var(--tm-tracking-body); margin: 0; color: var(--muted); } html.tm-html main.grid > .card .cardInner > .subtitle strong { font-weight: var(--tm-fw-bold); } @media (max-width: 640px) { html.tm-html.tm-prog-encanto main.grid > .card .cardInner > .title, html.tm-html.tm-prog-talentos main.grid > .card .cardInner > .title, html.tm-html.tm-prog-misamores main.grid > .card .cardInner > .title, html.tm-html.tm-prog-encanto main.grid > .card .cardInner > .tm-landing-title, html.tm-html.tm-prog-talentos main.grid > .card .cardInner > .tm-landing-title, html.tm-html.tm-prog-misamores main.grid > .card .cardInner > .tm-landing-title { font-size: clamp(1.625rem, 6vw, 2.125rem); } } /* ── Hero index (home) ── */ .heroIntro .tm-hero-title, .heroContent .tm-hero-title { font-family: var(--tm-font-hero-title); font-size: var(--tm-fs-display); font-weight: 900; line-height: var(--tm-lh-tight); letter-spacing: var(--tm-tracking-display); margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; text-wrap: balance; text-shadow: 0 10px 30px color-mix(in srgb, var(--tm-role-ink-scrim) 80%, transparent); } .heroIntro .tm-hero-lead, .heroContent .tm-hero-lead { font-family: var(--tm-font-sans); font-size: var(--tm-fs-lead); font-weight: var(--tm-fw-medium); line-height: var(--tm-lh-body); letter-spacing: var(--tm-tracking-body); margin: 0 auto clamp(2.5rem, 4vw, 3rem); max-width: min(var(--tm-measure-reading), 100%); text-align: center; text-wrap: pretty; color: color-mix(in srgb, var(--text) 88%, transparent); text-shadow: 0 8px 20px color-mix(in srgb, var(--tm-role-ink-scrim) 75%, transparent); } .heroIntro .tm-hero-lead__brand { font-weight: var(--tm-fw-bold); color: var(--accent2); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: color-mix(in srgb, var(--accent2) 75%, transparent); text-underline-offset: 0.2em; } html[data-theme="light"] .heroIntro .tm-hero-title, html[data-theme="light"] .heroContent .tm-hero-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38); } html[data-theme="light"] .heroIntro .tm-hero-lead, html[data-theme="light"] .heroContent .tm-hero-lead { color: rgba(248, 250, 252, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); } html[data-theme="light"] .heroIntro .tm-hero-lead__brand { color: var(--accent2); } /* ── DIPAV: tipografía nativa en dipav-landing.css (sin marketing-type) ── */ /* ── Subpáginas institucionales (H1 de página) ── */ .emusini-hero h1, .capsHero h1, .legal-surface-main .header h1 { font-family: var(--tm-font-hero-title); font-weight: var(--tm-fw-bold); letter-spacing: var(--tm-tracking-h); line-height: var(--tm-lh-tight); } /* Tarjetas de programas — segmento de audiencia bajo el logo */ .programas-page .progSegment { font-family: Georgia, "Times New Roman", Times, serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; text-align: center; color: var(--ink); } /** @deprecated alias — usa .progSegment */ .programas-page .progTitle { font-family: Georgia, "Times New Roman", Times, serif; font-weight: 700; letter-spacing: -0.02em; } /* ===== css/tm-essence/07-components/cards.css ===== */ /** * Componentes — tarjetas, chips y aliases legacy (PR-3). */ .card { background: var(--panel, var(--tm-role-surface)); border: 1px solid var(--line, var(--tm-role-border-subtle)); border-radius: var(--tm-radius-lg); padding: var(--tm-space-5); box-shadow: var(--shadow2, var(--tm-elev-2)); color: var(--text, var(--tm-role-text-primary)); } .card--elevated { box-shadow: var(--shadow, var(--tm-elev-3)); } .card--interactive { transition: transform var(--tm-dur-base) var(--tm-ease-standard), border-color var(--tm-dur-base) var(--tm-ease-standard), box-shadow var(--tm-dur-base) var(--tm-ease-standard); } @media (hover: hover) and (pointer: fine) { .card--interactive:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tm-role-accent) 35%, var(--tm-role-border-subtle)); box-shadow: var(--shadow, var(--tm-elev-3)); } } .card--centered { text-align: center; } /* Alias index — fila con viñeta dorada */ .benefit { display: flex; gap: var(--tm-space-4); align-items: flex-start; background: var(--panel, var(--tm-role-surface)); border: 1px solid var(--line, var(--tm-role-border-subtle)); border-radius: var(--tm-radius-lg); padding: var(--tm-space-5); box-shadow: var(--shadow2, var(--tm-elev-2)); } .benefit h4 { margin: 0 0 var(--tm-space-1); font-size: var(--tm-fs-h4); font-weight: 800; color: var(--text, var(--tm-role-text-primary)); } .benefit p { margin: 0; color: var(--muted, var(--tm-role-text-muted)); font-weight: var(--tm-fw-semibold); font-size: var(--tm-fs-small); line-height: var(--tm-lh-snug); } .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient( 135deg, var(--accent, var(--tm-role-accent)), var(--accent2, var(--tm-role-accent-cool)) ); margin-top: 5px; flex-shrink: 0; } /* Tarjetas de programas (programas/index.html) */ .progCard { background: color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 3%, var(--panel, var(--tm-role-surface))); border: 1px solid color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 8%, transparent); border-radius: var(--tm-radius-lg); text-align: center; transition: all var(--tm-dur-slow) var(--tm-ease-standard); box-shadow: var(--shadow, var(--tm-elev-2)); display: flex; flex-direction: column; overflow: hidden; position: relative; } @media (hover: hover) and (pointer: fine) { .progCard:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--ink, var(--tm-role-text-primary)) 6%, var(--panel, var(--tm-role-surface))); border-color: var(--accent, var(--tm-role-accent)); box-shadow: var(--shadow-hover, var(--tm-elev-3)), var(--glow-gold, var(--tm-comp-btn-glow, 0 8px 25px var(--tm-shadow-accent-glow))); } } .card-dipav { border-color: color-mix(in srgb, var(--tm-role-accent) 32%, transparent); background: var(--panel, var(--tm-role-surface)); } @media (hover: hover) and (pointer: fine) { .card-dipav:hover { border-color: var(--tm-role-accent); } } .card-dipav .card-cover { border-bottom-color: color-mix(in srgb, var(--tm-role-accent) 70%, var(--ink, var(--tm-role-text-primary))); } /* Chips / pills reutilizables */ .chip, .badge { display: inline-flex; align-items: center; gap: var(--tm-space-1); border: 1px solid var(--line, var(--tm-role-border-subtle)); border-radius: var(--tm-radius-pill); padding: var(--tm-space-1) var(--tm-space-3); font-size: var(--tm-fs-caption); font-weight: 800; color: var(--text, var(--tm-role-text-primary)); background: color-mix(in srgb, var(--tm-role-text-primary) 4%, transparent); } .badge--accent { background: color-mix(in srgb, var(--tm-role-accent) 10%, transparent); color: var(--tm-role-accent); border-color: color-mix(in srgb, var(--tm-role-accent) 30%, transparent); } .chip .dot { width: 6px; height: 6px; margin-top: 0; } /* ===== css/tm-essence/07-components/footer.css ===== */ /** * Pie institucional — layout compacto, contraste y redes. * Fondo/tinta por tema: tm-essence/07-components/section.css (footer#contacto). */ footer.siteFooter, footer#contacto { padding: clamp(28px, 3.5vw, 36px) 0 clamp(18px, 2.5vw, 24px); border-top: 1px solid var(--line); } .footGrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, auto); gap: clamp(18px, 3vw, 32px); margin-bottom: clamp(18px, 2.5vw, 24px); align-items: start; } .footCol { min-width: 0; } .footCol--contact, .footCol--social { padding-left: clamp(16px, 2.5vw, 24px); border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } .footBrand__logoLink { display: inline-block; margin-bottom: 10px; text-decoration: none; } .footBrand__logo { display: block; height: auto; width: min(172px, 64vw); max-height: 58px; object-fit: contain; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #fff 94%, var(--accent) 6%); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--tm-role-canvas, #0f172a) 14%, transparent); } html[data-theme="light"] footer#contacto .footBrand__logo { background: color-mix(in srgb, #fff 96%, var(--accent) 4%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset, 0 8px 22px rgba(0, 0, 0, 0.2); } .footBrand__desc { margin: 0; font-size: 14px; line-height: 1.55; max-width: 21rem; color: color-mix(in srgb, var(--text) 76%, var(--muted)); } .footH { color: var(--text); font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 10px; } .footH--spaced { margin-top: 14px; } .footA { display: block; color: color-mix(in srgb, var(--text) 80%, var(--bg) 20%); margin-bottom: 6px; font-size: 14px; line-height: 1.45; text-decoration: none; transition: color 0.22s ease; } .footA:hover { color: var(--accent); } .footA--ubicacion { font-style: normal; } .footUbicacion { margin: 0; font-style: normal; } .footSocial { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: clamp(8px, 1.5vw, 12px); margin-bottom: 12px; } .footSocial__link { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 11vw, 56px); height: clamp(48px, 11vw, 56px); max-width: 64px; max-height: 64px; padding: 0; margin: 0; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; text-decoration: none; transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s ease; } .footSocial__icon { width: clamp(22px, 4.5vw, 28px); height: clamp(22px, 4.5vw, 28px); flex-shrink: 0; fill: currentColor; opacity: 1; } .footSocial__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (hover: hover) and (pointer: fine) { .footSocial__link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); transform: translateY(-2px); } } .footFlag { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; line-height: 0; background: transparent; } .footFlag img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; box-shadow: none; background: transparent; } .legal { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; } .legal__copy { color: inherit; font-weight: 500; } .legal__links { display: flex; flex-wrap: wrap; gap: 12px 16px; } .footA--legal { display: inline; margin: 0; font-size: 13px; } /* Cookie banner (partial 04-post-main) */ .cookieBanner { position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 500px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 20px; transform: translateY(150%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; visibility: hidden; } .cookieBanner.show { transform: translateY(0); pointer-events: auto; visibility: visible; } .cookieContent p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .cookieContent strong { color: var(--text); } .cookieLink { color: var(--accent); font-weight: 800; text-decoration: underline; } .cookieBtn { background: var(--accent); color: var(--ink-on-accent); border: none; padding: 12px 24px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.22s ease, filter 0.22s ease; white-space: nowrap; } .cookieBtn:hover { transform: translateY(-2px); filter: brightness(1.08); } html[data-theme="light"] .cookieBanner { background: var(--tm-role-surface, var(--panel)); border-color: var(--tm-role-border-subtle, var(--line)); } html[data-theme="light"] .cookieContent p { color: var(--tm-role-text-muted, var(--muted)); } html[data-theme="light"] .cookieContent strong { color: var(--tm-role-text-primary, var(--text)); } html[data-theme="light"] .cookieLink { color: var(--accent); } @media (max-width: 900px) { .footGrid { grid-template-columns: 1fr; gap: 22px; } .footCol--contact, .footCol--social { padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .footCol--contact { padding-top: 0; border-top: none; } .footSocial { justify-content: flex-start; } } @media (max-width: 640px) { .legal { flex-direction: column; align-items: flex-start; text-align: left; } .cookieBanner { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; } .cookieBtn { width: 100%; } } /* Ocultar pie en /programas/ embebido en iframe del index */ html.tm-prog-embedded footer#contacto, html.tm-prog-embedded #cookieBanner { display: none !important; } /* ===== css/index.css ===== */ /* index.html — estilos extraídos del