/* CSS de (componente compartido: home, money pages, blog,
locales). Es siempre un bloque CTA final, below-the-fold en todas las
páginas donde se usa — se carga en diferido (preload + swap) para sacarlo
del critical path. Ver src/components/Contacto.astro. */
/* Red de seguridad: sin la clase js-anim en (añadida por el script
del componente Contacto como primera acción), estos bloques se ven
SIEMPRE opacity:1 — si el script no llega a correr en absoluto, el
formulario de contacto (usado en todo el sitio) nunca queda invisible.
CSS plano, no scoped por Astro: no necesita el wrapper :global(). */
html:not(.js-anim) .contacto-info,
html:not(.js-anim) .contacto-form,
html:not(.js-anim) .field-group {
opacity: 1 !important;
transform: none !important;
}
.contacto-info,
.contacto-form {
opacity: 0;
transform: translateX(0) scale(0.97);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.contacto-info {
transform: translateX(-60px) scale(0.97);
}
.contacto-form {
transform: translateX(60px) scale(0.97);
}
.contacto-section.is-visible .contacto-info,
.contacto-section.is-visible .contacto-form {
opacity: 1;
transform: translateX(0) scale(1);
}
.field-group {
position: relative;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition-delay: var(--delay, 0ms);
}
.contacto-form.is-visible .field-group {
opacity: 1;
transform: translateY(0);
}
.contact-input,
.contact-textarea {
display: block;
width: 100%;
padding: 18px 14px 10px;
font-family: "DM Sans", sans-serif;
font-size: 0.95rem;
color: #0b2d48;
background: #f6f9fc;
border: 1px solid rgba(8, 30, 47, 0.08);
border-radius: 12px;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
}
.contact-textarea {
resize: vertical;
min-height: 120px;
}
.contact-input:focus,
.contact-textarea:focus {
border-color: #2196c9;
background: white;
}
.contact-label {
position: absolute;
left: 14px;
top: 16px;
font-family: "DM Sans", sans-serif;
font-size: 0.95rem;
color: #7a8b9e;
pointer-events: none;
transition:
top 0.2s,
font-size 0.2s,
color 0.2s;
}
.contact-input:focus ~ .contact-label,
.contact-input:not(:placeholder-shown) ~ .contact-label,
.contact-textarea:focus ~ .contact-label,
.contact-textarea:not(:placeholder-shown) ~ .contact-label {
top: 4px;
font-size: 0.7rem;
color: #2196c9;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.contact-required-mark {
color: #2196c9;
font-weight: 700;
}
.contact-field-error {
margin: 6px 0 0;
font-family: "DM Sans", sans-serif;
font-size: 0.78rem;
color: #dc2626;
}
.contact-input.is-invalid {
border-color: #dc2626;
}
.contact-select-label {
display: block;
margin-bottom: 6px;
font-family: "DM Sans", sans-serif;
font-size: 0.7rem;
color: #2196c9;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.contact-select {
display: block;
width: 100%;
padding: 14px 40px 14px 14px;
font-family: "DM Sans", sans-serif;
font-size: 0.95rem;
color: #0b2d48;
background-color: #f6f9fc;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px 10px;
border: 1px solid rgba(8, 30, 47, 0.08);
border-radius: 12px;
outline: none;
appearance: none;
transition:
border-color 0.2s,
background-color 0.2s;
}
.contact-select:focus {
border-color: #2196c9;
background-color: white;
}
.contact-submit {
width: 100%;
cursor: pointer;
}
.contact-submit:hover {
transform: translateY(-1px);
}
.contact-submit:disabled {
cursor: wait;
opacity: 0.85;
}
.contact-submit .ripple {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: scale(0);
opacity: 1;
animation: ripple-anim 0.6s linear;
pointer-events: none;
}
@keyframes ripple-anim {
to {
transform: scale(4);
opacity: 0;
}
}
.contact-submit-spinner {
display: none;
}
.contact-submit.is-loading .contact-submit-label {
display: none;
}
.contact-submit.is-loading .contact-submit-spinner {
display: inline-flex;
}
.contact-spinner-svg {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.contacto-form.is-leaving {
transition:
opacity 0.3s,
transform 0.3s;
opacity: 0;
transform: scale(0.95);
}
.contact-success {
opacity: 0;
transform: scale(0.95);
transition:
opacity 0.4s,
transform 0.4s;
}
.contact-success.is-shown {
opacity: 1;
transform: scale(1);
}
.contact-check-path {
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
.contact-success.is-shown .contact-check-path {
animation: draw-check 0.5s 0.2s ease-out forwards;
}
@keyframes draw-check {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.contacto-info,
.contacto-form,
.field-group,
.contact-success {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.contact-submit .ripple,
.contact-spinner-svg {
animation: none !important;
}
.contact-check-path {
stroke-dashoffset: 0;
}
}