/* Bolboreta Labs — Contacto: estilos propios */

/* (continuación, solo en esta página) variante sobre fondo negro: añadir .ct-dark al contenedor */
.ct-map-dark { filter: grayscale(1) invert(.92) contrast(.95) brightness(.9); }
.ct-map-bleed { top: -140px !important; height: calc(100% + 140px) !important; }   /* oculta la tarjeta superior izquierda que incrusta Google */
.ct-mapcap { position: absolute; left: 20px; bottom: 20px; z-index: 2; background: #fff; color: #000; padding: 12px 16px; font-size: 13px; line-height: 1.5; pointer-events: none; }
.ct-mapcap b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9f3cff; margin-bottom: 2px; }
.ct-mapcap a { pointer-events: auto; color: #9f3cff; font-weight: 600; }
.ct-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 30px; background: #fff; color: #000; font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.ct-pill:hover { background: #9f3cff; color: #fff; }
.ct-mail-big { font-family: var(--tp-ff-poppins); font-weight: 800; line-height: .9; letter-spacing: -.03em; color: #fff; white-space: nowrap; margin: 0; cursor: pointer; transition: color .3s; }
.ct-mail-big:hover { color: #9f3cff; }
.ct-formtag { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #9f3cff; margin-bottom: 26px; }
.ct-formtag::after { content: ""; width: 40px; height: 1px; background: #9f3cff; }
.ct-h { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; color: #000; margin: 0 0 30px; }
.ct-dark .ct-h { color: #fff; }

.ct11 { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: #fff; }
.ct11-left { background: #000; color: #fff; }
.ct11-left-in { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 150px 60px 50px 100px; }
.ct11-left .ct-claim { max-width: 520px; margin: 16px 0 20px; }
.ct11-left .ct-para { color: #909090; max-width: 460px; }
.ct11-left .ct-mail-big { font-size: 48px; margin: 40px 0 30px; max-width: 100%; }
.ct11-left .ct-data .ct-v { font-size: 17px; }
.ct11-right { background: #fff; padding: 150px 100px 80px 70px; }
.ct11-right .ct-h { font-size: 34px; }
.ct11-map { position: relative; z-index: 2; width: 50%; height: 100vh; min-height: 420px; background: #000; }   /* persiana solo sobre la mitad izquierda (negra) */
.ct11-map { overflow: hidden; }
.ct11-map .ct-map { position: absolute; inset: 0; height: 100%; min-height: 0; }


/* Fundido del panel del formulario a negro cuando el mapa ya casi ha subido del todo (clase .is-dark desde el script);
   al volver hacia arriba se deshace. Duración en --ct11-fade. */
:root { --ct11-fade: 1.1s; }
.ct11-right { transition: background-color var(--ct11-fade) ease; }
.ct11-right .ct-h, .ct11-right .ct-field label, .ct11-right .ct-check, .ct11-right .ct-check a,
.ct11-right .ct-form .ct-field input, .ct11-right .ct-form .ct-field select, .ct11-right .ct-form .ct-field textarea,
.ct11-right .ct-check i, .ct11-right .ct-submit { transition: color var(--ct11-fade) ease, border-color var(--ct11-fade) ease, background-color var(--ct11-fade) ease; }
.ct11-right.is-dark { background-color: #000; }
.ct11-right.is-dark .ct-h, .ct11-right.is-dark .ct-field label, .ct11-right.is-dark .ct-check, .ct11-right.is-dark .ct-check a { color: #fff; }
.ct11-right.is-dark .ct-form .ct-field input, .ct11-right.is-dark .ct-form .ct-field select, .ct11-right.is-dark .ct-form .ct-field textarea { color: #fff; border-bottom-color: rgba(255,255,255,.28); }
.ct11-right.is-dark .ct-form .ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ct11-right.is-dark .ct-form .ct-field select:invalid { color: #909090; }
.ct11-right.is-dark .ct-form .ct-field select option { color: #000; }
.ct11-right.is-dark .ct-form .ct-field input:focus, .ct11-right.is-dark .ct-form .ct-field select:focus, .ct11-right.is-dark .ct-form .ct-field textarea:focus { border-bottom-color: #fff; }
.ct11-right.is-dark .ct-check i { border-color: rgba(255,255,255,.45); }
.ct11-right.is-dark .ct-submit { background: #fff; color: #000; }
.ct11-right.is-dark .ct-legal { color: #a3a3a3; }
.ct11-right.is-dark .ct-submit:hover { background: #9f3cff; color: #fff; }
.ct11-right.is-dark .ct-sent small { color: #909090; }
@media (prefers-reduced-motion: reduce) { .ct11-right, .ct11-right * { transition-duration: 0s !important; } }
@media (max-width: 991px) { .ct11-map { width: 100%; height: 70vh; } }
@media (max-width: 1198px) { .ct11 { grid-template-columns: 1fr; } .ct11-left-in { min-height: 0; padding: 120px 30px 50px; } .ct11-right { padding: 60px 30px; } .ct11-left .ct-mail-big { font-size: 32px; } }
@media (max-width: 575px) { .ct11-left-in, .ct11-right { padding-left: 20px; padding-right: 20px; } .ct11-left .ct-mail-big { font-size: 24px; } }

/* Email grande: tamaño inicial equivalente al ajuste por JS (máximo 48px) */
.ct11-left .ct-mail-big { font-size: 48px; }
@media (min-width: 1199px) { .ct11-left .ct-mail-big { font-size: min(48px, calc((50vw - 160px) * 0.0787)); } }

/* Mapa de Google bloqueado hasta consentir sus cookies (cookies.js): aviso previo sobre fondo negro, misma caja que el mapa */
.ct-map-gate { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 40px 48px 130px; background: #000; color: #fff; }
.ct11-map.is-consented .ct-map-gate { display: none; }
.ct-map-gate b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9f3cff; }
.ct-map-gate p { max-width: 460px; font-size: 15px; line-height: 1.55; color: #cfcfcf; margin: 0; }
.ct-map-gate .ct-map-load { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 30px; border: 0; background: #fff; color: #000; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .3s, color .3s; }
.ct-map-gate .ct-map-load:hover { background: #9f3cff; color: #fff; }
.ct-map-gate .ct-map-load:focus-visible { outline: 2px solid #9f3cff; outline-offset: 2px; }
.ct-map-gate a { color: #fff; font-size: 13px; text-decoration: underline; }
@media (max-width: 575px) { .ct-map-gate { padding: 30px 20px 140px; } }