/* ==========================================================================
qms-theme.css — Quintana Medical Services — Ronda 7 (final)
Capa visual reversible. Activación: + .
Desactivación: quitar la clase del y el . No cambia contenido ni DOM.
Todas las reglas van bajo :where(html.qms-theme) → el prefijo no suma
especificidad; la especificidad real es la del selector .qms-*.
========================================================================== */
/* -------- 1. Tokens: CLARO (0,0,0) — regla base ------------------------- */
:where(html.qms-theme),
:where(html.qms-theme .qms-light),
:where(html.qms-theme .qms-light-2),
:where(html.qms-theme .qms-card) {
--qms-fg: #0F2A1A;
--qms-fg-2: #3F5A48;
--qms-link: #113F25;
--qms-accent: #7A5D2E;
--qms-focus: #113F25;
--qms-hair: rgba(17, 63, 37, .16);
--qms-sh: 0 10px 30px rgba(7, 28, 16, .12), 0 2px 6px rgba(7, 28, 16, .08);
--qms-sh-hi: inset 0 1px 0 rgba(255, 255, 255, .85);
--qms-sage-text: #4E6A3C;
--qms-ghost-hover: rgba(17, 63, 37, .08);
}
/* -------- 2. Tokens: OSCURO (0,1,0) — va DESPUÉS y con más especificidad.
.qms-card y .qms-card--dark son EXCLUYENTES (nunca ambas en el mismo
elemento). Si alguien las combina, esta regla prevalece igualmente. ---- */
:where(html.qms-theme) .qms-deep,
:where(html.qms-theme) .qms-card--dark {
--qms-fg: #FAF9F5;
--qms-fg-2: #C9D2C6;
--qms-link: #FAF9F5;
--qms-accent: #D9BE86;
--qms-focus: #D9BE86;
--qms-hair: rgba(250, 249, 245, .14);
--qms-sh: 0 14px 36px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
--qms-sh-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
--qms-sage-text: #C9D2C6;
--qms-ghost-hover: rgba(250, 249, 245, .10);
}
/* -------- 3. Fondo global (desplazamiento normal; sin attachment fixed) -- */
:where(html.qms-theme) {
overflow-x: clip;
background-color: #0C2E1B;
background-image:
radial-gradient(120% 80% at 15% 0%, rgba(122, 156, 128, .22) 0%, rgba(122, 156, 128, 0) 60%),
linear-gradient(160deg, #0C2E1B 0%, #113F25 100%);
background-repeat: no-repeat;
min-height: 100%;
}
:where(html.qms-theme) body {
background: transparent;
overflow-x: clip;
}
:where(html.qms-theme) .q-hero {
overflow: hidden;
}
/* -------- 4. Superficies ------------------------------------------------ */
:where(html.qms-theme) .qms-deep {
background: transparent;
color: var(--qms-fg);
}
:where(html.qms-theme) .qms-deep svg {
color: var(--qms-accent);
}
:where(html.qms-theme) .qms-light {
background: #FAF9F5;
color: var(--qms-fg);
}
:where(html.qms-theme) .qms-light-2 {
background: #F2F0E8;
color: var(--qms-fg);
}
/* .qms-header: superficie clara elegante tanto al inicio como al hacer scroll.
El logo y los enlaces de navegación conservan contraste nítido y nunca se pierden.
NUNCA aplicar .qms-deep ni otra superficie a un ancestro del header/logo. */
:where(html.qms-theme) .qms-header {
background: rgba(250, 251, 247, 0.96);
box-shadow: 0 1px 0 rgba(17, 63, 37, .08);
}
:where(html.qms-theme) .qms-header.is-scrolled,
:where(html.qms-theme) .q-header.is-scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(7, 28, 16, .08);
}
/* -------- 5. Sección: ritmo y contenedor ------------------------------- */
:where(html.qms-theme) .qms-section {
box-sizing: border-box;
padding-inline: max(clamp(1rem, 4vw, 3rem), calc((100% - 1200px) / 2));
padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
/* -------- 6. Grid opt-in (3/2/1). Solo si TODOS los hijos son tarjetas.
AMPLIAR CON INVENTARIO: añadir aquí cada mecanismo de ocultación que use
el sitio (clases de utilidades, atributos) antes de producción. ------- */
:where(html.qms-theme) .qms-grid:where(:not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not(.d-none)) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, .75rem + 1.5vw, 2rem);
}
:where(html.qms-theme) .qms-grid > :where(*) {
min-width: 0;
}
@media (max-width: 62rem) {
:where(html.qms-theme) .qms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
:where(html.qms-theme) .qms-grid { grid-template-columns: minmax(0, 1fr); }
}
/* -------- 7. Tarjetas (clases excluyentes: .qms-card O .qms-card--dark) - */
:where(html.qms-theme) :where(.qms-card, .qms-card--dark) {
box-sizing: border-box;
border-radius: 16px;
padding: clamp(1.25rem, 1rem + 1vw, 2rem);
box-shadow: var(--qms-sh), var(--qms-sh-hi);
border: 1px solid var(--qms-hair);
color: var(--qms-fg);
}
:where(html.qms-theme) .qms-card { background: #FFFFFF; }
:where(html.qms-theme) .qms-card--dark { background: #1B4A30; }
/* -------- 8. Fotos y elevación (sin tocar display/height/overflow) ----- */
:where(html.qms-theme) .qms-photo {
border-radius: 12px;
outline: 1px solid var(--qms-hair);
outline-offset: -1px;
box-shadow: var(--qms-sh);
}
:where(html.qms-theme) .qms-elev-2 {
box-shadow: 0 24px 60px rgba(7, 28, 16, .22), 0 4px 12px rgba(7, 28, 16, .12);
}
/* -------- 9. Tipografía por clase (opt-in; nunca font-family) ---------- */
:where(html.qms-theme) :is(.qms-h1, h1.qms-h1) {
font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
line-height: 1.1;
letter-spacing: -.01em;
font-weight: 600;
color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-h2, h2.qms-h2) {
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
line-height: 1.15;
letter-spacing: -.005em;
font-weight: 600;
color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-h3, h3.qms-h3) {
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
line-height: 1.3;
font-weight: 600;
color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-body, p.qms-body, span.qms-body) {
font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
line-height: 1.6;
color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-secondary, p.qms-secondary, span.qms-secondary) {
font-size: clamp(.875rem, .85rem + .15vw, .9375rem);
line-height: 1.5;
color: var(--qms-fg-2);
}
:where(html.qms-theme) .qms-price {
font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
line-height: 1.2;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--qms-accent);
}
:where(html.qms-theme) .qms-label-sage {
font-size: .8125rem;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
color: var(--qms-sage-text);
}
/* -------- 10. Enlaces (opt-in). Nav: SOLO a.qms-nav-link; nunca al logo. */
:where(html.qms-theme) a.qms-link:not(.qms-btn) {
color: var(--qms-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: var(--qms-accent);
}
:where(html.qms-theme) a.qms-nav-link {
color: var(--qms-fg);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
:where(html.qms-theme) a.qms-link:not(.qms-btn):hover { text-decoration-thickness: 2px; }
:where(html.qms-theme) a.qms-nav-link:hover { color: var(--qms-accent); }
}
/* -------- 11. Botones. Sin display. Los estados disabled/loading NO reciben
NINGÚN estilo del tema (base, variantes, hover, foco, transición).
AMPLIAR CON INVENTARIO: estados de carga/deshabilitado del sitio. ------ */
:where(html.qms-theme) .qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
box-sizing: border-box;
border-radius: 999px;
padding: .75em 1.5em;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border: 1px solid var(--qms-focus);
background: #113F25;
color: #FAF9F5;
box-shadow: 0 6px 16px rgba(7, 28, 16, .18);
}
:where(html.qms-theme) .qms-btn.qms-btn--gold:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
background: #AE8A4C;
color: #071C10;
border-color: var(--qms-accent);
}
:where(html.qms-theme) .qms-btn.qms-btn--ghost:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
background: transparent;
color: var(--qms-fg);
border-color: var(--qms-hair);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
:where(html.qms-theme) .qms-btn:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
background: #1A4D2E;
box-shadow: 0 8px 20px rgba(7, 28, 16, .24);
}
:where(html.qms-theme) .qms-btn.qms-btn--gold:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
background: #B8955A;
}
:where(html.qms-theme) .qms-btn.qms-btn--ghost:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
background: var(--qms-ghost-hover);
box-shadow: none;
}
}
/* -------- 12. Foco visible (teclado) ------------------------------------ */
:where(html.qms-theme) :where(.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])), a.qms-link, a.qms-nav-link):focus-visible {
outline: 2px solid var(--qms-focus);
outline-offset: 3px;
}
/* -------- 13. Campos: aspecto hundido. Lista explícita de tipos.
Excluye disabled/readonly/aria-invalid/etc.
AMPLIAR CON INVENTARIO: clases de estado del sitio (error, success…),
incluidas las definidas en un padre (.has-error *, .form-group.error *). */
:where(html.qms-theme) .qms-field:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)) {
box-sizing: border-box;
background: #F4F2EB;
color: #0F2A1A;
border: 1px solid rgba(17, 63, 37, .24);
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(17, 63, 37, .12);
padding: .7em .9em;
}
:where(html.qms-theme) .qms-field:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *))::placeholder {
color: #3F5A48;
opacity: 1;
}
/* Foco: borde INTERIOR fijo #113F25 (sobre fondo de campo) + ANILLO exterior
contextual var(--qms-focus) (sobre la superficie). Dos capas separadas. */
:where(html.qms-theme) .qms-field:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)):focus-visible {
border-color: #113F25;
outline: 2px solid var(--qms-focus);
outline-offset: 3px;
}
/* -------- 13.b Refinamiento: Enlace de teléfono, botones y ritmo interno de tarjetas */
:where(html.qms-theme) .q-phone-link {
display: none;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 700;
color: var(--qms-fg);
text-decoration: none;
white-space: nowrap;
letter-spacing: -0.01em;
padding: 8px 18px;
border-radius: 999px;
background: rgba(17, 63, 37, 0.08);
border: 1px solid rgba(17, 63, 37, 0.2);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
:where(html.qms-theme) .q-phone-link:hover {
background: rgba(17, 63, 37, 0.15);
border-color: rgba(17, 63, 37, 0.35);
color: var(--qms-link);
transform: translateY(-1px);
}
:where(html.qms-theme) .q-phone-link svg {
color: var(--qms-accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
:where(html.qms-theme .qms-deep) .q-phone-link {
color: #FAF9F5;
background: rgba(250, 249, 245, 0.12);
border: 1px solid rgba(250, 249, 245, 0.28);
}
:where(html.qms-theme .qms-deep) .q-phone-link:hover {
background: rgba(250, 249, 245, 0.22);
border-color: #FAF9F5;
color: #FAF9F5;
}
:where(html.qms-theme .qms-deep) .q-phone-link svg {
color: #D9BE86;
}
@media (min-width: 1024px) {
:where(html.qms-theme) .qms-header .q-phone-link,
:where(html.qms-theme) .q-phone-link {
display: inline-flex;
}
}
/* Botón secundario del Hero ("Discover our care") */
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary,
:where(html.qms-theme .qms-deep) .qms-btn--ghost {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #FAF9F5;
background: rgba(250, 249, 245, 0.08);
border: 1.5px solid rgba(250, 249, 245, 0.42);
border-radius: 999px;
padding: 0.85rem 1.85rem;
text-decoration: none;
box-shadow: none;
transition: all 0.2s ease;
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary:hover,
:where(html.qms-theme .qms-deep) .qms-btn--ghost:hover {
background: rgba(250, 249, 245, 0.2);
border-color: #FAF9F5;
color: #FAF9F5;
text-decoration: none;
transform: translateY(-1px);
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary .q-btn-arrow,
:where(html.qms-theme .qms-deep) .qms-btn--ghost .q-btn-arrow {
color: var(--qms-accent);
transition: transform 0.2s ease;
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary:hover .q-btn-arrow,
:where(html.qms-theme .qms-deep) .qms-btn--ghost:hover .q-btn-arrow {
transform: translateX(4px);
}
/* Ritmo vertical y espaciado generoso en tarjetas de proceso / pasos (Journey) */
:where(html.qms-theme) .q-step-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
}
:where(html.qms-theme) .q-step-num {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--qms-accent);
margin-bottom: 14px;
}
:where(html.qms-theme) .q-step-title {
font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
line-height: 1.25;
margin-top: 0;
margin-bottom: 14px;
color: var(--qms-fg);
}
:where(html.qms-theme) .q-step-desc {
font-size: 0.9375rem;
line-height: 1.65;
margin-bottom: 0;
color: var(--qms-fg-2);
}
/* Ritmo vertical y espaciado generoso en tarjetas de Servicios (Ecosistema) */
:where(html.qms-theme) .q-eco-card,
:where(html.qms-theme) .q-eco-card:nth-child(n+4) {
padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
display: flex;
flex-direction: column;
}
:where(html.qms-theme) .q-eco-card .q-card-body {
padding: 18px 0 4px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
:where(html.qms-theme) .q-eco-card-top {
margin-bottom: 18px;
flex-grow: 1;
}
:where(html.qms-theme) .q-eco-num {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--qms-accent);
margin-bottom: 10px;
display: inline-block;
}
:where(html.qms-theme) .q-eco-title {
font-size: clamp(1.5rem, 1.3rem + .5vw, 1.85rem);
line-height: 1.2;
margin-top: 0;
margin-bottom: 8px;
color: var(--qms-fg);
}
:where(html.qms-theme) .q-eco-role {
font-size: 0.75rem;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 600;
color: var(--qms-sage-text);
margin-bottom: 14px;
}
:where(html.qms-theme) .q-eco-desc {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--qms-fg-2);
margin-bottom: 0;
}
:where(html.qms-theme) .q-eco-card-bottom {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--qms-hair);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Espaciado en Pilares de Longevidad */
:where(html.qms-theme) .q-pillar-item {
display: flex;
flex-direction: column;
}
:where(html.qms-theme) .q-pillar-title {
margin-top: 10px;
margin-bottom: 14px;
line-height: 1.25;
color: var(--qms-fg);
}
:where(html.qms-theme) .q-pillar-desc {
line-height: 1.65;
color: var(--qms-fg-2);
margin-bottom: 0;
}
/* Espaciado en Tarjetas de Precios y Estética */
:where(html.qms-theme) .q-price-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
:where(html.qms-theme) .q-price-card.featured {
background: #FFFFFF;
border-color: var(--qms-hair);
}
:where(html.qms-theme) .q-price-title {
margin-top: 8px;
margin-bottom: 10px;
line-height: 1.25;
}
:where(html.qms-theme) .q-price-tag {
margin-bottom: 12px;
}
:where(html.qms-theme) .q-price-desc {
margin-bottom: 20px;
line-height: 1.65;
}
:where(html.qms-theme) .q-aesthetics-card-title {
margin-top: 6px;
margin-bottom: 12px;
line-height: 1.25;
}
:where(html.qms-theme) .q-aesthetics-card-desc {
margin-bottom: 14px;
line-height: 1.65;
}
/* Icono de acordeón FAQ: Centrado geométrico perfecto mediante pseudo-elementos */
:where(html.qms-theme) .q-faq-icon {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--qms-hair);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
margin-left: 16px;
color: transparent;
font-size: 0;
line-height: 0;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}
:where(html.qms-theme) .q-faq-icon::before,
:where(html.qms-theme) .q-faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--qms-fg);
border-radius: 1px;
transform: translate(-50%, -50%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
:where(html.qms-theme) .q-faq-icon::before {
width: 12px;
height: 1.5px;
}
:where(html.qms-theme) .q-faq-icon::after {
width: 1.5px;
height: 12px;
}
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon {
border-color: var(--qms-accent);
}
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon::before,
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon::after {
background-color: var(--qms-accent);
}
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon {
transform: rotate(45deg);
background-color: #113F25;
border-color: #113F25;
}
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon::before,
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon::after {
background-color: #FAF9F5;
}
/* -------- 14. Movimiento: transiciones solo si no hay preferencia reducida */
@media (prefers-reduced-motion: no-preference) {
:where(html.qms-theme) :where(.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])), a.qms-link, a.qms-nav-link) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
}
/* -------- 15. Forced colors (acotado a .qms-*). Especificidad ≥ a la de
cada regla que anula, y al final de la hoja: gana por especificidad u orden. */
@media (forced-colors: active) {
:where(html.qms-theme) .qms-card,
:where(html.qms-theme) .qms-card--dark,
:where(html.qms-theme) .qms-btn.qms-btn--gold:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-btn.qms-btn--ghost:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-btn.qms-btn--gold:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-btn.qms-btn--ghost:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-btn:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
:where(html.qms-theme) .qms-field.qms-field:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], textarea, select):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)) {
box-shadow: none;
border: 1px solid CanvasText;
}
:where(html.qms-theme) .qms-btn.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])):focus-visible,
:where(html.qms-theme) a.qms-link.qms-link:focus-visible,
:where(html.qms-theme) a.qms-nav-link.qms-nav-link:focus-visible,
:where(html.qms-theme) .qms-field.qms-field:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], textarea, select):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)):focus-visible {
outline: 2px solid Highlight;
outline-offset: 3px;
border-color: CanvasText;
}
/* elevación: solo se retira la sombra (sin border ni outline) */
:where(html.qms-theme) .qms-elev-2 { box-shadow: none; }
/* header y fotos: contorno que NO altera la caja (sin border) */
:where(html.qms-theme) .qms-header,
:where(html.qms-theme) .qms-photo,
:where(html.qms-theme) .qms-photo.qms-elev-2 { box-shadow: none; outline: 1px solid CanvasText; outline-offset: -1px; }
}
/* Anchor Scroll Margins for Sticky Header */
:where(html.qms-theme) section[id] {
scroll-margin-top: 80px;
}
@media (max-width: 767px) {
:where(html.qms-theme) .q-welcome-actions {
flex-direction: column;
width: 100%;
gap: 10px;
}
:where(html.qms-theme) .q-welcome-scroll-btn,
:where(html.qms-theme) .q-welcome-guide-btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
:where(html.qms-theme) section[id] {
scroll-margin-top: 64px;
}
}
/* -------- 16. Welcome Cinema (Pantalla 1 Completa) -------- */
:where(html.qms-theme) .q-welcome-cinema {
position: relative;
width: 100%;
min-height: calc(100vh - 80px);
min-height: calc(100svh - 80px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #0C2E1B;
color: #FAF9F5;
text-align: center;
padding: 4rem 1.5rem 6rem;
box-sizing: border-box;
}
:where(html.qms-theme) .q-welcome-video-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
:where(html.qms-theme) .q-welcome-video-backdrop video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
filter: saturate(0.95) contrast(1.08);
transition: opacity 0.5s ease;
}
:where(html.qms-theme) .q-welcome-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 45%, rgba(12, 46, 27, 0.42) 0%, rgba(10, 32, 19, 0.74) 65%, rgba(8, 25, 15, 0.92) 100%),
linear-gradient(to bottom, rgba(12, 46, 27, 0.35) 0%, transparent 40%, rgba(12, 46, 27, 0.90) 100%);
}
:where(html.qms-theme) .q-welcome-content {
position: relative;
z-index: 2;
max-width: 820px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}
:where(html.qms-theme) .q-welcome-emblem {
width: 52px;
height: 52px;
object-fit: contain;
margin-bottom: 20px;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}
:where(html.qms-theme) .q-welcome-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(250, 249, 245, 0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(217, 190, 134, 0.35);
color: #D9BE86;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 9999px;
margin-bottom: 22px;
}
:where(html.qms-theme) .q-welcome-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 5vw, 4.2rem);
line-height: 1.15;
max-width: 100%;
word-wrap: break-word;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 18px 0;
letter-spacing: -0.015em;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
:where(html.qms-theme) .q-welcome-tagline {
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.6;
color: #E6ECE8;
max-width: 640px;
margin: 0 0 34px 0;
font-weight: 300;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
:where(html.qms-theme) .q-welcome-scroll-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
border-radius: 9999px;
background: linear-gradient(135deg, rgba(217, 190, 134, 0.95) 0%, rgba(197, 163, 98, 0.95) 100%);
color: #0C2E1B;
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.03em;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(217, 190, 134, 0.25);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
:where(html.qms-theme) .q-welcome-scroll-btn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 28px rgba(217, 190, 134, 0.4);
color: #0C2E1B;
}
:where(html.qms-theme) .q-welcome-scroll-arrow {
animation: q-arrow-bounce 2s infinite ease-in-out;
}
@keyframes q-arrow-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
:where(html.qms-theme) .q-welcome-scroll-indicator {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
color: rgba(250, 249, 245, 0.7);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
transition: color 0.2s ease;
}
:where(html.qms-theme) .q-welcome-scroll-indicator:hover {
color: #D9BE86;
}
/* Floating Curator Preview Bar */
:where(html.qms-theme) .q-hero-preview-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
background: rgba(12, 46, 27, 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(217, 190, 134, 0.4);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
border-radius: 9999px;
padding: 8px 14px;
display: flex;
align-items: center;
gap: 10px;
max-width: 95vw;
animation: q-curator-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes q-curator-slide-up {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
:where(html.qms-theme) .q-preview-bar-inner {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
:where(html.qms-theme) .q-preview-bar-label {
display: flex;
align-items: center;
gap: 6px;
color: #D9BE86;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding-left: 6px;
padding-right: 4px;
white-space: nowrap;
}
:where(html.qms-theme) .q-preview-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #52B788;
box-shadow: 0 0 8px #52B788;
display: inline-block;
}
:where(html.qms-theme) .q-preview-bar-options {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
}
:where(html.qms-theme) .q-pbar-btn {
background: rgba(255, 255, 255, 0.08);
color: #FAF9F5;
border: 1px solid rgba(255, 255, 255, 0.16);
padding: 7px 14px;
border-radius: 9999px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
font-family: inherit;
line-height: 1.2;
}
:where(html.qms-theme) .q-pbar-btn:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(217, 190, 134, 0.5);
color: #FFFFFF;
}
:where(html.qms-theme) .q-pbar-btn.is-active {
background: #D9BE86;
color: #0C2E1B;
font-weight: 600;
border-color: #D9BE86;
box-shadow: 0 4px 14px rgba(217, 190, 134, 0.35);
}
:where(html.qms-theme) .q-pbar-btn-lead {
background: linear-gradient(135deg, rgba(82, 183, 136, 0.25) 0%, rgba(217, 190, 134, 0.25) 100%);
border-color: rgba(217, 190, 134, 0.45);
color: #FAF9F5;
display: inline-flex;
align-items: center;
gap: 5px;
}
:where(html.qms-theme) .q-pbar-btn-lead:hover {
background: linear-gradient(135deg, rgba(82, 183, 136, 0.38) 0%, rgba(217, 190, 134, 0.38) 100%);
border-color: #D9BE86;
}
/* Modal Editorial de Captura de Guía Médica (Lifeforce Elevated) */
:where(html.qms-theme) .q-lead-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(8, 26, 17, 0.58);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
:where(html.qms-theme) .q-lead-modal-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
:where(html.qms-theme) .q-lead-modal-dialog {
/* Cristal Líquido Nevado Translúcido / Frosted Snow Glassmorphism */
background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 250, 248, 0.78) 100%);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
color: #1A1A1A;
border-radius: 24px;
max-width: 520px;
width: 100%;
padding: 42px 36px 34px;
position: relative;
box-shadow:
0 30px 80px rgba(5, 22, 14, 0.40),
0 0 0 1px rgba(255, 255, 255, 0.90) inset,
0 2px 5px rgba(255, 255, 255, 0.95) inset,
inset 0 0 24px rgba(255, 255, 255, 0.35);
border: 1px solid rgba(217, 190, 134, 0.55);
transform: scale(0.94) translateY(12px);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(html.qms-theme) .q-lead-modal-backdrop.is-visible .q-lead-modal-dialog {
transform: scale(1) translateY(0);
}
:where(html.qms-theme) .q-lead-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(12, 46, 27, 0.07);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #0C2E1B;
font-size: 22px;
line-height: 1;
transition: background 0.2s, transform 0.2s;
}
:where(html.qms-theme) .q-lead-modal-close:hover {
background: rgba(12, 46, 27, 0.14);
transform: scale(1.08);
}
:where(html.qms-theme) .q-lead-modal-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 28px;
line-height: 1.25;
font-weight: 600;
color: #0C2E1B;
text-align: center;
margin-bottom: 10px;
}
:where(html.qms-theme) .q-lead-modal-lead {
font-size: 14.5px;
line-height: 1.5;
color: #4A5A50;
text-align: center;
margin-bottom: 22px;
}
:where(html.qms-theme) .q-lead-benefits-list {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
:where(html.qms-theme) .q-lead-benefit-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13.5px;
line-height: 1.45;
color: #2D3A32;
}
:where(html.qms-theme) .q-lead-benefit-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(82, 183, 136, 0.2);
color: #113F25;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
font-size: 12px;
font-weight: bold;
}
:where(html.qms-theme) .q-lead-form {
display: flex;
flex-direction: column;
gap: 12px;
}
:where(html.qms-theme) .q-lead-input {
width: 100%;
height: 48px;
padding: 0 16px;
border-radius: 10px;
border: 1px solid rgba(15, 41, 30, 0.18);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #1A1A1A;
font-size: 14.5px;
font-family: inherit;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
:where(html.qms-theme) .q-lead-input:focus {
background: rgba(255, 255, 255, 0.96);
border-color: #0C2E1B;
box-shadow: 0 0 0 3px rgba(12, 46, 27, 0.12);
}
:where(html.qms-theme) .q-lead-submit {
height: 50px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #D9BE86 0%, #C9A96E 100%);
color: #0C2E1B;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(217, 190, 134, 0.4);
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
:where(html.qms-theme) .q-lead-submit:hover {
filter: brightness(1.05);
box-shadow: 0 6px 18px rgba(217, 190, 134, 0.5);
transform: translateY(-1px);
}
:where(html.qms-theme) .q-lead-disclaimer {
font-size: 12px;
color: #617369;
text-align: center;
margin-top: 14px;
line-height: 1.4;
}
:where(html.qms-theme) .q-lead-consent-group {
display: flex;
flex-direction: column;
gap: 10px;
margin: 10px 0 14px;
text-align: left;
}
:where(html.qms-theme) .q-lead-consent-label {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: #2F3E35 !important;
cursor: pointer !important;
background: rgba(255, 255, 255, 0.68) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(217, 190, 134, 0.38) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
:where(html.qms-theme) .q-lead-consent-label:hover {
background: rgba(255, 255, 255, 0.88) !important;
border-color: rgba(217, 190, 134, 0.7) !important;
box-shadow: 0 2px 8px rgba(15, 41, 30, 0.06);
}
:where(html.qms-theme) .q-lead-consent-label input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
margin-top: 2px !important;
accent-color: #0C2E1B !important;
flex-shrink: 0 !important;
cursor: pointer !important;
}
:where(html.qms-theme) .q-lead-success-view {
text-align: center;
padding: 10px 4px;
}
:where(html.qms-theme) .q-lead-success-badge {
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(82, 183, 136, 0.22);
color: #0C2E1B;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 26px;
border: 2px solid #52B788;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 16px rgba(82, 183, 136, 0.20);
}
:where(html.qms-theme) .q-lead-success-title {
font-family: var(--qms-font-display, inherit);
font-size: 24px;
color: #0C2E1B;
margin-bottom: 8px;
font-weight: 600;
}
:where(html.qms-theme) .q-lead-success-desc {
font-size: 14.5px;
line-height: 1.55;
color: #3F5247;
margin-bottom: 22px;
}
:where(html.qms-theme) .q-lead-success-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Responsive adjustments for Welcome Cinema and Mobile Header */
:where(html.qms-theme) .q-welcome-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 820px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
:where(html.qms-theme) .q-welcome-title {
box-sizing: border-box;
width: 100%;
}
:where(html.qms-theme) .q-welcome-tagline {
box-sizing: border-box;
width: 100%;
}
@media (max-width: 767px) {
:where(html.qms-theme) .q-orbit {
display: none;
}
:where(html.qms-theme) .q-welcome-cinema {
padding: 2.25rem 1rem 4.5rem;
min-height: calc(100vh - 64px);
min-height: calc(100svh - 64px);
}
:where(html.qms-theme) .q-welcome-content {
width: 100%;
max-width: 100%;
padding-inline: 6px;
}
:where(html.qms-theme) .q-welcome-title {
font-size: clamp(1.45rem, 6.6vw, 2.1rem);
margin-bottom: 12px;
text-wrap: balance;
}
:where(html.qms-theme) .q-welcome-eyebrow {
font-size: 10.5px;
padding: 5px 12px;
margin-bottom: 14px;
letter-spacing: 0.06em;
}
:where(html.qms-theme) .q-welcome-tagline {
font-size: 0.90rem;
line-height: 1.5;
margin-bottom: 22px;
padding-inline: 4px;
text-wrap: balance;
}
:where(html.qms-theme) .q-welcome-scroll-btn {
padding: 10px 20px;
font-size: 13px;
}
}
@media (max-width: 520px) {
:where(html.qms-theme) .q-phone-link {
padding: 8px 10px;
}
:where(html.qms-theme) .q-phone-number {
display: none;
}
}
:where(html.qms-theme) .q-lead-trigger-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(217, 190, 134, 0.12);
border: 1px solid rgba(217, 190, 134, 0.35);
color: #D9BE86;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
border-radius: 9999px;
cursor: pointer;
transition: all 0.25s ease;
font-family: inherit;
text-decoration: none;
}
:where(html.qms-theme) .q-lead-trigger-pill:hover {
background: rgba(217, 190, 134, 0.22);
border-color: #D9BE86;
color: #FAF9F5;
transform: translateY(-1px);
}
:where(html.qms-theme) .q-welcome-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
:where(html.qms-theme) .q-welcome-guide-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 26px;
border-radius: 9999px;
background: rgba(250, 249, 245, 0.12);
border: 1px solid rgba(217, 190, 134, 0.45);
color: #FAF9F5;
font-size: 14px;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.25s ease;
font-family: inherit;
text-decoration: none;
}
:where(html.qms-theme) .q-welcome-guide-btn:hover {
background: rgba(217, 190, 134, 0.25);
border-color: #D9BE86;
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
:where(html.qms-theme) .q-welcome-guide-btn svg {
color: #D9BE86;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(html.qms-theme) .q-welcome-guide-btn:hover svg {
transform: translateY(2px);
}
/* Selector Interactivo de Idioma de la Guía Médica (PDF) */
:where(html.qms-theme) .q-lead-lang-picker {
margin: 10px 0 14px;
text-align: left;
}
:where(html.qms-theme) .q-lead-lang-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
:where(html.qms-theme) .q-lead-lang-title {
font-size: 13px;
font-weight: 600;
color: #0F291E;
}
:where(html.qms-theme) .q-lead-lang-hint {
font-size: 11.5px;
color: #5A6D63;
}
:where(html.qms-theme) .q-lead-lang-toggle-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
:where(html.qms-theme) .q-lead-pdf-lang-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(15, 41, 30, 0.16);
color: #384A40;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
:where(html.qms-theme) .q-lead-pdf-lang-btn:hover {
background: rgba(255, 255, 255, 0.90);
border-color: #0F291E;
}
:where(html.qms-theme) .q-lead-pdf-lang-btn.active {
background: #0F291E;
color: #D9BE86;
border-color: #D9BE86;
box-shadow: 0 3px 10px rgba(15, 41, 30, 0.25);
}
:where(html.qms-theme) .q-lead-pdf-lang-btn .q-pdf-lang-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.85;
}
/* Enlace legal del pie de página destacado estilo píldora de alto contraste */
:where(html.qms-theme) .q-footer-legal-links a,
:where(html.qms-theme) .q-legal-pill {
display: inline-flex !important;
align-items: center !important;
padding: 8px 18px !important;
border-radius: 999px !important;
background: rgba(217, 190, 134, 0.18) !important;
border: 1.5px solid #D9BE86 !important;
color: #FFFFFF !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
text-decoration: none !important;
letter-spacing: 0.01em !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
:where(html.qms-theme) .q-footer-legal-links a:hover,
:where(html.qms-theme) .q-legal-pill:hover {
background: #D9BE86 !important;
color: #0F1E16 !important;
border-color: #D9BE86 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 14px rgba(217, 190, 134, 0.45) !important;
}
:where(html.qms-theme) .q-footer-legal-links span[aria-hidden="true"] {
display: none !important;
}