/* ========================================================================= Mes del corazón 2026 · landing (key visual) ------------------------------------------------------------------------- Figma: um7dq0nZbvFr9Be3sBkmbX · desktop 2:273 · mobile 2:3023 Lo de la biblioteca (header, footer, botones, logos de convenios) no se toca aquí. Este archivo es la capa de campaña: paleta del KV, tipografía display, troquel de estampilla, destellos y las secciones propias. El creador vive en creador.css. ========================================================================= */ /* ── Tipografía display del KV ───────────────────────────────────────────── ⚠️ Built Titling (Typodermic). El TTF solo trae permiso de embebido «preview & print»: confirmar la licencia web antes de publicar. */ @font-face { font-family: 'Built Titling'; src: url('fonts/built-titling-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Tokens de campaña ─────────────────────────────────────────────────── */ :root { --mc-azul: var(--lc-blue-royal); /* #002D72 */ --mc-rojo: #BA1741; --mc-rojo-lacardio: var(--lc-red-500); /* #E40046 */ --mc-rosa: #FD71AB; --mc-amarillo: #FCF39E; --mc-celeste: #B8D8E9; --mc-celeste-600: #ADCBDB; --mc-celeste-light: #EDF5F9; --mc-violeta: #402230; --mc-texto: var(--lc-ink); /* #080808 */ --mc-texto-2: var(--lc-ink-700); /* #474644 */ --mc-texto-3: #83827F; --mc-font-display: 'Built Titling', 'Fira Sans Condensed', 'Arial Narrow', sans-serif; /* Troquel de las secciones: medido en los SVG de Figma (r 12, paso ≈ 41) */ --mc-troquel-r: 12px; --mc-troquel-p: 41px; --mc-sombra-sel: 0 5px 4.1px -1px rgba(0, 0, 0, 0.25); } /* ── Titulares ─────────────────────────────────────────────────────────── */ .mc-h1, .mc-h2 { margin: 0; font-family: var(--mc-font-display); font-weight: 700; text-transform: uppercase; } .mc-h1 { font-size: 46px; line-height: 1.2; } .mc-h2 { font-size: 40px; line-height: 52px; letter-spacing: -0.01em; } .mc-eyebrow { margin: 0; font-family: var(--lc-font-heading); font-size: 14px; line-height: 14px; letter-spacing: 0.26em; text-transform: uppercase; } /* Enlace con flecha sobre oscuro: «Conoce el servicio» */ .mc-link { display: inline-flex; align-items: center; gap: 2px; font-family: var(--lc-font-body); font-size: 16px; font-weight: 700; line-height: 20px; color: var(--lc-white); text-decoration: underline; text-underline-offset: 3px; } .mc-link img { width: 24px; height: 24px; transition: transform .2s ease; } .mc-link:hover { color: var(--lc-white); } .mc-link:hover img { transform: translateX(3px); } .mc-link:focus-visible { outline: 2px solid var(--mc-amarillo); outline-offset: 3px; } .mc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Troquel de estampilla ───────────────────────────────────────────────── Las secciones «estampilla» (creador, agenda) tienen mordidas arriba y abajo por las que se ve el azul de la página. Se dibujan como semicírculos del color vecino encima del borde, no con máscara: así no dependen de qué sección quede detrás. */ .mc-troquel-y { position: relative; } .mc-troquel-y::before, .mc-troquel-y::after { content: ""; position: absolute; left: 0; right: 0; height: var(--mc-troquel-r); pointer-events: none; z-index: 1; } .mc-troquel-y::before { top: 0; background: radial-gradient(circle at 50% 0, var(--mc-azul) var(--mc-troquel-r), transparent calc(var(--mc-troquel-r) + .5px)) center top / var(--mc-troquel-p) var(--mc-troquel-r) repeat-x; } .mc-troquel-y::after { bottom: 0; background: radial-gradient(circle at 50% 100%, var(--mc-azul) var(--mc-troquel-r), transparent calc(var(--mc-troquel-r) + .5px)) center bottom / var(--mc-troquel-p) var(--mc-troquel-r) repeat-x; } /* ── Destellos ───────────────────────────────────────────────────────────── Suben y bajan en bucle, desfasados para que no se muevan en bloque. --espejo: en Figma algunos están volteados en horizontal. */ .mc-destello { position: absolute; width: 80px; height: auto; pointer-events: none; z-index: 2; --flip: 1; animation: mc-flotar 3.2s ease-in-out infinite; } .mc-destello--espejo { --flip: -1; } @keyframes mc-flotar { 0%, 100% { transform: translateY(0) scale(var(--flip), 1); } 50% { transform: translateY(-14px) scale(calc(var(--flip) * 1.04), 1.04); } } @media (prefers-reduced-motion: reduce) { .mc-destello { animation: none; } } /* ========================================================================= PORTADA ========================================================================= */ .mc-hero { position: relative; padding: 40px 20px 32px; background: var(--mc-azul); z-index: 2; /* el personaje pisa la sección siguiente */ } .mc-hero__breadcrumb { position: absolute; top: 12px; left: 24px; --bc-color: var(--lc-white); } .mc-hero__panel { position: relative; max-width: 1400px; min-height: 440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 453px) minmax(0, 588px); justify-content: space-between; align-items: start; padding: 0 100px 0 99px; background: var(--mc-rojo); } /* Troquel en los cuatro lados: semicírculos del azul de la página */ .mc-hero__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; --r: 12px; --p: 40px; background: radial-gradient(circle at 50% 0, var(--mc-azul) var(--r), transparent calc(var(--r) + .5px)) center top / var(--p) var(--r) repeat-x, radial-gradient(circle at 50% 100%, var(--mc-azul) var(--r), transparent calc(var(--r) + .5px)) center bottom / var(--p) var(--r) repeat-x, radial-gradient(circle at 0 50%, var(--mc-azul) var(--r), transparent calc(var(--r) + .5px)) left center / var(--r) var(--p) repeat-y, radial-gradient(circle at 100% 50%, var(--mc-azul) var(--r), transparent calc(var(--r) + .5px)) right center / var(--r) var(--p) repeat-y; } .mc-hero__texto { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 24px; margin-top: 64px; padding-right: 24px; } .mc-hero__titulo { color: var(--lc-white); } .mc-hero__titulo strong { font-weight: 700; } /* Desktop: los dos botones van en fila (Figma 51:3495) */ .mc-hero__acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; } .mc-hero__acciones .lc-btn--primary { min-width: 256px; } .mc-hero__arte { position: relative; margin-top: 65px; margin-bottom: -86px; /* los pies salen del panel, como en el KV */ } .mc-hero__personaje { width: 100%; height: auto; } .mc-hero__destello-1 { left: 0.7%; top: -41px; } .mc-hero__destello-2 { left: 84.3%; top: 50%; animation-delay: -1.6s; } /* El claim quedó dentro de la columna de texto, en una sola línea (Figma 52:4298) */ .mc-hero__claim { position: relative; margin: 0; color: var(--mc-amarillo); font-family: var(--lc-font-body); font-weight: 600; font-size: 28px; line-height: 1.17; } .mc-hero__claim-num { font-family: var(--mc-font-display); font-weight: 700; font-size: 46px; line-height: 1.2; } .mc-hero__claim-fuente { display: block; margin-top: 12px; font-size: 14px; font-weight: 400; line-height: 1.1; } /* ========================================================================= ESPECIALIDADES ========================================================================= */ .mc-especialidades { padding: 64px var(--lc-page-pad-x); background: var(--mc-azul); color: var(--lc-white); } .mc-especialidades .mc-h2 { padding: 10px; text-align: center; } .mc-especialidades__layout { display: grid; grid-template-columns: minmax(0, 1fr) 384px minmax(0, 1fr); gap: 24px; align-items: center; max-width: var(--lc-grid-content); margin: 40px auto 0; padding: 0; } .mc-servicios { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; } .mc-servicios--der { padding-left: 24px; } .mc-servicios--der .mc-servicio { padding-right: 0; } .mc-servicio { display: flex; gap: 12px; align-items: flex-start; padding: 20px 24px 20px 0; } .mc-servicio__icono { flex: none; width: 47px; height: 48px; } .mc-servicio__icono--caja { display: grid; place-items: center; border-radius: var(--lc-radius-md); background: var(--mc-amarillo); } .mc-servicio__icono--caja img { width: 24px; height: 24px; } .mc-servicio__cuerpo { display: flex; flex-direction: column; gap: 8px; } .mc-servicio__titulo { margin: 0; font-family: var(--mc-font-display); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--mc-amarillo); } .mc-especialidades__retrato { position: relative; margin: 0; } .mc-especialidades__retrato > img:first-child { width: 100%; height: auto; } .mc-esp__destello-1 { left: 92%; top: -59px; } .mc-esp__destello-2 { left: -7%; top: 40%; animation-delay: -1.1s; } /* ========================================================================= CONTACTO-DIRECTO (agenda + convenios) ========================================================================= */ .mc-agenda { padding: 64px var(--lc-page-pad-x) 58px; /* Ahora es la última sección: el cliente pidió 84px de aire antes del footer */ background: var(--mc-rojo); color: var(--lc-white); } .mc-agenda__intro { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 24px; align-items: center; max-width: 996px; margin: 0 auto; } .mc-agenda__arte { position: relative; } .mc-agenda__arte > img:first-child { width: 100%; height: auto; } .mc-agenda__destello-1 { left: -4.3%; top: 79%; animation-delay: -.8s; } .mc-agenda__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-right: 40px; } .mc-agenda__texto .mc-h2 { margin-bottom: -16px; } .mc-agenda__lead { margin: 0; font-size: 18px; line-height: 24px; letter-spacing: 0.015em; } .mc-agenda__convenios { position: relative; max-width: var(--lc-grid-content); margin: 40px auto 0; padding: 0 17px; } .mc-agenda__convenios-titulo { margin: 0 0 24px; font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.02em; text-align: center; } .mc-agenda__convenios .lc-contact-band__logo-item { width: 110px; } .mc-agenda__destello-2 { right: 0; top: 55px; animation-delay: -2.2s; } /* ========================================================================= TABLET · se compacta sin cambiar de estructura ========================================================================= */ @media (max-width: 1279.98px) { .mc-hero__panel { padding: 0 48px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } .mc-hero__titulo { font-size: 40px; } .mc-hero__claim { font-size: 24px; } .mc-hero__claim-num { font-size: 40px; } .mc-especialidades__layout { padding: 0; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); } } /* ========================================================================= MOBILE · Figma 2:3023 (375) ========================================================================= */ @media (max-width: 991.98px) { .mc-h1 { font-size: 32px; line-height: 40px; } .mc-h2 { font-size: 32px; line-height: 40px; } /* Portada: un bloque apilado dentro de la estampilla */ .mc-hero { padding: 46px 10px 32px; } .mc-hero__panel { display: flex; flex-direction: column; min-height: 0; padding: 48px 0 32px; } .mc-hero__arte { order: -1; width: 315px; max-width: calc(100% - 40px); margin: 0 auto; } .mc-hero__destello-1 { left: -4%; top: -32px; width: 71px; } .mc-hero__destello-2 { left: 83%; top: 70%; width: 63px; } .mc-hero__texto { margin: 0; padding: 12px 30px; gap: 24px; } .mc-hero__titulo { font-size: 37px; line-height: 45px; } .mc-hero__acciones { flex-direction: column; gap: 10px; align-self: stretch; } .mc-hero__acciones .lc-btn { width: 100%; min-width: 0; } .mc-hero__claim { font-size: 24px; } .mc-hero__claim-num { font-size: 37px; } /* Especialidades: retrato arriba, servicios en una columna */ .mc-especialidades { padding: 40px 24px; } .mc-especialidades__layout { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; } .mc-especialidades__retrato { order: -1; width: 100%; max-width: 327px; margin: 0 auto; } .mc-servicios, .mc-servicios--der { width: 100%; gap: 24px; padding: 0; } .mc-servicio { padding: 0; } .mc-esp__destello-1, .mc-esp__destello-2 { display: none; } /* Agenda */ .mc-agenda { padding: 64px 24px; } .mc-agenda__intro { grid-template-columns: 1fr; gap: 24px; } .mc-agenda__arte { max-width: 327px; margin: 0 auto; } .mc-agenda__texto { padding: 0; } .mc-agenda__texto .mc-h2 { margin-bottom: -16px; } .mc-agenda__texto .lc-btn { width: 100%; } .mc-agenda__destello-1, .mc-agenda__destello-2 { display: none; } .mc-agenda__convenios { margin-top: 24px; padding: 0; } .mc-agenda__convenios-titulo { font-size: 18px; line-height: 24px; } .mc-agenda__convenios .lc-contact-band__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .mc-agenda__convenios .lc-contact-band__logo-item { width: 134px; } } /* ========================================================================= FAB DE CONTACTO El botón del FAB del sitio, sin su panel: aquí es un enlace directo a WhatsApp. El componente ya resuelve el mobile (se sube sobre la bottom nav y se queda solo con el icono), así que esta capa solo cambia el icono y lo que un necesita frente a un