/* Buttons */ .konekta-btn { display: inline-flex; align-items: center; gap: 0.75em; background: var(--kmc-color-pink); color: var(--kmc-color-white); font-family: var(--kmc-font-body); font-weight: 500; text-decoration: none; padding: 0.4em 0.4em 0.4em 1.25em; border-radius: var(--kmc-radius-pill); border: none; cursor: pointer; transition: transform var(--kmc-transition), box-shadow var(--kmc-transition); } /* * El mismo botón, escrito dos veces a propósito. * * Mientras Elementor siga pintando la cabecera y el pie, el lleva su * clase `elementor-kit-19` y con ella viene esta regla suya: * * .elementor-kit-19 a { color: var(--e-global-color-accent); ... } * * Ese color es el ROSA de la marca, el mismo que el fondo del botón: en * producción "Reservar Cita Online" salía rosa sobre rosa, ilegible. Su regla * pesa más que `.konekta-btn` a secas y además carga después. * * Repetir la clase sube el peso de la nuestra sin ensuciar el HTML. Esto se * quita el día que la cabecera y el pie dejen de ser de Elementor. */ .konekta-btn.konekta-btn { color: var(--kmc-color-white); font-family: var(--kmc-font-body); font-size: 1rem; font-weight: 500; line-height: 1.6; } .konekta-btn--outline.konekta-btn--outline { color: var(--kmc-color-navy); } .konekta-btn--white.konekta-btn--white { color: var(--kmc-color-navy); } .konekta-btn--fantasma.konekta-btn--fantasma { color: var(--kmc-color-white); } .konekta-btn:hover, .konekta-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232, 165, 195, 0.45); } .konekta-btn--outline { background: transparent; color: var(--kmc-color-navy); border: 1px solid var(--kmc-color-navy); padding: 0.75em 1.5em; } .konekta-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--kmc-color-white); color: var(--kmc-color-pink); flex-shrink: 0; } .konekta-btn__icon svg { width: 1em; height: 1em; } /* Cards (service, doctor, trust) */ .konekta-card { /* `display: block` no es opcional: la tarjeta es un , y como elemento en línea el relleno no empuja el texto y las tarjetas se solapaban. */ display: block; background: var(--kmc-color-white); border-radius: var(--kmc-radius-card); padding: 1.5rem; box-shadow: 0 4px 20px rgba(37, 52, 78, 0.06); } /* Rejilla de tarjetas. `.konekta-footer__grid` es el nombre con el que quedó guardada en el contenido migrado; se mantiene como alias para no reescribir el contenido de las páginas. */ .konekta-grid, .konekta-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-block: 1.5rem; } /* Breadcrumb */ .konekta-breadcrumb { font-size: 0.875rem; color: var(--kmc-color-ink-soft); } .konekta-breadcrumb a { color: inherit; } /* FAQ (native

, no JS accordion library) */ .konekta-faq details { border-bottom: 1px solid rgba(37, 52, 78, 0.12); padding-block: 1rem; } .konekta-faq summary { cursor: pointer; font-family: var(--kmc-font-heading); color: var(--kmc-color-navy); } /* Tamaños de titular por componente. La escala global pone h2 en 46px y h3 en 24px, que es lo que usa producción para los titulares de sección y sus subtítulos. Estos componentes son la excepción: en producción sus titulares van a 18px. */ a.konekta-card h3, .konekta-trust__card h3 { font-size: var(--kmc-h4-size); } /* Producción pone este destacado a 36px. */ .konekta-info-strip__item--accent h3 { font-size: 2.25rem; } /* Las tarjetas de artículo reutilizan la plantilla de tarjeta de servicio, pero en producción su titular va a 24px, no a 18px. */ .konekta-post-grid a.konekta-card h3 { font-size: var(--kmc-h3-size); } /* Títulos de entrada en el archivo del blog: son enlaces de listado, no titulares de sección. */ .konekta-container > article h2, article.post h2 { font-size: 1.5rem; } /* --------------------------------------------------------------------------- Componentes que en producción construía Elementor. Los cinco widgets que levantan el cuerpo de las páginas internas son icon-list (661 usos), icon-box (574), botón (337), icono suelto (172) y acordeón. Aquí están como CSS propio, sin ninguna dependencia. --------------------------------------------------------------------------- */ /* Lista con marca de verificación. Sustituye a los "✅" pegados en el texto: el emoji lo lee el lector de pantalla como "marca de verificación blanca" delante de cada punto, que es ruido. Aquí el icono es decorativo y el texto queda limpio. */ .konekta-checklist { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.75rem; } .konekta-checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; } .konekta-checklist li::before { content: ""; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; border-radius: 50%; background-color: rgba(232, 165, 195, 0.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23C4779C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1rem; } /* Cajas de icono: icono en círculo, titular y texto. */ .konekta-features { list-style: none; margin: 2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; } .konekta-feature { display: grid; gap: 0.75rem; align-content: start; } .konekta-feature__icon { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(232, 165, 195, 0.22); color: var(--kmc-color-pink); display: inline-flex; align-items: center; justify-content: center; } .konekta-feature h3 { margin: 0; font-size: var(--kmc-h4-size); } .konekta-feature p { margin: 0; color: var(--kmc-color-ink); } /* Aviso destacado (el "bloque informativo" de producción). */ .konekta-callout { background: var(--kmc-color-surface); border-radius: var(--kmc-radius-card); padding: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin: 2rem 0; } .konekta-callout__icon { color: var(--kmc-color-pink); margin-top: 0.15rem; } .konekta-callout > div > :first-child { margin-top: 0; } .konekta-callout > div > :last-child { margin-bottom: 0; } /* Etiqueta corta ("30 Años Experiencia", "Médico Colegiado"). */ .konekta-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: var(--kmc-radius-pill); background: rgba(232, 165, 195, 0.18); color: var(--kmc-color-navy); font-family: var(--kmc-font-heading); font-size: 0.85rem; font-weight: 500; } /* Servicios relacionados: se derivan del árbol de páginas, no se mantienen a mano en cada servicio como en producción. */ .konekta-related__grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .konekta-related__card { display: grid; gap: 0.75rem; align-content: space-between; height: 100%; padding: 1.25rem; border-radius: var(--kmc-radius-card); background: var(--kmc-color-surface); color: var(--kmc-color-navy); transition: box-shadow var(--kmc-transition), transform var(--kmc-transition); } .konekta-related__card:hover, .konekta-related__card:focus-visible { box-shadow: 0 12px 28px rgba(37, 52, 78, 0.12); transform: translateY(-2px); } .konekta-related__title { font-family: var(--kmc-font-heading); font-weight: 600; } .konekta-related__more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--kmc-color-pink); font-size: 0.9rem; } @media (prefers-reduced-motion: reduce) { .konekta-related__card:hover, .konekta-related__card:focus-visible { transform: none; } } /* Tarifas: nombre, descripción y precio. Producción las presenta en tarjetas, no como texto suelto. */ .konekta-precios { list-style: none; margin: 2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; } .konekta-precio { background: var(--kmc-color-white); border-radius: var(--kmc-radius-card); box-shadow: 0 8px 30px rgba(37, 52, 78, 0.08); padding: 1.75rem 1.5rem; display: grid; gap: 0.35rem; align-content: start; text-align: center; } .konekta-precio h3 { margin: 0; font-size: var(--kmc-h4-size); color: var(--kmc-color-navy); } .konekta-precio__desc { margin: 0; color: var(--kmc-color-ink); font-size: 0.9rem; } .konekta-precio__valor { margin: 0.5rem 0 0; font-family: var(--kmc-font-heading); font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--kmc-color-pink); } /* El relleno de .konekta-btn es asimétrico a propósito: deja sitio al icono circular del final. Un botón sin icono —el de enviar el formulario— necesita el relleno parejo, o el texto queda pegado al borde derecho. */ .konekta-btn--solo { padding: 0.75em 1.5em; justify-content: center; }