/* Contacto con fondo ilustrado, cristal, luz y movimiento.
   Aprobado por Damián el 2026-10-23 a partir de la maqueta del 2026-10-18. Solo lo carga contacto.html. */
.contact-cristal { background: #fff; color: #060606; }
.contact-cristal .menu-toggle { min-width: 44px; min-height: 44px; }
.contact-cristal .header-cta .btn { background: #2671ac; box-shadow: none; }
.contact-layout { width: min(1160px, calc(100% - 3rem)); margin: auto; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 6vw, 5.5rem) 0; }
.contact-heading h1 { font-size: clamp(2.8rem, 5.3vw, 4.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.contact-heading h1 span { color: #2671ac; }
.contact-heading p { margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.5; color: #394753; }
.contact-choices { display: grid; gap: .85rem; }
.contact-choice { display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; gap: 1.2rem; align-items: center; width: 100%; min-height: 136px; padding: 1.5rem 1.6rem; border: 1px solid #b8cfdf; border-radius: 20px; color: #060606; background: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.contact-choice:hover { background: #f3f7fa; border-color: #2671ac; }
.contact-choice:focus-visible { outline: 3px solid #060606; outline-offset: 4px; }
.choice-primary { min-height: 156px; background: #2671ac; color: #fff; border-color: #2671ac; }
.choice-primary:hover { background: #1b4e77; border-color: #1b4e77; }
.choice-icon { width: 38px; height: 38px; color: #2671ac; }
.choice-arrow { width: 24px; height: 24px; color: #2671ac; transition: transform .2s; }
.contact-choice:hover .choice-arrow { transform: translateX(3px); }
.choice-primary .choice-icon, .choice-primary .choice-arrow { color: #fff; }
.choice-copy h2 { font-size: 1.55rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.choice-copy p { margin: .25rem 0 0; font-size: 1rem; line-height: 1.4; color: #394753; }
.choice-primary .choice-copy p { color: #fff; }
.choice-action { display: block; margin-top: .6rem; color: #2671ac; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.choice-primary .choice-action { color: #fff; }
.contact-privacy { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem .2rem 0; color: #394753; font-size: 1rem; line-height: 1.5; }
.contact-privacy svg { flex: 0 0 20px; height: 20px; margin-top: 1px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 1.6rem; max-width: 620px; } .contact-heading h1 { font-size: clamp(2.4rem, 6vw, 3.7rem); } .contact-heading p { margin-top: 1rem; } }
@media (max-width: 620px) {
  .contact-layout { padding: 1.5rem 0; gap: 1.35rem; }
  .contact-heading h1 { font-size: 2.4rem; }
  .contact-heading p { margin-top: .65rem; font-size: 1rem; }
  .contact-choices { gap: .65rem; }
  .contact-choice { grid-template-columns: 30px minmax(0,1fr) 20px; gap: .85rem; min-height: 112px; padding: 1rem; border-radius: 16px; }
  .choice-primary { min-height: 122px; }
  .choice-icon { width: 30px; height: 30px; }
  .choice-arrow { width: 20px; height: 20px; }
  .choice-copy h2 { font-size: 1.2rem; }
  .choice-copy p { font-size: 1rem; }
  .choice-action { margin-top: .35rem; font-size: 1rem; }
  .contact-privacy { font-size: 1rem; margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .contact-choice, .choice-arrow { transition: none; } .contact-choice:hover .choice-arrow { transform: none; } }

/* Segunda propuesta: ilustración ambiental, cristal, luz y movimiento. */
.contact-cristal { position: relative; isolation: isolate; min-height: 100vh; background: #071522; color: #fff; }
.contact-cristal::before { content: ""; position: fixed; inset: -3%; z-index: -2; background: url('../img/fondo-contacto-cristal.webp') center / cover no-repeat; animation: contact-atmosphere 24s ease-in-out infinite alternate; pointer-events: none; }
.contact-cristal::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,13,23,.78), rgba(5,17,29,.35) 48%, rgba(4,13,23,.48)); pointer-events: none; }
.contact-cristal.hero-is-light .site-header { background: rgba(6,16,27,.24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.contact-cristal.hero-is-light .site-header.scrolled { background: rgba(6,16,27,.65); }
.contact-cristal .header-cta .btn { background: rgba(38,113,172,.72); border: 1px solid rgba(159,212,250,.4); box-shadow: 0 0 24px rgba(48,149,227,.12); }
.contact-heading p, .contact-privacy { color: #d4e5f1; }
.contact-heading h1 span { color: #3095e3; }
.contact-heading { animation: contact-arrive .7s ease-out both; }
.contact-choice { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: rgba(12,35,55,.52); border: 1px solid rgba(186,224,250,.32); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); box-shadow: 0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .3s, background .3s, border-color .3s, box-shadow .3s; animation: contact-arrive .65s ease-out backwards; }
.contact-choice:nth-child(2) { animation-delay: .08s; }
.contact-choice:nth-child(3) { animation-delay: .16s; }
.contact-choice::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at top left, rgba(200,234,255,.12), transparent 70%); pointer-events: none; }
.contact-choice::after { content: ""; position: absolute; top: -80%; bottom: -80%; left: -75%; width: 42%; background: linear-gradient(90deg, transparent, rgba(220,242,255,.18), transparent); transform: rotate(22deg); pointer-events: none; }
.contact-choice:hover, .contact-choice:focus-visible { color: #fff; background: rgba(24,67,101,.69); border-color: rgba(189,228,255,.8); box-shadow: 0 22px 50px rgba(0,0,0,.25), 0 0 30px rgba(48,149,227,.16), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-3px); }
.contact-choice:hover::after, .contact-choice:focus-visible::after { animation: contact-shine .9s ease-out both; }
.contact-choice:focus-visible { outline: 3px solid #d0ebff; outline-offset: 4px; }
.choice-primary { background: rgba(24,87,137,.72); border-color: rgba(132,202,250,.65); box-shadow: 0 16px 48px rgba(0,35,65,.3), 0 0 36px rgba(48,149,227,.15), inset 0 1px 0 rgba(255,255,255,.25); }
.choice-primary:hover, .choice-primary:focus-visible { background: rgba(30,103,163,.83); }
.choice-copy p, .choice-primary .choice-copy p { color: #e2edf5; }
.choice-icon, .choice-arrow, .choice-action { color: #c4e4fb; }
.choice-primary .choice-action, .choice-primary .choice-icon, .choice-primary .choice-arrow { color: #fff; }
@keyframes contact-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes contact-atmosphere { from { transform: scale(1.02) translate3d(-.4%,0,0); } to { transform: scale(1.055) translate3d(.4%,.3%,0); } }
@keyframes contact-shine { from { transform: translateX(0) rotate(22deg); } to { transform: translateX(525%) rotate(22deg); } }
@media (max-width: 620px) { .contact-cristal::before { background-position: 38% center; } .contact-cristal::after { background: linear-gradient(180deg, rgba(4,13,23,.45), rgba(5,17,29,.38) 40%, rgba(4,13,23,.65)); } }
@media (prefers-reduced-motion: reduce) {
  .contact-cristal::before, .contact-heading, .contact-choice, .contact-choice::after { animation: none !important; }
  .contact-choice, .choice-arrow { transition: none; }
  .contact-choice:hover, .contact-choice:focus-visible { transform: none; }
}

/* Evita el colapso del margen inicial y el espacio vertical adicional. */
.contact-cristal { padding-top: 96px; }
@media (max-width: 900px) { .contact-cristal { padding-top: 88px; } }

/* Contraste estable en las zonas de lectura, sin tapar la ilustración. */
.contact-privacy { color: #fff; margin-left: 0; width: fit-content; max-width: 100%; padding: .55rem .8rem; border-radius: 12px; background: rgba(4,13,23,.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 901px) {
  .contact-heading { position: relative; isolation: isolate; }
  .contact-heading::before { content: ""; position: absolute; inset: -3rem -2rem; z-index: -1; background: radial-gradient(ellipse, rgba(4,13,23,.94) 0%, rgba(4,13,23,.85) 55%, transparent 78%); filter: blur(18px); pointer-events: none; }
}
.contact-cristal .header-cta .btn:hover { background: rgba(30,94,145,.9); }