/*
Theme Name: Skinloor
Theme URI: https://skinloor.com
Author: Impacto SEO
Description: Tema a medida para Skinloor (cosmetica facial natural). Home editorial premium, sin page builder.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: skinloor
*/


  * { box-sizing: border-box; }
  #sl-stage h1, #sl-stage h2 { text-transform:uppercase; letter-spacing:.05em !important; }
  #sl-stage h1 span[style*="italic"], #sl-stage h2 span[style*="italic"] { font-family:'Encode Sans', sans-serif !important; font-style:normal !important; font-weight:300 !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-size:1em !important; }
  body { margin: 0; }
  a { color: inherit; text-decoration: none; }
  a:hover { opacity: .8; }
  @keyframes sl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .hslide { position:absolute; inset:0; opacity:0; transition:opacity 1.6s cubic-bezier(.4,0,.2,1); will-change:opacity; }
  .hslide.on { opacity:1; }
  .htext { position:absolute; left:72px; top:50%; transform:translateY(calc(-50% + 24px)); display:flex; flex-direction:column; gap:26px; max-width:620px; z-index:3; opacity:0; pointer-events:none; transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
  .htext.on { opacity:1; pointer-events:auto; transform:translateY(-50%); }
  #sl-herodots [data-hdot].on { background:#1a1712 !important; }
  #sl-hero .htext a { transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
  #sl-hero .htext a[style*="background:#1a1712"]:hover { background:#c8a25b !important; opacity:1; transform:translateY(-2px); }
  #sl-hero .htext a[style*="border:1px solid"]:hover { border-color:#1a1712 !important; background:#1a1712; color:#ffffff !important; opacity:1; transform:translateY(-2px); }

  @keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes sl-scrollcue { 0% { transform: translateY(0); opacity:0; } 30% { opacity:1; } 100% { transform: translateY(16px); opacity:0; } }
  @keyframes sl-rise { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }
  #pcView, #pcView2 { scrollbar-width: none; }
  #pcView::-webkit-scrollbar, #pcView2::-webkit-scrollbar { display: none; }
  .pcard { position:relative; overflow:hidden; }
  .pcard img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
  .pcard:hover img { transform: scale(1.07); }
  .cat img { transition: transform 1s cubic-bezier(.16,1,.3,1); }
  .cat:hover img { transform: scale(1.06); }
  .cat .cat-line { transition: width .5s cubic-bezier(.16,1,.3,1); }
  .cat:hover .cat-line { width: 84px; }
  .tcard { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .tcard:hover { transform: translateY(-6px); }
  .tcard .tico { transition: background .45s ease, color .45s ease, border-color .45s ease; }
  .tcard:hover .tico { background:#1a1712; color:#c8a25b; border-color:#1a1712; }
  .spanel { flex:1 1 0; transition: flex-grow .7s cubic-bezier(.16,1,.3,1); }
  .spanel:hover { flex-grow: 2.6; }
  .spanel img { transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
  .spanel:hover img { transform: scale(1.08); }
  .spanel .sp-ov { transition: opacity .6s ease; }
  .spanel:hover .sp-ov { opacity:.34; }
  .spanel .sp-desc { max-height:0; opacity:0; overflow:hidden; transition: max-height .7s cubic-bezier(.16,1,.3,1), opacity .5s ease, margin-top .6s ease; }
  .spanel:hover .sp-desc { max-height:120px; opacity:1; margin-top:12px; }
  .spanel .sp-line { width:28px; transition: width .6s cubic-bezier(.16,1,.3,1); }
  .spanel:hover .sp-line { width:64px; }
  .spanel .sp-num { transition: color .5s ease; }
  .spanel:hover .sp-num { color:#c8a25b; }
  .igt { position: relative; display: block; overflow: hidden; background: #f2efe9; }
  .igt img { width:100%; height:100%; object-fit:cover; display:block; }
  .igt .ov { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(26,23,18,.44); color:#f5f1e8; opacity:0; transition:opacity .35s ease; }
  .igt:hover .ov { opacity:1; }
  .igt .ov span { display:inline-flex; align-items:center; gap:7px; font-family:'Encode Sans',sans-serif; font-size:16px; }
  #sl-grain { position:fixed; inset:0; z-index:9996; pointer-events:none; opacity:.04; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  #sl-cursor, #sl-cursor-ring { position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; mix-blend-mode:difference; }
  #sl-cursor { width:7px; height:7px; background:#fff; transform:translate(-50%,-50%); }
  #sl-cursor-ring { width:38px; height:38px; border:1px solid rgba(255,255,255,.75); transform:translate(-50%,-50%); transition:width .28s ease, height .28s ease, background .28s ease; }
  .sl-reveal { opacity:0; transform:translateY(40px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
  .sl-reveal.in { opacity:1; transform:none; }
  .sl-char { display:inline-block; transform:translateY(110%); opacity:0; transition:transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease; }
  .sl-char.in { transform:none; opacity:1; }
  ::selection { background:#c8a25b; color:#ffffff; }
  @keyframes sl-kb { from { transform:scale(1.07); } to { transform:scale(1); } }
  .hslide.on { animation: sl-kb 9s ease-out both; }
  .pcard { position:relative; overflow:hidden; }
  .pcard img { transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
  .pcard:hover img:first-child { transform:scale(1.05); }
  .pcard img.alt { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
  .pcard:hover img.alt { opacity:1; }
  .cat img { transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
  .cat:hover img { transform:scale(1.06); }
  .cat-line { transition: width .6s cubic-bezier(.16,1,.3,1); }
  .cat:hover .cat-line { width:84px !important; }
  #sl-news input:focus { border-color:#c8a25b !important; }
  #sl-progress { position:fixed; top:0; left:0; height:2px; width:0; background:#c8a25b; z-index:9998; }
  #sl-mini { position:fixed; top:0; left:0; right:0; z-index:9990; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid rgba(26,23,18,.08); transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
  #sl-mini.show { transform:translateY(0); }
  #sl-mini > div { padding:12px 40px !important; border-bottom:none !important; }
  #sl-mini img { height:34px !important; }
  .sl-clip { clip-path:inset(0 0 100% 0); transition:clip-path 1.3s cubic-bezier(.16,1,.3,1); }
  .sl-clip.in { clip-path:inset(0 0 0% 0); }
  #sl-hero > div:nth-child(2) > div:first-child a, #sl-mini > div > div:first-child a { position:relative; }
  #sl-hero > div:nth-child(2) > div:first-child a::after, #sl-mini > div > div:first-child a::after { content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:#c8a25b; transform:scaleX(0); transform-origin:right center; transition:transform .4s cubic-bezier(.16,1,.3,1); }
  #sl-hero > div:nth-child(2) > div:first-child a:hover::after, #sl-mini > div > div:first-child a:hover::after { transform:scaleX(1); transform-origin:left center; }
  #sl-hero > div:first-child:hover > div { animation-play-state:paused; }
  #sl-news button:hover { background:#c8a25b !important; }
  @media (hover:none) { #sl-cursor, #sl-cursor-ring { display:none; } }
  @media (max-width:1200px){
    #sl-hero h1{font-size:60px !important;}
    .htext{max-width:520px;}
    #sl-best [data-pc-card], #sl-more [data-pc-card]{flex:0 0 calc((100% - 60px)/3) !important;}
    #sl-best h2, #sl-more h2, #sl-insta h2{font-size:44px !important;}
    #novedad{grid-template-columns:1fr !important;}
    #sl-ofertas{grid-template-columns:1fr !important;}
    #sl-philo h2{font-size:54px !important;}
    #sl-metodo h2{font-size:50px !important;}
    #sl-news h2{font-size:46px !important;}
    #sl-philo span[style*="font-size: 280px"]{font-size:190px !important;}
    #novedad > div:last-child{min-height:640px;}
    #sl-ofertas > div:first-child{min-height:560px !important;}
    #sl-metodo{background-position:420px center !important;}
  }
  @media (max-width:720px){
    #sl-hero{height:auto !important;}
    #sl-hero > div:nth-child(3){min-height:640px;}
    #sl-hero > div:nth-child(2){padding:14px 20px !important; gap:14px !important;}
    #sl-hero > div:nth-child(2) > div:first-child{gap:12px !important; font-size:11px !important;}
    .htext{left:24px; right:24px; max-width:none;}
    #sl-hero h1{font-size:38px !important;}
    #sl-hero p{font-size:16px !important;}
    #sl-hero span[style*="writing-mode"]{display:none;}
    #sl-herodots{left:24px !important;}
    #sl-serv{padding:20px 24px !important;}
    #sl-serv > div{flex-wrap:wrap; gap:18px !important; justify-content:flex-start !important;}
    #sl-serv span[style*="width: 1px"]{display:none;}
    #sl-best, #sl-more{padding:56px 24px !important;}
    #sl-best > div:first-child, #sl-more > div:first-child{flex-wrap:wrap; gap:18px;}
    #sl-best h2, #sl-more h2, #sl-insta h2{font-size:32px !important;}
    #sl-best [data-pc-card], #sl-more [data-pc-card]{flex:0 0 76% !important;}
    #sl-cats{grid-template-columns:1fr !important;}
    #sl-cats .cat{height:420px !important;}
    #novedad > div:nth-child(2){padding:56px 24px !important;}
    #novedad h2{font-size:38px !important;}
    #novedad [style*="height: 702px"]{height:480px !important;}
    #sl-ofertas > div:last-child{padding:40px 24px !important;}
    #sl-ofertas > div:first-child{min-height:480px !important;}
    #sl-ofertas h2{font-size:36px !important;}
    #sl-philo{padding:64px 24px 56px !important;}
    #sl-philo h2{font-size:34px !important;}
    #sl-philo span[style*="width: 160px"]{display:none;}
    #sl-philo > div{flex-wrap:wrap;}
    #sl-philo span[style*="font-size: 280px"]{font-size:90px !important;}
    #sl-metodo{height:auto !important; background-image:none !important; background-color:#ECEDEF !important;}
    #sl-metodo > div{padding:56px 24px !important;}
    #sl-metodo h2{font-size:34px !important;}
    #sl-metodo div[style*="right: 96px"]{display:none;}
    #sl-metodo .sl-reveal{flex-wrap:wrap;}
    #sl-insta > div:first-child{padding:0 24px 28px !important; flex-wrap:wrap; gap:16px;}
    #sl-insta [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr) !important; padding:0 24px !important;}
    #sl-news{padding:64px 24px !important;}
    #sl-news h2{font-size:32px !important;}
    #sl-news form{flex-direction:column;}
    footer{padding:48px 24px 0 !important;}
    footer > div:first-child{grid-template-columns:1fr !important; gap:32px !important;}
    footer > div:nth-child(2){flex-wrap:wrap; gap:12px !important;}
    footer div[style*="margin: 20px -72px"]{margin:16px -24px 0 !important;}
    #sl-hero > div:nth-child(2){flex-wrap:wrap; row-gap:12px;}
    #sl-hero > div:nth-child(2) > div:first-child{order:3; flex:1 0 100% !important; justify-content:center;}
    #sl-hero > div:nth-child(2) img{height:40px !important;}
    #sl-hero > div:nth-child(3){min-height:700px;}
    #sl-hero > div:nth-child(3) > div:nth-child(2){background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.5) 42%, rgba(255,255,255,.94) 72%, #ffffff 100%) !important;}
    .htext{top:auto !important; bottom:104px; transform:none !important; gap:18px;}
    #sl-heroslides img{object-position:62% 18% !important;}
    #novedad > div:last-child{min-height:520px;}
    #sl-ofertas [style*="width: 160px"]{width:96px !important; height:96px !important;}
    #sl-ofertas [style*="font-size: 21px"]{font-size:18px !important;}
    #sl-news form button{width:100%;}
    #sl-philo [style*="margin-top: -44px"]{flex-wrap:wrap; justify-content:center;}
    #sl-metodo [style*="gap: 56px"]{gap:28px !important;}
  }