@charset "UTF-8";
/* ============================================================================
 * Rincón & Partners: Legal & Capital  |  rinconlegalcapital.com
 * css/custom.css  —  Componentes bespoke (capa de componentes nuevos)
 * ----------------------------------------------------------------------------
 * Esta hoja vive ENCIMA de main.css y NUNCA reescribe su mecánica.
 * Se limita a estilar los componentes nuevos del HTML index:
 *   1.  Selector de idioma (ES/EN)        →  #lang-switcher
 *   2.  Pilares de la firma               →  .pillars
 *   3.  Grid de Especialidades Legales    →  .specialty-grid (8 áreas)
 *   4.  Grid de Consultoría de Capital    →  .capital-services (6 ítems)
 *   5.  Citas destacadas                  →  .cross-quote · .doctora-quote
 *   6.  Credenciales doctorales           →  .credentials
 *   7.  Form White Glove + feedback       →  #private-consultation · .form-feedback
 *   8.  WhatsApp flotante + popup         →  #whatsapp-float · .wa-popup
 *   9.  Chibot (agente IA conversacional) →  #chibot-container · .chibot-panel
 *
 *  Todos los tokens (--oxford-blue, --gold, etc.) provienen de :root en main.css.
 * ========================================================================== */


/* ============================================================================
 * 0. TOKENS LOCALES  (extensiones específicas de componentes)
 * ========================================================================== */
:root {
	/* Colores propios de WhatsApp (no institucionales) */
	--wa-green:        #25D366;
	--wa-green-deep:   #128C7E;

	/* Burbujas de chat del Chibot */
	--bubble-bot:      rgba(245, 241, 232, 0.08);
	--bubble-user:     var(--gold);
	--bubble-user-fg:  var(--oxford-blue-deep);

	/* Anchos de paneles flotantes */
	--chibot-w:        360px;
	--chibot-h:        560px;

	/* Offsets de elementos flotantes */
	--float-offset:    1.5rem;
}


/* ============================================================================
 * 1. SELECTOR DE IDIOMA  (#lang-switcher)
 *    Pill flotante top-right · ES/EN · activa en oro
 * ========================================================================== */
.lang-switcher {
	position: fixed;
	top: var(--float-offset);
	right: var(--float-offset);
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0.35rem 0.65rem;
	background: rgba(6, 22, 51, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(184, 137, 60, 0.30);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow);
	z-index: var(--z-floating);
	font-family: var(--font-sans);
}

.lang-switcher .lang-btn {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--ivory-soft);
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease),
	            background-color var(--dur-fast) var(--ease);
}

.lang-switcher .lang-btn:hover { color: var(--gold-soft); }

.lang-switcher .lang-btn.is-active {
	color: var(--oxford-blue-deep);
	background: var(--gold);
	box-shadow: 0 1px 4px rgba(184, 137, 60, 0.4);
}

.lang-switcher .lang-sep {
	color: var(--steel);
	font-size: var(--fs-xs);
	user-select: none;
	margin: 0 0.15rem;
}

/* Mobile: switcher más compacto y desplazado para no chocar con el header */
@media (max-width: 480px) {
	.lang-switcher {
		top: 0.85rem;
		right: 0.85rem;
		padding: 0.25rem 0.5rem;
	}
	.lang-switcher .lang-btn { padding: 0.2rem 0.5rem; }
}


/* ============================================================================
 * 2. PILARES DE LA FIRMA  (.pillars dentro de #firm)
 *    Grid de 4 valores (Especialización · 360 · Confidencialidad · White Glove)
 * ========================================================================== */
ul.pillars {
	display: grid;
	grid-template-columns: 1fr;        /* mobile-first: 1 columna */
	gap: var(--sp-4);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

ul.pillars li {
	padding: var(--sp-5);
	background: rgba(184, 137, 60, 0.04);
	border: 1px solid rgba(184, 137, 60, 0.18);
	border-radius: var(--radius);
	transition: transform var(--dur-base) var(--ease-out),
	            background-color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
	/* Reseteamos el pseudo-bullet de #main article ul (definido en main.css) */
	padding-left: var(--sp-5);
	margin-bottom: 0;
}
ul.pillars li::before { display: none !important; } /* anula bullet */

ul.pillars li:hover {
	background: rgba(184, 137, 60, 0.08);
	border-color: var(--gold);
	transform: translateY(-2px);
}

ul.pillars li .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--sp-3);
	font-size: 1.1rem;
	color: var(--gold);
	background: rgba(184, 137, 60, 0.12);
	border-radius: 50%;
}

