/* ==========================================================================
   Solo Baja – Agent Form
   Columna de agente (1/2, oscura) + formulario CF7 (1/2, blanco).

   Notas de contexto:
   - El tema shina usa Bootstrap 3.3.7 (grid de floats, breakpoints 768/992/1200)
     y Font Awesome 4.7.0. No hay custom properties en el tema: los colores de
     marca van literales.
   - Paleta de este bloque, tomada del comparador de diseño:
       #141411  carbón del panel oscuro
       #24241f  fondo del panel de foto (solo se ve si la foto no cubre)
       #D19D25  dorado (acentos, divisor, botón)
     Ojo: NO es el #F2C604 del tema. Es un dorado más apagado, a propósito.
     Si alguna vez hay que volver al dorado del tema, son estas dos cadenas.
   - Este archivo lo encola Elementor durante el render (get_style_depends()),
     o sea después de todo el CSS del tema. A igualdad de especificidad gana
     este archivo, así que no hace falta !important — salvo donde el tema lo
     usa primero (ver el botón).
   - Breakpoints alineados con los del tema: 1199 / 991 / 599 / 479.
   ========================================================================== */

.sb-agentblock {
	position: relative;
}

/* Rejilla propia, sin Bootstrap.

   El marcado del tema usa clases de Bootstrap 3 (col-xs-*, breakpoints
   768/992/1200), pero lo que este sitio carga de verdad es **Bootstrap 4.6.2**,
   que trae essential-real-estate. Son incompatibles en dos puntos que rompían
   este bloque:

     - Los breakpoints cambian: en BS4 `md` empieza en 768px, no en 992. En un
       iPad Mini (768) se activaba col-md-4 y la columna se quedaba al 33% en
       lugar de apilarse.
     - BS4 dimensiona las columnas con `max-width`, no con `width`, así que un
       `width: 100%` en un media query no puede recuperarlas.

   Definir aquí los anchos evita depender de cuál de los dos gane el día de
   mañana. Fila en flex, además, para que las dos columnas queden a la misma
   altura: de eso depende que la foto a sangre llegue hasta abajo. */
.sb-agentblock__row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.sb-agentblock__agent-column,
.sb-agentblock__form-column {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	float: none;
	padding: 0;
	/* Sin esto, el min-width:auto por defecto de un flex item impide que la
	   columna encoja por debajo del ancho de su contenido y el texto se sale
	   del bloque oscuro. */
	min-width: 0;
}

/* 50 / 50, como el diseño. */
.sb-agentblock__agent-column,
.sb-agentblock__form-column {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	width: 50%;
}

.sb-agentblock__form-column--full {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

.sb-agentblock__agent-inner,
.sb-agentblock__form-inner {
	width: 100%;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Columna izquierda — panel de foto + ficha del agente

   Dos piezas en fila: la foto llega a sangre hasta los bordes (sin padding) y
   el texto vive en su propio panel con el suyo. Por eso el padding no está en
   __agent-inner sino en __info.
   -------------------------------------------------------------------------- */

.sb-agentblock__agent-inner {
	position: relative;
	background-color: #141411;
	color: #ffffff;
	/* El tema pone `-webkit-font-smoothing: antialiased` en body
	   (assets/css/style.css:67). Sobre fondo oscuro eso adelgaza el texto claro:
	   lo que va en 700 aguanta, pero el texto de peso normal se lee gris aunque
	   el color sea blanco puro. Se revierte el suavizado solo en esta columna. */
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	overflow: hidden;
}

/* Cinta diagonal de la esquina superior izquierda.

   Va en un <span> vacío y no en un ::before de __agent-inner porque ese
   elemento tiene overflow:hidden y es el contenedor de la foto: un pseudo
   quedaría por debajo de la imagen en cuanto la foto tuviera z-index propio.

   El dorado va en rgba y no en plano para que la cinta se apague sobre el
   carbón igual que en el diseño (#7c5f1c medido) sin inventar un tercer color.

   El ángulo: 135deg deja las bandas perpendiculares al eje del degradado, es
   decir corriendo de abajo-izquierda a arriba-derecha. Los 8px/20px son el
   ancho perpendicular de la banda y del período; medidos en horizontal sobre
   el diseño son 11px y 28px (÷√2). */
.sb-agentblock__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 180px;
	height: 26px;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(209, 157, 37, 0.62) 0,
		rgba(209, 157, 37, 0.62) 8px,
		transparent 8px,
		transparent 20px
	);
	pointer-events: none;
}

