/* Marcos y contornos de las fotos (agente de fotos).
 *
 * Se carga después de style.css y hero.css. Solo cambia el "marco" de cada foto
 * (esquinas, filetes dorados, sombras, paspartú), nunca el tamaño ni el recorte:
 * - los marcos desplazados y filetes son pseudo-elementos o box-shadow (no mueven nada);
 * - el paspartú de antes/después y galería es padding dentro de la propia imagen con
 *   box-sizing: border-box, así la caja mide exactamente lo mismo que antes;
 * - el zoom al pasar el mouse ocurre dentro del marco (overflow: hidden) y solo en
 *   dispositivos con mouse; con "reducir movimiento" no hay transiciones.
 * No toca: hero de portada, banners de página (.bib-page-hero), reels ni la tienda.
 */

:root {
	--bib-ph-radius: 8px;
	--bib-ph-gold: rgba(212, 169, 96, .62);
	--bib-ph-gold-soft: rgba(212, 169, 96, .32);
	--bib-ph-hair-light: rgba(255, 255, 255, .55);
	/* Sombra larga y suave para fondos blancos/crema. */
	--bib-ph-shadow-light: 0 1px 2px rgba(23, 20, 15, .06), 0 10px 22px -12px rgba(23, 20, 15, .22), 0 34px 60px -34px rgba(23, 20, 15, .38);
	/* En fondo negro la sombra no se ve: borde dorado tenue + halo cálido. */
	--bib-ph-shadow-dark: 0 0 0 1px rgba(212, 169, 96, .3), 0 24px 60px -28px rgba(0, 0, 0, .9), 0 0 48px -18px rgba(212, 169, 96, .22);
	--bib-ph-offset: 18px;
	--bib-ph-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 781px) {
	:root { --bib-ph-radius: 6px; --bib-ph-offset: 9px; }
}

/* ---------- 1. Tarjetas de servicios (portada) ---------- */
.bib-cards .bib-card > .wp-block-image {
	position: relative;
	border-radius: var(--bib-ph-radius);
	box-shadow: var(--bib-ph-shadow-light);
	isolation: isolate;
}
/* Filete interior blanco que se vuelve dorado al pasar el mouse. */
.bib-cards .bib-card > .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 1;
	border: 1px solid var(--bib-ph-hair-light);
	border-radius: calc(var(--bib-ph-radius) - 4px);
	pointer-events: none;
	transition: border-color .5s var(--bib-ph-ease), inset .5s var(--bib-ph-ease);
}
.bib-cards .bib-card:hover > .wp-block-image::after { border-color: rgba(212, 169, 96, .9); inset: 16px; }

/* ---------- 2. Foto "La historia de YC" (portada, fondo negro) ---------- */
/* ---------- 3. Retratos en páginas internas (Nosotros, Empleo) ---------- */
.bib-about .bib-photo,
.bib-portrait.bib-portrait {
	position: relative;
	isolation: isolate;
	--bib-ph-dx: var(--bib-ph-offset);
}
/* Si la foto está en la columna izquierda, el marco se desplaza hacia la izquierda
   (hacia el margen de la página) para no acercarse al texto. */
.wp-block-column:first-child > .bib-portrait.bib-portrait,
.wp-block-column:first-child > .bib-photo { --bib-ph-dx: calc(var(--bib-ph-offset) * -1); }
.bib-about .bib-photo img,
.bib-portrait.bib-portrait img {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: var(--bib-ph-radius);
}
/* Marco dorado desplazado detrás de la foto (no ocupa espacio). */
.bib-about .bib-photo::before,
.bib-portrait.bib-portrait::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--bib-ph-gold);
	border-radius: var(--bib-ph-radius);
	transform: translate(var(--bib-ph-dx), var(--bib-ph-offset));
	pointer-events: none;
}
/* Filete fino dentro de la foto. */
.bib-about .bib-photo::after,
.bib-portrait.bib-portrait::after {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 2;
	border: 1px solid var(--bib-ph-hair-light);
	border-radius: calc(var(--bib-ph-radius) - 4px);
	pointer-events: none;
}
.bib-about .bib-photo img { box-shadow: var(--bib-ph-shadow-dark); }
.bib-portrait.bib-portrait img { box-shadow: var(--bib-ph-shadow-light); }
.bib-dark .bib-portrait.bib-portrait img { box-shadow: var(--bib-ph-shadow-dark); }
.bib-about .bib-photo::before { border-color: rgba(212, 169, 96, .7); }
@media (max-width: 781px) {
	.bib-about .bib-photo::after,
	.bib-portrait.bib-portrait::after { inset: 8px; }
}

