/* Alturas en lvh (2026-11-10): no cambian cuando aparece o se esconde la barra del navegador del teléfono. */
/* Pagina Contacto. Medidas en rem, leidas de las clases del original; ver clone-spec-nosotros-contacto.md. */

/* Banner con el leon colgante */
#contact-banner-section { position: relative; display: flex; height: 100lvh; min-height: 100lvh; padding-bottom: 5rem; overflow: visible; background: #d2d2d2; color: var(--text-dark); }
@media (min-width: 64rem) { #contact-banner-section { padding-bottom: 9.375rem; } }
.cb-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cb-video-wrap { width: 100%; display: flex; justify-content: center; background: #d2d2d2; }
.cb-video-block { mix-blend-mode: darken; transform: translateY(-2.5rem); }
.cb-video-block video { width: 100%; opacity: .9; }
.cb-video-lg { max-height: 77lvh; }
.cb-video-sm { max-height: 90lvh; transform: translateY(-4rem); }
.cb-text { position: absolute; top: 56lvh; left: 0; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
@media (min-width: 64rem) { .cb-text { top: 60lvh; } }
@media (min-width: 80rem) { .cb-text { top: 62lvh; } }
.cb-sub { max-width: 25rem; }
@media (min-width: 64rem) { .cb-sub { max-width: 20.5rem; } }
@media (min-width: 120rem) { .cb-sub { max-width: 18.75rem; } }
.cb-scroll { position: absolute; bottom: 3.5rem; left: 0; width: 100%; display: flex; justify-content: center; opacity: .5; pointer-events: none; }
#contact-banner-section .stripes > div { background: #040508; }

/* Piezas de mármol en 3D (reemplazan al león). El lienzo ocupa el alto de la pantalla para que el encuadre no dependa del ancho. */
.cb-video-block { width: 100%; }
.cb-3d { position: relative; width: 100%; height: 100lvh; }
.cb-3d-fallback, .cb-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-3d-fallback { object-fit: contain; object-position: 50% 12%; transition: opacity .6s ease; }
.cb-3d-fallback.is-hidden { opacity: 0; }
.cb-3d-canvas { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.cb-3d-canvas.is-ready { opacity: 1; }
html.is-cb3d-hover, html.is-cb3d-hover body { cursor: pointer; }
.cb-3d-buttons { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Videos: el original cambia de video en 1024 (lg), no en 768 */
.cb-video-lg { display: none; }
@media (min-width: 64rem) { .cb-video-lg { display: block; } .cb-video-sm { display: none; } }

/* Formulario */
#contact-forms-section { position: relative; width: 100%; display: flex; align-items: center; overflow: hidden; padding-block: 5rem; background: #040508; color: var(--text-light); }
@media (min-width: 64rem) { #contact-forms-section { padding-block: 9.375rem; } }
.cf-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cf-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.cf-veil { position: absolute; inset: 0; background: rgb(4 5 8 / .4); }
.cf-inner { position: relative; z-index: 10; }
.cf-head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 64rem) { .cf-head { margin-bottom: 5rem; } }
.cf-head .title { display: block; margin-bottom: .5rem; }
.cf-head .small { margin-top: .5rem; }
.cf-body { grid-column: 1 / -1; width: 100%; max-width: 68rem; margin-inline: auto; }
@media (min-width: 64rem) { .cf-body { grid-column: 2 / span 10; } }
@media (min-width: 96rem) { .cf-body { grid-column: 3 / span 8; } }

.contact-form.is-dark { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 48rem) { .contact-form.is-dark { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-form.is-dark [data-field="message"] { grid-column: span 2; } }
.contact-form.is-dark .f-control { color: var(--text-light); border-color: rgb(216 216 216 / .2); padding: 1rem; }
.contact-form.is-dark .f-control::placeholder, .contact-form.is-dark .f-value.is-empty { color: rgb(216 216 216 / .6); }
.contact-form.is-dark .f-control:focus, .contact-form.is-dark .field.is-filled .f-control, .contact-form.is-dark .select-field.is-open .f-control { border-color: var(--text-light); }
.contact-form.is-dark .f-label, .contact-form.is-dark .f-error { background: #040508; }
.contact-form.is-dark .f-label { color: var(--text-light); }
.contact-form.is-dark .f-error { color: #ff6b50; }
.contact-form.is-dark .f-options { background: #040508; border-color: rgb(216 216 216 / .2); color: var(--text-light); }
.contact-form.is-dark .f-option:hover { background: var(--text-light); color: #000; }
.contact-form.is-dark .f-count { color: rgb(216 216 216 / .6); }
.contact-form.is-dark .f-submit { width: 100%; max-width: 15.75rem; margin: 1rem 0 0 auto; }
@media (min-width: 48rem) { .contact-form.is-dark .f-submit { margin-top: auto; grid-column: 2; } }

.cf-alt { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.cf-or { display: flex; align-items: center; gap: 1rem; width: 100%; margin-block: 2.5rem; }
@media (min-width: 48rem) { .cf-or { margin-block: 5.5rem; } }
.cf-or span:not(.title) { height: 1px; flex: 1; background: rgb(216 216 216 / .2); }
.cf-or .title { color: rgb(255 255 255 / .6); }
.cf-call { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 32.5rem; padding: 1rem 2.5rem; border: 1px solid var(--text-light); border-radius: .5rem; background: rgb(0 0 0 / .4); color: var(--text-light); transition: background-color .3s, color .3s, border-color .3s; }
.cf-call svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; }
.cf-call:hover { background: var(--text-light); color: var(--text-dark); }
.cf-mail { text-align: center; color: rgb(216 216 216 / .6); margin-top: 1.5rem; }
@media (min-width: 48rem) { .cf-mail { margin-top: 2.5rem; } }
.cf-mail a { color: var(--text-light); }

/* Ubicacion, Unete y preguntas */
.cl-section { position: relative; padding-block: 5rem; background: linear-gradient(0deg, #c3c3c3 0%, #fff 100%); color: var(--text-dark); }
@media (min-width: 64rem) { .cl-section { padding-block: 9.375rem; } }
.cl-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 5rem; width: 100%; }
@media (min-width: 48rem) { .cl-row { grid-column: 2 / span 10; gap: 1.5rem; } }
.cl-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 48rem) { .cl-block { grid-column: span 5; } }
@media (min-width: 64rem) { .cl-block { gap: 2.5rem; } }
.cl-join { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
.cl-join-text, .cl-join-mail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 40rem) { .cl-join-text, .cl-join-mail { grid-column: span 6; } .cl-join-mail { align-items: flex-end; } .cl-join-text .small { max-width: 21.25rem; } }
.cl-join-mail > div { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.cl-join-mail .h3 { margin-bottom: .5rem; }
.cl-muted { color: rgb(67 67 67 / .6); }
.cl-line-plus { position: relative; grid-column: 1 / -1; display: flex; justify-content: center; margin-block: 5rem; }
@media (min-width: 48rem) { .cl-line-plus { grid-column: 2 / span 10; } }
@media (min-width: 64rem) { .cl-line-plus { margin-top: 6.25rem; margin-bottom: 9.375rem; } }
.cl-line { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: 1px; width: 0; background: rgb(67 67 67 / .15); }
.cl-line-plus svg { position: relative; width: 1rem; height: 1rem; }
@media (min-width: 64rem) { .cl-line-plus svg { width: .8125rem; height: .8125rem; } }
.cq-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 48rem) { .cq-head { grid-column: span 6; gap: 2.5rem; } }
@media (min-width: 64rem) { .cq-head { grid-column: 2 / span 4; } }
.cq-list { grid-column: 1 / -1; }
@media (min-width: 48rem) { .cq-list { grid-column: 7 / span 6; } }
@media (min-width: 64rem) { .cq-list { grid-column: 7 / span 5; } }
.cq-item { padding-block: 1.5rem; border-bottom: 1px solid rgb(67 67 67 / .15); }
.cq-item:last-child { border-bottom: 0; }
@media (min-width: 48rem) { .cq-item { padding-block: 2rem; } }
.cq-title { position: relative; width: 100%; padding-right: 5rem; cursor: pointer; }
.cq-icon { position: absolute; top: 50%; right: 0; translate: 0 -50%; width: .75rem; height: .75rem; display: flex; justify-content: center; align-items: center; transition: all .3s ease-in-out .2s; }
.cq-item.is-open .cq-icon { rotate: 180deg; }
.cq-content { width: 100%; overflow: hidden; }
.cq-text { padding-top: 1rem; max-width: 33rem; }
@media (min-width: 48rem) { .contact-form.is-dark .consent-field, .contact-form.is-dark .f-status { grid-column: span 2; } }
.contact-form.is-dark .f-consent { color: rgb(216 216 216 / .8); }
.contact-form.is-dark .f-check { accent-color: var(--text-light); }
.contact-form.is-dark .f-status { color: #ff6b50; }

/* Dónde estoy (2026-11-10, plan-contacto-movil.md): la ciudad primero y grande, la región debajo y, tras una línea fina,
   cómo atiendo y la zona horaria. Mismo texto de antes, ahora con jerarquía. */
.cl-where { display: flex; flex-direction: column; gap: .35rem; }
.cl-city { font-size: 2rem; line-height: 1.1; letter-spacing: -.03em; color: var(--text-dark); }
@media (min-width: 64rem) { .cl-city { font-size: 2.5rem; } }
.cl-where-meta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(67 67 67 / .15); display: flex; flex-direction: column; gap: .35rem; max-width: 24rem; }