/* --- Panel de la foto ---------------------------------------------------- */

.sb-agentblock__photos {
	position: relative;
	-ms-flex: 0 0 44%;
	flex: 0 0 44%;
	max-width: 44%;
	min-width: 0;
	/* Solo asoma por los lados si el retrato no llena el panel. */
	background-color: #24241f;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	/* Suelo para que el panel no se estrangule cuando el formulario es corto
	   (p. ej. un CF7 con menos campos). */
	min-height: 420px;
	overflow: hidden;
}

.sb-agentblock__photo {
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	/* Con dos agentes co-listados el panel se reparte entre las dos fotos; este
	   suelo evita que ninguna quede en una franja impracticable. */
	min-height: 240px;
	line-height: 0;
	overflow: hidden;
}

/* La imagen se posiciona en absoluto en lugar de con `height:100%` a secas:
   así llena el panel sin depender de que la altura del flex item esté ya
   resuelta, que es justo lo que no ocurre en el editor de Elementor.

   El selector va doblado (.sb-agentblock .sb-agentblock__photo-img) por una
   razón concreta: Elementor trae `.elementor img { height:auto; max-width:100% }`
   en su frontend.min.css, y esa especificidad (0,1,1) le gana a una sola clase.
   Con la clase del bloque delante (0,2,0) la foto vuelve a llenar el panel; sin
   ella se queda en su alto natural y deja una franja de fondo debajo. */
.sb-agentblock .sb-agentblock__photo-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	/* Recorta por abajo: cara y torso se conservan en los 5 retratos, incluido
	   el cuadrado de Jessica Pichardini. */
	object-fit: cover;
	object-position: center top;
}

/* Marcador de foto — solo se emite dentro del editor de Elementor. */
.sb-agentblock__photo--placeholder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	text-align: center;
	padding: 12px;
}

