.contacto__body { max-width: 640px; margin-inline: auto; padding: var(--space-12, 3rem) var(--space-4, 1rem); } .contacto-form { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); } .contacto-form__textarea { height: auto; min-height: 140px; resize: vertical; } .contacto-form__count { align-self: flex-end; font-family: var(--font-body); font-size: 11px; color: var(--color-text-muted); } .contacto-form__trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .contacto-form__actions { margin-top: var(--space-2, 0.5rem); } .contacto-form__submit { padding: 0.7rem 2rem; border: none; border-radius: 10px; background-color: var(--color-canon-red); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); cursor: pointer; transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease-out); } .contacto-form__submit:hover:not(:disabled) { background-color: var(--color-canon-red-hover); } .contacto-form__submit:disabled { opacity: 0.6; cursor: not-allowed; } .contacto__aviso { display: flex; align-items: center; gap: var(--space-2, 0.5rem); margin: 0; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); } .contacto__aviso i { color: var(--color-canon-red); } .contacto-modal__content { position: relative; align-items: center; padding: var(--space-8, 2rem); border: none; border-radius: 15px; text-align: center; } .contacto-modal__close { position: absolute; top: var(--space-3, 0.75rem); right: var(--space-3, 0.75rem); width: 32px; height: 32px; border: none; border-radius: var(--radius-full, 50%); background: transparent; color: var(--color-text-muted); font-size: 1.25rem; cursor: pointer; } .contacto-modal__close:hover { background-color: var(--color-surface-alt, #f3f4f6); } .contacto-modal__title { margin: 0 0 var(--space-3, 0.75rem); font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--color-text-dark); } .contacto-modal--error .contacto-modal__title { color: var(--color-canon-red); } .contacto-modal__text { margin: 0 0 var(--space-6, 1.5rem); font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text); } .contacto-modal__btn { padding: 0.6rem 1.75rem; border: none; border-radius: 10px; background-color: var(--color-canon-red); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); cursor: pointer; } .contacto-modal__btn:hover { background-color: var(--color-canon-red-hover); }