/* ---------- 4. Equipo (tarjetas negras sobre blanco) ---------- */
.bib-team .bib-team-card {
	border-radius: var(--bib-ph-radius);
	box-shadow: var(--bib-ph-shadow-light);
	isolation: isolate;
}
.bib-team .bib-team-card::after {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 3;
	border: 1px solid var(--bib-ph-gold-soft);
	border-radius: calc(var(--bib-ph-radius) - 4px);
	pointer-events: none;
	transition: border-color .5s var(--bib-ph-ease);
}
.bib-team .bib-team-card:hover::after { border-color: rgba(212, 169, 96, .8); }

/* ---------- 5. Servicios: bloque foto + panel negro ---------- */
/* El bloque entero se trata como una sola pieza enmarcada. Sin overflow:hidden en el
   bloque (cortaría las animaciones de entrada): cada mitad redondea sus propias esquinas. */
.bib-split.bib-split {
	border-radius: var(--bib-ph-radius);
	box-shadow: var(--bib-ph-shadow-light), 0 0 0 1px rgba(212, 169, 96, .22);
}
.bib-split.bib-split > :first-child,
.bib-split.bib-split > :first-child .wp-block-image,
.bib-split.bib-split > :first-child img { border-radius: var(--bib-ph-radius) 0 0 var(--bib-ph-radius); }
.bib-split.bib-split > :last-child,
.bib-split.bib-split > :last-child .wp-block-image,
.bib-split.bib-split > :last-child img { border-radius: 0 var(--bib-ph-radius) var(--bib-ph-radius) 0; }
@media (max-width: 781px) {
	/* Apilado: la foto siempre arriba, el panel abajo. */
	.bib-split.bib-split > .bib-split__media,
	.bib-split.bib-split > .bib-split__media .wp-block-image,
	.bib-split.bib-split > .bib-split__media img { border-radius: var(--bib-ph-radius) var(--bib-ph-radius) 0 0; }
	.bib-split.bib-split > .bib-split__panel { border-radius: 0 0 var(--bib-ph-radius) var(--bib-ph-radius); }
}
.bib-split__media .wp-block-image { position: relative; overflow: hidden; }
.bib-split__media .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 14px;
	z-index: 1;
	border: 1px solid var(--bib-ph-hair-light);
	border-radius: 3px;
	pointer-events: none;
}
/* Línea dorada donde la foto toca el panel negro. */
.bib-split.bib-split > .bib-split__panel:first-child { box-shadow: inset -1px 0 0 rgba(212, 169, 96, .35); }
.bib-split.bib-split > .bib-split__panel:last-child { box-shadow: inset 1px 0 0 rgba(212, 169, 96, .35); }
@media (max-width: 781px) {
	.bib-split.bib-split > .bib-split__panel:first-child,
	.bib-split.bib-split > .bib-split__panel:last-child { box-shadow: inset 0 1px 0 rgba(212, 169, 96, .35); }
	.bib-split__media .wp-block-image::after { inset: 10px; }
}

/* ---------- 6. Fotos de productos (sección negra) ---------- */
.bib-es-photos .wp-block-image {
	position: relative;
	border-radius: var(--bib-ph-radius);
	overflow: hidden;
	box-shadow: var(--bib-ph-shadow-dark);
}
.bib-es-photos img { display: block; }

