/* «Te lo explico en vídeo» (assets/js/video.js): al final del informe de las herramientas (dentro de la caja oscura de
   «¿Te ayudo a mejorar tu web?») y del boceto de «¿Cómo sería tu web?» (sobre fondo claro). Se carga donde están esos
   bloques (filtro xp_grupos_css). */

.xp-video { margin: 1.25rem 0; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--xp-linea); border-radius: var(--xp-radio); background: var(--xp-blanco); color: var(--xp-texto); }
.xp-video p { margin: 0; }
.xp-video .xp-video__titulo { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; font-family: var(--xp-f-texto); font-size: 1.125rem; font-weight: 600; color: var(--xp-ciruela); }
.xp-video__icono { flex: none; width: 1.5rem; height: 1.5rem; fill: var(--xp-rosa-boton); }
.xp-video__texto { font-size: .9375rem; line-height: 1.5; }
.xp-video .xp-video__quedan { display: inline-block; margin-top: .6rem; padding: .2rem .65rem; border-radius: 999px; background: var(--xp-rosa-suave); font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-rosa-tinta); }
.xp-video .xp-video__quedan.is-lleno { background: var(--xp-lila); color: var(--xp-gris); }
.xp-video__quedan[hidden], .xp-video__form[hidden], .xp-video__hecho[hidden], .xp-video__abrir[hidden] { display: none; }
.xp-video__abrir, .xp-video__form button {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: .85rem; padding: .6rem 1.25rem;
	border: 1.5px solid var(--xp-rosa-boton); border-radius: 999px; background: var(--xp-rosa-boton); color: var(--xp-blanco);
	font: 600 .9375rem/1.2 var(--xp-f-ui); cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.xp-video__abrir:hover, .xp-video__abrir:focus-visible, .xp-video__form button:hover, .xp-video__form button:focus-visible { border-color: var(--xp-ciruela); background: var(--xp-ciruela); }
.xp-video__form button:disabled { opacity: .7; cursor: progress; }
.xp-video__form { display: grid; gap: .4rem; margin-top: .9rem; }
.xp-video__form label { font-family: var(--xp-f-ui); font-size: .875rem; font-weight: 600; color: var(--xp-ciruela); }
.xp-video__form label span { font-weight: 400; color: var(--xp-gris); }
.xp-video__form textarea { width: 100%; min-height: 5.5rem; padding: .65rem .8rem; border: 1.5px solid #CDBFD4; border-radius: 12px; background: var(--xp-blanco); color: var(--xp-ciruela-oscuro); font: .9375rem/1.45 var(--xp-f-texto); resize: vertical; }
.xp-video__form textarea:focus { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; border-color: var(--xp-ciruela); }
.xp-video__form button { justify-self: start; margin-top: .35rem; }
.xp-video__error { color: var(--xp-rosa-tinta); font-size: .875rem; }
.xp-video__error:empty { display: none; }
.xp-video .xp-video__hecho { margin-top: .75rem; padding: .7rem .9rem; border-radius: 12px; background: #E2F3EA; color: #145C38; font-size: .9375rem; line-height: 1.5; }

/* Dentro de la caja oscura */
.xp-oscuro .xp-video { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: #E9E1EE; }
.xp-oscuro .xp-video .xp-video__titulo { color: var(--xp-blanco); }
.xp-oscuro .xp-video__icono { fill: var(--xp-rosa-claro); }
.xp-oscuro .xp-video .xp-video__quedan { background: rgba(243, 40, 92, .18); color: #FFD3DF; }
.xp-oscuro .xp-video .xp-video__quedan.is-lleno { background: rgba(255, 255, 255, .1); color: #C8B9D0; }
.xp-oscuro .xp-video__abrir:hover, .xp-oscuro .xp-video__abrir:focus-visible, .xp-oscuro .xp-video__form button:hover, .xp-oscuro .xp-video__form button:focus-visible { border-color: var(--xp-blanco); background: var(--xp-blanco); color: var(--xp-ciruela); }
.xp-oscuro .xp-video__form label { color: var(--xp-blanco); }
.xp-oscuro .xp-video__form label span { color: #C8B9D0; }
.xp-oscuro .xp-video__error { color: #FFB3C6; }
.xp-oscuro .xp-video .xp-video__hecho { background: rgba(46, 160, 100, .2); color: #D4F5E2; }