@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fuentes/jost.woff2') format('woff2');
}
body.piel {
--noche: #12100f;
--noche-suave: #1d1a18;
--marfil: #faf7f3;
--marfil-hondo: #f1eae2;
--linea: #e3dad0;
--linea-noche: #332e2a;
--tinta: #16130f;
--gris: #5c554d;
--gris-noche: #b3a99e;
--oro: #b08d57;
--oro-texto: #7c5e2e;
--oro-suave: #f0e6d6;
margin: 0;
background: var(--marfil);
color: var(--tinta);
font-family: Jost, system-ui, sans-serif;
overflow-x: hidden;
}
body.piel .piel-dentro {
width: 100%;
max-width: 1060px;
margin-inline: auto;
padding-inline: 20px;
}
body.piel .saltar {
position: absolute;
left: -9999px;
top: 0;
z-index: 10;
padding: 12px 20px;
background: var(--oro);
color: var(--noche);
font-weight: 600;
}
body.piel .saltar:focus { left: 0; }
body.piel :focus-visible {
outline: 2px solid var(--oro-texto);
outline-offset: 3px;
}
body.piel .piel-portada :focus-visible { outline-color: var(--oro); }
body.piel .tira-piel {
position: fixed;
top: 22px;
right: 22px;
z-index: 8;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100vw - 44px);
padding: 10px 20px 10px 10px;
border: 0;
border-radius: 2px;
background: rgb(18 16 15 / 0.95);
box-shadow: inset 0 0 0 1px var(--oro), 0 18px 40px -26px #000;
backdrop-filter: blur(8px);
animation: piel-entra 0.5s ease-out 0.7s backwards;
}
@keyframes piel-entra {
from { opacity: 0; transform: translateY(-14px); }
to   { opacity: 1; transform: none; }
}
body.piel .tira-piel .tira-asesor-foto {
width: 40px;
height: 40px;
border-radius: 2px;
object-fit: cover;
}
body.piel .tira-piel .tira-asesor-inicial {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 2px;
background: var(--noche-suave);
box-shadow: inset 0 0 0 1px var(--oro);
color: var(--oro);
font-size: 14px;
font-weight: 500;
}
body.piel .tira-piel strong {
display: block;
color: var(--marfil);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.25;
}
body.piel .tira-piel .tira-asesor-cargo {
display: block;
margin-top: 2px;
color: var(--oro);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
body.piel .tira-piel .tira-asesor-frase {
display: block;
margin-top: 2px;
color: var(--gris-noche);
font-size: 11px;
}
@media (max-width: 720px) {
body.piel .tira-piel {
top: 12px;
right: 12px;
max-width: 62vw;
padding: 8px 15px 8px 8px;
gap: 9px;
}
body.piel .tira-piel .tira-asesor-foto,
body.piel .tira-piel .tira-asesor-inicial { width: 32px; height: 32px; font-size: 12px; }
body.piel .tira-piel strong {
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.piel .tira-piel .tira-asesor-frase { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body.piel .tira-piel { animation: none; }
}
body.piel .piel-portada {
position: relative;
padding-block: 120px 108px;
overflow: hidden;
background: var(--noche);
color: var(--marfil);
}
body.piel:has(.tira-piel) .piel-portada { padding-top: 138px; }
@media (max-width: 720px) {
body.piel:has(.tira-piel) .piel-portada { padding-top: 104px; }
}
body.piel .piel-brillo {
position: absolute;
top: -220px;
right: -180px;
width: 760px;
height: 760px;
border-radius: 50%;
background: radial-gradient(circle at 40% 60%, rgb(176 141 87 / 0.22), transparent 62%);
pointer-events: none;
animation: piel-gira 50s ease-in-out infinite;
}
@keyframes piel-gira {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
50%      { transform: translate(-58px, 34px) scale(1.09); opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
body.piel .piel-brillo { animation: none; }
}
body.piel .piel-portada-dentro { position: relative; }
@media (min-width: 1060px) {
body.piel .piel-portada-dentro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 332px);
gap: 48px;
align-items: center;
}
}
body.piel .piel-arte { display: none; }
@media (min-width: 1060px) {
body.piel .piel-arte { display: block; justify-self: end; width: 100%; max-width: 332px; }
}
body.piel .piel-arte-rotulo {
margin: 0 0 18px;
color: var(--oro);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
}
body.piel .piel-arte-rutina { display: block; width: 100%; height: auto; }
body.piel .piel-hilo { stroke: var(--linea); stroke-width: 1.5; }
body.piel .piel-hilo-tuyo {
stroke: var(--oro);
stroke-width: 2.5;
animation: piel-traza 0.7s ease-out backwards 0.4s;
}
body.piel .piel-paso {
fill: var(--marfil);
stroke: var(--linea);
stroke-width: 1.5;
animation: piel-punto 0.4s ease-out backwards;
animation-delay: calc(0.55s + var(--i) * 0.08s);
}
body.piel .piel-paso-tuyo { fill: var(--oro); stroke: var(--oro); }
@keyframes piel-traza {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes piel-punto {
from { opacity: 0; }
to   { opacity: 1; }
}
body.piel .piel-arte-leyenda {
display: grid;
gap: 12px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
body.piel .piel-arte-leyenda li {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
color: var(--gris-noche);
font-size: 13.5px;
font-weight: 300;
}
body.piel .piel-arte-leyenda li::before {
content: '';
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--marfil);
box-shadow: inset 0 0 0 1.5px var(--linea);
}
body.piel .piel-arte-leyenda li.piel-arte-tuyo { color: var(--marfil); font-weight: 400; }
body.piel .piel-arte-leyenda li.piel-arte-tuyo::before {
background: var(--oro);
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
body.piel .piel-hilo-tuyo,
body.piel .piel-paso { animation: none; }
}
body.piel .piel-encima {
display: inline-block;
margin: 0 0 26px;
padding-bottom: 8px;
border-bottom: 1px solid var(--oro);
color: var(--oro);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
}
body.piel .piel-titular {
max-width: 18ch;
margin: 0;
font-size: clamp(34px, 5.6vw, 62px);
font-weight: 300;
line-height: 1.14;
letter-spacing: -0.01em;
text-wrap: balance;
}
body.piel .piel-resalte {
display: block;
margin-top: 10px;
color: var(--oro);
}
body.piel .piel-entrada {
max-width: 58ch;
margin: 28px 0 0;
color: var(--gris-noche);
font-size: clamp(15px, 1.7vw, 17.5px);
font-weight: 300;
line-height: 1.85;
}
body.piel .piel-botones {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 36px;
}
body.piel .piel-boton,
body.piel .lan-boton {
display: inline-block;
text-wrap: balance;
text-align: center;
padding: 16px 32px;
border: 1px solid var(--oro);
border-radius: 2px;
background: var(--oro);
color: var(--noche);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
body.piel .piel-boton:hover,
body.piel .lan-boton:hover { background: transparent; color: var(--oro); transform: translateY(-2px); }
}
body.piel .piel-boton:active,
body.piel .lan-boton:active { transform: translateY(0); }
body.piel .piel-claro .piel-boton,
body.piel .lan-boton {
border-color: var(--tinta);
background: var(--tinta);
color: var(--marfil);
}
@media (hover: hover) {
body.piel .piel-claro .piel-boton:hover,
body.piel .lan-boton:hover { background: transparent; color: var(--tinta); }
}
body.piel .piel-boton-linea {
border-color: rgb(250 247 243 / 0.35);
background: transparent;
color: var(--marfil);
}
@media (hover: hover) {
body.piel .piel-boton-linea:hover { background: transparent; border-color: var(--marfil); color: var(--marfil); }
}
body.piel .piel-tira {
border-bottom: 1px solid var(--linea);
background: var(--marfil);
padding-block: 30px;
}
body.piel .piel-tira-dentro {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body.piel .piel-tira-dentro div {
padding-left: 18px;
border-left: 1px solid var(--oro);
}
body.piel .piel-tira-dentro strong {
display: block;
font-size: clamp(20px, 2.3vw, 26px);
font-weight: 300;
letter-spacing: 0.01em;
}
body.piel .piel-tira-dentro span {
display: block;
margin-top: 5px;
color: var(--gris);
font-size: 13.5px;
}
body.piel .piel-seccion { padding-block: clamp(58px, 8vw, 96px); }
body.piel .piel-claro {
background: var(--marfil-hondo);
border-block: 1px solid var(--linea);
}
body.piel .piel-rotulo {
margin: 0 0 14px;
color: var(--oro-texto);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
}
body.piel .piel-titulo {
max-width: 24ch;
margin: 0 0 30px;
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 300;
line-height: 1.22;
text-wrap: balance;
}
body.piel .piel-parrafo {
max-width: 62ch;
margin: 0 0 16px;
color: var(--gris);
font-size: 16px;
font-weight: 300;
line-height: 1.85;
}
body.piel .piel-rejilla {
display: grid;
gap: 1px;
background: var(--linea);
border: 1px solid var(--linea);
}
@media (min-width: 560px) {
body.piel .piel-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
body.piel .piel-rejilla { grid-template-columns: repeat(4, 1fr); }
}
body.piel .piel-tarjeta {
padding: 30px 26px;
background: var(--marfil);
transition: background-color 0.2s ease;
}
@media (hover: hover) {
body.piel .piel-tarjeta:hover { background: var(--oro-suave); }
}
body.piel .piel-tarjeta h3 {
margin: 0 0 10px;
font-size: 17px;
font-weight: 500;
letter-spacing: 0.02em;
}
body.piel .piel-tarjeta p {
margin: 0;
color: var(--gris);
font-size: 14.5px;
font-weight: 300;
line-height: 1.75;
}
body.piel .piel-pasos {
display: grid;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) {
body.piel .piel-pasos { grid-template-columns: repeat(3, 1fr); }
}
body.piel .piel-pasos li {
padding-top: 22px;
border-top: 1px solid var(--oro);
}
body.piel .piel-numero {
display: block;
margin-bottom: 12px;
color: var(--oro-texto);
font-size: 30px;
font-weight: 300;
line-height: 1;
}
body.piel .piel-pasos h3 {
margin: 0 0 8px;
font-size: 19px;
font-weight: 500;
}
body.piel .piel-pasos p {
margin: 0;
color: var(--gris);
font-size: 15px;
font-weight: 300;
line-height: 1.8;
}
body.piel .piel-dos {
display: grid;
gap: 36px;
align-items: start;
}
@media (min-width: 860px) {
body.piel .piel-dos { grid-template-columns: 1.35fr 1fr; gap: 56px; }
}
body.piel .piel-lista {
margin: 0;
padding: 0;
list-style: none;
}
body.piel .piel-lista li {
padding: 14px 0;
border-bottom: 1px solid var(--linea);
font-size: 15px;
font-weight: 300;
line-height: 1.6;
}
body.piel .piel-lista li:first-child { border-top: 1px solid var(--linea); }
body.piel .piel-negocio {
padding-block: clamp(52px, 7vw, 80px);
background: var(--noche);
color: var(--marfil);
}
body.piel .piel-negocio .piel-rotulo { color: var(--oro); }
body.piel .piel-negocio .piel-titulo { color: var(--marfil); margin-bottom: 22px; }
body.piel .piel-negocio .piel-parrafo { color: var(--gris-noche); }
body.piel .piel-negocio .piel-parrafo a {
color: var(--oro);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
font-weight: 500;
}
body.piel .piel-negocio .piel-parrafo a:hover,
body.piel .piel-negocio .piel-parrafo a:focus-visible {
color: var(--marfil);
}
body.piel .piel-contacto {
padding-block: clamp(58px, 8vw, 96px);
background: var(--marfil-hondo);
}
body.piel .piel-contacto-dentro {
display: grid;
gap: 36px;
}
@media (min-width: 900px) {
body.piel .piel-contacto-dentro { grid-template-columns: 0.85fr 1.15fr; gap: 52px; }
}
body.piel .piel-firma {
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--oro);
color: var(--gris);
font-size: 15px;
font-weight: 300;
}
body.piel .piel-firma strong { color: var(--tinta); font-weight: 500; }
body.piel .lan-formulario {
display: grid;
gap: 18px;
padding: 34px;
border: 1px solid var(--linea);
border-radius: 2px;
background: var(--marfil);
}
@media (min-width: 620px) {
body.piel .lan-formulario { grid-template-columns: 1fr 1fr; }
body.piel .lan-ancho { grid-column: 1 / -1; }
}
body.piel .lan-formulario label { display: grid; gap: 7px; }
body.piel .lan-formulario label > span {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gris);
}
body.piel .lan-formulario label em {
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0.06em;
}
body.piel .lan-formulario input,
body.piel .lan-formulario select,
body.piel .lan-formulario textarea {
width: 100%;
padding: 11px 2px;
border: 0;
border-bottom: 1px solid var(--linea);
border-radius: 0;
background: transparent;
color: var(--tinta);
font-family: inherit;
font-size: 15.5px;
font-weight: 300;
}
body.piel .lan-formulario textarea { resize: vertical; line-height: 1.7; }
body.piel .lan-formulario input:focus,
body.piel .lan-formulario select:focus,
body.piel .lan-formulario textarea:focus { border-bottom-color: var(--oro-texto); }
body.piel .lan-formulario input::placeholder,
body.piel .lan-formulario textarea::placeholder { color: #8b847b; }
body.piel .lan-peticiones {
border: 0;
padding: 0;
margin: 0;
}
body.piel .lan-peticiones legend {
padding: 0;
margin-bottom: 10px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gris);
}
body.piel .lan-peticiones label {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
border-bottom: 1px solid var(--linea);
cursor: pointer;
transition: background-color 0.18s, border-color 0.18s;
}
body.piel .lan-peticiones input {
width: 16px;
height: 16px;
flex: 0 0 auto;
padding: 0;
border: 0;
accent-color: var(--oro-texto);
}
body.piel .lan-peticiones label > span {
font-size: 15.5px;
font-weight: 300;
line-height: 1.6;
letter-spacing: normal;
text-transform: none;
color: var(--tinta);
}
body.piel .lan-peticiones label:hover { background: var(--marfil-hondo); }
body.piel .lan-peticiones label:has(input:checked) {
border-bottom-color: var(--oro);
background: var(--oro-suave);
}
body.piel .lan-peticiones label:has(input:checked) > span {
font-weight: 400;
color: var(--oro-texto);
}
body.piel .lan-peticiones input:focus-visible { outline-offset: 3px; }
body.piel .lan-enviar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin-top: 10px;
}
body.piel .lan-legal {
flex: 1 1 240px;
margin: 0;
color: var(--gris);
font-size: 12px;
font-weight: 300;
line-height: 1.7;
}
body.piel .lan-legal a { color: var(--oro-texto); }
body.piel .lan-error {
grid-column: 1 / -1;
margin: 0;
padding: 13px 16px;
border-left: 2px solid #a33224;
background: #f7e9e6;
color: #8a2418;
font-size: 14px;
}
body.piel .piel-gracias {
grid-column: 1 / -1;
padding: 44px;
border: 1px solid var(--oro);
background: var(--marfil);
}
body.piel .piel-cierre {
padding-block: 34px;
background: var(--noche);
color: var(--gris-noche);
font-size: 12.5px;
font-weight: 300;
}
body.piel .piel-cierre p { margin: 0 0 8px; }
body.piel .piel-cierre-legal { max-width: 76ch; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
body.piel .piel-boton:hover,
body.piel .lan-boton:hover { transform: none !important; }
}
body.piel .lan-dudas {
display: grid;
gap: 10px;
max-width: 78ch;
}
body.piel .lan-duda {
border: 1px solid var(--linea);
border-radius: 2px;
background: var(--marfil);
}
body.piel .lan-duda summary {
cursor: pointer;
padding: 16px 20px;
color: var(--tinta);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
}
body.piel .lan-duda[open] summary { color: var(--oro-texto); }
body.piel .lan-duda p {
margin: 0;
padding: 0 20px 18px;
color: var(--gris);
font-size: 15px;
line-height: 1.75;
}
body.piel .piel-destellos {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
body.piel .piel-destellos span {
position: absolute;
bottom: -20px;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgb(212 175 110 / 0.9);
box-shadow: 0 0 10px 2px rgb(190 154 100 / 0.42);
animation: piel-sube 24s linear infinite;
}
body.piel .piel-destellos span:nth-child(1) { left: 16%; animation-duration: 24s; animation-delay: 0s; }
body.piel .piel-destellos span:nth-child(2) { left: 34%; animation-duration: 31s; animation-delay: 7s; width: 3px; height: 3px; }
body.piel .piel-destellos span:nth-child(3) { left: 68%; animation-duration: 27s; animation-delay: 13s; }
body.piel .piel-destellos span:nth-child(4) { left: 86%; animation-duration: 35s; animation-delay: 4s; width: 4px; height: 4px; }
@keyframes piel-sube {
0%   { transform: translate(0, 0); opacity: 0; }
14%  { opacity: 1; }
86%  { opacity: 0.85; }
100% { transform: translate(-30px, -100vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.piel .piel-destellos { display: none; }
}
@media (max-width: 760px) {
body.piel .piel-destellos span:nth-child(2),
body.piel .piel-destellos span:nth-child(4) { display: none; }
}
body.piel {
--flota-fondo: var(--oro);
--flota-tinta: var(--noche);
--flota-fondo-hover: var(--oro-texto);
--flota-foco: var(--oro);
--flota-radio: 2px;
--flota-sombra: 0 10px 28px rgb(0 0 0 / 0.55);
}
body.piel {
--gracias-acento: var(--oro-texto);
--tes-fondo: #fff;
--tes-borde: var(--linea);
--tes-texto: var(--gris);
--tes-firma: var(--tinta);
--tes-rotulo: var(--oro-texto);
--tes-rotulo-opacidad: 1;
--tes-mas: var(--oro-texto);
--tes-radio: 0;
--tes-sombra: none;
}