ul.pillars li h4 {
	font-size: var(--fs-md);
	color: var(--ivory-soft);
	margin-bottom: var(--sp-2);
}

ul.pillars li p {
	font-size: var(--fs-sm);
	color: var(--ivory);
	margin-bottom: 0;
	line-height: 1.5;
}

/* Tablet: 2 columnas */
@media (min-width: 600px) {
	ul.pillars { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop ancho: 4 columnas (no se aplica dentro del modal de 44rem,
   pero queda preparado por si se usa en otra plantilla más ancha) */
@media (min-width: 1100px) {
	ul.pillars { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================================
 * 3. ESPECIALIDADES LEGALES  (.specialty-grid en #legal)
 *    8 cards con icono + título + descripción + tag de senior asignado
 * ========================================================================== */
.specialty-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: var(--sp-6) 0 var(--sp-5);
}

.specialty-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-5);
	background: linear-gradient(180deg,
	            rgba(20, 49, 91, 0.45) 0%,
	            rgba(6, 22, 51, 0.55) 100%);
	border: 1px solid rgba(245, 241, 232, 0.12);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease-out),
	            border-color var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease);
}

/* Filete dorado lateral (signature visual de la firma) */
.specialty-card::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--dur-base) var(--ease-out);
}

.specialty-card:hover {
	border-color: rgba(184, 137, 60, 0.45);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.specialty-card:hover::before { transform: scaleY(1); }

.specialty-card .specialty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--sp-4);
	font-size: 1.25rem;
	color: var(--gold-soft);
	background: rgba(184, 137, 60, 0.10);
	border: 1px solid rgba(184, 137, 60, 0.25);
	border-radius: var(--radius);
	transition: all var(--dur-fast) var(--ease);
}
.specialty-card:hover .specialty-icon {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--oxford-blue-deep);
}

.specialty-card h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-2);
	color: var(--ivory-soft);
}

.specialty-card p {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ivory);
	margin-bottom: var(--sp-4);
	flex-grow: 1; /* empuja el .specialty-tag al fondo */
}

/* Tag inferior: identifica al senior asignado a cada área */
.specialty-card .specialty-tag {
	display: inline-block;
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-soft);
	background: rgba(184, 137, 60, 0.10);
	border: 1px solid rgba(184, 137, 60, 0.30);
	border-radius: var(--radius-pill);
}
.specialty-card:hover .specialty-tag {
	color: var(--oxford-blue-deep);
	background: var(--gold);
	border-color: var(--gold);
}

/* Tablet en adelante: 2 columnas dentro del modal */
@media (min-width: 600px) {
	.specialty-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Disclaimer al pie del grid */
.disclaimer {
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--steel-light);
	border-left: 2px solid var(--steel);
	padding-left: var(--sp-4);
	margin-top: var(--sp-5);
	max-width: 100%;
}


/* ============================================================================
 * 4. CONSULTORÍA DE CAPITAL  (.capital-services en #capital)
 *    6 ítems compactos con icono + título + descripción
 * ========================================================================== */
.capital-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: var(--sp-6) 0;
}

.capital-item {
	display: flex;
	flex-direction: column;
	padding: var(--sp-4) var(--sp-5);
	background: rgba(255, 255, 255, 0.03);
	border-left: 2px solid var(--gold);
	border-radius: 0 var(--radius) var(--radius) 0;
	transition: background-color var(--dur-fast) var(--ease),
	            border-left-color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}
.capital-item:hover {
	background: rgba(184, 137, 60, 0.06);
	border-left-color: var(--gold-soft);
	transform: translateX(3px);
}

.capital-item .icon {
	font-size: 1.25rem;
	color: var(--gold-soft);
	margin-bottom: var(--sp-3);
	width: auto;
	height: auto;
	background: none;
	border: 0;
}

.capital-item h4 {
	font-size: var(--fs-md);
	margin-bottom: var(--sp-2);
	color: var(--ivory-soft);
}

.capital-item p {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ivory);
	margin-bottom: 0;
}

