.lcf-kicker {
display: inline-block;
margin: 0 0 8px !important;
padding: 3px 11px !important;
border-radius: 20px;
background: var(--lcf-acento, #d40000);
color: var(--lcf-acento-texto, #fff);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.5;
text-transform: uppercase;
}
.lcf-intro-col h2 {
margin-bottom: 8px;
padding-bottom: 0;
color: #000;
font-size: 28px;
line-height: 1.2;
} .lcf-intro-col h3,
.lcf .lcf-titulo {
margin: 0 0 8px !important;
padding: 0 !important;
color: #000 !important;
font-family: K2D, Helvetica, Arial, sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
.lcf .lcf-titulo {
margin-bottom: 2px !important;
}
.lcf-intro-col .lcf-intro {
margin-bottom: 12px;
padding-bottom: 0;
color: #444;
font-size: 16px;
line-height: 1.55;
}
.lcf-puntos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin: 0 0 16px;
}
.lcf-punto {
position: relative;
padding-left: 34px;
}
.lcf-punto::before {
content: "✓";
position: absolute;
top: 1px;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #000;
color: var(--lcf-acento, #d40000);
font-weight: 700;
font-size: 13px;
line-height: 24px;
text-align: center;
}
.lcf-punto h3 {
margin: 0 0 2px;
padding: 0;
color: #000;
font-size: 16.5px;
line-height: 1.3;
}
.lcf-punto p {
margin: 0;
padding: 0;
color: #555;
font-size: 14px;
line-height: 1.45;
}
.lcf-alt {
margin: 0;
padding: 0 !important;
color: #444;
font-size: 14.5px;
}
.lcf-alt a {
color: #000;
font-weight: 700;
text-decoration: underline;
} .lcf {
position: relative;
box-sizing: border-box;
padding: 20px 22px 16px;
border-top: 4px solid var(--lcf-acento, #d40000);
border-radius: 10px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
color: #333;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
.lcf *,
.lcf *::before,
.lcf *::after {
box-sizing: border-box;
}
.lcf [hidden] {
display: none !important;
}
.lcf .lcf-titulo {
margin: 0 0 2px;
padding: 0;
color: #000;
font-family: K2D, Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.25;
}
.lcf .lcf-sub {
margin: 0 0 12px;
padding: 0;
color: #666;
font-size: 14px;
line-height: 1.4;
}
.lcf-filas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
margin: 0 0 12px;
}
.lcf-campo {
min-width: 0;
margin: 0;
}
.lcf-campo label {
display: block;
margin: 0 0 3px;
color: #222;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.lcf .lcf-req {
color: #d40000;
}
.lcf .lcf-opt {
color: #888;
font-weight: 400;
}
.lcf .lcf-campo input,
.lcf .lcf-campo select,
.lcf .lcf-campo textarea {
display: block;
width: 100%;
height: 40px;
margin: 0;
padding: 8px 11px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: #fafafa;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; line-height: 1.4;
box-shadow: none;
transition: border-color .15s, box-shadow .15s, background .15s, height .15s;
} .lcf-campo.lcf-ancho {
grid-column: 1 / -1;
} .lcf .lcf-campo textarea {
height: auto;
min-height: 78px;
max-height: 320px;
overflow: auto;
resize: vertical;
} .lcf .lcf-campo select {
padding-right: 34px;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
.lcf .lcf-campo input:focus,
.lcf .lcf-campo select:focus,
.lcf .lcf-campo textarea:focus {
outline: none;
border-color: #000;
background: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lcf-acento, #d40000) 45%, transparent);
}
.lcf [aria-invalid="true"] {
border-color: #d40000 !important;
background: #fff6f6 !important;
}
.lcf-error {
display: block;
margin-top: 3px;
color: #c00000;
font-size: 12.5px;
line-height: 1.3;
}
.lcf-check {
display: grid;
grid-template-columns: 18px 1fr;
gap: 8px;
align-items: start;
margin: 0 0 6px;
font-size: 13px;
line-height: 1.4;
}
.lcf-check input {
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: #000;
}
.lcf-check label {
color: #444;
}
.lcf-check a {
color: #000;
text-decoration: underline;
}
.lcf-check .lcf-error {
grid-column: 2;
margin-top: 0;
}
.lcf .lcf-btn {
display: block;
width: 100%;
margin: 12px 0 0;
padding: 11px 18px;
border: 0;
border-radius: 7px;
background: linear-gradient(130deg, var(--lcf-acento) 0%, var(--lcf-acento-2) 52%, var(--lcf-acento) 100%);
color: var(--lcf-acento-texto, #fff);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform .15s, box-shadow .15s, filter .15s;
}
.lcf .lcf-btn:hover {
filter: brightness(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
transform: translateY(-1px);
}
.lcf .lcf-btn:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
.lcf .lcf-btn[disabled] {
opacity: .7;
cursor: wait;
transform: none;
}
.lcf .lcf-estado {
margin: 8px 0 0;
padding: 0;
color: #c00000;
font-size: 13.5px;
font-weight: 700;
line-height: 1.4;
}
.lcf .lcf-estado.lcf-espera {
color: #555;
font-weight: 400;
}
.lcf .lcf-estado:empty {
display: none;
}
.lcf .lcf-legal {
margin: 8px 0 0;
padding: 0;
color: #8a8a8a;
font-size: 11px;
line-height: 1.4;
} .lcf-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
} .lcf-ok {
padding: 6px 0;
text-align: center;
outline: none;
}
.lcf-ok-icono {
width: 54px;
height: 54px;
margin: 0 auto 10px;
border-radius: 50%;
background: #000;
color: var(--lcf-acento, #d40000);
font-size: 28px;
font-weight: 700;
line-height: 54px;
animation: lcf-pop .35s ease-out;
}
.lcf-ok p {
margin: 0 0 10px;
padding: 0;
font-size: 15px;
line-height: 1.55;
}
.lcf-ok a {
color: #000;
font-weight: 700;
text-decoration: underline;
}
@keyframes lcf-pop {
from { transform: scale(.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
} .lcf-amp {
padding: 16px;
box-shadow: none;
}
@media (max-width: 980px) {
.lcf-intro-col h2 {
font-size: 24px;
}
}
@media (max-width: 600px) {
.lcf {
padding: 18px 16px 14px;
}
.lcf-intro-col h3,
.lcf .lcf-titulo {
font-size: 21px !important;
}
.lcf-filas,
.lcf-puntos {
grid-template-columns: 1fr;
}
.lcf-puntos {
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.lcf .lcf-btn,
.lcf-ok-icono,
.lcf .lcf-campo textarea {
transition: none;
animation: none;
}
} .lcfa {
margin: 4px 0 14px;
line-height: 0;
}
.lcfa svg {
display: block;
width: 100%;
max-width: 640px;
height: auto;
overflow: visible;
} .lcfa svg [class^="lcfa-"],
.lcfa svg [class*=" lcfa-"] {
transform-box: fill-box;
}
.lcfa svg * {
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
.lcfa.lcfa-pausa svg * {
animation-play-state: paused;
}
.lcfa-cursor      { transform-origin: 0 0; animation-name: lcfa-cursor; }
.lcfa-boton       { transform-origin: center; animation-name: lcfa-boton; }
.lcfa-btn-txt     { animation-name: lcfa-btn-txt; }
.lcfa-btn-ok      { animation-name: lcfa-btn-ok; }
.lcfa-onda-clic   { transform-origin: center; animation-name: lcfa-onda-clic; }
.lcfa-trazo-m     { stroke-dasharray: 100; animation-name: lcfa-trazo-m; }
.lcfa-trazo       { animation-name: lcfa-trazo; }
.lcfa-avion       { transform-box: view-box; transform-origin: 0 0; animation-name: lcfa-avion; animation-timing-function: linear; }
.lcfa-aviso       { transform-origin: center; animation-name: lcfa-aviso; } .lcfa svg .lcfa-hombro,
.lcfa svg .lcfa-codo,
.lcfa svg .lcfa-hombro-c,
.lcfa svg .lcfa-codo-c {
transform-box: view-box;
transform-origin: 0 0;
animation-timing-function: cubic-bezier(.45, 0, .25, 1);
}
.lcfa-hombro      { animation-name: lcfa-hombro; }
.lcfa-codo        { animation-name: lcfa-codo; }
.lcfa-movil-mesa  { animation-name: lcfa-movil-mesa; animation-timing-function: steps(1, end); }
.lcfa-movil-mano  { animation-name: lcfa-movil-mano; animation-timing-function: steps(1, end); }
.lcfa-ondas-d     { animation-name: lcfa-ondas; } .lcfa-hombro-c    { animation-name: lcfa-hombro-c; }
.lcfa-codo-c      { animation-name: lcfa-codo-c; }
.lcfa-ondas-c     { animation-name: lcfa-ondas-c; }
.lcfa-movil-c     { animation-name: lcfa-movil-c; }
.lcfa-movil-c rect { animation-name: lcfa-movil-mesa-c; } .lcfa-mano-c      { animation-name: lcfa-movil-mesa-c; } .lcfa svg .lcfa-movil-mesa,
.lcfa svg .lcfa-movil-mano,
.lcfa svg .lcfa-movil-mano-c,
.lcfa svg .lcfa-movil-c rect,
.lcfa svg .lcfa-mano-c { animation-timing-function: steps(1, end); }
.lcfa-movil-mano-c { animation-name: lcfa-movil-mano-c; animation-timing-function: steps(1, end); }
.lcfa-bocadillo-d { transform-origin: 85% 100%; animation-name: lcfa-bocadillo-d; }
.lcfa-bocadillo-c { transform-origin: 30% 100%; animation-name: lcfa-bocadillo-c; }
@keyframes lcfa-cursor {
0%   { opacity: 0; transform: translate(28px, 26px); }
5%   { opacity: 1; transform: translate(28px, 26px); }
15%  { opacity: 1; transform: translate(0, 0) scale(1); }
17%  { transform: translate(0, 0) scale(.82); }
19%  { opacity: 1; transform: translate(0, 0) scale(1); }
25%  { opacity: 0; transform: translate(6px, 8px); }
100% { opacity: 0; transform: translate(28px, 26px); }
}
@keyframes lcfa-boton {
0%, 16%, 20%, 100% { transform: scale(1); }
18%  { transform: scale(.93); }
}
@keyframes lcfa-btn-txt {
0%, 19%  { opacity: 1; }
20%, 94% { opacity: 0; }
97%, 100% { opacity: 1; }
}
@keyframes lcfa-btn-ok {
0%, 19%  { opacity: 0; }
20%, 94% { opacity: 1; }
97%, 100% { opacity: 0; }
}
@keyframes lcfa-onda-clic {
0%, 17% { opacity: 0; transform: scale(.5); }
18%  { opacity: .8; transform: scale(1); }
27%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes lcfa-trazo-m {
0%, 21%  { stroke-dashoffset: 100; }
39%, 100% { stroke-dashoffset: 0; }
}
@keyframes lcfa-trazo {
0%, 20%  { opacity: 0; }
22%, 88% { opacity: 1; }
93%, 100% { opacity: 0; }
}
@keyframes lcfa-avion {
0%, 21% { opacity: 0; transform: translate(237px, 81px) rotate(-49deg); }
22%  { opacity: 1; transform: translate(237px, 81px) rotate(-49deg); }
30%  { opacity: 1; transform: translate(300px, 44px) rotate(7deg); }
38%  { opacity: 1; transform: translate(369px, 74px) rotate(42deg); }
41%, 100% { opacity: 0; transform: translate(383px, 87px) rotate(46deg); }
}
@keyframes lcfa-aviso {
0%, 40%  { opacity: 0; transform: scale(0); }
44%  { opacity: 1; transform: scale(1.08); }
46%, 92% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(0); }
} @keyframes lcfa-hombro {
0%, 44%  { transform: rotate(0deg); }
50%, 52% { transform: rotate(43.5deg); }
60%, 90% { transform: rotate(1.4deg); }
95%      { transform: rotate(43.5deg); }
100%     { transform: rotate(0deg); }
}
@keyframes lcfa-codo {
0%, 44%  { transform: rotate(0deg); }
50%, 52% { transform: rotate(-52.1deg); }
60%, 90% { transform: rotate(-132.4deg); }
95%      { transform: rotate(-52.1deg); }
100%     { transform: rotate(0deg); }
}
@keyframes lcfa-movil-mesa {
0%    { opacity: 1; }
51%   { opacity: 0; }
95%   { opacity: 1; }
100%  { opacity: 1; }
}
@keyframes lcfa-movil-mano {
0%    { opacity: 0; }
51%   { opacity: 1; }
95%   { opacity: 0; }
100%  { opacity: 0; }
}
@keyframes lcfa-ondas {
0%, 59% { opacity: 0; }
62% { opacity: 1; }
65% { opacity: .2; }
68% { opacity: 1; }
71% { opacity: .2; }
74% { opacity: 1; }
78%, 100% { opacity: 0; }
} @keyframes lcfa-movil-c {
0%, 52%, 61%, 100% { transform: translate(0, 0); }
53%, 55%, 57%, 59% { transform: translate(-1px, 0); }
54%, 56%, 58%, 60% { transform: translate(1px, 0); }
}
@keyframes lcfa-ondas-c {
0%, 52% { opacity: 0; }
53% { opacity: 1; }
55% { opacity: .2; }
57% { opacity: 1; }
59% { opacity: .2; }
60.5% { opacity: 1; }
62%, 100% { opacity: 0; }
}
@keyframes lcfa-hombro-c {
0%, 58%  { transform: rotate(0deg); }
62%, 63% { transform: rotate(42.5deg); }
65.5%    { transform: rotate(52.2deg); }
69%, 90% { transform: rotate(-38.7deg); }
92.5%    { transform: rotate(52.2deg); }
94.5%    { transform: rotate(42.5deg); }
98%, 100% { transform: rotate(0deg); }
}
@keyframes lcfa-codo-c {
0%, 58%  { transform: rotate(0deg); }
62%, 63% { transform: rotate(-48.2deg); }
65.5%    { transform: rotate(-87.2deg); }
69%, 90% { transform: rotate(-100.0deg); }
92.5%    { transform: rotate(-87.2deg); }
94.5%    { transform: rotate(-48.2deg); }
98%, 100% { transform: rotate(0deg); }
}
@keyframes lcfa-movil-mesa-c {
0%     { opacity: 1; }
62.5%  { opacity: 0; }
94.5%  { opacity: 1; }
100%   { opacity: 1; }
}
@keyframes lcfa-movil-mano-c {
0%     { opacity: 0; }
62.5%  { opacity: 1; }
94.5%  { opacity: 0; }
100%   { opacity: 0; }
}
@keyframes lcfa-bocadillo-d {
0%, 69%  { opacity: 0; transform: scale(.3); }
73%  { opacity: 1; transform: scale(1.06); }
75%, 92% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lcfa-bocadillo-c {
0%, 77%  { opacity: 0; transform: scale(.3); }
81%  { opacity: 1; transform: scale(1.06); }
83%, 92% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(.3); }
} @media (prefers-reduced-motion: reduce) {
.lcfa svg * { animation: none !important; }
.lcfa-cursor, .lcfa-onda-clic, .lcfa-avion, .lcfa-btn-txt, .lcfa-movil-mesa, .lcfa-movil-c, .lcfa-mano-c, .lcfa-ondas-c { opacity: 0; }
.lcfa-btn-ok, .lcfa-trazo, .lcfa-aviso, .lcfa-movil-mano, .lcfa-movil-mano-c, .lcfa-ondas-d, .lcfa-bocadillo-d, .lcfa-bocadillo-c { opacity: 1; }
.lcfa-trazo-m { stroke-dashoffset: 0; }
.lcfa svg .lcfa-hombro { transform: rotate(1.4deg); }
.lcfa svg .lcfa-codo { transform: rotate(-132.4deg); }
.lcfa svg .lcfa-hombro-c { transform: rotate(-38.7deg); }
.lcfa svg .lcfa-codo-c { transform: rotate(-100.0deg); }
}