/* Presentación dinámica de CUSTOWINE · v1.0 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Inter:wght@400;500&display=swap");

.custo-presentacion {
	--cp-ancho: 50vw;
	--cp-alto: 50vh;
	--cp-magenta: #B8185A;
	--cp-magenta-claro: #E0528D;
	--cp-burdeos: #7A1033;
	--cp-negro: #111111;
	position: relative;
	width: var(--cp-ancho);
	height: var(--cp-alto);
	min-width: 340px;
	min-height: 400px;
	max-width: 100%;
	margin: 24px auto;
	overflow: hidden;
	border-radius: 22px;
	background: var(--cp-negro);
	color: #fff;
	text-align: left;
	line-height: 1.4;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	container-type: size;
	isolation: isolate;
	box-sizing: border-box;
	outline: none;
}
.custo-presentacion *, .custo-presentacion *::before, .custo-presentacion *::after { box-sizing: border-box; }
.custo-presentacion:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cp-magenta); }
.custo-presentacion.cp-fijo { position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); z-index: 2147483000; }

/* Fondo: brillo burdeos que se desplaza despacio */
.cp-fondo { position: absolute; inset: -20%; z-index: -1; background:
	radial-gradient(40% 50% at 28% 55%, rgba(184, 24, 90, .38), transparent 70%),
	radial-gradient(35% 45% at 80% 20%, rgba(122, 16, 51, .45), transparent 70%),
	var(--cp-negro);
	animation: cp-deriva 18s ease-in-out infinite alternate; }