/* Tablet: 2 columnas */
@media (min-width: 600px) {
	.capital-services { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================================
 * 5. CITAS DESTACADAS  (.cross-quote · .doctora-quote)
 *    Heredan de blockquote en main.css; aquí refuerzan jerarquía visual
 * ========================================================================== */
.cross-quote,
.doctora-quote {
	font-size: var(--fs-md);
	font-family: var(--font-serif);
	font-style: italic;
	line-height: 1.5;
	color: var(--gold-soft);
	background: rgba(184, 137, 60, 0.06);
	border-left: 4px solid var(--gold);
	padding: var(--sp-5) var(--sp-6);
	margin-top: var(--sp-6);
	position: relative;
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* Comilla decorativa en serif clásica */
.cross-quote::before,
.doctora-quote::before {
	content: '“';
	position: absolute;
	top: -0.5rem;
	left: var(--sp-3);
	font-family: var(--font-serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--gold);
	opacity: 0.45;
	pointer-events: none;
}


/* ============================================================================
 * 6. CREDENCIALES DOCTORALES  (.credentials en #doctora)
 *    Lista con check dorado en lugar de bullet
 * ========================================================================== */
ul.credentials {
	list-style: none;
	padding: 0;
	margin: var(--sp-5) 0;
}

ul.credentials li {
	position: relative;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
	font-size: var(--fs-base);
	color: var(--ivory);
	border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}
ul.credentials li:last-child { border-bottom: 0; }

/* Anula el bullet circular dorado heredado de #main article ul */
ul.credentials li::before {
	content: '\f00c'; /* fa-check */
	font-family: 'Font Awesome 5 Free', 'FontAwesome';
	font-weight: 900;
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 1.5rem; height: 1.5rem;
	background: rgba(184, 137, 60, 0.15) !important;
	color: var(--gold);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	border: 1px solid rgba(184, 137, 60, 0.30);
}


/* ============================================================================
 * 7. FORMULARIO WHITE GLOVE — refinamientos sobre #private-consultation
 *    + zona de feedback post-submit + canales directos
 * ========================================================================== */
#private-consultation {
	margin-top: var(--sp-5);
}

/* Línea decorativa superior del formulario (signature gold) */
#private-consultation::before {
	content: '';
	display: block;
	width: 3rem;
	height: 2px;
	background: var(--gold);
	margin-bottom: var(--sp-5);
}

/* Link inline dentro de la política de tratamiento de datos */
.inline-link {
	color: var(--gold-soft) !important;
	border-bottom: 1px dotted var(--gold-soft) !important;
}
.inline-link:hover {
	color: var(--gold) !important;
	border-bottom-style: solid !important;
}

/* Zona de feedback: success, error, priority */
.form-feedback {
	margin-top: var(--sp-4);
	padding: 0;
	font-size: var(--fs-sm);
	border-radius: var(--radius);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height var(--dur-base) var(--ease),
	            opacity var(--dur-base) var(--ease),
	            padding var(--dur-base) var(--ease),
	            margin-top var(--dur-base) var(--ease);
}

.form-feedback.is-visible {
	max-height: 20rem;
	opacity: 1;
	padding: var(--sp-4);
	margin-top: var(--sp-5);
}

.form-feedback.is-success {
	background: rgba(47, 133, 90, 0.10);
	border-left: 3px solid var(--success);
	color: var(--ivory-soft);
}
.form-feedback.is-error {
	background: rgba(155, 44, 44, 0.10);
	border-left: 3px solid var(--danger);
	color: var(--ivory-soft);
}
/* Lead prioritario detectado por rincon-ux.js (HNWI / Family Office) */
.form-feedback.is-priority {
	background: linear-gradient(90deg, rgba(184, 137, 60, 0.12), rgba(6, 22, 51, 0.5));
	border-left: 3px solid var(--gold);
	color: var(--ivory-soft);
}
.form-feedback.is-priority::before {
	content: '\f005 \00a0';   /* fa-star + nbsp */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: var(--gold);
	margin-right: var(--sp-2);
}

/* Canales directos (email · WhatsApp · LinkedIn) bajo el formulario */
.direct-channels {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(245, 241, 232, 0.10);
	justify-content: center;
}


/* ============================================================================
 * 8. WHATSAPP FLOTANTE  (#whatsapp-float · .wa-float)
 *    Botón circular con verde institucional + popup de invitación no invasivo
 * ========================================================================== */
.wa-float {
	position: fixed;
	bottom: var(--float-offset);
	right: var(--float-offset);
	z-index: var(--z-floating);
}

.wa-float .wa-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--wa-green);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.15);
	transition: transform var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            background-color var(--dur-fast) var(--ease);
	position: relative;
	overflow: hidden;
}