.sb-agentblock__photo--placeholder span {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- Panel del texto ----------------------------------------------------- */

.sb-agentblock__info {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	/* El padding-top deja sitio a la cinta diagonal cuando no hay foto. */
	padding: 46px 36px 46px 30px;
}

.sb-agentblock--no-photo .sb-agentblock__info {
	padding-left: 40px;
	padding-right: 40px;
}

.sb-agentblock__intro {
	margin-bottom: 26px;
}

/* Encabezado a dos colores y a dos líneas: la primera parte en blanco, la
   segunda en dorado. Van en bloque, no en línea, porque el salto entre "TU
   ASESOR EN" y "BAJA CALIFORNIA SUR" es parte del diseño y no puede quedar a
   merced del ancho disponible. */
.sb-agentblock__heading {
	font-size: 19px;
	line-height: 1.45em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 18px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sb-agentblock__heading-lead,
.sb-agentblock__heading-accent {
	display: block;
}

.sb-agentblock__heading-lead {
	color: #ffffff;
}

.sb-agentblock__heading-accent {
	color: #D19D25;
}

/* La especificidad se dobla (.sb-agentblock .sb-agentblock__tagline) para que
   ninguna tipografía global de Elementor pueda ganarle más adelante. */
.sb-agentblock .sb-agentblock__tagline {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.7em;
	font-weight: 500;
	margin: 0;
}

/* Separador dorado: va después del tagline. */
.sb-agentblock__divider {
	display: block;
	width: 44px;
	height: 3px;
	background-color: #D19D25;
	margin-top: 24px;
}

/* Si no hay tagline el separador queda pegado al encabezado; se compensa. */
.sb-agentblock__heading + .sb-agentblock__divider {
	margin-top: 4px;
}

.sb-agentblock__agent + .sb-agentblock__agent {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sb-agentblock__role {
	display: block;
	color: #D19D25;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* Sin text-transform: el diseño lleva el nombre en caja mixta ("Cesar
   Conchas"). El dato que siembra tools/seed-agents.php ya viene así; si en
   alguna página quedó en versales, se arregla en el dato, no aquí. */
.sb-agentblock__name {
	color: #ffffff;
	font-size: 30px;
	line-height: 1.18em;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	margin: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Misma razón que en las columnas: sin min-width:0 el bloque de identidad no
   encoge y el nombre se sale del recuadro oscuro. */
.sb-agentblock__identity {
	min-width: 0;
}

/* --- Redes: solo Instagram y LinkedIn -------------------------------------

   Estilos propios de arriba abajo. No se reutiliza el preset .social-icon-two
   del tema porque dibuja sus iconos con background-image (background-size:50%,
   background-repeat, background-position) en vez de con glifos, y además mete
   un margin-top:13px al icono pensado para un contenedor con line-height fijo.
   Los iconos van en SVG en línea: ver Agent_Form_Widget::social_icon(). */

.sb-agentblock__social {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.sb-agentblock__social li {
	margin: 0 10px 0 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

.sb-agentblock__social li:before {
	content: none;
}

.sb-agentblock__social li:last-child {
	margin-right: 0;
}

.sb-agentblock__social li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	line-height: 1;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: none;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

.sb-agentblock__social-icon {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	/* Un SVG inline es un elemento en línea por defecto y se apoya en la línea
	   base: sin esto queda unos píxeles por debajo del centro del círculo. */
	vertical-align: middle;
}

.sb-agentblock__social li a:hover,
.sb-agentblock__social li a:focus {
	border-color: #D19D25;
	background-color: #D19D25;
	color: #141411;
}

/* --------------------------------------------------------------------------
   Columna derecha — formulario
   Fondo BLANCO por corrección explícita del cliente (la imagen de referencia
   original lo mostraba oscuro; no se sigue).
   -------------------------------------------------------------------------- */

.sb-agentblock__form-inner {
	background-color: #ffffff;
	padding: 45px 44px;
	border: 1px solid #ebebeb;
	border-left: none;
}

.sb-agentblock--form-only .sb-agentblock__form-inner {
	border-left: 1px solid #ebebeb;
}

.sb-agentblock__notice {
	margin: 0;
	color: #8a8a8a;
	font-style: italic;
}

/* --- Campos ---------------------------------------------------------------

   El tema los pinta con borde de 2px #cccccc y 45px de alto
   (assets/css/style.css:4873). El diseño pide una caja más alta y un filete
   fino, así que se redefinen aquí: .sb-agentblock añade la clase que hace
   falta para ganar sin !important. */
.sb-agentblock .default-form input[type="text"],
.sb-agentblock .default-form input[type="email"],
.sb-agentblock .default-form input[type="tel"],
.sb-agentblock .default-form input[type="password"],
.sb-agentblock .default-form select,
.sb-agentblock .default-form textarea {
	height: 48px;
	line-height: 26px;
	padding: 10px 18px;
	font-size: 15px;
	color: #141411;
	background-color: #ffffff;
	border: 1px solid #e4e4e2;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.sb-agentblock .default-form textarea {
	height: 148px;
	padding: 14px 18px;
	resize: none;
}

.sb-agentblock .default-form input[type="text"]:focus,
.sb-agentblock .default-form input[type="email"]:focus,
.sb-agentblock .default-form input[type="tel"]:focus,
.sb-agentblock .default-form input[type="password"]:focus,
.sb-agentblock .default-form select:focus,
.sb-agentblock .default-form textarea:focus {
	border-color: #141411;
	outline: none;
}

/* Flecha propia del <select>.

   Con `appearance:none` desaparece la del sistema; se repone en background
   para que quede igual en los dos idiomas y en los dos sistemas. El SVG va en
   línea (data URI) porque el plugin no sirve imágenes y una petición extra por
   una flecha no se justifica. */
.sb-agentblock .default-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a86' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 10px 6px;
}

/* Placeholders en caja normal: el diseño ya no los pone en versales. Cada
   prefijo necesita su propia regla — un selector agrupado lo descarta el
   navegador entero. */
.sb-agentblock .default-form input::-webkit-input-placeholder,
.sb-agentblock .default-form textarea::-webkit-input-placeholder {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: #8a8a86;
}

.sb-agentblock .default-form input::-moz-placeholder,
.sb-agentblock .default-form textarea::-moz-placeholder {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: #8a8a86;
	opacity: 1;
}

.sb-agentblock .default-form input:-ms-input-placeholder,
.sb-agentblock .default-form textarea:-ms-input-placeholder {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: #8a8a86;
}

.sb-agentblock .default-form input::placeholder,
.sb-agentblock .default-form textarea::placeholder {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: #8a8a86;
}

/* El <select> no tiene placeholder: CF7 lo resuelve con first_as_label, que es
   una <option> normal. Se le da el mismo tratamiento. */
.sb-agentblock .default-form select {
	color: #8a8a86;
}

.sb-agentblock .default-form select:valid {
	color: #141411;
}

/* Canaleta de 20px entre las dos columnas de campos, en vez de los 30 de
   Bootstrap. La `.row` y las `col-md-6` las trae el marcado del propio CF7
   (ver tools/setup-forms.php), no este widget. */
.sb-agentblock .default-form .row {
	margin-left: -10px;
	margin-right: -10px;
}

.sb-agentblock .default-form .row > [class*="col-"] {
	padding-left: 10px;
	padding-right: 10px;
}

.sb-agentblock .default-form .form-group {
	margin-bottom: 20px;
}

/* --- Casilla de consentimiento (CF7 [acceptance]) -------------------------
   El tema no trae ninguna regla para .wpcf7-list-item, así que todo esto es
   nuevo. */
.sb-agentblock .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: block;
}

.sb-agentblock .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 13px;
	line-height: 1.6em;
	color: #6a6a6a;
	display: block;
	padding-left: 30px;
}

.sb-agentblock .wpcf7-acceptance label {
	display: block;
	position: relative;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

.sb-agentblock .wpcf7-acceptance input[type="checkbox"] {
	position: absolute;
	top: 2px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #D19D25;
}

.sb-agentblock .wpcf7-acceptance a {
	color: #D19D25;
	text-decoration: none;
}

.sb-agentblock .wpcf7-acceptance a:hover,
.sb-agentblock .wpcf7-acceptance a:focus {
	text-decoration: underline;
}

/* --- Botón ----------------------------------------------------------------

   El tema define .btn-style-three con `padding: 10px 40px !important`
   (assets/css/style.css:326), así que el padding no se toca: se ajusta el
   line-height, que sí es sobreescribible, para llegar a los 48px de alto del
   diseño. Y `display:inline-flex` en lugar del `flex` del tema para que el
   botón no ocupe todo el ancho y `text-align:right` del contenedor lo pueda
   alinear a la derecha. */
.sb-agentblock .default-form .button__send__rental {
	margin-bottom: 0;
	text-align: right;
}

.sb-agentblock .default-form .theme-btn.btn-style-three {
	display: -ms-inline-flexbox;
	display: inline-flex;
	min-width: 216px;
	margin-top: 8px;
	line-height: 26px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #141411;
	background-color: #D19D25;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.sb-agentblock .default-form .theme-btn.btn-style-three:hover,
.sb-agentblock .default-form .theme-btn.btn-style-three:focus {
	color: #ffffff;
	background-color: #141411;
}

/* --- Mensajes de validación ----------------------------------------------
   themes/shina/style.css:709 hace `.wpcf7-response-output { display:none }`
   para todo el sitio. Con un [acceptance] obligatorio eso significa que el
   envío falla en silencio: el usuario pulsa Enviar y no pasa nada visible.
   Se reactiva únicamente dentro de este bloque. */
.sb-agentblock .wpcf7-response-output {
	display: block;
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 2px solid #cccccc;
	font-size: 14px;
	line-height: 1.5em;
}

.sb-agentblock .wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450;
	color: #141411;
}

.sb-agentblock .wpcf7 form.invalid .wpcf7-response-output,
.sb-agentblock .wpcf7 form.unaccepted .wpcf7-response-output,
.sb-agentblock .wpcf7 form.failed .wpcf7-response-output,
.sb-agentblock .wpcf7 form.aborted .wpcf7-response-output,
.sb-agentblock .wpcf7 form.spam .wpcf7-response-output {
	border-color: #dc3232;
	color: #a02222;
}

.sb-agentblock .wpcf7-not-valid-tip {
	display: block;
	color: #dc3232;
	font-size: 13px;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Responsive

   El 50/50 se mantiene hasta 992px y ahí se apila. No hay tramo intermedio al
   33% como antes: con el panel de foto dentro de la columna, un 33% dejaría la
   foto en una franja de ~160px. Entre 992 y 1199 solo se aprieta la
   tipografía.

   (El footer del tema apila su columna estrecha a 1200px con col-lg-3 +
   col-md-12; aquí se apila a 992 porque a 1024–1199 el 50/50 todavía se lee
   bien y apilar tan pronto dejaría un bloque oscuro enorme sobre el
   formulario en cualquier portátil.)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
	.sb-agentblock__info {
		padding: 38px 26px 38px 24px;
	}

	.sb-agentblock__form-inner {
		padding: 38px 30px;
	}

	.sb-agentblock__heading {
		font-size: 17px;
	}

	.sb-agentblock__name {
		font-size: 25px;
	}

	.sb-agentblock__photos {
		min-height: 380px;
	}
}

/* Apilado. La columna oscura conserva la fila foto + texto: a ancho completo
   el panel de foto pasa a medida fija y el texto se queda con el resto. */
@media only screen and (max-width: 991px) {
	.sb-agentblock__row {
		display: block;
	}

	.sb-agentblock__agent-column,
	.sb-agentblock__form-column,
	.sb-agentblock__form-column--full {
		display: block;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.sb-agentblock__form-inner {
		border-left: 1px solid #ebebeb;
		border-top: none;
	}

	.sb-agentblock__photos {
		-ms-flex: 0 0 230px;
		flex: 0 0 230px;
		max-width: 230px;
		min-height: 320px;
	}

	.sb-agentblock__photo {
		min-height: 160px;
	}

	.sb-agentblock__info {
		padding: 36px 30px;
	}

	.sb-agentblock__intro {
		margin-bottom: 24px;
	}

	/* Con más ancho disponible el encabezado puede respirar. */
	.sb-agentblock__heading {
		font-size: 20px;
	}

	.sb-agentblock__name {
		font-size: 26px;
	}
}

/* Móvil */
@media only screen and (max-width: 599px) {
	.sb-agentblock__photos {
		-ms-flex: 0 0 150px;
		flex: 0 0 150px;
		max-width: 150px;
		min-height: 260px;
	}

	.sb-agentblock__info {
		padding: 30px 20px;
	}

	.sb-agentblock__form-inner {
		padding: 30px 20px;
	}

	.sb-agentblock__heading {
		font-size: 18px;
	}

	.sb-agentblock__name {
		font-size: 22px;
	}

	.sb-agentblock__ribbon {
		width: 130px;
		height: 20px;
	}

	.sb-agentblock__social li a {
		width: 34px;
		height: 34px;
	}
}

/* Móvil estrecho: la fila ya no cabe. La foto pasa a una banda superior a todo
   lo ancho — con dos agentes, las dos fotos se reparten esa banda. */
@media only screen and (max-width: 479px) {
	.sb-agentblock__agent-inner {
		display: block;
	}

	.sb-agentblock__photos {
		-ms-flex: none;
		flex: none;
		width: 100%;
		max-width: 100%;
		height: 260px;
		min-height: 0;
		-ms-flex-direction: row;
		flex-direction: row;
	}

	.sb-agentblock__photo {
		-ms-flex: 1 1 0%;
		flex: 1 1 0%;
		min-height: 0;
	}

	.sb-agentblock .sb-agentblock__photo-img {
		object-position: center 15%;
	}
}

/* ==========================================================================
   Montaje de DOS agentes: dos filas
   --------------------------------------------------------------------------
   Con dos asesores el montaje partido no daba de sí — las dos fotos se
   apilaban en una columna de 244px y los dos nombres en otra de 311px. Aquí el
   formulario pasa arriba a todo el ancho y los agentes bajan a una fila de
   tarjetas (foto a la izquierda, datos a la derecha).

   Lo dispara .sb-agentblock--two-agents, que el PHP solo pone cuando emite el
   árbol de tarjetas: __cards > __card > (__photo + __card-body). En este árbol
   NO existen __photos ni __info, así que todas sus reglas —y son muchas— caen
   solas sin necesidad de neutralizarlas.

   TODO va al final del archivo a propósito. El archivo tiene dos selectores
   doblados —.sb-agentblock .sb-agentblock__photo-img (188) y
   .sb-agentblock .sb-agentblock__tagline (275)— con especificidad (0,2,0), que
   EMPATAN con un .sb-agentblock--two-agents .x: en un empate decide el orden de
   aparición. Estando al final, se gana el empate; y donde no basta con eso se
   sube a (0,3,0), marcado caso por caso más abajo.
   ========================================================================== */

.sb-agentblock--two-agents .sb-agentblock__row {
	/* Dos hijos al 100% se apilarían igual en flex, pero en bloque no queda
	   ningún resto de dimensionado flex que pueda actuar. */
	display: block;
}

/* Las columnas base llevan max-width:50% (línea 64). Es el max-width, no el
   width, lo que hay que vencer: el mismo patrón del que avisa el README sobre
   las col-* de Bootstrap. */
.sb-agentblock--two-agents .sb-agentblock__agent-column,
.sb-agentblock--two-agents .sb-agentblock__form-column {
	display: block;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

/* El hueco separa las dos filas, así que va en la SEGUNDA — el formulario.
   Si algún día se vuelve a invertir el orden, este margen se mueve con él. */
.sb-agentblock--two-agents .sb-agentblock__form-column {
	margin-top: 40px;
}

/* A ancho completo el recuadro blanco necesita sus CUATRO lados. Las reglas
   base le quitan dos: el izquierdo (416), porque en el montaje partido va
   pegado a la columna oscura, y el superior en @991 (721), que da por hecho que
   va pegado por arriba al apilarse. Aquí el formulario va debajo pero SEPARADO
   por el hueco entre filas, así que sin estos dos bordes el recuadro quedaría
   abierto. */
.sb-agentblock--two-agents .sb-agentblock__form-inner {
	border-left: 1px solid #ebebeb;
	border-top: 1px solid #ebebeb;
}

/* Los campos del CF7 traen .row + .col-md-6 en su propio marcado. A 1140px de
   ancho eso da inputs de ~550px y un textarea de ~1050px: legible, no. El
   bloque blanco sigue ocupando todo el ancho; lo que se acota es el contenido. */
.sb-agentblock--two-agents .sb-agentblock__form-inner > .default-form {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* La columna oscura pasa de fila a columna: encabezado arriba, tarjetas abajo.
   `display:flex` va explícito porque en @479 la regla base pone
   `display:block` (794) y dejaría flex-direction huérfano.
   El padding se reubica aquí: lo llevaba __info, que en este árbol no existe. */
.sb-agentblock--two-agents .sb-agentblock__agent-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 48px 44px;
}

/* El encabezado deja de acompañar a un agente y pasa a titular la fila. */
.sb-agentblock--two-agents .sb-agentblock__intro--header {
	margin-bottom: 34px;
}

.sb-agentblock--two-agents .sb-agentblock__heading {
	font-size: 26px;
}

/* (0,3,0): .sb-agentblock .sb-agentblock__tagline (275) empata en (0,2,0). */
.sb-agentblock.sb-agentblock--two-agents .sb-agentblock__tagline {
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   La fila de tarjetas

   Canaleta con flex:1 1 0% + margin-left y no con `gap`: el archivo lleva
   prefijos -ms-flex de arriba abajo y gap no existe en IE11, donde las
   tarjetas se tocarían. El flex-basis va con unidad (0%, nunca 0) por lo mismo.

   Como __cards estira, las dos tarjetas quedan a la misma altura y por tanto
   las dos fotos también — sin JS y sin aspect-ratio.
   -------------------------------------------------------------------------- */
.sb-agentblock--two-agents .sb-agentblock__cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.sb-agentblock--two-agents .sb-agentblock__card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
	/* Sin esto el min-width:auto del flex item impide encoger por debajo del
	   ancho del contenido y el nombre se sale de la tarjeta. */
	min-width: 0;
}

.sb-agentblock--two-agents .sb-agentblock__card + .sb-agentblock__card {
	margin-left: 32px;
}

/* La foto de tarjeta es de ancho fijo. Las reglas base la dan como
   `flex:1 1 auto; min-height:240px` (166) para repartirse el panel a sangre. */
.sb-agentblock--two-agents .sb-agentblock__photo--card {
	-ms-flex: 0 0 168px;
	flex: 0 0 168px;
	max-width: 168px;
	min-height: 224px;
}

/* Solo asoma si la foto no llena; y es el fondo del hueco reservado cuando a un
   agente le falta la foto y al otro no. */
.sb-agentblock--two-agents .sb-agentblock__photo--empty {
	background-color: #24241f;
}

.sb-agentblock--two-agents .sb-agentblock__card-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 22px;
}

.sb-agentblock--two-agents .sb-agentblock__card--no-photo .sb-agentblock__card-body {
	padding-left: 0;
}

.sb-agentblock--two-agents .sb-agentblock__name {
	font-size: 22px;
}

.sb-agentblock--two-agents .sb-agentblock__social {
	margin-top: 16px;
}

/* (0,3,0): en @479 la regla doblada de la línea 815 pone `center 15%`, pensado
   para la banda horizontal del montaje partido. En tarjeta el retrato es
   vertical y quiere la cabeza arriba. Se declara aquí y no dentro del media
   query para que valga en todos los tramos. */
.sb-agentblock .sb-agentblock__card .sb-agentblock__photo-img {
	object-position: center top;
}

/* --------------------------------------------------------------------------
   Responsive

   Las escaleras de __heading (19 → 17 → 20 → 18) y __name (30 → 25 → 26 → 22)
   NO son monótonas: suben en @991 porque al apilar hay más ancho. Por eso hay
   que redefinir los CINCO valores de cada una — con solo la base, los tramos
   intermedios se filtran y el título crece al estrechar la ventana.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {

	.sb-agentblock--two-agents .sb-agentblock__form-column { margin-top: 34px; }

	.sb-agentblock--two-agents .sb-agentblock__agent-inner { padding: 40px 32px; }

	.sb-agentblock--two-agents .sb-agentblock__intro--header { margin-bottom: 30px; }

	.sb-agentblock--two-agents .sb-agentblock__heading { font-size: 23px; }

	.sb-agentblock--two-agents .sb-agentblock__name { font-size: 20px; }

	.sb-agentblock--two-agents .sb-agentblock__card + .sb-agentblock__card {
		margin-left: 24px;
	}

	.sb-agentblock--two-agents .sb-agentblock__photo--card {
		-ms-flex: 0 0 150px;
		flex: 0 0 150px;
		max-width: 150px;
		min-height: 200px;
	}

	.sb-agentblock--two-agents .sb-agentblock__card-body { padding-left: 20px; }
}

/* Tablet: una tarjeta por fila. La foto CRECE respecto al tramo anterior (160
   frente a 150) porque la tarjeta pasa a ocupar el ancho entero — igual que
   hace la escalera de __heading en la línea 746. El `sizes` de render_photo()
   refleja este mismo salto. */
@media only screen and (max-width: 991px) {

	.sb-agentblock--two-agents .sb-agentblock__form-column { margin-top: 30px; }

	.sb-agentblock--two-agents .sb-agentblock__agent-inner { padding: 36px 30px; }

	.sb-agentblock--two-agents .sb-agentblock__intro--header { margin-bottom: 30px; }

	.sb-agentblock--two-agents .sb-agentblock__heading { font-size: 22px; }

	.sb-agentblock--two-agents .sb-agentblock__name { font-size: 22px; }

	.sb-agentblock--two-agents .sb-agentblock__cards { display: block; }

	.sb-agentblock--two-agents .sb-agentblock__card + .sb-agentblock__card {
		margin-left: 0;
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.sb-agentblock--two-agents .sb-agentblock__photo--card {
		-ms-flex: 0 0 160px;
		flex: 0 0 160px;
		max-width: 160px;
		min-height: 210px;
	}

	.sb-agentblock--two-agents .sb-agentblock__card-body { padding-left: 22px; }
}

@media only screen and (max-width: 599px) {

	.sb-agentblock--two-agents .sb-agentblock__form-column { margin-top: 24px; }

	.sb-agentblock--two-agents .sb-agentblock__agent-inner { padding: 32px 20px; }

	.sb-agentblock--two-agents .sb-agentblock__intro--header { margin-bottom: 26px; }

	.sb-agentblock--two-agents .sb-agentblock__heading { font-size: 19px; }

	.sb-agentblock--two-agents .sb-agentblock__name { font-size: 19px; }

	.sb-agentblock--two-agents .sb-agentblock__card + .sb-agentblock__card {
		margin-top: 24px;
		padding-top: 24px;
	}

	/* Aquí la tarjeta APILA: foto arriba, datos debajo.
	   Medido en el sitio real, no supuesto: a 375px de viewport el widget solo
	   mide 280px —el _padding_mobile de Elementor ya se come 16px por lado— y
	   con la foto al lado a los datos les quedan 112px. «ASESOR INMOBILIARIO»
	   necesita ~152px con su letter-spacing de 0.18em, así que partía en dos
	   líneas, y «Jessica Pichardini» en otras dos. Apilando, el texto dispone
	   del ancho entero de la tarjeta y todo cabe en una línea.
	   El corte está en 599 y no en 479 porque la cuenta deja de salir hacia los
	   520px; 599 es el breakpoint del tema más cercano por arriba. */
	.sb-agentblock--two-agents .sb-agentblock__card {
		display: block;
	}

	.sb-agentblock--two-agents .sb-agentblock__photo--card {
		-ms-flex: none;
		flex: none;
		width: 100%;
		max-width: 100%;
		height: 220px;
		min-height: 0;
	}

	.sb-agentblock--two-agents .sb-agentblock__card-body {
		padding-left: 0;
		padding-top: 18px;
	}
}

/* Móvil. La tarjeta ya apila desde 599 (ver arriba); aquí solo se aprieta.

   Lo importante de este tramo: la regla base de la línea 809 pone
   `.sb-agentblock__photo { flex:1 1 0%; min-height:0 }`. En una tarjeta eso
   deja la foto sin base de ancho Y SIN ALTURA, y como el <img> es
   position:absolute (188), las fotos DESAPARECEN por debajo de 480px — con el
   src intacto en el DOM, que es lo que hace el diagnóstico tan difícil. El
   flex-basis fijo de aquí es lo que lo impide. No lo quites. */
@media only screen and (max-width: 479px) {

	.sb-agentblock--two-agents .sb-agentblock__form-column { margin-top: 20px; }

	.sb-agentblock--two-agents .sb-agentblock__agent-inner { padding: 30px 16px; }

	.sb-agentblock--two-agents .sb-agentblock__intro--header { margin-bottom: 24px; }

	.sb-agentblock--two-agents .sb-agentblock__heading { font-size: 18px; }

	.sb-agentblock--two-agents .sb-agentblock__name { font-size: 17px; }

	.sb-agentblock--two-agents .sb-agentblock__photo--card {
		height: 200px;
	}

	.sb-agentblock--two-agents .sb-agentblock__card-body {
		padding-top: 16px;
	}
}