/* ---------- 7. Antes / después y galería: paspartú tipo foto impresa ---------- */
/* Paspartú blanco + filete dorado dentro de la misma caja (border-box): misma medida. */
.bib-ba-grid > .bib-ba img,
.bib-gallery .wp-block-image img {
	box-sizing: border-box;
	padding: 7px;
	background: #fff;
	border: 1px solid rgba(212, 169, 96, .45);
	border-radius: var(--bib-ph-radius);
	box-shadow: var(--bib-ph-shadow-light);
	transition: border-color .5s var(--bib-ph-ease), box-shadow .5s var(--bib-ph-ease);
}
.bib-dark .bib-ba-grid > .bib-ba img,
.bib-dark .bib-gallery .wp-block-image img {
	background: #15130f;
	box-shadow: var(--bib-ph-shadow-dark);
}
/* En el carrusel del teléfono la sombra exterior se cortaría: solo una muy corta. */
@media (max-width: 781px) {
	.bib-ba-grid > .bib-ba img { padding: 5px; box-shadow: 0 1px 2px rgba(23, 20, 15, .1); }
	.bib-gallery .wp-block-image img { padding: 5px; }
}
/* Etiquetas "Antes / Después" a juego. */
.bib-ba-grid > .bib-ba::before,
.bib-ba-grid > .bib-ba::after {
	top: 1rem;
	padding: .3rem .7rem .28rem;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 999px;
}
.bib-ba-grid > .bib-ba::before {
	left: 1rem;
	background: rgba(10, 10, 10, .72);
	color: #F6F3EE;
	box-shadow: inset 0 0 0 1px rgba(212, 169, 96, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.bib-ba-grid > .bib-ba::after {
	left: calc(36% + .6rem);
	background: #D4A960;
	color: #0A0A0A;
	box-shadow: 0 2px 10px rgba(10, 10, 10, .25);
}
@media (max-width: 420px) {
	.bib-ba-grid > .bib-ba::before,
	.bib-ba-grid > .bib-ba::after { top: .8rem; padding: .25rem .55rem .22rem; font-size: .625rem; letter-spacing: .1em; }
	.bib-ba-grid > .bib-ba::before { left: .8rem; }
}
.bib-ba-grid > .bib-ba figcaption { padding-top: 1rem; }

/* ---------- Zoom suave dentro del marco (solo con mouse) ---------- */
.bib-team .bib-team-card .wp-block-image,
.bib-split__media .wp-block-image { overflow: hidden; }
.bib-about .bib-photo img,
.bib-portrait.bib-portrait img,
.bib-split__media img { transition: transform .8s var(--bib-ph-ease); }
@media (hover: hover) and (pointer: fine) {
	.bib-split.bib-split:hover .bib-split__media img { transform: scale(1.03); }
	.bib-ba-grid > .bib-ba:hover img,
	.bib-gallery .wp-block-image:hover img { border-color: rgba(212, 169, 96, .9); }
}
/* En pantallas táctiles el ":hover" se queda pegado: sin zoom. */
@media (hover: none) {
	.bib-cards .bib-card:hover > .wp-block-image img,
	.bib-team .bib-team-card:hover img { transform: none; }
	.bib-cards .bib-card:hover > .wp-block-image::after { inset: 12px; border-color: var(--bib-ph-hair-light); }
}

@media (prefers-reduced-motion: reduce) {
	.bib-cards .bib-card > .wp-block-image img,
	.bib-cards .bib-card > .wp-block-image::after,
	.bib-team .bib-team-card img,
	.bib-team .bib-team-card::after,
	.bib-about .bib-photo img,
	.bib-portrait.bib-portrait img,
	.bib-split__media img,
	.bib-ba-grid > .bib-ba img,
	.bib-gallery .wp-block-image img { transition: none; }
	.bib-cards .bib-card:hover > .wp-block-image img,
	.bib-team .bib-team-card:hover img,
	.bib-split.bib-split:hover .bib-split__media img { transform: none; }
}