536 lines
13 KiB
CSS
536 lines
13 KiB
CSS
/* ============================================================
|
|
CONTACTO PAGE — UX/UI ENHANCEMENTS
|
|
Todos los selectores son específicos a esta página.
|
|
No afectan al layout ni a otros blades.
|
|
============================================================ */
|
|
|
|
/* ---------- ENTRADA ANIMADA DE SECCIONES (Intersection Observer) ---------- */
|
|
.contact-cards .contact-card-modern,
|
|
.contact-wrapper,
|
|
.map-container-modern {
|
|
opacity: 0;
|
|
transform: translateY(32px);
|
|
transition:
|
|
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.contact-cards .contact-card-modern.cpage--visible,
|
|
.contact-wrapper.cpage--visible,
|
|
.map-container-modern.cpage--visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
/* Stagger de las tarjetas */
|
|
.contact-cards .contact-card-modern:nth-child(1) {
|
|
transition-delay: 0s;
|
|
}
|
|
.contact-cards .contact-card-modern:nth-child(2) {
|
|
transition-delay: 0.1s;
|
|
}
|
|
.contact-cards .contact-card-modern:nth-child(3) {
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
/* ---------- TARJETAS DE CONTACTO ---------- */
|
|
.contact-card-modern {
|
|
cursor: default;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
.contact-card-modern:hover {
|
|
transform: translateY(-8px) scale(1.01);
|
|
border-color: var(--accent) !important;
|
|
box-shadow:
|
|
0 20px 48px rgba(4, 205, 255, 0.13),
|
|
var(--shadow-xl);
|
|
}
|
|
/* Barra superior animada al hover */
|
|
.contact-card-modern > div:first-child {
|
|
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
|
|
}
|
|
.contact-card-modern:hover > div:first-child {
|
|
transform: scaleX(1) !important;
|
|
}
|
|
/* Icono con micro-animación */
|
|
.contact-card-modern:hover div[style*="border-radius: 20px"] {
|
|
transform: scale(1.08) rotate(6deg);
|
|
box-shadow: 0 8px 24px rgba(4, 205, 255, 0.25);
|
|
}
|
|
/* Links internos de las tarjetas */
|
|
.contact-card-modern a[href^="tel"],
|
|
.contact-card-modern a[href^="https://maps"] {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.contact-card-modern a[href^="tel"]:hover,
|
|
.contact-card-modern a[href^="https://maps"]:hover {
|
|
background: rgba(4, 205, 255, 0.08) !important;
|
|
color: var(--accent) !important;
|
|
transform: translateY(-2px);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ---------- WRAPPER CONTACTO (formulario + info) ---------- */
|
|
.contact-wrapper {
|
|
will-change: transform;
|
|
}
|
|
.contact-wrapper:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow:
|
|
0 30px 60px rgba(0, 0, 0, 0.2),
|
|
var(--shadow-xl);
|
|
}
|
|
|
|
/* ---------- INFO ROW ---------- */
|
|
.info-row {
|
|
cursor: default;
|
|
will-change: transform;
|
|
}
|
|
.info-row:hover {
|
|
transform: translateX(8px);
|
|
background: var(--surface) !important;
|
|
box-shadow: 0 4px 16px rgba(4, 205, 255, 0.08);
|
|
}
|
|
/* Icono del info-row gira sutilmente */
|
|
.info-row:hover div[style*="background: var(--accent-gradient)"] {
|
|
transform: rotate(-6deg) scale(1.05);
|
|
transition: transform 0.25s ease;
|
|
}
|
|
|
|
/* ---------- REDES SOCIALES ---------- */
|
|
.social-link-modern {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.social-link-modern::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--accent-gradient);
|
|
opacity: 0;
|
|
border-radius: 12px;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.social-link-modern:hover::after {
|
|
opacity: 1;
|
|
}
|
|
.social-link-modern:hover {
|
|
color: white !important;
|
|
transform: translateY(-4px) scale(1.08);
|
|
box-shadow: 0 8px 20px rgba(4, 205, 255, 0.3);
|
|
}
|
|
.social-link-modern i {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ---------- FORMULARIO — INPUTS ---------- */
|
|
.form-group-modern {
|
|
position: relative;
|
|
}
|
|
/* Label flotante simulado mediante placeholder + focus */
|
|
.form-group-modern input,
|
|
.form-group-modern textarea,
|
|
.form-group-modern select {
|
|
outline: none !important;
|
|
box-sizing: border-box;
|
|
}
|
|
.form-group-modern input:focus,
|
|
.form-group-modern textarea:focus,
|
|
.form-group-modern select:focus {
|
|
border-color: var(--accent) !important;
|
|
box-shadow: 0 0 0 4px rgba(4, 205, 255, 0.12) !important;
|
|
transform: translateY(-2px);
|
|
background: var(--surface) !important;
|
|
}
|
|
/* Estado valid — borde verde sutil */
|
|
.form-group-modern input:not(:placeholder-shown):not(.error):not(:focus),
|
|
.form-group-modern textarea:not(:placeholder-shown):not(.error):not(:focus) {
|
|
border-color: rgba(0, 255, 136, 0.4) !important;
|
|
}
|
|
|
|
/* ---------- CHECKBOX PERSONALIZADO ---------- */
|
|
#privacy_checkbox {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
border: 2px solid var(--border);
|
|
border-radius: 5px;
|
|
background: var(--surface-light);
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
transition:
|
|
border-color 0.2s,
|
|
background 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
#privacy_checkbox:checked {
|
|
background: var(--accent, #04cdff);
|
|
border-color: var(--accent, #04cdff);
|
|
box-shadow: 0 0 0 3px rgba(4, 205, 255, 0.2);
|
|
}
|
|
#privacy_checkbox:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 5px;
|
|
width: 5px;
|
|
height: 9px;
|
|
border: 2px solid #000;
|
|
border-top: none;
|
|
border-left: none;
|
|
transform: rotate(45deg);
|
|
}
|
|
#privacy_checkbox:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ---------- BOTÓN SUBMIT ---------- */
|
|
.submit-btn-modern {
|
|
letter-spacing: 0.02em;
|
|
isolation: isolate;
|
|
}
|
|
.submit-btn-modern::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition:
|
|
width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
|
|
height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
|
|
z-index: 0;
|
|
}
|
|
.submit-btn-modern:hover::before {
|
|
width: 340px;
|
|
height: 340px;
|
|
}
|
|
.submit-btn-modern > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.submit-btn-modern:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 12px 32px rgba(4, 205, 255, 0.35);
|
|
gap: 16px !important;
|
|
}
|
|
.submit-btn-modern:active {
|
|
transform: translateY(0) scale(0.98);
|
|
box-shadow: none;
|
|
}
|
|
.submit-btn-modern:disabled {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
/* Icono flecha se mueve al hover */
|
|
.submit-btn-modern:hover .fa-arrow-right {
|
|
transform: translateX(4px);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* ---------- ICONO PAPER PLANE (header formulario) ---------- */
|
|
.form-panel .fa-paper-plane {
|
|
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
|
display: inline-block;
|
|
}
|
|
.form-panel:hover .fa-paper-plane {
|
|
transform: translateX(6px) translateY(-6px) rotate(15deg);
|
|
}
|
|
|
|
/* ---------- MAPA ---------- */
|
|
.map-container-modern {
|
|
will-change: transform;
|
|
}
|
|
.map-container-modern:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18) !important;
|
|
}
|
|
.map-container-modern:hover iframe {
|
|
filter: grayscale(0) !important;
|
|
}
|
|
|
|
/* ---------- WHATSAPP FLOAT ---------- */
|
|
.whatsapp-float-modern a {
|
|
will-change: transform;
|
|
}
|
|
.whatsapp-float-modern a:hover {
|
|
transform: scale(1.05) translateY(-3px);
|
|
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55) !important;
|
|
gap: 16px !important;
|
|
}
|
|
.whatsapp-float-modern a:active {
|
|
transform: scale(0.97);
|
|
}
|
|
/* Animación del pulso */
|
|
@keyframes pulseRing {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1.6);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
/* Badge "en línea" pulsante sobre el botón de WA */
|
|
.whatsapp-float-modern {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
z-index: 1000;
|
|
}
|
|
.whatsapp-float-modern::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #00ff88;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
animation: cpage-online-pulse 2s infinite;
|
|
z-index: 2;
|
|
}
|
|
@keyframes cpage-online-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6);
|
|
}
|
|
50% {
|
|
transform: scale(1.15);
|
|
box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
|
|
}
|
|
}
|
|
|
|
/* ---------- ALERTAS ---------- */
|
|
.alert {
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 14px;
|
|
margin-top: 1rem;
|
|
animation: cpage-fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 0.92rem;
|
|
font-weight: 500;
|
|
}
|
|
.alert-success {
|
|
background: rgba(0, 255, 136, 0.08);
|
|
border: 1px solid rgba(0, 255, 136, 0.5);
|
|
color: #00ff88;
|
|
box-shadow: 0 4px 16px rgba(0, 255, 136, 0.1);
|
|
}
|
|
.alert-error {
|
|
background: rgba(255, 68, 68, 0.08);
|
|
border: 1px solid rgba(255, 68, 68, 0.5);
|
|
color: #ff4444;
|
|
box-shadow: 0 4px 16px rgba(255, 68, 68, 0.1);
|
|
}
|
|
.alert-info {
|
|
background: rgba(4, 205, 255, 0.08);
|
|
border: 1px solid rgba(4, 205, 255, 0.4);
|
|
color: var(--accent);
|
|
}
|
|
/* Icono en alertas */
|
|
.alert i {
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes cpage-fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ---------- CAMPO CON ERROR (shake mejorado) ---------- */
|
|
input.error,
|
|
textarea.error,
|
|
select.error {
|
|
border-color: #ff4444 !important;
|
|
box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.12) !important;
|
|
animation: cpage-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
}
|
|
@keyframes cpage-shake {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
15% {
|
|
transform: translateX(-6px);
|
|
}
|
|
30% {
|
|
transform: translateX(5px);
|
|
}
|
|
45% {
|
|
transform: translateX(-4px);
|
|
}
|
|
60% {
|
|
transform: translateX(3px);
|
|
}
|
|
75% {
|
|
transform: translateX(-2px);
|
|
}
|
|
}
|
|
|
|
/* ---------- CONTADOR DE CARACTERES (indicador de color dinámico) ---------- */
|
|
.char-counter {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---------- SKELETON LOADER para imágenes (progressive) ---------- */
|
|
@keyframes cpage-shimmer {
|
|
0% {
|
|
background-position: -400px 0;
|
|
}
|
|
100% {
|
|
background-position: 400px 0;
|
|
}
|
|
}
|
|
|
|
/* ---------- INTL-TEL-INPUT (alineado al tema) ---------- */
|
|
.iti {
|
|
width: 100%;
|
|
display: block !important;
|
|
}
|
|
.iti__flag-container {
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
|
|
background-color: rgba(4, 205, 255, 0.08);
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
.iti__selected-flag {
|
|
padding: 0 12px;
|
|
border-radius: 12px 0 0 12px;
|
|
background: var(--surface-light);
|
|
}
|
|
.iti__country-list {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-lg);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.iti__country:hover {
|
|
background: var(--surface-light);
|
|
}
|
|
.iti__highlight {
|
|
background: rgba(4, 205, 255, 0.15);
|
|
}
|
|
|
|
/* ---------- TOOLTIP en links de teléfono ---------- */
|
|
#tel1-contacto,
|
|
#tel3-contacto {
|
|
position: relative;
|
|
}
|
|
#tel1-contacto::after {
|
|
content: "Abrir WhatsApp";
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%) scale(0.85);
|
|
background: #25d366;
|
|
color: #fff;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.2s,
|
|
transform 0.2s;
|
|
}
|
|
#tel1-contacto:hover::after {
|
|
opacity: 1;
|
|
transform: translateX(-50%) scale(1);
|
|
}
|
|
#tel3-contacto::after {
|
|
content: "Llamar ahora";
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%) scale(0.85);
|
|
background: var(--accent, #04cdff);
|
|
color: #000;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.2s,
|
|
transform 0.2s;
|
|
}
|
|
#tel3-contacto:hover::after {
|
|
opacity: 1;
|
|
transform: translateX(-50%) scale(1);
|
|
}
|
|
|
|
/* ---------- RESPONSIVE ---------- */
|
|
@media (max-width: 992px) {
|
|
.contact-wrapper {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.info-panel {
|
|
order: 2;
|
|
}
|
|
.form-panel {
|
|
order: 1;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cards-grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
.form-panel {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.info-panel {
|
|
padding: 1.5rem !important;
|
|
}
|
|
.whatsapp-float-modern span {
|
|
display: none !important;
|
|
}
|
|
.whatsapp-float-modern a {
|
|
padding: 1rem !important;
|
|
}
|
|
.whatsapp-float-modern::before {
|
|
top: 2px;
|
|
right: 2px;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.contact-wrapper div[style*="grid-template-columns: 1fr 1fr"] {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
}
|
|
|
|
/* ---------- FOCUS VISIBLE (accesibilidad) ---------- */
|
|
.contact-card-modern a:focus-visible,
|
|
.submit-btn-modern:focus-visible,
|
|
.social-link-modern:focus-visible,
|
|
#tel1-contacto:focus-visible,
|
|
#tel3-contacto:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
border-radius: 8px;
|
|
}
|