/* Anillo de pulso (fallback CSS por si no hay imagen aún) */
.wa-float .wa-link::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--wa-green);
	opacity: 0;
	animation: wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes wa-pulse {
	0%   { transform: scale(0.85); opacity: 0.7; }
	100% { transform: scale(1.5);  opacity: 0;   }
}

.wa-float .wa-link:hover {
	background: var(--wa-green-deep);
	transform: scale(1.06);
	box-shadow: 0 8px 26px rgba(37, 211, 102, 0.55);
}

.wa-float .wa-link img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Fallback visual si la imagen aún no existe (icono SVG inline de WhatsApp) */
.wa-float .wa-link img[src=""],
.wa-float .wa-link img:not([src]) { display: none; }
.wa-float .wa-link::before {
	content: '\f232'; /* fa-whatsapp */
	font-family: 'Font Awesome 5 Brands';
	font-size: 28px;
	color: white;
	position: absolute;
	z-index: 0;
}
/* Cuando la imagen sí cargó, el ::before queda detrás (no estorba) */

/* Popup de invitación (lo activa rincon-ux.js tras N segundos) */
.wa-popup {
	position: absolute;
	bottom: 70px;
	right: 0;
	width: 240px;
	padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4);
	background: var(--white);
	color: var(--charcoal);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-sm);
	line-height: 1.4;
	transform: translateY(8px) scale(0.96);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--dur-base) var(--ease-out),
	            opacity var(--dur-base) var(--ease-out);
}

/* Pico/flecha apuntando al botón */
.wa-popup::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: 18px;
	width: 16px;
	height: 16px;
	background: var(--white);
	transform: rotate(45deg);
	box-shadow: 3px 3px 6px rgba(0,0,0,0.06);
}

.wa-popup.is-visible {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.wa-popup p {
	margin: 0;
	color: var(--charcoal);
	font-family: var(--font-sans);
	max-width: 100%;
}
.wa-popup p::before {
	content: '\f232  ';
	font-family: 'Font Awesome 5 Brands';
	color: var(--wa-green);
	font-size: 1rem;
	margin-right: var(--sp-1);
}

.wa-popup .wa-close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--steel-light);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease),
	            background-color var(--dur-fast) var(--ease);
}
.wa-popup .wa-close:hover {
	color: var(--charcoal);
	background: rgba(0,0,0,0.06);
}

/* Mobile: WhatsApp un poco más pequeño y popup más compacto */
@media (max-width: 480px) {
	.wa-float { bottom: 1rem; right: 1rem; }
	.wa-float .wa-link { width: 50px; height: 50px; }
	.wa-float .wa-link img { width: 28px; height: 28px; }
	.wa-popup { width: 200px; bottom: 62px; }
}


/* ============================================================================
 * 9. CHIBOT  (#chibot-container · .chibot-panel)
 *    Agente IA conversacional · Botón flotante + panel expandible
 *    Posición: encima del botón de WhatsApp (esquina inferior derecha)
 * ========================================================================== */
#chibot-container {
	position: fixed;
	bottom: calc(var(--float-offset) + 70px); /* 70px por encima de WhatsApp */
	right: var(--float-offset);
	z-index: var(--z-chibot);
	font-family: var(--font-sans);
}

/* —— BOTÓN TRIGGER (estado colapsado) —— */
.chibot-trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: linear-gradient(135deg, var(--oxford-blue) 0%, var(--oxford-blue-soft) 100%);
	border: 2px solid var(--gold);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(6, 22, 51, 0.45),
	            0 0 0 0 var(--gold-glow);
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease),
	            opacity var(--dur-base) var(--ease);
}

.chibot-trigger:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 26px rgba(6, 22, 51, 0.55),
	            0 0 0 6px var(--gold-glow);
}