/* Cabecera: logo y barras de progreso */
.cp-cabeza { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 4cqw; padding: 4.5cqh 4cqw 0; }
.cp-logo { height: clamp(18px, 6cqh, 32px); width: auto; flex: none; display: block; }
.cp-barras { flex: 1; display: flex; gap: 6px; }
.cp-barra { flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.cp-barra span { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.cp-barra span::after { content: ""; position: absolute; inset: 0; background: var(--cp-magenta-claro); transform: scaleX(0); transform-origin: left; border-radius: 4px; }
.cp-barra.cp-hecha span::after { transform: scaleX(1); }
.cp-barra.cp-llenando span::after { animation: cp-llenar var(--cp-ms, 6000ms) linear forwards; }
.custo-presentacion.cp-parada .cp-barra.cp-llenando span::after { animation-play-state: paused; }
.cp-barra:focus-visible span { outline: 2px solid #fff; outline-offset: 2px; }

/* Diapositivas */
.cp-pista { position: absolute; inset: 0; }
.cp-diapo { position: absolute; inset: 0; display: flex; align-items: center; gap: 5cqw; padding: 16cqh 6cqw 9cqh; opacity: 0; visibility: hidden; pointer-events: none; }
.cp-diapo.cp-activa { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease; }
.cp-diapo.cp-sale { visibility: visible; animation: cp-salir .55s ease forwards; }
.cp-diapo.cp-sale.cp-atras { animation-name: cp-salir-atras; }

.cp-imagen { flex: none; width: min(40cqw, 72cqh); aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.cp-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-activa .cp-imagen { animation: cp-entra-imagen .8s cubic-bezier(.2, .8, .2, 1) both; }
.cp-activa .cp-imagen img { animation: cp-respira 7s ease-in-out .8s infinite alternate; }

.cp-texto { flex: 1; min-width: 0; }
.cp-ante { margin: 0 0 1.6cqh; font: 700 clamp(10px, 1.7cqw, 14px)/1.2 Poppins, Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-magenta-claro); }
.cp-titulo { margin: 0 0 2.4cqh; font: 700 clamp(20px, 4.6cqw, 46px)/1.12 Poppins, Inter, sans-serif; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.cp-parrafo { margin: 0; font-size: clamp(13px, 2.1cqw, 19px); line-height: 1.5; color: #E9DDE0; max-width: 34em; text-wrap: pretty; }
.cp-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3cqh; }
.cp-etiquetas span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: clamp(11px, 1.7cqw, 15px); font-weight: 500; }
.cp-boton { display: inline-block; margin-top: 3.5cqh; padding: 12px 22px; border-radius: 999px; background: var(--cp-magenta); color: #fff !important; text-decoration: none !important; font: 700 clamp(13px, 1.8cqw, 16px)/1 Poppins, Inter, sans-serif; transition: background .2s ease, transform .2s ease; }
.cp-boton:hover { background: var(--cp-burdeos); transform: translateY(-2px); }
.cp-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Entrada escalonada del texto */
.cp-activa .cp-texto > * { animation: cp-entra-texto .65s cubic-bezier(.2, .8, .2, 1) both; }
.cp-activa .cp-texto > :nth-child(1) { animation-delay: .12s; }
.cp-activa .cp-texto > :nth-child(2) { animation-delay: .22s; }
.cp-activa .cp-texto > :nth-child(3) { animation-delay: .34s; }
.cp-activa .cp-texto > :nth-child(4) { animation-delay: .46s; }
.cp-activa .cp-texto > :nth-child(5) { animation-delay: .56s; }
.cp-activa .cp-etiquetas span { animation: cp-entra-texto .5s ease both; }
.cp-activa .cp-etiquetas span:nth-child(2) { animation-delay: .55s; }
.cp-activa .cp-etiquetas span:nth-child(3) { animation-delay: .65s; }
.cp-activa .cp-etiquetas span:nth-child(4) { animation-delay: .75s; }
.cp-activa.cp-atras .cp-texto > *, .cp-activa.cp-atras .cp-imagen { animation-name: cp-entra-atras; }

/* Flechas y pausa: aparecen al pasar el ratón o con el teclado */
.cp-flecha, .cp-pausa { position: absolute; z-index: 4; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease, background .2s ease; }
.cp-flecha { top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; font-size: 26px; line-height: 38px; padding: 0; }
.cp-ant { left: 10px; }
.cp-sig { right: 10px; }
.cp-pausa { right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; }
.cp-pausa::before, .cp-pausa::after { content: ""; position: absolute; top: 11px; width: 4px; height: 12px; background: #fff; border-radius: 1px; }
.cp-pausa::before { left: 12px; }
.cp-pausa::after { right: 12px; }
.cp-pausada .cp-pausa::before { left: 13px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.cp-pausada .cp-pausa::after { display: none; }
.custo-presentacion:hover .cp-flecha, .custo-presentacion:hover .cp-pausa,
.custo-presentacion:focus-within .cp-flecha, .custo-presentacion:focus-within .cp-pausa,
.cp-pausada .cp-pausa { opacity: 1; }
.cp-flecha:hover, .cp-pausa:hover { background: rgba(255, 255, 255, .24); }
.cp-flecha:focus-visible, .cp-pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
@media (hover: none) { .cp-flecha { display: none; } .cp-pausa { opacity: .8; } }

.cp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Caja estrecha (móvil o columna lateral): imagen arriba y texto debajo */
@container (max-aspect-ratio: 1/1) {
	.cp-diapo { flex-direction: column; justify-content: center; text-align: center; gap: 3.5cqh; padding: 13cqh 7cqw 7cqh; }
	.cp-imagen { width: min(56cqw, 38cqh); }
	.cp-texto { flex: 0 0 auto; width: 100%; }
	.cp-ante { margin-bottom: 1.2cqh; font-size: clamp(10px, 3cqw, 13px); }
	.cp-titulo { font-size: clamp(20px, 7cqw, 34px); margin-bottom: 1.6cqh; }
	.cp-parrafo { font-size: clamp(14px, 4cqw, 18px); margin: 0 auto; }
	.cp-etiquetas { justify-content: center; margin-top: 2cqh; }
	.cp-boton { margin-top: 2.4cqh; }
}
@media (max-width: 700px) {
	.custo-presentacion { width: 100%; height: min(72vh, 580px); min-width: 0; min-height: 480px; border-radius: 16px; }
	.custo-presentacion.cp-fijo { width: calc(100% - 24px); }
}


/* Blindaje frente a los estilos del tema de la web */
.custo-presentacion h2.cp-titulo, .custo-presentacion p.cp-ante, .custo-presentacion p.cp-parrafo { text-transform: none !important; font-style: normal !important; text-shadow: none !important; background: none !important; border: 0 !important; padding: 0 !important; }
.custo-presentacion h2.cp-titulo { font-family: Poppins, Inter, -apple-system, "Segoe UI", sans-serif !important; font-weight: 700 !important; font-size: clamp(20px, 4.6cqw, 46px) !important; line-height: 1.12 !important; letter-spacing: -.01em !important; color: #fff !important; margin: 0 0 2.4cqh !important; }
.custo-presentacion p.cp-ante { text-transform: uppercase !important; font-family: Poppins, Inter, sans-serif !important; font-weight: 700 !important; font-size: clamp(10px, 1.7cqw, 14px) !important; letter-spacing: .16em !important; line-height: 1.2 !important; color: #E0528D !important; margin: 0 0 1.6cqh !important; }
.custo-presentacion p.cp-parrafo { font-family: Inter, -apple-system, "Segoe UI", sans-serif !important; font-size: clamp(13px, 2.1cqw, 19px) !important; line-height: 1.5 !important; color: #E9DDE0 !important; margin: 0 !important; }
.custo-presentacion img { max-width: none; height: auto; border: 0 !important; box-shadow: none; }
.custo-presentacion .cp-imagen img { width: 100% !important; height: 100% !important; }
.custo-presentacion .cp-logo { height: clamp(18px, 6cqh, 32px) !important; width: auto !important; }
.custo-presentacion button { min-width: 0 !important; min-height: 0 !important; box-shadow: none; text-transform: none; letter-spacing: normal; line-height: normal; }
@container (max-aspect-ratio: 1/1) {
	.custo-presentacion h2.cp-titulo { font-size: clamp(20px, 7cqw, 34px) !important; margin-bottom: 1.6cqh !important; }
	.custo-presentacion p.cp-ante { font-size: clamp(10px, 3cqw, 13px) !important; margin-bottom: 1.2cqh !important; }
	.custo-presentacion p.cp-parrafo { font-size: clamp(14px, 4cqw, 18px) !important; margin: 0 auto !important; }
}

/* Escenas apaisadas (16:9): imagen más ancha y sin recortar */
.custo-presentacion .cp-imagen.cp-ancha { width: min(46cqw, 52cqh * 16 / 9); aspect-ratio: 16 / 9; }
@container (max-aspect-ratio: 1/1) {
	.custo-presentacion .cp-imagen.cp-ancha { width: min(84cqw, 36cqh * 16 / 9); }
}

@keyframes cp-llenar { to { transform: scaleX(1); } }
@keyframes cp-deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
@keyframes cp-entra-imagen { from { opacity: 0; transform: translateX(-6%) scale(.92) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes cp-respira { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1.5%); } }
@keyframes cp-entra-texto { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cp-entra-atras { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes cp-salir { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-4%); } }
@keyframes cp-salir-atras { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(4%); } }

@media (prefers-reduced-motion: reduce) {
	.cp-fondo, .cp-activa .cp-imagen, .cp-activa .cp-imagen img, .cp-activa .cp-texto > *, .cp-activa .cp-etiquetas span, .cp-diapo.cp-sale { animation: none !important; }
	.cp-diapo.cp-sale { opacity: 0; }
}

/* Cartel fijo con el QR a la izquierda de la presentación.
   La presentación se queda en su sitio (centrada en la página y con su tamaño) y el QR ocupa el hueco de la izquierda,
   con la misma altura. Si no hay hueco suficiente, el QR pasa debajo. */
html, body { overflow-x: clip; }
.cp-conjunto { --cp-ancho: 50vw; --cp-alto: 50vh; position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: none !important; margin: 24px 0 !important;
	display: grid; grid-template-columns: 1fr minmax(0, var(--cp-ancho)) 1fr; column-gap: 28px; align-items: stretch; }
.cp-conjunto > .custo-presentacion { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
.cp-qr { grid-column: 1; grid-row: 1; justify-self: end; display: block; height: 100%; max-height: max(var(--cp-alto), 400px); aspect-ratio: 640 / 903; max-width: 100%;
	border-radius: 22px; overflow: hidden; background: #F6F0E7; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); transition: transform .2s ease; }
.cp-qr:hover { transform: translateY(-2px); }
.cp-qr img { width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; display: block; border: 0 !important; box-shadow: none; }
@media (max-width: 1100px) {
	.cp-conjunto { left: auto; transform: none; width: auto; max-width: 100% !important; display: flex; flex-direction: column; align-items: center; gap: 18px; }
	.cp-conjunto > .custo-presentacion { width: var(--cp-ancho); }
	.cp-qr { height: auto; max-height: none; width: min(78vw, 320px); }
}
@media (max-width: 700px) { .cp-conjunto > .custo-presentacion { width: 100%; } }