david.martinez/Maphre-PLD-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
david.martinez
2026-08-13 17:51:46 -06:00
parent 3411db5da8
commit 347e718548
33 changed files with 2978 additions and 2145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
BIN
View File
Binary file not shown.
contenido/03.html
+35 -21
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
@@ -8,12 +8,27 @@
background-size: cover;
background-position: center;
}
.sec0 .card { border:none; border-radius: 25px; background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); }
.cuadro_navegacion { background-color: #00263a!important; border-radius: 25px; }
.cuadro_navegacion .card-header { border: 1px solid #657380; }
.main-txt { margin-left: -140px; }
.anim { opacity: 0; }
.sec0 .card {
border: none;
border-radius: 25px;
background: #ff002d;
background: #ff002d;
background: #ff002d;
background: linear-gradient(to right, #ff002d 0%, #d90026 100%);
}
.cuadro_navegacion {
background-color: #00263a !important;
border-radius: 25px;
}
.cuadro_navegacion .card-header {
border: 1px solid #657380;
}
.main-txt {
margin-left: -140px;
}
.anim {
opacity: 0;
}
</style>
</head>
<body>
@@ -27,7 +42,11 @@
</div>
<div class="col-7">
<div class="card shadow p-3 anim anim1 text-white">
<p class="text-center">Los <b>temas</b> que revisaremos a lo largo del curso son los siguientes:</p>
<p class="text-center">
Los
<b>temas</b>
que revisaremos a lo largo del curso son los siguientes:
</p>
<ul class="text-left">
<li>Aspectos generales</li>
<li>Conceptos previstos en las nuevas disposiciones</li>
@@ -49,33 +68,30 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_3 = newSound("audio/Audio_3_Marcos.mp3");
Audio_3.on("end", function() {
var Audio_3 = newSound('audio/Audio_3_Marcos.mp3');
Audio_3.on('end', function () {
fn_end();
$('.personaje_m_0').removeClass('play');
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -87,7 +103,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/07.html
+126 -81
View File
@@ -1,21 +1,59 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.personaje { position: relative; z-index: 2;}
.bubble {
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
.sec0 {
background-image: url(img/fondos/bg3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.personaje {
position: relative;
z-index: 2;
}
.bubble {
position: relative;
width: 100%;
height: 112px;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.btn_ponter {
cursor: pointer;
position: absolute;
}
.buttonss0 {
left: -69px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.buttonss1 {
right: -69px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.carousel-style {
border: 6px solid #68abc1;
border-radius: 25px;
}
.carousel-item p {
margin: 0;
}
.carousel-item .rounded {
border-radius: 25px !important;
}
.anim {
opacity: 0;
}
.btn_ponter { cursor: pointer; position: absolute; }
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.carousel-style { border: 6px solid #68ABC1; border-radius:25px;}
.carousel-item p { margin: 0;}
.carousel-item .rounded { border-radius: 25px!important;}
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -30,7 +68,9 @@
<div class="col-7">
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
<p class="m0">
Ahora que gracias a tu ayuda, ya conozco de qué tratan los aspectos generales y qué personas se ven involucradas en ellos, <b>¿qué más debo saber?</b>
Ahora que gracias a tu ayuda, ya conozco de qué tratan los aspectos generales y qué personas se ven
involucradas en ellos,
<b>¿qué más debo saber?</b>
</p>
</div>
</div>
@@ -38,8 +78,8 @@
<div class="row justify-content-center anim anim3">
<div class="col-10">
<div class="card-body p-0 carousel-style">
<div class="btn_ponter buttonss0" style="display: none;" href="#carru0" role="button" data-slide="prev">
<img src="img/guia_navegacion/arrow_left.png">
<div class="btn_ponter buttonss0" style="display: none" href="#carru0" role="button" data-slide="prev">
<img src="img/guia_navegacion/arrow_left.png" />
</div>
<div id="carru0" class="carousel slide">
<div class="carousel-inner">
@@ -48,13 +88,13 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/4.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/4.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8 text-left">
<h5>Cliente</h5>
<h5>cliente</h5>
<p>
Un cliente es la persona física, moral, o institución fiduciaria, que tenga el carácter
de: contratante, asegurado, fideicomitente, comitente, mandante, obligado a pagar una
contraprestación y/o comprador de salvamento.
Un cliente es la persona física, moral, o institución fiduciaria, que tenga el
carácter de: contratante, asegurado, fideicomitente, comitente, mandante, obligado a
pagar una contraprestación y/o comprador de salvamento.
</p>
</div>
</div>
@@ -68,7 +108,7 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/5.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/5.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Beneficiario</h5>
<p>
@@ -88,11 +128,12 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/6.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/6.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Dispositivo</h5>
<p>
Es un equipo que permite acceder a Internet, el cual puede ser utilizado para celebrar Operaciones.
Es un equipo que permite acceder a Internet, el cual puede ser utilizado para celebrar
Operaciones.
</p>
</div>
</div>
@@ -106,11 +147,12 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/7.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/7.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Grado de Riesgo</h5>
<p>
Refiere a la clasificación de los Clientes que realiza la Aseguradora o la Afianzadora con base en la evaluación de su Riesgo.
Refiere a la clasificación de los clientes que realiza la Aseguradora o la Afianzadora
con base en la evaluación de su Riesgo.
</p>
</div>
</div>
@@ -124,12 +166,13 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/8.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/8.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Mitigantes</h5>
<p>
Son las políticas y los procedimientos de cada Aseguradora o Afianzadora que contribuyan a administrar
y disminuir la exposición a los Riesgos identificados en la metodología de Enfoque Basados en Riesgos.
Son las políticas y los procedimientos de cada Aseguradora o Afianzadora que
contribuyan a administrar y disminuir la exposición a los Riesgos identificados en la
metodología de Enfoque Basados en Riesgos.
</p>
</div>
</div>
@@ -143,12 +186,10 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/9.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/9.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Operaciones</h5>
<p>
Se clasifican en operaciones para Seguros y operaciones para Fianzas.
</p>
<p>Se clasifican en operaciones para Seguros y operaciones para Fianzas.</p>
</div>
</div>
</div>
@@ -161,13 +202,14 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/10.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/10.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Propietario real</h5>
<p>
Es la persona física que no siendo el Cliente o el Beneficiario, obtiene los beneficios
derivados de un contrato u operación celebrado con la Aseguradora o la Afianzadora.
También comprende a las personas que ejerzan el control sobre una persona moral.
Es la persona física que no siendo el cliente o el Beneficiario, obtiene los
beneficios derivados de un contrato u operación celebrado con la Aseguradora o la
Afianzadora. También comprende a las personas que ejerzan el control sobre una persona
moral.
</p>
</div>
</div>
@@ -181,12 +223,12 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row align-items-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/11.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/11.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Proveedor de recursos</h5>
<p>
Es la persona que, sin ser el Cliente en una operación de seguros con componente
de ahorro e inversión, aporta los recursos sin obtener los beneficios económicos
Es la persona que, sin ser el cliente en una operación de seguros con componente de
ahorro e inversión, aporta los recursos sin obtener los beneficios económicos
derivados de esta.
</p>
</div>
@@ -201,11 +243,11 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><img src="img/13.png" class="mx-auto d-block" alt=""></div>
<div class="col-4 mb-2"><img src="img/13.png" class="mx-auto d-block" alt="" /></div>
<div class="col-8">
<h5>Riesgo</h5>
<p>
Es la probabilidad de que la Institución pueda ser utilizada por los Clientes para
Es la probabilidad de que la Institución pueda ser utilizada por los clientes para
realizar actos u Operaciones a través de los cuales pudiesen cometerse delitos de
operaciones con recursos de procedencia ilícita y el financiamiento al terrorismo.
</p>
@@ -221,11 +263,20 @@
<div class="col-12">
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-4 mb-2"><a class="btn-pdf locked" href="material/mapfre_pld_conceptos.pdf" target="_blank" download><img src="img/12.png" class="mx-auto d-block" alt=""></a></div>
<div class="col-4 mb-2">
<a
class="btn-pdf locked"
href="material/mapfre_pld_conceptos.pdf"
target="_blank"
download
>
<img src="img/12.png" class="mx-auto d-block" alt="" />
</a>
</div>
<div class="col-8">
<p>
Si deseas recordar y/o conservar estas definiciones, te invitamos a descargar el siguiente
glosario para que nunca las olvides.
Si deseas recordar y/o conservar estas definiciones, te invitamos a descargar el
siguiente glosario para que nunca las olvides.
</p>
</div>
</div>
@@ -236,22 +287,23 @@
</div>
</div>
<div class="btn_ponter buttonss1" href="#carru0" role="button" data-slide="next">
<img src="img/guia_navegacion/arrow_right.png">
<img src="img/guia_navegacion/arrow_right.png" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-2 anim anim2">
<div class="col-8">
<div class="bubble d-flex align-items-center shadow pr-5 pl-3 py-2">
<p class="m-0">
Pues bien, Marcos. Es importante que sepas a qué nos referimos con operación, beneficiario, grado de riesgo,
entre otros <b>conceptos clave</b>. A continuación, podrás revisarlos.
<div class="bubble d-flex flex-column align-items-center shadow pr-5 pl-3 py-2">
<p class="mb-1">
Pues bien, Marcos. Es importante que sepas a qué nos referimos con operación, beneficiario, grado de
riesgo, entre otros <b>conceptos clave</b>.
</p>
<p class="m-0">A continuación, podrás revisarlos.</p>
</div>
</div>
<div class="col-1">
<div class="personaje personaje_r_4" style="margin-left: -117px;"></div>
<div class="personaje personaje_r_4" style="margin-left: -117px"></div>
</div>
</div>
</div>
@@ -262,46 +314,43 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_5 = newSound("audio/Audio_5_Marcos.mp3");
var Audio_R4 = newSound("audio/Audio_4_Ruben.mp3");
var Audio_5 = newSound('audio/Audio_5_Marcos.mp3');
var Audio_R4 = newSound('audio/Audio_4_Ruben.mp3');
Audio_5.on("end", function() {
Audio_5.on('end', function () {
var tl3 = new TimelineMax();
tl3.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl3.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
stopAllSoundsAndPlay(Audio_R4);
$('.personaje_m_4').removeClass('play');
$('.personaje_r_4').addClass('play');
});
Audio_R4.on("end", function() {
Audio_R4.on('end', function () {
var tl2 = new TimelineMax();
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
tl2.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl2.call(fn_slide);
$('.personaje_r_4').removeClass('play');
instruccion(3);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
$(".carousel").carousel({ interval: false });
$('.carousel').carousel({ interval: false });
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -313,37 +362,35 @@ jQuery(document).ready(function($) {
function fn_slide() {
console.log('wubba dubba');
var items = 0;
$(".buttonss0").click(function(event) {
$('.buttonss0').click(function (event) {
__click.play();
items--;
if (items < 1) {
$(".buttonss0").hide();
$(".buttonss1").show();
$('.buttonss0').hide();
$('.buttonss1').show();
} else {
$(".buttonss0").show();
$(".buttonss1").show();
$('.buttonss0').show();
$('.buttonss1').show();
}
});
$(".buttonss1").click(function(event) {
$('.buttonss1').click(function (event) {
__click.play();
items++;
if (items >= 9) {
//$(".buttonss1").removeClass('animated pulse infinite');
$(".buttonss0").show();
$(".buttonss1").hide();
$('.buttonss0').show();
$('.buttonss1').hide();
instruccion(17);
if ($('.btn-pdf').hasClass('locked')) {
$('.btn-pdf img').addClass('animated pulse infinite');
} else {
}
} else {
$(".buttonss0").show();
$(".buttonss1").show();
$('.buttonss0').show();
$('.buttonss1').show();
}
});
}
@@ -357,7 +404,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/08.html
+4 -4
View File
@@ -8,7 +8,7 @@
.btn_ { position: absolute; bottom: -11%; left: 72%; }
.card_intro { background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff); border: 0; border-top-left-radius:25px; border-top-right-radius: 25px; }
.bg-blanco { background-image: url(img/fondos/bg0.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.bg_actividad { background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); border-top-right-radius: 25px;}
.bg_actividad { background: linear-gradient(to right, #ff002d 0%, #d90026 100%); border-top-right-radius: 25px;}
.bg-gris { background-image: url(img/actividad/bg_gris.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.cuadro_gris { position: relative; background-image: url(img/actividad/gris.png); background-repeat: no-repeat; background-size: 100% 100%; margin: 0 auto; }
.opcion { position: relative; padding-top: 10px; cursor: pointer; padding-left: 18px; }
@@ -18,7 +18,7 @@
.opcion.selected:hover { content: ""; position: absolute; background-image: url(img/actividad/2.png); width: 52px; height: 52px; background-repeat: no-repeat; top: 0; left: -60px; }
.sec2.good { background-image: url(img/fondos/bg8.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.sec2.bad { background-image: url(img/fondos/bg9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.text-rojo-1 { color: #b9230f; font-weight: bold; }
.text-rojo-1 { color: #FF002D; font-weight: bold; }
.swal2-popup.popup-class { height: 100%;}
</style>
</head>
@@ -329,7 +329,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {
},
onOpen: function () {
@@ -366,7 +366,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {
},
onOpen: function () {
contenido/09.html
+1 -1
View File
@@ -173,7 +173,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
contenido/10.html
+118 -65
View File
@@ -1,22 +1,57 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg10.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.personaje4 { position: relative; z-index: 3;}
.bubble {
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; margin-top: -57px;
.sec0 {
background-image: url(img/fondos/bg10.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.personaje4 {
position: relative;
z-index: 3;
}
.bubble {
width: 100%;
height: auto;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
margin-top: -57px;
}
.personaje {
position: relative;
z-index: 2;
}
.obj {
position: absolute;
}
.obj1 {
top: 9%;
left: 10%;
}
.obj2 {
top: 46%;
left: 28%;
}
.txt-info {
position: absolute;
}
.txt-info1 {
top: 111px;
left: 64px;
width: 61%;
}
.txt-info2 {
top: 83px;
left: 64px;
width: 66%;
}
.anim {
opacity: 0;
}
.personaje { position: relative; z-index: 2;}
.obj { position: absolute;}
.obj1 { top: 9%; left: 10%;}
.obj2 { top: 46%; left: 28%;}
.txt-info { position: absolute;}
.txt-info1 { top: 111px; left: 64px; width: 61%;}
.txt-info2 { top: 83px; left: 64px; width: 66%;}
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -26,24 +61,30 @@
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6">
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del Cliente</h5>
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del cliente</h5>
<div class="personaje personaje_m_4 mx-auto anim anim2"></div>
<div class="bubble shadow px-3 pt-5 pb-2 anim anim1">
<p>
Ahora que conozco que existe un manual, me gustaría saber, ¿cómo puedo <b>identificar</b>
a los clientes? ¿Se cuenta con alguna <b>herramienta</b> donde pueda consultar sus datos?
¿Qué debo hacer en caso de tratar con personas físicas y morales?
Ahora que conozco que existe un manual, me gustaría saber, ¿cómo puedo
<b>identificar</b>
a los clientes? ¿Se cuenta con alguna
<b>herramienta</b>
donde pueda consultar sus datos? ¿Qué debo hacer en caso de tratar con personas físicas y morales?
</p>
</div>
</div>
<div class="col-6 h-100">
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#b9230f">
<img src="img/18.png" alt="">
<div class="txt-info txt-info1 text-center">¿En qué consiste la Política de Identificación del cliente?</div>
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#FF002D">
<img src="img/18.png" alt="" />
<div class="txt-info txt-info1 text-center">
¿En qué consiste la Política de Identificación del cliente?
</div>
</div>
<div class="obj obj2 btn-pop anim anim4" data-popid="#pop1" data-backcolor="#eba452">
<img src="img/19.png" alt="">
<div class="txt-info txt-info2 text-center">¿Cuántos regímenes de identificación prevén las nuevas disposiciones?</div>
<img src="img/19.png" alt="" />
<div class="txt-info txt-info2 text-center">
¿Cuántos regímenes de identificación prevén las nuevas disposiciones?
</div>
</div>
</div>
</div>
@@ -60,14 +101,18 @@
<div class="col-11 text-left text-white">
<p><b>¿En qué consiste la Política de Identificación del cliente?</b></p>
<p>
Consiste en <b>integrar y conservar un expediente de cada Cliente </b>y, en algunos casos, de su cónyuge y dependientes,
de los Beneficiarios, del/los Propietario(s) Real(es) (cuando haya) y de/los Proveedor(es) de Recursos (cuando haya), con
<b>datos y documentos</b>, los cuales se deben recabar de forma previa a la celebración del Contrato en el que se formalice
la Operación y, de acuerdo a lo que adelante se indica.
Consiste en
<b>integrar y conservar un expediente de cada cliente</b>
y, en algunos casos, de su cónyuge y dependientes, de los Beneficiarios, del/los Propietario(s) Real(es)
(cuando haya) y de/los Proveedor(es) de Recursos (cuando haya), con
<b>datos y documentos</b>
, los cuales se deben recabar de forma previa a la celebración del Contrato en el que se formalice la
Operación y, de acuerdo a lo que adelante se indica.
</p>
<p class="m-0">
También consiste en <b>completar esos datos y documentos </b>al momento en que el Cliente o los Beneficiarios se
presenten a ejercer sus derechos.
También consiste en
<b>completar esos datos y documentos</b>
al momento en que el cliente o los Beneficiarios se presenten a ejercer sus derechos.
</p>
</div>
</div>
@@ -78,12 +123,30 @@
<div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p>Se prevén <b>tres regímenes de identificación</b>, el <b>Régimen de Excepción</b>, el <b>Régimen Ordinario </b>y el <b>Régimen Especial</b>, integrado por: </p>
<p>
Se prevén
<b>tres regímenes de identificación</b>
, el
<b>Régimen de Excepción</b>
, el
<b>Régimen Ordinario</b>
y el
<b>Régimen Especial</b>
, integrado por:
</p>
<p class="m-0">a) Operaciones no presenciales;</p>
<p class="m-0">b) Simplificado (para organismos y dependencias sean del Gobierno Federal, de gobiernos Estatales o gobiernos Municipales, así como sus organismos y dependencias, al igual que para entidades del sector financiero y organizaciones auxiliares del crédito), </p>
<p class="m-0">
b) Simplificado (para organismos y dependencias sean del Gobierno Federal, de gobiernos Estatales o
gobiernos Municipales, así como sus organismos y dependencias, al igual que para entidades del sector
financiero y organizaciones auxiliares del crédito),
</p>
<p class="m-0">c) Alto Riesgo y</p>
<p>d) Fideicomisos.</p>
<p class="m-0">En esta ocasión <b>sólo exploraremos </b>el Régimen de Excepción, el Régimen Ordinario y el Régimen Especial (Alto Riesgo). </p>
<p class="m-0">
En esta ocasión
<b>sólo exploraremos</b>
el Régimen de Excepción, el Régimen Ordinario y el Régimen Especial (Alto Riesgo).
</p>
</div>
</div>
</div>
@@ -92,39 +155,34 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_8 = newSound("audio/Audio_8_Marcos.mp3");
var Audio_8 = newSound('audio/Audio_8_Marcos.mp3');
Audio_8.on("end", function() {
Audio_8.on('end', function () {
$('.personaje_m_4').removeClass('play').addClass('stop');
var tl2 = new TimelineMax();
tl2.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 1);
tl2.fromTo(".anim4",1,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut}, 2);
tl2.fromTo('.anim3', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 1);
tl2.fromTo('.anim4', 1, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 2);
tl2.call(fn_pops);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -135,13 +193,13 @@ jQuery(document).ready(function($) {
function fn_pops() {
instruccion(11);
$(".btn-pop").addClass('animated pulse infinite');
$(".btn-pop").click(function(event) {
$('.btn-pop').addClass('animated pulse infinite');
$('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite');
var este = $(this);
var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor");
var backcolor = $(this).data('backcolor');
Swal.fire({
html: html,
showCancelButton: false,
@@ -149,29 +207,28 @@ jQuery(document).ready(function($) {
target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' },
background: backcolor,
width:"100%",
padding: ".5rem .5rem .5rem .5rem",
width: '100%',
padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
if ($(este).data("audio")) {
stopAllSoundsAndPlay(eval($(este).data("audio")));
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
if ($(este).hasClass('visitado')) {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
} else {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
}
},
onRender: function () {},
@@ -179,11 +236,9 @@ jQuery(document).ready(function($) {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end();
} else {
}
},
onAfterClose: function () {}
@@ -195,7 +250,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/11.html
+74 -42
View File
@@ -1,17 +1,41 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.bubble {
width: 100%; height: 98px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
.sec0 {
background-image: url(img/fondos/bg3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bubble {
width: 100%;
height: 98px;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.personaje {
position: relative;
z-index: 2;
}
.personaje > div {
margin-left: 100px;
}
.info {
position: relative;
opacity: 0;
border: 5px solid #63a7bf;
background: #fff;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
display: none;
}
.anim {
opacity: 0;
}
.personaje { position: relative; z-index: 2;}
.personaje>div {margin-left: 100px;}
.info { position: relative; opacity: 0; border: 5px solid #63a7bf; background: #fff; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; display: none; }
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -21,7 +45,7 @@
<div class="container h-100">
<div class="row pt-5">
<div class="col-12">
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del Cliente</h5>
<h5 class="title_ text-center mb-3 anim anim2">La Política de Identificación del cliente</h5>
</div>
<div class="col-2 personaje anim anim1">
<div class="personaje_r_4"></div>
@@ -29,9 +53,8 @@
<div class="col-9 align-self-center mt-2 anim anim1">
<div class="bubble d-flex align-items-center shadow pl-4 pr-3 py-2">
<p class="m-0">
Además de lo que comentas, es importante conocer cuándo estamos ante la presencia
de cierto régimen y qué datos o documentos solicitar. Para ello, debemos considerar
lo siguiente:
Además de lo que comentas, es importante conocer cuándo estamos ante la presencia de cierto régimen y
qué datos o documentos solicitar. Para ello, debemos considerar lo siguiente:
</p>
</div>
</div>
@@ -39,32 +62,39 @@
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="btn-group">
<div id="btn-item1" class="btn1 anim anim3" data-obj="1"><img src="img/20.png" alt=""></div>
<div id="btn-item2" class="btn2 anim anim3" data-obj="2"><img src="img/21.png" alt=""></div>
<div id="btn-item3" class="btn3 anim anim3" data-obj="3"><img src="img/22.png" alt=""></div>
<div id="btn-item4" class="btn4 anim anim3" data-obj="4"><img src="img/23.png" alt=""></div>
<div id="btn-item1" class="btn1 anim anim3" data-obj="1"><img src="img/20.png" alt="" /></div>
<div id="btn-item2" class="btn2 anim anim3" data-obj="2"><img src="img/21.png" alt="" /></div>
<div id="btn-item3" class="btn3 anim anim3" data-obj="3"><img src="img/22.png" alt="" /></div>
<div id="btn-item4" class="btn4 anim anim3" data-obj="4"><img src="img/23.png" alt="" /></div>
</div>
</div>
<div class="col-8 mt-3 anim anim2">
<div id="info0" class="info b1 p-2">
<p class="mb-0">
El <b>Régimen de Excepción o Umbrales</b>, solo aplica a Operaciones que sean de Riesgo Bajo y que sean contratadas
presencialmente. Dependiendo del monto de estas, se ubicarán dentro del <b>Umbral 1 o 2.</b>
El
<b>Régimen de Excepción o Umbrales</b>
, solo aplica a Operaciones que sean de Riesgo Bajo y que sean contratadas presencialmente.
Dependiendo del monto de estas, se ubicarán dentro del
<b>Umbral 1 o 2.</b>
</p>
</div>
<div id="info1" class="info b2 p-2">
<p class="mb-0">
<b>El Umbral 1 sólo aplica a personas físicas y morales</b>, no a fiduciarios. En caso de que un cliente con la
misma o varias operaciones rebase los montos de las operaciones de este umbral, pasará al <b>número 2</b> y se
le identificará conforme a este.
<b>El Umbral 1 sólo aplica a personas físicas y morales</b>
, no a fiduciarios. En caso de que un cliente con la misma o varias operaciones rebase los montos de
las operaciones de este umbral, pasará al
<b>número 2</b>
y se le identificará conforme a este.
</p>
</div>
<div id="info2" class="info b3 p-2">
<p class="mb-0">
<b>El umbral 2 aplica a personas físicas y morales. </b>Cuando un cliente con la misma o con varias operaciones rebase los
montos del umbral 2, deberá ser identificado bajo el Régimen Ordinario (el cual solicita información específica dependiendo el tipo de persona).
<b>El umbral 2 aplica a personas físicas y morales.</b>
Cuando un cliente con la misma o con varias operaciones rebase los montos del umbral 2, deberá ser
identificado bajo el Régimen Ordinario (el cual solicita información específica dependiendo el tipo de
persona).
</p>
</div>
@@ -72,11 +102,16 @@
<div class="row">
<div class="col-9">
<p class="mb-0">
Para conocer los diferentes montos y datos que debes solicitar en función del régimen y el tipo de persona, te invitamos a descargar el siguiente documento.
Para conocer los diferentes montos y datos que debes solicitar en función del régimen y el tipo de
persona, te invitamos a descargar el siguiente documento.
</p>
</div>
<div class="col-3">
<div class="btn-pdf"><a href="material/mapfre_pld_regimen_de_excepcion.pdf" download><img src="img/pdf.png" class="mx-auto d-block" alt=""></a></div>
<div class="btn-pdf">
<a href="material/mapfre_pld_regimen_de_excepcion.pdf" download>
<img src="img/pdf.png" class="mx-auto d-block" alt="" />
</a>
</div>
</div>
</div>
</div>
@@ -90,36 +125,34 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_R6 = newSound("audio/Audio_6_Ruben.mp3");
var Audio_R6 = newSound('audio/Audio_6_Ruben.mp3');
Audio_R6.on("end", function() {
Audio_R6.on('end', function () {
$('.personaje_r_4').removeClass('play').addClass('personaje7 stop');
var tl2 = new TimelineMax();
tl2.staggerFromTo(".anim3",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 1);
tl2.staggerFromTo('.anim3', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 1);
tl2.call(fn_slide);
instruccion(11);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
function fn_firstAudio() {
@@ -139,11 +172,11 @@ jQuery(document).ready(function($) {
$('.info').removeClass('active');
$(this).addClass('active visit');
$('.info').hide();
var num = $(this).data('obj')
var num = $(this).data('obj');
var obj = $(this).data('item');
console.log(num);
$(obj).show();
TweenMax.fromTo(obj, .5, {opacity:0, x:-500},{opacity:1, ease: "elastic.out(1, 0.3)", x:0});
TweenMax.fromTo(obj, 0.5, { opacity: 0, x: -500 }, { opacity: 1, ease: 'elastic.out(1, 0.3)', x: 0 });
if ($('.btnitem').length <= $('.btnitem.visit').length) {
instruccion(17);
@@ -156,11 +189,10 @@ jQuery(document).ready(function($) {
$('.btn-pdf').click(function () {
$(this).removeClass('animated pulse infinite');
fn_end();
})
});
function fn_end() {
instruccion(1);
}
});
</script>
contenido/12.html
+70 -39
View File
@@ -1,17 +1,48 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.obj-line { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.obj { position: absolute;}
.txt_1 { top: 44px; right: 96px; }
.txt_2 { top: 44px; right: 132px;}
.txt_3 { top: 44px; right: 156px;}
.txt_4 { top: 41px; right: 149px;}
.txt_5 { top: 32px; right: 85px; width: 280px; text-align: left; }
.anim { opacity: 0; }
.sec0 {
background-image: url(img/fondos/bg7.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.obj-line {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.obj {
position: absolute;
}
.txt_1 {
top: 44px;
right: 96px;
}
.txt_2 {
top: 44px;
right: 132px;
}
.txt_3 {
top: 44px;
right: 156px;
}
.txt_4 {
top: 41px;
right: 149px;
}
.txt_5 {
top: 32px;
right: 85px;
width: 280px;
text-align: left;
}
.anim {
opacity: 0;
}
</style>
</head>
<body>
@@ -21,39 +52,43 @@
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-4 anim anim8">
<h5 class="title_ text-center mb-3"><b>La Política de Identificación del Cliente</b></h5>
<div class="btn-pdf"><a href="material/mapfre_pld_documentos_validar.pdf" download><img src="img/pdf.png" class="mx-auto d-block" alt=""></a></div>
<h5 class="title_ text-center mb-3"><b>La Política de Identificación del cliente</b></h5>
<div class="btn-pdf">
<a href="material/mapfre_pld_documentos_validar.pdf" download>
<img src="img/pdf.png" class="mx-auto d-block" alt="" />
</a>
</div>
<p class="text-center">
Para conocer en profundidad el listado de documentos válidos, descarga la siguiente infografía.
</p>
</div>
<div class="col-5">
<div class="obj-line"><img src="img/29.png" alt=""></div>
<div class="obj-line"><img src="img/29.png" alt="" /></div>
<div class="row">
<div class="col-12 text-right anim anim3">
<img src="img/24.png" style="margin-right: -26px;" alt="">
<img src="img/24.png" style="margin-right: -26px" alt="" />
<div class="obj txt_1">Identificaciones oficiales</div>
</div>
<div class="col-12 text-right anim anim4">
<img src="img/25.png" style="margin-right: 16px;" alt="">
<img src="img/25.png" style="margin-right: 16px" alt="" />
<div class="obj txt_2">Comprobantes de domicilio</div>
</div>
<div class="col-12 text-right anim anim5">
<img src="img/26.png" style="margin-right: 42px;" alt="">
<img src="img/26.png" style="margin-right: 42px" alt="" />
<div class="obj txt_3">Datos mínimos del domicilio</div>
</div>
<div class="col-12 text-right anim anim6">
<img src="img/27.png" style="margin-right: 33px;" alt="">
<img src="img/27.png" style="margin-right: 33px" alt="" />
<div class="obj txt_4">Declaración</div>
</div>
<div class="col-12 text-right mt-2 anim anim7">
<img src="img/28.png" style="margin-right: -10px;" alt="">
<img src="img/28.png" style="margin-right: -10px" alt="" />
<div class="obj txt_5">Documentos públicos emitidos en el extranjero</div>
</div>
</div>
</div>
<div class="col-3 anim anim1">
<img src="img/sprites/h7.png" class="mx-auto d-block" alt="">
<img src="img/sprites/h7.png" class="mx-auto d-block" alt="" />
</div>
</div>
</div>
@@ -64,43 +99,41 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_9 = newSound("audio/Audio_9_Marcos.mp3");
var Audio_9 = newSound('audio/Audio_9_Marcos.mp3');
Audio_9.on("play", function() {
Audio_9.on('play', function () {
var tl3 = new TimelineMax();
tl3.fromTo(".anim3",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 14.759);
tl3.fromTo(".anim4",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 17.500);
tl3.fromTo(".anim5",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 18.532);
tl3.fromTo(".anim6",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 19.934);
tl3.fromTo(".anim7",.5,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut}, 21.130);
tl3.fromTo('.anim3', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 14.759);
tl3.fromTo('.anim4', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 17.5);
tl3.fromTo('.anim5', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 18.532);
tl3.fromTo('.anim6', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 19.934);
tl3.fromTo('.anim7', 0.5, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut }, 21.13);
});
Audio_9.on("end", function() {
Audio_9.on('end', function () {
$('.personaje_r_4').removeClass('play').addClass('personaje7 stop');
var tl2 = new TimelineMax();
tl2.fromTo(".anim8",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
tl2.fromTo('.anim8', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl2.call(fn_end);
instruccion(17);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim1",1,{opacity:0, x:100},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo('.anim1', 1, { opacity: 0, x: 100 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
function fn_firstAudio() {
@@ -111,12 +144,10 @@ jQuery(document).ready(function($) {
$('.btn-pdf').click(function () {
$(this).removeClass('animated pulse infinite');
instruccion(1);
})
});
function fn_end() {
$('.btn-pdf').addClass('animated pulse infinite');
}
});
</script>
contenido/13.html
+4 -4
View File
@@ -77,7 +77,7 @@
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#63a7bf">
<img src="img/31.png" alt="" />
</div>
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#b9230f">
<div class="btn-pop pop2" data-popid="#pop2" data-backcolor="#FF002D">
<img src="img/32.png" alt="" />
</div>
<div class="btn-pop pop3" data-popid="#pop1" data-backcolor="#eb7f3d">
@@ -89,7 +89,7 @@
<div class="col-8">
<div class="bubble bub2 shadow pr-5 pl-3 py-2">
<p class="m-0">
Claro que sí, Marcos. Nosotros tenemos una metodología que recoge todos los
Claro que sí Marcos. Nosotros tenemos una metodología que recoge todos los
<b>riesgos</b>
a los que estamos expuestos y que nos señala cuándo debemos
<b>usarla</b>
@@ -118,7 +118,7 @@
<p>
Es una metodología para realizar una
<b>evaluación de Riesgos</b>
a la que está expuesta la Institución en virtud de sus productos, servicios, Clientes, países o áreas
a la que está expuesta la Institución en virtud de sus productos, servicios, clientes, países o áreas
geográficos en las que opere, transacciones y canales de envió o distribución.
</p>
<p class="m-0">
@@ -244,7 +244,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
contenido/15.html
+121 -72
View File
@@ -1,47 +1,93 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.personaje4 { position: relative; z-index: 3;}
.bubble {
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; margin-top: -57px;
.sec0 {
background-image: url(img/fondos/bg3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.personaje4 {
position: relative;
z-index: 3;
}
.bubble {
width: 100%;
height: auto;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
margin-top: -57px;
}
.personaje {
position: relative;
z-index: 2;
}
.obj {
position: absolute;
}
.obj1 {
top: 17.7%;
left: 4.3%;
}
.obj2 {
top: 61.3%;
left: 21.5%;
}
.obj3 {
top: 4%;
left: 39%;
}
.obj4 {
top: 70%;
left: 56.5%;
}
.obj5 {
top: 14.3%;
left: 74%;
}
.personaje { position: relative; z-index: 2;}
.obj { position: absolute;}
.obj1 { top: 17.7%; left: 4.3%;}
.obj2 { top: 61.3%; left: 21.5%;}
.obj3 { top: 4%; left: 39%;}
.obj4 { top: 70%; left: 56.5%;}
.obj5 { top: 14.3%; left: 74%;}
.anim { opacity: 0; }
.anim {
opacity: 0;
}
</style>
</head>
<body>
<div class="section_charge bg w-100 h-100">
<div class="d-none">
<img src="img/fondos/bg3.jpg" alt="">
<img src="img/fondos/bg3.jpg" alt="" />
</div>
<section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6">
<img src="img/34.png" alt="">
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#eba452"><img src="img/36.png" alt=""></div>
<div class="obj obj2 btn-pop anim anim3" data-popid="#pop1" data-backcolor="#00ab9c"><img src="img/37.png" alt=""></div>
<div class="obj obj3 btn-pop anim anim3" data-popid="#pop2" data-backcolor="#63a7bf"><img src="img/38.png" alt=""></div>
<div class="obj obj4 btn-pop anim anim3" data-popid="#pop3" data-backcolor="#eb7f3d"><img src="img/39.png" alt=""></div>
<div class="obj obj5 btn-pop anim anim3" data-popid="#pop4" data-backcolor="#b9230f"><img src="img/40.png" alt=""></div>
<img src="img/34.png" alt="" />
<div class="obj obj1 btn-pop anim anim3" data-popid="#pop0" data-backcolor="#eba452">
<img src="img/36.png" alt="" />
</div>
<div class="obj obj2 btn-pop anim anim3" data-popid="#pop1" data-backcolor="#00ab9c">
<img src="img/37.png" alt="" />
</div>
<div class="obj obj3 btn-pop anim anim3" data-popid="#pop2" data-backcolor="#63a7bf">
<img src="img/38.png" alt="" />
</div>
<div class="obj obj4 btn-pop anim anim3" data-popid="#pop3" data-backcolor="#eb7f3d">
<img src="img/39.png" alt="" />
</div>
<div class="obj obj5 btn-pop anim anim3" data-popid="#pop4" data-backcolor="#FF002D">
<img src="img/40.png" alt="" />
</div>
</div>
<div class="col-6">
<h5 class="title_ text-center mb-3 anim anim2">Política de Conocimiento del Cliente</h5>
<h5 class="title_ text-center mb-3 anim anim2">Política de Conocimiento del cliente</h5>
<div class="personaje personaje_r_4 mx-auto anim anim2"></div>
<div class="bubble shadow px-3 pt-5 pb-2 anim anim1">
<p>
Entre las características de la <b>Política de Conocimiento del Cliente</b>, podemos destacar los siguientes puntos.
Entre las características de la
<b>Política de Conocimiento del cliente</b>
, podemos destacar los siguientes puntos.
</p>
</div>
</div>
@@ -59,7 +105,8 @@
<div class="col-11 text-left text-white">
<p><b>1. ¿En qué consiste esta política?</b></p>
<p class="m-0">
Consiste en establecer las políticas, criterios, procedimientos y controles para mitigar los Riesgos acorde a los resultaos del EBR.
Consiste en establecer las políticas, criterios, procedimientos y controles para mitigar los Riesgos acorde
a los resultaos del EBR.
</p>
</div>
</div>
@@ -72,11 +119,11 @@
<div class="col-11 text-left text-white">
<p><b>2. ¿De qué se ocupa esta política?</b></p>
<p>
Los criterios, políticas, procedimientos y controles deben enfocarse a: (i) la celebración, limitación o
Los criterios, políticas, procedimientos y controles deben enfocarse a: (II) la celebración, limitación o
terminación de las relaciones comerciales, pero no las relacionadas con las Operaciones de seguros y de
fianzas; (ii) el seguimiento de las operaciones de los clientes y su agrupación; (iii) establecer los supuestos
en que las Operaciones de los Clientes se aparten de su perfil transaccional y, (v) para la modificación del
Grado de Riesgo del Cliente.
fianzas; (II) el seguimiento de las operaciones de los clientes y su agrupación; (III) establecer los
supuestos en que las Operaciones de los clientes se aparten de su perfil transaccional y, (V) para la
modificación del Grado de Riesgo del cliente.
</p>
</div>
</div>
@@ -87,11 +134,13 @@
<div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p><b>3. ¿Cómo se construye el perfil transaccional del Cliente?</b></p>
<p><b>3. ¿Cómo se construye el perfil transaccional del cliente?</b></p>
<p>
El <b>perfil transaccional del Cliente</b> se basa en la información que proporciona, en el monto, tipo,
naturaleza y frecuencia de las operaciones que realice, el origen y destino de sus recursos y la
geolocalización del Dispositivo en el caso de operaciones no presenciales.
El
<b>perfil transaccional del cliente</b>
se basa en la información que proporciona, en el monto, tipo, naturaleza y frecuencia de las operaciones que
realice, el origen y destino de sus recursos y la geolocalización del Dispositivo en el caso de operaciones
no presenciales.
</p>
</div>
</div>
@@ -102,11 +151,16 @@
<div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p><b>4. ¿Cómo se clasifican a los Clientes?</b></p>
<p><b>4. ¿Cómo se clasifican a los clientes?</b></p>
<p>
Las <b>Instituciones </b>deben clasificar a sus Clientes en un <b>Grado de Riesgo</b>, de
tal manera que, cuando el <b>Grado de Riesgo sea mayor</b>, la Institución deberá recabar
mayor información de éste y realizar una supervisión más estricta de su comportamiento transaccional.
Las
<b>Instituciones</b>
deben clasificar a sus clientes en un
<b>Grado de Riesgo</b>
, de tal manera que, cuando el
<b>Grado de Riesgo sea mayor</b>
, la Institución deberá recabar mayor información de éste y realizar una supervisión más estricta de su
comportamiento transaccional.
</p>
</div>
</div>
@@ -117,11 +171,16 @@
<div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p><b>5. ¿Qué perfil de Cliente requiere un seguimiento mayor?</b></p>
<p><b>5. ¿Qué perfil de cliente requiere un seguimiento mayor?</b></p>
<p>
Se consideran <b>Clientes de Grado de Riesgo Alto</b> a las <b>Personas Políticamente Expuesta extranjeras</b> y los <b>Clientes no residentes en el país</b> que operen seguros con
componentes de inversión en moneda extranjera, así como aquellas personas que la Aseguradora o la Afianzadora clasifiquen con tal carácter bajo su metodología
de evaluación de Riesgos.
Se consideran
<b>clientes de Grado de Riesgo Alto</b>
a las
<b>Personas Políticamente Expuesta extranjeras</b>
y los
<b>clientes no residentes en el país</b>
que operen seguros con componentes de inversión en moneda extranjera, así como aquellas personas que la
Aseguradora o la Afianzadora clasifiquen con tal carácter bajo su metodología de evaluación de Riesgos.
</p>
</div>
</div>
@@ -131,39 +190,34 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_R9 = newSound("audio/Audio_9_Ruben.mp3");
var Audio_R9 = newSound('audio/Audio_9_Ruben.mp3');
Audio_R9.on("end", function() {
Audio_R9.on('end', function () {
$('.personaje_r_4').removeClass('play').addClass('stop');
var tl2 = new TimelineMax();
tl2.staggerFromTo(".anim3",1,{opacity:0, y:-100},{opacity:1, y:0, ease:Expo.easeInOut}, 1);
tl2.staggerFromTo('.anim3', 1, { opacity: 0, y: -100 }, { opacity: 1, y: 0, ease: Expo.easeInOut }, 1);
tl2.call(fn_pops);
instruccion(11);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -173,13 +227,13 @@ jQuery(document).ready(function($) {
}
function fn_pops() {
$(".btn-pop").addClass('animated pulse infinite');
$(".btn-pop").click(function(event) {
$('.btn-pop').addClass('animated pulse infinite');
$('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite');
var este = $(this);
var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor");
var backcolor = $(this).data('backcolor');
Swal.fire({
html: html,
showCancelButton: false,
@@ -187,29 +241,28 @@ jQuery(document).ready(function($) {
target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' },
background: backcolor,
width:"100%",
padding: ".5rem .5rem .5rem .5rem",
width: '100%',
padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
if ($(este).data("audio")) {
stopAllSoundsAndPlay(eval($(este).data("audio")));
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
if ($(este).hasClass('visitado')) {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
} else {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
}
},
onRender: function () {},
@@ -217,11 +270,9 @@ jQuery(document).ready(function($) {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end();
} else {
}
},
onAfterClose: function () {}
@@ -233,7 +284,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/16.html
+90 -36
View File
@@ -1,20 +1,48 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.personaje { position: relative; z-index: 2;}
.bubble {
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
.sec0 {
background-image: url(img/fondos/bg3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.btn_ponter { cursor: pointer; position: absolute; }
.headone { background-image: linear-gradient(to left, #dbfbe5, #b8e7d9, #97d3cf, #7abdc7, #63a7bf);}
.headtwo { background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);}
.headthree { background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd);}
button { outline: none!important; box-shadow:none!important; }
.anim { opacity: 0; }
.personaje {
position: relative;
z-index: 2;
}
.bubble {
position: relative;
width: 100%;
height: 112px;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.btn_ponter {
cursor: pointer;
position: absolute;
}
.headone {
background-image: linear-gradient(to left, #dbfbe5, #b8e7d9, #97d3cf, #7abdc7, #63a7bf);
}
.headtwo {
background: #FF002D;
background: linear-gradient(to right, #FF002D 30%, #D90026 70%, #D90026 100%);
}
.headthree {
background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd);
}
button {
outline: none !important;
box-shadow: none !important;
}
.anim {
opacity: 0;
}
</style>
</head>
<body>
@@ -23,15 +51,18 @@ button { outline: none!important; box-shadow:none!important; }
<section id="sec0" class="sec0 w-100 h-100">
<div class="container h-100">
<div class="row justify-content-center pt-3 anim anim1">
<div class="col-12 text-center"><h5 class="title_">Política de Conocimiento del Cliente</h5></div>
<div class="col-12 text-center"><h5 class="title_">Política de Conocimiento del cliente</h5></div>
<div class="col-1">
<div class="personaje personaje_r_4 mx-auto"></div>
</div>
<div class="col-9">
<div class="bubble d-flex align-items-center shadow pl-5 pr-3 py-2">
<p class="m-0">
Por último, es importante reconocer que de los Clientes catalogados como <b>Grado de Riesgo alto</b>,
se deberán recabar <b>cuestionarios de identificación </b>que permitan:
Por último, es importante reconocer que de los clientes catalogados como
<b>Grado de Riesgo alto</b>
, se deberán recabar
<b>cuestionarios de identificación</b>
que permitan:
</p>
</div>
</div>
@@ -42,7 +73,14 @@ button { outline: none!important; box-shadow:none!important; }
<div class="card">
<div class="card-header headone" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left text-dark" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="flase" aria-controls="collapseOne">
<button
class="btn btn-link btn-block text-left text-dark"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="flase"
aria-controls="collapseOne"
>
1. Si son personas físicas o morales
</button>
</h2>
@@ -50,9 +88,9 @@ button { outline: none!important; box-shadow:none!important; }
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Obtener mayor información sobre el origen y destino de los recursos, así como las Operaciones que realizan
o pretenden realizar y, cuando sean extranjeros, las razones por las que han elegido realizar Operaciones
en territorio nacional.
Obtener mayor información sobre el origen y destino de los recursos, así como las Operaciones que
realizan o pretenden realizar y, cuando sean extranjeros, las razones por las que han elegido
realizar Operaciones en territorio nacional.
</div>
</div>
</div>
@@ -60,14 +98,22 @@ button { outline: none!important; box-shadow:none!important; }
<div class="card">
<div class="card-header headtwo" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button
class="btn btn-link btn-block text-left text-white collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
2. Si son personas físicas
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Obtener información de su cónyuge, concubina, concubinario y dependientes económicos, así como sociedades y asociaciones con las que mantenga vínculos.
Obtener información de su cónyuge, concubina, concubinario y dependientes económicos, así como
sociedades y asociaciones con las que mantenga vínculos.
</div>
</div>
</div>
@@ -75,12 +121,24 @@ button { outline: none!important; box-shadow:none!important; }
<div class="card">
<div class="card-header headthree" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left text-white collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button
class="btn btn-link btn-block text-left text-white collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
3. Si son personas morales
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div
id="collapseThree"
class="collapse"
aria-labelledby="headingThree"
data-parent="#accordionExample"
>
<div class="card-body">
Obtener información sobre la estructura corporativa y los principales accionistas o socios.
</div>
@@ -97,38 +155,36 @@ button { outline: none!important; box-shadow:none!important; }
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_R10 = newSound("audio/Audio_10_Ruben.mp3");
var Audio_R10 = newSound('audio/Audio_10_Ruben.mp3');
Audio_R10.on("end", function() {
Audio_R10.on('end', function () {
fn_accordion();
var tl2 = new TimelineMax();
tl2.fromTo(".anim3",.7,{opacity:0, y:-50},{opacity:1, y:0, ease:Expo.easeInOut});
tl2.fromTo('.anim3', 0.7, { opacity: 0, y: -50 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
$('.personaje_r_4').removeClass('play');
$('.card-header').removeClass('block').addClass('animated pulse slowly infinite');
instruccion(11);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
$(".carousel").carousel({ interval: false });
$('.carousel').carousel({ interval: false });
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim1",.7,{opacity:0, x:-250},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo('.anim1', 0.7, { opacity: 0, x: -250 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -152,7 +208,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/19.html
+2 -2
View File
@@ -48,9 +48,9 @@
Me parece que estamos ante una
<b>operación inusual</b>
, ya que esta es una operación de seguros o de fianzas, en la cual la actividad, conducta o
comportamiento del Cliente no concuerda con los antecedentes o actividad conocida de él por la
comportamiento del cliente no concuerda con los antecedentes o actividad conocida de él por la
Aseguradora o la Afianzadora, o declarada a éstas, o no coincide con el perfil transaccional inicial o
habitual de dicho Cliente, en función al origen o destino de los recursos, así como al monto,
habitual de dicho cliente, en función al origen o destino de los recursos, así como al monto,
frecuencia, tipo o naturaleza de la Operación de que se trate, sin que exista una justificación
razonable para dicha operación, actividad, conducta o comportamiento.
</p>
contenido/20.html
+98 -53
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
@@ -9,17 +9,39 @@
background-position: center;
}
.bubble {
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
width: 100%;
height: auto;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.btn-pop {
position: absolute;
}
.pop1 {
top: 39%;
left: 2%;
}
.pop2 {
top: 2%;
left: 17%;
}
.pop3 {
top: 40%;
left: 32%;
}
.pop4 {
top: 4%;
left: 47%;
}
.pop5 {
top: 42%;
left: 62%;
}
.anim {
opacity: 0;
}
.btn-pop { position: absolute;}
.pop1{ top: 39%; left: 2%; }
.pop2{ top: 2%; left: 17%; }
.pop3{ top: 40%; left: 32%; }
.pop4{ top: 4%; left: 47%; }
.pop5{ top: 42%; left: 62%; }
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -34,16 +56,28 @@
<div class="col-8">
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
<p class="m-0 anim anim1">
1. Es indispensable revisar la <b>situación conocida del Cliente y la Operación que quiera realizar</b>. Para ello, debemos considerar lo siguiente:
1. Es indispensable revisar la
<b>situación conocida del cliente y la Operación que quiera realizar</b>
. Para ello, debemos considerar lo siguiente:
</p>
<div class="paper mt-5 anim anim3">
<img src="img/soporte.png" alt="">
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c"><img src="img/42.png" alt=""></div>
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/43.png" alt=""></div>
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#162844"><img src="img/44.png" alt=""></div>
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#63a7bf"><img src="img/45.png" alt=""></div>
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#eb7f3d"><img src="img/46.png" alt=""></div>
<img src="img/soporte.png" alt="" />
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c">
<img src="img/42.png" alt="" />
</div>
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#FF002D">
<img src="img/43.png" alt="" />
</div>
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#162844">
<img src="img/44.png" alt="" />
</div>
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#63a7bf">
<img src="img/45.png" alt="" />
</div>
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#eb7f3d">
<img src="img/46.png" alt="" />
</div>
</div>
</div>
</div>
@@ -59,7 +93,11 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
<b>1. </b>Sus<b> condiciones específicas</b>, entre otras: sus antecedentes, su ocupación, profesión, actividad económica, giro del negocio u objeto social.
<b>1.</b>
Sus
<b>condiciones específicas</b>
, entre otras: sus antecedentes, su ocupación, profesión, actividad económica, giro del negocio u objeto
social.
</p>
</div>
</div>
@@ -71,7 +109,10 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
<b>2. </b>El <b>tipo de riesgo </b>que constituye la base del contrato de seguro del cliente y la forma en que ocurra el riesgo.
<b>2.</b>
El
<b>tipo de riesgo</b>
que constituye la base del contrato de seguro del cliente y la forma en que ocurra el riesgo.
</p>
</div>
</div>
@@ -83,7 +124,9 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
3. La <b>naturaleza o complejidad de las operaciones </b>que realice y la relación de éstas con sus antecedentes y actividad económica conocida.
3. La
<b>naturaleza o complejidad de las operaciones</b>
que realice y la relación de éstas con sus antecedentes y actividad económica conocida.
</p>
</div>
</div>
@@ -95,8 +138,11 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
<b>4. </b>Cuando se presenten <b>indicios o hechos extraordinarios </b>respecto de los cuales no se cuente con una explicación o que den
lugar a cualquier tipo de suspicacia sobre el origen, manejo o destino de los recursos.
<b>4.</b>
Cuando se presenten
<b>indicios o hechos extraordinarios</b>
respecto de los cuales no se cuente con una explicación o que den lugar a cualquier tipo de suspicacia sobre
el origen, manejo o destino de los recursos.
</p>
</div>
</div>
@@ -108,9 +154,14 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
<b>5. </b>Cuando el cliente pretenda <b>involucrar </b>en sus operaciones <b>países o jurisdicciones </b>que: (i) la legislación
mexicana considere que aplican regímenes fiscales preferentes o, (ii) que las autoridades mexicanas, organismos internacionales o
agrupaciones intergubernamentales consideren que no tienen medidas para prevenir el lavado de dinero y el financiamiento al terrorismo.
<b>5.</b>
Cuando el cliente pretenda
<b>involucrar</b>
en sus operaciones
<b>países o jurisdicciones</b>
que: (I) la legislación mexicana considere que aplican regímenes fiscales preferentes o, (III) que las
autoridades mexicanas, organismos internacionales o agrupaciones intergubernamentales consideren que no
tienen medidas para prevenir el lavado de dinero y el financiamiento al terrorismo.
</p>
</div>
</div>
@@ -120,34 +171,32 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_14 = newSound("audio/Audio_14_Marcos.mp3");
Audio_14.on("end", function() {
var Audio_14 = newSound('audio/Audio_14_Marcos.mp3');
Audio_14.on('end', function () {
$('.personaje_m_0').removeClass('play');
var tl = new TimelineMax();
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_pops);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -158,13 +207,13 @@ jQuery(document).ready(function($) {
function fn_pops() {
instruccion(11);
$(".btn-pop").addClass('animated pulse infinite');
$(".btn-pop").click(function(event) {
$('.btn-pop').addClass('animated pulse infinite');
$('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite');
var este = $(this);
var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor");
var backcolor = $(this).data('backcolor');
Swal.fire({
html: html,
showCancelButton: false,
@@ -172,29 +221,28 @@ jQuery(document).ready(function($) {
target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' },
background: backcolor,
width:"100%",
padding: ".5rem .5rem .5rem .5rem",
width: '100%',
padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
if ($(este).data("audio")) {
stopAllSoundsAndPlay(eval($(este).data("audio")));
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
if ($(este).hasClass('visitado')) {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
} else {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
}
},
onRender: function () {},
@@ -202,9 +250,8 @@ jQuery(document).ready(function($) {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end();
} else {
instruccion(11);
}
@@ -218,7 +265,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/21.html
+106 -62
View File
@@ -1,23 +1,66 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
.sec0 { background-image: url(img/fondos/bg7.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.personaje { position: relative; z-index: 2;}
.bubble {
position: relative; width: 100%; height: 112px; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
.sec0 {
background-image: url(img/fondos/bg7.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.personaje {
position: relative;
z-index: 2;
}
.bubble {
position: relative;
width: 100%;
height: 112px;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.btn_ponter {
cursor: pointer;
position: absolute;
}
.buttonss0 {
left: -69px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.buttonss1 {
right: -69px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.carousel-inner {
background-color: #fff;
border-radius: 25px;
}
.carousel-item {
height: 340px;
}
.carousel-style {
border: 6px solid #68abc1;
border-radius: 25px;
}
.carousel-item p {
margin: 0;
}
.carousel-item .rounded {
border-radius: 25px !important;
}
.anim {
opacity: 0;
}
.btn_ponter { cursor: pointer; position: absolute; }
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.carousel-inner { background-color: #fff; border-radius: 25px;}
.carousel-item { height: 340px;}
.carousel-style { border: 6px solid #68ABC1; border-radius:25px;}
.carousel-item p { margin: 0;}
.carousel-item .rounded { border-radius: 25px!important;}
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -32,12 +75,14 @@
<div class="col-7">
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
<p class="m-0 anim anim1">
2. Debemos mantenernos alerta y reportar alguna operación sospechosa cuando los <b>recursos del Cliente</b> presenten alguna de las siguientes condiciones:
2. Debemos mantenernos alerta y reportar alguna operación sospechosa cuando los
<b>recursos del cliente</b>
presenten alguna de las siguientes condiciones:
</p>
<div class="card-body p-0 carousel-style mt-4 anim anim3">
<div class="btn_ponter buttonss0" style="display: none;" href="#carru0" role="button" data-slide="prev">
<img src="img/guia_navegacion/arrow_left.png">
<div class="btn_ponter buttonss0" style="display: none" href="#carru0" role="button" data-slide="prev">
<img src="img/guia_navegacion/arrow_left.png" />
</div>
<div id="carru0" class="carousel slide">
<div class="carousel-inner">
@@ -48,7 +93,8 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 text-left">
<p class="m-0">
Los montos inusualmente elevados de las primas o aportaciones, la frecuencia en las aportaciones adicionales de prima.
Los montos inusualmente elevados de las primas o aportaciones, la frecuencia en las
aportaciones adicionales de prima.
</p>
</div>
</div>
@@ -64,8 +110,9 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<p class="m-0">
Las primas excedentes, aportaciones adicionales, montos o cualquier otro similar a seguros con componentes de ahorro
de inversión, que sumadas sean iguales o excedan el equivalente a USD 7,500 dentro de un mes calendario.
Las primas excedentes, aportaciones adicionales, montos o cualquier otro similar a
seguros con componentes de ahorro de inversión, que sumadas sean iguales o excedan el
equivalente a USD 7,500 dentro de un mes calendario.
</p>
</div>
</div>
@@ -97,9 +144,10 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<p class="m-0">
Los depósitos de prendas recibidos como contra garantías de una persona física como el fiado, el contratante o
sus obligados solidarios, al emitir una fianza y se solicita que a la cancelación de la misma, los recursos se
devuelvan o entreguen a un tercero ajeno a la operación garantizada.
Los depósitos de prendas recibidos como contra garantías de una persona física como el
fiado, el contratante o sus obligados solidarios, al emitir una fianza y se solicita
que a la cancelación de la misma, los recursos se devuelvan o entreguen a un tercero
ajeno a la operación garantizada.
</p>
</div>
</div>
@@ -115,8 +163,9 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<p class="m-0">
Las contra garantías efectuadas en efectivo cuyos depósitos fueron realizados en distintos momentos y por distintas
personas y, en su caso, la devolución se solicita en favor de una tercera persona.
Las contra garantías efectuadas en efectivo cuyos depósitos fueron realizados en
distintos momentos y por distintas personas y, en su caso, la devolución se solicita
en favor de una tercera persona.
</p>
</div>
</div>
@@ -131,9 +180,7 @@
<div class="bg-white rounded w-100 h-100 p-2">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<p class="m-0">
La dación en pago con inmuebles o automóviles.
</p>
<p class="m-0">La dación en pago con inmuebles o automóviles.</p>
</div>
</div>
</div>
@@ -148,12 +195,14 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<p class="m-0">
Las Operaciones realizadas por un mismo Cliente con moneda extranjera, cheques de viajero, cheques de caja o monedas
acuñadas en platino, oro o plata, por montos múltiples o fraccionados que, por cada operación individual superen el
equivalente a USD 500, realizadas en un mismo mes calendario que sumen, al menos, la cantidad de USD 7,500 o su
equivalente en la moneda de que se trate, siempre que las mismas no correspondan al perfil transaccional del Cliente
o que, respecto de aquellas se pueda inferir de su estructuración una posible intención de fraccionar las operaciones
para evitar ser detectadas por las Instituciones.
Las Operaciones realizadas por un mismo cliente con moneda extranjera, cheques de
viajero, cheques de caja o monedas acuñadas en platino, oro o plata, por montos
múltiples o fraccionados que, por cada operación individual superen el equivalente a
USD 500, realizadas en un mismo mes calendario que sumen, al menos, la cantidad de USD
7,500 o su equivalente en la moneda de que se trate, siempre que las mismas no
correspondan al perfil transaccional del cliente o que, respecto de aquellas se pueda
inferir de su estructuración una posible intención de fraccionar las operaciones para
evitar ser detectadas por las Instituciones.
</p>
</div>
</div>
@@ -164,12 +213,11 @@
</div>
</div>
<div class="btn_ponter buttonss1" href="#carru0" role="button" data-slide="next">
<img src="img/guia_navegacion/arrow_right.png">
<img src="img/guia_navegacion/arrow_right.png" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@@ -178,37 +226,35 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_15 = newSound("audio/Audio_15_Marcos.mp3");
var Audio_15 = newSound('audio/Audio_15_Marcos.mp3');
Audio_15.on("end", function() {
Audio_15.on('end', function () {
var tl3 = new TimelineMax();
tl3.fromTo(".anim3",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl3.fromTo('.anim3', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl3.call(fn_slide);
$('.personaje_m_0').removeClass('play');
instruccion(3);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
$(".carousel").carousel({ interval: false });
$('.carousel').carousel({ interval: false });
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -219,31 +265,31 @@ jQuery(document).ready(function($) {
function fn_slide() {
var items = 0;
$(".buttonss0").click(function(event) {
$('.buttonss0').click(function (event) {
__click.play();
items--;
if (items < 1) {
$(".buttonss0").hide();
$(".buttonss1").show();
$('.buttonss0').hide();
$('.buttonss1').show();
} else {
$(".buttonss0").show();
$(".buttonss1").show();
$('.buttonss0').show();
$('.buttonss1').show();
}
});
$(".buttonss1").click(function(event) {
$('.buttonss1').click(function (event) {
__click.play();
items++;
if (items >= 6) {
//$(".buttonss1").removeClass('animated pulse infinite');
$(".buttonss0").show();
$(".buttonss1").hide();
$('.buttonss0').show();
$('.buttonss1').hide();
instruccion(1);
} else {
$(".buttonss0").show();
$(".buttonss1").show();
$('.buttonss0').show();
$('.buttonss1').show();
}
});
}
@@ -251,7 +297,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/22.html
+95 -56
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<style>
@@ -9,19 +9,49 @@
background-position: center;
}
.bubble {
width: 100%; height: auto; background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;
width: 100%;
height: auto;
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5, #f1f1f1, #ededed, #e9e9e9);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.paper {
position: absolute;
bottom: 17px;
z-index: 2;
left: 25%;
}
.btn-pop {
position: absolute;
}
.pop1 {
top: 57%;
left: -17%;
}
.pop2 {
top: 2%;
left: 2%;
}
.pop3 {
top: -29%;
left: 29%;
}
.pop4 {
top: -22%;
left: 62%;
}
.pop5 {
top: 10%;
left: 83%;
}
.pop6 {
top: 53%;
left: 100%;
}
.anim {
opacity: 0;
}
.paper { position: absolute; bottom: 17px; z-index: 2; left: 25%; }
.btn-pop { position: absolute;}
.pop1{ top: 57%; left: -17%; }
.pop2{ top: 2%; left: 2%; }
.pop3{ top: -29%; left: 29%; }
.pop4{ top: -22%; left: 62%; }
.pop5{ top: 10%; left: 83%; }
.pop6{ top: 53%; left: 100%; }
.anim { opacity: 0; }
</style>
</head>
<body>
@@ -33,19 +63,33 @@
<div class="col-9">
<h5 class="title_ py-2 anim anim1"><b>Operaciones inusuales</b></h5>
<p class="m-0 anim anim1">
3. También es importante tomar en cuenta las siguientes <b>actitudes del Cliente</b>:
3. También es importante tomar en cuenta las siguientes
<b>actitudes del cliente</b>
:
</p>
</div>
<div class="col-12 align-self-end">
<div class="personaje_m_9 mx-auto anim anim2"></div>
<div class="paper mt-5 anim anim3">
<img src="img/47.png" alt="">
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#b9230f"><img src="img/48.png" alt=""></div>
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f"><img src="img/49.png" alt=""></div>
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#b9230f"><img src="img/50.png" alt=""></div>
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#b9230f"><img src="img/51.png" alt=""></div>
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#b9230f"><img src="img/53.png" alt=""></div>
<div class="btn-pop pop6" data-popid="#pop5" data-backcolor="#b9230f"><img src="img/52.png" alt=""></div>
<img src="img/47.png" alt="" />
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#FF002D">
<img src="img/48.png" alt="" />
</div>
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#FF002D">
<img src="img/49.png" alt="" />
</div>
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#FF002D">
<img src="img/50.png" alt="" />
</div>
<div class="btn-pop pop4" data-popid="#pop3" data-backcolor="#FF002D">
<img src="img/51.png" alt="" />
</div>
<div class="btn-pop pop5" data-popid="#pop4" data-backcolor="#FF002D">
<img src="img/53.png" alt="" />
</div>
<div class="btn-pop pop6" data-popid="#pop5" data-backcolor="#FF002D">
<img src="img/52.png" alt="" />
</div>
</div>
</div>
</div>
@@ -61,7 +105,8 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
Cuando se niegue a proporcionar los datos o documentos de identificación o cuando se detecte que presenta información que pudiera ser apócrifa o datos que pudieran ser falsos.
Cuando se niegue a proporcionar los datos o documentos de identificación o cuando se detecte que presenta
información que pudiera ser apócrifa o datos que pudieran ser falsos.
</p>
</div>
</div>
@@ -73,7 +118,8 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
Cuando intente sobornar, persuadir o intimidar al personal con el propósito de lograr su cooperación para realizar las actividades que contravengan las Disposiciones.
Cuando intente sobornar, persuadir o intimidar al personal con el propósito de lograr su cooperación para
realizar las actividades que contravengan las Disposiciones.
</p>
</div>
</div>
@@ -85,7 +131,8 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
Cuando cambie inesperadamente de giro o actividad económica, sobre todo migrando a actividades de comercio internacional o de cultivo de la tierra.
Cuando cambie inesperadamente de giro o actividad económica, sobre todo migrando a actividades de comercio
internacional o de cultivo de la tierra.
</p>
</div>
</div>
@@ -108,9 +155,7 @@
<div class="container-fluid py-3">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
La transferencia del beneficio de una póliza a una persona aparentemente no relacionada.
</p>
<p class="m-0">La transferencia del beneficio de una póliza a una persona aparentemente no relacionada.</p>
</div>
</div>
</div>
@@ -121,7 +166,8 @@
<div class="row justify-content-center align-items-center h-100">
<div class="col-11 text-left text-white">
<p class="m-0">
El otorgamiento de garantías respecto de operaciones que sean simuladas e impliquen la transferencia de recursos.
El otorgamiento de garantías respecto de operaciones que sean simuladas e impliquen la transferencia de
recursos.
</p>
</div>
</div>
@@ -131,34 +177,32 @@
<script>
jQuery(document).ready(function ($) {
instruccion(0);
var Audio_16 = newSound("audio/Audio_16_Marcos.mp3");
Audio_16.on("end", function() {
var Audio_16 = newSound('audio/Audio_16_Marcos.mp3');
Audio_16.on('end', function () {
$('.personaje_m_9').removeClass('play');
var tl = new TimelineMax();
tl.fromTo(".anim3",1,{opacity:0, y:-150},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim3', 1, { opacity: 0, y: -150 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_pops);
});
$(".layer-load").show();
$('.layer-load').show();
$('.section_charge').waitForImages({
finished: function () {
$(".section_charge").css("visibility", "visible");
$(".wloader").hide();
$('.section_charge').css('visibility', 'visible');
$('.wloader').hide();
fn_animate();
},
each: function (loaded, count, success) {
var total = Math.floor((loaded * 100) / count);
$(".wloader").show();
$('.wloader').show();
},
waitForAll: true
});
function fn_animate() {
var tl = new TimelineMax();
tl.fromTo(".anim2",1,{opacity:0, x:-150},{opacity:1, x:0, ease:Expo.easeInOut});
tl.fromTo(".anim1",.7,{opacity:0, y:-250},{opacity:1, y:0, ease:Expo.easeInOut});
tl.fromTo('.anim2', 1, { opacity: 0, x: -150 }, { opacity: 1, x: 0, ease: Expo.easeInOut });
tl.fromTo('.anim1', 0.7, { opacity: 0, y: -250 }, { opacity: 1, y: 0, ease: Expo.easeInOut });
tl.call(fn_firstAudio);
}
@@ -169,13 +213,13 @@ jQuery(document).ready(function($) {
function fn_pops() {
instruccion(11);
$(".btn-pop").addClass('animated pulse infinite');
$(".btn-pop").click(function(event) {
$('.btn-pop').addClass('animated pulse infinite');
$('.btn-pop').click(function (event) {
if (!$(this).hasClass('block')) {
$(this).removeClass('animated pulse infinite');
var este = $(this);
var html = $($(this).data('popid'));
var backcolor = $(this).data("backcolor");
var backcolor = $(this).data('backcolor');
Swal.fire({
html: html,
showCancelButton: false,
@@ -183,29 +227,28 @@ jQuery(document).ready(function($) {
target: $('.sco')[0],
customClass: { popup: 'popup-class pop-nota' },
background: backcolor,
width:"100%",
padding: ".5rem .5rem .5rem .5rem",
width: '100%',
padding: '.5rem .5rem .5rem .5rem',
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$(".swal2-popup.popup-class").closest('.swal2-container').css("z-index","998");
if ($(este).data("audio")) {
stopAllSoundsAndPlay(eval($(este).data("audio")));
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
if ($(este).data('audio')) {
stopAllSoundsAndPlay(eval($(este).data('audio')));
} else {
stopAllSoundsAndPlay(__click);
}
if ($(este).hasClass('visitado')) {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
} else {
instruccion(7);
$(".swal2-close").show();
$('.swal2-close').show();
}
},
onRender: function () {},
@@ -213,11 +256,9 @@ jQuery(document).ready(function($) {
$(este).addClass('visitado');
stopAllSoundsAndPlay(__click);
if ($(".btn-pop").length == $(".btn-pop.visitado").length) {
if ($('.btn-pop').length == $('.btn-pop.visitado').length) {
fn_end();
} else {
}
},
onAfterClose: function () {
@@ -231,7 +272,5 @@ jQuery(document).ready(function($) {
function fn_end() {
instruccion(1);
}
});
</script>
contenido/27.html
+2 -2
View File
@@ -63,7 +63,7 @@
<div class="btn-pop pop1" data-popid="#pop0" data-backcolor="#00ab9c">
<img src="img/56.png" alt="" />
</div>
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#b9230f">
<div class="btn-pop pop2" data-popid="#pop1" data-backcolor="#FF002D">
<img src="img/57.png" alt="" />
</div>
<div class="btn-pop pop3" data-popid="#pop2" data-backcolor="#63a7bf">
@@ -219,7 +219,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () {
$('.swal2-popup.popup-class').closest('.swal2-container').css('z-index', '998');
contenido/28.html
+24 -9
View File
@@ -8,7 +8,9 @@
.btn_ { position: absolute; bottom: -11%; left: 72%; }
.card_intro { background-image: linear-gradient(to bottom, #ffffff, #fafaff, #f3f5ff, #ebf0ff, #e1ecff); border: 0; border-top-left-radius:25px; border-top-right-radius: 25px; }
.bg-blanco { background-image: url(img/fondos/bg0.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.bg_actividad { background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b); border-top-right-radius: 25px;}
.bg_actividad { background: #FF002D;
background: linear-gradient(to right, #FF002D 30%, #D90026 70%, #D90026 100%);
border-top-right-radius: 25px;}
.bg-gris { background-image: url(img/actividad/bg_gris.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
.cuadro_gris { position: relative; background-image: url(img/actividad/gris.png); background-repeat: no-repeat; background-size: 100% 100%; margin: 0 auto; }
.opcion { position: relative; padding-top: 10px; cursor: pointer; padding-left: 18px; }
@@ -18,7 +20,7 @@
.opcion.selected:hover { content: ""; position: absolute; background-image: url(img/actividad/2.png); width: 52px; height: 52px; background-repeat: no-repeat; top: 0; left: -60px; }
.sec2.good { background-image: url(img/fondos/bg8.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.sec2.bad { background-image: url(img/fondos/bg9.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.text-rojo-1 { color: #b9230f; font-weight: bold; }
.text-rojo-1 { color: #FF002D; font-weight: bold; }
.swal2-popup.popup-class { height: 100%;}
</style>
</head>
@@ -176,7 +178,7 @@
var preguntas;
var quiz_object = new Object();
quiz_object.preguntaActual = 0;
quiz_object.maxPreguntas = 0;
quiz_object.maxPreguntas = 3;
quiz_object.correctas = 0;
quiz_object.incorrectas = 0;
quiz_object.oportunidades = 2;
@@ -223,17 +225,30 @@
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
preguntas = XLSX.utils.sheet_to_json(worksheet, { raw: false });
//shuffleArray(preguntas);
transformer_options();
quiz_object.preguntas = preguntas;
//console.dir(quiz_object.preguntas);
if (quiz_object.maxPreguntas == 0) { quiz_object.maxPreguntas = quiz_object.preguntas.length; }
quiz_object.preguntas = seleccionarPreguntas(preguntas);
quiz_object.maxPreguntas = 3;
}
oReq.send();
}
function seleccionarPreguntas(pool) {
var grupos = { 'Inusual': [], 'Como una operación Relevante': [], 'Interna preocupante': [] };
$.each(pool, function(i, p) {
var keys = Object.keys(p);
var correctaKey = keys.find(function(k){ return k.toLowerCase().indexOf('correcta') >= 0; });
var val = correctaKey ? p[correctaKey] : '';
if (grupos[val] !== undefined) grupos[val].push(p);
});
var seleccion = [];
$.each(grupos, function(tipo, lista) {
seleccion.push(lista[Math.floor(Math.random() * lista.length)]);
});
return shuffleArray(seleccion);
}
function transformer_options() {
$.each(preguntas, function(index, pregunta) {
var opciones = new Array();
@@ -312,7 +327,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {
},
onOpen: function () {
@@ -349,7 +364,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {
},
onOpen: function () {
contenido/32.html
+6 -7
View File
@@ -29,7 +29,9 @@
background-image: linear-gradient(to right, #60718f, #718aaa, #81a3c6, #91bee1, #a2d9fd);
}
.headtwo {
background-image: linear-gradient(to left, #b9230f, #bf3018, #c53c20, #cb4628, #d15030);
background: #FF002D;
background: linear-gradient(to right, #FF002D 30%, #D90026 70%, #D90026 100%);
}
.anim {
@@ -76,9 +78,7 @@
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
La petición deberá ser realizada únicamente por los funcionarios de las Instituciones hayan
autorizados para tales efectos, mediante escrito en el que deberá especificarse el motivo y la
clase de información que se requiera
La petición deberá ser realizada únicamente por los Funcionarios de las Instituciones que hayan sido autorizados para tales efectos, mediante un escrito en el que se deberá especificar el motivo y la clase de información que se requiera.
</div>
</div>
</div>
@@ -100,8 +100,7 @@
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
De forma previa o simultánea a que una Institución comparta, con otra u otras Instituciones la
información deberá dar aviso de tal circunstancia a la Secretaría.
De forma previa o simultánea a que una Institución comparta con otra u otras Instituciones la información, se deberá dar aviso de tal circunstancia a la Secretaría de Hacienda y Crédito Público (SHCP).
</div>
</div>
</div>
@@ -114,7 +113,7 @@
<p class="m-0">
Por nada, Marcos. Recuerda que también es posible el
<b>intercambio de información</b>
de Operaciones de Clientes entre las
de Operaciones de clientes entre las
<b>Instituciones de Mapfre</b>
, únicamente cuando se tenga como finalidad fortalecer las medidas para prevenir y detectar delitos en
esta materia. Para ello, debemos considerar:
contenido/33.html
+1 -1
View File
@@ -61,7 +61,7 @@
</li>
<li class="my-2 anim anim4">Estas disposiciones entraron en vigencia a partir de 2021.</li>
<li class="my-2 anim anim5">
Existen una serie de conceptos previstos que debes recordar como lo son: Cliente, Beneficiario,
Existe una serie de conceptos previstos que debes recordar como lo son: cliente, Beneficiario,
Grado de Riesgo, entre otros.
</li>
<li class="my-2 anim anim6">
contenido/34.html
+4 -2
View File
@@ -35,7 +35,9 @@
background-position: center;
}
.bg_actividad {
background-image: linear-gradient(to right, #b9230f, #ad210e, #a21e0d, #961c0c, #8b1a0b);
background: #FF002D;
background: linear-gradient(to right, #FF002D 30%, #D90026 70%, #D90026 100%);
border-top-right-radius: 25px;
}
.bg-gris {
@@ -98,7 +100,7 @@
background-position: center;
}
.text-rojo-1 {
color: #b9230f;
color: #FF002D;
font-weight: bold;
}
.txt_final p,
contenido/pop.html
+1 -1
View File
@@ -56,7 +56,7 @@
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
closeButtonHtml: '<div><img src="img/template/close.png"></div>',
closeButtonHtml: '<div><img src="img/template/close.svg" width = "50"></div>',
onBeforeOpen: function () {},
onOpen: function () { instruccion(7); },
onRender: function () {},
css/colors.css
+86 -56
View File
@@ -1,4 +1,3 @@
/*------------------------------------
- COLOR primary
------------------------------------*/
@@ -18,32 +17,34 @@
.badge-primary {
color: #fff;
background-color: #00263A;
background-color: #00263a;
}
.badge-primary[href]:hover, .badge-primary[href]:focus {
.badge-primary[href]:hover,
.badge-primary[href]:focus {
color: #fff;
background-color: #ff0407;
}
.bg-primary {
background-color: #00263A !important;
background-color: #00263a !important;
}
a.bg-primary:hover, a.bg-primary:focus,
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
background-color: #ff0407 !important;
}
.border-primary {
border-color: #00263A !important;
border-color: #00263a !important;
}
.btn-primary {
color: #fff;
background-color: #00263A;
border-color: #00263A;
background-color: #00263a;
border-color: #00263a;
}
.btn-primary:hover {
@@ -52,54 +53,66 @@ button.bg-primary:focus {
border-color: #ff0407;
}
.btn-primary:focus, .btn-primary.focus {
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(0, 38, 58, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #00263A;
border-color: #00263A;
background-color: #00263a;
border-color: #00263a;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #ff0407;
border-color: #000000;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 38, 58, 0.5);
}
.btn-outline-primary {
color: #00263A;
color: #00263a;
background-color: transparent;
border-color: #00263A;
border-color: #00263a;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #00263A;
border-color: #00263A;
background-color: #00263a;
border-color: #00263a;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(0, 38, 58, 0.5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: #00263A;
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: #00263a;
background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #00263A;
border-color: #00263A;
background-color: #00263a;
border-color: #00263a;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 38, 58, 0.5);
}
@@ -108,7 +121,8 @@ button.bg-primary:focus {
background-color: #009ef1;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
color: #000000;
background-color: #008dd8;
}
@@ -135,14 +149,14 @@ button.bg-primary:focus {
}
.text-primary {
color: #00263A !important;
color: #00263a !important;
}
a.text-primary:hover, a.text-primary:focus {
a.text-primary:hover,
a.text-primary:focus {
color: #ff0407 !important;
}
/*------------------------------------
- COLOR secondary
------------------------------------*/
@@ -162,32 +176,34 @@ a.text-primary:hover, a.text-primary:focus {
.badge-secondary {
color: #fff;
background-color: #E1251B;
background-color: #ff002d;
}
.badge-secondary[href]:hover, .badge-secondary[href]:focus {
.badge-secondary[href]:hover,
.badge-secondary[href]:focus {
color: #fff;
background-color: #b31d15;
}
.bg-secondary {
background-color: #E1251B !important;
background-color: #ff002d !important;
}
a.bg-secondary:hover, a.bg-secondary:focus,
a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
background-color: #b31d15 !important;
}
.border-secondary {
border-color: #E1251B !important;
border-color: #ff002d !important;
}
.btn-secondary {
color: #fff;
background-color: #E1251B;
border-color: #E1251B;
background-color: #ff002d;
border-color: #ff002d;
}
.btn-secondary:hover {
@@ -196,54 +212,66 @@ button.bg-secondary:focus {
border-color: #b31d15;
}
.btn-secondary:focus, .btn-secondary.focus {
.btn-secondary:focus,
.btn-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(225, 37, 27, 0.5);
}
.btn-secondary.disabled, .btn-secondary:disabled {
.btn-secondary.disabled,
.btn-secondary:disabled {
color: #fff;
background-color: #E1251B;
border-color: #E1251B;
background-color: #ff002d;
border-color: #ff002d;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
color: #fff;
background-color: #b31d15;
border-color: #a51b13;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus {
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(225, 37, 27, 0.5);
}
.btn-outline-secondary {
color: #E1251B;
color: #ff002d;
background-color: transparent;
border-color: #E1251B;
border-color: #ff002d;
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #E1251B;
border-color: #E1251B;
background-color: #ff002d;
border-color: #ff002d;
}
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(225, 37, 27, 0.5);
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: #E1251B;
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
color: #ff002d;
background-color: transparent;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
color: #fff;
background-color: #E1251B;
border-color: #E1251B;
background-color: #ff002d;
border-color: #ff002d;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(225, 37, 27, 0.5);
}
@@ -252,7 +280,8 @@ button.bg-secondary:focus {
background-color: #f7bfbc;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
color: #73130d;
background-color: #f4a9a5;
}
@@ -279,9 +308,10 @@ button.bg-secondary:focus {
}
.text-secondary {
color: #E1251B !important;
color: #ff002d !important;
}
a.text-secondary:hover, a.text-secondary:focus {
a.text-secondary:hover,
a.text-secondary:focus {
color: #b31d15 !important;
}
css/site.css
+374 -79
View File
@@ -1,89 +1,384 @@
.lds-roller{display:inline-block;position:relative;width:80px;height:80px;}
.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px;}
.lds-roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#ff6406;margin:-4px 0 0 -4px;}
.lds-roller div:nth-child(1){animation-delay:-0.036s;}
.lds-roller div:nth-child(1):after{top:63px;left:63px;}
.lds-roller div:nth-child(2){animation-delay:-0.072s;}
.lds-roller div:nth-child(2):after{top:68px;left:56px;}
.lds-roller div:nth-child(3){animation-delay:-0.108s;}
.lds-roller div:nth-child(3):after{top:71px;left:48px;}
.lds-roller div:nth-child(4){animation-delay:-0.144s;}
.lds-roller div:nth-child(4):after{top:72px;left:40px;}
.lds-roller div:nth-child(5){animation-delay:-0.18s;}
.lds-roller div:nth-child(5):after{top:71px;left:32px;}
.lds-roller div:nth-child(6){animation-delay:-0.216s;}
.lds-roller div:nth-child(6):after{top:68px;left:24px;}
.lds-roller div:nth-child(7){animation-delay:-0.252s;}
.lds-roller div:nth-child(7):after{top:63px;left:17px;}
.lds-roller div:nth-child(8){animation-delay:-0.288s;}
.lds-roller div:nth-child(8):after{top:56px;left:12px;}
.lds-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: ' ';
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff6406;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body,
html{font-size:23px;overflow:hidden;height:100%;width:100%;padding:0;margin:0;background-color:#FFF;font-family:'Muli';line-height:1.3;color: #333;}
.wcontainer{position:absolute;top:0;overflow:hidden;width:1365px;height:768px;}
.wloader{display:-ms-flexbox;display:flex;background-color:rgba(0,0,0,.7);position:absolute;z-index:99;height:100%;width:100%;}
.wmenu{position:absolute;z-index:90;height:100%;width:100%;left:-100%;background-color:#3A4D63;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;display:-ms-flexbox;display:flex;overflow: auto; overflow-x: hidden;}
.wmenu.open{left:0;}
.container,
.container-fluid{width:100%!important;max-width:100%!important;margin:0!important;}
.header{width:100%;height:65px;z-index: 999;}
.soportemenu{background-color:#FFF;height:75px;right:20px;top:0px;border-bottom-left-radius:30px;border-bottom-right-radius:30px;}
.footer{width:100%;height:67px;bottom:0;left:0;background-color:#FFFFFD;z-index: 1001;}
.instruccionsco{height:67px;float:right;background-color:red;display:inline;font-size: 21px;}
.footer .wnavs{height:67px;top:0;left:0;right:0;margin:0 auto;width:273px;background-size:cover;background-position:center center;position:absolute;}
.footer .btn-sound-control-sco{background-color:#91A7BB;width:67px;height:67px;display:table-cell;vertical-align:middle;border-top-right-radius:30px;}
.btn__atras{position:absolute;top:4px;left:13px;}
.__paginacion{position:absolute;top:15px;left:95px;color:#FFF;font-weight:bold;font-size:28px;}
.btn__siguiente{position:absolute;top:4px;left:226px;}
[class*="btn"]{cursor:pointer;}
.wcontainer{font-size:23px;}
.curso-progress{width:50%;position:relative;}
.menu_nombrecurso{font-size:34px;margin-bottom:1em;font-weight:bold;color:#E1251B;}
.itemsmenu{-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;font-size:20px;}
[class*="menu_wtema"],
.btn_menu_tema{padding:5px;padding-left:1em;margin-bottom:.323em;}
.menu_nombremodulo{color:#E1251B;}
[class*="menu_wtema"] div:not(.btn_menu_padre){padding-left:2em;}
[class*="menu_modulo"]{margin-bottom:1em;}
.btn_menu_tema{-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.btn_menu_tema.actual,
.btn_menu_tema:hover{background-color:#000;}
.btn_menu_padre:before{content:'\f146';display:inline-block;font-family:"Font Awesome 5 Pro";padding-right:1em;}
.btn_menu_padre.close_menu_items::before{content:'\f0fe';}
.btn_menu_padre .btn_menu_tema{padding-left:2em;}
.instruccionsco{height:67px;float:right;display:inline;position:absolute;top:0;right:0;padding-left:1em;padding-right:1em;
background-color:#FFF;color:#4F5159;border-top-left-radius:30px;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out; display: table; max-width: 480px;
html {
font-size: 23px;
overflow: hidden;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: #fff;
font-family: 'Muli';
line-height: 1.3;
color: #333;
}
.wcontainer {
position: absolute;
top: 0;
overflow: hidden;
width: 1365px;
height: 768px;
}
.wloader {
display: -ms-flexbox;
display: flex;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
}
.wmenu {
position: absolute;
z-index: 90;
height: 100%;
width: 100%;
left: -100%;
background-color: #3a4d63;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
display: -ms-flexbox;
display: flex;
overflow: auto;
overflow-x: hidden;
}
.wmenu.open {
left: 0;
}
.container,
.container-fluid {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.header {
width: 100%;
height: 65px;
z-index: 999;
}
.soportemenu {
background-color: #fff;
height: 75px;
right: 20px;
top: 0px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.footer {
width: 100%;
height: 67px;
bottom: 0;
left: 0;
background-color: #fffffd;
z-index: 1001;
}
.instruccionsco {
height: 67px;
float: right;
background-color: red;
display: inline;
font-size: 21px;
}
.footer .wnavs {
height: 67px;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 273px;
background-size: cover;
background-position: center center;
position: absolute;
}
.footer .btn-sound-control-sco {
background-color: #91a7bb;
width: 67px;
height: 67px;
display: table-cell;
vertical-align: middle;
border-top-right-radius: 30px;
}
.btn__atras {
position: absolute;
top: 4px;
left: 13px;
}
.__paginacion {
position: absolute;
top: 15px;
left: 95px;
color: #fff;
font-weight: bold;
font-size: 28px;
}
.btn__siguiente {
position: absolute;
top: 4px;
left: 226px;
}
[class*='btn'] {
cursor: pointer;
}
.wcontainer {
font-size: 23px;
}
.curso-progress {
width: 50%;
position: relative;
}
.menu_nombrecurso {
font-size: 34px;
margin-bottom: 1em;
font-weight: bold;
color: #ff002d;
}
.itemsmenu {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
font-size: 20px;
}
[class*='menu_wtema'],
.btn_menu_tema {
padding: 5px;
padding-left: 1em;
margin-bottom: 0.323em;
}
.menu_nombremodulo {
color: #ff002d;
}
[class*='menu_wtema'] div:not(.btn_menu_padre) {
padding-left: 2em;
}
[class*='menu_modulo'] {
margin-bottom: 1em;
}
.btn_menu_tema {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.btn_menu_tema.actual,
.btn_menu_tema:hover {
background-color: #000;
}
.btn_menu_padre:before {
content: '\f146';
display: inline-block;
font-family: 'Font Awesome 5 Pro';
padding-right: 1em;
}
.btn_menu_padre.close_menu_items::before {
content: '\f0fe';
}
.btn_menu_padre .btn_menu_tema {
padding-left: 2em;
}
.instruccionsco {
height: 67px;
float: right;
display: inline;
position: absolute;
top: 0;
right: 0;
padding-left: 1em;
padding-right: 1em;
background-color: #fff;
color: #4f5159;
border-top-left-radius: 30px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
display: table;
max-width: 480px;
}
.instruccionsco p {
display: table-cell;
vertical-align: middle;
}
.subtenma.abierto {
left: 0 !important;
}
div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-right {
display: none;
}
div.subtenma > div.btn-show-subs > i.far.fa-chevron-right {
display: inline;
}
div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-left {
display: inline;
}
div.subtenma > div.btn-show-subs > i.far.fa-chevron-left {
display: none;
}
.subtenma {
position: absolute;
left: 0;
top: 70px;
padding: 0.285em;
background-color: transparent;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
color: #fff;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: 35;
}
.instruccionsco p { display: table-cell; vertical-align: middle; }
.subtenma.abierto{left:0!important;}
div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-right{display:none;}
div.subtenma > div.btn-show-subs > i.far.fa-chevron-right{display:inline;}
div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-left{display:inline;}
div.subtenma > div.btn-show-subs > i.far.fa-chevron-left{display:none;}
.subtenma{position:absolute;left:0;top:70px;padding:.285em;background-color:transparent;border-top-right-radius:15px;border-bottom-right-radius:15px;color:#FFF;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;z-index: 35;}
/*.scofullscreen { height: 100% !important; top:0; }*/
/**************************************************************/
/*.section_charge { height: 636px; }*/
.section_charge p,h1,h2,h3,h4,h5 { line-height: 1.2; }
ul.bullet0 { list-style-image: url(../img/template/bullet_img0.png); }
ul.bullet1 { list-style-image: url(../img/template/bullet_img1.png); }
.wcontainer .swal2-container { height: 100% !important; }
.wcontainer .swal2-content { font-size: 23px; }
.wcontainer .swal2-title { font-size: 32px; }
.section_charge p,
h1,
h2,
h3,
h4,
h5 {
line-height: 1.2;
}
ul.bullet0 {
list-style-image: url(../img/template/bullet_img0.png);
}
ul.bullet1 {
list-style-image: url(../img/template/bullet_img1.png);
}
.wcontainer .swal2-container {
height: 100% !important;
}
.wcontainer .swal2-content {
font-size: 23px;
}
.wcontainer .swal2-title {
font-size: 32px;
}
.title_ { color: #b9230f;}
.title_ {
color: #FF002D;
}
.sco .swal2-container { height: 635px !important; position: absolute; background-color: rgba(22,40,68,.8)!important; overflow: hidden!important; }
.sco .swal2-popup.popup-class .swal2-content { color: #000; font-size: 24px; }
.sco .swal2-popup.pop-nota { border-bottom-left-radius: 121px; border-bottom: 8px solid rgba(255,255,255,.4); border-left: 8px solid rgba(255,255,255,.4); }
.sco .swal2-content { font-size: 24px; }
.sco .swal2-close { position: absolute; width: 55px; height: 59px; font-size: inherit!important; top: 5px; right: 7px; }
.sco .swal2-container {
height: 635px !important;
position: absolute;
background-color: rgba(22, 40, 68, 0.8) !important;
overflow: hidden !important;
}
.sco .swal2-popup.popup-class .swal2-content {
color: #000;
font-size: 24px;
}
.sco .swal2-popup.pop-nota {
border-bottom-left-radius: 121px;
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
border-left: 8px solid rgba(255, 255, 255, 0.4);
}
.sco .swal2-content {
font-size: 24px;
}
.sco .swal2-close {
position: absolute;
width: 55px;
height: 59px;
font-size: inherit !important;
top: 5px;
right: 7px;
}
/********************** Rotate Cards *************************/
.blocknav { opacity: .5; cursor: not-allowed; }
button { outline: none!important; border: 0!important;}
.blocknav {
opacity: 0.5;
cursor: not-allowed;
}
button {
outline: none !important;
border: 0 !important;
}
excel/actividad_2.xlsx
BIN
View File
Binary file not shown.
excel/evaluacion.xlsx
BIN
View File
Binary file not shown.
img/16.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 27 KiB

img/actividad/btn_reintentar.svg
+5 -5
View File
@@ -421,11 +421,11 @@ AABJRU5ErkJggg==" transform="matrix(0.24 0 0 0.24 -3.0658 1.68)">
</g>
<g>
<radialGradient id="SVGID_2_" cx="182.8447" cy="43.6989" r="131.2258" gradientUnits="userSpaceOnUse">
<stop offset="0.4104" style="stop-color:#B9230F"/>
<stop offset="0.5515" style="stop-color:#B5220F"/>
<stop offset="0.7062" style="stop-color:#A8200D"/>
<stop offset="0.8667" style="stop-color:#921B0C"/>
<stop offset="0.907" style="stop-color:#8B1A0B"/>
<stop offset="0.4104" style="stop-color:#FF002D"/>
<stop offset="0.5515" style="stop-color:#FC0731"/>
<stop offset="0.7062" style="stop-color:#F50D35"/>
<stop offset="0.8667" style="stop-color:#ED1238"/>
<stop offset="0.907" style="stop-color:#E81736"/>
</radialGradient>
<polygon class="st1" points="0,11.9 25.8,75.5 339.9,75.5 365.7,11.9 "/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

img/play.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 17 KiB

img/template/btn-comenzar.svg
+5 -5
View File
@@ -53,11 +53,11 @@ KmiD3j6ZAFMMAvVZYG+Hoqjy+k+AAQCORdz91WgxgAAAAABJRU5ErkJggg==" transform="matrix(
</g>
<g>
<radialGradient id="SVGID_1_" cx="112.9636" cy="35.7761" r="82.1181" gradientUnits="userSpaceOnUse">
<stop offset="0.4104" style="stop-color:#B9230F"/>
<stop offset="0.5515" style="stop-color:#B5220F"/>
<stop offset="0.7062" style="stop-color:#A8200D"/>
<stop offset="0.8667" style="stop-color:#921B0C"/>
<stop offset="0.907" style="stop-color:#8B1A0B"/>
<stop offset="0.4104" style="stop-color:#FF002D"/>
<stop offset="0.5515" style="stop-color:#FC0731"/>
<stop offset="0.7062" style="stop-color:#F50D35"/>
<stop offset="0.8667" style="stop-color:#ED1238"/>
<stop offset="0.907" style="stop-color:#E81736"/>
</radialGradient>
<polygon class="st1" points="0,8.8 21.9,62.7 204.1,62.7 225.9,8.8 "/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

img/template/close.svg
+32 -67
View File
@@ -1,5 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60.6 58" style="enable-background:new 0 0 60.6 58;" xml:space="preserve">
<style type="text/css">
@@ -10,110 +9,76 @@
.st4{fill:url(#SVGID_5_);}
.st5{fill:url(#SVGID_6_);}
.st6{fill:url(#SVGID_7_);}
.st7{opacity:0.67;fill:#FFFFFF;}
.st7{opacity:0.25;fill:#000000;}
.st8{fill:#FFFFFF;}
</style>
<g>
<g>
<!-- Fondo base en gradiente radial brillante -->
<radialGradient id="SVGID_1_" cx="30.3158" cy="28.9785" r="28.0928" gradientUnits="userSpaceOnUse">
<stop offset="0.4104" style="stop-color:#B9230F"/>
<stop offset="0.5515" style="stop-color:#B5220F"/>
<stop offset="0.7062" style="stop-color:#A8200D"/>
<stop offset="0.8667" style="stop-color:#921B0C"/>
<stop offset="0.907" style="stop-color:#8B1A0B"/>
<stop offset="0%" style="stop-color:#FF002D"/>
<stop offset="70%" style="stop-color:#D60026"/>
<stop offset="100%" style="stop-color:#99001B"/>
</radialGradient>
<path class="st0" d="M51.1,8.7C73.5,38.6,39.9,72.2,10,49.8c-0.2-0.1-0.4-0.3-0.5-0.5C-12.9,19.4,20.7-14.2,50.6,8.2
C50.8,8.3,51,8.5,51.1,8.7z"/>
<!-- Borde exterior metálico/brillante -->
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.5962" y1="10.0239" x2="10.4722" y2="49.1479">
<stop offset="0" style="stop-color:#F4F4F4"/>
<stop offset="0.2038" style="stop-color:#010101"/>
<stop offset="0.2418" style="stop-color:#050505"/>
<stop offset="0.2785" style="stop-color:#101010"/>
<stop offset="0.3147" style="stop-color:#242424"/>
<stop offset="0.3505" style="stop-color:#3F3F3F"/>
<stop offset="0.3862" style="stop-color:#636363"/>
<stop offset="0.4217" style="stop-color:#8E8E8E"/>
<stop offset="0.4564" style="stop-color:#C0C0C0"/>
<stop offset="0.4878" style="stop-color:#F4F4F4"/>
<stop offset="0.5934" style="stop-color:#F4F4F4"/>
<stop offset="0.8428" style="stop-color:#010101"/>
<stop offset="0.8462" style="stop-color:#070707"/>
<stop offset="0.9233" style="stop-color:#858585"/>
<stop offset="0.976" style="stop-color:#D5D5D5"/>
<stop offset="1" style="stop-color:#F4F4F4"/>
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8"/>
<stop offset="50%" style="stop-color:#FF8096;stop-opacity:0.3"/>
<stop offset="100%" style="stop-color:#700013"/>
</linearGradient>
<path class="st1" d="M30.3,1.3c21.6,0,37.5,24.9,20.4,47.6c-0.1,0.2-0.3,0.4-0.5,0.5C27.6,66.5,2.7,50.6,2.7,29
C2.7,13.7,15.1,1.3,30.3,1.3 M30.3,0.9c-22,0-38.1,25.3-20.8,48.4c0.1,0.2,0.3,0.4,0.5,0.5C33.1,67.1,58.4,51,58.4,29
C58.4,13.5,45.8,0.9,30.3,0.9L30.3,0.9z"/>
<!-- Sombra curva inferior para dar volumen 3D -->
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="30.3158" y1="36.0307" x2="30.3158" y2="55.3699">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1613" style="stop-color:#040100"/>
<stop offset="0.3081" style="stop-color:#0F0301"/>
<stop offset="0.4512" style="stop-color:#220703"/>
<stop offset="0.5919" style="stop-color:#3D0C05"/>
<stop offset="0.731" style="stop-color:#5F1208"/>
<stop offset="0.8668" style="stop-color:#891A0B"/>
<stop offset="1" style="stop-color:#B9230F"/>
<stop offset="0%" style="stop-color:#660012;stop-opacity:0.9"/>
<stop offset="100%" style="stop-color:#FF002D;stop-opacity:0"/>
</linearGradient>
<path class="st2" d="M30.3,35.4c-8.7,0-16.7-1.9-23.2-5c-1.7-0.8-3.7,0.6-3.5,2.6c1.9,13,13.2,23,26.7,23c13.5,0,24.7-10,26.7-23
c0.3-1.9-1.7-3.4-3.5-2.6C47,33.6,39,35.4,30.3,35.4z"/>
<!-- Reflejo superior (Efecto de luz de domo) -->
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="30.3158" y1="26.2772" x2="30.3158" y2="2.6145">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0.55"/>
</linearGradient>
<ellipse class="st3" cx="30.3" cy="14.4" rx="18" ry="11.8"/>
<!-- Detalle de reflejo secundario -->
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="373.4684" y1="-230.3132" x2="373.4684" y2="-251.4401" gradientTransform="matrix(0.9767 0.2148 -0.2148 0.9767 -381.36 170.9048)">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1496" style="stop-color:#040303"/>
<stop offset="0.2856" style="stop-color:#0F0B0B"/>
<stop offset="0.418" style="stop-color:#221918"/>
<stop offset="0.5483" style="stop-color:#3D2D2A"/>
<stop offset="0.6771" style="stop-color:#5F4642"/>
<stop offset="0.8047" style="stop-color:#896660"/>
<stop offset="0.9291" style="stop-color:#BB8A82"/>
<stop offset="1" style="stop-color:#DAA198"/>
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
</linearGradient>
<path class="st4" d="M45.4,12.8c-0.7,3.3-5.4,5.1-10.5,4c-5.1-1.1-8.6-4.7-7.8-8c0.7-3.3,5.4-5.1,10.5-4
C42.6,5.9,46.1,9.5,45.4,12.8z"/>
<!-- Punto brillante pequeño -->
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="46.3581" y1="14.1362" x2="50.8542" y2="14.1362">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0.7"/>
</linearGradient>
<path class="st5" d="M50.8,13.7c0.3,1.6-1.1,2.9-2.6,2.6c-0.9-0.2-1.6-0.9-1.8-1.8c-0.3-1.6,1.1-2.9,2.6-2.6
C49.9,12.1,50.6,12.8,50.8,13.7z"/>
<!-- Destello del borde izquierdo -->
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-3090.0295" y1="-1372.3347" x2="-3061.9097" y2="-1372.3347" gradientTransform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -1183.3497 -3125.4829)">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
</linearGradient>
<path class="st6" d="M11.3,47c0.5,0.5,0.9,0.9,1.4,1.3C3.9,38,4.3,22.5,14.1,12.7c9.8-9.8,25.3-10.2,35.6-1.3
c-0.4-0.5-0.8-1-1.3-1.4C38.2-0.3,21.6-0.3,11.3,10S1.1,36.8,11.3,47z"/>
</g>
<!-- Sombra proyectada detrás de la "X" -->
<path class="st7" d="M17.7,24.2l3.3,3.3c1,1,1,2.5,0,3.5l-3.3,3.3c-1,1-1,2.5,0,3.5l4.2,4.2c1,1,2.5,1,3.5,0l3.3-3.3
c1-1,2.5-1,3.5,0l3.3,3.3c1,1,2.5,1,3.5,0l4.2-4.2c1-1,1-2.5,0-3.5L39.8,31c-1-1-1-2.5,0-3.5l3.3-3.3c1-1,1-2.5,0-3.5l-4.2-4.2
c-1-1-2.5-1-3.5,0l-3.3,3.3c-1,1-2.5,1-3.5,0l-3.3-3.3c-1-1-2.5-1-3.5,0l-4.2,4.2C16.7,21.7,16.7,23.2,17.7,24.2z"/>
<!-- Icono blanco principal -->
<path class="st8" d="M19.1,24.8l2.7,2.7c1,1,1,2.5,0,3.5l-2.7,2.7c-1,1-1,2.5,0,3.5l3.5,3.5c1,1,2.5,1,3.5,0l2.7-2.7
c1-1,2.5-1,3.5,0l2.7,2.7c1,1,2.5,1,3.5,0l3.5-3.5c1-1,1-2.5,0-3.5L39.1,31c-1-1-1-2.5,0-3.5l2.7-2.7c1-1,1-2.5,0-3.5l-3.5-3.5
c-1-1-2.5-1-3.5,0l-2.7,2.7c-1,1-2.5,1-3.5,0L26,17.9c-1-1-2.5-1-3.5,0l-3.5,3.5C18.1,22.3,18.1,23.9,19.1,24.8z"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

img/template/close.svg.back
+121
View File
@@ -0,0 +1,121 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60.6 58" style="enable-background:new 0 0 60.6 58;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:url(#SVGID_6_);}
.st6{fill:url(#SVGID_7_);}
.st7{opacity:0.67;fill:#FFFFFF;}
.st8{fill:#FFFFFF;}
</style>
<g>
<g>
<radialGradient id="SVGID_1_" cx="30.3158" cy="28.9785" r="28.0928" gradientUnits="userSpaceOnUse">
<stop offset="0.4104" style="stop-color:#B9230F"/>
<stop offset="0.5515" style="stop-color:#B5220F"/>
<stop offset="0.7062" style="stop-color:#A8200D"/>
<stop offset="0.8667" style="stop-color:#921B0C"/>
<stop offset="0.907" style="stop-color:#8B1A0B"/>
</radialGradient>
<path class="st0" d="M51.1,8.7C73.5,38.6,39.9,72.2,10,49.8c-0.2-0.1-0.4-0.3-0.5-0.5C-12.9,19.4,20.7-14.2,50.6,8.2
C50.8,8.3,51,8.5,51.1,8.7z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.5962" y1="10.0239" x2="10.4722" y2="49.1479">
<stop offset="0" style="stop-color:#F4F4F4"/>
<stop offset="0.2038" style="stop-color:#010101"/>
<stop offset="0.2418" style="stop-color:#050505"/>
<stop offset="0.2785" style="stop-color:#101010"/>
<stop offset="0.3147" style="stop-color:#242424"/>
<stop offset="0.3505" style="stop-color:#3F3F3F"/>
<stop offset="0.3862" style="stop-color:#636363"/>
<stop offset="0.4217" style="stop-color:#8E8E8E"/>
<stop offset="0.4564" style="stop-color:#C0C0C0"/>
<stop offset="0.4878" style="stop-color:#F4F4F4"/>
<stop offset="0.5934" style="stop-color:#F4F4F4"/>
<stop offset="0.8428" style="stop-color:#010101"/>
<stop offset="0.8462" style="stop-color:#070707"/>
<stop offset="0.9233" style="stop-color:#858585"/>
<stop offset="0.976" style="stop-color:#D5D5D5"/>
<stop offset="1" style="stop-color:#F4F4F4"/>
</linearGradient>
<path class="st1" d="M30.3,1.3c21.6,0,37.5,24.9,20.4,47.6c-0.1,0.2-0.3,0.4-0.5,0.5C27.6,66.5,2.7,50.6,2.7,29
C2.7,13.7,15.1,1.3,30.3,1.3 M30.3,0.9c-22,0-38.1,25.3-20.8,48.4c0.1,0.2,0.3,0.4,0.5,0.5C33.1,67.1,58.4,51,58.4,29
C58.4,13.5,45.8,0.9,30.3,0.9L30.3,0.9z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="30.3158" y1="36.0307" x2="30.3158" y2="55.3699">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1613" style="stop-color:#040100"/>
<stop offset="0.3081" style="stop-color:#0F0301"/>
<stop offset="0.4512" style="stop-color:#220703"/>
<stop offset="0.5919" style="stop-color:#3D0C05"/>
<stop offset="0.731" style="stop-color:#5F1208"/>
<stop offset="0.8668" style="stop-color:#891A0B"/>
<stop offset="1" style="stop-color:#B9230F"/>
</linearGradient>
<path class="st2" d="M30.3,35.4c-8.7,0-16.7-1.9-23.2-5c-1.7-0.8-3.7,0.6-3.5,2.6c1.9,13,13.2,23,26.7,23c13.5,0,24.7-10,26.7-23
c0.3-1.9-1.7-3.4-3.5-2.6C47,33.6,39,35.4,30.3,35.4z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="30.3158" y1="26.2772" x2="30.3158" y2="2.6145">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
</linearGradient>
<ellipse class="st3" cx="30.3" cy="14.4" rx="18" ry="11.8"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="373.4684" y1="-230.3132" x2="373.4684" y2="-251.4401" gradientTransform="matrix(0.9767 0.2148 -0.2148 0.9767 -381.36 170.9048)">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1496" style="stop-color:#040303"/>
<stop offset="0.2856" style="stop-color:#0F0B0B"/>
<stop offset="0.418" style="stop-color:#221918"/>
<stop offset="0.5483" style="stop-color:#3D2D2A"/>
<stop offset="0.6771" style="stop-color:#5F4642"/>
<stop offset="0.8047" style="stop-color:#896660"/>
<stop offset="0.9291" style="stop-color:#BB8A82"/>
<stop offset="1" style="stop-color:#DAA198"/>
</linearGradient>
<path class="st4" d="M45.4,12.8c-0.7,3.3-5.4,5.1-10.5,4c-5.1-1.1-8.6-4.7-7.8-8c0.7-3.3,5.4-5.1,10.5-4
C42.6,5.9,46.1,9.5,45.4,12.8z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="46.3581" y1="14.1362" x2="50.8542" y2="14.1362">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
</linearGradient>
<path class="st5" d="M50.8,13.7c0.3,1.6-1.1,2.9-2.6,2.6c-0.9-0.2-1.6-0.9-1.8-1.8c-0.3-1.6,1.1-2.9,2.6-2.6
C49.9,12.1,50.6,12.8,50.8,13.7z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-3090.0295" y1="-1372.3347" x2="-3061.9097" y2="-1372.3347" gradientTransform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -1183.3497 -3125.4829)">
<stop offset="4.975120e-03" style="stop-color:#000000"/>
<stop offset="0.1469" style="stop-color:#040303"/>
<stop offset="0.2802" style="stop-color:#0F0B0B"/>
<stop offset="0.4101" style="stop-color:#221918"/>
<stop offset="0.538" style="stop-color:#3D2D2B"/>
<stop offset="0.6643" style="stop-color:#5F4643"/>
<stop offset="0.7895" style="stop-color:#8A6560"/>
<stop offset="0.9115" style="stop-color:#BB8983"/>
<stop offset="1" style="stop-color:#E3A79F"/>
</linearGradient>
<path class="st6" d="M11.3,47c0.5,0.5,0.9,0.9,1.4,1.3C3.9,38,4.3,22.5,14.1,12.7c9.8-9.8,25.3-10.2,35.6-1.3
c-0.4-0.5-0.8-1-1.3-1.4C38.2-0.3,21.6-0.3,11.3,10S1.1,36.8,11.3,47z"/>
</g>
<path class="st7" d="M17.7,24.2l3.3,3.3c1,1,1,2.5,0,3.5l-3.3,3.3c-1,1-1,2.5,0,3.5l4.2,4.2c1,1,2.5,1,3.5,0l3.3-3.3
c1-1,2.5-1,3.5,0l3.3,3.3c1,1,2.5,1,3.5,0l4.2-4.2c1-1,1-2.5,0-3.5L39.8,31c-1-1-1-2.5,0-3.5l3.3-3.3c1-1,1-2.5,0-3.5l-4.2-4.2
c-1-1-2.5-1-3.5,0l-3.3,3.3c-1,1-2.5,1-3.5,0l-3.3-3.3c-1-1-2.5-1-3.5,0l-4.2,4.2C16.7,21.7,16.7,23.2,17.7,24.2z"/>
<path class="st8" d="M19.1,24.8l2.7,2.7c1,1,1,2.5,0,3.5l-2.7,2.7c-1,1-1,2.5,0,3.5l3.5,3.5c1,1,2.5,1,3.5,0l2.7-2.7
c1-1,2.5-1,3.5,0l2.7,2.7c1,1,2.5,1,3.5,0l3.5-3.5c1-1,1-2.5,0-3.5L39.1,31c-1-1-1-2.5,0-3.5l2.7-2.7c1-1,1-2.5,0-3.5l-3.5-3.5
c-1-1-2.5-1-3.5,0l-2.7,2.7c-1,1-2.5,1-3.5,0L26,17.9c-1-1-2.5-1-3.5,0l-3.5,3.5C18.1,22.3,18.1,23.9,19.1,24.8z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

img/template/logo.svg
+1 -1
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

index.html
+1 -1
View File
@@ -48,7 +48,7 @@
left: 0;
top: 80px;
padding: 0.325em;
background-color: #a60000;
background-color: #ff002d;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
color: #fff;