/* ==========================================================================
   ClickPack Theme — estilos del tema
   Sistema de diseño: Click Pack Courier (Poppins, azul de acción, formas rectas).
   ========================================================================== */

:root {
	--cpf-azul-click: #2a8dcb;   /* Identidad: íconos, bloques, números grandes. */
	--cpf-azul: #257bb2;         /* Acción: botones y enlaces con texto (4.61:1 con blanco). */
	--cpf-cielo: #04a6e1;        /* Footer. */
	--cpf-sobre-cielo: #1d2228;  /* Texto sobre --cpf-cielo. */
	--cpf-gris-marca: #7e7e7e;
	--cpf-navy: #283446;         /* Hover y foco. */
	--cpf-titulo: #333333;
	--cpf-cuerpo: #6f6f6f;
	--cpf-input: #495057;
	--cpf-superficie: #ffffff;
	--cpf-gris: #f5f5f5;
	--cpf-borde: #e2e2e2;
	--cpf-peligro: #dc3545;
	--cpf-carton: #e8bd86;
	--cpf-fuente: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cpf-max: 1140px;
	--cpf-gutter: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.cpf-tema { margin: 0; background: var(--cpf-superficie); color: var(--cpf-cuerpo); font-family: var(--cpf-fuente); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.cpf-tema img { max-width: 100%; height: auto; }
.cpf-tema a { color: var(--cpf-azul); }
.cpf-tema a:hover { color: var(--cpf-navy); }
.cpf-tema :focus-visible { outline: 2px solid var(--cpf-navy); outline-offset: 2px; }
.cpf-sec--azul :focus-visible, .cpf-footer :focus-visible { outline-color: #ffffff; }
.cpf-tema h1, .cpf-tema h2, .cpf-tema h3 { color: var(--cpf-titulo); font-family: var(--cpf-fuente); }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.cpf-saltar:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: #fff; }
[hidden] { display: none !important; }

.cpf-wrap { max-width: var(--cpf-max); margin: 0 auto; padding-left: var(--cpf-gutter); padding-right: var(--cpf-gutter); }
.cpf-contenido { padding-top: 64px; padding-bottom: 64px; }
.cpf-centro, .cpf-centro .elementor-heading-title { text-align: center; }

/* ---------- Tipografía ---------- */
.cpf-h-hero, .cpf-h-hero .elementor-heading-title { font-size: 48px; line-height: 58px; font-weight: 700; text-transform: uppercase; margin: 0; }
.cpf-h-sec, .cpf-h-sec .elementor-heading-title { font-size: 32px; line-height: 42px; font-weight: 600; text-transform: uppercase; margin: 0; color: var(--cpf-titulo); }
.cpf-sub, .cpf-sub p { font-size: 22px; line-height: 32px; font-weight: 600; }
.cpf-pie-marca, .cpf-pie-marca p { font-size: 20px; line-height: 30px; font-weight: 600; }

/* ---------- Secciones (bloques y contenedores de Elementor) ---------- */
.cpf-sec { padding-top: 100px; padding-bottom: 100px; }
.e-con.cpf-sec { --padding-top: 100px; --padding-bottom: 100px; --padding-left: var(--cpf-gutter); --padding-right: var(--cpf-gutter); }
.cpf-sec--gris { background: var(--cpf-gris); }
.cpf-sec--azul { background: var(--cpf-azul); color: #ffffff; }
.cpf-sec--azul h1, .cpf-sec--azul h2, .cpf-sec--azul h3, .cpf-sec--azul p,
.elementor .cpf-sec--azul .elementor-heading-title,
.elementor .cpf-sec--azul .elementor-widget-text-editor { color: #ffffff; }
.cpf-hero { padding-top: 72px; padding-bottom: 80px; overflow: hidden; }
.e-con.cpf-hero { --padding-top: 72px; --padding-bottom: 80px; }
.wp-block-group.cpf-sec { padding-left: var(--cpf-gutter); padding-right: var(--cpf-gutter); }
.wp-block-group.cpf-sec > * + * { margin-top: 20px; }
.cpf-main { overflow-x: clip; }
.cpf-tema [id] { scroll-margin-top: 110px; }

/* Contenedores de Elementor de las plantillas del tema */
.e-con.cpf-fila { --flex-wrap: wrap; --gap: 48px; --row-gap: 48px; --column-gap: 48px; }
.e-con.cpf-fila > .e-con-inner > .e-con.cpf-col, .e-con.cpf-fila > .e-con.cpf-col { flex: 1 1 400px; --width: auto; min-width: 0; }
.e-con.cpf-col { --gap: 22px; --row-gap: 22px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.e-con.cpf-botones { --flex-wrap: wrap; --gap: 12px; --row-gap: 12px; --column-gap: 12px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --justify-content: flex-start; }
.e-con.cpf-sec { --gap: 20px; --row-gap: 20px; }
.e-con.cpf-sec.cpf-centro { --align-items: center; }
.cpf-centro .elementor-widget-text-editor, .cpf-centro p { text-align: center; }
.cpf-tema .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.cpf-lista-check { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cpf-lista-check li { position: relative; padding-left: 34px; font-size: 15px; line-height: 24px; }
.cpf-lista-check li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 2px solid var(--cpf-azul-click); border-radius: 50%; }
.cpf-lista-check li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid var(--cpf-azul-click); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cpf-insignia-hero p, p.cpf-insignia-hero { display: inline-flex; flex-direction: column; margin: 0; padding: 14px 20px; background: var(--cpf-navy); color: #fff !important; font-size: 14px; line-height: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.cpf-insignia-hero strong { display: block; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: 0; }

/* ---------- Botones ---------- */
.cpf-btn,
.elementor .cpf-el-btn .elementor-button,
.elementor .cpf-el-btn-blanco .elementor-button,
.elementor .cpf-el-btn-contorno .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 55px; padding: 0 30px;
	background: var(--cpf-azul); color: #ffffff; border: 1px solid var(--cpf-azul); border-radius: 0;
	font-family: var(--cpf-fuente); font-size: 16px; line-height: 24px; font-weight: 600; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cpf-tema a.cpf-btn { color: #ffffff; }
.cpf-btn:hover, .cpf-tema a.cpf-btn:hover,
.elementor .cpf-el-btn .elementor-button:hover,
.elementor .cpf-el-btn-blanco .elementor-button:hover,
.elementor .cpf-el-btn-contorno .elementor-button:hover { background: var(--cpf-navy); border-color: var(--cpf-navy); color: #ffffff; }
.cpf-btn:active { transform: translateY(1px); }
.cpf-btn--chico { min-height: 48px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.cpf-btn--bloque { width: 100%; }
.cpf-btn--borde, .cpf-tema a.cpf-btn--borde { background: #ffffff; color: var(--cpf-azul); }
.elementor .cpf-el-btn-blanco .elementor-button { background: #ffffff; color: var(--cpf-azul); border: 2px solid #ffffff; border-radius: 30px; min-height: 60px; }
.elementor .cpf-el-btn-contorno .elementor-button { background: transparent; color: #ffffff; border: 2px solid #ffffff; border-radius: 30px; min-height: 60px; }
.cpf-enlace { background: none; border: 0; padding: 8px; cursor: pointer; font-family: var(--cpf-fuente); font-size: 15px; font-weight: 600; color: var(--cpf-azul); text-decoration: underline; }
.cpf-btn[disabled] { opacity: .6; cursor: wait; }

/* Botones del editor de bloques (landing sin Elementor) */
.cpf-sec .wp-block-buttons { gap: 12px; }
.cpf-centro .wp-block-buttons { justify-content: center; }
.wp-block-button.cpf-btn-blanco .wp-block-button__link, .wp-block-button.cpf-btn-contorno .wp-block-button__link { display: inline-flex; align-items: center; min-height: 60px; padding: 0 32px; border-radius: 30px; font-family: var(--cpf-fuente); font-size: 16px; font-weight: 600; text-transform: uppercase; text-decoration: none; border: 2px solid #fff; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wp-block-button.cpf-btn-blanco .wp-block-button__link { background: #fff; color: var(--cpf-azul); }
.wp-block-button.cpf-btn-contorno .wp-block-button__link { background: transparent; color: #fff; }
.wp-block-button.cpf-btn-blanco .wp-block-button__link:hover, .wp-block-button.cpf-btn-contorno .wp-block-button__link:hover { background: var(--cpf-navy); border-color: var(--cpf-navy); color: #fff; }

/* ---------- Cabecera ---------- */
.cpf-header { position: sticky; top: 0; z-index: 40; background: #ffffff; border-bottom: 1px solid var(--cpf-borde); }
.admin-bar .cpf-header { top: 32px; }
.cpf-header__fila { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cpf-header__logo { display: flex; align-items: center; }
.cpf-header__logo img { width: 160px; height: 52px; object-fit: contain; }
.cpf-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; font-size: 16px; line-height: 24px; font-weight: 500; }
.cpf-tema .cpf-menu a { color: var(--cpf-cuerpo); text-decoration: none; white-space: nowrap; }
.cpf-tema .cpf-menu a:hover { color: var(--cpf-azul); }
.cpf-header__acciones { display: flex; align-items: center; gap: 8px; }
.cpf-hamburguesa { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--cpf-borde); border-radius: 4px; color: var(--cpf-titulo); cursor: pointer; }
.cpf-hamburguesa__cerrar { display: none; }
.cpf-header.is-abierto .cpf-hamburguesa__abrir { display: none; }
.cpf-header.is-abierto .cpf-hamburguesa__cerrar { display: inline-flex; }

@media (max-width: 1180px) {
	.cpf-header__fila { height: 72px; }
	.cpf-hamburguesa { display: inline-flex; }
	.cpf-header__cta-texto { display: none; }
	.cpf-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--cpf-borde); box-shadow: 0 0 15px rgba(0,0,0,.05); }
	.cpf-header.is-abierto .cpf-nav { display: block; }
	.cpf-menu { flex-direction: column; gap: 0; padding: 8px var(--cpf-gutter) 16px; }
	.cpf-menu li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--cpf-borde); }
	.cpf-menu li:last-child a { border-bottom: 0; }
}
@media (max-width: 782px) { .admin-bar .cpf-header { top: 46px; } }

/* ---------- Caja animada (portada) ---------- */
.cpf-caja { display: flex; justify-content: center; }
.cpf-caja__svg { width: 100%; max-width: 480px; height: auto; overflow: visible; }

/* ---------- Pasos ---------- */
.cpf-pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 30px; }
.cpf-paso { border: 1px solid var(--cpf-borde); background: #fff; padding: 36px 30px; display: flex; flex-direction: column; gap: 16px; transition: transform .25s ease, box-shadow .25s ease; }
.cpf-paso:hover { transform: translateY(-4px); box-shadow: 0 0 15px rgba(0,0,0,.08); }
.cpf-paso__cabeza { display: flex; align-items: center; justify-content: space-between; }
.cpf-paso__numero { font-size: 56px; line-height: 56px; font-weight: 700; color: var(--cpf-azul-click); }
.cpf-paso__icono { width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; color: var(--cpf-azul-click); }
.cpf-paso__titulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; }
.cpf-paso__texto { margin: 0; }
.cpf-pasos__cierre { margin: 40px 0 6px; text-align: center; font-size: 20px; line-height: 30px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-pasos__nota { margin: 0; text-align: center; font-size: 14px; line-height: 22px; }

/* ---------- Premio ---------- */
.cpf-premio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; }
.cpf-premio__grafico { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.cpf-premio__numero-wrap { display: flex; flex-direction: column; align-items: center; }
.cpf-premio__numero { display: inline-block; font-size: 220px; line-height: 190px; font-weight: 700; letter-spacing: -0.04em; color: var(--cpf-azul-click); }
.cpf-premio__etiqueta { display: inline-block; font-size: 32px; line-height: 42px; font-weight: 700; color: var(--cpf-titulo); text-transform: uppercase; letter-spacing: .06em; }
.cpf-premio__sello { position: absolute; top: 0; right: 8%; width: 116px; height: 116px; border-radius: 50%; background: var(--cpf-navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 4px dashed #fff; box-shadow: 0 0 0 4px var(--cpf-navy); transform: rotate(-12deg); text-transform: uppercase; }
.cpf-premio__sello span { font-size: 13px; line-height: 16px; font-weight: 600; }
.cpf-premio__sello strong { font-size: 16px; line-height: 20px; }
.cpf-premio__texto { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cpf-premio__texto .cpf-h-sec { font-weight: 700; }
.cpf-premio__texto p { margin: 0; }
.cpf-chispa { position: absolute; width: 12px; height: 12px; }
.cpf-chispa--1 { top: 18%; left: 14%; background: var(--cpf-cielo); transform: rotate(20deg); }
.cpf-chispa--2 { top: 62%; left: 8%; background: var(--cpf-carton); border-radius: 50%; animation-delay: .8s !important; }
.cpf-chispa--3 { bottom: 10%; right: 12%; background: var(--cpf-azul-click); transform: rotate(-25deg); animation-delay: 1.6s !important; }
.cpf-chispa--4 { top: 48%; right: 4%; width: 8px; height: 8px; background: var(--cpf-navy); border-radius: 50%; animation-delay: 1.1s !important; }

/* ---------- Formulario ---------- */
.cpf-form { border: 1px solid var(--cpf-borde); background: #fff; padding: 32px 28px; display: flex; flex-wrap: wrap; gap: 18px; box-shadow: 0 0 40px rgba(0,0,0,.06); }
.cpf-form > * { flex: 1 1 100%; }
.cpf-campo { display: flex; flex-direction: column; gap: 6px; }
.cpf-campo--mitad { flex: 1 1 180px; }
.cpf-campo label, .cpf-check label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-campo input { height: 50px; padding: 0 14px; border: 1px solid var(--cpf-borde); border-radius: 4px; font-family: var(--cpf-fuente); font-size: 14px; color: var(--cpf-input); background: #fff; width: 100%; }
.cpf-campo input:focus { border-color: var(--cpf-azul); outline: 2px solid var(--cpf-navy); outline-offset: 1px; }
.cpf-campo.is-error input, .cpf-check.is-error { border-color: var(--cpf-peligro); }
.cpf-ayuda { font-size: 13px; line-height: 19px; }
.cpf-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--cpf-borde); border-radius: 4px; }
.cpf-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cpf-azul); flex: none; }
.cpf-check label { font-weight: 400; font-size: 14px; line-height: 21px; color: var(--cpf-cuerpo); }
.cpf-check--suave { border-style: dashed; }
.cpf-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cpf-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--cpf-peligro); color: var(--cpf-peligro); font-size: 14px; line-height: 21px; font-weight: 500; }
.cpf-aviso--info { border-color: var(--cpf-azul); color: var(--cpf-azul); }
.cpf-aviso svg { flex: none; }
.cpf-form__nota { margin: 0; font-size: 13px; line-height: 20px; text-align: center; }
.cpf-formulario .h-captcha, .cpf-formulario .cf-turnstile { min-height: 65px; }

/* Confirmación */
.cpf-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(29,34,40,.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cpf-modal__caja { position: relative; overflow: hidden; width: 100%; max-width: 480px; background: #fff; padding: 40px 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: cpf-entra .35s ease-out; }
.cpf-modal__caja p { margin: 0; }
.cpf-modal__icono { width: 76px; height: 76px; border-radius: 50%; background: var(--cpf-azul); color: #fff; display: flex; align-items: center; justify-content: center; }
.cpf-modal__titulo { margin: 0; font-size: 26px; line-height: 34px; font-weight: 700; text-transform: uppercase; }
.cpf-codigo { width: 100%; padding: 14px; background: var(--cpf-gris); border: 1px dashed var(--cpf-gris-marca); display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 20px; }
.cpf-codigo strong { font-size: 26px; line-height: 34px; color: var(--cpf-azul); letter-spacing: .08em; }

/* ---------- Ruleta ---------- */
.cpf-ruleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px; align-items: center; }
.cpf-ruleta__rueda-wrap { display: flex; justify-content: center; }
.cpf-ruleta__rueda { position: relative; width: 380px; height: 380px; --cpf-r: 184px; }
.cpf-ruleta__puntero { position: absolute; top: -18px; left: 50%; margin-left: -22px; z-index: 3; transform-origin: 50% 0; }
.cpf-rueda { width: 100%; height: 100%; border-radius: 50%; border: 12px solid var(--cpf-navy); box-shadow: 0 0 40px rgba(0,0,0,.12); position: relative;
	background: repeating-conic-gradient(from 22.5deg, rgba(40,52,70,.18) 0deg 1deg, transparent 1deg 45deg), conic-gradient(#2a8dcb 0deg 45deg, #fff 45deg 90deg, #04a6e1 90deg 135deg, #fff 135deg 180deg, #2a8dcb 180deg 225deg, #fff 225deg 270deg, #04a6e1 270deg 315deg, #fff 315deg 360deg); }
.cpf-luz { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 1; transform: rotate(var(--cpf-giro)) translateY(calc(-1 * var(--cpf-r))); animation: cpf-luz 1.2s ease-in-out infinite; }
.cpf-rueda__centro { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 6px solid var(--cpf-navy); display: flex; align-items: center; justify-content: center; z-index: 2; animation: cpf-halo 1.8s ease-out infinite; }
.cpf-rueda__centro img { width: 62%; height: 62%; object-fit: contain; }
.cpf-ruleta__panel { background: #fff; border: 1px solid var(--cpf-borde); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.cpf-estado { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cpf-estado p { margin: 0; }
.cpf-estado__titulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; }
.cpf-estado__titulo--grande { font-size: 32px; line-height: 42px; font-weight: 700; text-transform: uppercase; }
.cpf-estado__fecha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--cpf-cuerpo); }
.cpf-estado__fecha svg { color: var(--cpf-azul-click); }
.cpf-estado__fecha strong { color: var(--cpf-titulo); font-weight: 600; }
.cpf-estado--ganador { align-items: center; text-align: center; gap: 12px; }
.cpf-estado__trofeo { width: 64px; height: 64px; border-radius: 50%; background: var(--cpf-azul); color: #fff; display: flex; align-items: center; justify-content: center; }
.cpf-estado__nombre { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--cpf-azul); }
.cpf-estado__codigo { font-size: 14px; line-height: 21px; }
.cpf-estado__premio { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-estado__gracias { font-style: italic; }
.cpf-insignia { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--cpf-azul); color: #fff; font-size: 13px; line-height: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cpf-insignia--oscura { background: var(--cpf-navy); }
.cpf-punto { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: cpf-pulso 1.2s ease-in-out infinite; }
.cpf-contador { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.cpf-contador > div { background: var(--cpf-gris); padding: 14px 6px; text-align: center; display: flex; flex-direction: column; }
.cpf-contador span { font-size: 30px; line-height: 36px; font-weight: 700; color: var(--cpf-azul); font-variant-numeric: tabular-nums; }
.cpf-contador small { font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; }
.cpf-ruleta__nota { margin: 0; padding-top: 14px; border-top: 1px solid var(--cpf-borde); font-size: 13px; line-height: 20px; }

/* ---------- Ganadores ---------- */
.cpf-ganadores { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cpf-ganadores__vacio { border: 2px dashed var(--cpf-borde); padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 640px; width: 100%; }
.cpf-ganadores__vacio p { margin: 0; }
.cpf-ganadores__vacio-titulo { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-ganadores__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--cpf-gris); color: var(--cpf-azul-click); display: flex; align-items: center; justify-content: center; }
.cpf-ganadores__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 30px; width: 100%; }
.cpf-ganador { border: 1px solid var(--cpf-borde); background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 10px; position: relative; animation: cpf-entra .4s ease-out; }
.cpf-ganador--reciente { border-color: var(--cpf-azul); }
.cpf-ganador__cinta { position: absolute; top: -1px; right: -1px; padding: 6px 12px; background: var(--cpf-azul); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; }
.cpf-ganador__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.cpf-ganador__semana { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--cpf-azul); text-transform: uppercase; }
.cpf-ganador__nombre { font-size: 22px; line-height: 30px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-ganador__codigo { font-size: 14px; line-height: 21px; }
.cpf-ganador__premio { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-ganador__premio svg { color: var(--cpf-azul-click); }

/* ---------- Preguntas frecuentes ---------- */
.cpf-faq { display: flex; flex-direction: column; gap: 10px; max-width: 880px; margin: 0 auto; width: 100%; }
.cpf-faq__item { background: #fff; border: 1px solid var(--cpf-borde); }
.cpf-faq__pregunta { margin: 0; }
.cpf-faq__pregunta button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: #fff; border: 0; cursor: pointer; text-align: left; font-family: var(--cpf-fuente); font-size: 17px; line-height: 26px; font-weight: 600; color: var(--cpf-titulo); }
.cpf-faq__pregunta svg { flex: none; color: var(--cpf-azul); transition: transform .25s ease; }
.cpf-faq__pregunta button[aria-expanded="true"] svg { transform: rotate(180deg); }
.cpf-faq__respuesta { padding: 0 22px 22px; }
.cpf-faq__respuesta p { margin: 0; }

/* ---------- Pie ---------- */
.cpf-footer { background: var(--cpf-cielo); color: var(--cpf-sobre-cielo); }
.cpf-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; padding-top: 64px; padding-bottom: 56px; }
.cpf-footer__marca img { width: 170px; height: auto; }
.cpf-footer p { color: var(--cpf-sobre-cielo); margin: 16px 0 0; }
.cpf-footer__titulo { margin: 0 0 12px; font-size: 18px; line-height: 30px; font-weight: 600; text-transform: uppercase; color: var(--cpf-sobre-cielo); }
.cpf-footer__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 24px; }
.cpf-tema .cpf-footer a { color: var(--cpf-sobre-cielo); }
.cpf-redes { display: flex; gap: 10px; }
.cpf-tema .cpf-redes a { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cpf-sobre-cielo); display: flex; align-items: center; justify-content: center; }
.cpf-footer__barra { background: var(--cpf-azul); color: #fff; padding: 15px 0; font-size: 14px; line-height: 22px; text-align: center; }

/* ---------- Entradas ---------- */
.cpf-articulo { padding: 24px 0; border-bottom: 1px solid var(--cpf-borde); }
.cpf-articulo__titulo { margin: 0 0 8px; font-size: 24px; line-height: 30px; }

/* ==========================================================================
   Animaciones
   ========================================================================== */
.cpf-anim-flota { animation: cpf-flota 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cpf-anim-bote { animation: cpf-bote 3.2s ease-in-out infinite; }
.cpf-anim-sombra { animation: cpf-sombra 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cpf-anim-solapa-izq { transform-box: fill-box; transform-origin: 100% 100%; animation: cpf-solapa-i 3.2s ease-in-out infinite; }
.cpf-anim-solapa-der { transform-box: fill-box; transform-origin: 0% 100%; animation: cpf-solapa-d 3.2s ease-in-out infinite; }
.cpf-anim-solapa-fd { transform-box: fill-box; transform-origin: 0% 50%; animation: cpf-solapa-fd 3.2s ease-in-out infinite; }
.cpf-anim-solapa-fi { transform-box: fill-box; transform-origin: 100% 0%; animation: cpf-solapa-fi 3.2s ease-in-out infinite; }
.cpf-anim-sale { animation: cpf-sale 1.2s cubic-bezier(.2,1.5,.4,1) .2s both; transform-box: fill-box; transform-origin: 50% 100%; }
.cpf-anim-rayos { transform-box: fill-box; transform-origin: center; animation: cpf-girar 20s linear infinite; }
.cpf-anim-anillo { transform-box: fill-box; transform-origin: center; animation: cpf-girar 12s linear infinite; }
.cpf-anim-late { transform-box: fill-box; transform-origin: center; animation: cpf-late 1.6s ease-in-out infinite; }
.cpf-anim-brilla, .cpf-chispa { animation: cpf-brilla 2.4s ease-in-out infinite; }
.cpf-d2 { animation-delay: .8s; }
.cpf-d3 { animation-delay: 1.6s; }
.cpf-anim-diez { background: linear-gradient(110deg, #2a8dcb 38%, #9fd3f3 50%, #2a8dcb 62%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cpf-brillo 3.2s linear infinite, cpf-rebote 3.2s ease-in-out infinite; }
.cpf-anim-latido { animation: cpf-late 1.6s ease-in-out infinite; }
.cpf-anim-balanceo { animation: cpf-balanceo 2.8s ease-in-out infinite; }
.cpf-rueda--lenta { animation: cpf-girar 30s linear infinite; }
.cpf-rueda--rapida { animation: cpf-girar 1.1s linear infinite; }
.cpf-rueda--final { animation: cpf-frena 3.4s cubic-bezier(.12,.72,.18,1) both; }
.cpf-ruleta[data-fase="durante"] .cpf-ruleta__puntero { animation: cpf-tic .18s ease-in-out infinite; }
.cpf-ruleta[data-fase="despues"] .cpf-ruleta__puntero { animation: cpf-tic .22s ease-in-out 12; }
.cpf-ruleta[data-fase="durante"] .cpf-luz { animation-duration: .35s; }
.cpf-confeti { position: absolute; top: -16px; width: 10px; height: 14px; animation: cpf-caer 2.6s ease-in forwards; }
.cpf-confeti:nth-of-type(1) { left: 6%; background: var(--cpf-azul-click); }
.cpf-confeti:nth-of-type(2) { left: 20%; background: var(--cpf-carton); animation-delay: .25s; }
.cpf-confeti:nth-of-type(3) { left: 36%; background: var(--cpf-cielo); animation-delay: .5s; }
.cpf-confeti:nth-of-type(4) { left: 58%; background: var(--cpf-navy); animation-delay: .15s; }
.cpf-confeti:nth-of-type(5) { left: 74%; background: var(--cpf-azul-click); animation-delay: .4s; }
.cpf-confeti:nth-of-type(6) { left: 90%; background: var(--cpf-carton); animation-delay: .05s; }

@keyframes cpf-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cpf-bote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cpf-sombra { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.88); opacity: .35; } }
@keyframes cpf-solapa-i { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes cpf-solapa-d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes cpf-solapa-fd { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes cpf-solapa-fi { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes cpf-sale { 0% { transform: translateY(80px) scale(.35); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes cpf-girar { to { transform: rotate(360deg); } }
@keyframes cpf-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes cpf-brilla { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes cpf-brillo { 0% { background-position: 100% 0; } 100% { background-position: -160% 0; } }
@keyframes cpf-rebote { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-14px) scale(1.04); } 86% { transform: translateY(0) scale(.98); } 92% { transform: translateY(-5px) scale(1.01); } }
@keyframes cpf-balanceo { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.07); } }
@keyframes cpf-frena { from { transform: rotate(0); } to { transform: rotate(1462deg); } }
@keyframes cpf-tic { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes cpf-halo { 0% { box-shadow: 0 0 0 0 rgba(37,123,178,.5); } 100% { box-shadow: 0 0 0 18px rgba(37,123,178,0); } }
@keyframes cpf-luz { 0%, 100% { background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9); } 50% { background: #04a6e1; box-shadow: none; } }
@keyframes cpf-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cpf-caer { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(380px) rotate(540deg); opacity: 0; } }
@keyframes cpf-entra { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
	.cpf-sec { padding-top: 64px; padding-bottom: 64px; }
	.e-con.cpf-sec { --padding-top: 64px; --padding-bottom: 64px; }
	.cpf-h-hero, .cpf-h-hero .elementor-heading-title { font-size: 32px; line-height: 40px; }
	.cpf-h-sec, .cpf-h-sec .elementor-heading-title { font-size: 24px; line-height: 32px; }
	.cpf-sub, .cpf-sub p { font-size: 18px; line-height: 28px; }
	.cpf-premio__numero { font-size: 150px; line-height: 130px; }
	.cpf-premio__etiqueta { font-size: 24px; line-height: 32px; }
	.cpf-ruleta__rueda { width: 280px; height: 280px; --cpf-r: 134px; }
	.cpf-premio__sello { width: 88px; height: 88px; right: 0; top: -10px; }
	.cpf-premio__sello span { font-size: 11px; line-height: 13px; }
	.cpf-premio__sello strong { font-size: 13px; line-height: 16px; }
	.cpf-form { padding: 24px 18px; }
}

/* Movimiento reducido: sin animaciones. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cpf-tema *, .cpf-tema *::before, .cpf-tema *::after { animation: none !important; transition: none !important; }
	.cpf-anim-diez { -webkit-text-fill-color: var(--cpf-azul-click); }
}