— nunca selectores globales de header/nav/body/input). ========================================================================== */ .contact-page { --contact-green-950: #003f2f; --contact-green-900: #00563f; --contact-green-700: #0f6b49; --contact-green-100: #e7f3ec; --contact-gold: #c7a33c; --contact-bg: #f4f8f5; --contact-surface: #ffffff; --contact-border: #dce7e1; --contact-text: #172033; --contact-muted: #627080; display: block; background: var(--contact-bg); color: var(--contact-text); padding-top: 76px; /* compensa el header fijo vuelto solido (ver abajo) */ padding-bottom: 80px; } .contact-page a { color: inherit; } .contact-page *:focus-visible { outline: 3px solid rgba(15, 107, 73, 0.5); outline-offset: 2px; } .contact-container { width: min(100% - 40px, 1320px); margin-inline: auto; } /* -------------------------------------------------------------------------- Header solido en esta pagina — mismo patron que body.institucional-solid-nav / body.news-detail-solid-nav (styles.css deja el nav transparente hasta que JS agrega .scrolled). El header y el nav son hermanos de

, no descendientes de .contact-page, por eso estas reglas van sobre el (unica ancestro comun de ambos). -------------------------------------------------------------------------- */ body.contact-solid-nav header { padding: 0; background: var(--contact-green-950, #003f2f); } body.contact-solid-nav nav#navbar { max-width: 1540px; width: 100%; min-height: 76px; margin: 0 auto; padding: 0 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } @media (min-width: 768px) { body.contact-solid-nav nav#navbar { margin-top: 0; padding: 0 32px; min-height: 76px; } } body.contact-solid-nav nav#navbar.scrolled { max-width: 1540px; margin-top: 0; } body.contact-solid-nav .menu-item[href$="/contacto"] { color: #ffffff; } body.contact-solid-nav .menu-item[href$="/contacto"]::after { left: 0; width: 100%; } /* ========================================================================== Hero ========================================================================== */ .contact-page .contact-hero { background: var(--contact-green-950); color: #ffffff; padding-block: 70px 90px; } .contact-page .contact-eyebrow { display: inline-flex; align-items: center; min-height: 26px; margin-bottom: 20px; padding: 7px 16px; border: 1px solid var(--contact-gold); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--contact-gold); } .contact-page .contact-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1.12; margin: 0 0 16px; color: #ffffff; } .contact-page .contact-hero p { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } @media (min-width: 768px) { .contact-page .contact-hero h1 { font-size: 42px; } } @media (min-width: 1280px) { .contact-page .contact-hero h1 { font-size: 56px; } } /* ========================================================================== Layout principal (formulario + informacion) ========================================================================== */ .contact-page .contact-content { padding-top: 40px; } .contact-page .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; } @media (min-width: 1024px) { .contact-page .contact-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); gap: 32px; } } /* ========================================================================== Card del formulario ========================================================================== */ .contact-page .contact-form-card { background: var(--contact-surface); border: 1px solid var(--contact-border); border-radius: 20px; box-shadow: 0 18px 48px -28px rgba(4, 40, 30, 0.35); padding: 28px 24px; } @media (min-width: 640px) { .contact-page .contact-form-card { padding: 40px; } } .contact-page .contact-form-card__header { margin-bottom: 24px; } .contact-page .contact-form-card__header h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--contact-text); } .contact-page .contact-form-card__header p { margin: 0; font-size: 14px; color: var(--contact-muted); } .contact-page .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-page .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-page .contact-field label { font-size: 14px; font-weight: 600; color: var(--contact-text); } .contact-page .contact-field input, .contact-page .contact-field select, .contact-page .contact-field textarea { width: 100%; min-height: 48px; border: 1px solid var(--contact-border); border-radius: 10px; padding: 12px 16px; font-size: 15px; font-family: inherit; color: var(--contact-text); background: var(--contact-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 640px) { .contact-page .contact-field input, .contact-page .contact-field select { min-height: 50px; } } .contact-page .contact-field input:focus, .contact-page .contact-field select:focus, .contact-page .contact-field textarea:focus { outline: none; border-color: var(--contact-green-700); box-shadow: 0 0 0 3px rgba(15, 107, 73, 0.16); } .contact-page .contact-field select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; } .contact-page .contact-field textarea { min-height: 180px; resize: vertical; line-height: 1.55; } .contact-page .contact-field input[aria-invalid="true"], .contact-page .contact-field select[aria-invalid="true"], .contact-page .contact-field textarea[aria-invalid="true"] { border-color: #c23b3b; } .contact-page .contact-field__error { margin: 0; font-size: 13px; font-weight: 600; color: #b02a2a; } .contact-page .contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-page .contact-privacy-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--contact-muted); } .contact-page .contact-submit-btn { align-self: flex-start; min-height: 50px; padding: 0 32px; border: none; border-radius: 10px; background: var(--contact-green-900); color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s ease; } .contact-page .contact-submit-btn:hover { background: var(--contact-green-700); } .contact-page .contact-submit-btn:focus-visible { outline: 3px solid var(--contact-gold); outline-offset: 2px; } @media (max-width: 639px) { .contact-page .contact-submit-btn { width: 100%; } } .contact-page .contact-alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; } .contact-page .contact-alert--success { background: #e7f4e8; color: #2c6b31; border: 1px solid #bfe2c1; } .contact-page .contact-alert--error { background: #fbe9e9; color: #b02a2a; border: 1px solid #f0c4c4; } /* ========================================================================== Card de informacion de contacto ========================================================================== */ .contact-page .contact-info-card { background: var(--contact-surface); border: 1px solid var(--contact-border); border-radius: 20px; box-shadow: 0 18px 48px -28px rgba(4, 40, 30, 0.25); padding: 28px 24px; } @media (min-width: 640px) { .contact-page .contact-info-card { padding: 32px; } } .contact-page .contact-info-card h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 700; margin: 0 0 20px; color: var(--contact-text); } .contact-page .contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .contact-page .contact-info-item { display: flex; align-items: flex-start; gap: 12px; } .contact-page .contact-info-item__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--contact-green-100); color: var(--contact-green-900); } .contact-page .contact-info-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .contact-page .contact-info-item__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--contact-muted); } .contact-page .contact-info-item__value { font-size: 15px; color: var(--contact-text); word-break: break-word; } .contact-page .contact-info-item__value--muted { color: var(--contact-muted); font-style: italic; } a.contact-info-item__value:hover { color: var(--contact-green-700); text-decoration: underline; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 640px) { .contact-page { padding-bottom: 56px; } .contact-page .contact-hero { padding-block: 48px 56px; } .contact-page .contact-content { padding-top: 28px; } .contact-page .contact-layout { gap: 20px; } }