.chibot-trigger img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	pointer-events: none;
}
/* Fallback si aún no hay imagen del avatar */
.chibot-trigger img[src=""],
.chibot-trigger img:not([src]) { display: none; }
.chibot-trigger::before {
	content: '\f4ad'; /* fa-comment-dots */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--gold);
	position: absolute;
	z-index: 0;
}

/* Anillo de pulso continuo (invita a interactuar sin ser invasivo) */
.chibot-trigger .chibot-pulse {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--gold);
	opacity: 0;
	animation: chibot-pulse 3s ease-out infinite;
	pointer-events: none;
}
@keyframes chibot-pulse {
	0%   { transform: scale(0.9); opacity: 0.55; }
	80%  { opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

/* Badge "Chibot" debajo del botón */
.chibot-trigger .chibot-badge {
	position: absolute;
	bottom: -1.6rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-soft);
	background: rgba(6, 22, 51, 0.85);
	padding: 0.15rem 0.55rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	pointer-events: none;
	border: 1px solid rgba(184, 137, 60, 0.25);
}

/* Cuando el panel está abierto, el trigger se desvanece (lo controla JS con clase) */
#chibot-container.is-open .chibot-trigger {
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
}


/* —— PANEL CONVERSACIONAL (estado expandido) —— */
.chibot-panel {
	position: absolute;
	bottom: 0;
	right: 0;
	width: var(--chibot-w);
	max-width: calc(100vw - var(--sp-5));
	height: var(--chibot-h);
	max-height: calc(100vh - var(--float-offset) * 2 - 80px);
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg,
	            var(--oxford-blue-deep) 0%,
	            #08203F 100%);
	border: 1px solid rgba(184, 137, 60, 0.30);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	transform-origin: bottom right;
	transform: translateY(8px) scale(0.96);
	opacity: 0;
	transition: transform var(--dur-base) var(--ease-out),
	            opacity var(--dur-base) var(--ease-out);
}

/* JS aplica la clase .is-open + remueve [hidden] para abrir el panel */
.chibot-panel.is-open {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Cuando [hidden] está presente, el browser oculta vía display:none.
   La animación corre cuando JS lo remueve y añade .is-open. */


/* —— Header del panel —— */
.chibot-header {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: linear-gradient(90deg, var(--oxford-blue), var(--oxford-blue-soft));
	border-bottom: 1px solid rgba(184, 137, 60, 0.25);
}

.chibot-header img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--gold);
	background: var(--oxford-blue-deep);
}
.chibot-header img[src=""],
.chibot-header img:not([src]) {
	background: var(--oxford-blue) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ctext x='50%25' y='58%25' text-anchor='middle' fill='%23B8893C' font-family='Georgia' font-size='18' font-weight='700'%3ECh%3C/text%3E%3C/svg%3E") center / cover no-repeat;
}

.chibot-identity {
	flex: 1;
	min-width: 0;
}
.chibot-identity h4 {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--ivory-soft);
	font-family: var(--font-serif);
}
.chibot-status {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	color: var(--gold-soft);
	letter-spacing: 0.04em;
}
.chibot-status::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 6px var(--success);
}

.chibot-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--ivory-soft);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}
.chibot-close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--gold);
	transform: rotate(90deg);
}


/* —— Zona de mensajes (scroll vertical) —— */
.chibot-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	scrollbar-width: thin;
	scrollbar-color: var(--steel) transparent;
}
.chibot-messages::-webkit-scrollbar { width: 6px; }
.chibot-messages::-webkit-scrollbar-thumb {
	background: var(--steel);
	border-radius: var(--radius-pill);
	border: 0;
}

/* Burbujas de chat (las inyecta chibot.js usando estas clases) */
.chibot-msg {
	max-width: 85%;
	padding: 0.65rem 0.9rem;
	font-size: var(--fs-sm);
	line-height: 1.45;
	border-radius: 14px;
	word-wrap: break-word;
	animation: chibot-msg-in 0.28s var(--ease-out) both;
}
@keyframes chibot-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.chibot-msg--bot {
	align-self: flex-start;
	background: var(--bubble-bot);
	color: var(--ivory-soft);
	border: 1px solid rgba(245, 241, 232, 0.10);
	border-bottom-left-radius: 4px;
}

.chibot-msg--user {
	align-self: flex-end;
	background: var(--bubble-user);
	color: var(--bubble-user-fg);
	font-weight: 500;
	border-bottom-right-radius: 4px;
}

