/* Replica of great-contact.php's two native phases, scoped to this family.
 * No legacy stylesheet import and no business/controller/reveal-JS changes.
 * Original choice heights/padding use content-box; form columns use border-box.
 * Owner exceptions: typed values keep natural case; field focus uses a neutral
 * inset indicator instead of the shared blue outline. Button/link focus stays.
 */
.renew-contact { width: 100%; margin: 0; padding: 0; background: #fff; color: #000; font: 14px Arial, sans-serif; letter-spacing: normal; -webkit-font-smoothing: antialiased; }
.renew-contact .renew-contact-a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.renew-contact .renew-contact-choices { display: flex; justify-content: center; align-items: flex-start; box-sizing: content-box; height: 80vh; padding-top: 14vh; background: #f7efd2; gap: 2rem; }
.renew-contact-choices > .choice { min-width: 0; text-align: center; }
.renew-contact .renew-choice-action { position: relative; display: inline-block; box-sizing: border-box; width: auto; height: auto; max-width: 350px; padding: 1.25rem 2.5rem; margin: 0 auto; border: 2px solid #333; border-radius: 0; background: transparent; color: #333; font: 400 1.1rem Arial, sans-serif; text-decoration: none; text-align: center; cursor: pointer; transition: background .2s, color .2s; }
.renew-contact .renew-choice-action::before, .renew-contact .renew-choice-action::after, .renew-contact .renew-form-submit::before, .renew-contact .renew-form-submit::after { content: none; }
.renew-contact .renew-choice-action:hover { background: #333; border-color: #333; color: #fff; text-decoration: none; }
.renew-contact .renew-choice-action.mh-btn--primary { background: #37ad74; border-color: #37ad74; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.renew-contact .renew-choice-action.mh-btn--primary:hover { background: #12653d; border-color: #12653d; color: #fff; }
.renew-contact .renew-choice-title { display: block; margin-bottom: .30rem; font: 700 1.45rem Arial, sans-serif; }
.renew-contact .renew-choice-description { display: block; font: 400 .90rem/1.35 Arial, sans-serif; opacity: .85; }

.renew-contact .renew-contact-panel { display: none; width: 100%; max-width: none; margin: 0; }
/* Native JS may set display:block; this class preserves POST-active rendering. */
.renew-contact .renew-contact-panel.is-visible { display: block; }
.renew-contact-row { display: flow-root; box-sizing: border-box; margin: 0; background: #f7efd2; }
.renew-contact-visual, .renew-contact-form-column { float: left; width: 50%; box-sizing: border-box; min-height: 1px; }
.renew-contact-visual { padding: 0; }
.renew-contact-image { position: relative; width: 100%; height: 640px; text-align: left; background: url("/img/contacto/happy.jpg") no-repeat 45% 43%; background-size: cover; }
.renew-contact-form-column { background: #fff; padding: 7% 9% 40px 10%; }
.renew-contact-mobile-space { display: none; }
.renew-contact .renew-form { padding: 0; margin: 0; border: 0; border-radius: 0; }
.renew-contact .renew-form-title { padding: 0; margin: 0 0 24px; color: #292929; font: 700 12px/24px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; text-align: center; }
.renew-contact .renew-form-field { display: block; min-width: 0; margin: 0; }
.renew-contact .renew-form-field > input.fields { display: inline-block; box-sizing: border-box; width: 100%; height: 50px; padding: 0 0 0 20px; margin: 0 0 24px; border: 0; border-radius: 0; background: #f5f5f5; color: rgb(70, 70, 70); font: 700 12px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; }
.renew-contact .renew-form-field > input.fields::placeholder { text-transform: uppercase; }
.renew-contact .renew-form-field > textarea.fields { display: inline-block; box-sizing: border-box; width: 100%; padding: 16px 20px; margin: 0 0 24px; border: 0; border-radius: 0; background: #f5f5f5; color: rgb(70, 70, 70); font: 700 12px/24px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; overflow: auto; appearance: none; resize: revert; -moz-osx-font-smoothing: grayscale; }
.renew-contact input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none; pointer-events: none; position: absolute; right: 0; }
.renew-contact .renew-form-verification { display: flow-root; grid-template-columns: none; gap: normal; margin: 0 -15px; }
.renew-contact .renew-form-verification > .human_div, .renew-contact .renew-form-verification > .renew-form-field { float: left; box-sizing: border-box; min-height: 1px; padding: 0 15px; }
.renew-contact .renew-form-verification > .human_div { width: 41.66666667%; padding-bottom: 25px; }
.renew-contact .renew-form-verification > .renew-form-field { width: 58.33333333%; margin: 0; }
.renew-contact .human_div img { display: inline; width: auto; height: 50px; max-width: 100%; }
.renew-contact .renew-form-submit { position: relative; display: inline-block; box-sizing: border-box; width: 100%; max-width: 350px; height: 50px; min-height: 0; padding: 0; margin: 0; border: 2px solid #47b475; border-radius: 0; background: #47b475; color: #fff; font: 700 11px/48px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .2); appearance: none; overflow: visible; cursor: pointer; transition: background .2s, color .2s; }
.renew-contact-status { padding: 0; margin: 12px 0 14px; color: gray; font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.renew-contact :where(.renew-choice-action, .renew-form-submit):focus-visible { outline: 3px solid var(--renew-accent); outline-offset: 4px; }
/* More specific than the shared .renew-form .fields:focus-visible rule.
 * Inset shadow changes no box dimensions; #767676 contrasts with #f5f5f5.
 */
.renew-contact .renew-form-field > .fields:focus { outline: none; outline-offset: 0; box-shadow: inset 0 0 0 1px #767676; }

@media (max-width: 1024px) {
  .renew-contact .renew-contact-choices { padding-top: 8vh; align-items: center; }
}
@media (min-width: 992px) and (max-width: 1307px) {
  .renew-contact-image { height: 500px; margin-top: 70px; }
}
@media (max-width: 991px) {
  .renew-contact-visual, .renew-contact-form-column { float: none; width: 100%; }
  .renew-contact .renew-form-verification > .human_div, .renew-contact .renew-form-verification > .renew-form-field { float: none; width: 100%; }
}
@media (min-width: 628px) and (max-width: 991px) {
  .renew-contact-image { height: 690px; }
}
@media (max-width: 768px) {
  .renew-contact .renew-contact-choices { flex-direction: column; align-items: center; padding: 6vh 1.25rem 0; }
  .renew-contact .renew-choice-action { width: 100%; max-width: 400px; }
  .renew-contact .renew-form-submit { max-width: 400px; }
}
@media (max-width: 767px) {
  .renew-contact-mobile-space { display: block; margin-top: 25px; }
}
@media (min-width: 480px) and (max-width: 627px) {
  .renew-contact-image { height: 500px; }
}
@media (max-width: 480px) {
  .renew-contact-image { height: 340px; }
}
@media (max-width: 300px) {
  .renew-contact-image { height: 300px; }
}
@supports not (gap: 1rem) {
  .renew-contact .renew-contact-choices { gap: 0; }
  .renew-contact-choices > * + * { margin-left: 2rem; }
  @media (max-width: 768px) { .renew-contact-choices > * + * { margin-left: 0; margin-top: 2rem; } }
}
@media (prefers-reduced-motion: reduce) {
  .renew-contact .renew-choice-action, .renew-contact .renew-form-submit { transition: none; }
}