/* Indicador "escribiendo..." (3 puntos animados) */
.chibot-msg--typing {
	display: inline-flex;
	gap: 4px;
	padding: 0.85rem 0.9rem;
	background: var(--bubble-bot);
	border: 1px solid rgba(245, 241, 232, 0.10);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	align-self: flex-start;
}
.chibot-msg--typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-soft);
	animation: chibot-typing 1.2s infinite ease-in-out;
}
.chibot-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.chibot-msg--typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes chibot-typing {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
	30%           { transform: translateY(-4px); opacity: 1;   }
}


/* —— Chips de intención rápida (filtro inicial del lead) —— */
.chibot-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0 var(--sp-4) var(--sp-3);
	border-top: 1px solid rgba(245, 241, 232, 0.06);
	padding-top: var(--sp-3);
}

.chibot-chip {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 0.4rem 0.85rem;
	color: var(--ivory-soft);
	background: rgba(184, 137, 60, 0.08);
	border: 1px solid rgba(184, 137, 60, 0.30);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
	white-space: nowrap;
}
.chibot-chip:hover {
	background: var(--gold);
	color: var(--oxford-blue-deep);
	border-color: var(--gold);
	transform: translateY(-1px);
}


/* —— Composer (input + botón enviar) —— */
.chibot-form {
	display: flex;
	align-items: stretch;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	background: rgba(0, 0, 0, 0.22);
	border-top: 1px solid rgba(184, 137, 60, 0.18);
}

.chibot-form input[type="text"] {
	flex: 1;
	padding: 0.6rem 0.9rem;
	font-size: var(--fs-sm);
	color: var(--ivory-soft);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(245, 241, 232, 0.15);
	border-radius: var(--radius-pill);
	transition: border-color var(--dur-fast) var(--ease),
	            background-color var(--dur-fast) var(--ease);
	min-width: 0;   /* evita overflow en flex */
}
.chibot-form input[type="text"]:focus {
	outline: none;
	border-color: var(--gold);
	background: rgba(184, 137, 60, 0.06);
	box-shadow: 0 0 0 2px var(--gold-glow);
}
.chibot-form input[type="text"]::placeholder { color: var(--steel-light); }

.chibot-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	padding: 0;
	background: var(--gold);
	border: 0;
	border-radius: 50%;
	color: var(--oxford-blue-deep);
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}
.chibot-send:hover {
	background: var(--gold-soft);
	transform: rotate(-15deg);
}
.chibot-send:active { transform: scale(0.92); }


/* —— Footer disclaimer del Chibot —— */
.chibot-footer {
	padding: 0.6rem var(--sp-4);
	font-size: 0.65rem;
	letter-spacing: 0.02em;
	color: var(--steel-light);
	background: rgba(0, 0, 0, 0.28);
	border-top: 1px solid rgba(184, 137, 60, 0.10);
	text-align: center;
	line-height: 1.3;
}


/* —— Mobile: panel toma casi toda la pantalla —— */
@media (max-width: 480px) {
	#chibot-container {
		bottom: calc(1rem + 62px);   /* sobre el WhatsApp móvil (50px + offset) */
		right: 1rem;
	}
	.chibot-trigger { width: 56px; height: 56px; }
	.chibot-trigger img { width: 38px; height: 38px; }
	.chibot-trigger .chibot-badge { font-size: 0.65rem; bottom: -1.4rem; }

	.chibot-panel {
		width: calc(100vw - 2rem);
		max-width: calc(100vw - 2rem);
		height: calc(100vh - 4.5rem);
		height: calc(100dvh - 4.5rem);
		max-height: calc(100vh - 4.5rem);
		max-height: calc(100dvh - 4.5rem);
		bottom: -3rem; /* sube hasta cerca del top */
		right: 0;
	}
}


/* ============================================================================
 * 10. ACCESIBILIDAD — refuerzos para componentes nuevos
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.wa-float .wa-link::after,
	.chibot-trigger .chibot-pulse {
		animation: none !important;
	}
	.chibot-msg--typing span {
		animation: none !important;
		opacity: 0.6;
	}
	.specialty-card:hover,
	.capital-item:hover,
	ul.pillars li:hover { transform: none !important; }
}

/* Foco accesible explícito en los botones flotantes */
.chibot-trigger:focus-visible,
.chibot-close:focus-visible,
.chibot-send:focus-visible,
.chibot-chip:focus-visible,
.lang-btn:focus-visible,
.wa-link:focus-visible,
.wa-close:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}


/* ============================================================================
 * 11. PRINT — los componentes flotantes y el chat NO deben imprimirse
 *    (main.css ya oculta #lang-switcher, #whatsapp-float y #chibot-container)
 *    Aquí refuerzo además los componentes informativos
 * ========================================================================== */
@media print {
	.specialty-card,
	.capital-item,
	ul.pillars li {
		break-inside: avoid;
		background: white !important;
		border: 1px solid #ccc !important;
		color: black !important;
		box-shadow: none !important;
	}
	.specialty-card *, .capital-item *, ul.pillars li * { color: black !important; }
	.cross-quote, .doctora-quote {
		background: #f7f7f7 !important;
		color: #333 !important;
		border-left-color: #999 !important;
	}
	.form-feedback { display: none !important; }
}


/* ============================================================================
 *  FIN — custom.css   ·   © 2026 Rincón & Partners: Legal & Capital
 *  Próximo paso (Fase 2.c): css/noscript.css — fallback sin JavaScript.
 *  Luego (Fase 3): los tres módulos JS (i18n.js, chibot.js, rincon-ux.js).
 * ========================================================================== */


/* ============================================================================
 * 12. PATCH QA  ·  POSICIONAMIENTO BOTONES FLOTANTES (WhatsApp + Chibot)
 * ----------------------------------------------------------------------------
 * Reemplaza el cálculo mágico `bottom: calc(var(--float-offset) + 70px)` por
 * tokens semánticos. Si mañana el botón cambia de tamaño, solo se ajusta el
 * token y todo el stack se reorganiza automáticamente. Cero números mágicos.
 * Incluye además: ocultamiento del WhatsApp cuando se abre el Chibot (UX).
 * ========================================================================== */

:root {
	--float-gap-desktop:    1.5rem;
	--float-gap-mobile:     1rem;
	--wa-size-desktop:      56px;
	--wa-size-mobile:       50px;
	--chibot-size-desktop:  64px;
	--chibot-size-mobile:   56px;
	--float-stack-gap:      24px;   /* separación visual entre botones */
}

/* ── WhatsApp (capa inferior) ─────────────────────────────────────────── */
.wa-float {
	position: fixed;
	right: var(--float-gap-desktop);
	bottom: var(--float-gap-desktop);
	z-index: var(--z-floating);
	transition: opacity var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}
.wa-float .wa-link {
	width:  var(--wa-size-desktop);
	height: var(--wa-size-desktop);
}

/* ── Chibot (apilado encima del WhatsApp) ─────────────────────────────── */
#chibot-container {
	position: fixed;
	right: var(--float-gap-desktop);
	bottom: calc(
		var(--float-gap-desktop)
		+ var(--wa-size-desktop)
		+ var(--float-stack-gap)
	);
	z-index: var(--z-chibot);
}
.chibot-trigger {
	width:  var(--chibot-size-desktop);
	height: var(--chibot-size-desktop);
}

/* ── Mobile (≤480px): proporciones compactas, mismo cálculo ─────────── */
@media (max-width: 480px) {
	.wa-float {
		right: var(--float-gap-mobile);
		bottom: var(--float-gap-mobile);
	}
	.wa-float .wa-link {
		width:  var(--wa-size-mobile);
		height: var(--wa-size-mobile);
	}
	#chibot-container {
		right: var(--float-gap-mobile);
		bottom: calc(
			var(--float-gap-mobile)
			+ var(--wa-size-mobile)
			+ var(--float-stack-gap)
		);
	}
	.chibot-trigger {
		width:  var(--chibot-size-mobile);
		height: var(--chibot-size-mobile);
	}
}

/* ── UX: cuando Chibot está abierto, ocultar WhatsApp ───────────────────
   Evita ruido visual cuando el cliente ya está conversando con el agente. */
body:has(#chibot-container.is-open) .wa-float {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

/* ── Print: nunca imprimir botones flotantes ──────────────────────────── */
@media print {
	.wa-float, #chibot-container { display: none !important; }
}